@blocknote/core 0.38.0 → 0.39.1-capitol

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

@@ -1,9 +1,28 @@
 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,

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: {},
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);

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

@@ -0,0 +1,175 @@
+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 CheckListItemBlockConfig = ReturnType<
+  typeof createCheckListItemConfig
+>;
+
+export const createCheckListItemConfig = createBlockConfig(
+  () =>
+    ({
+      type: "checkListItem" as const,
+      propSchema: {
+        ...defaultProps,
+        checked: { default: false, type: "boolean" },
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createCheckListItemBlockSpec = createBlockSpec(
+  createCheckListItemConfig,
+  {
+    meta: {
+      isolating: false,
+    },
+    parse(element) {
+      if (element.tagName === "input") {
+        // Ignore if we already parsed an ancestor list item to avoid double-parsing.
+        if (element.closest("[data-content-type]") || element.closest("li")) {
+          return undefined;
+        }
+
+        if ((element as HTMLInputElement).type === "checkbox") {
+          return { checked: (element as HTMLInputElement).checked };
+        }
+        return undefined;
+      }
+      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")
+      ) {
+        const checkbox =
+          (element.querySelector("input[type=checkbox]") as HTMLInputElement) ||
+          null;
+
+        if (checkbox === null) {
+          return undefined;
+        }
+
+        return { ...parseDefaultProps(element), checked: checkbox.checked };
+      }
+
+      return;
+    },
+    // 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, "checkListItem"),
+    render(block, editor) {
+      const dom = document.createDocumentFragment();
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = block.props.checked;
+      if (block.props.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+      checkbox.addEventListener("change", () => {
+        editor.updateBlock(block, { props: { checked: !block.props.checked } });
+      });
+      // 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 paragraph = document.createElement("p");
+
+      dom.appendChild(checkbox);
+      dom.appendChild(paragraph);
+
+      return {
+        dom,
+        contentDOM: paragraph,
+      };
+    },
+    toExternalHTML(block) {
+      const dom = document.createElement("li");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = block.props.checked;
+      if (block.props.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+      // 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 paragraph = document.createElement("p");
+      addDefaultPropsExternalHTML(block.props, dom);
+
+      dom.appendChild(checkbox);
+      dom.appendChild(paragraph);
+
+      return {
+        dom,
+        contentDOM: paragraph,
+      };
+    },
+    runsBefore: ["bulletListItem"],
+  },
+  [
+    createBlockNoteExtension({
+      key: "check-list-item-shortcuts",
+      keyboardShortcuts: {
+        Enter: ({ editor }) => {
+          return handleEnter(editor, "checkListItem");
+        },
+        "Mod-Shift-9": ({ editor }) => {
+          const cursorPosition = editor.getTextCursorPosition();
+
+          if (
+            editor.schema.blockSchema[cursorPosition.block.type].content !==
+            "inline"
+          ) {
+            return false;
+          }
+
+          editor.updateBlock(cursorPosition.block, {
+            type: "checkListItem",
+            props: {},
+          });
+          return true;
+        },
+      },
+      inputRules: [
+        {
+          find: new RegExp(`\\[\\s*\\]\\s$`),
+          replace() {
+            return {
+              type: "checkListItem",
+              props: {
+                checked: false,
+              },
+              content: [],
+            };
+          },
+        },
+        {
+          find: new RegExp(`\\[[Xx]\\]\\s$`),
+          replace() {
+            return {
+              type: "checkListItem",
+              props: {
+                checked: true,
+              },
+            };
+          },
+        },
+      ],
+    }),
+  ],
+);