@blocknote/core 0.38.0 → 0.39.1-capitol

package/src/blocks/Audio/block.ts

@@ -0,0 +1,174 @@
+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 { createFileBlockWrapper } from "../File/helpers/render/createFileBlockWrapper.js";
+import { createFigureWithCaption } from "../File/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../File/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseAudioElement } from "./parseAudioElement.js";
+
+export const FILE_AUDIO_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+
+export interface AudioOptions {
+  icon?: string;
+}
+
+export type AudioBlockConfig = ReturnType<typeof createAudioBlockConfig>;
+
+export const createAudioBlockConfig = createBlockConfig(
+  (_ctx: AudioOptions) =>
+    ({
+      type: "audio" as const,
+      propSchema: {
+        backgroundColor: defaultProps.backgroundColor,
+        // File name.
+        name: {
+          default: "" as const,
+        },
+        // File url.
+        url: {
+          default: "" as const,
+        },
+        // File caption.
+        caption: {
+          default: "" as const,
+        },
+
+        showPreview: {
+          default: true,
+        },
+      },
+      content: "none",
+    }) as const,
+);
+
+export const audioParse =
+  (_config: AudioOptions = {}) =>
+  (element: HTMLElement) => {
+    if (element.tagName === "AUDIO") {
+      // Ignore if parent figure has already been parsed.
+      if (element.closest("figure")) {
+        return undefined;
+      }
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseAudioElement(element as HTMLAudioElement),
+        backgroundColor,
+      };
+    }
+
+    if (element.tagName === "FIGURE") {
+      const parsedFigure = parseFigureElement(element, "audio");
+      if (!parsedFigure) {
+        return undefined;
+      }
+
+      const { targetElement, caption } = parsedFigure;
+
+      const { backgroundColor } = parseDefaultProps(element);
+
+      return {
+        ...parseAudioElement(targetElement as HTMLAudioElement),
+        backgroundColor,
+        caption,
+      };
+    }
+
+    return undefined;
+  };
+
+export const audioRender =
+  (config: AudioOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createAudioBlockConfig>, any, any>,
+    editor: BlockNoteEditor<
+      Record<"audio", ReturnType<typeof createAudioBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    const icon = document.createElement("div");
+    icon.innerHTML = config.icon ?? FILE_AUDIO_ICON_SVG;
+
+    const audio = document.createElement("audio");
+    audio.className = "bn-audio";
+    if (editor.resolveFileUrl) {
+      editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+        audio.src = downloadUrl;
+      });
+    } else {
+      audio.src = block.props.url;
+    }
+    audio.controls = true;
+    audio.contentEditable = "false";
+    audio.draggable = false;
+
+    return createFileBlockWrapper(
+      block,
+      editor,
+      { dom: audio },
+      icon.firstElementChild as HTMLElement,
+    );
+  };
+
+export const audioToExternalHTML =
+  (_config: AudioOptions = {}) =>
+  (
+    block: BlockFromConfig<ReturnType<typeof createAudioBlockConfig>, any, any>,
+    _editor: BlockNoteEditor<
+      Record<"audio", ReturnType<typeof createAudioBlockConfig>>,
+      any,
+      any
+    >,
+  ) => {
+    if (!block.props.url) {
+      const div = document.createElement("p");
+      div.textContent = "Add audio";
+
+      return {
+        dom: div,
+      };
+    }
+
+    let audio;
+    if (block.props.showPreview) {
+      audio = document.createElement("audio");
+      audio.src = block.props.url;
+    } else {
+      audio = document.createElement("a");
+      audio.href = block.props.url;
+      audio.textContent = block.props.name || block.props.url;
+    }
+
+    if (block.props.caption) {
+      if (block.props.showPreview) {
+        return createFigureWithCaption(audio, block.props.caption);
+      } else {
+        return createLinkWithCaption(audio, block.props.caption);
+      }
+    }
+
+    return {
+      dom: audio,
+    };
+  };
+
+export const createAudioBlockSpec = createBlockSpec(
+  createAudioBlockConfig,
+  (config) => ({
+    meta: {
+      fileBlockAccept: ["audio/*"],
+    },
+    parse: audioParse(config),
+    render: audioRender(config),
+    toExternalHTML: audioToExternalHTML(config),
+    runsBefore: ["file"],
+  }),
+);

package/src/blocks/BlockNoteSchema.ts

