@blocknote/core 0.26.0 → 0.27.0

package/src/editor/Block.css

@@ -37,6 +37,10 @@ BASIC STYLES
   outline: 4px solid rgb(100, 160, 255);
 }
 
+.bn-inline-content {
+  width: 100%;
+}
+
 /*
 NESTED BLOCKS
 */
@@ -146,6 +150,14 @@ NESTED BLOCKS
   font-weight: bold;
 }
 
+/* QUOTES */
+[data-content-type="quote"] blockquote {
+  border-left: 2px solid rgb(125, 121, 122);
+  color: rgb(125, 121, 122);
+  margin: 0;
+  padding-left: 1em;
+}
+
 /* LISTS */
 
 .bn-block-content::before {
@@ -188,6 +200,7 @@ NESTED BLOCKS
 /* Checked */
 .bn-block-content[data-content-type="checkListItem"] > div {
   display: flex;
+  width: 100%;
 }
 
 .bn-block-content[data-content-type="checkListItem"] > div > div > input {

package/src/editor/BlockNoteEditor.ts

@@ -43,7 +43,10 @@ import {
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
-import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown.js";
+import {
+  markdownToBlocks,
+  markdownToHTML,
+} from "../api/parsers/markdown/parseMarkdown.js";
 import {
   Block,
   DefaultBlockSchema,
@@ -91,7 +94,7 @@ import {
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
-import { Plugin, Transaction } from "@tiptap/pm/state";
+import { Plugin, TextSelection, Transaction } from "@tiptap/pm/state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { EditorView } from "prosemirror-view";
 import { ySyncPluginKey } from "y-prosemirror";
@@ -101,6 +104,8 @@ import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
 import type { ThreadStore, User } from "../comments/index.js";
 import "../style.css";
 import { EventEmitter } from "../util/EventEmitter.js";
+import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
+import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
 
 export type BlockNoteExtensionFactory = (
   editor: BlockNoteEditor<any, any, any>
@@ -156,6 +161,11 @@ export type BlockNoteEditorOptions<
     showCursorLabels?: "always" | "activity";
   };
 
+  /**
+   * Options for code blocks.
+   */
+  codeBlock?: CodeBlockOptions;
+
   comments: {
     threadStore: ThreadStore;
   };
@@ -212,6 +222,39 @@ export type BlockNoteEditorOptions<
     string | undefined
   >;
 
+  /**
+   * Custom paste handler that can be used to override the default paste behavior.
+   * @returns The function should return `true` if the paste event was handled, otherwise it should return `false` if it should be canceled or `undefined` if it should be handled by another handler.
+   *
+   * @example
+   * ```ts
+   * pasteHandler: ({ defaultPasteHandler }) => {
+   *   return defaultPasteHandler({ pasteBehavior: "prefer-html" });
+   * }
+   * ```
+   */
+  pasteHandler?: (context: {
+    event: ClipboardEvent;
+    editor: BlockNoteEditor<BSchema, ISchema, SSchema>;
+    /**
+     * The default paste handler
+     * @param context The context object
+     * @returns Whether the paste event was handled or not
+     */
+    defaultPasteHandler: (context?: {
+      /**
+       * Whether to prioritize Markdown content in `text/plain` over `text/html` when pasting from the clipboard.
+       * @default true
+       */
+      prioritizeMarkdownOverHTML?: boolean;
+      /**
+       * Whether to parse `text/plain` content from the clipboard as Markdown content.
+       * @default true
+       */
+      plainTextAsMarkdown?: boolean;
+    }) => boolean | undefined;
+  }) => boolean | undefined;
+
   /**
    * 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
@@ -442,6 +485,7 @@ export class BlockNoteEditor<
       cellTextColor: boolean;
       headers: boolean;
     };
+    codeBlock: CodeBlockOptions;
   };
 
   public static create<
@@ -489,6 +533,12 @@ export class BlockNoteEditor<
         cellTextColor: options?.tables?.cellTextColor ?? false,
         headers: options?.tables?.headers ?? false,
       },
+      codeBlock: {
+        indentLineWithTab: options?.codeBlock?.indentLineWithTab ?? true,
+        defaultLanguage: options?.codeBlock?.defaultLanguage ?? "text",
+        supportedLanguages: options?.codeBlock?.supportedLanguages ?? {},
+        createHighlighter: options?.codeBlock?.createHighlighter ?? undefined,
+      },
     };
 
     // apply defaults
@@ -532,6 +582,7 @@ export class BlockNoteEditor<
       tabBehavior: newOptions.tabBehavior,
       sideMenuDetection: newOptions.sideMenuDetection || "viewport",
       comments: newOptions.comments,
+      pasteHandler: newOptions.pasteHandler,
     });
 
     // add extensions from _tiptapOptions
@@ -1136,17 +1187,18 @@ export class BlockNoteEditor<
     }
 
     const { from, to } = this._tiptapEditor.state.selection;
-
-    if (!text) {
-      text = this._tiptapEditor.state.doc.textBetween(from, to);
-    }
-
     const mark = this.pmSchema.mark("link", { href: url });
 
     this.dispatch(
-      this._tiptapEditor.state.tr
-        .insertText(text, from, to)
-        .addMark(from, from + text.length, mark)
+      text
+        ? this._tiptapEditor.state.tr
+            .insertText(text, from, to)
+            .addMark(from, from + text.length, mark)
+        : this._tiptapEditor.state.tr
+            .setSelection(
+              TextSelection.create(this._tiptapEditor.state.tr.doc, to)
+            )
+            .addMark(from, to, mark)
     );
   }
 
@@ -1431,4 +1483,44 @@ export class BlockNoteEditor<
   public setForceSelectionVisible(forceSelectionVisible: boolean) {
     this.showSelectionPlugin.setEnabled(forceSelectionVisible);
   }
+
+  /**
+   * This will convert HTML into a format that is compatible with BlockNote.
+   */
+  private convertHtmlToBlockNoteHtml(html: string) {
+    const htmlNode = nestedListsToBlockNoteStructure(html.trim());
+    return htmlNode.innerHTML;
+  }
+
+  /**
+   * Paste HTML into the editor. Defaults to converting HTML to BlockNote HTML.
+   * @param html The HTML to paste.
+   * @param raw Whether to paste the HTML as is, or to convert it to BlockNote HTML.
+   */
+  public pasteHTML(html: string, raw = false) {
+    let htmlToPaste = html;
+    if (!raw) {
+      htmlToPaste = this.convertHtmlToBlockNoteHtml(html);
+    }
+    if (!htmlToPaste) {
+      return;
+    }
+    this.prosemirrorView?.pasteHTML(htmlToPaste);
+  }
+
+  /**
+   * Paste text into the editor. Defaults to interpreting text as markdown.
+   * @param text The text to paste.
+   */
+  public pasteText(text: string) {
+    return this.prosemirrorView?.pasteText(text);
+  }
+
+  /**
+   * Paste markdown into the editor.
+   * @param markdown The markdown to paste.
+   */
+  public async pasteMarkdown(markdown: string) {
+    return this.pasteHTML(await markdownToHTML(markdown));
+  }
 }

package/src/editor/BlockNoteExtensions.ts

@@ -1,6 +1,5 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
-import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
@@ -17,6 +16,7 @@ import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
 import type { ThreadStore } from "../comments/index.js";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin.js";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin.js";
+import { HardBreak } from "../extensions/HardBreak/HardBreak.js";
 import { KeyboardShortcutsExtension } from "../extensions/KeyboardShortcuts/KeyboardShortcutsExtension.js";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin.js";
 import {
@@ -44,7 +44,11 @@ import {
   StyleSchema,
   StyleSpecs,
 } from "../schema/index.js";
-import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
+import type {
+  BlockNoteEditor,
+  BlockNoteEditorOptions,
+  BlockNoteExtension,
+} from "./BlockNoteEditor.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -82,6 +86,7 @@ type ExtensionOptions<
   comments?: {
     threadStore: ThreadStore;
   };
+  pasteHandler: BlockNoteEditorOptions<any, any, any>["pasteHandler"];
 };
 
 /**
@@ -179,7 +184,7 @@ const getTipTapExtensions = <
       types: ["blockContainer", "columnList", "column"],
       setIdAttribute: opts.setIdAttribute,
     }),
-    HardBreak.extend({ priority: 10 }),
+    HardBreak,
     // Comments,
 
     // basics:
@@ -258,7 +263,16 @@ const getTipTapExtensions = <
       ];
     }),
     createCopyToClipboardExtension(opts.editor),
-    createPasteFromClipboardExtension(opts.editor),
+    createPasteFromClipboardExtension(
+      opts.editor,
+      opts.pasteHandler ||
+        ((context: {
+          defaultPasteHandler: (context?: {
+            prioritizeMarkdownOverHTML?: boolean;
+            plainTextAsMarkdown?: boolean;
+          }) => boolean | undefined;
+        }) => context.defaultPasteHandler())
+    ),
     createDropFileExtension(opts.editor),
 
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),

package/src/extensions/Comments/CommentsPlugin.ts

@@ -106,7 +106,7 @@ export class CommentsPlugin extends EventEmitter<any> {
               pos + node.nodeSize,
               ttEditor.state.doc.content.size - 1
             );
-            tr.removeMark(trimmedFrom, trimmedTo, markType);
+            tr.removeMark(trimmedFrom, trimmedTo, mark);
             tr.addMark(
               trimmedFrom,
               trimmedTo,

package/src/extensions/HardBreak/HardBreak.ts

@@ -0,0 +1,35 @@
+// Stripped down version of the TipTap HardBreak extension:
+// https://github.com/ueberdosis/tiptap/blob/f3258d9ee5fb7979102fe63434f6ea4120507311/packages/extension-hard-break/src/hard-break.ts#L80
+// Changes:
+// - Removed options
+// - Removed keyboard shortcuts & moved them to the `KeyboardShortcutsExtension`
+// - Removed `setHardBreak` command (added a simpler version in the Shift+Enter
+// handler in `KeyboardShortcutsExtension`).
+// - Added priority
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export const HardBreak = Node.create({
+  name: "hardBreak",
+
+  inline: true,
+
+  group: "inline",
+
+  selectable: false,
+
+  linebreakReplacement: true,
+
+  priority: 10,
+
+  parseHTML() {
+    return [{ tag: "br" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["br", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  renderText() {
+    return "\n";
+  },
+});

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -260,6 +260,73 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             return true;
           }),
+        // Deletes the current block if it's an empty block with inline content,
+        // and moves the selection to the previous block.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const blockEmpty =
+              blockInfo.blockContent.node.childCount === 0 &&
+              blockInfo.blockContent.node.type.spec.content === "inline*";
+
+            if (blockEmpty) {
+              const prevBlockInfo = getPrevBlockInfo(
+                state.doc,
+                blockInfo.bnBlock.beforePos
+              );
+              if (!prevBlockInfo || !prevBlockInfo.isBlockContainer) {
+                return false;
+              }
+
+              let chainedCommands = chain();
+
+              if (
+                prevBlockInfo.blockContent.node.type.spec.content ===
+                "tableRow+"
+              ) {
+                const tableBlockEndPos = blockInfo.bnBlock.beforePos - 1;
+                const tableBlockContentEndPos = tableBlockEndPos - 1;
+                const lastRowEndPos = tableBlockContentEndPos - 1;
+                const lastCellEndPos = lastRowEndPos - 1;
+                const lastCellParagraphEndPos = lastCellEndPos - 1;
+
+                chainedCommands = chainedCommands.setTextSelection(
+                  lastCellParagraphEndPos
+                );
+              } else if (
+                prevBlockInfo.blockContent.node.type.spec.content === ""
+              ) {
+                const nonEditableBlockContentStartPos =
+                  prevBlockInfo.blockContent.afterPos -
+                  prevBlockInfo.blockContent.node.nodeSize;
+
+                chainedCommands = chainedCommands.setNodeSelection(
+                  nonEditableBlockContentStartPos
+                );
+              } else {
+                const blockContentStartPos =
+                  prevBlockInfo.blockContent.afterPos -
+                  prevBlockInfo.blockContent.node.nodeSize;
+
+                chainedCommands =
+                  chainedCommands.setTextSelection(blockContentStartPos);
+              }
+
+              return chainedCommands
+                .deleteRange({
+                  from: blockInfo.bnBlock.beforePos,
+                  to: blockInfo.bnBlock.afterPos,
+                })
+                .scrollIntoView()
+                .run();
+            }
+
+            return false;
+          }),
         // Deletes previous block if it contains no content and isn't a table,
         // when the selection is empty and at the start of the block. Moves the
         // current block into the deleted block's place.
@@ -370,8 +437,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
           }),
       ]);
 
-    const handleEnter = () =>
-      this.editor.commands.first(({ commands }) => [
+    const handleEnter = (withShift = false) => {
+      return this.editor.commands.first(({ commands }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
         // of the block.
         () =>
@@ -400,6 +467,34 @@ export const KeyboardShortcutsExtension = Extension.create<{
               return commands.liftListItem("blockContainer");
             }
 
+            return false;
+          }),
+        // Creates a hard break if block is configured to do so.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+
+            const blockHardBreakShortcut: "shift+enter" | "enter" | "none" =
+              this.options.editor.schema.blockSchema[blockInfo.blockNoteType]
+                .hardBreakShortcut ?? "shift+enter";
+
+            if (blockHardBreakShortcut === "none") {
+              return false;
+            }
+
+            if (
+              // If shortcut is not configured, or is configured as "shift+enter",
+              // create a hard break for shift+enter, but not for enter.
+              (blockHardBreakShortcut === "shift+enter" && withShift) ||
+              // If shortcut is configured as "enter", create a hard break for
+              // both enter and shift+enter.
+              blockHardBreakShortcut === "enter"
+            ) {
+              return commands.insertContent({
+                type: "hardBreak",
+              });
+            }
+
             return false;
           }),
         // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
@@ -471,11 +566,13 @@ export const KeyboardShortcutsExtension = Extension.create<{
             return false;
           }),
       ]);
+    };
 
     return {
       Backspace: handleBackspace,
       Delete: handleDelete,
-      Enter: handleEnter,
+      Enter: () => handleEnter(),
+      "Shift-Enter": () => handleEnter(true),
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
       // editor since the browser will try to use tab for keyboard navigation.
       Tab: () => {

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -86,7 +86,9 @@ class SuggestionMenuView<
     this.pluginState = stopped ? prev : next;
 
     if (stopped || !this.editor.isEditable) {
-      this.state!.show = false;
+      if (this.state) {
+        this.state.show = false;
+      }
       this.emitUpdate(this.pluginState!.triggerCharacter);
 
       return;

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -125,6 +125,18 @@ export function getDefaultSlashMenuItems<
     );
   }
 
+  if (checkDefaultBlockTypeInSchema("quote", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "quote",
+        });
+      },
+      key: "quote",
+      ...editor.dictionary.slash_menu.quote,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
       onItemClick: () => {

package/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export * from "./locales/index.js";
+export * from "./dictionary.js";

package/src/i18n/locales/ar.ts

@@ -20,6 +20,12 @@ export const ar: Dictionary = {
       aliases: ["ع3", "عنوان3", "عنوان فرعي"],
       group: "العناوين",
     },
+    quote: {
+      title: "اقتباس",
+      subtext: "اقتباس أو مقتطف",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "الكتل الأساسية",
+    },
     numbered_list: {
       title: "قائمة مرقمة",
       subtext: "تستخدم لعرض قائمة مرقمة",

package/src/i18n/locales/de.ts

@@ -20,6 +20,12 @@ export const de: Dictionary = {
       aliases: ["h3", "überschrift3", "unterüberschrift"],
       group: "Überschriften",
     },
+    quote: {
+      title: "Zitat",
+      subtext: "Zitat oder Auszug",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grundlegende blöcke",
+    },
     numbered_list: {
       title: "Nummerierte Liste",
       subtext: "Liste mit nummerierten Elementen",

package/src/i18n/locales/en.ts

@@ -18,6 +18,12 @@ export const en = {
       aliases: ["h3", "heading3", "subheading"],
       group: "Headings",
     },
+    quote: {
+      title: "Quote",
+      subtext: "Quote or excerpt",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Basic blocks",
+    },
     numbered_list: {
       title: "Numbered List",
       subtext: "List with ordered items",

package/src/i18n/locales/es.ts

@@ -20,6 +20,12 @@ export const es: Dictionary = {
       aliases: ["h3", "encabezado3", "subencabezado"],
       group: "Encabezados",
     },
+    quote: {
+      title: "Cita",
+      subtext: "Cita o extracto",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Bloques básicos",
+    },
     numbered_list: {
       title: "Lista Numerada",
       subtext: "Lista con elementos ordenados",

package/src/i18n/locales/fr.ts

@@ -21,6 +21,12 @@ export const fr: Dictionary = {
       aliases: ["h3", "titre3", "sous-titre"],
       group: "Titres",
     },
+    quote: {
+      title: "Citation",
+      subtext: "Citation ou extrait",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Blocs de base",
+    },
     numbered_list: {
       title: "Liste Numérotée",
       subtext: "Utilisé pour afficher une liste numérotée",

package/src/i18n/locales/hr.ts

@@ -20,6 +20,12 @@ export const hr: Dictionary = {
       aliases: ["h3", "naslov3", "podnaslov"],
       group: "Naslovi",
     },
+    quote: {
+      title: "Citat",
+      subtext: "Citat ili izvadak",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Osnovni blokovi",
+    },
     numbered_list: {
       title: "Numerirani popis",
       subtext: "Popis s numeriranim stavkama",

package/src/i18n/locales/is.ts

@@ -20,6 +20,12 @@ export const is: Dictionary = {
       aliases: ["h3", "fyrirsogn3", "undirfyrirsogn"],
       group: "Fyrirsagnir",
     },
+    quote: {
+      title: "Tilvitnun",
+      subtext: "Tilvitnun eða útdráttur",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grunnblokkar",
+    },
     numbered_list: {
       title: "Númeruð listi",
       subtext: "Notað til að birta númeraðan lista",

package/src/i18n/locales/it.ts

@@ -20,6 +20,12 @@ export const it: Dictionary = {
       aliases: ["h3", "intestazione3", "sottotitolo"],
       group: "Intestazioni",
     },
+    quote: {
+      title: "Citazione",
+      subtext: "Citazione o estratto",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Blocchi Base",
+    },
     numbered_list: {
       title: "Elenco Numerato",
       subtext: "Elenco con elementi ordinati",

package/src/i18n/locales/ja.ts

@@ -20,6 +20,12 @@ export const ja: Dictionary = {
       aliases: ["h3", "見出し3", "subheading", "小見出し"],
       group: "見出し",
     },
+    quote: {
+      title: "引用",
+      subtext: "引用または抜粋",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "基本ブロック",
+    },
     numbered_list: {
       title: "番号付リスト",
       subtext: "番号付リストを表示するために使用",

package/src/i18n/locales/ko.ts

@@ -20,6 +20,12 @@ export const ko: Dictionary = {
       aliases: ["h3", "제목3", "subheading"],
       group: "제목",
     },
+    quote: {
+      title: "인용",
+      subtext: "인용문 또는 발췌",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "기본 블록",
+    },
     numbered_list: {
       title: "번호 매기기 목록",
       subtext: "번호가 매겨진 목록을 추가합니다.",

package/src/i18n/locales/nl.ts

@@ -20,6 +20,12 @@ export const nl: Dictionary = {
       aliases: ["h3", "kop3", "subkop"],
       group: "Koppen",
     },
+    quote: {
+      title: "Citaat",
+      subtext: "Citaat of uittreksel",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Basisblokken",
+    },
     numbered_list: {
       title: "Genummerde Lijst",
       subtext: "Gebruikt om een genummerde lijst weer te geven",

package/src/i18n/locales/no.ts

@@ -20,6 +20,12 @@ export const no: Dictionary = {
       aliases: ["h3", "overskrift3", "underoverskrift"],
       group: "Overskrifter",
     },
+    quote: {
+      title: "Sitat",
+      subtext: "Sitat eller utdrag",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Grunnleggende blokker",
+    },
     numbered_list: {
       title: "Nummerert liste",
       subtext: "Liste med ordnede elementer",

package/src/i18n/locales/pl.ts

@@ -20,6 +20,12 @@ export const pl: Dictionary = {
       aliases: ["h3", "naglowek3", "podnaglowek"],
       group: "Nagłówki",
     },
+    quote: {
+      title: "Cytat",
+      subtext: "Cytat lub fragment",
+      aliases: ["quotation", "blockquote", "bq"],
+      group: "Podstawowe bloki",
+    },
     numbered_list: {
       title: "Lista numerowana",
       subtext: "Używana do wyświetlania listy numerowanej",