@blocknote/core 0.38.0 → 0.39.0

package/types/src/schema/styles/types.d.ts

@@ -1,15 +1,24 @@
 import { Mark } from "@tiptap/core";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 export type StylePropSchema = "boolean" | "string";
 export type StyleConfig = {
     type: string;
     readonly propSchema: StylePropSchema;
 };
-export type StyleImplementation = {
+export type StyleImplementation<T extends StyleConfig> = {
     mark: Mark;
+    render: (value: T["propSchema"] extends "boolean" ? undefined : string, editor: BlockNoteEditor<any, any, any>) => {
+        dom: HTMLElement;
+        contentDOM?: HTMLElement;
+    };
+    toExternalHTML?: (value: T["propSchema"] extends "boolean" ? undefined : string, editor: BlockNoteEditor<any, any, any>) => {
+        dom: HTMLElement;
+        contentDOM?: HTMLElement;
+    };
 };
 export type StyleSpec<T extends StyleConfig> = {
     config: T;
-    implementation: StyleImplementation;
+    implementation: StyleImplementation<T>;
 };
 export type StyleSchema = Record<string, StyleConfig>;
 export type StyleSpecs = Record<string, StyleSpec<StyleConfig>>;

package/types/src/util/topo-sort.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Instead of depending on the NPM package, we vendor this file from https://github.com/n1ru4l/toposort/blob/main/src/toposort.ts (MIT)
+ *
+ * There was a recent publish, despite not having been updated in 2 years, which is suspicious.
+ *
+ * This file is also simple enough that we can maintain it ourselves.
+ */
+export type DirectedAcyclicGraph = Map<string, Iterable<string>>;
+export type DependencyGraph = DirectedAcyclicGraph;
+export type TaskList = Array<Set<string>>;
+export type NodeId = string;
+export type DependencyMap = Map<NodeId, Set<NodeId>>;
+export declare function toposort(dag: DirectedAcyclicGraph): TaskList;
+export declare function toposortReverse(deps: DependencyGraph): TaskList;
+export declare function createDependencyGraph(): DependencyMap;
+export declare function addDependency(graph: DependencyMap, from: NodeId, to: NodeId): DependencyMap;
+export declare function removeDependency(graph: DependencyMap, from: NodeId, to: NodeId): boolean;
+export declare function hasDependency(graph: DependencyMap, from: NodeId, to: NodeId): boolean;

package/types/src/util/topo-sort.test.d.ts

@@ -0,0 +1 @@
+export {};

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -1,144 +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 { createFileBlockWrapper } from "../FileBlockContent/helpers/render/createFileBlockWrapper.js";
-import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
-import { createLinkWithCaption } from "../FileBlockContent/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 const audioPropSchema = {
-  backgroundColor: defaultProps.backgroundColor,
-  // File name.
-  name: {
-    default: "" as const,
-  },
-  // File url.
-  url: {
-    default: "" as const,
-  },
-  // File caption.
-  caption: {
-    default: "" as const,
-  },
-
-  showPreview: {
-    default: true,
-  },
-} satisfies PropSchema;
-
-export const audioBlockConfig = {
-  type: "audio" as const,
-  propSchema: audioPropSchema,
-  content: "none",
-  isFileBlock: true,
-  fileBlockAccept: ["audio/*"],
-} satisfies FileBlockConfig;
-
-export const audioRender = (
-  block: BlockFromConfig<typeof audioBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-) => {
-  const icon = document.createElement("div");
-  icon.innerHTML = 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 audioParse = (
-  element: HTMLElement,
-): Partial<Props<typeof audioBlockConfig.propSchema>> | undefined => {
-  if (element.tagName === "AUDIO") {
-    // Ignore if parent figure has already been parsed.
-    if (element.closest("figure")) {
-      return undefined;
-    }
-
-    return parseAudioElement(element as HTMLAudioElement);
-  }
-
-  if (element.tagName === "FIGURE") {
-    const parsedFigure = parseFigureElement(element, "audio");
-    if (!parsedFigure) {
-      return undefined;
-    }
-
-    const { targetElement, caption } = parsedFigure;
-
-    return {
-      ...parseAudioElement(targetElement as HTMLAudioElement),
-      caption,
-    };
-  }
-
-  return undefined;
-};
-
-export const audioToExternalHTML = (
-  block: BlockFromConfig<typeof audioBlockConfig, 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 AudioBlock = createBlockSpec(audioBlockConfig, {
-  render: audioRender,
-  parse: audioParse,
-  toExternalHTML: audioToExternalHTML,
-});

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -1,445 +0,0 @@
-import type { HighlighterGeneric } from "@shikijs/types";
-import { InputRule, isTextSelection } from "@tiptap/core";
-import { TextSelection } from "@tiptap/pm/state";
-import { Parser, createHighlightPlugin } from "prosemirror-highlight";
-import { createParser } from "prosemirror-highlight/shiki";
-import { BlockNoteEditor } from "../../index.js";
-import {
-  PropSchema,
-  createBlockSpecFromStronglyTypedTiptapNode,
-  createStronglyTypedTiptapNode,
-} from "../../schema/index.js";
-import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
-
-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>>;
-};
-
-type CodeBlockConfigOptions = {
-  editor: BlockNoteEditor<any, any, any>;
-};
-
-export const shikiParserSymbol = Symbol.for("blocknote.shikiParser");
-export const shikiHighlighterPromiseSymbol = Symbol.for(
-  "blocknote.shikiHighlighterPromise",
-);
-export const defaultCodeBlockPropSchema = {
-  language: {
-    default: "text",
-  },
-} satisfies PropSchema;
-
-const CodeBlockContent = createStronglyTypedTiptapNode({
-  name: "codeBlock",
-  content: "inline*",
-  group: "blockContent",
-  marks: "insertion deletion modification",
-  code: true,
-  defining: true,
-  addOptions() {
-    return {
-      defaultLanguage: "text",
-      indentLineWithTab: true,
-      supportedLanguages: {},
-    };
-  },
-  addAttributes() {
-    const options = this.options as CodeBlockConfigOptions;
-
-    return {
-      language: {
-        default: options.editor.settings.codeBlock.defaultLanguage,
-        parseHTML: (inputElement) => {
-          let element = inputElement as HTMLElement | null;
-          let language: string | null = null;
-
-          if (
-            element?.tagName === "DIV" &&
-            element?.dataset.contentType === "codeBlock"
-          ) {
-            element = element.children[0] as HTMLElement | null;
-          }
-
-          if (element?.tagName === "PRE") {
-            element = element?.children[0] as HTMLElement | null;
-          }
-
-          const dataLanguage = element?.getAttribute("data-language");
-
-          if (dataLanguage) {
-            language = dataLanguage.toLowerCase();
-          } else {
-            const classNames = [...(element?.className.split(" ") || [])];
-            const languages = classNames
-              .filter((className) => className.startsWith("language-"))
-              .map((className) => className.replace("language-", ""));
-
-            if (languages.length > 0) {
-              language = languages[0].toLowerCase();
-            }
-          }
-
-          if (!language) {
-            return null;
-          }
-
-          return (
-            getLanguageId(options.editor.settings.codeBlock, language) ??
-            language
-          );
-        },
-        renderHTML: (attributes) => {
-          return attributes.language
-            ? {
-                class: `language-${attributes.language}`,
-                "data-language": attributes.language,
-              }
-            : {};
-        },
-      },
-    };
-  },
-  parseHTML() {
-    return [
-      // Parse from internal HTML.
-      {
-        tag: "div[data-content-type=" + this.name + "]",
-        contentElement: ".bn-inline-content",
-      },
-      // Parse from external HTML.
-      {
-        tag: "pre",
-        // contentElement: "code",
-        preserveWhitespace: "full",
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    const pre = document.createElement("pre");
-    const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-      this.name,
-      "code",
-      this.options.domAttributes?.blockContent || {},
-      {
-        ...(this.options.domAttributes?.inlineContent || {}),
-        ...HTMLAttributes,
-      },
-    );
-
-    dom.removeChild(contentDOM);
-    dom.appendChild(pre);
-    pre.appendChild(contentDOM);
-
-    return {
-      dom,
-      contentDOM,
-    };
-  },
-  addNodeView() {
-    const options = this.options as CodeBlockConfigOptions;
-
-    return ({ editor, node, getPos, HTMLAttributes }) => {
-      const pre = document.createElement("pre");
-      const select = document.createElement("select");
-      const selectWrapper = document.createElement("div");
-      const { dom, contentDOM } = createDefaultBlockDOMOutputSpec(
-        this.name,
-        "code",
-        {
-          ...(this.options.domAttributes?.blockContent || {}),
-          ...HTMLAttributes,
-        },
-        this.options.domAttributes?.inlineContent || {},
-      );
-      const handleLanguageChange = (event: Event) => {
-        const language = (event.target as HTMLSelectElement).value;
-
-        editor.commands.command(({ tr }) => {
-          tr.setNodeAttribute(getPos(), "language", language);
-
-          return true;
-        });
-      };
-
-      Object.entries(
-        options.editor.settings.codeBlock.supportedLanguages,
-      ).forEach(([id, { name }]) => {
-        const option = document.createElement("option");
-
-        option.value = id;
-        option.text = name;
-        select.appendChild(option);
-      });
-
-      selectWrapper.contentEditable = "false";
-      select.value =
-        node.attrs.language ||
-        options.editor.settings.codeBlock.defaultLanguage;
-      dom.removeChild(contentDOM);
-      dom.appendChild(selectWrapper);
-      dom.appendChild(pre);
-      pre.appendChild(contentDOM);
-      selectWrapper.appendChild(select);
-      select.addEventListener("change", handleLanguageChange);
-
-      return {
-        dom,
-        contentDOM,
-        update: (newNode) => {
-          if (newNode.type !== this.type) {
-            return false;
-          }
-
-          return true;
-        },
-        destroy: () => {
-          select.removeEventListener("change", handleLanguageChange);
-        },
-      };
-    };
-  },
-  addProseMirrorPlugins() {
-    const options = this.options as CodeBlockConfigOptions;
-    const globalThisForShiki = globalThis as {
-      [shikiHighlighterPromiseSymbol]?: Promise<HighlighterGeneric<any, any>>;
-      [shikiParserSymbol]?: Parser;
-    };
-
-    let highlighter: HighlighterGeneric<any, any> | undefined;
-    let parser: Parser | undefined;
-    let hasWarned = false;
-    const lazyParser: Parser = (parserOptions) => {
-      if (!options.editor.settings.codeBlock.createHighlighter) {
-        if (process.env.NODE_ENV === "development" && !hasWarned) {
-          // eslint-disable-next-line no-console
-          console.log(
-            "For syntax highlighting of code blocks, you must provide a `codeBlock.createHighlighter` function",
-          );
-          hasWarned = true;
-        }
-        return [];
-      }
-      if (!highlighter) {
-        globalThisForShiki[shikiHighlighterPromiseSymbol] =
-          globalThisForShiki[shikiHighlighterPromiseSymbol] ||
-          options.editor.settings.codeBlock.createHighlighter();
-
-        return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
-          (createdHighlighter) => {
-            highlighter = createdHighlighter;
-          },
-        );
-      }
-      const language = getLanguageId(
-        options.editor.settings.codeBlock,
-        parserOptions.language!,
-      );
-
-      if (
-        !language ||
-        language === "text" ||
-        language === "none" ||
-        language === "plaintext" ||
-        language === "txt"
-      ) {
-        return [];
-      }
-
-      if (!highlighter.getLoadedLanguages().includes(language)) {
-        return highlighter.loadLanguage(language);
-      }
-
-      if (!parser) {
-        parser =
-          globalThisForShiki[shikiParserSymbol] ||
-          createParser(highlighter as any);
-        globalThisForShiki[shikiParserSymbol] = parser;
-      }
-
-      return parser(parserOptions);
-    };
-
-    const shikiLazyPlugin = createHighlightPlugin({
-      parser: lazyParser,
-      languageExtractor: (node) => node.attrs.language,
-      nodeTypes: [this.name],
-    });
-
-    return [shikiLazyPlugin];
-  },
-  addInputRules() {
-    const options = this.options as CodeBlockConfigOptions;
-
-    return [
-      new InputRule({
-        find: /^```(.*?)\s$/,
-        handler: ({ state, range, match }) => {
-          const $start = state.doc.resolve(range.from);
-          const languageName = match[1].trim();
-          const attributes = {
-            language:
-              getLanguageId(options.editor.settings.codeBlock, languageName) ??
-              languageName,
-          };
-
-          if (
-            !$start
-              .node(-1)
-              .canReplaceWith(
-                $start.index(-1),
-                $start.indexAfter(-1),
-                this.type,
-              )
-          ) {
-            return null;
-          }
-
-          state.tr
-            .delete(range.from, range.to)
-            .setBlockType(range.from, range.from, this.type, attributes)
-            .setSelection(TextSelection.create(state.tr.doc, range.from));
-
-          return;
-        },
-      }),
-    ];
-  },
-  addKeyboardShortcuts() {
-    return {
-      Delete: ({ editor }) => {
-        const { selection } = editor.state;
-        const { $from } = selection;
-
-        // When inside empty codeblock, on `DELETE` key press, delete the codeblock
-        if (
-          editor.isActive(this.name) &&
-          !$from.parent.textContent &&
-          isTextSelection(selection)
-        ) {
-          // Get the start position of the codeblock for node selection
-          const from = $from.pos - $from.parentOffset - 2;
-
-          editor.chain().setNodeSelection(from).deleteSelection().run();
-
-          return true;
-        }
-
-        return false;
-      },
-      Tab: ({ editor }) => {
-        if (!this.options.indentLineWithTab) {
-          return false;
-        }
-        if (editor.isActive(this.name)) {
-          editor.commands.insertContent("  ");
-          return true;
-        }
-
-        return false;
-      },
-      Enter: ({ editor }) => {
-        const { $from } = editor.state.selection;
-
-        if (!editor.isActive(this.name)) {
-          return false;
-        }
-
-        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
-        const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n");
-
-        if (!isAtEnd || !endsWithDoubleNewline) {
-          editor.commands.insertContent("\n");
-          return true;
-        }
-
-        return editor
-          .chain()
-          .command(({ tr }) => {
-            tr.delete($from.pos - 2, $from.pos);
-
-            return true;
-          })
-          .exitCode()
-          .run();
-      },
-      "Shift-Enter": ({ editor }) => {
-        const { $from } = editor.state.selection;
-
-        if (!editor.isActive(this.name)) {
-          return false;
-        }
-
-        editor
-          .chain()
-          .insertContentAt(
-            $from.pos - $from.parentOffset + $from.parent.nodeSize,
-            {
-              type: "paragraph",
-            },
-          )
-          .run();
-
-        return true;
-      },
-    };
-  },
-});
-
-export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode(
-  CodeBlockContent,
-  defaultCodeBlockPropSchema,
-);
-
-function getLanguageId(
-  options: CodeBlockOptions,
-  languageName: string,
-): string | undefined {
-  return Object.entries(options.supportedLanguages).find(
-    ([id, { aliases }]) => {
-      return aliases?.includes(languageName) || id === languageName;
-    },
-  )?.[0];
-}