@blocknote/core 0.36.0 → 0.37.0

package/src/api/nodeUtil.ts

@@ -1,34 +1,4 @@
-import { combineTransactionSteps } from "@tiptap/core";
 import type { Node } from "prosemirror-model";
-import type { Transaction } from "prosemirror-state";
-import {
-  Block,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  DefaultStyleSchema,
-} from "../blocks/defaultBlocks.js";
-import type { BlockSchema } from "../schema/index.js";
-import type { InlineContentSchema } from "../schema/inlineContent/types.js";
-import type { StyleSchema } from "../schema/styles/types.js";
-import { nodeToBlock } from "./nodeConversions/nodeToBlock.js";
-import { getPmSchema } from "./pmUtil.js";
-
-/**
- * Gets the parent block of a node, if it has one.
- */
-function getParentBlockId(doc: Node, pos: number): string | undefined {
-  if (pos === 0) {
-    return undefined;
-  }
-  const resolvedPos = doc.resolve(pos);
-  for (let i = resolvedPos.depth; i > 0; i--) {
-    const parent = resolvedPos.node(i);
-    if (isNodeBlock(parent)) {
-      return parent.attrs.id;
-    }
-  }
-  return undefined;
-}
 
 /**
  * Get a TipTap node by id
@@ -70,223 +40,3 @@ export function getNodeById(
 export function isNodeBlock(node: Node): boolean {
   return node.type.isInGroup("bnBlock");
 }
-
-/**
- * This attributes the changes to a specific source.
- */
-export type BlockChangeSource =
-  | { type: "local" }
-  | { type: "paste" }
-  | { type: "drop" }
-  | { type: "undo" | "redo" | "undo-redo" }
-  | { type: "yjs-remote" };
-
-export type BlocksChanged<
-  BSchema extends BlockSchema = DefaultBlockSchema,
-  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-  SSchema extends StyleSchema = DefaultStyleSchema,
-> = Array<
-  {
-    /**
-     * The affected block.
-     */
-    block: Block<BSchema, ISchema, SSchema>;
-    /**
-     * The source of the change.
-     */
-    source: BlockChangeSource;
-  } & (
-    | {
-        type: "insert" | "delete";
-        /**
-         * Insert and delete changes don't have a previous block.
-         */
-        prevBlock: undefined;
-      }
-    | {
-        type: "update";
-        /**
-         * The previous block.
-         */
-        prevBlock: Block<BSchema, ISchema, SSchema>;
-      }
-    | {
-        type: "move";
-        /**
-         * The affected block.
-         */
-        block: Block<BSchema, ISchema, SSchema>;
-        /**
-         * The block before the move.
-         */
-        prevBlock: Block<BSchema, ISchema, SSchema>;
-        /**
-         * The previous parent block (if it existed).
-         */
-        prevParent?: Block<BSchema, ISchema, SSchema>;
-        /**
-         * The current parent block (if it exists).
-         */
-        currentParent?: Block<BSchema, ISchema, SSchema>;
-      }
-  )
->;
-
-/**
- * Compares two blocks, ignoring their children.
- * Returns true if the blocks are different (excluding children).
- */
-function areBlocksDifferentExcludingChildren<
-  BSchema extends BlockSchema,
-  ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema,
->(
-  block1: Block<BSchema, ISchema, SSchema>,
-  block2: Block<BSchema, ISchema, SSchema>,
-): boolean {
-  return (
-    block1.id !== block2.id ||
-    block1.type !== block2.type ||
-    JSON.stringify(block1.props) !== JSON.stringify(block2.props) ||
-    JSON.stringify(block1.content) !== JSON.stringify(block2.content)
-  );
-}
-
-function determineChangeSource(transaction: Transaction): BlockChangeSource {
-  if (transaction.getMeta("paste")) {
-    return { type: "paste" };
-  }
-  if (transaction.getMeta("uiEvent") === "drop") {
-    return { type: "drop" };
-  }
-  if (transaction.getMeta("history$")) {
-    return {
-      type: transaction.getMeta("history$").redo ? "redo" : "undo",
-    };
-  }
-  if (transaction.getMeta("y-sync$")) {
-    if (transaction.getMeta("y-sync$").isUndoRedoOperation) {
-      return { type: "undo-redo" };
-    }
-    return { type: "yjs-remote" };
-  }
-  return { type: "local" };
-}
-
-function collectAllBlocks<
-  BSchema extends BlockSchema,
-  ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema,
->(
-  doc: Node,
-): Record<
-  string,
-  {
-    block: Block<BSchema, ISchema, SSchema>;
-    parentId: string | undefined;
-  }
-> {
-  const blocks: Record<
-    string,
-    {
-      block: Block<BSchema, ISchema, SSchema>;
-      parentId: string | undefined;
-    }
-  > = {};
-  const pmSchema = getPmSchema(doc);
-  doc.descendants((node, pos) => {
-    if (isNodeBlock(node)) {
-      const parentId = getParentBlockId(doc, pos);
-      blocks[node.attrs.id] = {
-        block: nodeToBlock(node, pmSchema),
-        parentId,
-      };
-    }
-    return true;
-  });
-  return blocks;
-}
-
-/**
- * Get the blocks that were changed by a transaction.
- */
-export function getBlocksChangedByTransaction<
-  BSchema extends BlockSchema = DefaultBlockSchema,
-  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
-  SSchema extends StyleSchema = DefaultStyleSchema,
->(
-  transaction: Transaction,
-  appendedTransactions: Transaction[] = [],
-): BlocksChanged<BSchema, ISchema, SSchema> {
-  const source = determineChangeSource(transaction);
-  const combinedTransaction = combineTransactionSteps(transaction.before, [
-    transaction,
-    ...appendedTransactions,
-  ]);
-
-  const prevBlocks = collectAllBlocks<BSchema, ISchema, SSchema>(
-    combinedTransaction.before,
-  );
-  const nextBlocks = collectAllBlocks<BSchema, ISchema, SSchema>(
-    combinedTransaction.doc,
-  );
-
-  const changes: BlocksChanged<BSchema, ISchema, SSchema> = [];
-
-  // Handle inserted blocks
-  Object.keys(nextBlocks)
-    .filter((id) => !(id in prevBlocks))
-    .forEach((id) => {
-      changes.push({
-        type: "insert",
-        block: nextBlocks[id].block,
-        source,
-        prevBlock: undefined,
-      });
-    });
-
-  // Handle deleted blocks
-  Object.keys(prevBlocks)
-    .filter((id) => !(id in nextBlocks))
-    .forEach((id) => {
-      changes.push({
-        type: "delete",
-        block: prevBlocks[id].block,
-        source,
-        prevBlock: undefined,
-      });
-    });
-
-  // Handle updated, moved, indented, outdented blocks
-  Object.keys(nextBlocks)
-    .filter((id) => id in prevBlocks)
-    .forEach((id) => {
-      const prev = prevBlocks[id];
-      const next = nextBlocks[id];
-      const isParentDifferent = prev.parentId !== next.parentId;
-
-      if (isParentDifferent) {
-        changes.push({
-          type: "move",
-          block: next.block,
-          prevBlock: prev.block,
-          source,
-          prevParent: prev.parentId
-            ? prevBlocks[prev.parentId]?.block
-            : undefined,
-          currentParent: next.parentId
-            ? nextBlocks[next.parentId]?.block
-            : undefined,
-        });
-      } else if (areBlocksDifferentExcludingChildren(prev.block, next.block)) {
-        changes.push({
-          type: "update",
-          block: next.block,
-          prevBlock: prev.block,
-          source,
-        });
-      }
-    });
-
-  return changes;
-}

