@blocknote/core 0.9.0 → 0.9.3

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "75d9591eef6f06f78bdd8dadc32d0ee66c57c4d2"
+  "gitHead": "3a3ca4dfc448556f9796ce884b6ba61f036dfe1a"
 }

package/src/BlockNoteEditor.ts

@@ -353,7 +353,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public forEachBlock(
     callback: (block: Block<BSchema>) => boolean,
-    reverse: boolean = false
+    reverse = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
 
@@ -692,7 +692,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       return;
     }
 
-    let { from, to } = this._tiptapEditor.state.selection;
+    const { from, to } = this._tiptapEditor.state.selection;
 
     if (!text) {
       text = this._tiptapEditor.state.doc.textBetween(from, to);

package/src/BlockNoteExtensions.ts

@@ -118,32 +118,34 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
         fragment: opts.collaboration.fragment,
       })
     );
-    const defaultRender = (user: { color: string; name: string }) => {
-      const cursor = document.createElement("span");
+    if (opts.collaboration.provider?.awareness) {
+      const defaultRender = (user: { color: string; name: string }) => {
+        const cursor = document.createElement("span");
 
-      cursor.classList.add(styles["collaboration-cursor__caret"]);
-      cursor.setAttribute("style", `border-color: ${user.color}`);
+        cursor.classList.add(styles["collaboration-cursor__caret"]);
+        cursor.setAttribute("style", `border-color: ${user.color}`);
 
-      const label = document.createElement("span");
+        const label = document.createElement("span");
 
-      label.classList.add(styles["collaboration-cursor__label"]);
-      label.setAttribute("style", `background-color: ${user.color}`);
-      label.insertBefore(document.createTextNode(user.name), null);
+        label.classList.add(styles["collaboration-cursor__label"]);
+        label.setAttribute("style", `background-color: ${user.color}`);
+        label.insertBefore(document.createTextNode(user.name), null);
 
-      const nonbreakingSpace1 = document.createTextNode("\u2060");
-      const nonbreakingSpace2 = document.createTextNode("\u2060");
-      cursor.insertBefore(nonbreakingSpace1, null);
-      cursor.insertBefore(label, null);
-      cursor.insertBefore(nonbreakingSpace2, null);
-      return cursor;
-    };
-    ret.push(
-      CollaborationCursor.configure({
-        user: opts.collaboration.user,
-        render: opts.collaboration.renderCursor || defaultRender,
-        provider: opts.collaboration.provider,
-      })
-    );
+        const nonbreakingSpace1 = document.createTextNode("\u2060");
+        const nonbreakingSpace2 = document.createTextNode("\u2060");
+        cursor.insertBefore(nonbreakingSpace1, null);
+        cursor.insertBefore(label, null);
+        cursor.insertBefore(nonbreakingSpace2, null);
+        return cursor;
+      };
+      ret.push(
+        CollaborationCursor.configure({
+          user: opts.collaboration.user,
+          render: opts.collaboration.renderCursor || defaultRender,
+          provider: opts.collaboration.provider,
+        })
+      );
+    }
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
     ret.push(History);

package/src/api/blockManipulation/blockManipulation.test.ts

@@ -24,7 +24,7 @@ let insert: (
 ) => Block<DefaultBlockSchema>[];
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 
@@ -80,7 +80,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Inserting Blocks with Different Placements", () => {

package/src/api/blockManipulation/blockManipulation.ts

@@ -107,7 +107,7 @@ export function removeBlocks(
   });
 
   if (idsOfBlocksToRemove.size > 0) {
-    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+    const notFoundIds = [...idsOfBlocksToRemove].join("\n");
 
     throw Error(
       "Blocks with the following IDs could not be found in the editor: " +

package/src/api/formatConversions/formatConversions.test.ts

@@ -579,7 +579,7 @@ function removeInlineContentClass(html: string) {
 }
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 });
@@ -588,7 +588,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Non-Nested Block/HTML/Markdown Conversions", () => {

package/src/api/formatConversions/formatConversions.ts

@@ -4,7 +4,7 @@ import rehypeRemark from "rehype-remark";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
+import remarkRehype, { defaultHandlers } from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
 import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
