Merge branch 'refs/heads/main' into releases

# Conflicts:
#	package-lock.json
#	packages/server-util/package.json

.github/workflows/build.yml

@@ -78,7 +78,7 @@ jobs:
           retention-days: 30
 
       - name: Upload webpack stats artifact (editor)
-        uses: relative-ci/agent-upload-artifact-action@v1
+        uses: relative-ci/agent-upload-artifact-action@v2
         with:
           webpackStatsFile: ./playground/dist/webpack-stats.json
           artifactName: relative-ci-artifacts-editor

docs/pages/docs/editor-api/manipulating-blocks.mdx

@@ -91,7 +91,7 @@ Use `forEachBlock` to traverse all blocks in the editor depth-first, and execute
 
 ```typescript
 forEachBlock(
-  callback: (block: Block) => boolean,
+  callback: (block: Block) => boolean | undefined,
   reverse: boolean = false
 ): void;
 

docs/pages/docs/editor-basics/setup.mdx

@@ -27,6 +27,7 @@ type BlockNoteEditorOptions = {
   dictionary?: Dictionary;
   schema?: BlockNoteSchema;
   trailingBlock?: boolean;
+  animations?: boolean;
 };
 ```
 
@@ -50,6 +51,8 @@ The hook takes two optional parameters:
 
 `trailingBlock`: An option which user can pass with `false` value to disable the automatic creation of a trailing new block on the next line when the user types or edits any block. Defaults to `true` if undefined.
 
+`animations`: Whether changes to blocks (like indentation, creating lists, changing headings) should be animated or not. Defaults to `true`.
+
 **deps:** Dependency array that's internally passed to `useMemo`. A new editor will only be created when this array changes.
 
 <Callout type="info" emoji={"💡"}>
@@ -58,9 +61,9 @@ The hook takes two optional parameters:
     The `useCreateBlockNote` hook is actually a simple `useMemo` wrapper around
     the `BlockNoteEditor.create` method. You can use this method directly if you
     want to control the editor lifecycle manually. For example, we do this in
-    the [Saving & Loading example](/examples/backend/saving-loading) to delay the
-    editor creation until some content has been fetched from an external data
-    source.
+    the [Saving & Loading example](/examples/backend/saving-loading) to delay
+    the editor creation until some content has been fetched from an external
+    data source.
   </p>
 </Callout>
 

examples/01-basic/01-minimal/App.tsx

@@ -1,7 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.

package.json

@@ -34,4 +34,4 @@
     "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md",
     "clean": "lerna run --stream clean"
   }
-}
+}

packages/core/package.json

@@ -55,26 +55,26 @@
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@tiptap/core": "^2.5.0",
-    "@tiptap/extension-bold": "^2.5.0",
-    "@tiptap/extension-code": "^2.5.0",
-    "@tiptap/extension-collaboration": "^2.5.0",
-    "@tiptap/extension-collaboration-cursor": "^2.5.0",
-    "@tiptap/extension-dropcursor": "^2.5.0",
-    "@tiptap/extension-gapcursor": "^2.5.0",
-    "@tiptap/extension-hard-break": "^2.5.0",
-    "@tiptap/extension-history": "^2.5.0",
-    "@tiptap/extension-horizontal-rule": "^2.5.0",
-    "@tiptap/extension-italic": "^2.5.0",
-    "@tiptap/extension-link": "^2.5.0",
-    "@tiptap/extension-paragraph": "^2.5.0",
-    "@tiptap/extension-strike": "^2.5.0",
-    "@tiptap/extension-table-cell": "^2.5.0",
-    "@tiptap/extension-table-header": "^2.5.0",
-    "@tiptap/extension-table-row": "^2.5.0",
-    "@tiptap/extension-text": "^2.5.0",
-    "@tiptap/extension-underline": "^2.5.0",
-    "@tiptap/pm": "^2.5.0",
+    "@tiptap/core": "^2.7.1",
+    "@tiptap/extension-bold": "^2.7.1",
+    "@tiptap/extension-code": "^2.7.1",
+    "@tiptap/extension-collaboration": "^2.7.1",
+    "@tiptap/extension-collaboration-cursor": "^2.7.1",
+    "@tiptap/extension-dropcursor": "^2.7.1",
+    "@tiptap/extension-gapcursor": "^2.7.1",
+    "@tiptap/extension-hard-break": "^2.7.1",
+    "@tiptap/extension-history": "^2.7.1",
+    "@tiptap/extension-horizontal-rule": "^2.7.1",
+    "@tiptap/extension-italic": "^2.7.1",
+    "@tiptap/extension-link": "^2.7.1",
+    "@tiptap/extension-paragraph": "^2.7.1",
+    "@tiptap/extension-strike": "^2.7.1",
+    "@tiptap/extension-table-cell": "^2.7.1",
+    "@tiptap/extension-table-header": "^2.7.1",
+    "@tiptap/extension-table-row": "^2.7.1",
+    "@tiptap/extension-text": "^2.7.1",
+    "@tiptap/extension-underline": "^2.7.1",
+    "@tiptap/pm": "^2.7.1",
     "emoji-mart": "^5.6.0",
     "hast-util-from-dom": "^4.2.0",
     "prosemirror-model": "^1.21.0",
