Internal html changes (#1116)

* Added more tests for selections & refactored code * Added test cases & block ID mocking * Changed to use default PM behaviour * fix row pasting * Cleaned up code * Lint fix * fix table pasting * fix bug * fix dom serializer cache being overwritten * Updated copying code and tests * Implemented PR feedback * Implemented PR feedback * Small fix * Small fix * Removed TODOs * fix paste * Implemented PR feedback --------- Co-authored-by: yousefed <[email protected]>
TypeCellOS · Oct 3, 2024 · dd487b6 · dd487b6
1 parent 4597f02
commit dd487b6
Show file tree

Hide file tree

Showing 52 changed files with 1,208 additions and 833 deletions.
diff --git a/packages/core/src/api/clipboard/__snapshots__/childToParent.html b/packages/core/src/api/clipboard/__snapshots__/childToParent.html
@@ -0,0 +1 @@
+<h2 data-text-color="red" data-level="2">Heading 1</h2><p>Nested Paragraph 1</p>
diff --git a/packages/core/src/api/clipboard/__snapshots__/childrenToNextParent.html b/packages/core/src/api/clipboard/__snapshots__/childrenToNextParent.html
@@ -0,0 +1 @@
+<p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p><h2 data-text-color="red" data-level="2">Heading 2</h2>
diff --git a/packages/core/src/api/clipboard/__snapshots__/childrenToNextParentsChildren.html b/packages/core/src/api/clipboard/__snapshots__/childrenToNextParentsChildren.html
@@ -0,0 +1 @@
+<p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p><h2 data-text-color="red" data-level="2">Heading 2</h2><p>Nested Paragraph 1</p><p>Nested Paragraph 2</p><p>Nested Paragraph 3</p>
diff --git a/packages/core/src/api/clipboard/__snapshots__/image.html b/packages/core/src/api/clipboard/__snapshots__/image.html
@@ -0,0 +1 @@
+<img src="https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg" alt="BlockNote image" width="512" data-url="https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg"><p>Nested Paragraph</p>
diff --git a/...cases__/selectionWithinBlockChildren.html → ...board/__snapshots__/multipleChildren.html b/...cases__/selectionWithinBlockChildren.html → ...board/__snapshots__/multipleChildren.html
diff --git a/packages/core/src/api/clipboard/__snapshots__/multipleStyledText.html b/packages/core/src/api/clipboard/__snapshots__/multipleStyledText.html
@@ -0,0 +1 @@
+<strong>Bold</strong><em>Italic</em>Regular
diff --git a/packages/core/src/api/clipboard/__snapshots__/nestedImage.html b/packages/core/src/api/clipboard/__snapshots__/nestedImage.html
@@ -0,0 +1 @@
+<h2 data-text-color="red" data-level="2"><strong>Bold</strong><em>Italic</em>Regular</h2><img src="https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg" alt="BlockNote image" width="512" data-url="https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg"><p>Nested Paragraph</p>
diff --git a/packages/core/src/api/clipboard/__snapshots__/partialChildToParent.html b/packages/core/src/api/clipboard/__snapshots__/partialChildToParent.html
@@ -0,0 +1 @@
+<h2 data-text-color="red" data-level="2">ding 1</h2><p>Nested </p>
diff --git a/packages/core/src/api/clipboard/__snapshots__/styledText.html b/packages/core/src/api/clipboard/__snapshots__/styledText.html
@@ -0,0 +1 @@
+<em>Italic</em>
diff --git a/packages/core/src/api/clipboard/__snapshots__/tableAllCells.html b/packages/core/src/api/clipboard/__snapshots__/tableAllCells.html
@@ -0,0 +1 @@
+<div class="bn-block-content" data-content-type="table"><table class="bn-inline-content"><tbody><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr><tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr></tbody></table></div>
diff --git a/packages/core/src/api/clipboard/__snapshots__/tableCell.html b/packages/core/src/api/clipboard/__snapshots__/tableCell.html
@@ -0,0 +1 @@
+<tr><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr>
diff --git a/packages/core/src/api/clipboard/__snapshots__/tableCellText.html b/packages/core/src/api/clipboard/__snapshots__/tableCellText.html
@@ -0,0 +1 @@
+Table Cell
diff --git a/packages/core/src/api/clipboard/__snapshots__/tableRow.html b/packages/core/src/api/clipboard/__snapshots__/tableRow.html
@@ -0,0 +1 @@
+<tr><td colspan="1" rowspan="1"><p>Table Cell</p></td><td colspan="1" rowspan="1"><p>Table Cell</p></td></tr>
diff --git a/packages/core/src/api/clipboard/__snapshots__/unstyledText.html b/packages/core/src/api/clipboard/__snapshots__/unstyledText.html
@@ -0,0 +1 @@
+Regular
diff --git a/packages/core/src/api/clipboard/clipboard.test.ts b/packages/core/src/api/clipboard/clipboard.test.ts
@@ -0,0 +1,284 @@
+import { Node } from "prosemirror-model";
+import { NodeSelection, Selection, TextSelection } from "prosemirror-state";
+import { CellSelection } from "prosemirror-tables";
+import { afterAll, beforeAll, beforeEach, describe, expect, it } from "vitest";
+
+import { PartialBlock } from "../../blocks/defaultBlocks";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { doPaste } from "../testUtil/paste";
+import { initializeESMDependencies } from "../../util/esmDependencies";
+import { selectedFragmentToHTML } from "./toClipboard/copyExtension";
+
+type SelectionTestCase = {
+  testName: string;
+  createSelection: (doc: Node) => Selection;
+};
+
+// These tests are meant to test the copying of user selections in the editor.
+// The test cases used for the other HTML conversion tests are not suitable here
+// as they are represented in the BlockNote API, whereas here we want to test
+// ProseMirror/TipTap selections directly.
+describe("Test ProseMirror selection clipboard HTML", () => {
+  const initialContent: PartialBlock[] = [
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: "Heading 1",
+      children: [
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 1",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 2",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 3",
+        },
+      ],
+    },
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: "Heading 2",
+      children: [
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 1",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 2",
+        },
+        {
+          type: "paragraph",
+          content: "Nested Paragraph 3",
+        },
+      ],
+    },
+    {
+      type: "heading",
+      props: {
+        level: 2,
+        textColor: "red",
+      },
+      content: [
+        {
+          type: "text",
+          text: "Bold",
+          styles: {
+            bold: true,
+          },
+        },
+        {
+          type: "text",
+          text: "Italic",
+          styles: {
+            italic: true,
+          },
+        },
+        {
+          type: "text",
+          text: "Regular",
+          styles: {},
+        },
+      ],
+      children: [
+        {
+          type: "image",
+          props: {
+            url: "https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg",
+          },
+          children: [
+            {
+              type: "paragraph",
+              content: "Nested Paragraph",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "table",
+      content: {
+        type: "tableContent",
+        rows: [
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+          {
+            cells: ["Table Cell", "Table Cell"],
+          },
+        ],
+      },
+      // Not needed as selections starting in table cells will get snapped to
+      // the table boundaries.
+      // children: [
+      //   {
+      //     type: "table",
+      //     content: {
+      //       type: "tableContent",
+      //       rows: [
+      //         {
+      //           cells: ["Table Cell", "Table Cell"],
+      //         },
+      //         {
+      //           cells: ["Table Cell", "Table Cell"],
+      //         },
+      //       ],
+      //     },
+      //   },
+      // ],
+    },
+  ];
+
+  let editor: BlockNoteEditor;
+  const div = document.createElement("div");
+
+  beforeEach(() => {
+    editor.replaceBlocks(editor.document, initialContent);
+  });
+
+  beforeAll(async () => {
+    (window as any).__TEST_OPTIONS = (window as any).__TEST_OPTIONS || {};
+
+    editor = BlockNoteEditor.create();
+    editor.mount(div);
+
+    await initializeESMDependencies();
+  });
+
+  afterAll(() => {
+    editor.mount(undefined);
+    editor._tiptapEditor.destroy();
+    editor = undefined as any;
+
+    delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
+  });
+
+  // Sets the editor selection to the given start and end positions, then
+  // exports the selected content to HTML and compares it to a snapshot.
+  async function testSelection(testCase: SelectionTestCase) {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        testCase.createSelection(editor._tiptapEditor.view.state.doc)
+      )
+    );
+
+    const { clipboardHTML, externalHTML } = await selectedFragmentToHTML(
+      editor._tiptapEditor.view,
+      editor
+    );
+
+    expect(externalHTML).toMatchFileSnapshot(
+      `./__snapshots__/${testCase.testName}.html`
+    );
+
+    const originalDocument = editor.document;
+    doPaste(
+      editor._tiptapEditor.view,
+      "text",
+      clipboardHTML,
+      false,
+      new ClipboardEvent("paste")
+    );
+    const newDocument = editor.document;
+
+    expect(newDocument).toStrictEqual(originalDocument);
+  }
+
+  const testCases: SelectionTestCase[] = [
+    // TODO: Consider adding test cases for nested blocks & double nested blocks.
+    // Selection spans all of first heading's children.
+    {
+      testName: "multipleChildren",
+      createSelection: (doc) => TextSelection.create(doc, 16, 78),
+    },
+    // Selection spans from start of first heading to end of its first child.
+    {
+      testName: "childToParent",
+      createSelection: (doc) => TextSelection.create(doc, 3, 34),
+    },
+    // Selection spans from middle of first heading to the middle of its first
+    // child.
+    {
+      testName: "partialChildToParent",
+      createSelection: (doc) => TextSelection.create(doc, 6, 23),
+    },
+    // Selection spans from start of first heading's first child to end of
+    // second heading's content (does not include second heading's children).
+    {
+      testName: "childrenToNextParent",
+      createSelection: (doc) => TextSelection.create(doc, 16, 93),
+    },
+    // Selection spans from start of first heading's first child to end of
+    // second heading's last child.
+    {
+      testName: "childrenToNextParentsChildren",
+      createSelection: (doc) => TextSelection.create(doc, 16, 159),
+    },
+    // Selection spans "Regular" text inside third heading.
+    {
+      testName: "unstyledText",
+      createSelection: (doc) => TextSelection.create(doc, 175, 182),
+    },
+    // Selection spans "Italic" text inside third heading.
+    {
+      testName: "styledText",
+      createSelection: (doc) => TextSelection.create(doc, 169, 175),
+    },
+    // Selection spans third heading's content (does not include third heading's
+    // children).
+    {
+      testName: "multipleStyledText",
+      createSelection: (doc) => TextSelection.create(doc, 165, 182),
+    },
+    // Selection spans the image block content.
+    {
+      testName: "image",
+      createSelection: (doc) => NodeSelection.create(doc, 185),
+    },
+    // Selection spans from start of third heading to end of it's last
+    // descendant.
+    {
+      testName: "nestedImage",
+      createSelection: (doc) => TextSelection.create(doc, 165, 205),
+    },
+    // Selection spans text in first cell of the table.
+    {
+      testName: "tableCellText",
+      createSelection: (doc) => TextSelection.create(doc, 216, 226),
+    },
+    // Selection spans first cell of the table.
+    // TODO: External HTML is wrapped in unnecessary `tr` element.
+    {
+      testName: "tableCell",
+      createSelection: (doc) => CellSelection.create(doc, 214),
+    },
+    // Selection spans first row of the table.
+    {
+      testName: "tableRow",
+      createSelection: (doc) => CellSelection.create(doc, 214, 228),
+    },
+    // Selection spans all cells of the table.
+    // TODO: External HTML is wrapped in unnecessary `blockContent` element.
+    {
+      testName: "tableAllCells",
+      createSelection: (doc) => CellSelection.create(doc, 214, 258),
+    },
+  ];
+
+  for (const testCase of testCases) {
+    it(`${testCase.testName}`, async () => {
+      await testSelection(testCase);
+    });
+  }
+});
diff --git a/...core/src/api/parsers/acceptedMIMETypes.ts → ...pboard/fromClipboard/acceptedMIMETypes.ts b/...core/src/api/parsers/acceptedMIMETypes.ts → ...pboard/fromClipboard/acceptedMIMETypes.ts
diff --git a/...core/src/api/parsers/fileDropExtension.ts → ...pboard/fromClipboard/fileDropExtension.ts b/...core/src/api/parsers/fileDropExtension.ts → ...pboard/fromClipboard/fileDropExtension.ts
@@ -1,8 +1,8 @@
 import { Extension } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 import { handleFileInsertion } from "./handleFileInsertion";
 import { acceptedMIMETypes } from "./acceptedMIMETypes";
 

diff --git a/...re/src/api/parsers/handleFileInsertion.ts → ...oard/fromClipboard/handleFileInsertion.ts b/...re/src/api/parsers/handleFileInsertion.ts → ...oard/fromClipboard/handleFileInsertion.ts
@@ -1,12 +1,12 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { PartialBlock } from "../../blocks/defaultBlocks";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { PartialBlock } from "../../../blocks/defaultBlocks";
 import {
   BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
-} from "../../schema";
-import { getBlockInfoFromPos } from "../getBlockInfoFromPos";
+} from "../../../schema";
+import { getBlockInfoFromPos } from "../../getBlockInfoFromPos";
 import { acceptedMIMETypes } from "./acceptedMIMETypes";
 
 function checkFileExtensionsMatch(