@@ -0,0 +1,59 @@
+import {
+  BlockSchema,
+  BlockSchemaFromSpecs,
+  BlockSpecs,
+  CustomBlockNoteSchema,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
+} from "../schema/index.js";
+import {
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+} from "./defaultBlocks.js";
+
+export class BlockNoteSchema<
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema,
+> extends CustomBlockNoteSchema<BSchema, ISchema, SSchema> {
+  public static create<
+    BSpecs extends BlockSpecs | undefined = undefined,
+    ISpecs extends InlineContentSpecs | undefined = undefined,
+    SSpecs extends StyleSpecs | undefined = undefined,
+  >(options?: {
+    /**
+     * A list of custom block types that should be available in the editor.
+     */
+    blockSpecs?: BSpecs;
+    /**
+     * A list of custom InlineContent types that should be available in the editor.
+     */
+    inlineContentSpecs?: ISpecs;
+    /**
+     * A list of custom Styles that should be available in the editor.
+     */
+    styleSpecs?: SSpecs;
+  }): BlockNoteSchema<
+    BSpecs extends undefined
+      ? BlockSchemaFromSpecs<typeof defaultBlockSpecs>
+      : BlockSchemaFromSpecs<NonNullable<BSpecs>>,
+    ISpecs extends undefined
+      ? InlineContentSchemaFromSpecs<typeof defaultInlineContentSpecs>
+      : InlineContentSchemaFromSpecs<NonNullable<ISpecs>>,
+    SSpecs extends undefined
+      ? StyleSchemaFromSpecs<typeof defaultStyleSpecs>
+      : StyleSchemaFromSpecs<NonNullable<SSpecs>>
+  > {
+    return new BlockNoteSchema<any, any, any>({
+      blockSpecs: options?.blockSpecs ?? defaultBlockSpecs,
+      inlineContentSpecs:
+        options?.inlineContentSpecs ?? defaultInlineContentSpecs,
+      styleSpecs: options?.styleSpecs ?? defaultStyleSpecs,
+    });
+  }
+}

package/src/blocks/Code/block.ts

