@blocknote/core 0.13.3 → 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

@@ -49,7 +49,6 @@ export const videoBlockConfig = {
   propSchema: videoPropSchema,
   content: "none",
   isFileBlock: true,
-  isFileBlockPlaceholder: (block: any) => !block.props.url,
   fileBlockAcceptMimeTypes: ["video/*"],
 } satisfies FileBlockConfig;
 

package/src/blocks/defaultBlockTypeGuards.ts

@@ -82,7 +82,7 @@ export function checkBlockIsFileBlockWithPlaceholder<
   S extends StyleSchema
 >(block: Block<B, I, S>, editor: BlockNoteEditor<B, I, S>) {
   const config = editor.schema.blockSchema[block.type];
-  return config.isFileBlock && config.isFileBlockPlaceholder(block);
+  return config.isFileBlock && !block.props.url;
 }
 
 export function checkBlockTypeHasDefaultProp<

package/src/blocks/defaultBlocks.ts

@@ -19,13 +19,15 @@ import {
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "../schema";
-import { FileBlock } from "./FileBlockContent/FileBlockContent";
-import { ImageBlock } from "./ImageBlockContent/ImageBlockContent";
+
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent";
 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";
 
@@ -34,11 +36,12 @@ export const defaultBlockSpecs = {
   heading: Heading,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
+  checkListItem: CheckListItem,
+  table: Table,
   file: FileBlock,
   image: ImageBlock,
   video: VideoBlock,
   audio: AudioBlock,
-  table: Table,
 } satisfies BlockSpecs;
 
 export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);

package/src/editor/Block.css

@@ -185,6 +185,28 @@ NESTED BLOCKS
   gap: 1.2em;
 }
 
+/* Checked */
+.bn-block-content[data-content-type="checkListItem"] > div {
+  display: flex;
+}
+
+.bn-block-content[data-content-type="checkListItem"] > div > div > input {
+  margin: 0 1.2em 0 0;
+  cursor: pointer;
+}
+
+.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
+  text-decoration: line-through;
+}
+
+.bn-block-content[data-text-alignment="center"] {
+  justify-content: center;
+}
+
+.bn-block-content[data-text-alignment="right"] {
+  justify-content: flex-end;
+}
+
 /* No list nesting */
 .bn-block-outer[data-prev-type="bulletListItem"]
   > .bn-block

package/src/editor/BlockNoteEditor.ts

@@ -117,6 +117,13 @@ export type BlockNoteEditorOptions<
    */
   uploadFile: (file: File) => Promise<string | Record<string, any>>;
 
+  /**
+   * Resolve a URL of a file block to one that can be displayed or downloaded. This can be used for creating authenticated URL or
+   * implementing custom protocols / schemes
+   * @returns The URL that's
+   */
+  resolveFileUrl: (url: string) => Promise<string>;
+
   /**
    * When enabled, allows for collaboration between multiple users.
    */
@@ -201,6 +208,8 @@ export class BlockNoteEditor<
     | ((file: File) => Promise<string | Record<string, any>>)
     | undefined;
 
+  public readonly resolveFileUrl: (url: string) => Promise<string>;
+
   public static create<
     BSchema extends BlockSchema = DefaultBlockSchema,
     ISchema extends InlineContentSchema = DefaultInlineContentSchema,
@@ -295,6 +304,7 @@ export class BlockNoteEditor<
     extensions.push(blockNoteUIExtension);
 
     this.uploadFile = newOptions.uploadFile;
