@blocknote/core 0.37.0 → 0.39.0

package/src/blocks/{FileBlockContent → File}/helpers/render/createResizableFileBlockWrapper.ts

@@ -1,20 +1,37 @@
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
-import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import {
+  BlockConfig,
+  BlockFromConfigNoChildren,
+} from "../../../../schema/index.js";
 import { createFileBlockWrapper } from "./createFileBlockWrapper.js";
 
 export const createResizableFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
+  block: BlockFromConfigNoChildren<
+    BlockConfig<
+      string,
+      {
+        backgroundColor: { default: "default" };
+        name: { default: "" };
+        url: { default: "" };
+        caption: { default: "" };
+        showPreview?: { default: true };
+        previewWidth?: { default: number };
+        textAlignment?: { default: "left" };
+      },
+      "none"
+    >,
+    any,
+    any
+  >,
   editor: BlockNoteEditor<any, any, any>,
   element: { dom: HTMLElement; destroy?: () => void },
   resizeHandlesContainerElement: HTMLElement,
-  buttonText: string,
-  buttonIcon: HTMLElement,
+  buttonIcon?: HTMLElement,
 ): { dom: HTMLElement; destroy: () => void } => {
   const { dom, destroy } = createFileBlockWrapper(
     block,
     editor,
     element,
-    buttonText,
     buttonIcon,
   );
   const wrapper = dom;
@@ -56,7 +73,7 @@ export const createResizableFileBlockWrapper = (
 
   // Updates the element 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) => {
+  const windowMouseMoveHandler = (event: MouseEvent | TouchEvent) => {
     if (!resizeParams) {
       if (
         !editor.isEditable &&
@@ -72,27 +89,26 @@ export const createResizableFileBlockWrapper = (
 
     let newWidth: number;
 
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     if (block.props.textAlignment === "center") {
       if (resizeParams.handleUsed === "left") {
         newWidth =
           resizeParams.initialWidth +
-          (resizeParams.initialClientX - event.clientX) * 2;
+          (resizeParams.initialClientX - clientX) * 2;
       } else {
         newWidth =
           resizeParams.initialWidth +
-          (event.clientX - resizeParams.initialClientX) * 2;
+          (clientX - resizeParams.initialClientX) * 2;
       }
     } else {
       if (resizeParams.handleUsed === "left") {
         newWidth =
-          resizeParams.initialWidth +
-          resizeParams.initialClientX -
-          event.clientX;
+          resizeParams.initialWidth + resizeParams.initialClientX - clientX;
       } else {
         newWidth =
-          resizeParams.initialWidth +
-          event.clientX -
-          resizeParams.initialClientX;
+          resizeParams.initialWidth + clientX - resizeParams.initialClientX;
       }
     }
 
@@ -109,7 +125,7 @@ export const createResizableFileBlockWrapper = (
   };
   // Stops mouse movements from resizing the element and updates the block's
   // `width` prop to the new value.
-  const windowMouseUpHandler = (event: MouseEvent) => {
+  const windowMouseUpHandler = (event: MouseEvent | TouchEvent) => {
     // Hides the drag handles if the cursor is no longer over the element.
     if (
       (!event.target ||
@@ -172,62 +188,90 @@ export const createResizableFileBlockWrapper = (
 
   // Sets the resize params, allowing the user to begin resizing the element by
   // moving the cursor left or right.
-  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
+  const leftResizeHandleMouseDownHandler = (event: MouseEvent | TouchEvent) => {
     event.preventDefault();
 
     if (!wrapper.contains(eventCaptureElement)) {
       wrapper.appendChild(eventCaptureElement);
     }
 
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     resizeParams = {
       handleUsed: "left",
       initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
+      initialClientX: clientX,
     };
   };
-  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+  const rightResizeHandleMouseDownHandler = (
+    event: MouseEvent | TouchEvent,
+  ) => {
     event.preventDefault();
 
     if (!wrapper.contains(eventCaptureElement)) {
       wrapper.appendChild(eventCaptureElement);
     }
 
+    const clientX =
+      "touches" in event ? event.touches[0].clientX : event.clientX;
+
     resizeParams = {
       handleUsed: "right",
       initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
+      initialClientX: clientX,
     };
   };
 
   window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("touchmove", windowMouseMoveHandler);
   window.addEventListener("mouseup", windowMouseUpHandler);
+  window.addEventListener("touchend", windowMouseUpHandler);
   wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
   wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
     leftResizeHandleMouseDownHandler,
   );
+  leftResizeHandle.addEventListener(
+    "touchstart",
+    leftResizeHandleMouseDownHandler,
+  );
   rightResizeHandle.addEventListener(
     "mousedown",
     rightResizeHandleMouseDownHandler,
   );
+  rightResizeHandle.addEventListener(
+    "touchstart",
+    rightResizeHandleMouseDownHandler,
+  );
 
   return {
     dom: wrapper,
     destroy: () => {
       destroy?.();
       window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("touchmove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
+      window.removeEventListener("touchend", windowMouseUpHandler);
       wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
       wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
       leftResizeHandle.removeEventListener(
         "mousedown",
         leftResizeHandleMouseDownHandler,
       );
+      leftResizeHandle.removeEventListener(
+        "touchstart",
+        leftResizeHandleMouseDownHandler,
+      );
       rightResizeHandle.removeEventListener(
         "mousedown",
         rightResizeHandleMouseDownHandler,
       );
+      rightResizeHandle.removeEventListener(
+        "touchstart",
+        rightResizeHandleMouseDownHandler,
+      );
     },
   };
 };

package/src/blocks/Heading/block.ts

@@ -0,0 +1,138 @@
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../defaultProps.js";
+import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
+
+export interface HeadingOptions {
+  defaultLevel?: (typeof HEADING_LEVELS)[number];
+  levels?: readonly number[];
+  // TODO should probably use composition instead of this
+  allowToggleHeadings?: boolean;
+}
+
+export type HeadingBlockConfig = ReturnType<typeof createHeadingBlockConfig>;
+
+export const createHeadingBlockConfig = createBlockConfig(
+  ({
+    defaultLevel = 1,
+    levels = HEADING_LEVELS,
+    allowToggleHeadings = true,
+  }: HeadingOptions = {}) =>
+    ({
+      type: "heading" as const,
+      propSchema: {
+        ...defaultProps,
+        level: { default: defaultLevel, values: levels },
+        ...(allowToggleHeadings
+          ? { isToggleable: { default: false, optional: true } as const }
+          : {}),
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createHeadingBlockSpec = createBlockSpec(
+  createHeadingBlockConfig,
+  ({ allowToggleHeadings = true }: HeadingOptions = {}) => ({
+    meta: {
+      isolating: false,
+    },
+    parse(e) {
+      let level: number;
+      switch (e.tagName) {
+        case "H1":
+          level = 1;
+          break;
+        case "H2":
+          level = 2;
+          break;
+        case "H3":
+          level = 3;
+          break;
+        case "H4":
+          level = 4;
+          break;
+        case "H5":
+          level = 5;
+          break;
+        case "H6":
+          level = 6;
+          break;
+        default:
+          return undefined;
+      }
+
+      return {
+        ...parseDefaultProps(e),
+        level,
+      };
+    },
+    render(block, editor) {
+      const dom = document.createElement(`h${block.props.level}`);
+
+      if (allowToggleHeadings) {
+        const toggleWrapper = createToggleWrapper(block, editor, dom);
+        return { ...toggleWrapper, contentDOM: dom };
+      }
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+    toExternalHTML(block) {
+      const dom = document.createElement(`h${block.props.level}`);
+      addDefaultPropsExternalHTML(block.props, dom);
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+  }),
+  ({ levels = HEADING_LEVELS }: HeadingOptions = {}) => [
+    createBlockNoteExtension({
+      key: "heading-shortcuts",
+      keyboardShortcuts: Object.fromEntries(
+        levels.map((level) => [
+          `Mod-Alt-${level}`,
+          ({ editor }) => {
+            const cursorPosition = editor.getTextCursorPosition();
+
+            if (
+              editor.schema.blockSchema[cursorPosition.block.type].content !==
+              "inline"
+            ) {
+              return false;
+            }
+
+            editor.updateBlock(cursorPosition.block, {
+              type: "heading",
+              props: {
+                level: level as any,
+              },
+            });
+            return true;
+          },
+        ]) ?? [],
+      ),
+      inputRules: levels.map((level) => ({
+        find: new RegExp(`^(#{${level}})\\s$`),
+        replace({ match }: { match: RegExpMatchArray }) {
+          return {
+            type: "heading",
+            props: {
+              level: match[1].length,
+            },
+          };
+        },
+      })),
+    }),
+  ],
+);

package/src/blocks/Image/block.ts

@@ -0,0 +1,190 @@
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import {
+  BlockFromConfig,
+  createBlockConfig,
+  createBlockSpec,
+} from "../../schema/index.js";
+import { defaultProps, parseDefaultProps } from "../defaultProps.js";
+import { parseFigureElement } from "../File/helpers/parse/parseFigureElement.js";
+import { createResizableFileBlockWrapper } from "../File/helpers/render/createResizableFileBlockWrapper.js";
+import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../File/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseImageElement } from "./parseImageElement.js";
+
+export const FILE_IMAGE_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
+
+export interface ImageOptions {
+  icon?: string;
+}
+
+export type ImageBlockConfig = ReturnType<typeof createImageBlockConfig>;
+
+export const createImageBlockConfig = createBlockConfig(
+  (_ctx: ImageOptions = {}) =>
+    ({
+      type: "image" as const,
+      propSchema: {
+        textAlignment: defaultProps.textAlignment,
+        backgroundColor: defaultProps.backgroundColor,
+        // File name.
+        name: {
+          default: "" as const,
+        },
+        // File url.
+        url: {
+          default: "" as const,
+        },
+        // File caption.
+        caption: {
+          default: "" as const,
+        },
+
+        showPreview: {
+          default: true,
+        },
+        // File preview width in px.
+        previewWidth: {
+          default: undefined,
+          type: "number" as const,
+        },
+      },
+      content: "none" as const,
+    }) as const,
+);
+
+export const imageParse =
+  (_config: ImageOptions = {}) =>
+  (element: HTMLElement) => {
+    if (element.tagName === "IMG") {
+      // Ignore if parent figure has already been parsed.
+      if (element.closest("figure")) {
+        return undefined;
+      }
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseImageElement(element as HTMLImageElement),
+        backgroundColor,
+      };
+    }
+
+    if (element.tagName === "FIGURE") {
+      const parsedFigure = parseFigureElement(element, "img");
+      if (!parsedFigure) {
+        return undefined;
+      }
+
+      const { targetElement, caption } = parsedFigure;
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseImageElement(targetElement as HTMLImageElement),
+        backgroundColor,
+        caption,
+      };
+    }
+
+    return undefined;
+  };
+
+export const imageRender =
+  (config: ImageOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createImageBlockConfig>, any, any>,
+    editor: BlockNoteEditor<
+      Record<"image", ReturnType<typeof createImageBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    const icon = document.createElement("div");
+    icon.innerHTML = config.icon ?? FILE_IMAGE_ICON_SVG;
+
+    const imageWrapper = document.createElement("div");
+    imageWrapper.className = "bn-visual-media-wrapper";
+
+    const image = document.createElement("img");
+    image.className = "bn-visual-media";
+    if (editor.resolveFileUrl) {
+      editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+        image.src = downloadUrl;
+      });
+    } else {
+      image.src = block.props.url;
+    }
+
+    image.alt = block.props.name || block.props.caption || "BlockNote image";
+    image.contentEditable = "false";
+    image.draggable = false;
+    imageWrapper.appendChild(image);
+
+    return createResizableFileBlockWrapper(
+      block,
+      editor,
+      { dom: imageWrapper },
+      imageWrapper,
+      icon.firstElementChild as HTMLElement,
+    );
+  };
+
+export const imageToExternalHTML =
+  (_config: ImageOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createImageBlockConfig>, any, any>,
+    _editor: BlockNoteEditor<
+      Record<"image", ReturnType<typeof createImageBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    if (!block.props.url) {
+      const div = document.createElement("p");
+      div.textContent = "Add image";
+
+      return {
+        dom: div,
+      };
+    }
+
+    let image;
+    if (block.props.showPreview) {
+      image = document.createElement("img");
+      image.src = block.props.url;
+      image.alt = block.props.name || block.props.caption || "BlockNote image";
+      if (block.props.previewWidth) {
+        image.width = block.props.previewWidth;
+      }
+    } else {
+      image = document.createElement("a");
+      image.href = block.props.url;
+      image.textContent = block.props.name || block.props.url;
+    }
+
+    if (block.props.caption) {
+      if (block.props.showPreview) {
+        return createFigureWithCaption(image, block.props.caption);
+      } else {
+        return createLinkWithCaption(image, block.props.caption);
+      }
+    }
+
+    return {
+      dom: image,
+    };
+  };
+
+export const createImageBlockSpec = createBlockSpec(
+  createImageBlockConfig,
+  (config) => ({
+    meta: {
+      fileBlockAccept: ["image/*"],
+    },
+    parse: imageParse(config),
+    render: imageRender(config),
+    toExternalHTML: imageToExternalHTML(config),
+    runsBefore: ["file"],
+  }),
+);

package/src/blocks/ListItem/BulletListItem/block.ts

@@ -0,0 +1,116 @@
+import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
+import {
+  addDefaultPropsExternalHTML,
+  defaultProps,
+  parseDefaultProps,
+} from "../../defaultProps.js";
+import { handleEnter } from "../../utils/listItemEnterHandler.js";
+import { getListItemContent } from "../getListItemContent.js";
+
+export type BulletListItemBlockConfig = ReturnType<
+  typeof createBulletListItemBlockConfig
+>;
+
+export const createBulletListItemBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "bulletListItem" as const,
+      propSchema: {
+        ...defaultProps,
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createBulletListItemBlockSpec = createBlockSpec(
+  createBulletListItemBlockConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName !== "LI") {
+        return undefined;
+      }
+
+      const parent = element.parentElement;
+
+      if (parent === null) {
+        return undefined;
+      }
+
+      if (
+        parent.tagName === "UL" ||
+        (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
+      ) {
+        return parseDefaultProps(element);
+      }
+
+      return undefined;
+    },
+    // As `li` elements can contain multiple paragraphs, we need to merge their contents
+    // into a single one so that ProseMirror can parse everything correctly.
+    parseContent: ({ el, schema }) =>
+      getListItemContent(el, schema, "bulletListItem"),
+    render() {
+      // 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.
+      const dom = document.createElement("p");
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+    toExternalHTML(block) {
+      const li = document.createElement("li");
+      const p = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, li);
+      li.appendChild(p);
+
+      return {
+        dom: li,
+        contentDOM: p,
+      };
+    },
+  },
+  [
+    createBlockNoteExtension({
+      key: "bullet-list-item-shortcuts",
+      keyboardShortcuts: {
+        Enter: ({ editor }) => {
+          return handleEnter(editor, "bulletListItem");
+        },
+        "Mod-Shift-8": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "bulletListItem",
+            props: {},
+          });
+          return true;
+        },
+      },
+      inputRules: [
+        {
+          find: new RegExp(`^[-+*]\\s$`),
+          replace() {
+            return {
+              type: "bulletListItem",
+              props: {},
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);