extracted list-merging transform to kg-default-transforms

TryGhost · Oct 18, 2023 · 41f82a8 · 41f82a8
1 parent 58b8c51
commit 41f82a8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/packages/kg-default-transforms/src/default-transforms.ts b/packages/kg-default-transforms/src/default-transforms.ts
@@ -6,8 +6,10 @@ 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';
+import {registerMergeListNodesTransform} from './transforms/merge-list-nodes.js';
 
 export * from './transforms/denest.js';
+export * from './transforms/merge-list-nodes.js';
 export * from './transforms/remove-alignment.js';
 
 export function registerDefaultTransforms(editor: LexicalEditor) {
@@ -24,6 +26,9 @@ export function registerDefaultTransforms(editor: LexicalEditor) {
         registerDenestTransform(editor, ExtendedHeadingNode, node => ($createHeadingNode(node.getTag()))),
         registerDenestTransform(editor, QuoteNode, () => ($createQuoteNode())),
         registerDenestTransform(editor, ListNode, node => ($createListNode(node.getListType(), node.getStart()))),
-        registerDenestTransform(editor, ListItemNode, () => ($createListItemNode()))
+        registerDenestTransform(editor, ListItemNode, () => ($createListItemNode())),
+
+        // merge adjacent lists of the same type
+        registerMergeListNodesTransform(editor)
     );
 }
diff --git a/packages/kg-default-transforms/src/transforms/merge-list-nodes.ts b/packages/kg-default-transforms/src/transforms/merge-list-nodes.ts
@@ -0,0 +1,19 @@
+import {$isListNode, ListNode} from '@lexical/list';
+import {LexicalEditor, LexicalNode} from 'lexical';
+
+export function mergeListNodesTransform(node: LexicalNode) {
+    const nextSibling = node.getNextSibling();
+
+    if ($isListNode(nextSibling) && nextSibling.getListType() === node.getListType()) {
+        node.append(...nextSibling.getChildren());
+        nextSibling.remove();
+    }
+}
+
+export function registerMergeListNodesTransform(editor: LexicalEditor) {
+    if (editor.hasNodes([ListNode])) {
+        return editor.registerNodeTransform(ListNode, mergeListNodesTransform);
+    }
+
+    return () => {};
+}
diff --git a/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx b/packages/koenig-lexical/src/plugins/KoenigBehaviourPlugin.jsx
@@ -1324,27 +1324,9 @@ function useKoenigBehaviour({editor, containerElem, cursorDidExitAtTop, isNested
         );
     });
 
-    // merge list nodes of the same type when next to each other
-    React.useEffect(() => {
-        // not all editors have lists (e.g. caption inputs) and registering a transform
-        // for a node that isn't loaded in the editor will throw an error
-        if (!editor.hasNodes([ListNode])) {
-            return;
-        }
-
-        return mergeRegister(
-            editor.registerNodeTransform(ListNode, (node) => {
-                const nextSibling = node.getNextSibling();
-
-                if ($isListNode(nextSibling) && nextSibling.getListType() === node.getListType()) {
-                    node.append(...nextSibling.getChildren());
-                    nextSibling.remove();
-                }
-            })
-        );
-    }, [editor]);
-
-    // remove alignment formats and denest invalid node nesting
+    // remove alignment formats,
+    // denest invalid node nesting,
+    // merge list nodes of same type
     React.useEffect(() => {
         return registerDefaultTransforms(editor);
     }, [editor]);