[FIX] AbstractNode: check contenteditable attribute on formats too

```html
<p contenteditable>
    <a contenteditable="false">text</a>
</p>
```
Prior to this fix, the `contenteditable="false"` was being ignored by
`DomLayout` and `FontAwesomeDomObjectRenderer` because it was on a
format and not a node.

Author: Zynton

packages/core/src/JWEditor.ts

@@ -4,17 +4,17 @@ import { Core } from './Core';
 import { ContextManager, Context } from './ContextManager';
 import { VSelection } from './VSelection';
 import { VRange } from './VRange';
-import { isConstructor } from '../../utils/src/utils';
+import { isConstructor, isContentEditable } from '../../utils/src/utils';
 import { Keymap } from '../../plugin-keymap/src/Keymap';
 import { StageError } from '../../utils/src/errors';
 import { ContainerNode } from './VNodes/ContainerNode';
 import { AtomicNode } from './VNodes/AtomicNode';
 import { SeparatorNode } from './VNodes/SeparatorNode';
-import { ModeIdentifier, ModeDefinition, Mode } from './Mode';
+import { ModeIdentifier, ModeDefinition, Mode, RuleProperty } from './Mode';
 import { Memory, ChangesLocations } from './Memory/Memory';
 import { makeVersionable } from './Memory/Versionable';
 import { VersionableArray } from './Memory/VersionableArray';
