Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WYSIWYM Editor #426

Open
rafalp opened this issue Sep 14, 2014 · 2 comments
Open

WYSIWYM Editor #426

rafalp opened this issue Sep 14, 2014 · 2 comments
Labels
area: backend This issue involves Python, Django or dependency (eg. database) area: frontend This issue involves JavaScript, React.js and Node feature: editor UI for inputing messages by users new feature New feature

Comments

@rafalp
Copy link
Owner

rafalp commented Sep 14, 2014

While originally I was mulling over replacing Misago's custom editor (that has snippets of code going back all the way to my 2006 forum software "Callisto" that my cousin has writen for me) with either Medium Editor or Draft.js, ultimately I've decided to go with ProseMirror that seems to fit the bill most:

  • WYSIWYM editor that operates on node graphs instead of DOM
  • been around for a while and is battletested as well as has examples and community around it
  • supports tree node graph which should make it easier to implement quotes and spoilers than on, say, draft.js
  • plays nice with React.js components

This task will be paradigm switch for Misago:

  • messages sources will be stored as JSON structures
  • they will still be preparsed to html for initial render speed
  • they will need new checksuming tactic to protect from malicious post json injection
  • database migrations for posts will get complex to understand as they'll get changed to use JSON in new initial migration, and only offer html to JSON migration for those who started out on older versions.

Fallback editor

Old textarea-based editor will still remain, and users will be able to toggle between either, with difference that textarea editor will be parsed to markdown in client and will also emit JSON structure on change. That way we'll be able to rely on much more solid node libraries for message preparation, and replace somewhat hacky parsing setup with something simpler and using less dependencies.

Lastly, fallback editor will be always enabled for Android users (and possibly iOS too) due to mobile browsers being plagued by some behavior differences breaking current WYSIWYM editors.

@rafalp rafalp added area: frontend This issue involves JavaScript, React.js and Node feature: editor UI for inputing messages by users labels Sep 14, 2014
@rafalp rafalp added this to the 1.0 General Availability Release milestone Sep 14, 2014
@rafalp rafalp modified the milestone: 1.0 General Availability Release Mar 7, 2016
@rafalp rafalp changed the title Rich text editor Use ProseMirror for WYSIWYM editor, drop MarkDown/BBCode Mar 18, 2017
@rafalp rafalp added area: backend This issue involves Python, Django or dependency (eg. database) refactor labels Mar 18, 2017
This was referenced Mar 18, 2017
@rafalp rafalp changed the title Use ProseMirror for WYSIWYM editor, drop MarkDown/BBCode New messages editor Apr 22, 2018
@rafalp rafalp changed the title New messages editor WYSIWYM Editor Apr 22, 2018
@rafalp rafalp added this to the Single Page Application milestone Jun 3, 2018
@rafalp rafalp added new feature New feature and removed refactor labels Aug 16, 2018
@rafalp
Copy link
Owner Author

rafalp commented Jan 5, 2023

Facebook now develops Lexical.js as replacement for Draft.js, and that seems much better choice due to its development with one eye to React.js and rich examples library.

@rafalp rafalp removed this from the Single Page Application milestone Apr 4, 2023
@rafalp
Copy link
Owner Author

rafalp commented Aug 7, 2024

We obviously can't have markup parser in the client if we want to support posting without JavaScript. If we went this route we would have to update our parser to emit same JSON structure as ProseMirror. But this task has low priority for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: backend This issue involves Python, Django or dependency (eg. database) area: frontend This issue involves JavaScript, React.js and Node feature: editor UI for inputing messages by users new feature New feature
Projects
None yet
Development

No branches or pull requests

1 participant