extract transformPasted

Author: YousefED

packages/core/src/BlockNoteEditor.ts

@@ -1,5 +1,5 @@
 import { Editor, EditorOptions, Extension } from "@tiptap/core";
-import { Fragment, Node, Slice } from "prosemirror-model";
+import { Node } from "prosemirror-model";
 // import "./blocknote.css";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import * as Y from "yjs";
@@ -69,6 +69,7 @@ import { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMen
 import { TableHandlesProsemirrorPlugin } from "./extensions/TableHandles/TableHandlesPlugin";
 import { UniqueID } from "./extensions/UniqueID/UniqueID";
 import { UnreachableCaseError, mergeCSSClasses } from "./shared/utils";
+import { transformPasted } from "./transformPasted";
 
 export type BlockNoteEditorOptions<
   BSpecs extends BlockSpecs,
@@ -445,50 +446,7 @@ export class BlockNoteEditor<
             newOptions.domAttributes?.editor?.class || ""
           ),
         },
-        transformPasted(slice, view) {
-          // helper function
-          function removeChild(node: Fragment, n: number) {
-            const children: any[] = [];
-            node.forEach((child, _, i) => {
-              if (i !== n) {
-                children.push(child);
-              }
-            });
-            return Fragment.from(children);
-          }
-
-          // fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
-          let f = Fragment.from(slice.content);
-          for (let i = 0; i < f.childCount; i++) {
-            if (f.child(i).type.spec.group === "blockContent") {
-              const content = [f.child(i)];
-              if (i + 1 < f.childCount) {
-                // when there is a blockGroup, it should be nested in the new blockcontainer
-                if (f.child(i + 1).type.spec.group === "blockGroup") {
-                  const nestedChild = f
-                    .child(i + 1)
-                    .child(0)
-                    .child(0);
-
-                  if (
-                    nestedChild.type.name === "bulletListItem" ||
-                    nestedChild.type.name === "numberedListItem"
-                  ) {
-                    content.push(f.child(i + 1));
-                    f = removeChild(f, i + 1);
-                  }
-                }
-              }
-              const container = view.state.schema.nodes.blockContainer.create(
-                undefined,
-                content
-              );
-              f = f.replaceChild(i, container);
-            }
-          }
-
-          return new Slice(f, slice.openStart, slice.openEnd);
-        },
+        transformPasted,
       },
     };
 

packages/core/src/transformPasted.ts

@@ -0,0 +1,58 @@
+import { Fragment, Slice } from "@tiptap/pm/model";
+import { EditorView } from "@tiptap/pm/view";
+
+// helper function to remove a child from a fragment
+function removeChild(node: Fragment, n: number) {
+  const children: any[] = [];
+  node.forEach((child, _, i) => {
+    if (i !== n) {
+      children.push(child);
+    }
+  });
+  return Fragment.from(children);
+}
+
+/**
+ * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
+ *
+ * Without this fix, pasting two paragraphs would cause the second one to be indented in the other
+ * this fix wraps every element in the slice in it's own blockContainer, to prevent Prosemirror from nesting the
+ * elements on paste.
+ *
+ * The exception is when we encounter blockGroups with listitems, because those actually should be nested
+ */
+export function transformPasted(slice: Slice, view: EditorView) {
+  let f = Fragment.from(slice.content);
+  for (let i = 0; i < f.childCount; i++) {
+    if (f.child(i).type.spec.group === "blockContent") {
+      const content = [f.child(i)];
+
+      // when there is a blockGroup with lists, it should be nested in the new blockcontainer
+      // (if we remove this if-block, the nesting bug will be fixed, but lists won't be nested correctly)
+      if (
+        i + 1 < f.childCount &&
+        f.child(i + 1).type.spec.group === "blockGroup"
+      ) {
+        const nestedChild = f
+          .child(i + 1)
+          .child(0)
+          .child(0);
+
+        if (
+          nestedChild.type.name === "bulletListItem" ||
+          nestedChild.type.name === "numberedListItem"
+        ) {
+          content.push(f.child(i + 1));
+          f = removeChild(f, i + 1);
+        }
+      }
+      const container = view.state.schema.nodes.blockContainer.create(
+        undefined,
+        content
+      );
+      f = f.replaceChild(i, container);
+    }
+  }
+
+  return new Slice(f, slice.openStart, slice.openEnd);
+}