@blocknote/core 0.25.1 → 0.26.0

package/src/extensions/Comments/CommentsPlugin.ts

@@ -16,11 +16,6 @@ const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
 const SET_SELECTED_THREAD_ID = "SET_SELECTED_THREAD_ID";
 
 type CommentsPluginState = {
-  /**
-   * Store the positions of all threads in the document.
-   * this can be used later to implement a floating sidebar
-   */
-  threadPositions: Map<string, { from: number; to: number }>;
   /**
    * Decorations to be rendered, specifically to indicate the selected thread
    */
@@ -28,15 +23,11 @@ type CommentsPluginState = {
 };
 
 /**
- * Get a new state (theadPositions and decorations) from the current document state
+ * Calculate the thread positions from the current document state
  */
-function updateState(
-  doc: Node,
-  selectedThreadId: string | undefined,
-  markType: string
-): CommentsPluginState {
+function getUpdatedThreadPositions(doc: Node, markType: string) {
   const threadPositions = new Map<string, { from: number; to: number }>();
-  const decorations: Decoration[] = [];
+
   // find all thread marks and store their position + create decoration for selected thread
   doc.descendants((node, pos) => {
     node.marks.forEach((mark) => {
@@ -59,34 +50,38 @@ function updateState(
           from: Math.min(from, currentPosition.from),
           to: Math.max(to, currentPosition.to),
         });
-
-        if (selectedThreadId === thisThreadId) {
-          decorations.push(
-            Decoration.inline(from, to, {
-              class: "bn-thread-mark-selected",
-            })
-          );
-        }
       }
     });
   });
-  return {
-    decorations: DecorationSet.create(doc, decorations),
-    threadPositions,
-  };
+  return threadPositions;
 }
 
 export class CommentsPlugin extends EventEmitter<any> {
   public readonly plugin: Plugin;
   public readonly userStore: UserStore<User>;
 
+  /**
+   * Whether a comment is currently being composed
+   */
   private pendingComment = false;
+
+  /**
+   * The currently selected thread id
+   */
   private selectedThreadId: string | undefined;
 
+  /**
+   * Store the positions of all threads in the document.
+   * this can be used later to implement a floating sidebar
+   */
+  private threadPositions: Map<string, { from: number; to: number }> =
+    new Map();
+
   private emitStateUpdate() {
     this.emit("update", {
       selectedThreadId: this.selectedThreadId,
       pendingComment: this.pendingComment,
+      threadPositions: this.threadPositions,
     });
   }
 
@@ -168,18 +163,51 @@ export class CommentsPlugin extends EventEmitter<any> {
       state: {
         init() {
           return {
-            threadPositions: new Map<string, { from: number; to: number }>(),
             decorations: DecorationSet.empty,
           };
         },
         apply(tr, state) {
           const action = tr.getMeta(PLUGIN_KEY);
+
           if (!tr.docChanged && !action) {
             return state;
           }
 
-          // The doc changed or the selected thread changed
-          return updateState(tr.doc, self.selectedThreadId, markType);
+          // only update threadPositions if the doc changed
+          const threadPositions = tr.docChanged
+            ? getUpdatedThreadPositions(tr.doc, self.markType)
+            : self.threadPositions;
+
+          if (threadPositions.size > 0 || self.threadPositions.size > 0) {
+            // small optimization; don't emit event if threadPositions before / after were both empty
+            self.threadPositions = threadPositions;
+            self.emitStateUpdate();
+          }
+
+          // update decorations if doc or selected thread changed
+          const decorations = [];
+
+          if (self.selectedThreadId) {
+            const selectedThreadPosition = threadPositions.get(
+              self.selectedThreadId
+            );
+
+            if (selectedThreadPosition) {
+              decorations.push(
+                Decoration.inline(
+                  selectedThreadPosition.from,
+                  selectedThreadPosition.to,
+                  {
+                    class: "bn-thread-mark-selected",
+                  }
+                )
+              );
+            }
+          }
+
+          return {
+            decorations: DecorationSet.create(tr.doc, decorations),
+          };
         },
       },
       props: {
@@ -206,7 +234,7 @@ export class CommentsPlugin extends EventEmitter<any> {
           );
 
           const threadId = commentMark?.attrs.threadId as string | undefined;
-          self.selectThread(threadId);
+          self.selectThread(threadId, false);
         },
       },
     });
