@blocknote/core 0.40.0 → 0.41.0

package/src/editor/managers/StyleManager.ts

@@ -0,0 +1,182 @@
+import { insertContentAt } from "../../api/blockManipulation/insertContentAt.js";
+import { inlineContentToNodes } from "../../api/nodeConversions/blockToNode.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  PartialInlineContent,
+  StyleSchema,
+  Styles,
+} from "../../schema/index.js";
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from "../../blocks/defaultBlocks.js";
+import { TextSelection } from "@tiptap/pm/state";
+import { UnreachableCaseError } from "../../util/typescript.js";
+import { BlockNoteEditor } from "../BlockNoteEditor.js";
+
+export class StyleManager<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  ISchema extends InlineContentSchema = DefaultInlineContentSchema,
+  SSchema extends StyleSchema = DefaultStyleSchema,
+> {
+  constructor(private editor: BlockNoteEditor<BSchema, ISchema, SSchema>) {}
+
+  /**
+   * Insert a piece of content at the current cursor position.
+   *
+   * @param content can be a string, or array of partial inline content elements
+   */
+  public insertInlineContent(
+    content: PartialInlineContent<ISchema, SSchema>,
+    { updateSelection = false }: { updateSelection?: boolean } = {},
+  ) {
+    const nodes = inlineContentToNodes(content, this.editor.pmSchema);
+
+    this.editor.transact((tr) => {
+      insertContentAt(
+        tr,
+        {
+          from: tr.selection.from,
+          to: tr.selection.to,
+        },
+        nodes,
+        {
+          updateSelection,
+        },
+      );
+    });
+  }
+
+  /**
+   * Gets the active text styles at the text cursor position or at the end of the current selection if it's active.
+   */
+  public getActiveStyles() {
+    return this.editor.transact((tr) => {
+      const styles: Styles<SSchema> = {};
+      const marks = tr.selection.$to.marks();
+
+      for (const mark of marks) {
+        const config = this.editor.schema.styleSchema[mark.type.name];
+        if (!config) {
+          if (
+            // Links are not considered styles in blocknote
+            mark.type.name !== "link" &&
+            // "blocknoteIgnore" tagged marks (such as comments) are also not considered BlockNote "styles"
+            !mark.type.spec.blocknoteIgnore
+          ) {
+            // eslint-disable-next-line no-console
+            console.warn("mark not found in styleschema", mark.type.name);
+          }
+
+          continue;
+        }
+        if (config.propSchema === "boolean") {
+          (styles as any)[config.type] = true;
+        } else {
+          (styles as any)[config.type] = mark.attrs.stringValue;
+        }
+      }
+
+      return styles;
+    });
+  }
+
+  /**
+   * Adds styles to the currently selected content.
+   * @param styles The styles to add.
+   */
+  public addStyles(styles: Styles<SSchema>) {
+    for (const [style, value] of Object.entries(styles)) {
+      const config = this.editor.schema.styleSchema[style];
+      if (!config) {
+        throw new Error(`style ${style} not found in styleSchema`);
+      }
+      if (config.propSchema === "boolean") {
+        this.editor._tiptapEditor.commands.setMark(style);
+      } else if (config.propSchema === "string") {
+        this.editor._tiptapEditor.commands.setMark(style, {
+          stringValue: value,
+        });
+      } else {
+        throw new UnreachableCaseError(config.propSchema);
+      }
+    }
+  }
+
+  /**
+   * Removes styles from the currently selected content.
+   * @param styles The styles to remove.
+   */
+  public removeStyles(styles: Styles<SSchema>) {
+    for (const style of Object.keys(styles)) {
+      this.editor._tiptapEditor.commands.unsetMark(style);
+    }
+  }
+
+  /**
+   * Toggles styles on the currently selected content.
+   * @param styles The styles to toggle.
+   */
+  public toggleStyles(styles: Styles<SSchema>) {
+    for (const [style, value] of Object.entries(styles)) {
+      const config = this.editor.schema.styleSchema[style];
+      if (!config) {
+        throw new Error(`style ${style} not found in styleSchema`);
+      }
+      if (config.propSchema === "boolean") {
+        this.editor._tiptapEditor.commands.toggleMark(style);
+      } else if (config.propSchema === "string") {
+        this.editor._tiptapEditor.commands.toggleMark(style, {
+          stringValue: value,
+        });
+      } else {
+        throw new UnreachableCaseError(config.propSchema);
+      }
+    }
+  }
+
+  /**
+   * Gets the currently selected text.
+   */
+  public getSelectedText() {
+    return this.editor.transact((tr) => {
+      return tr.doc.textBetween(tr.selection.from, tr.selection.to);
+    });
+  }
+
+  /**
+   * Gets the URL of the last link in the current selection, or `undefined` if there are no links in the selection.
+   */
+  public getSelectedLinkUrl() {
+    return this.editor._tiptapEditor.getAttributes("link").href as
+      | string
+      | undefined;
+  }
+
+  /**
+   * Creates a new link to replace the selected content.
+   * @param url The link URL.
+   * @param text The text to display the link with.
+   */
+  public createLink(url: string, text?: string) {
+    if (url === "") {
+      return;
+    }
+    const mark = this.editor.pmSchema.mark("link", { href: url });
+    this.editor.transact((tr) => {
+      const { from, to } = tr.selection;
+
+      if (text) {
+        tr.insertText(text, from, to).addMark(from, from + text.length, mark);
+      } else {
+        tr.setSelection(TextSelection.create(tr.doc, to)).addMark(
+          from,
+          to,
+          mark,
+        );
+      }
+    });
+  }
+}