package/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -18,6 +18,7 @@ export const createResizableFileBlockWrapper = (
     buttonIcon,
   );
   const wrapper = dom;
+  wrapper.style.position = "relative";
   if (block.props.url && block.props.showPreview) {
     if (block.props.previewWidth) {
       wrapper.style.width = `${block.props.previewWidth}px`;
@@ -33,6 +34,15 @@ export const createResizableFileBlockWrapper = (
   rightResizeHandle.className = "bn-resize-handle";
   rightResizeHandle.style.right = "4px";
 
+  // This element ensures `mousemove` and `mouseup` events are captured while
+  // resizing when the cursor is over the wrapper content. This is because
+  // embeds are treated as separate HTML documents, so if the content is an
+  // embed, the events will only fire within that document.
+  const eventCaptureElement = document.createElement("div");
+  eventCaptureElement.style.position = "absolute";
+  eventCaptureElement.style.height = "100%";
+  eventCaptureElement.style.width = "100%";
+
   // Temporary parameters set when the user begins resizing the element, used to
   // calculate the new width of the element.
   let resizeParams:
@@ -118,6 +128,10 @@ export const createResizableFileBlockWrapper = (
 
     resizeParams = undefined;
 
+    if (wrapper.contains(eventCaptureElement)) {
+      wrapper.removeChild(eventCaptureElement);
+    }
+
     editor.updateBlock(block, {
       props: {
         previewWidth: width,
@@ -161,6 +175,10 @@ export const createResizableFileBlockWrapper = (
   const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
     resizeParams = {
       handleUsed: "left",
       initialWidth: wrapper.clientWidth,
@@ -170,6 +188,10 @@ export const createResizableFileBlockWrapper = (
   const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
     resizeParams = {
       handleUsed: "right",
       initialWidth: wrapper.clientWidth,

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -34,8 +34,8 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
     ];
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return createDefaultBlockDOMOutputSpec(
+  renderHTML({ node, HTMLAttributes }) {
+    const domOutputSpec = createDefaultBlockDOMOutputSpec(
       this.name,
       "table",
       {
@@ -44,6 +44,30 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
       },
       this.options.domAttributes?.inlineContent || {},
     );
+
+    // Need to manually add colgroup element
+    const colGroup = document.createElement("colgroup");
+    for (const tableCell of node.children[0].children) {
+      const colWidths: null | (number | undefined)[] =
+        tableCell.attrs["colwidth"];
+
+      if (colWidths) {
+        for (const colWidth of tableCell.attrs["colwidth"]) {
+          const col = document.createElement("col");
+          if (colWidth) {
+            col.style = `width: ${colWidth}px`;
+          }
+
+          colGroup.appendChild(col);
+        }
+      } else {
+        colGroup.appendChild(document.createElement("col"));
+      }
+    }
+
+    domOutputSpec.dom.firstChild?.appendChild(colGroup);
+
+    return domOutputSpec;
   },
 
   // This node view is needed for the `columnResizing` plugin. By default, the

package/src/editor/BlockNoteEditor.ts

@@ -110,7 +110,7 @@ import { docToBlocks } from "../api/nodeConversions/nodeToBlock.js";
 import {
   BlocksChanged,
   getBlocksChangedByTransaction,
-} from "../api/nodeUtil.js";
+} from "../api/getBlocksChangedByTransaction.js";
 import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
 import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
 import type { ThreadStore, User } from "../comments/index.js";

package/src/editor/editor.css

@@ -176,6 +176,11 @@ Tippy popups that are appended to document.body directly
   text-align: left;
 }
 
+.bn-editor [data-content-type="table"] th > p,
+.bn-editor [data-content-type="table"] td > p {
+  min-height: 1.5rem;
+}
+
 /* tiptap uses colwidth instead of data-colwidth, se we need to adjust this style from prosemirror-tables */
 .ProseMirror td,
 .ProseMirror th {

package/src/extensions/BlockChange/BlockChangePlugin.ts

@@ -1,7 +1,9 @@
 import { Plugin, Transaction } from "prosemirror-state";
-import { getBlocksChangedByTransaction } from "../../api/nodeUtil.js";
+import {
+  BlocksChanged,
+  getBlocksChangedByTransaction,
+} from "../../api/getBlocksChangedByTransaction.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { BlocksChanged } from "../../index.js";
 
 /**
  * This plugin can filter transactions before they are applied to the editor, but with a higher-level API than `filterTransaction` from prosemirror.

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -211,11 +211,7 @@ export class FormattingToolbarView implements PluginView {
       // content causes the formatting toolbar to be in the wrong place. We
       // know the component has not yet rendered if the reference position has
       // zero dimensions.
-      if (
-        newReferencePos.x === 0 ||
-        newReferencePos.y === 0 ||
-        newReferencePos.height === 0
-      ) {
+      if (newReferencePos.height === 0 && newReferencePos.width === 0) {
         // Updates the reference position again following the render.
         queueMicrotask(() => {
           const nextState = {

package/src/index.ts

@@ -4,6 +4,7 @@ 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/getBlocksChangedByTransaction.js";
 export * from "./api/nodeUtil.js";
 export * from "./api/pmUtil.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";

package/types/src/api/getBlocksChangedByTransaction.d.ts

@@ -0,0 +1,63 @@
+import type { Transaction } from "prosemirror-state";
+import { Block, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema } from "../blocks/defaultBlocks.js";
+import type { BlockSchema } from "../schema/index.js";
+import type { InlineContentSchema } from "../schema/inlineContent/types.js";
+import type { StyleSchema } from "../schema/styles/types.js";
+/**
+ * This attributes the changes to a specific source.
+ */
+export type BlockChangeSource = {
+    type: "local";
+} | {
+    type: "paste";
+} | {
+    type: "drop";
+} | {
+    type: "undo" | "redo" | "undo-redo";
+} | {
+    type: "yjs-remote";
+};
+export type BlocksChanged<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema> = Array<{
+    /**
+     * The affected block.
+     */
+    block: Block<BSchema, ISchema, SSchema>;
+    /**
+     * The source of the change.
+     */
+    source: BlockChangeSource;
+} & ({
+    type: "insert" | "delete";
+    /**
+     * Insert and delete changes don't have a previous block.
+     */
+    prevBlock: undefined;
+} | {
+    type: "update";
+    /**
+     * The previous block.
+     */
+    prevBlock: Block<BSchema, ISchema, SSchema>;
+} | {
+    type: "move";
+    /**
+     * The affected block.
+     */
+    block: Block<BSchema, ISchema, SSchema>;
+    /**
+     * The block before the move.
+     */
+    prevBlock: Block<BSchema, ISchema, SSchema>;
+    /**
+     * The previous parent block (if it existed).
+     */
+    prevParent?: Block<BSchema, ISchema, SSchema>;
+    /**
+     * The current parent block (if it exists).
+     */
+    currentParent?: Block<BSchema, ISchema, SSchema>;
+})>;
+/**
+ * Get the blocks that were changed by a transaction.
+ */
+export declare function getBlocksChangedByTransaction<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema>(transaction: Transaction, appendedTransactions?: Transaction[]): BlocksChanged<BSchema, ISchema, SSchema>;

package/types/src/api/nodeUtil.d.ts

@@ -1,9 +1,4 @@
 import type { Node } from "prosemirror-model";
-import type { Transaction } from "prosemirror-state";
-import { Block, DefaultBlockSchema, DefaultInlineContentSchema, DefaultStyleSchema } from "../blocks/defaultBlocks.js";
-import type { BlockSchema } from "../schema/index.js";
-import type { InlineContentSchema } from "../schema/inlineContent/types.js";
-import type { StyleSchema } from "../schema/styles/types.js";
 /**
  * Get a TipTap node by id
  */
@@ -12,61 +7,3 @@ export declare function getNodeById(id: string, doc: Node): {
     posBeforeNode: number;
 } | undefined;
 export declare function isNodeBlock(node: Node): boolean;
-/**
- * This attributes the changes to a specific source.
- */
-export type BlockChangeSource = {
-    type: "local";
-} | {
-    type: "paste";
-} | {
-    type: "drop";
-} | {
-    type: "undo" | "redo" | "undo-redo";
-} | {
-    type: "yjs-remote";
-};
-export type BlocksChanged<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema> = Array<{
-    /**
-     * The affected block.
-     */
-    block: Block<BSchema, ISchema, SSchema>;
-    /**
-     * The source of the change.
-     */
-    source: BlockChangeSource;
-} & ({
-    type: "insert" | "delete";
-    /**
-     * Insert and delete changes don't have a previous block.
-     */
-    prevBlock: undefined;
-} | {
-    type: "update";
-    /**
-     * The previous block.
-     */
-    prevBlock: Block<BSchema, ISchema, SSchema>;
-} | {
-    type: "move";
-    /**
-     * The affected block.
-     */
-    block: Block<BSchema, ISchema, SSchema>;
-    /**
-     * The block before the move.
-     */
-    prevBlock: Block<BSchema, ISchema, SSchema>;
-    /**
-     * The previous parent block (if it existed).
-     */
-    prevParent?: Block<BSchema, ISchema, SSchema>;
-    /**
-     * The current parent block (if it exists).
-     */
-    currentParent?: Block<BSchema, ISchema, SSchema>;
-})>;
-/**
- * Get the blocks that were changed by a transaction.
- */
-export declare function getBlocksChangedByTransaction<BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, SSchema extends StyleSchema = DefaultStyleSchema>(transaction: Transaction, appendedTransactions?: Transaction[]): BlocksChanged<BSchema, ISchema, SSchema>;

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

@@ -18,7 +18,7 @@ import { BlockNoteTipTapEditor } from "./BlockNoteTipTapEditor.js";
 import { Dictionary } from "../i18n/dictionary.js";
 import { type Command, type Plugin, type Transaction } from "@tiptap/pm/state";
 import { EditorView } from "prosemirror-view";
-import { BlocksChanged } from "../api/nodeUtil.js";
+import { BlocksChanged } from "../api/getBlocksChangedByTransaction.js";
 import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
 import type { ThreadStore, User } from "../comments/index.js";
 import type { ForkYDocPlugin } from "../extensions/Collaboration/ForkYDocPlugin.js";

package/types/src/extensions/BlockChange/BlockChangePlugin.d.ts

@@ -1,6 +1,6 @@
 import { Transaction } from "prosemirror-state";
+import { BlocksChanged } from "../../api/getBlocksChangedByTransaction.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { BlocksChanged } from "../../index.js";
 /**
  * This plugin can filter transactions before they are applied to the editor, but with a higher-level API than `filterTransaction` from prosemirror.
  */

package/types/src/extensions/TableHandles/TableHandlesPlugin.d.ts

@@ -138,9 +138,9 @@ export declare class TableHandlesProsemirrorPlugin<I extends InlineContentSchema
      */
     getMergeDirection: (block: BlockFromConfigNoChildren<DefaultBlockSchema["table"], any, any> | undefined) => "vertical" | "horizontal" | undefined;
     cropEmptyRowsOrColumns: (block: BlockFromConfigNoChildren<DefaultBlockSchema["table"], any, any>, removeEmpty: "columns" | "rows") => {
-        cells: (import("../../index.js").CustomInlineContentFromConfig<any, any> | import("../../index.js").StyledText<any> | import("../../index.js").Link<any>)[][] | import("../../index.js").TableCell<any, any>[];
+        cells: (import("../../index.js").StyledText<any> | import("../../index.js").Link<any> | import("../../index.js").CustomInlineContentFromConfig<any, any>)[][] | import("../../index.js").TableCell<any, any>[];
     }[];
     addRowsOrColumns: (block: BlockFromConfigNoChildren<DefaultBlockSchema["table"], any, any>, addType: "columns" | "rows", numToAdd: number) => {
-        cells: (import("../../index.js").CustomInlineContentFromConfig<any, any> | import("../../index.js").StyledText<any> | import("../../index.js").Link<any>)[][] | import("../../index.js").TableCell<any, any>[];
+        cells: (import("../../index.js").StyledText<any> | import("../../index.js").Link<any> | import("../../index.js").CustomInlineContentFromConfig<any, any>)[][] | import("../../index.js").TableCell<any, any>[];
     }[];
 }

package/types/src/index.d.ts

@@ -4,6 +4,7 @@ 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/getBlocksChangedByTransaction.js";
 export * from "./api/nodeUtil.js";
 export * from "./api/pmUtil.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";

package/types/src/schema/inlineContent/internal.d.ts

@@ -19,7 +19,7 @@ export declare function createInlineContentSpecFromTipTapNode<T extends Node, P
     config: {
         type: T["name"];
         propSchema: P;
-        content: "styled" | "none";
+        content: "none" | "styled";
     };
     implementation: {
         node: Node;