@blocknote/core 0.25.2 → 0.27.0

package/src/editor/BlockNoteExtensions.ts

@@ -1,6 +1,5 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
-import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
@@ -17,6 +16,7 @@ import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import type { ThreadStore } from "../comments/index.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
+import { HardBreak } from "../extensions/HardBreak/HardBreak.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
 import {
@@ -44,7 +44,11 @@ import {
   StyleSchema,
   StyleSpecs,
 } from "../schema/index.js";
-import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
+import type {
+  BlockNoteEditor,
+  BlockNoteEditorOptions,
+  BlockNoteExtension,
+} from "./BlockNoteEditor.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -82,6 +86,7 @@ type ExtensionOptions<
   comments?: {
     threadStore: ThreadStore;
   };
+  pasteHandler: BlockNoteEditorOptions<any, any, any>["pasteHandler"];
 };
 
 /**
@@ -179,7 +184,7 @@ const getTipTapExtensions = <
       types: ["blockContainer", "columnList", "column"],
       setIdAttribute: opts.setIdAttribute,
     }),
-    HardBreak.extend({ priority: 10 }),
+    HardBreak,
     // Comments,
 
     // basics:
@@ -258,7 +263,16 @@ const getTipTapExtensions = <
       ];
     }),
     createCopyToClipboardExtension(opts.editor),
-    createPasteFromClipboardExtension(opts.editor),
+    createPasteFromClipboardExtension(
+      opts.editor,
+      opts.pasteHandler ||
+        ((context: {
+          defaultPasteHandler: (context?: {
+            prioritizeMarkdownOverHTML?: boolean;
+            plainTextAsMarkdown?: boolean;
+          }) => boolean | undefined;
+        }) => context.defaultPasteHandler())
+    ),
     createDropFileExtension(opts.editor),
 
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),

package/src/editor/BlockNoteTipTapEditor.ts

@@ -10,6 +10,7 @@ import { EditorState, Transaction } from "@tiptap/pm/state";
 import { blockToNode } from "../api/nodeConversions/blockToNode.js";
 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">
@@ -149,7 +150,10 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   /**
    * Replace the default `createView` method with a custom one - which we call on mount
    */
-  private createViewAlternative(contentComponent?: any) {
+  private createViewAlternative(
+    blockNoteEditor: BlockNoteEditor<any, any, any>,
+    contentComponent?: any
+  ) {
     (this as any).contentComponent = contentComponent;
 
     const markViews: any = {};
@@ -157,7 +161,8 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       if (extension.type === "mark" && extension.config.addMarkView) {
         // Note: migrate to using `addMarkView` from tiptap as soon as this lands
         // (currently tiptap doesn't support markviews)
-        markViews[extension.name] = extension.config.addMarkView;
+        markViews[extension.name] =
+          extension.config.addMarkView(blockNoteEditor);
       }
     });
 
@@ -169,19 +174,21 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
         dispatchTransaction: this.dispatchTransaction.bind(this),
         state: this.state,
         markViews,
+        nodeViews: this.extensionManager.nodeViews,
       }
     );
 
     // `editor.view` is not yet available at this time.
-    // Therefore we will add all plugins and node views directly afterwards.
+    // Therefore we will add all plugins directly afterwards.
+    //
+    // To research: this is the default tiptap behavior, but might actually not be necessary
+    // it feels like it's a workaround for plugins that don't account for the view not being available yet
     const newState = this.state.reconfigure({
       plugins: this.extensionManager.plugins,
     });
 
     this.view.updateState(newState);
 
-    this.createNodeViews();
-
     // emit the created event, call here manually because we blocked the default call in the constructor
     // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
     this.commands.focus(
@@ -198,12 +205,16 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    *
    * @param element DOM element to mount to, ur null / undefined to destroy
    */
-  public mount = (element?: HTMLElement | null, contentComponent?: any) => {
+  public mount = (
+    blockNoteEditor: BlockNoteEditor<any, any, any>,
+    element?: HTMLElement | null,
+    contentComponent?: any
+  ) => {
     if (!element) {
       this.destroy();
     } else {
       this.options.element = element;
-      this.createViewAlternative(contentComponent);
+      this.createViewAlternative(blockNoteEditor, contentComponent);
     }
   };
 }

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,
     });
   }
 
@@ -111,7 +106,7 @@ export class CommentsPlugin extends EventEmitter<any> {
               pos + node.nodeSize,
               ttEditor.state.doc.content.size - 1
             );
