@blocknote/core 0.38.0 → 0.39.0

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -1,100 +0,0 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import {
-  BlockFromConfig,
-  FileBlockConfig,
-  PropSchema,
-  createBlockSpec,
-} from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
-import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
-import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
-import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
-import { createLinkWithCaption } from "./helpers/toExternalHTML/createLinkWithCaption.js";
-
-export const filePropSchema = {
-  backgroundColor: defaultProps.backgroundColor,
-  // File name.
-  name: {
-    default: "" as const,
-  },
-  // File url.
-  url: {
-    default: "" as const,
-  },
-  // File caption.
-  caption: {
-    default: "" as const,
-  },
-} satisfies PropSchema;
-
-export const fileBlockConfig = {
-  type: "file" as const,
-  propSchema: filePropSchema,
-  content: "none",
-  isFileBlock: true,
-} satisfies FileBlockConfig;
-
-export const fileRender = (
-  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-) => {
-  return createFileBlockWrapper(block, editor);
-};
-
-export const fileParse = (element: HTMLElement) => {
-  if (element.tagName === "EMBED") {
-    // Ignore if parent figure has already been parsed.
-    if (element.closest("figure")) {
-      return undefined;
-    }
-
-    return parseEmbedElement(element as HTMLEmbedElement);
-  }
-
-  if (element.tagName === "FIGURE") {
-    const parsedFigure = parseFigureElement(element, "embed");
-    if (!parsedFigure) {
-      return undefined;
-    }
-
-    const { targetElement, caption } = parsedFigure;
-
-    return {
-      ...parseEmbedElement(targetElement as HTMLEmbedElement),
-      caption,
-    };
-  }
-
-  return undefined;
-};
-
-export const fileToExternalHTML = (
-  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
-) => {
-  if (!block.props.url) {
-    const div = document.createElement("p");
-    div.textContent = "Add file";
-
-    return {
-      dom: div,
-    };
-  }
-
-  const fileSrcLink = document.createElement("a");
-  fileSrcLink.href = block.props.url;
-  fileSrcLink.textContent = block.props.name || block.props.url;
-
-  if (block.props.caption) {
-    return createLinkWithCaption(fileSrcLink, block.props.caption);
-  }
-
-  return {
-    dom: fileSrcLink,
-  };
-};
-
-export const FileBlock = createBlockSpec(fileBlockConfig, {
-  render: fileRender,
-  parse: fileParse,
-  toExternalHTML: fileToExternalHTML,
-});

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -1,159 +0,0 @@
-import { InputRule } from "@tiptap/core";
-import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-  getBlockFromPos,
-  propsToAttributes,
-} from "../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
-import { defaultProps } from "../defaultProps.js";
-import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-
-const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
-
-export const headingPropSchema = {
-  ...defaultProps,
-  level: { default: 1, values: HEADING_LEVELS },
-  isToggleable: { default: false },
-} satisfies PropSchema;
-
-const HeadingBlockContent = createStronglyTypedTiptapNode({
-  name: "heading",
-  content: "inline*",
-  group: "blockContent",
-
-  addAttributes() {
-    return propsToAttributes(headingPropSchema);
-  },
-
-  addInputRules() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-    return [
-      ...editor.settings.heading.levels.map((level) => {
-        // Creates a heading of appropriate level when starting with "#", "##", or "###".
-        return new InputRule({
-          find: new RegExp(`^(#{${level}})\\s$`),
-          handler: ({ state, chain, range }) => {
-            const blockInfo = getBlockInfoFromSelection(state);
-            if (
-              !blockInfo.isBlockContainer ||
-              blockInfo.blockContent.node.type.spec.content !== "inline*"
-            ) {
-              return;
-            }
-
-            chain()
-              .command(
-                updateBlockCommand(blockInfo.bnBlock.beforePos, {
-                  type: "heading",
-                  props: {
-                    level: level as any,
-                  },
-                }),
-              )
-              // Removes the "#" character(s) used to set the heading.
-              .deleteRange({ from: range.from, to: range.to })
-              .run();
-          },
-        });
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-
-    return Object.fromEntries(
-      editor.settings.heading.levels.map((level) => [
-        `Mod-Alt-${level}`,
-        () => {
-          const blockInfo = getBlockInfoFromSelection(this.editor.state);
-          if (
-            !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
-          ) {
-            return true;
-          }
-
-          return this.editor.commands.command(
-            updateBlockCommand(blockInfo.bnBlock.beforePos, {
-              type: "heading",
-              props: {
-                level: level as any,
-              },
-            }),
-          );
-        },
-      ]),
-    );
-  },
-  parseHTML() {
-    const editor = this.options.editor as BlockNoteEditor<any, any, any>;
-
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      ...editor.settings.heading.levels.map((level) => ({
-        tag: `h${level}`,
-        attrs: { level },
-        node: "heading",
-      })),
-    ];
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    return createDefaultBlockDOMOutputSpec(
-      this.name,
-      `h${node.attrs.level}`,
-      {
-        ...(this.options.domAttributes?.blockContent || {}),
-        ...HTMLAttributes,
-      },
-      this.options.domAttributes?.inlineContent || {},
-    );
-  },
-
-  addNodeView() {
-    return ({ node, HTMLAttributes, getPos }) => {
-      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-        this.name,
-        `h${node.attrs.level}`,
-        {
-          ...(this.options.domAttributes?.blockContent || {}),
-          ...HTMLAttributes,
-        },
-        this.options.domAttributes?.inlineContent || {},
-      );
-      dom.removeChild(contentDOM);
-
-      const editor = this.options.editor;
-      const block = getBlockFromPos(getPos, editor, this.editor, this.name);
-
-      const toggleWrapper = createToggleWrapper(
-        block as any,
-        editor,
-        contentDOM,
-      );
-      dom.appendChild(toggleWrapper.dom);
-
-      return {
-        dom,
-        contentDOM,
-        ignoreMutation: toggleWrapper.ignoreMutation,
-        destroy: toggleWrapper.destroy,
-      };
-    };
-  },
-});
-
-export const Heading = createBlockSpecFromStronglyTypedTiptapNode(
-  HeadingBlockContent,
-  headingPropSchema,
-);

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -1,159 +0,0 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import {
-  BlockFromConfig,
-  createBlockSpec,
-  FileBlockConfig,
-  Props,
-  PropSchema,
-} from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
-import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
-import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
-import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
-import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.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 const imagePropSchema = {
-  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",
-  },
-} satisfies PropSchema;
-
-export const imageBlockConfig = {
-  type: "image" as const,
-  propSchema: imagePropSchema,
-  content: "none",
-  isFileBlock: true,
-  fileBlockAccept: ["image/*"],
-} satisfies FileBlockConfig;
-
-export const imageRender = (
-  block: BlockFromConfig<typeof imageBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-) => {
-  const icon = document.createElement("div");
-  icon.innerHTML = 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 imageParse = (
-  element: HTMLElement,
-): Partial<Props<typeof imageBlockConfig.propSchema>> | undefined => {
-  if (element.tagName === "IMG") {
-    // Ignore if parent figure has already been parsed.
-    if (element.closest("figure")) {
-      return undefined;
-    }
-
-    return parseImageElement(element as HTMLImageElement);
-  }
-
-  if (element.tagName === "FIGURE") {
-    const parsedFigure = parseFigureElement(element, "img");
-    if (!parsedFigure) {
-      return undefined;
-    }
-
-    const { targetElement, caption } = parsedFigure;
-
-    return {
-      ...parseImageElement(targetElement as HTMLImageElement),
-      caption,
-    };
-  }
-
-  return undefined;
-};
-
-export const imageToExternalHTML = (
-  block: BlockFromConfig<typeof imageBlockConfig, 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 ImageBlock = createBlockSpec(imageBlockConfig, {
-  render: imageRender,
-  parse: imageParse,
-  toExternalHTML: imageToExternalHTML,
-});

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -1,134 +0,0 @@
-import { InputRule } from "@tiptap/core";
-import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-} from "../../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
-import { defaultProps } from "../../defaultProps.js";
-import { getListItemContent } from "../getListItemContent.js";
-import { handleEnter } from "../ListItemKeyboardShortcuts.js";
-
-export const bulletListItemPropSchema = {
-  ...defaultProps,
-} satisfies PropSchema;
-
-const BulletListItemBlockContent = createStronglyTypedTiptapNode({
-  name: "bulletListItem",
-  content: "inline*",
-  group: "blockContent",
-  // This is to make sure that check list parse rules run before, since they
-  // both parse `li` elements but check lists are more specific.
-  priority: 90,
-  addInputRules() {
-    return [
-      // Creates an unordered list when starting with "-", "+", or "*".
-      new InputRule({
-        find: new RegExp(`^[-+*]\\s$`),
-        handler: ({ state, chain, range }) => {
-          const blockInfo = getBlockInfoFromSelection(state);
-          if (
-            !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*" ||
-            blockInfo.blockNoteType === "heading"
-          ) {
-            return;
-          }
-
-          chain()
-            .command(
-              updateBlockCommand(blockInfo.bnBlock.beforePos, {
-                type: "bulletListItem",
-                props: {},
-              }),
-            )
-            // Removes the "-", "+", or "*" character used to set the list.
-            .deleteRange({ from: range.from, to: range.to });
-        },
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Enter: () => handleEnter(this.options.editor),
-      "Mod-Shift-8": () => {
-        const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (
-          !blockInfo.isBlockContainer ||
-          blockInfo.blockContent.node.type.spec.content !== "inline*"
-        ) {
-          return true;
-        }
-
-        return this.editor.commands.command(
-          updateBlockCommand(blockInfo.bnBlock.beforePos, {
-            type: "bulletListItem",
-            props: {},
-          }),
-        );
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      // Parse from external HTML.
-      {
-        tag: "li",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          if (
-            parent.tagName === "UL" ||
-            (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
-          ) {
-            return {};
-          }
-
-          return false;
-        },
-        // As `li` elements can contain multiple paragraphs, we need to merge their contents
-        // into a single one so that ProseMirror can parse everything correctly.
-        getContent: (node, schema) =>
-          getListItemContent(node, schema, this.name),
-        node: "bulletListItem",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    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 = createBlockSpecFromStronglyTypedTiptapNode(
-  BulletListItemBlockContent,
-  bulletListItemPropSchema,
-);