package/src/editor/managers/index.ts

@@ -0,0 +1,11 @@
+export { BlockManager } from "./BlockManager.js";
+export {
+  CollaborationManager,
+  type CollaborationOptions,
+} from "./CollaborationManager.js";
+export { EventManager } from "./EventManager.js";
+export { ExportManager } from "./ExportManager.js";
+export { ExtensionManager } from "./ExtensionManager.js";
+export { SelectionManager } from "./SelectionManager.js";
+export { StateManager } from "./StateManager.js";
+export { StyleManager } from "./StyleManager.js";

package/src/extensions/Comments/CommentsPlugin.ts

@@ -10,7 +10,7 @@ import type {
 } from "../../comments/index.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { BlockNoteSchema } from "../../blocks/BlockNoteSchema.js";
+import { CustomBlockNoteSchema } from "../../schema/schema.js";
 import { UserStore } from "./userstore/UserStore.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
@@ -135,14 +135,17 @@ export class CommentsPlugin extends BlockNoteExtension {
     private readonly editor: BlockNoteEditor<any, any, any>,
     public readonly threadStore: ThreadStore,
     private readonly markType: string,
-    public readonly commentEditorSchema?: BlockNoteSchema<any, any, any>,
+    public readonly resolveUsers:
+      | undefined
+      | ((userIds: string[]) => Promise<User[]>),
+    public readonly commentEditorSchema?: CustomBlockNoteSchema<any, any, any>,
   ) {
     super();
 
-    if (!editor.resolveUsers) {
+    if (!resolveUsers) {
       throw new Error("resolveUsers is required for comments");
     }
-    this.userStore = new UserStore<User>(editor.resolveUsers);
+    this.userStore = new UserStore<User>(resolveUsers);
 
     // Note: Plugins are currently not destroyed when the editor is destroyed.
     // We should unsubscribe from the threadStore when the editor is destroyed.

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -215,6 +215,16 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (editorHasBlockWithType(editor, "divider")) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, { type: "divider" });
+      },
+      key: "divider",
+      ...editor.dictionary.slash_menu.divider,
+    });
+  }
+
   if (editorHasBlockWithType(editor, "table")) {
     items.push({
       onItemClick: () => {

package/src/i18n/locales/ar.ts

@@ -156,6 +156,12 @@ export const ar: Dictionary = {
       aliases: ["رمز تعبيري", "إيموجي", "إيموت", "عاطفة", "وجه"],
       group: "آخرون",
     },
+    divider: {
+      title: "فاصل",
+      subtext: "يستخدم لفصل الكتل",
+      aliases: ["فاصل", "فاصل", "فاصل", "فاصل"],
+      group: "الكتل الأساسية",
+    },
   },
   placeholders: {
     default: "أدخل نصًا أو اكتب '/' للأوامر",

package/src/i18n/locales/de.ts

@@ -191,6 +191,12 @@ export const de: Dictionary = {
       aliases: ["emoji", "emote", "emotion", "gesicht"],
       group: "Andere",
     },
+    divider: {
+      title: "Trennlinie",
+      subtext: "Trennlinie zwischen Blöcken",
+      aliases: ["trennlinie", "hr", "horizontal rule"],
+      group: "Grundlegende Blöcke",
+    },
   },
   placeholders: {
     default: "Text eingeben oder '/' für Befehle tippen",

package/src/i18n/locales/en.ts

@@ -170,6 +170,12 @@ export const en = {
       aliases: ["emoji", "emote", "emotion", "face"],
       group: "Others",
     },
+    divider: {
+      title: "Divider",
+      subtext: "Visually divide blocks",
+      aliases: ["divider", "hr", "line", "horizontal rule"],
+      group: "Basic blocks",
+    },
   },
   placeholders: {
     default: "Enter text or type '/' for commands",

package/src/i18n/locales/es.ts

@@ -171,6 +171,12 @@ export const es: Dictionary = {
       aliases: ["emoji", "emoticono", "emoción", "cara"],
       group: "Otros",
     },
+    divider: {
+      title: "Divisor",
+      subtext: "Divisor de bloques",
+      aliases: ["divisor", "hr", "horizontal rule"],
+      group: "Bloques básicos",
+    },
   },
   placeholders: {
     default: "Escribe o teclea '/' para comandos",

package/src/i18n/locales/fr.ts

@@ -216,6 +216,12 @@ export const fr: Dictionary = {
       aliases: ["emoji", "émoticône", "émotion", "visage", "smiley"],
       group: "Autres",
     },
+    divider: {
+      title: "Diviseur",
+      subtext: "Utilisé pour diviser les blocs",
+      aliases: ["diviseur", "hr", "horizontal rule"],
+      group: "Blocs de base",
+    },
   },
   placeholders: {
     default:

package/src/i18n/locales/he.ts

@@ -172,6 +172,12 @@ export const he: Dictionary = {
       aliases: ["emoji", "emote", "emotion", "face"],
       group: "אחר",
     },
+    divider: {
+      title: "מחיצה",
+      subtext: "מחיצה בין בלוקים",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "בלוקים בסיסיים",
+    },
   },
   placeholders: {
     default: "הזן טקסט או הקלד '/' לפקודות",

package/src/i18n/locales/hr.ts

@@ -184,6 +184,12 @@ export const hr: Dictionary = {
       aliases: ["emoji", "emotikon", "emocija", "lice"],
       group: "Ostalo",
     },
+    divider: {
+      title: "Razdjelnik",
+      subtext: "Razdjelnik blokova",
+      aliases: ["razdjelnik", "hr", "horizontal rule"],
+      group: "Osnovni blokovi",
+    },
   },
   placeholders: {
     default: "Unesi tekst ili upiši ‘/’ za naredbe",

package/src/i18n/locales/is.ts

@@ -185,6 +185,12 @@ export const is: Dictionary = {
       aliases: ["emoji", "andlitsávísun", "tilfinningar", "andlit"],
       group: "Annað",
     },
+    divider: {
+      title: "Razdjelnik",
+      subtext: "Razdjelnik blokova",
+      aliases: ["razdjelnik", "hr", "horizontal rule"],
+      group: "Osnovni blokovi",
+    },
   },
   placeholders: {
     default: "Sláðu inn texta eða skrifaðu '/' fyrir skipanir",

package/src/i18n/locales/it.ts

@@ -193,6 +193,12 @@ export const it: Dictionary = {
       aliases: ["emoji", "emote", "emozione", "faccia"],
       group: "Altri",
     },
+    divider: {
+      title: "Divisore",
+      subtext: "Divisore di blocchi",
+      aliases: ["divisore", "hr", "horizontal rule"],
+      group: "Blocchi base",
+    },
   },
   placeholders: {
     default: "Inserisci testo o digita '/' per i comandi",

package/src/i18n/locales/ja.ts

@@ -211,6 +211,12 @@ export const ja: Dictionary = {
       aliases: ["絵文字", "顔文字", "感情表現", "顔"],
       group: "その他",
     },
+    divider: {
+      title: "区切り",
+      subtext: "区切りを表示するために使用",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "基本ブロック",
+    },
   },
   placeholders: {
     default: "テキストを入力するか'/' を入力してコマンド選択",

package/src/i18n/locales/ko.ts

@@ -184,6 +184,12 @@ export const ko: Dictionary = {
       ],
       group: "기타",
     },
+    divider: {
+      title: "구분선",
+      subtext: "구분선 블록",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "기본 블록",
+    },
   },
   placeholders: {
     default: "텍스트를 입력하거나 /를 입력하여 명령을 입력하세요.",

package/src/i18n/locales/nl.ts

@@ -172,6 +172,12 @@ export const nl: Dictionary = {
       ],
       group: "Overig",
     },
+    divider: {
+      title: "Scheidingslijn",
+      subtext: "Scheidingslijn tussen blokken",
+      aliases: ["scheidingslijn", "hr", "horizontal rule"],
+      group: "Basisblokken",
+    },
   },
   placeholders: {
     default: "Voer tekst in of type '/' voor commando's",

package/src/i18n/locales/no.ts

@@ -190,6 +190,12 @@ export const no: Dictionary = {
       aliases: ["emoji", "emote", "emosjon", "ansikt"],
       group: "Andre",
     },
+    divider: {
+      title: "Delingslinje",
+      subtext: "Delingslinje mellom blokker",
+      aliases: ["delingslinje", "hr", "horizontal rule"],
+      group: "Grunnleggende blokker",
+    },
   },
   placeholders: {
     default: "Skriv tekst eller skriv '/' for å vise kommandoer",

package/src/i18n/locales/pl.ts

@@ -162,6 +162,12 @@ export const pl: Dictionary = {
       aliases: ["emoji", "emotka", "wyrażenie emocji", "twarz"],
       group: "Inne",
     },
+    divider: {
+      title: "Separator",
+      subtext: "Separator bloków",
+      aliases: ["separator", "hr", "horizontal rule"],
+      group: "Podstawowe bloki",
+    },
   },
   placeholders: {
     default: "Wprowadź tekst lub wpisz '/' aby użyć poleceń",

package/src/i18n/locales/pt.ts

@@ -163,6 +163,12 @@ export const pt: Dictionary = {
       aliases: ["emoji", "emoticon", "expressão emocional", "rosto"],
       group: "Outros",
     },
+    divider: {
+      title: "Separador",
+      subtext: "Separador de blocos",
+      aliases: ["separador", "hr", "horizontal rule"],
+      group: "Blocos básicos",
+    },
   },
   placeholders: {
     default: "Digite texto ou use '/' para comandos",

package/src/i18n/locales/ru.ts

@@ -214,6 +214,12 @@ export const ru: Dictionary = {
       aliases: ["эмодзи", "смайлик", "выражение эмоций", "лицо"],
       group: "Прочее",
     },
+    divider: {
+      title: "Разделитель",
+      subtext: "Разделитель блоков",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "Базовые блоки",
+    },
   },
   placeholders: {
     default: "Введите текст или введите «/» для команд",

package/src/i18n/locales/sk.ts

@@ -170,6 +170,12 @@ export const sk = {
       aliases: ["emoji", "emócia", "tvár"],
       group: "Ostatné",
     },
+    divider: {
+      title: "Oddelovač",
+      subtext: "Oddelovač blokov",
+      aliases: ["oddelovač", "hr", "horizontal rule"],
+      group: "Základné bloky",
+    },
   },
   placeholders: {
     default: "Zadajte text alebo napíšte '/' pre príkazy",

package/src/i18n/locales/uk.ts

@@ -196,6 +196,12 @@ export const uk: Dictionary = {
       aliases: ["emoji", "emote", "emotion", "face", "смайлик", "емодзі"],
       group: "Інше",
     },
+    divider: {
+      title: "Розділювач",
+      subtext: "Розділювач блоків",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "Базові блоки",
+    },
   },
   placeholders: {
     default: "Введіть текст або наберіть '/' для команд",

package/src/i18n/locales/vi.ts

@@ -170,6 +170,12 @@ export const vi: Dictionary = {
       ],
       group: "Khác",
     },
+    divider: {
+      title: "Phân cách",
+      subtext: "Phân cách khối",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "Khối cơ bản",
+    },
   },
   placeholders: {
     default: "Nhập văn bản hoặc gõ '/' để thêm định dạng",

package/src/i18n/locales/zh-tw.ts

@@ -212,6 +212,12 @@ export const zhTW: Dictionary = {
       ],
       group: "其他",
     },