+    this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
 
     if (newOptions.collaboration && newOptions.initialContent) {
       console.warn(

package/src/editor/transformPasted.ts

@@ -40,7 +40,8 @@ export function transformPasted(slice: Slice, view: EditorView) {
 
         if (
           nestedChild.type.name === "bulletListItem" ||
-          nestedChild.type.name === "numberedListItem"
+          nestedChild.type.name === "numberedListItem" ||
+          nestedChild.type.name === "checkListItem"
         ) {
           content.push(f.child(i + 1));
           f = removeChild(f, i + 1);

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -144,6 +144,19 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("checkListItem", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "checkListItem",
+        });
+      },
+      badge: formatKeyboardShortcut("Mod-Shift-9"),
+      key: "check_list",
+      ...editor.dictionary.slash_menu.check_list,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("paragraph", editor)) {
     items.push({
       onItemClick: () => {

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -7,9 +7,9 @@ import {
   BlockFromConfigNoChildren,
   BlockSchemaWithBlock,
   InlineContentSchema,
-  SpecificBlock,
   StyleSchema,
 } from "../../schema";
+import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards";
 import { EventEmitter } from "../../util/EventEmitter";
 import { getDraggableBlockFromCoords } from "../SideMenu/SideMenuPlugin";
 
@@ -83,7 +83,6 @@ function hideElementsWithClassNames(classNames: string[]) {
 }
 
 export class TableHandlesView<
-  BSchema extends BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
   I extends InlineContentSchema,
   S extends StyleSchema
 > implements PluginView
@@ -146,28 +145,15 @@ export class TableHandlesView<
 
     const blockEl = getDraggableBlockFromCoords(cellRect, this.pmView);
     if (!blockEl) {
-      throw new Error(
-        "Found table cell element, but could not find surrounding blockContent element."
-      );
-    }
-    this.tableId = blockEl.id;
-
-    if (
-      this.state !== undefined &&
-      this.state.show &&
-      this.tableId === blockEl.id &&
-      this.state.rowIndex === rowIndex &&
-      this.state.colIndex === colIndex
-    ) {
       return;
     }
 
-    let block: Block<any, any, any> | undefined = undefined;
+    let tableBlock: Block<any, any, any> | undefined = undefined;
 
     // Copied from `getBlock`. We don't use `getBlock` since we also need the PM
     // node for the table, so we would effectively be doing the same work twice.
     this.editor._tiptapEditor.state.doc.descendants((node, pos) => {
-      if (typeof block !== "undefined") {
+      if (typeof tableBlock !== "undefined") {
         return false;
       }
 
@@ -175,24 +161,44 @@ export class TableHandlesView<
         return true;
       }
 
-      block = nodeToBlock(
+      const block = nodeToBlock(
         node,
         this.editor.schema.blockSchema,
         this.editor.schema.inlineContentSchema,
         this.editor.schema.styleSchema,
         this.editor.blockCache
       );
-      this.tablePos = pos + 1;
+
+      if (checkBlockIsDefaultType("table", block, this.editor)) {
+        this.tablePos = pos + 1;
+        tableBlock = block;
+      }
 
       return false;
     });
 
+    if (!tableBlock) {
+      return;
+    }
+
+    this.tableId = blockEl.id;
+
+    if (
+      this.state !== undefined &&
+      this.state.show &&
+      this.tableId === blockEl.id &&
+      this.state.rowIndex === rowIndex &&
+      this.state.colIndex === colIndex
+    ) {
+      return;
+    }
+
     this.state = {
       show: true,
       referencePosCell: cellRect,
       referencePosTable: tableRect,
 
-      block: block! as SpecificBlock<BSchema, "table", I, S>,
+      block: tableBlock,
       colIndex: colIndex,
       rowIndex: rowIndex,
 
@@ -365,13 +371,7 @@ export class TableHandlesProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view:
-    | TableHandlesView<
-        BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
-        I,
-        S
-      >
-    | undefined;
+  private view: TableHandlesView<I, S> | undefined;
   public readonly plugin: Plugin;
 
   constructor(

package/src/extensions/TextAlignment/TextAlignmentExtension.ts

@@ -8,7 +8,13 @@ export const TextAlignmentExtension = Extension.create({
       {
         // Attribute is applied to block content instead of container so that child blocks don't inherit the text
         // alignment styling.
-        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
+        types: [
+          "paragraph",
+          "heading",
+          "bulletListItem",
+          "numberedListItem",
+          "checkListItem",
+        ],
         attributes: {
           textAlignment: {
             default: "left",

package/src/i18n/locales/en.ts

@@ -30,6 +30,20 @@ export const en = {
       aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
       group: "Basic blocks",
     },
+    check_list: {
+      title: "Check List",
+      subtext: "Used to display a list with checkboxes",
+      aliases: [
+        "ul",
+        "li",
+        "list",
+        "checklist",
+        "check list",
+        "checked list",
+        "checkbox",
+      ],
+      group: "Basic blocks",
+    },
     paragraph: {
       title: "Paragraph",
       subtext: "Used for the body of your document",
@@ -96,6 +110,7 @@ export const en = {
     heading: "Heading",
     bulletListItem: "List",
     numberedListItem: "List",
+    checkListItem: "List",
   },
   file_blocks: {
     image: {

package/src/i18n/locales/fr.ts

@@ -32,6 +32,19 @@ export const fr: Dictionary = {
       aliases: ["ul", "li", "liste", "listeàpuces", "liste à puces"],
       group: "Blocs de base",
     },
+    check_list: {
+      title: "Liste de vérification",
+      subtext: "Utilisé pour afficher une liste avec des cases à cocher",
+      aliases: [
+        "ul",
+        "li",
+        "liste",
+        "liste de vérification",
+        "liste cochée",
+        "case à cocher",
+      ],
+      group: "Blocs de base",
+    },
     paragraph: {
       title: "Paragraphe",
       subtext: "Utilisé pour le corps de votre document",
@@ -98,6 +111,7 @@ export const fr: Dictionary = {
     heading: "Titre",
     bulletListItem: "Liste",
     numberedListItem: "Liste",
+    checkListItem: "Liste",
   },
   file_blocks: {
     image: {

package/src/i18n/locales/is.ts

@@ -32,6 +32,12 @@ export const is: Dictionary = {
       aliases: ["ul", "li", "listi", "punktalisti"],
       group: "Grunnblokkar",
     },
+    check_list: {
+      title: "Athugunarlisti",
+      subtext: "Notað til að sýna lista með gátreitum",
+      aliases: ["ul", "li", "listi", "athugunarlisti", "merktur listi"],
+      group: "Grunnblokkar",
+    },
     paragraph: {
       title: "Málsgrein",
       subtext: "Notað fyrir meginmál skjalsins",
@@ -98,6 +104,7 @@ export const is: Dictionary = {
     heading: "Fyrirsögn",
     bulletListItem: "Listi",
     numberedListItem: "Listi",
+    checkListItem: "Listi",
   },
   file_blocks: {
     image: {

package/src/i18n/locales/ja.ts

@@ -37,7 +37,29 @@ export const ja: Dictionary = {
     bullet_list: {
       title: "箇条書き",
       subtext: "箇条書きを表示するために使用",
-      aliases: ["ul", "li", "リスト", "箇条書きリスト"],
+      aliases: [
+        "ul",
+        "li",
+        "bulletlist",
+        "bullet list",
+        "リスト",
+        "箇条書きリスト",
+      ],
+      group: "基本ブロック",
+    },
+    check_list: {
+      title: "チェックリスト",
+      subtext: "チェックボックス付きリストを表示するために使用されます",
+      aliases: [
+        "ul",
+        "li",
+        "list",
+        "checklist",
+        "checked list",
+        "リスト",
+        "チェックリスト",
+        "チェックされたリスト",
+      ],
       group: "基本ブロック",
     },
     paragraph: {
@@ -109,6 +131,7 @@ export const ja: Dictionary = {
     heading: "見出し",
     bulletListItem: "リストを追加",
     numberedListItem: "リストを追加",
+    checkListItem: "リストを追加",
   },
   file_blocks: {
     image: {