@blocknote/core 0.5.1 → 0.6.2

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -6,8 +6,7 @@ import {
 } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Block, PartialBlock } from "../Blocks/api/blockTypes";
-import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { BlockNoteEditor } from "../..";
 import {
   FormattingToolbar,
   FormattingToolbarDynamicParams,
@@ -19,11 +18,12 @@ import {
 // https://github.com/ueberdosis/tiptap/pull/2596/files
 export interface FormattingToolbarPluginProps {
   pluginKey: PluginKey;
-  editor: Editor;
+  tiptapEditor: Editor;
+  editor: BlockNoteEditor;
   formattingToolbarFactory: FormattingToolbarFactory;
   shouldShow?:
     | ((props: {
-        editor: Editor;
+        editor: BlockNoteEditor;
         view: EditorView;
         state: EditorState;
         oldState?: EditorState;
@@ -38,7 +38,8 @@ export type FormattingToolbarViewProps = FormattingToolbarPluginProps & {
 };
 
 export class FormattingToolbarView {
-  public editor: Editor;
+  public editor: BlockNoteEditor;
+  private ttEditor: Editor;
 
   public view: EditorView;
 
@@ -50,6 +51,8 @@ export class FormattingToolbarView {
 
   public toolbarIsOpen = false;
 
+  public prevWasEditable: boolean | null = null;
+
   public shouldShow: Exclude<FormattingToolbarPluginProps["shouldShow"], null> =
     ({ view, state, from, to }) => {
       const { doc, selection } = state;
@@ -66,11 +69,13 @@ export class FormattingToolbarView {
 
   constructor({
     editor,
+    tiptapEditor,
     formattingToolbarFactory,
     view,
     shouldShow,
   }: FormattingToolbarViewProps) {
     this.editor = editor;
+    this.ttEditor = tiptapEditor;
     this.view = view;
 
     this.formattingToolbar = formattingToolbarFactory(this.getStaticParams());
@@ -83,8 +88,10 @@ export class FormattingToolbarView {
     this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
 
-    this.editor.on("focus", this.focusHandler);
-    this.editor.on("blur", this.blurHandler);
+    this.ttEditor.on("focus", this.focusHandler);
+    this.ttEditor.on("blur", this.blurHandler);
+    
+    document.addEventListener("scroll", this.scrollHandler);
   }
 
   viewMousedownHandler = () => {
@@ -93,7 +100,7 @@ export class FormattingToolbarView {
 
   viewMouseupHandler = () => {
     this.preventShow = false;
-    setTimeout(() => this.update(this.editor.view));
+    setTimeout(() => this.update(this.ttEditor.view));
   };
 
   dragstartHandler = () => {
@@ -103,7 +110,7 @@ export class FormattingToolbarView {
 
   focusHandler = () => {
     // we use `setTimeout` to make sure `selection` is already updated
-    setTimeout(() => this.update(this.editor.view));
+    setTimeout(() => this.update(this.ttEditor.view));
   };
 
   blurHandler = ({ event }: { event: FocusEvent }) => {
@@ -128,16 +135,28 @@ export class FormattingToolbarView {
     }
   };
 
+  scrollHandler = () => {
+    if (this.toolbarIsOpen) {
+      this.formattingToolbar.render(this.getDynamicParams(), false);
+    }
+  };
+
   update(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view;
     const { doc, selection } = state;
     const isSame =
       oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
-    if (composing || isSame) {
+    if (
+      (this.prevWasEditable === null ||
+        this.prevWasEditable === this.editor.isEditable) &&
+      (composing || isSame)
+    ) {
       return;
     }
 
+    this.prevWasEditable = this.editor.isEditable;
+
     // support for CellSelections
     const { ranges } = selection;
     const from = Math.min(...ranges.map((range) => range.$from.pos));
@@ -154,6 +173,7 @@ export class FormattingToolbarView {
 
     // Checks if menu should be shown.
     if (
+      this.editor.isEditable &&
       !this.toolbarIsOpen &&
       !this.preventShow &&
       (shouldShow || this.preventHide)
@@ -184,7 +204,7 @@ export class FormattingToolbarView {
     if (
       this.toolbarIsOpen &&
       !this.preventHide &&
-      (!shouldShow || this.preventShow)
+      (!shouldShow || this.preventShow || !this.editor.isEditable)
     ) {
       this.formattingToolbar.hide();
       this.toolbarIsOpen = false;
@@ -204,12 +224,14 @@ export class FormattingToolbarView {
     this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
 
-    this.editor.off("focus", this.focusHandler);
-    this.editor.off("blur", this.blurHandler);
+    this.ttEditor.off("focus", this.focusHandler);
+    this.ttEditor.off("blur", this.blurHandler);
+
+    document.removeEventListener("scroll", this.scrollHandler);
   }
 
   getSelectionBoundingBox() {
-    const { state } = this.editor.view;
+    const { state } = this.ttEditor.view;
     const { selection } = state;
 
     // support for CellSelections
@@ -218,120 +240,24 @@ export class FormattingToolbarView {
     const to = Math.max(...ranges.map((range) => range.$to.pos));
 
     if (isNodeSelection(selection)) {
-      const node = this.editor.view.nodeDOM(from) as HTMLElement;
+      const node = this.ttEditor.view.nodeDOM(from) as HTMLElement;
 
       if (node) {
         return node.getBoundingClientRect();
       }
     }
 
-    return posToDOMRect(this.editor.view, from, to);
+    return posToDOMRect(this.ttEditor.view, from, to);
   }
 
   getStaticParams(): FormattingToolbarStaticParams {
     return {
-      toggleBold: () => {
-        this.editor.view.focus();
-        this.editor.commands.toggleBold();
-      },
-      toggleItalic: () => {
-        this.editor.view.focus();
-        this.editor.commands.toggleItalic();
-      },
-      toggleUnderline: () => {
-        this.editor.view.focus();
-        this.editor.commands.toggleUnderline();
-      },
-      toggleStrike: () => {
-        this.editor.view.focus();
-        this.editor.commands.toggleStrike();
-      },
-      setHyperlink: (url: string, text?: string) => {
-        if (url === "") {
-          return;
-        }
-
-        let { from, to } = this.editor.state.selection;
-
-        if (!text) {
-          text = this.editor.state.doc.textBetween(from, to);
-        }
-
-        const mark = this.editor.schema.mark("link", { href: url });
-
-        this.editor.view.dispatch(
-          this.editor.view.state.tr
-            .insertText(text, from, to)
-            .addMark(from, from + text.length, mark)
-        );
-        this.editor.view.focus();
-      },
-      setTextColor: (color: string) => {
-        this.editor.view.focus();
-        this.editor.commands.setTextColor(color);
-      },
-      setBackgroundColor: (color: string) => {
-        this.editor.view.focus();
-        this.editor.commands.setBackgroundColor(color);
-      },
-      setTextAlignment: (
-        textAlignment: "left" | "center" | "right" | "justify"
-      ) => {
-        this.editor.view.focus();
-        this.editor.commands.setTextAlignment(textAlignment);
-      },
-      increaseBlockIndent: () => {
-        this.editor.view.focus();
-        this.editor.commands.sinkListItem("blockContainer");
-      },
-      decreaseBlockIndent: () => {
-        this.editor.view.focus();
-        this.editor.commands.liftListItem("blockContainer");
-      },
-      updateBlock: (updatedBlock: PartialBlock) => {
-        this.editor.view.focus();
-        this.editor.commands.BNUpdateBlock(
-          this.editor.state.selection.from,
-          updatedBlock
-        );
-      },
+      editor: this.editor,
     };
   }
 
   getDynamicParams(): FormattingToolbarDynamicParams {
-    const blockInfo = getBlockInfoFromPos(
-      this.editor.state.doc,
-      this.editor.state.selection.from
-    )!;
-
     return {
-      boldIsActive: this.editor.isActive("bold"),
-      italicIsActive: this.editor.isActive("italic"),
-      underlineIsActive: this.editor.isActive("underline"),
-      strikeIsActive: this.editor.isActive("strike"),
-      hyperlinkIsActive: this.editor.isActive("link"),
-      activeHyperlinkUrl: this.editor.getAttributes("link").href || "",
-      activeHyperlinkText: this.editor.state.doc.textBetween(
-        this.editor.state.selection.from,
-        this.editor.state.selection.to
-      ),
-      textColor: this.editor.getAttributes("textColor").color || "default",
-      backgroundColor:
-        this.editor.getAttributes("backgroundColor").color || "default",
-      textAlignment:
-        this.editor.getAttributes(blockInfo.contentType).textAlignment ||
-        "left",
-      canIncreaseBlockIndent:
-        this.editor.state.doc
-          .resolve(blockInfo.startPos)
-          .index(blockInfo.depth - 1) > 0,
-      canDecreaseBlockIndent: blockInfo.depth > 2,
-      // Needs type cast as there is no way to create a type that dynamically updates based on which extensions are
-      // loaded by the editor.
-      block: {
-        type: blockInfo.contentType.name,
-        props: blockInfo.contentNode.attrs,
-      } as Block,
       referenceRect: this.getSelectionBoundingBox(),
     };
   }

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -56,47 +56,56 @@ class HyperlinkToolbarView {
       return false;
     };
 
-    editor.view.dom.addEventListener("mouseover", (event) => {
-      // Resets the hyperlink mark currently hovered by the mouse cursor.
-      this.mouseHoveredHyperlinkMark = undefined;
-      this.mouseHoveredHyperlinkMarkRange = undefined;
-
-      this.stopMenuUpdateTimer();
-
-      if (
-        event.target instanceof HTMLAnchorElement &&
-        event.target.nodeName === "A"
-      ) {
-        // Finds link mark at the hovered element's position to update mouseHoveredHyperlinkMark and
-        // mouseHoveredHyperlinkMarkRange.
-        const hoveredHyperlinkElement = event.target;
-        const posInHoveredHyperlinkMark =
-          editor.view.posAtDOM(hoveredHyperlinkElement, 0) + 1;
-        const resolvedPosInHoveredHyperlinkMark = editor.state.doc.resolve(
-          posInHoveredHyperlinkMark
-        );
-        const marksAtPos = resolvedPosInHoveredHyperlinkMark.marks();
-
-        for (const mark of marksAtPos) {
-          if (mark.type.name === editor.schema.mark("link").type.name) {
-            this.mouseHoveredHyperlinkMark = mark;
-            this.mouseHoveredHyperlinkMarkRange =
-              getMarkRange(
-                resolvedPosInHoveredHyperlinkMark,
-                mark.type,
-                mark.attrs
-              ) || undefined;
-
-            break;
-          }
+    this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler);
+    document.addEventListener("scroll", this.scrollHandler);
+  }
+
+  mouseOverHandler = (event: MouseEvent) => {
+    // Resets the hyperlink mark currently hovered by the mouse cursor.
+    this.mouseHoveredHyperlinkMark = undefined;
+    this.mouseHoveredHyperlinkMarkRange = undefined;
+
+    this.stopMenuUpdateTimer();
+
+    if (
+      event.target instanceof HTMLAnchorElement &&
+      event.target.nodeName === "A"
+    ) {
+      // Finds link mark at the hovered element's position to update mouseHoveredHyperlinkMark and
+      // mouseHoveredHyperlinkMarkRange.
+      const hoveredHyperlinkElement = event.target;
+      const posInHoveredHyperlinkMark =
+        this.editor.view.posAtDOM(hoveredHyperlinkElement, 0) + 1;
+      const resolvedPosInHoveredHyperlinkMark = this.editor.state.doc.resolve(
+        posInHoveredHyperlinkMark
+      );
+      const marksAtPos = resolvedPosInHoveredHyperlinkMark.marks();
+
+      for (const mark of marksAtPos) {
+        if (mark.type.name === this.editor.schema.mark("link").type.name) {
+          this.mouseHoveredHyperlinkMark = mark;
+          this.mouseHoveredHyperlinkMarkRange =
+            getMarkRange(
+              resolvedPosInHoveredHyperlinkMark,
+              mark.type,
+              mark.attrs
+            ) || undefined;
+
+          break;
         }
       }
+    }
 
-      this.startMenuUpdateTimer();
+    this.startMenuUpdateTimer();
 
-      return false;
-    });
-  }
+    return false;
+  };
+
+  scrollHandler = () => {
+    if (this.hyperlinkMark !== undefined) {
+      this.hyperlinkToolbar.render(this.getDynamicParams(), false);
+    }
+  };
 
   update() {
     if (!this.editor.view.hasFocus()) {
@@ -145,7 +154,7 @@ class HyperlinkToolbarView {
       this.hyperlinkMarkRange = this.keyboardHoveredHyperlinkMarkRange;
     }
 
-    if (this.hyperlinkMark) {
+    if (this.hyperlinkMark && this.editor.isEditable) {
       this.getDynamicParams();
 
       // Shows menu.
@@ -171,7 +180,7 @@ class HyperlinkToolbarView {
     }
 
     // Hides menu.
-    if (!this.hyperlinkMark && prevHyperlinkMark) {
+    if (prevHyperlinkMark && (!this.hyperlinkMark || !this.editor.isEditable)) {
       this.hyperlinkToolbar.element?.removeEventListener(
         "mouseleave",
         this.startMenuUpdateTimer
@@ -187,6 +196,14 @@ class HyperlinkToolbarView {
     }
   }
 
+  destroy() {
+    this.editor.view.dom.removeEventListener(
+      "mouseover",
+      this.mouseOverHandler
+    );
+    document.removeEventListener("scroll", this.scrollHandler);
+  }
+
   getStaticParams(): HyperlinkToolbarStaticParams {
     return {
       editHyperlink: (url: string, text: string) => {

package/src/extensions/UniqueID/UniqueID.ts

@@ -60,7 +60,7 @@ const UniqueID = Extension.create({
             (window as any).__TEST_OPTIONS.mockID++;
           }
 
-          return parseInt((window as any).__TEST_OPTIONS.mockID);
+          return (window as any).__TEST_OPTIONS.mockID.toString() as string;
         }
 
         return v4();

package/src/index.ts

@@ -9,3 +9,4 @@ export * from "./extensions/SlashMenu/BaseSlashMenuItem";
 export * from "./shared/EditorElement";
 export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
 export * from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
+export * from "./extensions/Blocks/api/inlineContentTypes";

package/src/shared/plugins/suggestion/SuggestionPlugin.ts

@@ -127,8 +127,16 @@ class SuggestionPluginView<T extends SuggestionItem> {
     };
 
     this.suggestionsMenu = suggestionsMenuFactory(this.getStaticParams());
+
+    document.addEventListener("scroll", this.handleScroll);
   }
 
+  handleScroll = () => {
+    if (this.pluginKey.getState(this.editor._tiptapEditor.state).active) {
+      this.suggestionsMenu.render(this.getDynamicParams(), false);
+    }
+  };
+
   update(view: EditorView, prevState: EditorState) {
     const prev = this.pluginKey.getState(prevState);
     const next = this.pluginKey.getState(view.state);
@@ -147,7 +155,7 @@ class SuggestionPluginView<T extends SuggestionItem> {
 
     this.pluginState = stopped ? prev : next;
 
-    if (stopped) {
+    if (stopped || !this.editor.isEditable) {
       this.suggestionsMenu.hide();
 
       // Listener stops focus moving to the menu on click.
@@ -160,7 +168,7 @@ class SuggestionPluginView<T extends SuggestionItem> {
       this.suggestionsMenu.render(this.getDynamicParams(), false);
     }
 
-    if (started) {
+    if (started && this.editor.isEditable) {
       this.suggestionsMenu.render(this.getDynamicParams(), true);
 
       // Listener stops focus moving to the menu on click.
@@ -170,6 +178,10 @@ class SuggestionPluginView<T extends SuggestionItem> {
     }
   }
 
+  destroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+  }
+
   getStaticParams(): SuggestionsMenuStaticParams<T> {
     return {
       itemCallback: (item: T) => this.itemCallback(item),

package/types/src/BlockNoteEditor.d.ts

@@ -1,13 +1,16 @@
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import { UiFactories } from "./BlockNoteExtensions";
 import { Block, BlockIdentifier, PartialBlock } from "./extensions/Blocks/api/blockTypes";
+import { Styles } from "./extensions/Blocks/api/inlineContentTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
+import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { BaseSlashMenuItem } from "./extensions/SlashMenu";
 export type BlockNoteEditorOptions = {
     enableBlockNoteExtensions: boolean;
     disableHistoryExtension: boolean;
     /**
-     * Factories used to create a custom UI for BlockNote
+     * UI element factories for creating a custom UI, including custom positioning
+     * & rendering.
      */
     uiFactories: UiFactories;
     /**
@@ -40,6 +43,13 @@ export type BlockNoteEditorOptions = {
      * A callback function that runs whenever the text cursor position changes.
      */
     onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
+    /**
+     * Locks the editor from being editable by the user if set to `false`.
+     */
+    editable: boolean;
+    /**
+     * The content that should be in the editor when it's created, represented as an array of partial block objects.
+     */
     initialContent: PartialBlock[];
     /**
      * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
@@ -47,6 +57,12 @@ export type BlockNoteEditorOptions = {
      * @default true
      */
     defaultStyles: boolean;
+    /**
+     * Whether to use the light or dark theme.
+     *
+     * @default "light"
+     */
+    theme: "light" | "dark";
     _tiptapOptions: any;
 };
 export declare class BlockNoteEditor {
@@ -55,6 +71,7 @@ export declare class BlockNoteEditor {
     };
     private blockCache;
     get domElement(): HTMLDivElement;
+    focus(): void;
     constructor(options?: Partial<BlockNoteEditorOptions>);
     /**
      * Gets a snapshot of all top-level (non-nested) blocks in the editor.
@@ -85,6 +102,20 @@ export declare class BlockNoteEditor {
      * @param placement Whether the text cursor should be placed at the start or end of the block.
      */
     setTextCursorPosition(targetBlock: BlockIdentifier, placement?: "start" | "end"): void;
+    /**
+     * Gets a snapshot of the current selection.
+     */
+    getSelection(): Selection | undefined;
+    /**
+     * Checks if the editor is currently editable, or if it's locked.
+     * @returns True if the editor is editable, false otherwise.
+     */
+    get isEditable(): boolean;
+    /**
+     * Makes the editor editable or locks it, depending on the argument passed.
+     * @param editable True to make the editor editable, or false to lock it.
+     */
+    set isEditable(editable: boolean);
     /**
      * Inserts new blocks into the editor. If a block's `id` is undefined, BlockNote generates one automatically. Throws an
      * error if the reference block could not be found.
@@ -115,6 +146,55 @@ export declare class BlockNoteEditor {
      * @param blocksToInsert An array of partial blocks to replace the old ones with.
      */
     replaceBlocks(blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock[]): void;
+    /**
+     * Gets the active text styles at the text cursor position or at the end of the current selection if it's active.
+     */
+    getActiveStyles(): Styles;
+    /**
+     * Adds styles to the currently selected content.
+     * @param styles The styles to add.
+     */
+    addStyles(styles: Styles): void;
+    /**
+     * Removes styles from the currently selected content.
+     * @param styles The styles to remove.
+     */
+    removeStyles(styles: Styles): void;
+    /**
+     * Toggles styles on the currently selected content.
+     * @param styles The styles to toggle.
+     */
+    toggleStyles(styles: Styles): void;
+    /**
+     * Gets the currently selected text.
+     */
+    getSelectedText(): string;
+    /**
+     * Gets the URL of the last link in the current selection, or `undefined` if there are no links in the selection.
+     */
+    getSelectedLinkUrl(): 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.
+     */
+    createLink(url: string, text?: string): void;
+    /**
+     * Checks if the block containing the text cursor can be nested.
+     */
+    canNestBlock(): boolean;
+    /**
+     * Nests the block containing the text cursor into the block above it.
+     */
+    nestBlock(): void;
+    /**
+     * Checks if the block containing the text cursor is nested.
+     */
+    canUnnestBlock(): boolean;
+    /**
+     * Lifts the block containing the text cursor out of its parent.
+     */
+    unnestBlock(): void;
     /**
      * Serializes blocks into an HTML string. To better conform to HTML standards, children of blocks which aren't list
      * items are un-nested in the output HTML.

package/types/src/extensions/Blocks/api/inlineContentTypes.d.ts

@@ -3,13 +3,14 @@ export type Styles = {
     italic?: true;
     underline?: true;
     strike?: true;
+    code?: true;
     textColor?: string;
     backgroundColor?: string;
 };
-export type ToggledStyles = {
+export type ToggledStyle = {
     [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
 }[keyof Styles];
-export type ColorStyles = {
+export type ColorStyle = {
     [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
 }[keyof Styles];
 export type StyledText = {

package/types/src/extensions/Blocks/api/selectionTypes.d.ts

@@ -0,0 +1,4 @@
+import { Block } from "./blockTypes";
+export type Selection = {
+    blocks: Block[];
+};

package/types/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.d.ts

@@ -1,17 +1,16 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { Block } from "../Blocks/api/blockTypes";
 export type BlockSideMenuStaticParams = {
+    editor: BlockNoteEditor;
     addBlock: () => void;
-    deleteBlock: () => void;
     blockDragStart: (event: DragEvent) => void;
     blockDragEnd: () => void;
     freezeMenu: () => void;
     unfreezeMenu: () => void;
-    setBlockTextColor: (color: string) => void;
-    setBlockBackgroundColor: (color: string) => void;
 };
 export type BlockSideMenuDynamicParams = {
-    blockTextColor: string;
-    blockBackgroundColor: string;
+    block: Block;
     referenceRect: DOMRect;
 };
 export type BlockSideMenu = EditorElement<BlockSideMenuDynamicParams>;

package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts

@@ -1,7 +1,9 @@
 import { Editor, Extension } from "@tiptap/core";
 import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 export type DraggableBlocksOptions = {
-    editor: Editor;
+    tiptapEditor: Editor;
+    editor: BlockNoteEditor;
     blockSideMenuFactory: BlockSideMenuFactory;
 };
 /**