+    divider: {
+      title: "分隔線",
+      subtext: "分隔線區塊",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "基礎區塊",
+    },
   },
   placeholders: {
     default: "輸入 '/' 以使用指令",

package/src/i18n/locales/zh.ts

@@ -212,6 +212,12 @@ export const zh: Dictionary = {
       ],
       group: "其他",
     },
+    divider: {
+      title: "分隔线",
+      subtext: "分隔线区块",
+      aliases: ["divider", "hr", "horizontal rule"],
+      group: "基础区块",
+    },
   },
   placeholders: {
     default: "输入 '/' 以使用命令",

package/src/schema/blocks/createSpec.ts

@@ -218,6 +218,7 @@ export function addNodeAndExtensionsToSpec<
   return {
     config: blockConfig,
     implementation: {
+      ...blockImplementation,
       node,
       render(block, editor) {
         const blockContentDOMAttributes =

package/src/util/string.ts

@@ -13,3 +13,24 @@ export function filenameFromURL(url: string): string {
   }
   return parts[parts.length - 1];
 }
+
+export function isVideoUrl(url: string) {
+  const videoExtensions = [
+    "mp4",
+    "webm",
+    "ogg",
+    "mov",
+    "mkv",
+    "flv",
+    "avi",
+    "wmv",
+    "m4v",
+  ];
+  try {
+    const pathname = new URL(url).pathname;
+    const ext = pathname.split(".").pop()?.toLowerCase() || "";
+    return videoExtensions.includes(ext);
+  } catch (_) {
+    return false;
+  }
+}

package/types/src/api/exporters/markdown/util/convertVideoToMarkdownRehypePlugin.d.ts

@@ -0,0 +1,2 @@
+import { Parent as HASTParent } from "hast";
+export declare function convertVideoToMarkdown(): (tree: HASTParent) => void;

package/types/src/blocks/Divider/block.d.ts

@@ -0,0 +1,3 @@
+export type DividerBlockConfig = ReturnType<typeof createDividerBlockConfig>;
+export declare const createDividerBlockConfig: () => import("../../index.js").BlockConfig<"divider", {}, "none">;
+export declare const createDividerBlockSpec: (options?: Partial<Partial<Record<string, any>>> | undefined) => import("../../index.js").BlockSpec<"divider", {}, "none">;

package/types/src/blocks/Heading/block.d.ts

@@ -11,7 +11,7 @@ export declare const createHeadingBlockConfig: (() => import("../../index.js").B
         readonly optional: true;
     } | undefined;
     readonly level: {
-        readonly default: 1 | 2 | 4 | 3 | 5 | 6;
+        readonly default: 1 | 4 | 2 | 3 | 5 | 6;
         readonly values: readonly number[];
     };
     readonly backgroundColor: {
@@ -30,7 +30,7 @@ export declare const createHeadingBlockConfig: (() => import("../../index.js").B
         readonly optional: true;
     } | undefined;
     readonly level: {
-        readonly default: 1 | 2 | 4 | 3 | 5 | 6;
+        readonly default: 1 | 4 | 2 | 3 | 5 | 6;
         readonly values: readonly number[];
     };
     readonly backgroundColor: {
@@ -54,7 +54,7 @@ export declare const createHeadingBlockSpec: (options?: Partial<{
         readonly optional: true;
     } | undefined;
     readonly level: {
-        readonly default: 1 | 2 | 4 | 3 | 5 | 6;
+        readonly default: 1 | 4 | 2 | 3 | 5 | 6;
         readonly values: readonly number[];
     };
     readonly backgroundColor: {

package/types/src/blocks/defaultBlocks.d.ts

@@ -50,6 +50,7 @@ export declare const defaultBlockSpecs: {
             readonly default: string;
         };
     }, "inline">;
+    readonly divider: import("../index.js").BlockSpec<"divider", {}, "none">;
     readonly file: import("../index.js").BlockSpec<"file", {
         readonly backgroundColor: {
             default: "default";
@@ -70,7 +71,7 @@ export declare const defaultBlockSpecs: {
             readonly optional: true;
         } | undefined;
         readonly level: {
-            readonly default: 1 | 2 | 4 | 3 | 5 | 6;
+            readonly default: 1 | 4 | 2 | 3 | 5 | 6;
             readonly values: readonly number[];
         };
         readonly backgroundColor: {

package/types/src/blocks/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Audio/block.js";
 export * from "./Audio/parseAudioElement.js";
 export * from "./Code/block.js";
+export * from "./Divider/block.js";
 export * from "./File/block.js";
 export * from "./Heading/block.js";
 export * from "./Image/block.js";