diff --git a/packages/kg-default-transforms/src/default-transforms.ts b/packages/kg-default-transforms/src/default-transforms.ts index cbd67e77b8..cb6adb3d8c 100644 --- 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 new file mode 100644 index 0000000000..a9a67f8e39 --- /dev/null +++ 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 index 3a1c9b78c6..0536246f26 100644 --- 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]);