search

etesync / etesync-notes

An EteSync backed note taking app
https://www.etesync.com
Other
86 stars 13 forks source link

Add a rich text editor #29

Open tasn opened 3 years ago

tasn commented 3 years ago

Probably want to use something like https://github.com/ianstormtaylor/slate We want markdown syntax highlighting and a toolbar

zecakeh commented 3 years ago

I've been working on this the past few weeks and here are my findings:

Native Rich Text Editor

There doesn't seem to be a well-known and well-maintained package.

JS Rich Text Editors in WebViews

There are nice candidates with good looking UIs that work well on web: tui.editor (includes a WYSIWYG, a syntax highlighted markdown editor and a viewer), QuillJS, CKEditor, DraftJS… They all seem to have some issues with Chrome Mobile and/or GBoard and it's autocorrect: the view jumps when the cursor moves, impossible to add new lines after wrong words according to autocorrect, strange cursor jumping or text editing when pressing enter… It's also valid for syntax highlighting editors it seems

What's left

Build our own editor that uses a multiline TextInput and styles the text with Text components (Views are not supported).

Just integrating a toolbar should be easy enough.

Unless someone can think of something else of course…

tasn commented 3 years ago

The issues you describe all sound related to using managed react components rather than non-managed. Are you using managed (so the content and setContent), or you using not managed (getting the content only upon request)? I bet that if you try not using the content and setContent, all of a sudden everything will magically work.

zecakeh commented 3 years ago

I never came to the part where I managed them actually. Those are all issues I have in Chrome Android when I visit the demo pages of the editors, and that remained when I tried to bundle some of them in a WebView.

tasn commented 3 years ago

Oh wow, that's terrible. :|

kepta commented 3 years ago

They all seem to have some issues with Chrome Mobile and/or GBoard and it's autocorrect:

I would like to point out Prosemirror does fairly well with autocorrect and mobile support. If you are interested you can give https://github.com/bangle-io/bangle.dev a try. It is a library I wrote on top of Prosemirror to make it easier to get started with.

andreas1107 commented 3 years ago

This may be a different take than a rich text editor but IMO even preferable. Tasks.org uses Markwon: https://noties.io/Markwon/docs/v4/editor/#getting-started-with-editor

https://github.com/tasks/tasks/issues/878

tasn commented 3 years ago

Unlike tasks.org, we need a cross-platform solution that works with react native (not sure, maybe the link satisfies that, haven't checked).