@blocknote/core 0.9.3 → 0.9.5

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

@@ -1,6 +1,6 @@
 import { mergeAttributes, Node } from "@tiptap/core";
 import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
-import { TextSelection } from "prosemirror-state";
+import { NodeSelection, TextSelection } from "prosemirror-state";
 import {
   blockToNode,
   inlineContentToNodes,
@@ -16,6 +16,7 @@ import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import styles from "./Block.module.css";
 import BlockAttributes from "./BlockAttributes";
 import { mergeCSSClasses } from "../../../shared/utils";
+import { NonEditableBlockPlugin } from "../NonEditableBlockPlugin";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -205,14 +206,20 @@ export const BlockContainer = Node.create<{
               // 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,
-                })
-              );
+              // 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
@@ -404,7 +411,7 @@ export const BlockContainer = Node.create<{
   },
 
   addProseMirrorPlugins() {
-    return [PreviousBlockTypePlugin()];
+    return [PreviousBlockTypePlugin(), NonEditableBlockPlugin()];
   },
 
   addKeyboardShortcuts() {
@@ -478,6 +485,51 @@ export const BlockContainer = Node.create<{
           }),
       ]);
 
+    const handleDelete = () =>
+      this.editor.commands.first(({ commands }) => [
+        // Deletes the selection if it's not empty.
+        () => commands.deleteSelection(),
+        // Merges block with the next one (at the same nesting level or lower),
+        // if one exists, the block has no children, and the selection is at the
+        // end of the block.
+        () =>
+          commands.command(({ state }) => {
+            const { node, contentNode, 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 hasChildBlocks = node.childCount === 2;
+
+            if (
+              !blockAtDocEnd &&
+              selectionAtBlockEnd &&
+              selectionEmpty &&
+              !hasChildBlocks
+            ) {
+              let oldDepth = depth;
+              let newPos = endPos + 2;
+              let newDepth = state.doc.resolve(newPos).depth;
+
+              while (newDepth < oldDepth) {
+                oldDepth = newDepth;
+                newPos += 2;
+                newDepth = state.doc.resolve(newPos).depth;
+              }
+
+              return commands.BNMergeBlocks(newPos - 1);
+            }
+
+            return false;
+          }),
+      ]);
+
     const handleEnter = () =>
       this.editor.commands.first(({ commands }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
@@ -545,12 +597,14 @@ export const BlockContainer = Node.create<{
               state.selection.from
             )!;
 
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
             const blockEmpty = node.textContent.length === 0;
 
             if (!blockEmpty) {
               chain()
                 .deleteSelection()
-                .BNSplitBlock(state.selection.from, false)
+                .BNSplitBlock(state.selection.from, selectionAtBlockStart)
                 .run();
 
               return true;
@@ -562,6 +616,7 @@ export const BlockContainer = Node.create<{
 
     return {
       Backspace: handleBackspace,
+      Delete: handleDelete,
       Enter: handleEnter,
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
       // editor since the browser will try to use tab for keyboard navigation.
@@ -577,37 +632,6 @@ export const BlockContainer = Node.create<{
         this.editor.commands.BNCreateBlock(
           this.editor.state.selection.anchor + 2
         ),
-      "Mod-Alt-1": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "1",
-          },
-        }),
-      "Mod-Alt-2": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "2",
-          },
-        }),
-      "Mod-Alt-3": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "3",
-          },
-        }),
-      "Mod-Shift-7": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "bulletListItem",
-          props: {},
-        }),
-      "Mod-Shift-8": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "numberedListItem",
-          props: {},
-        }),
     };
   },
 });

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

@@ -1,21 +1,28 @@
 import { InputRule, mergeAttributes } from "@tiptap/core";
+import { defaultProps } from "../../../api/defaultProps";
 import { createTipTapBlock } from "../../../api/block";
-import styles from "../../Block.module.css";
+import { BlockSpec, PropSchema } from "../../../api/blockTypes";
 import { mergeCSSClasses } from "../../../../../shared/utils";
+import styles from "../../Block.module.css";
+
+export const headingPropSchema = {
+  ...defaultProps,
+  level: { default: 1, values: [1, 2, 3] as const },
+} satisfies PropSchema;
 