@@ -0,0 +1,299 @@
+import type { HighlighterGeneric } from "@shikijs/types";
+import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+
+import { DOMParser } from "@tiptap/pm/model";
+
+export type CodeBlockOptions = {
+  /**
+   * Whether to indent lines with a tab when the user presses `Tab` in a code block.
+   *
+   * @default true
+   */
+  indentLineWithTab?: boolean;
+  /**
+   * The default language to use for code blocks.
+   *
+   * @default "text"
+   */
+  defaultLanguage?: string;
+  /**
+   * The languages that are supported in the editor.
+   *
+   * @example
+   * {
+   *   javascript: {
+   *     name: "JavaScript",
+   *     aliases: ["js"],
+   *   },
+   *   typescript: {
+   *     name: "TypeScript",
+   *     aliases: ["ts"],
+   *   },
+   * }
+   */
+  supportedLanguages?: Record<
+    string,
+    {
+      /**
+       * The display name of the language.
+       */
+      name: string;
+      /**
+       * Aliases for this language.
+       */
+      aliases?: string[];
+    }
+  >;
+  /**
+   * The highlighter to use for code blocks.
+   */
+  createHighlighter?: () => Promise<HighlighterGeneric<any, any>>;
+};
+
+export type CodeBlockConfig = ReturnType<typeof createCodeBlockConfig>;
+
+export const createCodeBlockConfig = createBlockConfig(
+  ({ defaultLanguage = "text" }: CodeBlockOptions) =>
+    ({
+      type: "codeBlock" as const,
+      propSchema: {
+        language: {
+          default: defaultLanguage,
+        },
+      },
+      content: "inline",
+    }) as const,
+);
+
+export const createCodeBlockSpec = createBlockSpec(
+  createCodeBlockConfig,
+  (options) => ({
+    meta: {
+      code: true,
+      defining: true,
+      isolating: false,
+    },
+    parse: (e) => {
+      if (e.tagName !== "PRE") {
+        return undefined;
+      }
+
+      if (
+        e.childElementCount !== 1 ||
+        e.firstElementChild?.tagName !== "CODE"
+      ) {
+        return undefined;
+      }
+
+      const code = e.firstElementChild!;
+      const language =
+        code.getAttribute("data-language") ||
+        code.className
+          .split(" ")
+          .find((name) => name.includes("language-"))
+          ?.replace("language-", "");
+
+      return { language };
+    },
+
+    parseContent: ({ el, schema }) => {
+      const parser = DOMParser.fromSchema(schema);
+      const code = el.firstElementChild!;
+
+      return parser.parse(code, {
+        topNode: schema.nodes["codeBlock"].create(),
+      }).content;
+    },
+
+    render(block, editor) {
+      const wrapper = document.createDocumentFragment();
+      const pre = document.createElement("pre");
+      const code = document.createElement("code");
+      pre.appendChild(code);
+
+      let removeSelectChangeListener = undefined;
+
+      if (options.supportedLanguages) {
+        const select = document.createElement("select");
+
+        const handleLanguageChange = (event: Event) => {
+          const language = (event.target as HTMLSelectElement).value;
+
+          editor.updateBlock(block.id, { props: { language } });
+        };
+        select.addEventListener("change", handleLanguageChange);
+
+        const selectWrapper = document.createElement("div");
+        selectWrapper.contentEditable = "false";
+        select.value =
+          block.props.language || options.defaultLanguage || "text";
+
+        Object.entries(options.supportedLanguages ?? {}).forEach(
+          ([id, { name }]) => {
+            const option = document.createElement("option");
+
+            option.value = id;
+            option.text = name;
+            select.appendChild(option);
+          },
+        );
+        selectWrapper.appendChild(select);
+        wrapper.appendChild(selectWrapper);
+
+        removeSelectChangeListener = () =>
+          select.removeEventListener("change", handleLanguageChange);
+      }
+      wrapper.appendChild(pre);
+
+      return {
+        dom: wrapper,
+        contentDOM: code,
+        destroy: () => {
+          removeSelectChangeListener?.();
+        },
+      };
+    },
+    toExternalHTML(block) {
+      const pre = document.createElement("pre");
+      const code = document.createElement("code");
+      code.className = `language-${block.props.language}`;
+      code.dataset.language = block.props.language;
+      pre.appendChild(code);
+      return {
+        dom: pre,
+        contentDOM: code,
+      };
+    },
+  }),
+  (options) => {
+    return [
+      createBlockNoteExtension({
+        key: "code-block-keyboard-shortcuts",
+        keyboardShortcuts: {
+          Delete: ({ editor }) => {
+            return editor.transact((tr) => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+              const { $from } = tr.selection;
+
+              // When inside empty codeblock, on `DELETE` key press, delete the codeblock
+              if (!$from.parent.textContent) {
+                editor.removeBlocks([block]);
+
+                return true;
+              }
+
+              return false;
+            });
+          },
+          Tab: ({ editor }) => {
+            if (options.indentLineWithTab === false) {
+              return false;
+            }
+
+            return editor.transact((tr) => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type === "codeBlock") {
+                // TODO should probably only tab when at a line start or already tabbed in
+                tr.insertText("  ");
+                return true;
+              }
+
+              return false;
+            });
+          },
+          Enter: ({ editor }) => {
+            return editor.transact((tr) => {
+              const { block, nextBlock } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+              const { $from } = tr.selection;
+
+              const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+              const endsWithDoubleNewline =
+                $from.parent.textContent.endsWith("\n\n");
+
+              // The user is trying to exit the code block by pressing enter at the end of the code block
+              if (isAtEnd && endsWithDoubleNewline) {
+                // Remove the double newline
+                tr.delete($from.pos - 2, $from.pos);
+
+                // If there is a next block, move the cursor to it
+                if (nextBlock) {
+                  editor.setTextCursorPosition(nextBlock, "start");
+                  return true;
+                }
+
+                // If there is no next block, insert a new paragraph
+                const [newBlock] = editor.insertBlocks(
+                  [{ type: "paragraph" }],
+                  block,
+                  "after",
+                );
+                // Move the cursor to the new block
+                editor.setTextCursorPosition(newBlock, "start");
+
+                return true;
+              }
+
+              tr.insertText("\n");
+              return true;
+            });
+          },
+          "Shift-Enter": ({ editor }) => {
+            return editor.transact(() => {
+              const { block } = editor.getTextCursorPosition();
+              if (block.type !== "codeBlock") {
+                return false;
+              }
+
+              const [newBlock] = editor.insertBlocks(
+                // insert a new paragraph
+                [{ type: "paragraph" }],
+                block,
+                "after",
+              );
+              // move the cursor to the new block
+              editor.setTextCursorPosition(newBlock, "start");
+              return true;
+            });
+          },
+        },
+        inputRules: [
+          {
+            find: /^```(.*?)\s$/,
+            replace: ({ match }) => {
+              const languageName = match[1].trim();
+              const attributes = {
+                language: getLanguageId(options, languageName) ?? languageName,
+              };
+
+              return {
+                type: "codeBlock",
+                props: {
+                  language: attributes.language,
+                },
+                content: [],
+              };
+            },
+          },
+        ],
+      }),
+    ];
+  },
+);
+
+export function getLanguageId(
+  options: CodeBlockOptions,
+  languageName: string,
+): string | undefined {
+  return Object.entries(options.supportedLanguages ?? {}).find(
+    ([id, { aliases }]) => {
+      return aliases?.includes(languageName) || id === languageName;
+    },
+  )?.[0];
+}

package/src/blocks/File/block.ts

@@ -0,0 +1,98 @@
+import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
+import { defaultProps, parseDefaultProps } 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 type FileBlockConfig = ReturnType<typeof createFileBlockConfig>;
+
+export const createFileBlockConfig = createBlockConfig(
+  () =>
+    ({
+      type: "file" as const,
+      propSchema: {
+        backgroundColor: defaultProps.backgroundColor,
+        // File name.
+        name: {
+          default: "" as const,
+        },
+        // File url.
+        url: {
+          default: "" as const,
+        },
+        // File caption.
+        caption: {
+          default: "" as const,
+        },
+      },
+      content: "none" as const,
+    }) as const,
+);
+
+export const fileParse = () => (element: HTMLElement) => {
+  if (element.tagName === "EMBED") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseEmbedElement(element as HTMLEmbedElement),
+      backgroundColor,
+    };
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "embed");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    const { backgroundColor } = parseDefaultProps(element);
+
+    return {
+      ...parseEmbedElement(targetElement as HTMLEmbedElement),
+      backgroundColor,
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const createFileBlockSpec = createBlockSpec(createFileBlockConfig, {
+  meta: {
+    fileBlockAccept: ["*/*"],
+  },
+  parse: fileParse(),
+  render(block, editor) {
+    return createFileBlockWrapper(block, editor);
+  },
+  toExternalHTML(block) {
+    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,
+    };
+  },
+});

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

@@ -1,8 +1,11 @@
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
-import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import {
+  BlockConfig,
+  BlockFromConfigNoChildren,
+} from "../../../../schema/index.js";
 
 export const createAddFileButton = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
+  block: BlockFromConfigNoChildren<BlockConfig<string, any, "none">, any, any>,
   editor: BlockNoteEditor<any, any, any>,
   buttonIcon?: HTMLElement,
 ) => {

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

@@ -1,19 +1,28 @@
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import {
-  BlockFromConfig,
-  BlockSchemaWithBlock,
-  FileBlockConfig,
+  BlockConfig,
+  BlockFromConfigNoChildren,
 } from "../../../../schema/index.js";
 import { createAddFileButton } from "./createAddFileButton.js";
 import { createFileNameWithIcon } from "./createFileNameWithIcon.js";
 
 export const createFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<
-    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+  block: BlockFromConfigNoChildren<
+    BlockConfig<
+      string,
+      {
+        backgroundColor: { default: "default" };
+        name: { default: "" };
+        url: { default: "" };
+        caption: { default: "" };
+        showPreview?: { default: true };
+      },
+      "none"
+    >,
     any,
     any
   >,
+  editor: BlockNoteEditor<any, any, any>,
   element?: { dom: HTMLElement; destroy?: () => void },
   buttonIcon?: HTMLElement,
 ) => {

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

@@ -1,9 +1,22 @@
-import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import {
+  BlockConfig,
+  BlockFromConfigNoChildren,
+} from "../../../../schema/index.js";
 
 export const FILE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg>`;
 
 export const createFileNameWithIcon = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
+  block: BlockFromConfigNoChildren<
+    BlockConfig<
+      string,
+      {
+        name: { default: "" };
+      },
+      "none"
+    >,
+    any,
+    any
+  >,
 ): { dom: HTMLElement; destroy?: () => void } => {
   const file = document.createElement("div");
   file.className = "bn-file-name-with-icon";