@blocknote/core 0.13.2 → 0.13.4

package/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -0,0 +1,266 @@
+import { InputRule } from "@tiptap/core";
+import {
+  PropSchema,
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
+import { defaultProps } from "../../defaultProps";
+import { handleEnter } from "../ListItemKeyboardShortcuts";
+import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
+
+export const checkListItemPropSchema = {
+  ...defaultProps,
+  checked: {
+    default: false,
+  },
+} satisfies PropSchema;
+
+const checkListItemBlockContent = createStronglyTypedTiptapNode({
+  name: "checkListItem",
+  content: "inline*",
+  group: "blockContent",
+  addAttributes() {
+    return {
+      checked: {
+        default: false,
+        // instead of "checked" attributes, use "data-checked"
+        parseHTML: (element) =>
+          element.getAttribute("data-checked") === "true" || undefined,
+        renderHTML: (attributes) => {
+          return attributes.checked
+            ? {
+                "data-checked": (attributes.checked as boolean).toString(),
+              }
+            : {};
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      // Creates a checklist when starting with "[]" or "[X]".
+      new InputRule({
+        find: new RegExp(`\\[\\s*\\]\\s$`),
+        handler: ({ state, chain, range }) => {
+          if (getCurrentBlockContentType(this.editor) !== "inline*") {
+            return;
+          }
+
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: "checkListItem",
+              props: {
+                checked: false as any,
+              },
+            })
+            // Removes the characters used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+      new InputRule({
+        find: new RegExp(`\\[[Xx]\\]\\s$`),
+        handler: ({ state, chain, range }) => {
+          if (getCurrentBlockContentType(this.editor) !== "inline*") {
+            return;
+          }
+
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: "checkListItem",
+              props: {
+                checked: true as any,
+              },
+            })
+            // Removes the characters used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.editor),
+      "Mod-Shift-9": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "checkListItem",
+            props: {},
+          }
+        );
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+      },
+      // Checkbox only.
+      {
+        tag: "input",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if ((element as HTMLInputElement).type === "checkbox") {
+            return { checked: (element as HTMLInputElement).checked };
+          }
+
+          return false;
+        },
+        node: "checkListItem",
+      },
+      // Container element for checkbox + label.
+      {
+        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")
+          ) {
+            const checkbox =
+              (element.querySelector(
+                "input[type=checkbox]"
+              ) as HTMLInputElement) || null;
+
+            if (checkbox === null) {
+              return false;
+            }
+
+            return { checked: checkbox.checked };
+          }
+
+          return false;
+        },
+        node: "checkListItem",
+      },
+    ];
+  },
+
+  // Since there is no HTML checklist element, there isn't really any
+  // standardization for what checklists should look like in the DOM. GDocs'
+  // and Notion's aren't cross compatible, for example. This implementation
+  // has a semantically correct DOM structure (though missing a label for the
+  // checkbox) which is also converted correctly to Markdown by remark.
+  renderHTML({ node, HTMLAttributes }) {
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = node.attrs.checked;
+    if (node.attrs.checked) {
+      checkbox.setAttribute("checked", "");
+    }
+
+    const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+      this.name,
+      "p",
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+
+    dom.insertBefore(checkbox, contentDOM);
+
+    return { dom, contentDOM };
+  },
+
+  // Need to render node view since the checkbox needs to be able to update the
+  // node. This is only possible with a node view as it exposes `getPos`.
+  addNodeView() {
+    return ({ node, getPos, editor, HTMLAttributes }) => {
+      // Need to wrap certain elements in a div or keyboard navigation gets
+      // confused.
+      const wrapper = document.createElement("div");
+      const checkboxWrapper = document.createElement("div");
+      checkboxWrapper.contentEditable = "false";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = node.attrs.checked;
+      if (node.attrs.checked) {
+        checkbox.setAttribute("checked", "");
+      }
+
+      const changeHandler = () => {
+        if (!editor.isEditable) {
+          // This seems like the most effective way of blocking the checkbox
+          // from being toggled, as event.preventDefault() does not stop it for
+          // "click" or "change" events.
+          checkbox.checked = !checkbox.checked;
+          return;
+        }
+
+        if (typeof getPos !== "boolean") {
+          this.editor.commands.BNUpdateBlock(getPos(), {
+            type: "checkListItem",
+            props: {
+              checked: checkbox.checked as any,
+            },
+          });
+        }
+      };
+      checkbox.addEventListener("change", changeHandler);
+
+      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
+        this.name,
+        "p",
+        {
+          ...(this.options.domAttributes?.blockContent || {}),
+          ...HTMLAttributes,
+        },
+        this.options.domAttributes?.inlineContent || {}
+      );
+
+      if (typeof getPos !== "boolean") {
+        // Since `node` is a blockContent node, we have to get the block ID from
+        // the parent blockContainer node. This means we can't add the label in
+        // `renderHTML` as we can't use `getPos` and therefore can't get the
+        // parent blockContainer node.
+        const blockID = this.editor.state.doc.resolve(getPos()).node().attrs.id;
+        const label = "label-" + blockID;
+        checkbox.setAttribute("aria-labelledby", label);
+        contentDOM.id = label;
+      }
+
+      dom.removeChild(contentDOM);
+      dom.appendChild(wrapper);
+      wrapper.appendChild(checkboxWrapper);
+      wrapper.appendChild(contentDOM);
+      checkboxWrapper.appendChild(checkbox);
+
+      return {
+        dom,
+        contentDOM,
+        destroy: () => {
+          checkbox.removeEventListener("change", changeHandler);
+        },
+      };
+    };
+  },
+});
+
+export const CheckListItem = createBlockSpecFromStronglyTypedTiptapNode(
+  checkListItemBlockContent,
+  checkListItemPropSchema
+);

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -13,7 +13,8 @@ export const handleEnter = (editor: Editor) => {
   if (
     !(
       contentType.name === "bulletListItem" ||
-      contentType.name === "numberedListItem"
+      contentType.name === "numberedListItem" ||
+      contentType.name === "checkListItem"
     ) ||
     !selectionEmpty
   ) {

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -18,6 +18,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   name: "numberedListItem",
   content: "inline*",
   group: "blockContent",
+  priority: 90,
   addAttributes() {
     return {
       index: {

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -0,0 +1,181 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  BlockFromConfig,
+  createBlockSpec,
+  FileBlockConfig,
+  Props,
+  PropSchema,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFigureWithCaption,
+  createFileAndCaptionWrapper,
+  createLinkWithCaption,
+  createResizeHandlesWrapper,
+  parseFigureElement,
+} from "../FileBlockContent/fileBlockHelpers";
+import { parseVideoElement } from "./videoBlockHelpers";
+
+export const videoPropSchema = {
+  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: 512,
+  },
+} satisfies PropSchema;
+
+export const videoBlockConfig = {
+  type: "video" as const,
+  propSchema: videoPropSchema,
+  content: "none",
+  isFileBlock: true,
+  fileBlockAcceptMimeTypes: ["video/*"],
+} satisfies FileBlockConfig;
+
+export const videoRender = (
+  block: BlockFromConfig<typeof videoBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const fileBlockVideoIcon = document.createElement("div");
+    fileBlockVideoIcon.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+    const addVideoButton = createAddFileButton(
+      block,
+      editor,
+      editor.dictionary.file_blocks.video.add_button_text,
+      fileBlockVideoIcon.firstElementChild as HTMLElement
+    );
+    wrapper.appendChild(addVideoButton.dom);
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addVideoButton?.destroy?.();
+      },
+    };
+  } else if (!block.props.showPreview) {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+
+    return {
+      dom: element.dom,
+    };
+  } else {
+    const video = document.createElement("video");
+    video.className = "bn-visual-media";
+    video.src = block.props.url;
+    video.controls = true;
+    video.contentEditable = "false";
+    video.draggable = false;
+    video.width = Math.min(
+      block.props.previewWidth,
+      editor.domElement.firstElementChild!.clientWidth
+    );
+
+    const file = createResizeHandlesWrapper(
+      block,
+      editor,
+      video,
+      () => video.width,
+      (width) => (video.width = width)
+    );
+
+    const element = createFileAndCaptionWrapper(block, file.dom);
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+      destroy: file.destroy,
+    };
+  }
+};
+
+export const videoParse = (
+  element: HTMLElement
+): Partial<Props<typeof videoBlockConfig.propSchema>> | undefined => {
+  if (element.tagName === "VIDEO") {
+    return parseVideoElement(element as HTMLVideoElement);
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "video");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    return {
+      ...parseVideoElement(targetElement as HTMLVideoElement),
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const videoToExternalHTML = (
+  block: BlockFromConfig<typeof videoBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add video";
+
+    return {
+      dom: div,
+    };
+  }
+
+  let video;
+  if (block.props.showPreview) {
+    video = document.createElement("video");
+    video.src = block.props.url;
+    video.width = block.props.previewWidth;
+  } else {
+    video = document.createElement("a");
+    video.href = block.props.url;
+    video.textContent = block.props.name || block.props.url;
+  }
+
+  if (block.props.caption) {
+    if (block.props.showPreview) {
+      return createFigureWithCaption(video, block.props.caption);
+    } else {
+      return createLinkWithCaption(video, block.props.caption);
+    }
+  }
+
+  return {
+    dom: video,
+  };
+};
+
+export const VideoBlock = createBlockSpec(videoBlockConfig, {
+  render: videoRender,
+  parse: videoParse,
+  toExternalHTML: videoToExternalHTML,
+});

package/src/blocks/VideoBlockContent/videoBlockHelpers.ts

@@ -0,0 +1,6 @@
+export const parseVideoElement = (videoElement: HTMLVideoElement) => {
+  const url = videoElement.src || undefined;
+  const previewWidth = videoElement.width || undefined;
+
+  return { url, previewWidth };
+};

package/src/blocks/defaultBlockTypeGuards.ts

@@ -1,5 +1,11 @@
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
-import { BlockFromConfig, InlineContentSchema, StyleSchema } from "../schema";
+import {
+  BlockFromConfig,
+  BlockSchema,
+  FileBlockConfig,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
 import { Block, DefaultBlockSchema, defaultBlockSchema } from "./defaultBlocks";
 import { defaultProps } from "./defaultProps";
 
@@ -33,6 +39,52 @@ export function checkBlockIsDefaultType<
   );
 }
 
