JavaScript error when clicking on a non editable Node

[dpobel]

That's fairly easy to reproduce. Run AlloyEditor on a DOM Node containing a node with contenteditable="false" and click on it. The console displays:

Uncaught TypeError: Cannot read property 'startNode' of undefined

This is happening because the code behind getSelectionData (called in uicore.js when firing the editorInteraction) assumes the caret is always there while that's not the case if you have non editable region in the editor.

[ipeychev]

Hey @dpobel,

Thanks for your report! What exactly do you mean with "if you have non editable region in the editor"? Could you provide an example?

Thanks,

[dpobel]

yes you can do that by setting up AlloyEditor to edit a div containing 2 paragraphs and one has contenteditable="false":

<div id="editable">
<p>I'm editable</p>
<p contenteditable="false">I'm not editable, but if you click on me, an error is visible in the console</p>
</div>

<script>
AlloyEditor.editable('editable');
</script>

[ipeychev]

Interesting. Okay, we will accept this as a bug. For curiosity - why is such a markup useful? What are you trying to achieve?

Also, look on the following screencast - at least for me the when you click on an element with contenteditable set to false, there is no error. There is an error when you are trying to execute some command. This happens only in Firefox, in Chrome for example it doesn't. Is that what you meant?

@dpobel
Thanks,

[dpobel]

OK just retested and indeed the steps to reproduce are a bit different without my custom code (sorry for that).

So without any custom code and in addition to the case you found, the JavaScript error happens when you select a portion of the non editable paragraph and then click on it, see the following screencast:

Now for your curiosity ;-)

My main use case for having contenteditable=false elements is what we call embed elements. embed elements are basically high level widgets that are used to include some content coming from the repository in our rich text fields. In the editor, those embed are a kind of preview of another content so the user is not suppose to edit that directly, however he should be able to change some properties with custom toolbar, buttons and UI. That's why we need to have non editable region inside the editor.

I have a second use case (actually it's the one I'm working on right now) but I'm unsure if the non editable thing is the best way to achieve it. Basically at the end of the editable region I'm supposed to have a "Create content button" that is always there no matter if the editor has the focus or not and when the user clicks on it, he gets a toolbar similar to the "add toolbar" bundled in AlloyEditor.

[ipeychev]

Okay, that makes sense. Then, we will work on a solution.

[ipeychev]

The question is - what would you expect to happen when you click on a non-editable area? In this case I would say our toolbars should not appear at all.

Btw, as soon as we finish #280, you will be able to implement Widgets in your code.

@dpobel

[dpobel]

I agree without you, by default no toolbar should appear but this leads to another related question: what happen if for instance, you have a selection and the Style toolbar is visible and then you click on a non editable area ? I would expect the selection to be cancelled and thus the toolbar to be hidden but some might have a different opinion on that.

[ipeychev]

Yes, I would expect the same.