alohaeditor/Aloha-Editor — Issue #360: Caret navigation around noneditable inline blocks inside editables
Author: AlbertHilb
Created: 2011-11-26 01:08:13+00:00
State: open

Hi everyone,

my name is Raffaele. I'm an Italian physicist and by no means a javascript expert.
Anyway I would write a math plugin based on MathJax and on the Aloha-block plugin.
Unfortunately, at the moment, Aloha-blocks have some issues that must be fixed to make them really usable.
In particular there are problems with caret navigation around blocks inside editables.
I experimented with the block demo of the *dev-blocks* branch: if you position the caret on the left of an inline block (for example on the left of the *Big can of fresh Aloha soup (27 €)* span within *(1)Non-editable (2)Inline Blocks (3)inside editable* section of the mentioned demo) and then press the right arrow key, the caret doesn't jump to the right end of the block as expected.
In fact, it disappears and if you keep hitting arrow keys you get the following error message in the console:

Aloha: Error message: Script error.
URL:
Line Number: 0
alohaeditor-Aloha-Editor-358da85/src/lib/aloha/console.js
Line 140

I investigated the cause of the above problem and I found the following event sequence:

1. When you press the right arrow key, `Aloha.Markup.processCursor()` selects the whole block. At the moment the selection contains a range whose `startContainer` and `endContainer` are the block parent element, the `startOffset` is the block index within its parent children and the `endOffset` is the `startOffset` plus one.
2. `GENTICS.Utils.RangeObject.correctRange()` moves the `endContainer` to the rightmost text node inside the block without checking if it is editable. In the *Big can of fresh...* example the `endContainer` is moved to the *(27 €)* text node.
3. `Aloha.Selection._updateSelection()` removes the selection range since the `endContainer` is a text node and it is located inside a non-editable element.

The above sequence explains why the caret disappears and the error messages.
I think `GENTICS.Utils.RangeObject.correctRange` method should check if the element on the left of the range end is editable, before moving the `endContainer` to a text node inside it.
if you want I can try to write a patch to fix that.

Thanks...

Raffaele