search

topcoder-platform / forums

0 stars 0 forks source link

[$400] Updated editor documentation #298

Closed jmgasper closed 3 years ago

jmgasper commented 3 years ago

@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:

Screen_Shot_2020-12-16_at_11_24_01_am Screen_Shot_2020-12-16_at_11_24_48_am

Uploading

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

Screen_Shot_2020-12-16_at_11_26_56_am

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:

jmgasper commented 3 years ago

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

This is an automated message for ghostar via Topcoder X

jmgasper commented 3 years ago

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 commented 3 years ago

@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: image

SimpleMDE

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

jmgasper commented 3 years ago

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

jmgasper commented 3 years ago

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

atelomycterus commented 3 years ago

@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?

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

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

  3. (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.

  4. 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 (https://github.com/sparksuite/simplemde-markdown-editor/issues/672):

Markdown-it

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

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

jmgasper commented 3 years ago

@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 commented 3 years ago

@rootelement: any thoughts? ☝️

jmgasper commented 3 years ago

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

This is an automated message for ghostar via Topcoder X

atelomycterus commented 3 years ago

@jmgasper Additional important notes.

SimpleMDE doesn't work on mobile

I decided to check SimpleMDE repo and find out how many issues there are on mobile. At least it should work and there should be no serious bugs. Actually, SimpleMDE has a bunch of issues on mobile.

Some open issues:

All issues were created 2-5 years ago and they haven't been fixed. The project being inactive since May 2017.

In several response, folks wrote 'Switching to the EasyMDE fork solved the mobile issues for me'.

EasyMDE

EasyMDE(easymde.tk) is a continuation of SimpleMDE. The github repo is https://github.com/Ionaru/easy-markdown-editor. So this branch is 490 commits ahead of SimpleMDE(master). This project is alive. image

About EasyMDE fork: image