@@ -47,7 +47,7 @@ export async function HTMLToBlocks<BSchema extends BlockSchema>(
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(schema);
-  const parentNode = parser.parse(htmlNode);
+  const parentNode = parser.parse(htmlNode); //, { preserveWhitespace: "full" });
 
   const blocks: Block<BSchema>[] = [];
 
@@ -73,6 +73,45 @@ export async function blocksToMarkdown<BSchema extends BlockSchema>(
   return markdownString.value as string;
 }
 
+// modefied version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
+// that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
+function code(state: any, node: any) {
+  const value = node.value ? node.value + "\n" : "";
+  /** @type {Properties} */
+  const properties: any = {};
+
+  if (node.lang) {
+    // changed line
+    properties["data-language"] = node.lang;
+  }
+
+  // Create `<code>`.
+  /** @type {Element} */
+  let result: any = {
+    type: "element",
+    tagName: "code",
+    properties,
+    children: [{ type: "text", value }],
+  };
+
+  if (node.meta) {
+    result.data = { meta: node.meta };
+  }
+
+  state.patch(node, result);
+  result = state.applyData(node, result);
+
+  // Create `<pre>`.
+  result = {
+    type: "element",
+    tagName: "pre",
+    properties: {},
+    children: [result],
+  };
+  state.patch(node, result);
+  return result;
+}
+
 export async function markdownToBlocks<BSchema extends BlockSchema>(
   markdown: string,
   blockSchema: BSchema,
@@ -81,7 +120,12 @@ export async function markdownToBlocks<BSchema extends BlockSchema>(
   const htmlString = await unified()
     .use(remarkParse)
     .use(remarkGfm)
-    .use(remarkRehype)
+    .use(remarkRehype, {
+      handlers: {
+        ...(defaultHandlers as any),
+        code,
+      },
+    })
     .use(rehypeStringify)
     .process(markdown);
 

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -1,19 +1,19 @@
 import { Editor } from "@tiptap/core";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor, PartialBlock } from "../..";
-import UniqueID from "../../extensions/UniqueID/UniqueID";
-import { blockToNode, nodeToBlock } from "./nodeConversions";
-import { partialBlockToBlockForTesting } from "./testUtil";
 import {
-  defaultBlockSchema,
   DefaultBlockSchema,
+  defaultBlockSchema,
 } from "../../extensions/Blocks/api/defaultBlocks";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { blockToNode, nodeToBlock } from "./nodeConversions";
+import { partialBlockToBlockForTesting } from "./testUtil";
 
 let editor: BlockNoteEditor;
 let tt: Editor;
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
   tt = editor._tiptapEditor;
@@ -24,7 +24,7 @@ afterEach(() => {
   editor = undefined as any;
   tt = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Simple ProseMirror Node Conversions", () => {

package/src/api/nodeConversions/nodeConversions.ts

@@ -16,9 +16,9 @@ import {
   Styles,
   ToggledStyle,
 } from "../../extensions/Blocks/api/inlineContentTypes";
-import { getBlockInfoFromPos } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { UnreachableCaseError } from "../../shared/utils";
+import { getBlockInfo } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 
 const toggleStyles = new Set<ToggledStyle>([
   "bold",
@@ -91,7 +91,7 @@ function styledTextArrayToNodes(
   content: string | StyledText[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   if (typeof content === "string") {
     nodes.push(
@@ -113,7 +113,7 @@ export function inlineContentToNodes(
   blockContent: PartialInlineContent[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   for (const content of blockContent) {
     if (content.type === "link") {
@@ -369,7 +369,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
     return cachedBlock;
   }
 
-  const blockInfo = getBlockInfoFromPos(node, 0)!;
+  const blockInfo = getBlockInfo(node);
 
   let id = blockInfo.id;
 
@@ -380,7 +380,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
 
   const props: any = {};
   for (const [attr, value] of Object.entries({
-    ...blockInfo.node.attrs,
+    ...node.attrs,
     ...blockInfo.contentNode.attrs,
   })) {
     const blockSpec = blockSchema[blockInfo.contentType.name];
@@ -414,7 +414,7 @@ export function nodeToBlock<BSchema extends BlockSchema>(
   const children: Block<BSchema>[] = [];
   for (let i = 0; i < blockInfo.numChildBlocks; i++) {
     children.push(
-      nodeToBlock(blockInfo.node.lastChild!.child(i), blockSchema, blockCache)
+      nodeToBlock(node.lastChild!.child(i), blockSchema, blockCache)
     );
   }
 

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -96,7 +96,7 @@ export const PreviousBlockTypePlugin = () => {
         const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
 
         // Traverses all block containers in the new editor state.
-        for (let node of newNodes) {
+        for (const node of newNodes) {
           const oldNode = oldNodesById.get(node.node.attrs.id);
 
           const oldContentNode = oldNode?.node.firstChild;
@@ -192,7 +192,7 @@ export const PreviousBlockTypePlugin = () => {
             pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
           const decorationAttrs: any = {};
 
-          for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
+          for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
             decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }

package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts

@@ -1,16 +1,40 @@
 import { Node, NodeType } from "prosemirror-model";
 
-export type BlockInfo = {
+export type BlockInfoWithoutPositions = {
   id: string;
   node: Node;
   contentNode: Node;
   contentType: NodeType;
   numChildBlocks: number;
+};
+
+export type BlockInfo = BlockInfoWithoutPositions & {
   startPos: number;
   endPos: number;
   depth: number;
 };
 
+/**
+ * Helper function for `getBlockInfoFromPos`, returns information regarding
+ * provided blockContainer node.
+ * @param blockContainer The blockContainer node to retrieve info for.
+ */
+export function getBlockInfo(blockContainer: Node): BlockInfoWithoutPositions {
+  const id = blockContainer.attrs["id"];
+  const contentNode = blockContainer.firstChild!;
+  const contentType = contentNode.type;
+  const numChildBlocks =
+    blockContainer.childCount === 2 ? blockContainer.lastChild!.childCount : 0;
+
+  return {
+    id,
+    node: blockContainer,
+    contentNode,
+    contentType,
+    numChildBlocks,
+  };
+}
+
 /**
  * Retrieves information regarding the nearest blockContainer node in a
  * ProseMirror doc, relative to a position.
@@ -56,6 +80,7 @@ export function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo {
   let node = $pos.node(maxDepth);
   let depth = maxDepth;
 
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     if (depth < 0) {
       throw new Error(
@@ -71,10 +96,7 @@ export function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo {
     node = $pos.node(depth);
   }
 
-  const id = node.attrs["id"];
-  const contentNode = node.firstChild!;
-  const contentType = contentNode.type;
-  const numChildBlocks = node.childCount === 2 ? node.lastChild!.childCount : 0;
+  const { id, contentNode, contentType, numChildBlocks } = getBlockInfo(node);
 
   const startPos = $pos.start(depth);
   const endPos = $pos.end(depth);

package/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -6,15 +6,15 @@ import {
   inlineContentToNodes,
 } from "../../../api/nodeConversions/nodeConversions";
 
-import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
-import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
-import styles from "./Block.module.css";
-import BlockAttributes from "./BlockAttributes";
 import {
   BlockNoteDOMAttributes,
   BlockSchema,
   PartialBlock,
 } from "../api/blockTypes";
+import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
+import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
+import styles from "./Block.module.css";
+import BlockAttributes from "./BlockAttributes";
 import { mergeCSSClasses } from "../../../shared/utils";
 
 declare module "@tiptap/core" {
@@ -60,7 +60,7 @@ export const BlockContainer = Node.create<{
           }
 
           const attrs: Record<string, string> = {};
-          for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+          for (const [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
             if (element.getAttribute(HTMLAttr)) {
               attrs[nodeAttr] = element.getAttribute(HTMLAttr)!;
             }
@@ -192,18 +192,42 @@ export const BlockContainer = Node.create<{
               );
             }
 
-            // Changes the blockContent node type and adds the provided props as attributes. Also preserves all existing
-            // attributes that are compatible with the new type.
-            state.tr.setNodeMarkup(
-              startPos,
-              block.type === undefined
-                ? undefined
-                : state.schema.nodes[block.type],
-              {
-                ...contentNode.attrs,
-                ...block.props,
-              }
-            );
+            // Since some block types contain inline content and others don't,
+            // we either need to call setNodeMarkup to just update type &
+            // attributes, or replaceWith to replace the whole blockContent.
+            const oldType = contentNode.type.name;
+            const newType = block.type || oldType;
+
+            const oldContentType = state.schema.nodes[oldType].spec.content;
+            const newContentType = state.schema.nodes[newType].spec.content;
+
+            if (oldContentType === "inline*" && newContentType === "") {
+              // Replaces the blockContent node with one of the new type and
+              // adds the provided props as attributes. Also preserves all
+              // existing attributes that are compatible with the new type.
+              state.tr.replaceWith(
+                startPos,
+                endPos,
+                state.schema.nodes[newType].create({
+                  ...contentNode.attrs,
+                  ...block.props,
+                })
+              );
+            } else {
+              // Changes the blockContent node type and adds the provided props
+              // as attributes. Also preserves all existing attributes that are
+              // compatible with the new type.
+              state.tr.setNodeMarkup(
+                startPos,
+                block.type === undefined
+                  ? undefined
+                  : state.schema.nodes[block.type],
+                {
+                  ...contentNode.attrs,
+                  ...block.props,
+                }
+              );
+            }
 
             // Adds all provided props as attributes to the parent blockContainer node too, and also preserves existing
             // attributes.

package/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts

@@ -73,6 +73,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
+        ...blockContentDOMAttributes,
         class: mergeCSSClasses(
           styles.blockContent,
           blockContentDOMAttributes.class
@@ -82,6 +83,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
       [
         "h" + node.attrs.level,
         {
+          ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
             styles.inlineContent,
             inlineContentDOMAttributes.class

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -91,6 +91,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
+        ...blockContentDOMAttributes,
         class: mergeCSSClasses(
           styles.blockContent,
           blockContentDOMAttributes.class
@@ -100,6 +101,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
       [
         "p",
         {
+          ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
             styles.inlineContent,
             inlineContentDOMAttributes.class

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -115,6 +115,7 @@ export const NumberedListItemBlockContent =
       return [
         "div",
         mergeAttributes(HTMLAttributes, {
+          ...blockContentDOMAttributes,
           class: mergeCSSClasses(
             styles.blockContent,
             blockContentDOMAttributes.class
@@ -126,6 +127,7 @@ export const NumberedListItemBlockContent =
         [
           "p",
           {
+            ...inlineContentDOMAttributes,
             class: mergeCSSClasses(
               styles.inlineContent,
               inlineContentDOMAttributes.class

package/src/extensions/SideMenu/MultipleNodeSelection.ts

@@ -1,5 +1,5 @@
-import { Selection } from "prosemirror-state";
 import { Fragment, Node, ResolvedPos, Slice } from "prosemirror-model";
+import { Selection } from "prosemirror-state";
 import { Mappable } from "prosemirror-transform";
 
 /**
@@ -64,8 +64,8 @@ export class MultipleNodeSelection extends Selection {
   }
 
   map(doc: Node, mapping: Mappable): Selection {
-    let fromResult = mapping.mapResult(this.from);
-    let toResult = mapping.mapResult(this.to);
+    const fromResult = mapping.mapResult(this.from);
+    const toResult = mapping.mapResult(this.to);
 
     if (toResult.deleted) {
       return Selection.near(doc.resolve(fromResult.pos));

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -32,7 +32,7 @@ function getDraggableBlockFromCoords(
     return undefined;
   }
 
-  let pos = view.posAtCoords(coords);
+  const pos = view.posAtCoords(coords);
   if (!pos) {
     return undefined;
   }
@@ -61,12 +61,12 @@ function blockPositionFromCoords(
   coords: { left: number; top: number },
   view: EditorView
 ) {
-  let block = getDraggableBlockFromCoords(coords, view);
+  const block = getDraggableBlockFromCoords(coords, view);
 
   if (block && block.node.nodeType === 1) {
     // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
     const docView = (view as any).docView;
-    let desc = docView.nearestDesc(block.node, true);
+    const desc = docView.nearestDesc(block.node, true);
     if (!desc || desc === docView) {
       return null;
     }
@@ -186,12 +186,12 @@ function dragStart(
 
   const editorBoundingBox = view.dom.getBoundingClientRect();
 
-  let coords = {
+  const coords = {
     left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
     top: e.clientY,
   };
 
-  let pos = blockPositionFromCoords(coords, view);
+  const pos = blockPositionFromCoords(coords, view);
   if (pos != null) {
     const selection = view.state.selection;
     const doc = view.state.doc;
@@ -215,8 +215,8 @@ function dragStart(
       setDragImage(view, pos);
     }
 
-    let slice = view.state.selection.content();
-    let { dom, text } = serializeForClipboard(view, slice);
+    const slice = view.state.selection.content();
+    const { dom, text } = serializeForClipboard(view, slice);
 
     e.dataTransfer.clearData();
     e.dataTransfer.setData("text/html", dom.innerHTML);
@@ -288,7 +288,7 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
       return;
     }
 
-    let pos = this.pmView.posAtCoords({
+    const pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });
@@ -319,7 +319,7 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
     if ((event as any).synthetic || !this.isDragging) {
       return;
     }
-    let pos = this.pmView.posAtCoords({
+    const pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });

package/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -64,7 +64,19 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
             if (!lastNode || lastNode.type.name !== "blockContainer") {
               throw new Error("Expected blockContainer");
             }
-            return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
+
+            const lastContentNode = lastNode.firstChild;
+
+            if (!lastContentNode) {
+              throw new Error("Expected blockContent");
+            }
+
+            // If last node is not empty (size > 4) or it doesn't contain
+            // inline content, we need to add a trailing node.
+            return (
+              lastNode.nodeSize > 4 ||
+              lastContentNode.type.spec.content !== "inline*"
+            );
           },
         },
       }),