Merge pull request #5558 from BookStackApp/lexical_round3

Lexical Fixes: Round 3

resources/js/components/page-editor.js

@@ -112,7 +112,7 @@ export class PageEditor extends Component {
     }
 
     savePage() {
-        this.container.closest('form').submit();
+        this.container.closest('form').requestSubmit();
     }
 
     async saveDraft() {

resources/js/components/wysiwyg-editor.js

@@ -25,6 +25,7 @@ export class WysiwygEditor extends Component {
                 textDirection: this.$opts.textDirection,
                 translations,
             });
+            window.wysiwyg = this.editor;
         });
 
         let handlingFormSubmit = false;
@@ -38,7 +39,9 @@ export class WysiwygEditor extends Component {
                 handlingFormSubmit = true;
                 this.editor.getContentAsHtml().then(html => {
                     this.input.value = html;
-                    this.input.form.submit();
+                    setTimeout(() => {
+                        this.input.form.requestSubmit();
+                    }, 5);
                 });
             } else {
                 handlingFormSubmit = false;

resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts

@@ -37,6 +37,7 @@ import {QuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
 import {DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
 import {EditorUiContext} from "../../../../ui/framework/core";
 import {EditorUIManager} from "../../../../ui/framework/manager";
+import {ImageNode} from "@lexical/rich-text/LexicalImageNode";
 
 type TestEnv = {
   readonly container: HTMLDivElement;
@@ -484,6 +485,9 @@ export function createTestContext(): EditorUiContext {
   const editor = createTestEditor({
     namespace: 'testing',
     theme: {},
+    nodes: [
+        ImageNode,
+    ]
   });
 
   editor.setRootElement(editorDOM);

resources/js/wysiwyg/lexical/list/LexicalListNode.ts

@@ -332,7 +332,19 @@ function isDomChecklist(domNode: HTMLElement) {
   }
   // if children are checklist items, the node is a checklist ul. Applicable for googledoc checklist pasting.
   for (const child of domNode.childNodes) {
-    if (isHTMLElement(child) && child.hasAttribute('aria-checked')) {
+    if (!isHTMLElement(child)) {
+      continue;
+    }
+
+    if (child.hasAttribute('aria-checked')) {
+      return true;
+    }
+
+    if (child.classList.contains('task-list-item')) {
+      return true;
+    }
+
+    if (child.firstElementChild && child.firstElementChild.matches('input[type="checkbox"]')) {
       return true;
     }
   }

resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListNode.test.ts

@@ -6,7 +6,7 @@
  *
  */
 import {ParagraphNode, TextNode} from 'lexical';
-import {initializeUnitTest} from 'lexical/__tests__/utils';
+import {createTestContext} from 'lexical/__tests__/utils';
 
 import {
   $createListItemNode,
@@ -16,6 +16,7 @@ import {
   ListItemNode,
   ListNode,
 } from '../..';
+import {$htmlToBlockNodes} from "../../../../utils/nodes";
 
 const editorConfig = Object.freeze({
   namespace: '',
@@ -46,9 +47,8 @@ const editorConfig = Object.freeze({
 });
 
 describe('LexicalListNode tests', () => {
-  initializeUnitTest((testEnv) => {
   test('ListNode.constructor', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = $createListNode('bullet', 1);
@@ -62,7 +62,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.getTag()', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const ulListNode = $createListNode('bullet', 1);
@@ -75,7 +75,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.createDOM()', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = $createListNode('bullet', 1);
@@ -100,7 +100,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.createDOM() correctly applies classes to a nested ListNode', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode1 = $createListNode('bullet');
@@ -181,7 +181,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.updateDOM()', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = $createListNode('bullet', 1);
@@ -206,7 +206,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.append() should properly transform a ListItemNode', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = new ListNode('bullet', 1);
@@ -223,7 +223,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.append() should properly transform a ListNode', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = new ListNode('bullet', 1);
@@ -245,7 +245,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('ListNode.append() should properly transform a ParagraphNode', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = new ListNode('bullet', 1);
@@ -261,7 +261,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('$createListNode()', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = $createListNode('bullet', 1);
@@ -275,7 +275,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('$isListNode()', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const listNode = $createListNode('bullet', 1);
@@ -285,7 +285,7 @@ describe('LexicalListNode tests', () => {
   });
 
   test('$createListNode() with tag name (backward compatibility)', async () => {
-      const {editor} = testEnv;
+    const {editor} = createTestContext();
 
     await editor.update(() => {
       const numberList = $createListNode('number', 1);
@@ -294,5 +294,17 @@ describe('LexicalListNode tests', () => {
       expect(bulletList.__listType).toBe('bullet');
     });
   });
+
+  test('importDOM handles old editor expected task list format', async () => {
+    const {editor} = createTestContext();
+
+    let list!: ListNode;
+    editor.update(() => {
+      const nodes = $htmlToBlockNodes(editor, `<ul><li class="task-list-item"><input checked="" disabled="" type="checkbox"> A</li></ul>`);
+      list = nodes[0] as ListNode;
+    });
+
+    expect(list).toBeInstanceOf(ListNode);
+    expect(list.getListType()).toBe('check');
   });
 });

resources/js/wysiwyg/lexical/rich-text/LexicalImageNode.ts

@@ -133,7 +133,7 @@ export class ImageNode extends ElementNode {
 
         element.addEventListener('click', e => {
             _editor.update(() => {
-                $selectSingleNode(this);
+                this.select();
             });
         });
 

resources/js/wysiwyg/services/__tests__/keyboard-handling.test.ts

@@ -1,7 +1,7 @@
 import {
     createTestContext, destroyFromContext,
     dispatchKeydownEventForNode,
-    dispatchKeydownEventForSelectedNode,
+    dispatchKeydownEventForSelectedNode, expectNodeShapeToMatch,
 } from "lexical/__tests__/utils";
 import {
     $createParagraphNode, $createTextNode,
@@ -13,6 +13,7 @@ import {registerKeyboardHandling} from "../keyboard-handling";
 import {registerRichText} from "@lexical/rich-text";
 import {EditorUiContext} from "../../ui/framework/core";
 import {$createListItemNode, $createListNode, ListItemNode, ListNode} from "@lexical/list";
+import {$createImageNode, ImageNode} from "@lexical/rich-text/LexicalImageNode";
 
 describe('Keyboard-handling service tests', () => {
 
@@ -127,4 +128,34 @@ describe('Keyboard-handling service tests', () => {
             expect(selectedNode?.getKey()).toBe(innerList.getChildren()[0].getKey());
         });
     });
+
+    test('Images: up on selected image creates new paragraph if none above', () => {
+        let image!: ImageNode;
+        editor.updateAndCommit(() => {
+            const root = $getRoot();
+            const imageWrap = $createParagraphNode();
+            image = $createImageNode('https://example.com/cat.png');
+            imageWrap.append(image);
+            root.append(imageWrap);
+            image.select();
+        });
+
+        expectNodeShapeToMatch(editor, [{
+            type: 'paragraph',
+            children: [
+                {type: 'image'}
+            ],
+        }]);
+
+        dispatchKeydownEventForNode(image, editor, 'ArrowUp');
+
+        expectNodeShapeToMatch(editor, [{
+            type: 'paragraph',
+        }, {
+            type: 'paragraph',
+            children: [
+                {type: 'image'}
+            ],
+        }]);
+    });
 });

resources/js/wysiwyg/services/keyboard-handling.ts

@@ -3,7 +3,7 @@ import {
     $createParagraphNode,
     $getSelection,
     $isDecoratorNode,
-    COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND,
+    COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND,
     KEY_BACKSPACE_COMMAND,
     KEY_DELETE_COMMAND,
     KEY_ENTER_COMMAND, KEY_TAB_COMMAND,
@@ -43,7 +43,7 @@ function deleteSingleSelectedNode(editor: LexicalEditor) {
 }
 
 /**
- * Insert a new empty node after the selection if the selection contains a single
+ * Insert a new empty node before/after the selection if the selection contains a single
  * selected node (like image, media etc...).
  */
 function insertAfterSingleSelectedNode(editor: LexicalEditor, event: KeyboardEvent|null): boolean {
@@ -67,6 +67,34 @@ function insertAfterSingleSelectedNode(editor: LexicalEditor, event: KeyboardEve
     return false;
 }
 
+function focusAdjacentOrInsertForSingleSelectNode(editor: LexicalEditor, event: KeyboardEvent|null, after: boolean = true): boolean {
+    const selectionNodes = getLastSelection(editor)?.getNodes() || [];
+    if (!isSingleSelectedNode(selectionNodes)) {
+        return false;
+    }
+
+    event?.preventDefault();
+
+    const node = selectionNodes[0];
+    const nearestBlock = $getNearestNodeBlockParent(node) || node;
+    let target = after ? nearestBlock.getNextSibling() : nearestBlock.getPreviousSibling();
+
+    editor.update(() => {
+        if (!target) {
+            target = $createParagraphNode();
+            if (after) {
+                nearestBlock.insertAfter(target)
+            } else {
+                nearestBlock.insertBefore(target);
+            }
+        }
+
+        target.selectStart();
+    });
+
+    return true;
+}
+
 /**
  * Insert a new node after a details node, if inside a details node that's
  * the last element, and if the cursor is at the last block within the details node.
@@ -199,8 +227,13 @@ export function registerKeyboardHandling(context: EditorUiContext): () => void {
         return handleInsetOnTab(context.editor, event);
     }, COMMAND_PRIORITY_LOW);
 
+    const unregisterUp = context.editor.registerCommand(KEY_ARROW_UP_COMMAND, (event): boolean => {
+        return focusAdjacentOrInsertForSingleSelectNode(context.editor, event, false);
+    }, COMMAND_PRIORITY_LOW);
+
     const unregisterDown = context.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event): boolean => {
-        return insertAfterDetails(context.editor, event);
+        return insertAfterDetails(context.editor, event)
+            || focusAdjacentOrInsertForSingleSelectNode(context.editor, event, true)
     }, COMMAND_PRIORITY_LOW);
 
     return () => {
@@ -208,6 +241,7 @@ export function registerKeyboardHandling(context: EditorUiContext): () => void {
         unregisterDelete();
         unregisterEnter();
         unregisterTab();
+        unregisterUp();
         unregisterDown();
     };
 }

resources/js/wysiwyg/utils/lists.ts

@@ -1,6 +1,6 @@
 import {$createTextNode, $getSelection, BaseSelection, LexicalEditor, TextNode} from "lexical";
 import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection} from "./selection";
-import {nodeHasInset} from "./nodes";
+import {$sortNodes, nodeHasInset} from "./nodes";
 import {$createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode} from "@lexical/list";
 
 
@@ -49,16 +49,11 @@ export function $unnestListItem(node: ListItemNode): ListItemNode {
     }
 
     const laterSiblings = node.getNextSiblings();
-
     parentListItem.insertAfter(node);
     if (list.getChildren().length === 0) {
         list.remove();
     }
 
-    if (parentListItem.getChildren().length === 0) {
-        parentListItem.remove();
-    }
-
     if (laterSiblings.length > 0) {
         const childList = $createListNode(list.getListType());
         childList.append(...laterSiblings);
@@ -69,23 +64,54 @@ export function $unnestListItem(node: ListItemNode): ListItemNode {
         list.remove();
     }
 
+    if (parentListItem.getChildren().length === 0) {
+        parentListItem.remove();
+    }
+
     return node;
 }
 
 function getListItemsForSelection(selection: BaseSelection|null): (ListItemNode|null)[] {
     const nodes = selection?.getNodes() || [];
-    const listItemNodes = [];
+    let [start, end] = selection?.getStartEndPoints() || [null, null];
 
+    // Ensure we ignore parent list items of the top-most list item since,
+    // although technically part of the selection, from a user point of
+    // view the selection does not spread to encompass this outer element.
+    const itemsToIgnore: Set<string> = new Set();
+    if (selection && start) {
+        if (selection.isBackward() && end) {
+            [end, start] = [start, end];
+        }
+
+        const startParents = start.getNode().getParents();
+        let foundList = false;
+        for (const parent of startParents) {
+            if ($isListItemNode(parent)) {
+                if (foundList) {
+                    itemsToIgnore.add(parent.getKey());
+                } else {
+                    foundList = true;
+                }
+            }
+        }
+    }
+
+    const listItemNodes = [];
     outer: for (const node of nodes) {
         if ($isListItemNode(node)) {
+            if (!itemsToIgnore.has(node.getKey())) {
                 listItemNodes.push(node);
+            }
             continue;
         }
 
         const parents = node.getParents();
         for (const parent of parents) {
             if ($isListItemNode(parent)) {
+                if (!itemsToIgnore.has(parent.getKey())) {
                     listItemNodes.push(parent);
+                }
                 continue outer;
             }
         }
@@ -110,7 +136,8 @@ function $reduceDedupeListItems(listItems: (ListItemNode|null)[]): ListItemNode[
         }
     }
 
-    return Object.values(listItemMap);
+    const items = Object.values(listItemMap);
+    return $sortNodes(items) as ListItemNode[];
 }
 
 export function $setInsetForSelection(editor: LexicalEditor, change: number): void {

resources/js/wysiwyg/utils/nodes.ts

@@ -94,6 +94,30 @@ export function $getNearestNodeBlockParent(node: LexicalNode): LexicalNode|null
     return $findMatchingParent(node, isBlockNode);
 }
 
+export function $sortNodes(nodes: LexicalNode[]): LexicalNode[] {
+    const idChain: string[] = [];
+    const addIds = (n: ElementNode) => {
+        for (const child of n.getChildren()) {
+            idChain.push(child.getKey())
+            if ($isElementNode(child)) {
+                addIds(child)
+            }
+        }
+    };
+
+    const root = $getRoot();
+    addIds(root);
+
+    const sorted = Array.from(nodes);
+    sorted.sort((a, b) => {
+        const aIndex = idChain.indexOf(a.getKey());
+        const bIndex = idChain.indexOf(b.getKey());
+        return aIndex - bIndex;
+    });
+
+    return sorted;
+}
+
 export function nodeHasAlignment(node: object): node is NodeHasAlignment {
     return '__alignment' in node;
 }

resources/sass/_editor.scss

@@ -370,8 +370,10 @@ body.editor-is-fullscreen {
   display: inline-block;
   outline: 2px dashed var(--editor-color-primary);
   direction: ltr;
+  pointer-events: none;
 }
 .editor-node-resizer-handle {
+  pointer-events: auto;
   position: absolute;
   display: block;
   width: 10px;