+export function checkBlockIsFileBlock<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<B, I, S>
+): block is BlockFromConfig<FileBlockConfig, I, S> {
+  return (
+    (block.type in editor.schema.blockSchema &&
+      editor.schema.blockSchema[block.type].isFileBlock) ||
+    false
+  );
+}
+
+export function checkBlockIsFileBlockWithPreview<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<B, I, S>
+): block is BlockFromConfig<
+  FileBlockConfig & {
+    propSchema: Required<FileBlockConfig["propSchema"]>;
+  },
+  I,
+  S
+> {
+  return (
+    (block.type in editor.schema.blockSchema &&
+      editor.schema.blockSchema[block.type].isFileBlock &&
+      "showPreview" in editor.schema.blockSchema[block.type].propSchema) ||
+    false
+  );
+}
+
+export function checkBlockIsFileBlockWithPlaceholder<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(block: Block<B, I, S>, editor: BlockNoteEditor<B, I, S>) {
+  const config = editor.schema.blockSchema[block.type];
+  return config.isFileBlock && !block.props.url;
+}
+
 export function checkBlockTypeHasDefaultProp<
   Prop extends keyof typeof defaultProps,
   I extends InlineContentSchema,

package/src/blocks/defaultBlocks.ts

@@ -19,20 +19,29 @@ import {
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "../schema";
+
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent";
-import { Image } from "./ImageBlockContent/ImageBlockContent";
 import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
 import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
+import { CheckListItem } from "./ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent";
 import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent";
 import { Table } from "./TableBlockContent/TableBlockContent";
+import { FileBlock } from "./FileBlockContent/FileBlockContent";
+import { ImageBlock } from "./ImageBlockContent/ImageBlockContent";
+import { VideoBlock } from "./VideoBlockContent/VideoBlockContent";
+import { AudioBlock } from "./AudioBlockContent/AudioBlockContent";
 
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
-  image: Image,
+  checkListItem: CheckListItem,
   table: Table,
+  file: FileBlock,
+  image: ImageBlock,
+  video: VideoBlock,
+  audio: AudioBlock,
 } satisfies BlockSpecs;
 
 export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);