@blocknote/core 0.9.5 → 0.10.0

package/src/{extensions/Blocks/nodes/BlockContent → blocks}/ImageBlockContent/ImageBlockContent.ts

@@ -1,9 +1,16 @@
-import { createBlockSpec } from "../../../api/block";
-import { defaultProps } from "../../../api/defaultProps";
-import { BlockSpec, PropSchema, SpecificBlock } from "../../../api/blockTypes";
-import { BlockNoteEditor } from "../../../../../BlockNoteEditor";
-import { imageToolbarPluginKey } from "../../../../ImageToolbar/ImageToolbarPlugin";
-import styles from "../../Block.module.css";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { imageToolbarPluginKey } from "../../extensions/ImageToolbar/ImageToolbarPlugin";
+
+import {
+  BlockFromConfig,
+  BlockSchemaWithBlock,
+  CustomBlockConfig,
+  InlineContentSchema,
+  PropSchema,
+  StyleSchema,
+  createBlockSpec,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
 
 export const imagePropSchema = {
   textAlignment: defaultProps.textAlignment,
@@ -41,50 +48,51 @@ const textAlignmentToAlignItems = (
 // Min image width in px.
 const minWidth = 64;
 
-const renderImage = (
-  block: SpecificBlock<
-    { image: BlockSpec<"image", typeof imagePropSchema, false> },
-    "image"
-  >,
-  editor: BlockNoteEditor<{
-    image: BlockSpec<"image", typeof imagePropSchema, false>;
-  }>
+const blockConfig = {
+  type: "image" as const,
+  propSchema: imagePropSchema,
+  content: "none",
+} satisfies CustomBlockConfig;
+
+export const renderImage = (
+  block: BlockFromConfig<typeof blockConfig, InlineContentSchema, StyleSchema>,
+  editor: BlockNoteEditor<BlockSchemaWithBlock<"image", typeof blockConfig>>
 ) => {
   // Wrapper element to set the image alignment, contains both image/image
   // upload dashboard and caption.
   const wrapper = document.createElement("div");
-  wrapper.className = styles.wrapper;
+  wrapper.className = "bn-image-block-content-wrapper";
   wrapper.style.alignItems = textAlignmentToAlignItems(
     block.props.textAlignment
   );
 
   // Button element that acts as a placeholder for images with no src.
   const addImageButton = document.createElement("div");
-  addImageButton.className = styles.addImageButton;
+  addImageButton.className = "bn-add-image-button";
   addImageButton.style.display = block.props.url === "" ? "" : "none";
 
   // Icon for the add image button.
   const addImageButtonIcon = document.createElement("div");
-  addImageButtonIcon.className = styles.addImageButtonIcon;
+  addImageButtonIcon.className = "bn-add-image-button-icon";
 
   // Text for the add image button.
   const addImageButtonText = document.createElement("p");
-  addImageButtonText.className = styles.addImageButtonText;
+  addImageButtonText.className = "bn-add-image-button-text";
   addImageButtonText.innerText = "Add Image";
 
   // Wrapper element for the image, resize handles and caption.
   const imageAndCaptionWrapper = document.createElement("div");
-  imageAndCaptionWrapper.className = styles.imageAndCaptionWrapper;
+  imageAndCaptionWrapper.className = "bn-image-and-caption-wrapper";
   imageAndCaptionWrapper.style.display = block.props.url !== "" ? "" : "none";
 
   // Wrapper element for the image and resize handles.
   const imageWrapper = document.createElement("div");
-  imageWrapper.className = styles.imageWrapper;
+  imageWrapper.className = "bn-image-wrapper";
   imageWrapper.style.display = block.props.url !== "" ? "" : "none";
 
   // Image element.
   const image = document.createElement("img");
-  image.className = styles.image;
+  image.className = "bn-image";
   image.src = block.props.url;
   image.alt = "placeholder";
   image.contentEditable = "false";
@@ -96,15 +104,15 @@ const renderImage = (
 
   // Resize handle elements.
   const leftResizeHandle = document.createElement("div");
-  leftResizeHandle.className = styles.resizeHandle;
+  leftResizeHandle.className = "bn-image-resize-handle";
   leftResizeHandle.style.left = "4px";
   const rightResizeHandle = document.createElement("div");
-  rightResizeHandle.className = styles.resizeHandle;
+  rightResizeHandle.className = "bn-image-resize-handle";
   rightResizeHandle.style.right = "4px";
 
   // Caption element.
   const caption = document.createElement("p");
-  caption.className = styles.caption;
+  caption.className = "bn-image-caption";
   caption.innerText = block.props.caption;
   caption.style.padding = block.props.caption ? "4px" : "";
 
@@ -207,7 +215,7 @@ const renderImage = (
       type: "image",
       props: {
         // Removes "px" from the end of the width string and converts to float.
-        width: parseFloat(image.style.width.slice(0, -2)),
+        width: parseFloat(image.style.width.slice(0, -2)) as any,
       },
     });
   };
@@ -225,6 +233,34 @@ const renderImage = (
     );
   };
 
+  // Shows the resize handles when hovering over the image with the cursor.
+  const imageMouseEnterHandler = () => {
+    if (editor.isEditable) {
+      leftResizeHandle.style.display = "block";
+      rightResizeHandle.style.display = "block";
+    } else {
+      leftResizeHandle.style.display = "none";
+      rightResizeHandle.style.display = "none";
+    }
+  };
+  // Hides the resize handles when the cursor leaves the image, unless the
+  // cursor moves to one of the resize handles.
+  const imageMouseLeaveHandler = (event: MouseEvent) => {
+    if (
+      event.relatedTarget === leftResizeHandle ||
+      event.relatedTarget === rightResizeHandle
+    ) {
+      return;
+    }
+
+    if (resizeParams) {
+      return;
+    }
+
+    leftResizeHandle.style.display = "none";
+    rightResizeHandle.style.display = "none";
+  };
+
   // Sets the resize params, allowing the user to begin resizing the image by
   // moving the cursor left or right.
   const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
@@ -266,6 +302,8 @@ const renderImage = (
   window.addEventListener("mouseup", windowMouseUpHandler);
   addImageButton.addEventListener("mousedown", addImageButtonMouseDownHandler);
   addImageButton.addEventListener("click", addImageButtonClickHandler);
+  image.addEventListener("mouseenter", imageMouseEnterHandler);
+  image.addEventListener("mouseleave", imageMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
     leftResizeHandleMouseDownHandler
@@ -297,9 +335,57 @@ const renderImage = (
   };
 };
 
-export const Image = createBlockSpec({
-  type: "image",
-  propSchema: imagePropSchema,
-  containsInlineContent: false,
-  render: renderImage,
-});
+export const Image = createBlockSpec(
+  {
+    type: "image" as const,
+    propSchema: imagePropSchema,
+    content: "none",
+  },
+  {
+    render: renderImage,
+    toExternalHTML: (block) => {
+      if (block.props.url === "") {
+        const div = document.createElement("p");
+        div.innerHTML = "Add Image";
+
+        return {
+          dom: div,
+        };
+      }
+
+      const figure = document.createElement("figure");
+
+      const img = document.createElement("img");
+      img.src = block.props.url;
+      figure.appendChild(img);
+
+      if (block.props.caption !== "") {
+        const figcaption = document.createElement("figcaption");
+        figcaption.innerHTML = block.props.caption;
+        figure.appendChild(figcaption);
+      }
+
+      return {
+        dom: figure,
+      };
+    },
+    parse: (element: HTMLElement) => {
+      if (element.tagName === "FIGURE") {
+        const img = element.querySelector("img");
+        const caption = element.querySelector("figcaption");
+        return {
+          url: img?.getAttribute("src") || "",
+          caption:
+            caption?.textContent || img?.getAttribute("alt") || undefined,
+        };
+      } else if (element.tagName === "IMG") {
+        return {
+          url: element.getAttribute("src") || "",
+          caption: element.getAttribute("alt") || undefined,
+        };
+      }
+
+      return undefined;
+    },
+  }
+);

package/src/{extensions/Blocks/nodes/BlockContent → blocks}/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -1,19 +1,21 @@
-import { InputRule, mergeAttributes } from "@tiptap/core";
-import { defaultProps } from "../../../../api/defaultProps";
-import { createTipTapBlock } from "../../../../api/block";
-import { BlockSpec, PropSchema } from "../../../../api/blockTypes";
-import { mergeCSSClasses } from "../../../../../../shared/utils";
+import { InputRule } from "@tiptap/core";
+import {
+  PropSchema,
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
+import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
-import styles from "../../../Block.module.css";
 
 export const bulletListItemPropSchema = {
   ...defaultProps,
 } satisfies PropSchema;
 
-const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
+const BulletListItemBlockContent = createStronglyTypedTiptapNode({
   name: "bulletListItem",
   content: "inline*",
-
+  group: "blockContent",
   addInputRules() {
     return [
       // Creates an unordered list when starting with "-", "+", or "*".
@@ -36,13 +38,7 @@ const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
     return {
       Enter: () => handleEnter(this.editor),
       "Mod-Shift-7": () =>
-        this.editor.commands.BNUpdateBlock<{
-          bulletListItem: BlockSpec<
-            "bulletListItem",
-            typeof bulletListItemPropSchema,
-            true
-          >;
-        }>(this.editor.state.selection.anchor, {
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
           type: "bulletListItem",
           props: {},
         }),
@@ -52,6 +48,9 @@ const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
   parseHTML() {
     return [
       // Case for regular HTML list structure.
+      {
+        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+      },
       {
         tag: "li",
         getAttrs: (element) => {
@@ -65,7 +64,10 @@ const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
             return false;
           }
 
-          if (parent.tagName === "UL") {
+          if (
+            parent.tagName === "UL" ||
+            (parent.tagName === "DIV" && parent.parentElement!.tagName === "UL")
+          ) {
             return {};
           }
 
@@ -100,37 +102,22 @@ const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const blockContentDOMAttributes =
-      this.options.domAttributes?.blockContent || {};
-    const inlineContentDOMAttributes =
-      this.options.domAttributes?.inlineContent || {};
-
-    return [
-      "div",
-      mergeAttributes(HTMLAttributes, {
-        ...blockContentDOMAttributes,
-        class: mergeCSSClasses(
-          styles.blockContent,
-          blockContentDOMAttributes.class
-        ),
-        "data-content-type": this.name,
-      }),
-      [
-        "p",
-        {
-          ...inlineContentDOMAttributes,
-          class: mergeCSSClasses(
-            styles.inlineContent,
-            inlineContentDOMAttributes.class
-          ),
-        },
-        0,
-      ],
-    ];
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      // We use a <p> tag, because for <li> tags we'd need a <ul> element to put
+      // them in to be semantically correct, which we can't have due to the
+      // schema.
+      "p",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
   },
 });
 
-export const BulletListItem = {
-  node: BulletListItemBlockContent,
-  propSchema: bulletListItemPropSchema,
-} satisfies BlockSpec<"bulletListItem", typeof bulletListItemPropSchema, true>;
+export const BulletListItem = createBlockSpecFromStronglyTypedTiptapNode(
+  BulletListItemBlockContent,
+  bulletListItemPropSchema
+);

package/src/{extensions/Blocks/nodes/BlockContent → blocks}/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/core";
-import { getBlockInfoFromPos } from "../../../helpers/getBlockInfoFromPos";
+import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
 
 export const handleEnter = (editor: Editor) => {
   const { node, contentType } = getBlockInfoFromPos(

package/src/{extensions/Blocks/nodes/BlockContent → blocks}/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts

@@ -1,5 +1,5 @@
 import { Plugin, PluginKey } from "prosemirror-state";
-import { getBlockInfoFromPos } from "../../../../helpers/getBlockInfoFromPos";
+import { getBlockInfoFromPos } from "../../../api/getBlockInfoFromPos";
 
 // ProseMirror Plugin which automatically assigns indices to ordered list items per nesting level.
 const PLUGIN_KEY = new PluginKey(`numbered-list-indexing`);

package/src/{extensions/Blocks/nodes/BlockContent → blocks}/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -1,23 +1,22 @@
-import { InputRule, mergeAttributes } from "@tiptap/core";
-import { defaultProps } from "../../../../api/defaultProps";
-import { createTipTapBlock } from "../../../../api/block";
-import { BlockSpec, PropSchema } from "../../../../api/blockTypes";
-import { mergeCSSClasses } from "../../../../../../shared/utils";
+import { InputRule } from "@tiptap/core";
+import {
+  PropSchema,
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
+import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
-import styles from "../../../Block.module.css";
 
 export const numberedListItemPropSchema = {
   ...defaultProps,
 } satisfies PropSchema;
 
-const NumberedListItemBlockContent = createTipTapBlock<
-  "numberedListItem",
-  true
->({
+const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   name: "numberedListItem",
   content: "inline*",
-
+  group: "blockContent",
   addAttributes() {
     return {
       index: {
@@ -54,13 +53,7 @@ const NumberedListItemBlockContent = createTipTapBlock<
     return {
       Enter: () => handleEnter(this.editor),
       "Mod-Shift-8": () =>
-        this.editor.commands.BNUpdateBlock<{
-          numberedListItem: BlockSpec<
-            "numberedListItem",
-            typeof numberedListItemPropSchema,
-            true
-          >;
-        }>(this.editor.state.selection.anchor, {
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
           type: "numberedListItem",
           props: {},
         }),
@@ -73,6 +66,9 @@ const NumberedListItemBlockContent = createTipTapBlock<
 
   parseHTML() {
     return [
+      {
+        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+      },
       // Case for regular HTML list structure.
       // (e.g.: when pasting from other apps)
       {
@@ -88,7 +84,10 @@ const NumberedListItemBlockContent = createTipTapBlock<
             return false;
           }
 
-          if (parent.tagName === "OL") {
+          if (
+            parent.tagName === "OL" ||
+            (parent.tagName === "DIV" && parent.parentElement!.tagName === "OL")
+          ) {
             return {};
           }
 
@@ -124,43 +123,22 @@ const NumberedListItemBlockContent = createTipTapBlock<
   },
 
   renderHTML({ HTMLAttributes }) {
-    const blockContentDOMAttributes =
-      this.options.domAttributes?.blockContent || {};
-    const inlineContentDOMAttributes =
-      this.options.domAttributes?.inlineContent || {};
-
-    return [
-      "div",
-      mergeAttributes(HTMLAttributes, {
-        ...blockContentDOMAttributes,
-        class: mergeCSSClasses(
-          styles.blockContent,
-          blockContentDOMAttributes.class
-        ),
-        "data-content-type": this.name,
-      }),
-      // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
-      // which would be quite cumbersome
-      [
-        "p",
-        {
-          ...inlineContentDOMAttributes,
-          class: mergeCSSClasses(
-            styles.inlineContent,
-            inlineContentDOMAttributes.class
-          ),
-        },
-        0,
-      ],
-    ];
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      // We use a <p> tag, because for <li> tags we'd need an <ol> element to
+      // put them in to be semantically correct, which we can't have due to the
+      // schema.
+      "p",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
   },
 });
 
-export const NumberedListItem = {
-  node: NumberedListItemBlockContent,
-  propSchema: numberedListItemPropSchema,
-} satisfies BlockSpec<
-  "numberedListItem",
-  typeof numberedListItemPropSchema,
-  true
->;
+export const NumberedListItem = createBlockSpecFromStronglyTypedTiptapNode(
+  NumberedListItemBlockContent,
+  numberedListItemPropSchema
+);

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -0,0 +1,43 @@
+import {
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
+import { defaultProps } from "../defaultProps";
+
+export const paragraphPropSchema = {
+  ...defaultProps,
+};
+
+export const ParagraphBlockContent = createStronglyTypedTiptapNode({
+  name: "paragraph",
+  content: "inline*",
+  group: "blockContent",
+  parseHTML() {
+    return [
+      { tag: "div[data-content-type=" + this.name + "]" },
+      {
+        tag: "p",
+        priority: 200,
+        node: "paragraph",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      "p",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+  },
+});
+
+export const Paragraph = createBlockSpecFromStronglyTypedTiptapNode(
+  ParagraphBlockContent,
+  paragraphPropSchema
+);

package/src/blocks/README.md

@@ -0,0 +1,3 @@
+### @blocknote/core/src/blocks
+
+The default built-in blocks that ship with BlockNote

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -0,0 +1,74 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import {
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
+import { defaultProps } from "../defaultProps";
+import { TableExtension } from "./TableExtension";
+
+export const tablePropSchema = {
+  ...defaultProps,
+};
+
+export const TableBlockContent = createStronglyTypedTiptapNode({
+  name: "table",
+  content: "tableRow+",
+  group: "blockContent",
+  tableRole: "table",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      "table",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+  },
+});
+
+const TableParagraph = Node.create({
+  name: "tableParagraph",
+  group: "tableContent",
+  content: "inline*",
+
+  parseHTML() {
+    return [{ tag: "p" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "p",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
+
+export const Table = createBlockSpecFromStronglyTypedTiptapNode(
+  TableBlockContent,
+  tablePropSchema,
+  [
+    TableExtension,
+    TableParagraph,
+    TableHeader.extend({
+      content: "tableContent",
+    }),
+    TableCell.extend({
+      content: "tableContent",
+    }),
+    TableRow,
+  ]
+);

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -0,0 +1,63 @@
+import { callOrReturn, Extension, getExtensionField } from "@tiptap/core";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+
+export const TableExtension = Extension.create({
+  name: "BlockNoteTableExtension",
+
+  addProseMirrorPlugins: () => {
+    return [
+      columnResizing({
+        cellMinWidth: 100,
+      }),
+      tableEditing(),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      // Makes enter create a new line within the cell.
+      Enter: () => {
+        if (
+          this.editor.state.selection.empty &&
+          this.editor.state.selection.$head.parent.type.name ===
+            "tableParagraph"
+        ) {
+          this.editor.commands.setHardBreak();
+
+          return true;
+        }
+
+        return false;
+      },
+      // Ensures that backspace won't delete the table if the text cursor is at
+      // the start of a cell and the selection is empty.
+      Backspace: () => {
+        const selection = this.editor.state.selection;
+        const selectionIsEmpty = selection.empty;
+        const selectionIsAtStartOfNode = selection.$head.parentOffset === 0;
+        const selectionIsInTableParagraphNode =
+          selection.$head.node().type.name === "tableParagraph";
+
+        return (
+          selectionIsEmpty &&
+          selectionIsAtStartOfNode &&
+          selectionIsInTableParagraphNode
+        );
+      },
+    };
+  },
+
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage,
+    };
+
+    return {
+      tableRole: callOrReturn(
+        getExtensionField(extension, "tableRole", context)
+      ),
+    };
+  },
+});