-import { Point } from './VNodes/VNode';
+import { Point, VNode } from './VNodes/VNode';
 
 export enum EditorStage {
     CONFIGURATION = 'configuration',
@@ -179,6 +179,14 @@ export class JWEditor {
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * Return true if the target node is within an editable context.
+     *
+     * @param target
+     */
+    isInEditable(node: VNode): boolean {
+        return isContentEditable(node) || this.mode.is(node, RuleProperty.EDITABLE);
+    }
     /**
      * Load the given plugin with given configuration.
      *

packages/core/src/VNodes/AbstractNode.ts

@@ -28,6 +28,13 @@ export abstract class AbstractNode extends EventMixin {
      */
     get editable(): boolean {
         if (this._editable === false) return false;
+        const modifiers = this.modifiers.filter(mod => 'modifiers' in mod);
+        const lastModifierWithContentEditable = modifiers.reverse().find(modifier => {
+            return hasContentEditable(modifier);
+        });
+        if (lastModifierWithContentEditable) {
+            return isContentEditable(lastModifierWithContentEditable);
+        }
         return (
             !this.parent ||
             (hasContentEditable(this.parent)

packages/plugin-dom-layout/src/DomLayout.ts

@@ -15,14 +15,15 @@ import { ZoneXmlDomParser } from './ZoneXmlDomParser';
 import { LayoutContainerDomObjectRenderer } from './LayoutContainerDomObjectRenderer';
 import { ZoneIdentifier, ZoneNode } from '../../plugin-layout/src/ZoneNode';
 import { Keymap } from '../../plugin-keymap/src/Keymap';
-import { CommandIdentifier, CommandParams } from '../../core/src/Dispatcher';
+import { CommandIdentifier } from '../../core/src/Dispatcher';
 import { ActionableDomObjectRenderer } from './ActionableDomObjectRenderer';
 import { ActionableGroupDomObjectRenderer } from './ActionableGroupDomObjectRenderer';
 import { ActionableGroupSelectItemDomObjectRenderer } from './ActionableGroupSelectItemDomObjectRenderer';
 import { LabelDomObjectRenderer } from './LabelDomObjectRenderer';
 import { SeparatorDomObjectRenderer } from './SeparatorDomObjectRenderer';
 import { RuleProperty } from '../../core/src/Mode';
 import { isContentEditable, nodeName, isInstanceOf } from '../../utils/src/utils';
+import { VNode } from '../../core/src/VNodes/VNode';
 
 const FocusAndBlurEvents = ['selectionchange', 'blur', 'focus', 'mousedown', 'touchstart'];
 
@@ -163,9 +164,10 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
     }
 
     /**
-     * Return true if the target node is inside Jabberwock's main editable Zone.
+     * Return true if the target node is inside Jabberwock's main editable Zone
+     * and within an editable context.
      *
-     * @param target: Node
+     * @param target
      */
     isInEditable(target: Node): boolean {
         const layout = this.dependencies.get(Layout);
@@ -186,7 +188,7 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         // the editable part of Jabberwock.
         return (
             node &&
-            (isContentEditable(node) || this.editor.mode.is(node, RuleProperty.EDITABLE)) &&
+            this.editor.isInEditable(node) &&
             !!node.ancestor(node => node instanceof ZoneNode && node.managedZones.includes('main'))
         );
     }

packages/plugin-fontawesome/src/FontAwesomeDomObjectRenderer.ts

@@ -8,8 +8,6 @@ import {
     DomObjectElement,
 } from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
 import { RenderingEngineWorker } from '../../plugin-renderer/src/RenderingEngineCache';
-import { RuleProperty } from '../../core/src/Mode';
-import { CharNode } from '../../plugin-char/src/CharNode';
 
 const zeroWidthSpace = '\u200b';
 
@@ -98,8 +96,8 @@ export class FontAwesomeDomObjectRenderer extends NodeRenderer<DomObject> {
      */
     shouldAddNavigationHelpers(node: FontAwesomeNode): boolean {
         const range = this.engine.editor.selection.range;
-        // Is parent editable.
-        if (node.parent && !range.mode.is(node.parent, RuleProperty.EDITABLE)) {
+
+        if (!this.engine.editor.isInEditable(node)) {
             return false;
         }
         // Is node next to range.

packages/plugin-fontawesome/test/FontAwesome.test.ts

@@ -101,6 +101,66 @@ describePlugin(FontAwesome, testEditor => {
                 contentAfter: '<p>a[b]c<i class="fa fa-pastafarianism"></i></p>',
             });
         });
+        it('should insert navigation helpers when before a fontawesome, in an editable', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p>abc[]<i class="fa fa-pastafarianism"></i></p>',
+                contentAfter: '<p>abc[]\u200B<i class="fa fa-pastafarianism"></i>\u200B</p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p>[]<i class="fa fa-pastafarianism"></i></p>',
+                contentAfter: '<p>\u200B[]<i class="fa fa-pastafarianism"></i>\u200B</p>',
+            });
+        });
+        it('should insert navigation helpers when after a fontawesome, in an editable', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p><i class="fa fa-pastafarianism"></i>[]abc</p>',
+                contentAfter: '<p>\u200B<i class="fa fa-pastafarianism"></i>\u200B[]abc</p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p><i class="fa fa-pastafarianism"></i>[]</p>',
+                contentAfter: '<p>\u200B<i class="fa fa-pastafarianism"></i>\u200B[]</p>',
+            });
+        });
+        it('should not insert navigation helpers when not adjacent to a fontawesome, in an editable', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p>ab[]c<i class="fa fa-pastafarianism"></i></p>',
+                contentAfter: '<p>ab[]c<i class="fa fa-pastafarianism"></i></p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p><i class="fa fa-pastafarianism"></i>a[]bc</p>',
+                contentAfter: '<p><i class="fa fa-pastafarianism"></i>a[]bc</p>',
+            });
+        });
+        it('should not insert navigation helpers when adjacent to a fontawesome in contenteditable=false container', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="false">abc[]<i class="fa fa-pastafarianism"></i></p>',
+                contentAfter: '<p contenteditable="false">abc<i class="fa fa-pastafarianism"></i></p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="false"><i class="fa fa-pastafarianism"></i>[]abc</p>',
+                contentAfter: '<p contenteditable="false"><i class="fa fa-pastafarianism"></i>abc</p>',
+            });
+        });
+        it('should not insert navigation helpers when adjacent to a fontawesome in contenteditable=false format', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="true"><b contenteditable="false">abc[]<i class="fa fa-pastafarianism"></i></b></p>',
+                contentAfter: '<p contenteditable="true"><b contenteditable="false">abc<i class="fa fa-pastafarianism"></i></b></p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="true"><b contenteditable="false"><i class="fa fa-pastafarianism"></i>[]abc</b></p>',
+                contentAfter: '<p contenteditable="true"><b contenteditable="false"><i class="fa fa-pastafarianism"></i>abc</b></p>',
+            });
+        });
+        it('should not insert navigation helpers when adjacent to a fontawesome in contenteditable=false format (nested)', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="true"><a contenteditable="true"><b contenteditable="false">abc[]<i class="fa fa-pastafarianism"></i></b></a></p>',
+                contentAfter: '<p contenteditable="true"><a contenteditable="true"><b contenteditable="false">abc<i class="fa fa-pastafarianism"></i></b></a></p>',
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: '<p contenteditable="true"><a contenteditable="true"><b contenteditable="false"><i class="fa fa-pastafarianism"></i>[]abc</b></a></p>',
+                contentAfter: '<p contenteditable="true"><a contenteditable="true"><b contenteditable="false"><i class="fa fa-pastafarianism"></i>abc</b></a></p>',
+            });
+        });
     });
     describe('deleteForward', () => {
         describe('Selection collapsed', () => {

packages/utils/src/utils.ts

@@ -1,6 +1,7 @@
 import { AbstractNode } from '../../core/src/VNodes/AbstractNode';
 import { Attributes } from '../../plugin-xml/src/Attributes';
 import JWEditor from '../../core/src/JWEditor';
+import { Modifier } from '../../core/src/Modifier';
 
 export type Constructor<T> = new (...args) => T;
 
@@ -14,23 +15,28 @@ export function isConstructor<T extends Function>(constructor, superClass: T): c
     return constructor.prototype instanceof superClass || constructor === superClass;
 }
 /**
- * Return true if the node has the `contentEditable` attribute.
+ * Return true if the node or modifier has a modifier with the `contentEditable`
+ * attribute.
  *
- * @param node
+ * @param nodeOrModifier
  */
-export function hasContentEditable(node: AbstractNode): boolean {
-    return node.modifiers.find(Attributes)?.has('contentEditable') || false;
+export function hasContentEditable(nodeOrModifier: AbstractNode | Modifier): boolean {
+    if ('modifiers' in nodeOrModifier) {
+        return nodeOrModifier.modifiers.find(Attributes)?.has('contentEditable') || false;
+    }
 }
 /**
- * Return true if the node has the `contentEditable` attribute set to true. This
- * implies that its children are editable but it is not necessarily itself
- * editable.
+ * Return true if the node or modifier has a modifier with the `contentEditable`
+ * attribute set to true. This implies that its children are editable but it is
+ * not necessarily itself editable.
  *
  * TODO: unbind from `Attributes`.
  */
-export function isContentEditable(node: AbstractNode): boolean {
-    const editable = node.modifiers.find(Attributes)?.get('contentEditable');
-    return editable === '' || editable?.toLowerCase() === 'true' || false;
+export function isContentEditable(nodeOrModifier: AbstractNode | Modifier): boolean {
+    if ('modifiers' in nodeOrModifier) {
+        const editable = nodeOrModifier.modifiers.find(Attributes)?.get('contentEditable');
+        return editable === '' || editable?.toLowerCase() === 'true' || false;
+    }
 }
 /**
  * Return true if object a is deep equal to object b, false otherwise.