inputStyle = contenteditable, we may hope for browser spell checking?

1

Hello.

I’ve just found that code mirror 5+ supports contenteditable. With disabled native spell checking (field.setAttribute(“spellcheck”, “false”):wink:

So I’ve got a few questions about it:

  1. why do you disable contenteditable for desktops? what exact problems does it have?
  2. why do you disable spellchecking for contenteditable?
  3. when we may have stable contenteditable for desktops?

Thank you for you great editor, and thanks in advance for reply. )

1 Like
2

1 why do you disable contenteditable for desktops? what exact problems does it have?

It is terribly buggy on older browsers, so the textarea mode has to stay for the time being. And the contenteditable mode is a rather scary new bunch of hacks, and so far I haven’t felt safe pushing it on all desktop users, since they’ll be bitten by all the new bugs. I am planning to make it the default in the next major release, for modern browser, and start calling textarea mode ‘legacy’, but first I’ll need to be able to allocate the time needed to actually deal with the bug fallout that’ll produce.

2 why do you disable spellchecking for contenteditable?

For consistency. I’d be happy to expose this as an option, and document that it only works in contenteditable mode. A pull request to that effect would be welcome. My experiences with ProseMirror suggest that combining this kind of constant-redrawing display style with spell check works relatively well.

3 when we may have stable contenteditable for desktops?

Who knows. If everything goes well for me, maybe later this year, but with shakily funded work like this, I can’t make promises.

3

  • Is there a way to re-enable the disabled spellcheck attribute above without modifying CM code ?

  • Is there any more experience with how well spellcheck work in that case (on desktops) ?

  • I feel spellcheck is an essential feature, even for a code editor, is there any effort/plan to offcially add it to CM ?

Thx!

4

I created https://github.com/codemirror/CodeMirror/pull/4113

This really just for demonstartion and I don’t need should be merged in.

to use:

cm = CodeMirror(elem, {
	  inputStyle: "contenteditable",
	  spellcheck: true,

see demo https://plnkr.co/edit/oy23zvjHqpLd7DPbBwQL?p=preview

Behaviour ATM is quite buggy, mistyped words on the line lose and gain their red indicator but I could not find the logic for that, why would that happen ? also the cursor position after fixing a typo seem to go to a random position ! any help with that ?

I think what happens is that CM redraws the text which makes the browser not highlight typos after that.

5

You could do editor.getInputField().spellcheck = true afte creating the editor.

Not terribly well, as the browser’s normal way to see what you edited doesn’t work, but it might still be useful.

No.

1 Like
6

I doubt the contentEditable spellchecking will ever work, it seems the standard allows browsers a lot of freedom in how/when they spellcheck. Chrome seems to only spellcheck in response to user input events. Since CM sometimes redraws the text after user input it seems in those cases chrome will not spellcheck the redrawn text. I expect other browsers to give poor results as well.

I created a spellchecker with typo correction here:

https://gist.github.com/kofifus/4b2f79cadc871a29439d919692099406

Demo: Plunkr

hope this helps

7

Here’s a CodeMirror 6 extension to set spellcheck=true on the editor:

new EditorView({
  state: EditorState.create({
    doc: markdown,
    extensions: [
      EditorView.contentAttributes.of((view) => {
        view.contentDOM.spellcheck = true;
        return null;
      })
    ]
  })
})

Happy to hear if there’s another (better) way to do this :slight_smile:

8

That’s not how you use contentAttributes. You want contentAttributes.of({spellcheck: "true"}) instead.

1 Like