@blocknote/core 0.30.1 → 0.31.1

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,12 @@ export const tableHandlesPluginKey = new PluginKey("TableHandlesPlugin");
 export class TableHandlesProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema,
-> extends EventEmitter<any> {
+> extends BlockNoteExtension {
+  public static key() {
+    return "tableHandles";
+  }
+
   private view: TableHandlesView<I, S> | undefined;
-  public readonly plugin: Plugin;
 
   constructor(
     private readonly editor: BlockNoteEditor<
@@ -629,159 +632,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: "Текст",

package/src/i18n/locales/sk.ts

@@ -177,7 +177,6 @@ export const sk = {
   },
   suggestion_menu: {
     no_items_title: "Nenašli sa žiadne položky",
-    loading: "Načítava sa…",
   },
   color_picker: {
     text_title: "Text",

package/src/i18n/locales/uk.ts

@@ -203,7 +203,6 @@ export const uk: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Нічого не знайдено",
-    loading: "Завантаження…",
   },
   color_picker: {
     text_title: "Текст",

package/src/i18n/locales/vi.ts

@@ -177,7 +177,6 @@ export const vi: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Không tìm thấy mục nào",
-    loading: "Đang tải...",
   },
   color_picker: {
     text_title: "Văn bản",

package/src/i18n/locales/zh-tw.ts

@@ -211,7 +211,6 @@ export const zhTW: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "無相符項目",
-    loading: "載入中…",
   },
   color_picker: {
     text_title: "文字",

package/src/i18n/locales/zh.ts

@@ -211,7 +211,6 @@ export const zh: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "无匹配项",
-    loading: "加载中…",
   },
   color_picker: {
     text_title: "文本",

package/src/index.ts

@@ -1,10 +1,17 @@
+export * from "./api/blockManipulation/commands/insertBlocks/insertBlocks.js";
+export * from "./api/blockManipulation/commands/replaceBlocks/replaceBlocks.js";
 export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
 export * from "./api/getBlockInfoFromPos.js";
 export * from "./api/nodeUtil.js";
+export * from "./api/pmUtil.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/CodeBlockContent/CodeBlockContent.js";
+export * from "./blocks/defaultBlockHelpers.js";
+export * from "./blocks/defaultBlocks.js";
+export * from "./blocks/defaultBlockTypeGuards.js";
+export * from "./blocks/defaultProps.js";
 export * from "./blocks/FileBlockContent/FileBlockContent.js";
 export * from "./blocks/FileBlockContent/helpers/parse/parseEmbedElement.js";
 export * from "./blocks/FileBlockContent/helpers/parse/parseFigureElement.js";
@@ -16,19 +23,16 @@ export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createFigureWith
 export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
 export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.js";
 export * from "./blocks/ImageBlockContent/ImageBlockContent.js";
-export * from "./blocks/PageBreakBlockContent/PageBreakBlockContent.js";
 export * from "./blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.js";
+export * from "./blocks/PageBreakBlockContent/PageBreakBlockContent.js";
 export * from "./blocks/PageBreakBlockContent/schema.js";
 export {
   EMPTY_CELL_HEIGHT,
   EMPTY_CELL_WIDTH,
 } from "./blocks/TableBlockContent/TableExtension.js";
 export * from "./blocks/VideoBlockContent/VideoBlockContent.js";
-export * from "./blocks/defaultBlockHelpers.js";
-export * from "./blocks/defaultBlockTypeGuards.js";
-export * from "./blocks/defaultBlocks.js";
-export * from "./blocks/defaultProps.js";
 export * from "./editor/BlockNoteEditor.js";
+export * from "./editor/BlockNoteExtension.js";
 export * from "./editor/BlockNoteExtensions.js";
 export * from "./editor/BlockNoteSchema.js";
 export * from "./editor/defaultColors.js";
@@ -42,22 +46,24 @@ export * from "./extensions/LinkToolbar/protocols.js";
 export * from "./extensions/SideMenu/SideMenuPlugin.js";
 export * from "./extensions/SuggestionMenu/DefaultGridSuggestionItem.js";
 export * from "./extensions/SuggestionMenu/DefaultSuggestionItem.js";
-export * from "./extensions/SuggestionMenu/SuggestionPlugin.js";
 export * from "./extensions/SuggestionMenu/getDefaultEmojiPickerItems.js";
 export * from "./extensions/SuggestionMenu/getDefaultSlashMenuItems.js";
+export * from "./extensions/SuggestionMenu/SuggestionPlugin.js";
 export * from "./extensions/TableHandles/TableHandlesPlugin.js";
 export * from "./i18n/dictionary.js";
 export * from "./schema/index.js";
 export * from "./util/browser.js";
 export * from "./util/combineByGroup.js";
 export * from "./util/esmDependencies.js";
-export * from "./util/table.js";
 export * from "./util/string.js";
+export * from "./util/table.js";
 export * from "./util/typescript.js";
 
 export type { CodeBlockOptions } from "./blocks/CodeBlockContent/CodeBlockContent.js";
-export { UnreachableCaseError, assertEmpty } from "./util/typescript.js";
+export { assertEmpty, UnreachableCaseError } from "./util/typescript.js";
 
+export * from "./util/EventEmitter.js";
+// for testing from react (TODO: move):
 // Unit testing
 export { selectedFragmentToHTML } from "./api/clipboard/toClipboard/copyExtension.js";
 
@@ -70,3 +76,7 @@ export * from "./extensions/UniqueID/UniqueID.js";
 export * from "./api/exporters/markdown/markdownExporter.js";
 export * from "./api/parsers/html/parseHTML.js";
 export * from "./api/parsers/markdown/parseMarkdown.js";
+
+// TODO: for ai, remove?
+export * from "./api/blockManipulation/getBlock/getBlock.js";
+export * from "./api/positionMapping.js";

package/src/pm-nodes/BlockContainer.ts

@@ -27,7 +27,7 @@ export const BlockContainer = Node.create<{
   // Ensures content-specific keyboard handlers trigger first.
   priority: 50,
   defining: true,
-
+  marks: "insertion modification deletion",
   parseHTML() {
     return [
       {

package/src/pm-nodes/BlockGroup.ts

@@ -8,7 +8,7 @@ export const BlockGroup = Node.create<{
   name: "blockGroup",
   group: "childContainer",
   content: "blockGroupChild+",
-
+  marks: "deletion insertion modification",
   parseHTML() {
     return [
       {

package/src/pm-nodes/Doc.ts

@@ -4,4 +4,5 @@ export const Doc = Node.create({
   name: "doc",
   topNode: true,
   content: "blockGroup",
+  marks: "insertion modification deletion",
 });

package/types/src/api/blockManipulation/commands/insertBlocks/insertBlocks.d.ts

@@ -1,4 +1,4 @@
+import type { Transaction } from "prosemirror-state";
 import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import { BlockIdentifier, BlockSchema, InlineContentSchema, StyleSchema } from "../../../../schema/index.js";
-import type { Transaction } from "prosemirror-state";
 export declare function insertBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(tr: Transaction, blocksToInsert: PartialBlock<BSchema, I, S>[], referenceBlock: BlockIdentifier, placement?: "before" | "after"): Block<BSchema, I, S>[];