@blocknote/core 0.9.6 → 0.10.0

package/src/extensions/TextColor/TextColorExtension.ts

@@ -1,14 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
-import { defaultProps } from "../Blocks/api/defaultProps";
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    blockTextColor: {
-      setBlockTextColor: (posInBlock: number, color: string) => ReturnType;
-    };
-  }
-}
+import { defaultProps } from "../../blocks/defaultProps";
 
 export const TextColorExtension = Extension.create({
   name: "blockTextColor",
@@ -33,23 +24,4 @@ export const TextColorExtension = Extension.create({
       },
     ];
   },
-
-  addCommands() {
-    return {
-      setBlockTextColor:
-        (posInBlock, color) =>
-        ({ state, view }) => {
-          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
-          if (blockInfo === undefined) {
-            return false;
-          }
-
-          state.tr.setNodeAttribute(blockInfo.startPos - 1, "textColor", color);
-
-          view.focus();
-
-          return true;
-        },
-    };
-  },
 });

package/src/extensions/TextColor/TextColorMark.ts

@@ -1,24 +1,16 @@
 import { Mark } from "@tiptap/core";
-import { defaultProps } from "../Blocks/api/defaultProps";
+import { createStyleSpecFromTipTapMark } from "../../schema";
 
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    textColor: {
-      setTextColor: (color: string) => ReturnType;
-    };
-  }
-}
-
-export const TextColorMark = Mark.create({
+const TextColorMark = Mark.create({
   name: "textColor",
 
   addAttributes() {
     return {
-      color: {
+      stringValue: {
         default: undefined,
         parseHTML: (element) => element.getAttribute("data-text-color"),
         renderHTML: (attributes) => ({
-          "data-text-color": attributes.color,
+          "data-text-color": attributes.stringValue,
         }),
       },
     };
@@ -34,7 +26,7 @@ export const TextColorMark = Mark.create({
           }
 
           if (element.hasAttribute("data-text-color")) {
-            return { color: element.getAttribute("data-text-color") };
+            return { stringValue: element.getAttribute("data-text-color") };
           }
 
           return false;
@@ -46,18 +38,6 @@ export const TextColorMark = Mark.create({
   renderHTML({ HTMLAttributes }) {
     return ["span", HTMLAttributes, 0];
   },
-
-  addCommands() {
-    return {
-      setTextColor:
-        (color) =>
-        ({ commands }) => {
-          if (color !== defaultProps.textColor.default) {
-            return commands.setMark(this.name, { color: color });
-          }
-
-          return commands.unsetMark(this.name);
-        },
-    };
-  },
 });
+
+export const TextColor = createStyleSpecFromTipTapMark(TextColorMark, "string");

package/src/extensions/UniqueID/UniqueID.ts

@@ -172,6 +172,33 @@ const UniqueID = Extension.create({
                   ? void 0
                   : _a.attrs[attributeName];
               if (id === null) {
+                // edge case, when using collaboration, yjs will set the id to null in `_forceRerender`
+                // when loading the editor
+                // this checks for this case and keeps it at initialBlockId so there will be no change
+                const initialDoc = oldState.doc.type.createAndFill()!.content;
+                const wasInitial =
+                  oldState.doc.content.findDiffStart(initialDoc) === null;
+
+                if (wasInitial) {
+                  // the old state was the "initial content"
+                  const jsonNode = JSON.parse(
+                    JSON.stringify(newState.doc.toJSON())
+                  );
+                  jsonNode.content[0].content[0].attrs.id = "initialBlockId";
+                  // would the new state with the fix also be the "initial content"?
+                  if (
+                    JSON.stringify(jsonNode.content) ===
+                    JSON.stringify(initialDoc.toJSON())
+                  ) {
+                    // yes, apply the fix
+                    tr.setNodeMarkup(pos, undefined, {
+                      ...node.attrs,
+                      [attributeName]: "initialBlockId",
+                    });
+                    return;
+                  }
+                }
+
                 tr.setNodeMarkup(pos, undefined, {
                   ...node.attrs,
                   [attributeName]: generateID(),
@@ -285,5 +312,4 @@ const UniqueID = Extension.create({
   },
 });
 
-export { UniqueID, UniqueID as default };
-//# sourceMappingURL=tiptap-extension-unique-id.esm.js.map
+export { UniqueID as default, UniqueID };

package/src/extensions-shared/README.md

@@ -0,0 +1,3 @@
+### @blocknote/core/src/extensions-shared
+
+Helper functions / base plugins for @blocknote/core/src/extensions

package/src/{shared/plugins → extensions-shared}/suggestion/SuggestionPlugin.ts

@@ -1,11 +1,13 @@
+import { findParentNode } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import { BlockNoteEditor } from "../../../BlockNoteEditor";
-import { BlockSchema } from "../../../extensions/Blocks/api/blockTypes";
-import { findBlock } from "../../../extensions/Blocks/helpers/findBlock";
-import { BaseUiElementState } from "../../BaseUiElementTypes";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { BaseUiElementState } from "../BaseUiElementTypes";
 import { SuggestionItem } from "./SuggestionItem";
 
+const findBlock = findParentNode((node) => node.type.name === "blockContainer");
+
 export type SuggestionsMenuState<T extends SuggestionItem> =
   BaseUiElementState & {
     // The suggested items to display.
@@ -16,7 +18,9 @@ export type SuggestionsMenuState<T extends SuggestionItem> =
 
 class SuggestionsMenuView<
   T extends SuggestionItem,
-  BSchema extends BlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 > {
   private suggestionsMenuState?: SuggestionsMenuState<T>;
   public updateSuggestionsMenu: () => void;
@@ -24,7 +28,7 @@ class SuggestionsMenuView<
   pluginState: SuggestionPluginState<T>;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema>,
+    private readonly editor: BlockNoteEditor<BSchema, I, S>,
     private readonly pluginKey: PluginKey,
     updateSuggestionsMenu: (
       suggestionsMenuState: SuggestionsMenuState<T>
@@ -147,9 +151,11 @@ function getDefaultPluginState<
  */
 export const setupSuggestionsMenu = <
   T extends SuggestionItem,
-  BSchema extends BlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 >(
-  editor: BlockNoteEditor<BSchema>,
+  editor: BlockNoteEditor<BSchema, I, S>,
   updateSuggestionsMenu: (
     suggestionsMenuState: SuggestionsMenuState<T>
   ) => void,
@@ -159,7 +165,7 @@ export const setupSuggestionsMenu = <
   items: (query: string) => T[] = () => [],
   onSelectItem: (props: {
     item: T;
-    editor: BlockNoteEditor<BSchema>;
+    editor: BlockNoteEditor<BSchema, I, S>;
   }) => void = () => {
     // noop
   }
@@ -169,7 +175,7 @@ export const setupSuggestionsMenu = <
     throw new Error("'char' should be a single character");
   }
 
-  let suggestionsPluginView: SuggestionsMenuView<T, BSchema>;
+  let suggestionsPluginView: SuggestionsMenuView<T, BSchema, I, S>;
 
   const deactivate = (view: EditorView) => {
     view.dispatch(view.state.tr.setMeta(pluginKey, { deactivate: true }));
@@ -180,7 +186,7 @@ export const setupSuggestionsMenu = <
       key: pluginKey,
 
       view: () => {
-        suggestionsPluginView = new SuggestionsMenuView<T, BSchema>(
+        suggestionsPluginView = new SuggestionsMenuView<T, BSchema, I, S>(
           editor,
           pluginKey,
 
@@ -398,7 +404,7 @@ export const setupSuggestionsMenu = <
                   blockNode.pos + blockNode.node.nodeSize,
                   {
                     nodeName: "span",
-                    class: "suggestion-decorator",
+                    class: "bn-suggestion-decorator",
                     "data-decoration-id": decorationId,
                   }
                 ),
@@ -412,7 +418,7 @@ export const setupSuggestionsMenu = <
               queryStartPos,
               {
                 nodeName: "span",
-                class: "suggestion-decorator",
+                class: "bn-suggestion-decorator",
                 "data-decoration-id": decorationId,
               }
             ),

package/src/index.ts

@@ -1,14 +1,15 @@
-export * from "./BlockNoteEditor";
-export * from "./BlockNoteExtensions";
-export * from "./extensions/Blocks/api/block";
-export * from "./extensions/Blocks/api/blockTypes";
-export * from "./extensions/Blocks/api/defaultProps";
-export * from "./extensions/Blocks/api/defaultBlocks";
-export * from "./extensions/Blocks/api/inlineContentTypes";
-export * from "./extensions/Blocks/api/selectionTypes";
-export * from "./extensions/Blocks/api/serialization";
-export * as blockStyles from "./extensions/Blocks/nodes/Block.module.css";
-export * from "./extensions/Blocks/nodes/BlockContent/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./api/exporters/html/externalHTMLExporter";
+export * from "./api/exporters/html/internalHTMLSerializer";
+export * from "./api/testUtil";
+export * from "./blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+export * from "./blocks/defaultBlocks";
+export * from "./blocks/defaultProps";
+export * from "./editor/BlockNoteEditor";
+export * from "./editor/BlockNoteExtensions";
+export * from "./editor/selectionTypes";
+export * from "./extensions-shared/BaseUiElementTypes";
+export type { SuggestionItem } from "./extensions-shared/suggestion/SuggestionItem";
+export * from "./extensions-shared/suggestion/SuggestionPlugin";
 export * from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
 export * from "./extensions/ImageToolbar/ImageToolbarPlugin";
@@ -16,7 +17,12 @@ export * from "./extensions/SideMenu/SideMenuPlugin";
 export * from "./extensions/SlashMenu/BaseSlashMenuItem";
 export * from "./extensions/SlashMenu/SlashMenuPlugin";
 export { getDefaultSlashMenuItems } from "./extensions/SlashMenu/defaultSlashMenuItems";
-export * from "./shared/BaseUiElementTypes";
-export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
-export * from "./shared/plugins/suggestion/SuggestionPlugin";
-export * from "./shared/utils";
+export * from "./extensions/TableHandles/TableHandlesPlugin";
+export * from "./schema";
+export * from "./util/browser";
+export * from "./util/string";
+// for testing from react (TODO: move):
+export * from "./api/nodeConversions/nodeConversions";
+export * from "./api/testUtil/partialBlockTestUtil";
+export * from "./extensions/UniqueID/UniqueID";
+export { UnreachableCaseError } from "./util/typescript";

package/src/{extensions/Blocks/nodes → pm-nodes}/BlockContainer.ts

@@ -1,22 +1,34 @@
-import { mergeAttributes, Node } from "@tiptap/core";
+import { Node } from "@tiptap/core";
 import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
 import { NodeSelection, TextSelection } from "prosemirror-state";
+
+import { getBlockInfoFromPos } from "../api/getBlockInfoFromPos";
 import {
   blockToNode,
   inlineContentToNodes,
-} from "../../../api/nodeConversions/nodeConversions";
-
+  tableContentToNodes,
+} from "../api/nodeConversions/nodeConversions";
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
+import { NonEditableBlockPlugin } from "../extensions/NonEditableBlocks/NonEditableBlockPlugin";
+import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin";
 import {
   BlockNoteDOMAttributes,
   BlockSchema,
+  InlineContentSchema,
   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";
-import { NonEditableBlockPlugin } from "../NonEditableBlockPlugin";
+  StyleSchema,
+} from "../schema";
+import { mergeCSSClasses } from "../util/browser";
+import { UnreachableCaseError } from "../util/typescript";
+
+// Object containing all possible block attributes.
+const BlockAttributes: Record<string, string> = {
+  blockColor: "data-block-color",
+  blockStyle: "data-block-style",
+  id: "data-id",
+  depth: "data-depth",
+  depthChange: "data-depth-change",
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -25,13 +37,21 @@ declare module "@tiptap/core" {
       BNDeleteBlock: (posInBlock: number) => ReturnType;
       BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
       BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
-      BNUpdateBlock: <BSchema extends BlockSchema>(
+      BNUpdateBlock: <
+        BSchema extends BlockSchema,
+        I extends InlineContentSchema,
+        S extends StyleSchema
+      >(
         posInBlock: number,
-        block: PartialBlock<BSchema>
+        block: PartialBlock<BSchema, I, S>
       ) => ReturnType;
-      BNCreateOrUpdateBlock: <BSchema extends BlockSchema>(
+      BNCreateOrUpdateBlock: <
+        BSchema extends BlockSchema,
+        I extends InlineContentSchema,
+        S extends StyleSchema
+      >(
         posInBlock: number,
-        block: PartialBlock<BSchema>
+        block: PartialBlock<BSchema, I, S>
       ) => ReturnType;
     };
   }
@@ -42,6 +62,7 @@ declare module "@tiptap/core" {
  */
 export const BlockContainer = Node.create<{
   domAttributes?: BlockNoteDOMAttributes;
+  editor: BlockNoteEditor<BlockSchema, InlineContentSchema, StyleSchema>;
 }>({
   name: "blockContainer",
   group: "blockContainer",
@@ -78,27 +99,34 @@ export const BlockContainer = Node.create<{
   },
 
   renderHTML({ HTMLAttributes }) {
-    const domAttributes = this.options.domAttributes?.blockContainer || {};
+    const blockOuter = document.createElement("div");
+    blockOuter.className = "bn-block-outer";
+    blockOuter.setAttribute("data-node-type", "blockOuter");
+    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+      if (attribute !== "class") {
+        blockOuter.setAttribute(attribute, value);
+      }
+    }
+
+    const blockHTMLAttributes = {
+      ...(this.options.domAttributes?.blockContainer || {}),
+      ...HTMLAttributes,
+    };
+    const block = document.createElement("div");
+    block.className = mergeCSSClasses("bn-block", blockHTMLAttributes.class);
+    block.setAttribute("data-node-type", this.name);
+    for (const [attribute, value] of Object.entries(blockHTMLAttributes)) {
+      if (attribute !== "class") {
+        block.setAttribute(attribute, value);
+      }
+    }
 
-    return [
-      "div",
-      mergeAttributes(HTMLAttributes, {
-        class: styles.blockOuter,
-        "data-node-type": "block-outer",
-      }),
-      [
-        "div",
-        mergeAttributes(
-          {
-            ...domAttributes,
-            class: mergeCSSClasses(styles.block, domAttributes.class),
-            "data-node-type": this.name,
-          },
-          HTMLAttributes
-        ),
-        0,
-      ],
-    ];
+    blockOuter.appendChild(block);
+
+    return {
+      dom: blockOuter,
+      contentDOM: block,
+    };
   },
 
   addCommands() {
@@ -151,7 +179,13 @@ export const BlockContainer = Node.create<{
 
               // Creates ProseMirror nodes for each child block, including their descendants.
               for (const child of block.children) {
-                childNodes.push(blockToNode(child, state.schema));
+                childNodes.push(
+                  blockToNode(
+                    child,
+                    state.schema,
+                    this.options.editor.styleSchema
+                  )
+                );
               }
 
               // Checks if a blockGroup node already exists.
@@ -171,59 +205,63 @@ export const BlockContainer = Node.create<{
               }
             }
 
-            // Replaces the blockContent node's content if necessary.
-            if (block.content !== undefined) {
-              let content: PMNode[] = [];
+            const oldType = contentNode.type.name;
+            const newType = block.type || oldType;
+
+            // The code below determines the new content of the block.
+            // or "keep" to keep as-is
+            let content: PMNode[] | "keep" = "keep";
 
-              // Checks if the provided content is a string or InlineContent[] type.
+            // Has there been any custom content provided?
+            if (block.content) {
               if (typeof block.content === "string") {
                 // Adds a single text node with no marks to the content.
-                content.push(state.schema.text(block.content));
+                content = [state.schema.text(block.content)];
+              } else if (Array.isArray(block.content)) {
+                // Adds a text node with the provided styles converted into marks to the content,
+                // for each InlineContent object.
+                content = inlineContentToNodes(
+                  block.content,
+                  state.schema,
+                  this.options.editor.styleSchema
+                );
+              } else if (block.content.type === "tableContent") {
+                content = tableContentToNodes(
+                  block.content,
+                  state.schema,
+                  this.options.editor.styleSchema
+                );
               } else {
-                // Adds a text node with the provided styles converted into marks to the content, for each InlineContent
-                // object.
-                content = inlineContentToNodes(block.content, state.schema);
+                throw new UnreachableCaseError(block.content.type);
+              }
+            } else {
+              // no custom content has been provided, use existing content IF possible
+
+              // 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 oldContentType = state.schema.nodes[oldType].spec.content;
+              const newContentType = state.schema.nodes[newType].spec.content;
+
+              if (oldContentType === "") {
+                // keep old content, because it's empty anyway and should be compatible with
+                // any newContentType
+              } else if (newContentType !== oldContentType) {
+                // the content type changed, replace the previous content
+                content = [];
+              } else {
+                // keep old content, because the content type is the same and should be compatible
               }
-
-              // Replaces the contents of the blockContent node with the previously created text node(s).
-              state.tr.replace(
-                startPos + 1,
-                startPos + contentNode.nodeSize - 1,
-                new Slice(Fragment.from(content), 0, 0)
-              );
             }
 
-            // 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.
-              // Need to reset the selection since replacing the block content
-              // sets it to the next block.
-              state.tr
-                .replaceWith(
-                  startPos,
-                  endPos,
-                  state.schema.nodes[newType].create({
-                    ...contentNode.attrs,
-                    ...block.props,
-                  })
-                )
-                .setSelection(
-                  new NodeSelection(state.tr.doc.resolve(startPos))
-                );
-            } 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.
+            // Now, changes the blockContent node type and adds the provided props
+            // as attributes. Also preserves all existing attributes that are
+            // compatible with the new type.
+            //
+            // Use either setNodeMarkup or replaceWith depending on whether the
+            // content is being replaced or not.
+            if (content === "keep") {
+              // use setNodeMarkup to only update the type and attributes
               state.tr.setNodeMarkup(
                 startPos,
                 block.type === undefined
@@ -234,6 +272,35 @@ export const BlockContainer = Node.create<{
                   ...block.props,
                 }
               );
+            } else {
+              // use replaceWith to replace the content and the block itself
+              // also  reset the selection since replacing the block content
+              // sets it to the next block.
+              state.tr
+                .replaceWith(
+                  startPos,
+                  endPos,
+                  state.schema.nodes[newType].create(
+                    {
+                      ...contentNode.attrs,
+                      ...block.props,
+                    },
+                    content
+                  )
+                )
+                // If the node doesn't contain editable content, we want to
+                // select the whole node. But if it does have editable content,
+                // we want to set the selection to the start of it.
+                .setSelection(
+                  state.schema.nodes[newType].spec.content === ""
+                    ? new NodeSelection(state.tr.doc.resolve(startPos))
+                    : state.schema.nodes[newType].spec.content === "inline*"
+                    ? new TextSelection(state.tr.doc.resolve(startPos))
+                    : // Need to offset the position as we have to get through the
+                      // `tableRow` and `tableCell` nodes to get to the
+                      // `tableParagraph` node we want to set the selection in.
+                      new TextSelection(state.tr.doc.resolve(startPos + 4))
+                );
             }
 
             // Adds all provided props as attributes to the parent blockContainer node too, and also preserves existing
@@ -425,13 +492,12 @@ export const BlockContainer = Node.create<{
         // Reverts block content type to a paragraph if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
-            const { contentType } = getBlockInfoFromPos(
+            const { contentType, startPos } = getBlockInfoFromPos(
               state.doc,
               state.selection.from
             )!;
 
-            const selectionAtBlockStart =
-              state.selection.$anchor.parentOffset === 0;
+            const selectionAtBlockStart = state.selection.from === startPos + 1;
             const isParagraph = contentType.name === "paragraph";
 
             if (selectionAtBlockStart && !isParagraph) {
@@ -446,8 +512,12 @@ export const BlockContainer = Node.create<{
         // Removes a level of nesting if the block is indented if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
-            const selectionAtBlockStart =
-              state.selection.$anchor.parentOffset === 0;
+            const { startPos } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const selectionAtBlockStart = state.selection.from === startPos + 1;
 
             if (selectionAtBlockStart) {
               return commands.liftListItem("blockContainer");
@@ -464,10 +534,8 @@ export const BlockContainer = Node.create<{
               state.selection.from
             )!;
 
-            const selectionAtBlockStart =
-              state.selection.$anchor.parentOffset === 0;
-            const selectionEmpty =
-              state.selection.anchor === state.selection.head;
+            const selectionAtBlockStart = state.selection.from === startPos + 1;
+            const selectionEmpty = state.selection.empty;
             const blockAtDocStart = startPos === 2;
 
             const posBetweenBlocks = startPos - 1;
@@ -494,17 +562,14 @@ export const BlockContainer = Node.create<{
         // end of the block.
         () =>
           commands.command(({ state }) => {
-            const { node, contentNode, depth, endPos } = getBlockInfoFromPos(
+            const { node, depth, endPos } = getBlockInfoFromPos(
               state.doc,
               state.selection.from
             )!;
 
             const blockAtDocEnd = false;
-            const selectionAtBlockEnd =
-              state.selection.$anchor.parentOffset ===
-              contentNode.firstChild!.nodeSize;
-            const selectionEmpty =
-              state.selection.anchor === state.selection.head;
+            const selectionAtBlockEnd = state.selection.from === endPos - 1;
+            const selectionEmpty = state.selection.empty;
             const hasChildBlocks = node.childCount === 2;
 
             if (