@blocknote/core 0.30.1 → 0.31.0

package/src/extensions/Suggestions/SuggestionMarks.ts

@@ -0,0 +1,175 @@
+import { Mark } from "@tiptap/core";
+import { MarkSpec } from "prosemirror-model";
+
+// This copies the marks from @handlewithcare/prosemirror-suggest-changes,
+// but uses the Tiptap Mark API instead so we can use them in BlockNote
+
+// The ideal solution would be to not depend on tiptap nodes / marks, but be able to use prosemirror nodes / marks directly
+// this way we could directly use the exported marks from @handlewithcare/prosemirror-suggest-changes
+export const SuggestionAddMark = Mark.create({
+  name: "insertion",
+  inclusive: false,
+  excludes: "deletion modification insertion",
+  addAttributes() {
+    return {
+      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap, so this doesn't actually work (considered not critical)
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "insertion") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+
+      toDOM(mark, inline) {
+        return [
+          "ins",
+          {
+            "data-id": String(mark.attrs["id"]),
+            "data-inline": String(inline),
+            ...(!inline && { style: "display: contents" }), // changed to "contents" to make this work for table rows
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "ins",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});
+
+export const SuggestionDeleteMark = Mark.create({
+  name: "deletion",
+  inclusive: false,
+  excludes: "insertion modification deletion",
+  addAttributes() {
+    return {
+      id: { default: null, validate: "number" }, // note: validate is supported in prosemirror but not in tiptap
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "deletion") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+
+      // attrs: {
+      //   id: { validate: "number" },
+      // },
+      toDOM(mark, inline) {
+        return [
+          "del",
+          {
+            "data-id": String(mark.attrs["id"]),
+            "data-inline": String(inline),
+            ...(!inline && { style: "display: contents" }), // changed to "contents" to make this work for table rows
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "del",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});
+
+export const SuggestionModificationMark = Mark.create({
+  name: "modification",
+  inclusive: false,
+  excludes: "deletion insertion",
+  addAttributes() {
+    // note: validate is supported in prosemirror but not in tiptap
+    return {
+      id: { default: null, validate: "number" },
+      type: { validate: "string" },
+      attrName: { default: null, validate: "string|null" },
+      previousValue: { default: null },
+      newValue: { default: null },
+    };
+  },
+  extendMarkSchema(extension) {
+    if (extension.name !== "modification") {
+      return {};
+    }
+    return {
+      blocknoteIgnore: true,
+      inclusive: false,
+      // attrs: {
+      //   id: { validate: "number" },
+      //   type: { validate: "string" },
+      //   attrName: { default: null, validate: "string|null" },
+      //   previousValue: { default: null },
+      //   newValue: { default: null },
+      // },
+      toDOM(mark, inline) {
+        return [
+          inline ? "span" : "div",
+          {
+            "data-type": "modification",
+            "data-id": String(mark.attrs["id"]),
+            "data-mod-type": mark.attrs["type"] as string,
+            "data-mod-prev-val": JSON.stringify(mark.attrs["previousValue"]),
+            // TODO: Try to serialize marks with toJSON?
+            "data-mod-new-val": JSON.stringify(mark.attrs["newValue"]),
+          },
+          0,
+        ];
+      },
+      parseDOM: [
+        {
+          tag: "span[data-type='modification']",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+              type: node.dataset["modType"],
+              previousValue: node.dataset["modPrevVal"],
+              newValue: node.dataset["modNewVal"],
+            };
+          },
+        },
+        {
+          tag: "div[data-type='modification']",
+          getAttrs(node) {
+            if (!node.dataset["id"]) {
+              return false;
+            }
+            return {
+              id: parseInt(node.dataset["id"], 10),
+              type: node.dataset["modType"],
+              previousValue: node.dataset["modPrevVal"],
+            };
+          },
+        },
+      ],
+    } satisfies MarkSpec;
+  },
+});

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -32,13 +32,13 @@ import {
 } from "../../blocks/defaultBlockTypeGuards.js";
 import { DefaultBlockSchema } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 import {
   BlockFromConfigNoChildren,
   BlockSchemaWithBlock,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema/index.js";
-import { EventEmitter } from "../../util/EventEmitter.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 
 let dragImageElement: HTMLElement | undefined;
@@ -617,9 +617,8 @@ export const tableHandlesPluginKey = new PluginKey("TableHandlesPlugin");
 export class TableHandlesProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
   private view: TableHandlesView<I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(
     private readonly editor: BlockNoteEditor<
@@ -629,159 +628,163 @@ export class TableHandlesProsemirrorPlugin<
     >,
   ) {
     super();
-    this.plugin = new Plugin({
-      key: tableHandlesPluginKey,
-      view: (editorView) => {
-        this.view = new TableHandlesView(editor, editorView, (state) => {
-          this.emit("update", state);
-        });
-        return this.view;
-      },
-      // We use decorations to render the drop cursor when dragging a table row
-      // or column. The decorations are updated in the `dragOverHandler` method.
-      props: {
-        decorations: (state) => {
-          if (
-            this.view === undefined ||
-            this.view.state === undefined ||
-            this.view.state.draggingState === undefined ||
-            this.view.tablePos === undefined
-          ) {
-            return;
-          }
-
-          const newIndex =
-            this.view.state.draggingState.draggedCellOrientation === "row"
-              ? this.view.state.rowIndex
-              : this.view.state.colIndex;
-
-          if (newIndex === undefined) {
-            return;
-          }
-
-          const decorations: Decoration[] = [];
-          const { block, draggingState } = this.view.state;
-          const { originalIndex, draggedCellOrientation } = draggingState;
-
-          // Return empty decorations if:
-          // - Dragging to same position
-          // - No block exists
-          // - Row drag not allowed
-          // - Column drag not allowed
-          if (
-            newIndex === originalIndex ||
-            !block ||
-            (draggedCellOrientation === "row" &&
-              !canRowBeDraggedInto(block, originalIndex, newIndex)) ||
-            (draggedCellOrientation === "col" &&
-              !canColumnBeDraggedInto(block, originalIndex, newIndex))
-          ) {
-            return DecorationSet.create(state.doc, decorations);
-          }
-
-          // Gets the table to show the drop cursor in.
-          const tableResolvedPos = state.doc.resolve(this.view.tablePos + 1);
-
-          if (this.view.state.draggingState.draggedCellOrientation === "row") {
-            const cellsInRow = getCellsAtRowHandle(
-              this.view.state.block,
-              newIndex,
-            );
-
-            cellsInRow.forEach(({ row, col }) => {
-              // Gets each row in the table.
-              const rowResolvedPos = state.doc.resolve(
-                tableResolvedPos.posAtIndex(row) + 1,
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: tableHandlesPluginKey,
+        view: (editorView) => {
+          this.view = new TableHandlesView(editor, editorView, (state) => {
+            this.emit("update", state);
+          });
+          return this.view;
+        },
+        // We use decorations to render the drop cursor when dragging a table row
+        // or column. The decorations are updated in the `dragOverHandler` method.
+        props: {
+          decorations: (state) => {
+            if (
+              this.view === undefined ||
+              this.view.state === undefined ||
+              this.view.state.draggingState === undefined ||
+              this.view.tablePos === undefined
+            ) {
+              return;
+            }
+
+            const newIndex =
+              this.view.state.draggingState.draggedCellOrientation === "row"
+                ? this.view.state.rowIndex
+                : this.view.state.colIndex;
+
+            if (newIndex === undefined) {
+              return;
+            }
+
+            const decorations: Decoration[] = [];
+            const { block, draggingState } = this.view.state;
+            const { originalIndex, draggedCellOrientation } = draggingState;
+
+            // Return empty decorations if:
+            // - Dragging to same position
+            // - No block exists
+            // - Row drag not allowed
+            // - Column drag not allowed
+            if (
+              newIndex === originalIndex ||
+              !block ||
+              (draggedCellOrientation === "row" &&
+                !canRowBeDraggedInto(block, originalIndex, newIndex)) ||
+              (draggedCellOrientation === "col" &&
+                !canColumnBeDraggedInto(block, originalIndex, newIndex))
+            ) {
+              return DecorationSet.create(state.doc, decorations);
+            }
+
+            // Gets the table to show the drop cursor in.
+            const tableResolvedPos = state.doc.resolve(this.view.tablePos + 1);
+
+            if (
+              this.view.state.draggingState.draggedCellOrientation === "row"
+            ) {
+              const cellsInRow = getCellsAtRowHandle(
+                this.view.state.block,
+                newIndex,
               );
 
-              // Gets the cell within the row.
-              const cellResolvedPos = state.doc.resolve(
-                rowResolvedPos.posAtIndex(col) + 1,
-              );
-              const cellNode = cellResolvedPos.node();
-              // Creates a decoration at the start or end of each cell,
-              // depending on whether the new index is before or after the
-              // original index.
-              const decorationPos =
-                cellResolvedPos.pos +
-                (newIndex > originalIndex ? cellNode.nodeSize - 2 : 0);
-              decorations.push(
-                // The widget is a small bar which spans the width of the cell.
-                Decoration.widget(decorationPos, () => {
-                  const widget = document.createElement("div");
-                  widget.className = "bn-table-drop-cursor";
-                  widget.style.left = "0";
-                  widget.style.right = "0";
-                  // This is only necessary because the drop indicator's height
-                  // is an even number of pixels, whereas the border between
-                  // table cells is an odd number of pixels. So this makes the
-                  // positioning slightly more consistent regardless of where
-                  // the row is being dropped.
-                  if (newIndex > originalIndex) {
-                    widget.style.bottom = "-2px";
-                  } else {
-                    widget.style.top = "-3px";
-                  }
-                  widget.style.height = "4px";
-
-                  return widget;
-                }),
-              );
-            });
-          } else {
-            const cellsInColumn = getCellsAtColumnHandle(
-              this.view.state.block,
-              newIndex,
-            );
-
-            cellsInColumn.forEach(({ row, col }) => {
-              // Gets each row in the table.
-              const rowResolvedPos = state.doc.resolve(
-                tableResolvedPos.posAtIndex(row) + 1,
+              cellsInRow.forEach(({ row, col }) => {
+                // Gets each row in the table.
+                const rowResolvedPos = state.doc.resolve(
+                  tableResolvedPos.posAtIndex(row) + 1,
+                );
+
+                // Gets the cell within the row.
+                const cellResolvedPos = state.doc.resolve(
+                  rowResolvedPos.posAtIndex(col) + 1,
+                );
+                const cellNode = cellResolvedPos.node();
+                // Creates a decoration at the start or end of each cell,
+                // depending on whether the new index is before or after the
+                // original index.
+                const decorationPos =
+                  cellResolvedPos.pos +
+                  (newIndex > originalIndex ? cellNode.nodeSize - 2 : 0);
+                decorations.push(
+                  // The widget is a small bar which spans the width of the cell.
+                  Decoration.widget(decorationPos, () => {
+                    const widget = document.createElement("div");
+                    widget.className = "bn-table-drop-cursor";
+                    widget.style.left = "0";
+                    widget.style.right = "0";
+                    // This is only necessary because the drop indicator's height
+                    // is an even number of pixels, whereas the border between
+                    // table cells is an odd number of pixels. So this makes the
+                    // positioning slightly more consistent regardless of where
+                    // the row is being dropped.
+                    if (newIndex > originalIndex) {
+                      widget.style.bottom = "-2px";
+                    } else {
+                      widget.style.top = "-3px";
+                    }
+                    widget.style.height = "4px";
+
+                    return widget;
+                  }),
+                );
+              });
+            } else {
+              const cellsInColumn = getCellsAtColumnHandle(
+                this.view.state.block,
+                newIndex,
               );
 
-              // Gets the cell within the row.
-              const cellResolvedPos = state.doc.resolve(
-                rowResolvedPos.posAtIndex(col) + 1,
-              );
-              const cellNode = cellResolvedPos.node();
-
-              // Creates a decoration at the start or end of each cell,
-              // depending on whether the new index is before or after the
-              // original index.
-              const decorationPos =
-                cellResolvedPos.pos +
-                (newIndex > originalIndex ? cellNode.nodeSize - 2 : 0);
-
-              decorations.push(
-                // The widget is a small bar which spans the height of the cell.
-                Decoration.widget(decorationPos, () => {
-                  const widget = document.createElement("div");
-                  widget.className = "bn-table-drop-cursor";
-                  widget.style.top = "0";
-                  widget.style.bottom = "0";
-                  // This is only necessary because the drop indicator's width
-                  // is an even number of pixels, whereas the border between
-                  // table cells is an odd number of pixels. So this makes the
-                  // positioning slightly more consistent regardless of where
-                  // the column is being dropped.
-                  if (newIndex > originalIndex) {
-                    widget.style.right = "-2px";
-                  } else {
-                    widget.style.left = "-3px";
-                  }
-                  widget.style.width = "4px";
-
-                  return widget;
-                }),
-              );
-            });
-          }
+              cellsInColumn.forEach(({ row, col }) => {
+                // Gets each row in the table.
+                const rowResolvedPos = state.doc.resolve(
+                  tableResolvedPos.posAtIndex(row) + 1,
+                );
+
+                // Gets the cell within the row.
+                const cellResolvedPos = state.doc.resolve(
+                  rowResolvedPos.posAtIndex(col) + 1,
+                );
+                const cellNode = cellResolvedPos.node();
+
+                // Creates a decoration at the start or end of each cell,
+                // depending on whether the new index is before or after the
+                // original index.
+                const decorationPos =
+                  cellResolvedPos.pos +
+                  (newIndex > originalIndex ? cellNode.nodeSize - 2 : 0);
+
+                decorations.push(
+                  // The widget is a small bar which spans the height of the cell.
+                  Decoration.widget(decorationPos, () => {
+                    const widget = document.createElement("div");
+                    widget.className = "bn-table-drop-cursor";
+                    widget.style.top = "0";
+                    widget.style.bottom = "0";
+                    // This is only necessary because the drop indicator's width
+                    // is an even number of pixels, whereas the border between
+                    // table cells is an odd number of pixels. So this makes the
+                    // positioning slightly more consistent regardless of where
+                    // the column is being dropped.
+                    if (newIndex > originalIndex) {
+                      widget.style.right = "-2px";
+                    } else {
+                      widget.style.left = "-3px";
+                    }
+                    widget.style.width = "4px";
+
+                    return widget;
+                  }),
+                );
+              });
+            }
 
-          return DecorationSet.create(state.doc, decorations);
+            return DecorationSet.create(state.doc, decorations);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 
   public onUpdate(callback: (state: TableHandlesState<I, S>) => void) {

package/src/i18n/locales/ar.ts

@@ -163,7 +163,6 @@ export const ar: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "لم يتم العثور على عناصر",
-    loading: "جارٍ التحميل…",
   },
   color_picker: {
     text_title: "نص",

package/src/i18n/locales/de.ts

@@ -178,7 +178,6 @@ export const de: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Keine Elemente gefunden",
-    loading: "Laden …",
   },
   color_picker: {
     text_title: "Text",

package/src/i18n/locales/en.ts

@@ -178,7 +178,6 @@ export const en = {
   },
   suggestion_menu: {
     no_items_title: "No items found",
-    loading: "Loading…",
   },
   color_picker: {
     text_title: "Text",

package/src/i18n/locales/es.ts

@@ -177,7 +177,6 @@ export const es: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "No se encontraron elementos",
-    loading: "Cargando…",
   },
   color_picker: {
     text_title: "Texto",

package/src/i18n/locales/fr.ts

@@ -202,7 +202,6 @@ export const fr: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Aucun élément trouvé",
-    loading: "Chargement…",
   },
   color_picker: {
     text_title: "Texte",

package/src/i18n/locales/hr.ts

@@ -191,7 +191,6 @@ export const hr: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Stavke nisu pronađene",
-    loading: "Učitavanje…",
   },
   color_picker: {
     text_title: "Tekst",

package/src/i18n/locales/is.ts

@@ -170,7 +170,6 @@ export const is: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Engir hlutir fundust",
-    loading: "Hleður…",
   },
   color_picker: {
     text_title: "Texti",

package/src/i18n/locales/it.ts

@@ -179,7 +179,6 @@ export const it: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Nessun elemento trovato",
-    loading: "Caricamento…",
   },
   color_picker: {
     text_title: "Testo",

package/src/i18n/locales/ja.ts

@@ -198,7 +198,6 @@ export const ja: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "アイテムが見つかりません",
-    loading: "読込中…",
   },
   color_picker: {
     text_title: "文字色",

package/src/i18n/locales/ko.ts

@@ -191,7 +191,6 @@ export const ko: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "항목을 찾을 수 없음",
-    loading: "로딩 중…",
   },
   color_picker: {
     text_title: "텍스트",

package/src/i18n/locales/nl.ts

@@ -178,7 +178,6 @@ export const nl: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Geen items gevonden",
-    loading: "Laden…",
   },
   color_picker: {
     text_title: "Tekst",

package/src/i18n/locales/no.ts

@@ -178,7 +178,6 @@ export const no: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Ingen elementer funnet",
-    loading: "Laster…",
   },
   color_picker: {
     text_title: "Tekst",

package/src/i18n/locales/pl.ts

@@ -162,7 +162,6 @@ export const pl: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Nie znaleziono elementów",
-    loading: "Ładowanie…",
   },
   color_picker: {
     text_title: "Tekst",

package/src/i18n/locales/pt.ts

@@ -170,7 +170,6 @@ export const pt: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Nenhum item encontrado",
-    loading: "Carregando…",
   },
   color_picker: {
     text_title: "Texto",

package/src/i18n/locales/ru.ts

@@ -205,7 +205,6 @@ export const ru: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "ничего не найдено",
-    loading: "Загрузка…",
   },
   color_picker: {
     text_title: "Текст",