updated denest transform to handle nesting inside lists, removed imag…

…e-specific denest in koenig-lexical
TryGhost · Oct 18, 2023 · 58b8c51 · 58b8c51
1 parent 4a848d7
commit 58b8c51
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 28 deletions.
diff --git a/packages/kg-default-transforms/package.json b/packages/kg-default-transforms/package.json
@@ -32,6 +32,7 @@
     "typescript": "5.2.2"
   },
   "dependencies": {
+    "@lexical/list": "^0.12.2",
     "@lexical/rich-text": "^0.12.2",
     "@lexical/utils": "^0.12.2",
     "@tryghost/kg-default-nodes": "^0.2.3",

diff --git a/packages/kg-default-transforms/src/default-transforms.ts b/packages/kg-default-transforms/src/default-transforms.ts
@@ -5,6 +5,7 @@ import {mergeRegister} from '@lexical/utils';
 import {$createParagraphNode, ParagraphNode} from 'lexical';
 import {$createHeadingNode, $createQuoteNode, HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {ExtendedHeadingNode} from '@tryghost/kg-default-nodes';
+import {ListItemNode, $createListItemNode, ListNode, $createListNode} from '@lexical/list';
 
 export * from './transforms/denest.js';
 export * from './transforms/remove-alignment.js';
@@ -21,6 +22,8 @@ export function registerDefaultTransforms(editor: LexicalEditor) {
         registerDenestTransform(editor, ParagraphNode, () => ($createParagraphNode())),
         registerDenestTransform(editor, HeadingNode, node => ($createHeadingNode(node.getTag()))),
         registerDenestTransform(editor, ExtendedHeadingNode, node => ($createHeadingNode(node.getTag()))),
-        registerDenestTransform(editor, QuoteNode, () => ($createQuoteNode()))
+        registerDenestTransform(editor, QuoteNode, () => ($createQuoteNode())),
+        registerDenestTransform(editor, ListNode, node => ($createListNode(node.getListType(), node.getStart()))),
+        registerDenestTransform(editor, ListItemNode, () => ($createListItemNode()))
     );
 }
diff --git a/packages/kg-default-transforms/src/transforms/denest.ts b/packages/kg-default-transforms/src/transforms/denest.ts
@@ -1,12 +1,13 @@
-import {ElementNode, $createParagraphNode, LexicalEditor, LexicalNode, Klass} from 'lexical';
+import {$isListItemNode, $isListNode} from '@lexical/list';
+import {ElementNode, $createParagraphNode, LexicalEditor, LexicalNode, Klass, $getRoot} from 'lexical';
 
 export type CreateNodeFn<T extends LexicalNode> = (originalNode: T) => T;
 
 export function denestTransform<T extends ElementNode>(node: T, createNode: CreateNodeFn<T>) {
     const children = node.getChildren();
 
     const hasInvalidChild = children.some((child: LexicalNode) => {
-        return child.isInline && !child.isInline();
+        return !$isListNode(child) && !$isListItemNode(child) && child.isInline && !child.isInline();
     });
 
     if (!hasInvalidChild) {
@@ -26,7 +27,7 @@ export function denestTransform<T extends ElementNode>(node: T, createNode: Crea
 
     // pull out any non-inline children as we don't support nested element nodes
     children.forEach((child: LexicalNode) => {
-        if (child.isInline && !child.isInline()) {
+        if (!$isListNode(child) && !$isListItemNode(child) && child.isInline && !child.isInline()) {
             if (currentElementNode.getChildrenSize() > 0) {
                 tempParagraph.append(currentElementNode);
                 currentElementNode = createNode(node);
@@ -42,10 +43,17 @@ export function denestTransform<T extends ElementNode>(node: T, createNode: Crea
         tempParagraph.append(currentElementNode);
     }
 
+    // find the top-level parent to insert nodes after in case of deeper nesting,
+    // e.g. images inside lists
+    let parent = node;
+    while (parent.getParent() && parent.getParent() !== $getRoot()) {
+        parent = parent.getParentOrThrow();
+    }
+
     // reverse because we can only insertAfter the current paragraph
-    // so we need to insert the first child last to maintain order
+    // so we need to insert the first child last to maintain order.
     tempParagraph.getChildren().reverse().forEach((child) => {
-        node.insertAfter(child);
+        parent.insertAfter(child);
     });
 
     // remove the original paragraph

diff --git a/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx
@@ -1344,28 +1344,6 @@ function useKoenigBehaviour({editor, containerElem, cursorDidExitAtTop, isNested
         );
     }, [editor]);
 
-    // make sure ImageNode is a top-level node
-    React.useEffect(() => {
-        if (!editor.hasNodes([ImageNode])) {
-            return;
-        }
-        return mergeRegister(
-            editor.registerNodeTransform(ImageNode, (node) => {
-                // return if ImageNode is already a top-level node
-                if (node.getParent() === $getRoot()) {
-                    return;
-                }
-
-                let parent = node;
-                while (parent.getParent() !== $getRoot()) {
-                    parent = parent.getParent();
-                }
-
-                parent.insertAfter(node);
-            })
-        );
-    }, [editor]);
-
     // remove alignment formats and denest invalid node nesting
     React.useEffect(() => {
         return registerDefaultTransforms(editor);