chore: fix issue with sibling lists not being merged correctly in Sup…

…er [skip e2e]

packages/web/package.json

@@ -110,6 +110,7 @@
   "dependencies": {
     "@ariakit/react": "^0.3.9",
     "@lexical/headless": "0.13.1",
+    "@lexical/list": "0.13.1",
     "@radix-ui/react-slot": "^1.0.1",
     "@react-pdf/renderer": "^3.3.2",
     "comlink": "^4.4.1",

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -35,6 +35,7 @@ import { SearchPlugin } from './Plugins/SearchPlugin/SearchPlugin'
 import AutoLinkPlugin from './Plugins/AutoLinkPlugin/AutoLinkPlugin'
 import DatetimePlugin from './Plugins/DateTimePlugin/DateTimePlugin'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
+import { MergeSiblingListsPlugin } from './Plugins/MergeSiblingListsPlugin'
 
 type BlocksEditorProps = {
   onChange?: (value: string, preview: string) => void
@@ -116,6 +117,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
       </div>
       {isMobile && <ToolbarPlugin />}
       <ListPlugin />
+      <MergeSiblingListsPlugin />
       <MarkdownShortcutPlugin transformers={MarkdownTransformers} />
       <TablePlugin hasCellMerge />
       <OnChangePlugin onChange={handleChange} ignoreSelectionChange={true} />

packages/web/src/javascripts/Components/SuperEditor/Plugins/MergeSiblingListsPlugin.tsx

@@ -0,0 +1,23 @@
+import { ListNode, $isListNode } from '@lexical/list'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect } from 'react'
+
+function mergeListNodesTransform(node: ListNode) {
+  const nextSibling = node.getNextSibling()
+
+  if ($isListNode(nextSibling) && $isListNode(node) && nextSibling.getListType() === node.getListType()) {
+    node.append(...nextSibling.getChildren())
+    nextSibling.remove()
+  }
+}
+
+// https://github.com/facebook/lexical/issues/4618
+export function MergeSiblingListsPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return editor.registerNodeTransform(ListNode, mergeListNodesTransform)
+  }, [editor])
+
+  return null
+}

yarn.lock

@@ -7682,6 +7682,7 @@ __metadata:
     "@babel/preset-env": "*"
     "@babel/preset-typescript": ^7.21.5
     "@lexical/headless": 0.13.1
+    "@lexical/list": 0.13.1
     "@lexical/react": 0.13.1
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
     "@radix-ui/react-slot": ^1.0.1