@@ -92,7 +92,7 @@
     "remark-stringify": "^10.0.2",
     "unified": "^10.1.2",
     "uuid": "^8.3.2",
-    "y-prosemirror": "1.2.9",
+    "y-prosemirror": "1.2.12",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.15"
   },

packages/core/src/api/exporters/copyExtension.ts

@@ -24,7 +24,7 @@ async function selectedFragmentToHTML<
 }> {
   const selectedFragment = view.state.selection.content().content;
 
-  const internalHTMLSerializer = await createInternalHTMLSerializer(
+  const internalHTMLSerializer = createInternalHTMLSerializer(
     view.state.schema,
     editor
   );
@@ -48,6 +48,46 @@ async function selectedFragmentToHTML<
   return { internalHTML, externalHTML, plainText };
 }
 
+const copyToClipboard = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  view: EditorView,
+  event: ClipboardEvent
+) => {
+  // Stops the default browser copy behaviour.
+  event.preventDefault();
+  event.clipboardData!.clearData();
+
+  // Checks if a `blockContent` node is being copied and expands
+  // the selection to the parent `blockContainer` node. This is
+  // for the use-case in which only a block without content is
+  // selected, e.g. an image block.
+  if (
+    "node" in view.state.selection &&
+    (view.state.selection.node as Node).type.spec.group === "blockContent"
+  ) {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setSelection(
+        new NodeSelection(view.state.doc.resolve(view.state.selection.from - 1))
+      )
+    );
+  }
+
+  (async () => {
+    const { internalHTML, externalHTML, plainText } =
+      await selectedFragmentToHTML(view, editor);
+
+    // TODO: Writing to other MIME types not working in Safari for
+    //  some reason.
+    event.clipboardData!.setData("blocknote/html", internalHTML);
+    event.clipboardData!.setData("text/html", externalHTML);
+    event.clipboardData!.setData("text/plain", plainText);
+  })();
+};
+
 export const createCopyToClipboardExtension = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -63,38 +103,13 @@ export const createCopyToClipboardExtension = <
           props: {
             handleDOMEvents: {
               copy(view, event) {
-                // Stops the default browser copy behaviour.
-                event.preventDefault();
-                event.clipboardData!.clearData();
-
-                // Checks if a `blockContent` node is being copied and expands
-                // the selection to the parent `blockContainer` node. This is
-                // for the use-case in which only a block without content is
-                // selected, e.g. an image block.
-                if (
-                  "node" in view.state.selection &&
-                  (view.state.selection.node as Node).type.spec.group ===
-                    "blockContent"
-                ) {
-                  editor.dispatch(
-                    editor._tiptapEditor.state.tr.setSelection(
-                      new NodeSelection(
-                        view.state.doc.resolve(view.state.selection.from - 1)
-                      )
-                    )
-                  );
-                }
-
-                (async () => {
-                  const { internalHTML, externalHTML, plainText } =
-                    await selectedFragmentToHTML(view, editor);
-
-                  // TODO: Writing to other MIME types not working in Safari for
-                  //  some reason.
-                  event.clipboardData!.setData("blocknote/html", internalHTML);
-                  event.clipboardData!.setData("text/html", externalHTML);
-                  event.clipboardData!.setData("text/plain", plainText);
-                })();
+                copyToClipboard(editor, view, event);
+                // Prevent default PM handler to be called
+                return true;
+              },
+              cut(view, event) {
+                copyToClipboard(editor, view, event);
+                view.dispatch(view.state.tr.deleteSelection());
                 // Prevent default PM handler to be called
                 return true;
               },

packages/core/src/api/exporters/html/__snapshots__/complex/misc/external.html

@@ -1 +1 @@
-<h2 class="bn-inline-content"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p class="bn-inline-content">Paragraph</p><ul><li><p class="bn-inline-content"></p></li></ul>
+<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p class="bn-inline-content"></p></li></ul>

packages/core/src/api/exporters/html/__snapshots__/customParagraph/styled/external.html

@@ -1 +1 @@
-<p class="custom-paragraph">Hello World</p>
+<p class="custom-paragraph" data-text-color="orange" data-background-color="pink" data-text-alignment="center">Hello World</p>

packages/core/src/api/exporters/html/__snapshots__/file/basic/external.html

@@ -1 +1 @@
-<div><a href="exampleURL">example</a><p>Caption</p></div>
+<div data-name="example" data-url="exampleURL" data-caption="Caption"><a href="exampleURL">example</a><p>Caption</p></div>

packages/core/src/api/exporters/html/__snapshots__/file/nested/external.html

@@ -1 +1 @@
-<div><a href="exampleURL">example</a><p>Caption</p></div><div><a href="exampleURL">example</a><p>Caption</p></div>
+<div data-name="example" data-url="exampleURL" data-caption="Caption"><a href="exampleURL">example</a><p>Caption</p></div><div data-name="example" data-url="exampleURL" data-caption="Caption"><a href="exampleURL">example</a><p>Caption</p></div>

packages/core/src/api/exporters/html/__snapshots__/file/noCaption/external.html

@@ -1 +1 @@
-<a href="exampleURL">example</a>
+<a href="exampleURL" data-name="example" data-url="exampleURL">example</a>

packages/core/src/api/exporters/html/__snapshots__/file/noName/external.html

@@ -1 +1 @@
-<div><a href="exampleURL">exampleURL</a><p>Caption</p></div>
+<div data-url="exampleURL" data-caption="Caption"><a href="exampleURL">exampleURL</a><p>Caption</p></div>

packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><span style="font-size: 18px" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p>
+<p><span style="font-size: 18px" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Text1<br>Text2</p>
+<p>Text1<br>Text2</p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/between-links/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website2.com">Link2</a></p>
+<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website2.com">Link2</a></p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/end/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Text1<br></p>
+<p>Text1<br></p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/link/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a></p>
+<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Link1</a></p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/multiple/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Text1<br>Text2<br>Text3</p>
+<p>Text1<br>Text2<br>Text3</p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/only/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><br></p>
+<p><br></p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/start/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><br>Text1</p>
+<p><br>Text1</p>

packages/core/src/api/exporters/html/__snapshots__/hardbreak/styles/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Text1<br><strong>Text2</strong></p>
+<p>Text1<br><strong>Text2</strong></p>

packages/core/src/api/exporters/html/__snapshots__/image/basic/external.html

@@ -1 +1 @@
-<figure><img src="exampleURL" alt="example" width="256"><figcaption>Caption</figcaption></figure>
+<figure data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="example" width="256"><figcaption>Caption</figcaption></figure>

packages/core/src/api/exporters/html/__snapshots__/image/nested/external.html

@@ -1 +1 @@
-<figure><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure><figure><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure>
+<figure data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure><figure data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure>

packages/core/src/api/exporters/html/__snapshots__/image/noCaption/external.html

@@ -1 +1 @@
-<img src="exampleURL" alt="example" width="256">
+<img src="exampleURL" alt="example" width="256" data-name="example" data-url="exampleURL" data-preview-width="256">

packages/core/src/api/exporters/html/__snapshots__/image/noName/external.html

@@ -1 +1 @@
-<figure><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure>
+<figure data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Caption" width="256"><figcaption>Caption</figcaption></figure>

packages/core/src/api/exporters/html/__snapshots__/image/noPreview/external.html

@@ -1 +1 @@
-<div><a href="exampleURL">example</a><p>Caption</p></div>
+<div data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><a href="exampleURL">example</a><p>Caption</p></div>

packages/core/src/api/exporters/html/__snapshots__/link/adjacent/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Website</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website2.com">Website2</a></p>
+<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Website</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website2.com">Website2</a></p>

packages/core/src/api/exporters/html/__snapshots__/link/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Website</a></p>
+<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Website</a></p>

packages/core/src/api/exporters/html/__snapshots__/link/styled/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Web</a></strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">site</a></p>
+<p><strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">Web</a></strong><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.website.com">site</a></p>

packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
+<p>I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Paragraph</p>
+<p>Paragraph</p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/empty/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"></p>
+<p></p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/lineBreaks/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Line 1<br>Line 2</p>
+<p>Line 1<br>Line 2</p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/nested/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Paragraph</p><p class="bn-inline-content">Nested Paragraph 1</p><p class="bn-inline-content">Nested Paragraph 2</p>
+<p>Paragraph</p><p>Nested Paragraph 1</p><p>Nested Paragraph 2</p>

packages/core/src/api/exporters/html/__snapshots__/paragraph/styled/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>
+<p data-text-color="orange" data-background-color="pink" data-text-alignment="center">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>

packages/core/src/api/exporters/html/__snapshots__/simpleCustomParagraph/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content simple-custom-paragraph" data-editable="">Custom Paragraph</p>
+<p class="simple-custom-paragraph" data-editable="">Custom Paragraph</p>

packages/core/src/api/exporters/html/__snapshots__/simpleCustomParagraph/nested/external.html

@@ -1 +1 @@
-<p class="bn-inline-content simple-custom-paragraph" data-editable="">Custom Paragraph</p><p class="bn-inline-content simple-custom-paragraph" data-editable="">Nested Custom Paragraph 1</p><p class="bn-inline-content simple-custom-paragraph" data-editable="">Nested Custom Paragraph 2</p>
+<p class="simple-custom-paragraph" data-editable="">Custom Paragraph</p><p class="simple-custom-paragraph" data-editable="">Nested Custom Paragraph 1</p><p class="simple-custom-paragraph" data-editable="">Nested Custom Paragraph 2</p>

packages/core/src/api/exporters/html/__snapshots__/simpleCustomParagraph/styled/external.html

@@ -1 +1 @@
-<p class="bn-inline-content simple-custom-paragraph" data-editable="">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>
+<p class="simple-custom-paragraph" data-editable="" data-text-color="orange" data-background-color="pink" data-text-alignment="center">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>

packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html

@@ -1 +1 @@
-<div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div>
+<div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption">Caption</p></div></div>