4

Background:

My program offers smart brace completion, that is automatic addition of a ] on typing a [.

Problem:

Consider this scenario:

enter image description here

Notice the editor on the left where the caret is placed. As you can see in the Inspect Element on the right, the caret is placed right between two consecutive <br>s. There is no text node or element node between them. The caret belongs to neither of the <br>s. It is a no-man's land. What is surprising is that the caret belongs to the parent editor!

enter image description here

Above you can see range.startContainer and range.endContainer both point to the parent content editable editor div.editor.show. Also, the second print line that mentions 2 is the caret position that I got using range.startOffset. I have a faint guess that the 2 refers to one text node and one <br> that precede the caret.

What happens due to problem:

The second ] that has to be inserted after [ gets inserted at the second index in the entire div.editor, meaning right after Th at the beginning. So, after I locate my caret in the no-man's land and press [, this happens:

enter image description here

Question:

How am I supposed to detect and provide a fix for this no-man's land problem?

JSFiddle

Note: this does not occur in <textarea>s.

Gaurang Tandon
  • 6,504
  • 11
  • 47
  • 84
  • First, I'd recommend you to add a fiddle if it's possible so that we can play with the issue and try our guesses/recomendations. Second, have you tried to insert zero-width space/nbsp after a `
    ` when it is created/inserted?     – YakovL May 27 '16 at 15:41
  • @YakovL I've added the fiddle. But suppose the `
    ` was present in the text beforehand. Then, it's no use checking if a br was created or inserted.     – Gaurang Tandon May 28 '16 at 04:40
  • Why, you can add those symbols on load, too.. (and append text nodes http://stackoverflow.com/questions/7378097/add-text-before-or-after-an-html-element after http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library each one) – YakovL May 28 '16 at 09:43
  • Ok, I understand, I can do `.querySelector` to check for two consecutive `
    `s and then insert an ` ` between them? But I don't want to modify what the user is writing. So, how about inserting an empty text node instead?     – Gaurang Tandon May 28 '16 at 12:34
  • I'm not sure if you can put cursor into an *empty* text node, but you can try (it where zero-width space is used by some browsers). By the way, have you considered using Medium.js? I've read their article about ContentEditable (https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480) recently and it sounds like your issue is one of the many that their lib addresses – YakovL May 29 '16 at 11:38
  • Ok, now I know more about ranges and selections and I think I know how to fix this. But for not to write some "guess answer", please add the auto-completion code to your fiddle so that I can test my idea. You should probably show it here anyway. – YakovL Jul 30 '16 at 14:46

0 Answers0