Enable spellcheck for EasyMDE, use contenteditable mode

[wxiaoguang]

As the title.

Fix #18532

• web interface - spellchecker of the browser not available #18532

And: CodeMirror docs indicate that "contenteditable" be the future default on Desktop as well, so it's good to use contenteditable from now on.

Tested browsers:

• Chrome: works
• Firefox: works
• Safari: works (Enable spellcheck for EasyMDE, use contenteditable mode #19776 (comment))

[silverwind]

Seems to work again on Firefox Mac when triggering spellcheck via context menu.

contenteditable generally makes me wary, but CodeMirror docs indicate that it'll be the future default on Desktop as well, so I trust their implementation to be stable enough.

[jolheiser]

I believe this was disabled for various reasons related to SimpleMDE.
#9619
#10729

Perhaps the native one wasn't available back then? I don't recall.
Just posting here for context, I'm generally in favor of enabling it. 🙂

[tyroneyeh]

Turning on the upload function of this image will not work

[wxiaoguang]

Turning on the upload function of this image will not work

Yup, as mentions in the Problems / TODO section:

the image paste and other features need to be rewritten.

[tyroneyeh]

Sorry i didn't notice, i tried changing it and it seems to work,
This attache patch is base on release/v1.16 branch for reference

ImagePaste.zip

[wxiaoguang]

Awesome 👍 I applied your patch.

I will do more tests with it later and confirm some details (eg: $(document).on('paste', '.CodeMirror', ... seems to be executed more than one time). Feel free to suggest more 😊

---

Hmm ... maybe initCompImagePaste and initEasyMDEImagePaste should be merged together. 🤔️

[tyroneyeh]

Sorry for my patch but didn't work in the edit comments :(

[tyroneyeh]

Sorry for my patch but didn't work in the edit comments :(

Edit problem is my modify indexer.go issue, please skip it

[wxiaoguang]

Sorry for my patch but didn't work in the edit comments :(

Never mind, I fixed them all.

[tyroneyeh]

Safari is work

[wxiaoguang]

Safari is work

Thank you for confirming. I think this PR is ready for review.

[jolheiser]

🎺 🤖

[wxiaoguang]

(FYI: the last force-push brings no change, the last commit is still 7c44a3a)

[wxiaoguang]

This feature has been deployed on try.gitea.io

Feel free to test it and report bugs.

If there is something broken seriously, we should either fix it or revert this feature. Hopefully everything goes well.

[tyroneyeh]

There is a chance of missing characters in the Linux ibus input method framework

[wxiaoguang]

Besides Linux IME, the mobile IME may also be affected: Contenteditable on Android is the Absolute Worst

If the EasyMDE/CodeMirror still has difficulty to work correctly in some browsers, then it's worth to add a default editor mode option (before the CodeMirror can be fixed or replaced totally), use a simple textarea editor instead of the CodeMirror.

[silverwind]

If the UI would remember the switch to textarea per-user, it would be a big improvement. And yeah, there should be a server setting for the default.

[wxiaoguang]

Good idea, maybe remember it in LocalStorage is enough, then no need to write backend code.

[silverwind]

We need some simple schema-less key/value JSON ui settings in the db for ui settings like this. localStorage is a start but it should ideally sync across browers.

[delvh]

models/user/setting.go?

[silverwind]

Ah yes that seems suitable, I totally forgot we landed that :)

[tyroneyeh]

If the nativeSpellcheck default is false, an icon is added to the toolbar as a switch, do you know if there is still a problem?
{ name: 'spell-check', action(e) { const cm = e.codemirror.getTextArea().parentElement.querySelector('.CodeMirror-code'); cm.spellcheck = cm.spellcheck ? false : true; }, className: 'fa fa-check', title: 'Spell Check' }

[wxiaoguang]

The usability problem is not related to spell-check but the editor itself (inputStyle).

[tyroneyeh]

Maybe let the user check spelling by themselves, and set contenteditable to false if they continue to type

easyMDE_spellcheck.zip

[techknowlogick]

locking this, as closed PRs are the best place to ensure conversation is lost/not visible to everyone. please open a new ticket to discuss.