-export const HeadingBlockContent = createTipTapBlock<"heading">({
+const HeadingBlockContent = createTipTapBlock<"heading", true>({
   name: "heading",
   content: "inline*",
 
   addAttributes() {
     return {
       level: {
-        default: "1",
+        default: 1,
         // instead of "level" attributes, use "data-level"
-        parseHTML: (element) => element.getAttribute("data-level"),
+        parseHTML: (element) => element.getAttribute("data-level")!,
         renderHTML: (attributes) => {
           return {
-            "data-level": attributes.level,
+            "data-level": (attributes.level as number).toString(),
           };
         },
       },
@@ -24,16 +31,18 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
 
   addInputRules() {
     return [
-      ...["1", "2", "3"].map((level) => {
+      ...[1, 2, 3].map((level) => {
         // Creates a heading of appropriate level when starting with "#", "##", or "###".
         return new InputRule({
-          find: new RegExp(`^(#{${parseInt(level)}})\\s$`),
+          find: new RegExp(`^(#{${level}})\\s$`),
           handler: ({ state, chain, range }) => {
             chain()
-              .BNUpdateBlock(state.selection.from, {
+              .BNUpdateBlock<{
+                heading: BlockSpec<"heading", typeof headingPropSchema, true>;
+              }>(state.selection.from, {
                 type: "heading",
                 props: {
-                  level: level as "1" | "2" | "3",
+                  level: level as 1 | 2 | 3,
                 },
               })
               // Removes the "#" character(s) used to set the heading.
@@ -44,21 +53,53 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
     ];
   },
 
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-1": () =>
+        this.editor.commands.BNUpdateBlock<{
+          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
+        }>(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: 1,
+          },
+        }),
+      "Mod-Alt-2": () =>
+        this.editor.commands.BNUpdateBlock<{
+          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
+        }>(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: 2,
+          },
+        }),
+      "Mod-Alt-3": () =>
+        this.editor.commands.BNUpdateBlock<{
+          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
+        }>(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: 3,
+          },
+        }),
+    };
+  },
+
   parseHTML() {
     return [
       {
         tag: "h1",
-        attrs: { level: "1" },
+        attrs: { level: 1 },
         node: "heading",
       },
       {
         tag: "h2",
-        attrs: { level: "2" },
+        attrs: { level: 2 },
         node: "heading",
       },
       {
         tag: "h3",
-        attrs: { level: "3" },
+        attrs: { level: 3 },
         node: "heading",
       },
     ];
@@ -81,7 +122,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
         "data-content-type": this.name,
       }),
       [
-        "h" + node.attrs.level,
+        `h${node.attrs.level}`,
         {
           ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
@@ -94,3 +135,8 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
     ];
   },
 });
+
+export const Heading = {
+  node: HeadingBlockContent,
+  propSchema: headingPropSchema,
+} satisfies BlockSpec<"heading", typeof headingPropSchema, true>;

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

@@ -0,0 +1,305 @@
+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";
+
+export const imagePropSchema = {
+  textAlignment: defaultProps.textAlignment,
+  backgroundColor: defaultProps.backgroundColor,
+  // Image url.
+  url: {
+    default: "" as const,
+  },
+  // Image caption.
+  caption: {
+    default: "" as const,
+  },
+  // Image width in px.
+  width: {
+    default: 512 as const,
+  },
+} satisfies PropSchema;
+
+// Converts text alignment prop values to the flexbox `align-items` values.
+const textAlignmentToAlignItems = (
+  textAlignment: "left" | "center" | "right" | "justify"
+): "flex-start" | "center" | "flex-end" => {
+  switch (textAlignment) {
+    case "left":
+      return "flex-start";
+    case "center":
+      return "center";
+    case "right":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+};
+
+// 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>;
+  }>
+) => {
+  // 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.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.style.display = block.props.url === "" ? "" : "none";
+
+  // Icon for the add image button.
+  const addImageButtonIcon = document.createElement("div");
+  addImageButtonIcon.className = styles.addImageButtonIcon;
+
+  // Text for the add image button.
+  const addImageButtonText = document.createElement("p");
+  addImageButtonText.className = styles.addImageButtonText;
+  addImageButtonText.innerText = "Add Image";
+
+  // Wrapper element for the image, resize handles and caption.
+  const imageAndCaptionWrapper = document.createElement("div");
+  imageAndCaptionWrapper.className = styles.imageAndCaptionWrapper;
+  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.style.display = block.props.url !== "" ? "" : "none";
+
+  // Image element.
+  const image = document.createElement("img");
+  image.className = styles.image;
+  image.src = block.props.url;
+  image.alt = "placeholder";
+  image.contentEditable = "false";
+  image.draggable = false;
+  image.style.width = `${Math.min(
+    block.props.width,
+    editor.domElement.firstElementChild!.clientWidth
+  )}px`;
+
+  // Resize handle elements.
+  const leftResizeHandle = document.createElement("div");
+  leftResizeHandle.className = styles.resizeHandle;
+  leftResizeHandle.style.left = "4px";
+  const rightResizeHandle = document.createElement("div");
+  rightResizeHandle.className = styles.resizeHandle;
+  rightResizeHandle.style.right = "4px";
+
+  // Caption element.
+  const caption = document.createElement("p");
+  caption.className = styles.caption;
+  caption.innerText = block.props.caption;
+  caption.style.padding = block.props.caption ? "4px" : "";
+
+  // Adds a light blue outline to selected image blocks.
+  const handleEditorUpdate = () => {
+    const selection = editor.getSelection()?.blocks || [];
+    const currentBlock = editor.getTextCursorPosition().block;
+
+    const isSelected =
+      [currentBlock, ...selection].find(
+        (selectedBlock) => selectedBlock.id === block.id
+      ) !== undefined;
+
+    if (isSelected) {
+      addImageButton.style.outline = "4px solid rgb(100, 160, 255)";
+      imageAndCaptionWrapper.style.outline = "4px solid rgb(100, 160, 255)";
+    } else {
+      addImageButton.style.outline = "";
+      imageAndCaptionWrapper.style.outline = "";
+    }
+  };
+  editor.onEditorContentChange(handleEditorUpdate);
+  editor.onEditorSelectionChange(handleEditorUpdate);
+
+  // Temporary parameters set when the user begins resizing the image, used to
+  // calculate the new width of the image.
+  let resizeParams:
+    | {
+        handleUsed: "left" | "right";
+        initialWidth: number;
+        initialClientX: number;
+      }
+    | undefined;
+
+  // Updates the image width with an updated width depending on the cursor X
+  // offset from when the resize began, and which resize handle is being used.
+  const windowMouseMoveHandler = (event: MouseEvent) => {
+    if (!resizeParams) {
+      return;
+    }
+
+    let newWidth: number;
+
+    if (textAlignmentToAlignItems(block.props.textAlignment) === "center") {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          (resizeParams.initialClientX - event.clientX) * 2;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          (event.clientX - resizeParams.initialClientX) * 2;
+      }
+    } else {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          resizeParams.initialClientX -
+          event.clientX;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          event.clientX -
+          resizeParams.initialClientX;
+      }
+    }
+
+    // Ensures the image is not wider than the editor and not smaller than a
+    // predetermined minimum width.
+    if (newWidth < minWidth) {
+      image.style.width = `${minWidth}px`;
+    } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
+      image.style.width = `${
+        editor.domElement.firstElementChild!.clientWidth
+      }px`;
+    } else {
+      image.style.width = `${newWidth}px`;
+    }
+  };
+  // Stops mouse movements from resizing the image and updates the block's
+  // `width` prop to the new value.
+  const windowMouseUpHandler = (event: MouseEvent) => {
+    if (!resizeParams) {
+      return;
+    }
+
+    // Hides the drag handles if the cursor is no longer over the image.
+    if (
+      (!event.target || !imageWrapper.contains(event.target as Node)) &&
+      imageWrapper.contains(leftResizeHandle) &&
+      imageWrapper.contains(rightResizeHandle)
+    ) {
+      leftResizeHandle.style.display = "none";
+      rightResizeHandle.style.display = "none";
+    }
+
+    resizeParams = undefined;
+
+    editor.updateBlock(block, {
+      type: "image",
+      props: {
+        // Removes "px" from the end of the width string and converts to float.
+        width: parseFloat(image.style.width.slice(0, -2)),
+      },
+    });
+  };
+
+  // Prevents focus from moving to the button.
+  const addImageButtonMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+  // Opens the image toolbar.
+  const addImageButtonClickHandler = () => {
+    editor._tiptapEditor.view.dispatch(
+      editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
+        block: block,
+      })
+    );
+  };
+
+  // Sets the resize params, allowing the user to begin resizing the image by
+  // moving the cursor left or right.
+  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    leftResizeHandle.style.display = "block";
+    rightResizeHandle.style.display = "block";
+
+    resizeParams = {
+      handleUsed: "left",
+      initialWidth: block.props.width,
+      initialClientX: event.clientX,
+    };
+  };
+  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    leftResizeHandle.style.display = "block";
+    rightResizeHandle.style.display = "block";
+
+    resizeParams = {
+      handleUsed: "right",
+      initialWidth: block.props.width,
+      initialClientX: event.clientX,
+    };
+  };
+
+  wrapper.appendChild(addImageButton);
+  addImageButton.appendChild(addImageButtonIcon);
+  addImageButton.appendChild(addImageButtonText);
+  wrapper.appendChild(imageAndCaptionWrapper);
+  imageAndCaptionWrapper.appendChild(imageWrapper);
+  imageWrapper.appendChild(image);
+  imageWrapper.appendChild(leftResizeHandle);
+  imageWrapper.appendChild(rightResizeHandle);
+  imageAndCaptionWrapper.appendChild(caption);
+
+  window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("mouseup", windowMouseUpHandler);
+  addImageButton.addEventListener("mousedown", addImageButtonMouseDownHandler);
+  addImageButton.addEventListener("click", addImageButtonClickHandler);
+  leftResizeHandle.addEventListener(
+    "mousedown",
+    leftResizeHandleMouseDownHandler
+  );
+  rightResizeHandle.addEventListener(
+    "mousedown",
+    rightResizeHandleMouseDownHandler
+  );
+
+  return {
+    dom: wrapper,
+    destroy: () => {
+      window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("mouseup", windowMouseUpHandler);
+      addImageButton.removeEventListener(
+        "mousedown",
+        addImageButtonMouseDownHandler
+      );
+      addImageButton.removeEventListener("click", addImageButtonClickHandler);
+      leftResizeHandle.removeEventListener(
+        "mousedown",
+        leftResizeHandleMouseDownHandler
+      );
+      rightResizeHandle.removeEventListener(
+        "mousedown",
+        rightResizeHandleMouseDownHandler
+      );
+    },
+  };
+};
+
+export const Image = createBlockSpec({
+  type: "image",
+  propSchema: imagePropSchema,
+  containsInlineContent: false,
+  render: renderImage,
+});