@@ -219,6 +247,7 @@ export class CommentsPlugin extends EventEmitter<any> {
     callback: (state: {
       pendingComment: boolean;
       selectedThreadId: string | undefined;
+      threadPositions: Map<string, { from: number; to: number }>;
     }) => void
   ) {
     return this.on("update", callback);
@@ -227,7 +256,7 @@ export class CommentsPlugin extends EventEmitter<any> {
   /**
    * Set the selected thread
    */
-  public selectThread(threadId: string | undefined) {
+  public selectThread(threadId: string | undefined, scrollToThread = true) {
     if (this.selectedThreadId === threadId) {
       return;
     }
@@ -238,6 +267,24 @@ export class CommentsPlugin extends EventEmitter<any> {
         name: SET_SELECTED_THREAD_ID,
       })
     );
+
+    if (threadId && scrollToThread) {
+      const selectedThreadPosition = this.threadPositions.get(threadId);
+
+      if (!selectedThreadPosition) {
+        return;
+      }
+
+      // When a new thread is selected, scrolls the page to its reference text in
+      // the editor.
+      (
+        this.editor.prosemirrorView?.domAtPos(selectedThreadPosition.from)
+          .node as Element | undefined
+      )?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
   }
 
   /**
@@ -283,7 +330,9 @@ export class CommentsPlugin extends EventEmitter<any> {
           head: pmSelection.head,
           anchor: pmSelection.anchor,
         },
-        yjs: getRelativeSelection(ystate.binding, view.state),
+        yjs: ystate
+          ? getRelativeSelection(ystate.binding, view.state)
+          : undefined, // if we're not using yjs
       };
 
       await this.threadStore.addThreadToDocument({

package/src/extensions/SideMenu/dragging.ts

@@ -99,6 +99,19 @@ function setDragImage(view: EditorView, from: number, to = from) {
   unsetDragImage(view.root);
   dragImageElement = parentClone;
 
+  // Browsers may have CORS policies which prevents iframes from being
+  // manipulated, so better to stay on the safe side and remove them from the
+  // drag preview. The drag preview doesn't work with iframes anyway.
+  const iframes = dragImageElement.getElementsByTagName("iframe");
+  for (let i = 0; i < iframes.length; i++) {
+    const iframe = iframes[i];
+    const parent = iframe.parentElement;
+
+    if (parent) {
+      parent.removeChild(iframe);
+    }
+  }
+
   // TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
   //  drag preview.
   const classes = view.dom.className.split(" ");

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -20,11 +20,15 @@ function setSelectionToNextContentEditableBlock<
   I extends InlineContentSchema,
   S extends StyleSchema
 >(editor: BlockNoteEditor<BSchema, I, S>) {
-  let block = editor.getTextCursorPosition().block;
+  let block: Block<BSchema, I, S> | undefined =
+    editor.getTextCursorPosition().block;
   let contentType = editor.schema.blockSchema[block.type].content;
 
   while (contentType === "none") {
-    block = editor.getTextCursorPosition().nextBlock!;
+    block = editor.getTextCursorPosition().nextBlock;
+    if (block === undefined) {
+      return;
+    }
     contentType = editor.schema.blockSchema[block.type].content as
       | "inline"
       | "table"

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -1,10 +1,10 @@
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import {
+  CellSelection,
   addColumnAfter,
   addColumnBefore,
   addRowAfter,
   addRowBefore,
-  CellSelection,
   deleteColumn,
   deleteRow,
   mergeCells,
@@ -12,6 +12,7 @@ import {
 } from "prosemirror-tables";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 import {
+  RelativeCellIndices,
   addRowsOrColumns,
   areInSameColumn,
   canColumnBeDraggedInto,
@@ -22,7 +23,6 @@ import {
   getDimensionsOfTable,
   moveColumn,
   moveRow,
-  RelativeCellIndices,
 } from "../../api/blockManipulation/tables/tables.js";
 import { nodeToBlock } from "../../api/nodeConversions/nodeToBlock.js";
 import { getNodeById } from "../../api/nodeUtil.js";
@@ -394,9 +394,7 @@ export class TableHandlesView<
         (element) => element.tagName === "TD" || element.tagName === "TH"
       );
     if (tableCellElements.length === 0) {
-      throw new Error(
-        "Could not find table cell element that the mouse cursor is hovering over."
-      );
+      return;
     }
     const tableCellElement = tableCellElements[0];
 
@@ -541,7 +539,12 @@ export class TableHandlesView<
 
     // Hide handles if the table block has been removed.
     this.state.block = this.editor.getBlock(this.state.block.id)!;
-    if (!this.state.block) {
+    if (
+      !this.state.block ||
+      // when collaborating, the table element might be replaced and out of date
+      // because yjs replaces the element when for example you change the color via the side menu
+      !this.tableElement?.isConnected
+    ) {
       this.state.show = false;
       this.state.showAddOrRemoveRowsButton = false;
       this.state.showAddOrRemoveColumnsButton = false;
@@ -571,6 +574,7 @@ export class TableHandlesView<
 
     // Update bounding boxes.
     const tableBody = this.tableElement!.querySelector("tbody");
+
     if (!tableBody) {
       throw new Error(
         "Table block does not contain a 'tbody' HTML element. This should never happen."
@@ -658,32 +662,27 @@ export class TableHandlesProsemirrorPlugin<
           }
 
           const decorations: Decoration[] = [];
-
-          if (newIndex === this.view.state.draggingState.originalIndex) {
-            return DecorationSet.create(state.doc, decorations);
-          } else if (
-            this.view.state.draggingState.draggedCellOrientation === "row" &&
-            !canRowBeDraggedInto(
-              this.view.state.block,
-              this.view.state.draggingState.originalIndex,
-              newIndex
-            )
-          ) {
-            return DecorationSet.create(state.doc, decorations);
-          } else if (
-            this.view.state.draggingState.draggedCellOrientation === "col" &&
-            !canColumnBeDraggedInto(
-              this.view.state.block,
-              this.view.state.draggingState.originalIndex,
-              newIndex
-            )
+          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);
-          const originalIndex = this.view.state.draggingState.originalIndex;
 
           if (this.view.state.draggingState.draggedCellOrientation === "row") {
             const cellsInRow = getCellsAtRowHandle(

package/src/i18n/locales/ar.ts

@@ -325,6 +325,10 @@ export const ar: Dictionary = {
     reactions: {
       reacted_by: "تفاعل بواسطة",
     },
+    sidebar: {
+      marked_as_resolved: "تم وضع علامة كتم الحل",
+      more_replies: (count) => `${count} ردود أخرى`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/de.ts

@@ -1,4 +1,6 @@
-export const de = {
+import { Dictionary } from "../dictionary.js";
+
+export const de: Dictionary = {
   slash_menu: {
     heading: {
       title: "Überschrift 1",
@@ -154,6 +156,8 @@ export const de = {
   drag_handle: {
     delete_menuitem: "Löschen",
     colors_menuitem: "Farben",
+    header_row_menuitem: "Kopfzeile",
+    header_column_menuitem: "Kopfspalte",
   },
   table_handle: {
     delete_column_menuitem: "Spalte löschen",
@@ -162,6 +166,9 @@ export const de = {
     add_right_menuitem: "Spalte rechts hinzufügen",
     add_above_menuitem: "Zeile oberhalb hinzufügen",
     add_below_menuitem: "Zeile unterhalb hinzufügen",
+    split_cell_menuitem: "Zelle teilen",
+    merge_cells_menuitem: "Zellen zusammenführen",
+    background_color_menuitem: "Hintergrundfarbe",
   },
   suggestion_menu: {
     no_items_title: "Keine Elemente gefunden",
@@ -276,6 +283,9 @@ export const de = {
     align_justify: {
       tooltip: "Text Blocksatz",
     },
+    table_cell_merge: {
+      tooltip: "Zellen zusammenführen",
+    },
     comment: {
       tooltip: "Kommentar hinzufügen",
     },
@@ -329,6 +339,10 @@ export const de = {
     reactions: {
       reacted_by: "Reagiert von",
     },
+    sidebar: {
+      marked_as_resolved: "Als gelöst markiert",
+      more_replies: (count) => `${count} weitere Antworten`,
+    },
   },
   generic: {
     ctrl_shortcut: "Strg",

package/src/i18n/locales/en.ts

@@ -340,6 +340,10 @@ export const en = {
     reactions: {
       reacted_by: "Reacted by",
     },
+    sidebar: {
+      marked_as_resolved: "Marked as resolved",
+      more_replies: (count: number) => `${count} more replies`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/es.ts

@@ -1,4 +1,6 @@
-export const es = {
+import { Dictionary } from "../dictionary.js";
+
+export const es: Dictionary = {
   slash_menu: {
     heading: {
       title: "Encabezado 1",
@@ -153,6 +155,8 @@ export const es = {
   drag_handle: {
     delete_menuitem: "Eliminar",
     colors_menuitem: "Colores",
+    header_row_menuitem: "Fila de encabezado",
+    header_column_menuitem: "Columna de encabezado",
   },
   table_handle: {
     delete_column_menuitem: "Eliminar columna",
@@ -161,6 +165,9 @@ export const es = {
     add_right_menuitem: "Agregar columna a la derecha",
     add_above_menuitem: "Agregar fila arriba",
     add_below_menuitem: "Agregar fila abajo",
+    split_cell_menuitem: "Dividir celda",
+    merge_cells_menuitem: "Combinar celdas",
+    background_color_menuitem: "Color de fondo",
   },
   suggestion_menu: {
     no_items_title: "No se encontraron elementos",
@@ -275,6 +282,9 @@ export const es = {
     align_justify: {
       tooltip: "Justificar texto",
     },
+    table_cell_merge: {
+      tooltip: "Combinar celdas",
+    },
     comment: {
       tooltip: "Añadir comentario",
     },
@@ -328,6 +338,10 @@ export const es = {
     reactions: {
       reacted_by: "Reaccionado por",
     },
+    sidebar: {
+      marked_as_resolved: "Marcado como resuelto",
+      more_replies: (count) => `${count} respuestas más`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/fr.ts

@@ -364,6 +364,10 @@ export const fr: Dictionary = {
     reactions: {
       reacted_by: "Réagi par",
     },
+    sidebar: {
+      marked_as_resolved: "Marqué comme résolu",
+      more_replies: (count) => `${count} réponses de plus`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/hr.ts

@@ -1,4 +1,6 @@
-export const hr = {
+import { Dictionary } from "../dictionary.js";
+
+export const hr: Dictionary = {
   slash_menu: {
     heading: {
       title: "Naslov 1",
@@ -68,6 +70,12 @@ export const hr = {
       aliases: ["tablica"],
       group: "Napredno",
     },
+    code_block: {
+      title: "Blok koda",
+      subtext: "Blok koda sa sintaksnim isticanjem",
+      aliases: ["code", "pre"],
+      group: "Osnovni blokovi",
+    },
     page_break: {
       title: "Prijelom stranice",
       subtext: "Razdjelnik stranice",
@@ -128,9 +136,6 @@ export const hr = {
       aliases: ["emoji", "emotikon", "emocija", "lice"],
       group: "Ostalo",
     },
-    comment: {
-      tooltip: "Dodaj komentar",
-    },
   },
   placeholders: {
     default: "Unesi tekst ili upiši ‘/’ za naredbe",
@@ -164,6 +169,8 @@ export const hr = {
   drag_handle: {
     delete_menuitem: "Ukloni",
     colors_menuitem: "Boje",
+    header_row_menuitem: "Zaglavni redak",
+    header_column_menuitem: "Zaglavni stupac",
   },
   table_handle: {
     delete_column_menuitem: "Ukloni stupac",
@@ -172,6 +179,9 @@ export const hr = {
     add_right_menuitem: "Dodaj stupac desno",
     add_above_menuitem: "Dodaj redak iznad",
     add_below_menuitem: "Dodaj redak ispod",
+    split_cell_menuitem: "Podijeli ćeliju",
+    merge_cells_menuitem: "Spoji ćelije",
+    background_color_menuitem: "Boja pozadine",
   },
   suggestion_menu: {
     no_items_title: "Stavke nisu pronađene",
@@ -287,6 +297,9 @@ export const hr = {
     align_justify: {
       tooltip: "Poravnaj tekst obostrano",
     },
+    table_cell_merge: {
+      tooltip: "Spoji ćelije",
+    },
     comment: {
       tooltip: "Dodaj komentar",
     },
@@ -340,6 +353,10 @@ export const hr = {
     reactions: {
       reacted_by: "Reagirao/la",
     },
+    sidebar: {
+      marked_as_resolved: "Označeno kao riješeno",
+      more_replies: (count) => `${count} dodatnih odgovora`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/is.ts

@@ -332,6 +332,10 @@ export const is: Dictionary = {
     reactions: {
       reacted_by: "Brást við af",
     },
+    sidebar: {
+      marked_as_resolved: "Merkt sem leyst",
+      more_replies: (count) => `${count} fleiri svör`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/it.ts

@@ -1,4 +1,6 @@
-export const it = {
+import { Dictionary } from "../dictionary.js";
+
+export const it: Dictionary = {
   slash_menu: {
     heading: {
       title: "Intestazione 1",
@@ -155,6 +157,8 @@ export const it = {
   drag_handle: {
     delete_menuitem: "Elimina",
     colors_menuitem: "Colori",
+    header_row_menuitem: "Riga intestazione",
+    header_column_menuitem: "Colonna intestazione",
   },
   table_handle: {
     delete_column_menuitem: "Elimina colonna",
@@ -163,6 +167,9 @@ export const it = {
     add_right_menuitem: "Aggiungi colonna a destra",
     add_above_menuitem: "Aggiungi riga sopra",
     add_below_menuitem: "Aggiungi riga sotto",
+    split_cell_menuitem: "Dividi cella",
+    merge_cells_menuitem: "Unisci celle",
+    background_color_menuitem: "Colore di sfondo",
   },
   suggestion_menu: {
     no_items_title: "Nessun elemento trovato",
@@ -278,6 +285,9 @@ export const it = {
     align_justify: {
       tooltip: "Giustifica testo",
     },
+    table_cell_merge: {
+      tooltip: "Unisci celle",
+    },
     comment: {
       tooltip: "Aggiungi commento",
     },
@@ -331,6 +341,10 @@ export const it = {
     reactions: {
       reacted_by: "Reagito da",
     },
+    sidebar: {
+      marked_as_resolved: "Contrassegnato come risolto",
+      more_replies: (count) => `${count} altre risposte`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/ja.ts

@@ -360,6 +360,10 @@ export const ja: Dictionary = {
     reactions: {
       reacted_by: "リアクションした人",
     },
+    sidebar: {
+      marked_as_resolved: "解決済みとしてマーク",
+      more_replies: (count) => `${count} 件の追加返信`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/ko.ts

@@ -353,6 +353,10 @@ export const ko: Dictionary = {
     reactions: {
       reacted_by: "반응한 사람",
     },
+    sidebar: {
+      marked_as_resolved: "해결됨으로 표시됨",
+      more_replies: (count) => `${count}개의 추가 답글`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/nl.ts

@@ -339,6 +339,10 @@ export const nl: Dictionary = {
     reactions: {
       reacted_by: "Gereageerd door",
     },
+    sidebar: {
+      marked_as_resolved: "Gemarkeerd als opgelost",
+      more_replies: (count) => `${count} extra reacties`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/no.ts

@@ -339,6 +339,10 @@ export const no: Dictionary = {
     reactions: {
       reacted_by: "Reagert av",
     },
+    sidebar: {
+      marked_as_resolved: "Merket som løst",
+      more_replies: (count) => `${count} flere svar`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/pl.ts

@@ -324,6 +324,10 @@ export const pl: Dictionary = {
     reactions: {
       reacted_by: "Zareagowali",
     },
+    sidebar: {
+      marked_as_resolved: "Oznaczone jako rozwiązane",
+      more_replies: (count) => `${count} więcej odpowiedzi`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/pt.ts

@@ -332,6 +332,10 @@ export const pt: Dictionary = {
     reactions: {
       reacted_by: "Reagido por",
     },
+    sidebar: {
+      marked_as_resolved: "Marcado como resolvido",
+      more_replies: (count) => `${count} respostas a mais`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/ru.ts

@@ -367,6 +367,10 @@ export const ru: Dictionary = {
     reactions: {
       reacted_by: "Отреагировал(а)",
     },
+    sidebar: {
+      marked_as_resolved: "Отмечено как решенное",
+      more_replies: (count) => `${count} дополнительных ответов`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",