[$400] Updated editor documentation

[jmgasper]

@rootelement / @atelomycterus - I'd like to get some thoughts on an updated editor. Here's where I think we could improve things, at least from a user perspective. If you have ideas of things that could work better from a code / maintenance perspective, I'd also like to get those logged. If you have thoughts on how we may be able to implement some of this, please let me know.

Essentially, what I'm thinking is the Github editor seen for issues, with the addition of Latex support, if possible.

If we can reuse any existing JS plugins, like https://simplemde.com , that'll give us a head start.

https://github.com/benweet/stackedit claims to support Latex

Markdown first

Our members are familiar with markdown and lots of them, myself included, can write markdown efficiently. I'd like markdown to be the preferred / default editing mode for the editor

Remove the side thing

I'm not a fan of the side display in the editor. I think it's confusing and atypical for editors. Something along the top would make more sense, like in Github, Gitlab, or even the SimpleMDE editor:

Uploading

Uploading can be done like we have in Github / Gitlab. That will be the most familiar to users, I think.

Latex

We have a request from the data science / marathon folks to support Latex. I'm not sure how we'd integrate that into the editor, but I'm open to suggestions.

Preview

The ability to preview before posting is important.

User tagging

We should be able to tag users with @<username>, and the names displayed should be:

• Coloured with the member rank of the member
• Linked to the member's profile page on TC
• Filtered with the list from Topcoder, not Vanilla

[jmgasper]

Contest https://www.topcoder.com/challenges/30158306 has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Contest https://www.topcoder.com/challenges/30158306 has been updated - it has been assigned to obog.

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper @rootelement

Editor Programming API

We also need to take into account editor Programming API.
Need to check whether an editor can be expanded, not only add a simple new button in a toolbar,
but the ability write a custom parser, handle events and so on.
This would add Latex support, @mention, uploading links and others.

Supporting Latex

Stackedit renders Latex using KaTex ( https://github.com/KaTeX/KaTeX , https://katex.org/).
KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11.
It has auto-render extension which automatically render all of the math inside of text.

We have a request from the data science / marathon folks to support Latex.

The list of supported functions. Could data science / marathon folks check the list of supported functions?

Stackedit

Stackedit has a lot of functions that are not needed at all. It works offline just like any desktop application. StackEdit can sync files with Google Drive, Dropbox and GitHub and so on. We need to check whether we can use only what we need. For example, do not use Workspace, sync with the server. The editor is available online:

SimpleMDE

At first glance, SimpleMDE looks exactly what we need, without overloaded functionality:

• has a preview
• renders text in html. We need it for emails as well.
• has Programming API + throws events, so we can catch the following list of events:
  
• configure a custom parser:
  
• has custom styling

[jmgasper]

@atelomycterus - Ok, cool, thanks. SimpleMDE was my thought as well, plus it's still actively developed.

[jmgasper]

@atelomycterus - Do you think it would be possible to integrate in Latex processing into SimpleMDE?

[atelomycterus]

@jmgasper

Additional notes

1. html (preview) rendering speed. It would be nice to check how the editor works with a large post. Use as much markup as possible. Benchmark: compare the speed of work in preview mode/html mode.

Is there a requirement for this part?

2. With a large post, autosaving is an important feature.

3. Ability to perform async calls from an editor (e.g. find by Topcoder handle)

4. (Optional) PHP Wrapper, e.g. in Vanilla we check user permissions. if user doesn't have permissions to upload files => don't render upload button.

5. Markdown syntax. Preview/Outside the editor, text is html. Inside the editor is markdown.
   What internal format is. What will it be stored in DB? The internal format of the editor may not necessarily be markdown.

Is there a requirement for this part?

Latex

I've seen several posts about integrating SimpleMDE with Katex or other libs.
The main issue is that the SimpleMDE doesn't have a configuration param to exclude the text within given delimiters.
For example, $$ is used for math equations which are then processed by Latex libs.
Workaround (sparksuite/simplemde-markdown-editor#672):

• wrap math scripts with triple ticks and math
• after converting these to markdown, replace pre and code blocks with only p tag.

Markdown-it

From this article, Markdown-it (github)caught my attention as a Markdown parser. In terms of extending, it is more flexible

• syntax extensions
• plugin loading
• community fixes bugs/requests actively
• community-written plugins https://www.npmjs.com/search?q=keywords:markdown-it

SimpleMDE looks prettier from the user's point of view. SimpleMDE uses Marked (https://marked.js.org/) as a default built-in parser. Perhaps folks change the default parser, because it doesn't have enough flexibility to expand.
I'd try to use SimpleMDE as an editor for Markdown text and Markdown-it as a custom parser. Then

• check Markdown-it with Katex plugin and speed rendering
• check async calls from an editor

[jmgasper]

@atelomycterus - Great, thanks for that!

Is there a requirement for this part?
With a large post, autosaving is an important feature.

I think we should have auto-saving, yes, but that's not high priority to start. Something to think about though

Ability to perform async calls from an editor (e.g. find by Topcoder handle)

Yeah, we definitely want to make things "snappy" from a performance perspective. The faster / leaner things are, the happier the community will be

(Optional) PHP Wrapper, e.g. in Vanilla we check user permissions. if user doesn't have permissions to upload files => don't render upload button.

Upload permissions is a big one and something we'll have to support

Markdown syntax. Preview/Outside the editor, text is html. Inside the editor is markdown.
What internal format is. What will it be stored in DB? The internal format of the editor may not necessarily be markdown.

I think this comes down to performance. If it's fine to store markdown and it doesn't drag down rendering speed, that's fine. If it's faster to store HTML, we should do that. My concern is about editing, if we store HTML. We need to make sure the user can come back and edit posts easily.

[jmgasper]

@rootelement: any thoughts? ☝️

[jmgasper]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30158306

This is an automated message for ghostar via Topcoder X