package/src/extensions/Blocks/nodes/BlockContent/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts

@@ -0,0 +1,13 @@
+export const uploadToTmpFilesDotOrg_DEV_ONLY = async (file: File) => {
+  const body = new FormData();
+  body.append("file", file);
+
+  const ret = await fetch("https://tmpfiles.org/api/v1/upload", {
+    method: "POST",
+    body: body,
+  });
+  return (await ret.json()).data.url.replace(
+    "tmpfiles.org/",
+    "tmpfiles.org/dl/"
+  );
+};

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

@@ -1,10 +1,16 @@
 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 { handleEnter } from "../ListItemKeyboardShortcuts";
 import styles from "../../../Block.module.css";
-import { mergeCSSClasses } from "../../../../../../shared/utils";
 
-export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
+export const bulletListItemPropSchema = {
+  ...defaultProps,
+} satisfies PropSchema;
+
+const BulletListItemBlockContent = createTipTapBlock<"bulletListItem", true>({
   name: "bulletListItem",
   content: "inline*",
 
@@ -29,6 +35,17 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
+      "Mod-Shift-7": () =>
+        this.editor.commands.BNUpdateBlock<{
+          bulletListItem: BlockSpec<
+            "bulletListItem",
+            typeof bulletListItemPropSchema,
+            true
+          >;
+        }>(this.editor.state.selection.anchor, {
+          type: "bulletListItem",
+          props: {},
+        }),
     };
   },
 
@@ -112,3 +129,8 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
     ];
   },
 });
+
+export const BulletListItem = {
+  node: BulletListItemBlockContent,
+  propSchema: bulletListItemPropSchema,
+} satisfies BlockSpec<"bulletListItem", typeof bulletListItemPropSchema, true>;