@blocknote/core 0.25.2 → 0.26.0

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";
@@ -539,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;
@@ -569,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."
@@ -656,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",

package/src/i18n/locales/uk.ts

@@ -364,6 +364,10 @@ export const uk: Dictionary = {
     reactions: {
       reacted_by: "Відреагував(ла)",
     },
+    sidebar: {
+      marked_as_resolved: "Позначено як вирішене",
+      more_replies: (count) => `${count} додаткових відповідей`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/vi.ts

@@ -339,6 +339,10 @@ export const vi: Dictionary = {
     reactions: {
       reacted_by: "Phản ứng bởi",
     },
+    sidebar: {
+      marked_as_resolved: "Đã đánh dấu là đã giải quyết",
+      more_replies: (count) => `${count} câu trả lời nữa`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/src/i18n/locales/zh.ts

@@ -373,6 +373,10 @@ export const zh: Dictionary = {
     reactions: {
       reacted_by: "已回应",
     },
+    sidebar: {
+      marked_as_resolved: "标记为已解决",
+      more_replies: (count) => `还有 ${count} 条回复`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",

package/types/src/comments/types.d.ts

@@ -97,6 +97,10 @@ export type ThreadData = {
      * The date when the thread was marked as resolved.
      */
     resolvedUpdatedAt?: Date;
+    /**
+     * The id of the user that marked the thread as resolved.
+     */
+    resolvedBy?: string;
     /**
      * You can use this store any additional information about the thread.
      */

package/types/src/editor/BlockNoteTipTapEditor.d.ts

@@ -3,6 +3,7 @@ import { Editor as TiptapEditor } from "@tiptap/core";
 import { EditorState, Transaction } from "@tiptap/pm/state";
 import { PartialBlock } from "../blocks/defaultBlocks.js";
 import { StyleSchema } from "../schema/index.js";
+import type { BlockNoteEditor } from "./BlockNoteEditor.js";
 export type BlockNoteTipTapEditorOptions = Partial<Omit<EditorOptions, "content">> & {
     content: PartialBlock<any, any, any>[];
 };
@@ -25,5 +26,5 @@ export declare class BlockNoteTipTapEditor extends TiptapEditor {
      *
      * @param element DOM element to mount to, ur null / undefined to destroy
      */
-    mount: (element?: HTMLElement | null, contentComponent?: any) => void;
+    mount: (blockNoteEditor: BlockNoteEditor<any, any, any>, element?: HTMLElement | null, contentComponent?: any) => void;
 }

package/types/src/extensions/Comments/CommentsPlugin.d.ts

@@ -9,8 +9,19 @@ export declare class CommentsPlugin extends EventEmitter<any> {
     private readonly markType;
     readonly plugin: Plugin;
     readonly userStore: UserStore<User>;
+    /**
+     * Whether a comment is currently being composed
+     */
     private pendingComment;
+    /**
+     * The currently selected thread id
+     */
     private selectedThreadId;
+    /**
+     * Store the positions of all threads in the document.
+     * this can be used later to implement a floating sidebar
+     */
+    private threadPositions;
     private emitStateUpdate;
     /**
      * when a thread is resolved or deleted, we need to update the marks to reflect the new state
@@ -23,11 +34,15 @@ export declare class CommentsPlugin extends EventEmitter<any> {
     onUpdate(callback: (state: {
         pendingComment: boolean;
         selectedThreadId: string | undefined;
+        threadPositions: Map<string, {
+            from: number;
+            to: number;
+        }>;
     }) => void): () => void;
     /**
      * Set the selected thread
      */
-    selectThread(threadId: string | undefined): void;
+    selectThread(threadId: string | undefined, scrollToThread?: boolean): void;
     /**
      * Start a pending comment (e.g.: when clicking the "Add comment" button)
      */

package/types/src/extensions/Comments/threadstore/DefaultThreadStoreAuth.d.ts

@@ -0,0 +1,47 @@
+import { CommentData, ThreadData } from "../types.js";
+import { ThreadStoreAuth } from "./ThreadStoreAuth.js";
+export declare class DefaultThreadStoreAuth extends ThreadStoreAuth {
+    private readonly userId;
+    private readonly role;
+    constructor(userId: string, role: "comment" | "editor");
+    /**
+     * Auth: should be possible by anyone with comment access
+     */
+    canCreateThread(): boolean;
+    /**
+     * Auth: should be possible by anyone with comment access
+     */
+    canAddComment(_thread: ThreadData): boolean;
+    /**
+     * Auth: should only be possible by the comment author
+     */
+    canUpdateComment(comment: CommentData): boolean;
+    /**
+     * Auth: should be possible by the comment author OR an editor of the document
+     */
+    canDeleteComment(comment: CommentData): boolean;
+    /**
+     * Auth: should only be possible by an editor of the document
+     */
+    canDeleteThread(_thread: ThreadData): boolean;
+    /**
+     * Auth: should be possible by anyone with comment access
+     */
+    canResolveThread(_thread: ThreadData): boolean;
+    /**
+     * Auth: should be possible by anyone with comment access
+     */
+    canUnresolveThread(_thread: ThreadData): boolean;
+    /**
+     * Auth: should be possible by anyone with comment access
+     *
+     * Note: will also check if the user has already reacted with the same emoji. TBD: is that a nice design or should this responsibility be outside of auth?
+     */
+    canAddReaction(comment: CommentData, emoji?: string): boolean;
+    /**
+     * Auth: should be possible by anyone with comment access
+     *
+     * Note: will also check if the user has already reacted with the same emoji. TBD: is that a nice design or should this responsibility be outside of auth?
+     */
+    canDeleteReaction(comment: CommentData, emoji?: string): boolean;
+}