-            tr.removeMark(trimmedFrom, trimmedTo, markType);
+            tr.removeMark(trimmedFrom, trimmedTo, mark);
             tr.addMark(
               trimmedFrom,
               trimmedTo,
@@ -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",
+      });
+    }
   }
 
   /**

package/src/extensions/HardBreak/HardBreak.ts

@@ -0,0 +1,35 @@
+// Stripped down version of the TipTap HardBreak extension:
+// https://github.com/ueberdosis/tiptap/blob/f3258d9ee5fb7979102fe63434f6ea4120507311/packages/extension-hard-break/src/hard-break.ts#L80
+// Changes:
+// - Removed options
+// - Removed keyboard shortcuts & moved them to the `KeyboardShortcutsExtension`
+// - Removed `setHardBreak` command (added a simpler version in the Shift+Enter
+// handler in `KeyboardShortcutsExtension`).
+// - Added priority
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export const HardBreak = Node.create({
+  name: "hardBreak",
+
+  inline: true,
+
+  group: "inline",
+
+  selectable: false,
+
+  linebreakReplacement: true,
+
+  priority: 10,
+
+  parseHTML() {
+    return [{ tag: "br" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  renderText() {
+    return "\n";
+  },
+});

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -260,6 +260,73 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             return true;
           }),
+        // Deletes the current block if it's an empty block with inline content,
+        // and moves the selection to the previous block.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const blockEmpty =
+              blockInfo.blockContent.node.childCount === 0 &&
+              blockInfo.blockContent.node.type.spec.content === "inline*";
+
+            if (blockEmpty) {
+              const prevBlockInfo = getPrevBlockInfo(
+                state.doc,
+                blockInfo.bnBlock.beforePos
+              );
+              if (!prevBlockInfo || !prevBlockInfo.isBlockContainer) {
+                return false;
+              }
+
+              let chainedCommands = chain();
+
+              if (
+                prevBlockInfo.blockContent.node.type.spec.content ===
+                "tableRow+"
+              ) {
+                const tableBlockEndPos = blockInfo.bnBlock.beforePos - 1;
+                const tableBlockContentEndPos = tableBlockEndPos - 1;
+                const lastRowEndPos = tableBlockContentEndPos - 1;
+                const lastCellEndPos = lastRowEndPos - 1;
+                const lastCellParagraphEndPos = lastCellEndPos - 1;
+
+                chainedCommands = chainedCommands.setTextSelection(
+                  lastCellParagraphEndPos
+                );
+              } else if (
+                prevBlockInfo.blockContent.node.type.spec.content === ""
+              ) {
+                const nonEditableBlockContentStartPos =
+                  prevBlockInfo.blockContent.afterPos -
+                  prevBlockInfo.blockContent.node.nodeSize;
+
+                chainedCommands = chainedCommands.setNodeSelection(
+                  nonEditableBlockContentStartPos
+                );
+              } else {
+                const blockContentStartPos =
+                  prevBlockInfo.blockContent.afterPos -
+                  prevBlockInfo.blockContent.node.nodeSize;
+
+                chainedCommands =
+                  chainedCommands.setTextSelection(blockContentStartPos);
+              }
+
+              return chainedCommands
+                .deleteRange({
+                  from: blockInfo.bnBlock.beforePos,
+                  to: blockInfo.bnBlock.afterPos,
+                })
+                .scrollIntoView()
+                .run();
+            }
+
+            return false;
+          }),
         // Deletes previous block if it contains no content and isn't a table,
         // when the selection is empty and at the start of the block. Moves the
         // current block into the deleted block's place.
@@ -370,8 +437,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
           }),
       ]);
 
-    const handleEnter = () =>
-      this.editor.commands.first(({ commands }) => [
+    const handleEnter = (withShift = false) => {
+      return this.editor.commands.first(({ commands }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
         // of the block.
         () =>
@@ -400,6 +467,34 @@ export const KeyboardShortcutsExtension = Extension.create<{
               return commands.liftListItem("blockContainer");
             }
 
+            return false;
+          }),
+        // Creates a hard break if block is configured to do so.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+
+            const blockHardBreakShortcut: "shift+enter" | "enter" | "none" =
+              this.options.editor.schema.blockSchema[blockInfo.blockNoteType]
+                .hardBreakShortcut ?? "shift+enter";
+
+            if (blockHardBreakShortcut === "none") {
+              return false;
+            }
+
+            if (
+              // If shortcut is not configured, or is configured as "shift+enter",
+              // create a hard break for shift+enter, but not for enter.
+              (blockHardBreakShortcut === "shift+enter" && withShift) ||
+              // If shortcut is configured as "enter", create a hard break for
+              // both enter and shift+enter.
+              blockHardBreakShortcut === "enter"
+            ) {
+              return commands.insertContent({
+                type: "hardBreak",
+              });
+            }
+
             return false;
           }),
         // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
@@ -471,11 +566,13 @@ export const KeyboardShortcutsExtension = Extension.create<{
             return false;
           }),
       ]);
+    };
 
     return {
       Backspace: handleBackspace,
       Delete: handleDelete,
-      Enter: handleEnter,
+      Enter: () => handleEnter(),
+      "Shift-Enter": () => handleEnter(true),
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {

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/SuggestionPlugin.ts

@@ -86,7 +86,9 @@ class SuggestionMenuView<
     this.pluginState = stopped ? prev : next;
 
     if (stopped || !this.editor.isEditable) {
-      this.state!.show = false;
+      if (this.state) {
+        this.state.show = false;
+      }
       this.emitUpdate(this.pluginState!.triggerCharacter);
 
       return;

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"
@@ -121,6 +125,18 @@ export function getDefaultSlashMenuItems<
     );
   }
 
+  if (checkDefaultBlockTypeInSchema("quote", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "quote",
+        });
+      },
+      key: "quote",
+      ...editor.dictionary.slash_menu.quote,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
       onItemClick: () => {

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/index.ts

@@ -0,0 +1,2 @@
+export * from "./locales/index.js";
+export * from "./dictionary.js";