@blocknote/core 0.8.0 → 0.8.2

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -36,6 +36,8 @@ class HyperlinkToolbarView {
   hyperlinkMark: Mark | undefined;
   hyperlinkMarkRange: Range | undefined;
 
+  private lastPosition: DOMRect | undefined;
+
   constructor({ editor, hyperlinkToolbarFactory }: HyperlinkToolbarViewProps) {
     this.editor = editor;
 
@@ -57,7 +59,7 @@ class HyperlinkToolbarView {
     };
 
     this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler);
-    document.addEventListener("scroll", this.scrollHandler);
+    document.addEventListener("click", this.clickHandler, true);
   }
 
   mouseOverHandler = (event: MouseEvent) => {
@@ -101,9 +103,21 @@ class HyperlinkToolbarView {
     return false;
   };
 
-  scrollHandler = () => {
-    if (this.hyperlinkMark !== undefined) {
-      this.hyperlinkToolbar.render(this.getDynamicParams(), false);
+  clickHandler = (event: MouseEvent) => {
+    if (
+      // Toolbar is open.
+      this.hyperlinkMark &&
+      // An element is clicked.
+      event &&
+      event.target &&
+      // Element is outside the editor.
+      this.editor.view.dom !== (event.target as Node) &&
+      !this.editor.view.dom.contains(event.target as Node) &&
+      // Element is outside the toolbar.
+      this.hyperlinkToolbar.element !== (event.target as Node) &&
+      !this.hyperlinkToolbar.element?.contains(event.target as Node)
+    ) {
+      this.hyperlinkToolbar.hide();
     }
   };
 
@@ -201,7 +215,6 @@ class HyperlinkToolbarView {
       "mouseover",
       this.mouseOverHandler
     );
-    document.removeEventListener("scroll", this.scrollHandler);
   }
 
   getStaticParams(): HyperlinkToolbarStaticParams {
@@ -236,6 +249,26 @@ class HyperlinkToolbarView {
 
         this.hyperlinkToolbar.hide();
       },
+      getReferenceRect: () => {
+        if (!this.hyperlinkMark) {
+          if (this.lastPosition === undefined) {
+            throw new Error(
+              "Attempted to access hyperlink reference rect before rendering hyperlink toolbar."
+            );
+          }
+
+          return this.lastPosition;
+        }
+
+        const hyperlinkBoundingBox = posToDOMRect(
+          this.editor.view,
+          this.hyperlinkMarkRange!.from,
+          this.hyperlinkMarkRange!.to
+        );
+        this.lastPosition = hyperlinkBoundingBox;
+
+        return hyperlinkBoundingBox;
+      },
     };
   }
 
@@ -246,11 +279,6 @@ class HyperlinkToolbarView {
         this.hyperlinkMarkRange!.from,
         this.hyperlinkMarkRange!.to
       ),
-      referenceRect: posToDOMRect(
-        this.editor.view,
-        this.hyperlinkMarkRange!.from,
-        this.hyperlinkMarkRange!.to
-      ),
     };
   }
 }

package/src/shared/EditorElement.ts

@@ -1,7 +1,7 @@
-export type RequiredStaticParams = Record<string, any>;
-export type RequiredDynamicParams = Record<string, any> & {
-  referenceRect: DOMRect;
+export type RequiredStaticParams = Record<string, any> & {
+  getReferenceRect: () => DOMRect;
 };
+export type RequiredDynamicParams = Record<string, any> & {};
 
 export type EditorElement<ElementDynamicParams extends RequiredDynamicParams> =
   {

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

@@ -107,6 +107,8 @@ class SuggestionPluginView<
   pluginState: SuggestionPluginState<T>;
   itemCallback: (item: T) => void;
 
+  private lastPosition: DOMRect | undefined;
+
   constructor({
     editor,
     pluginKey,
@@ -137,16 +139,8 @@ class SuggestionPluginView<
     };
 
     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);
@@ -188,25 +182,37 @@ class SuggestionPluginView<
     }
   }
 
-  destroy() {
-    document.removeEventListener("scroll", this.handleScroll);
-  }
-
   getStaticParams(): SuggestionsMenuStaticParams<T> {
     return {
       itemCallback: (item: T) => this.itemCallback(item),
+      getReferenceRect: () => {
+        const decorationNode = document.querySelector(
+          `[data-decoration-id="${this.pluginState.decorationId}"]`
+        );
+
+        if (!decorationNode) {
+          if (this.lastPosition === undefined) {
+            throw new Error(
+              "Attempted to access trigger character reference rect before rendering suggestions menu."
+            );
+          }
+
+          return this.lastPosition;
+        }
+
+        const triggerCharacterBoundingBox =
+          decorationNode.getBoundingClientRect();
+        this.lastPosition = triggerCharacterBoundingBox;
+
+        return triggerCharacterBoundingBox;
+      },
     };
   }
 
   getDynamicParams(): SuggestionsMenuDynamicParams<T> {
-    const decorationNode = document.querySelector(
-      `[data-decoration-id="${this.pluginState.decorationId}"]`
-    );
-
     return {
       items: this.pluginState.items,
       keyboardHoveredItemIndex: this.pluginState.keyboardHoveredItemIndex!,
-      referenceRect: decorationNode!.getBoundingClientRect(),
     };
   }
 }

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

@@ -3,13 +3,13 @@ import { SuggestionItem } from "./SuggestionItem";
 
 export type SuggestionsMenuStaticParams<T extends SuggestionItem> = {
   itemCallback: (item: T) => void;
+
+  getReferenceRect: () => DOMRect;
 };
 
 export type SuggestionsMenuDynamicParams<T extends SuggestionItem> = {
   items: T[];
   keyboardHoveredItemIndex: number;
-
-  referenceRect: DOMRect;
 };
 
 export type SuggestionsMenu<T extends SuggestionItem> = EditorElement<

package/types/src/BlockNoteEditor.d.ts

@@ -104,7 +104,9 @@ export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockS
     };
     blockCache: WeakMap<Node, Block<BSchema>>;
     readonly schema: BSchema;
+    private ready;
     get domElement(): HTMLDivElement;
+    isFocused(): boolean;
     focus(): void;
     constructor(options?: Partial<BlockNoteEditorOptions<BSchema>>);
     /**

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

@@ -8,10 +8,10 @@ export type BlockSideMenuStaticParams<BSchema extends BlockSchema> = {
     blockDragEnd: () => void;
     freezeMenu: () => void;
     unfreezeMenu: () => void;
+    getReferenceRect: () => DOMRect;
 };
 export type BlockSideMenuDynamicParams<BSchema extends BlockSchema> = {
     block: Block<BSchema>;
-    referenceRect: DOMRect;
 };
 export type BlockSideMenu<BSchema extends BlockSchema> = EditorElement<BlockSideMenuDynamicParams<BSchema>>;
 export type BlockSideMenuFactory<BSchema extends BlockSchema> = ElementFactory<BlockSideMenuStaticParams<BSchema>, BlockSideMenuDynamicParams<BSchema>>;

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

@@ -20,6 +20,7 @@ export declare class BlockMenuView<BSchema extends BlockSchema> {
     isDragging: boolean;
     menuOpen: boolean;
     menuFrozen: boolean;
+    private lastPosition;
     constructor({ tiptapEditor, editor, blockMenuFactory, horizontalPosAnchoredAtRoot, }: BlockMenuViewProps<BSchema>);
     /**
      * Sets isDragging when dragging text.
@@ -32,7 +33,7 @@ export declare class BlockMenuView<BSchema extends BlockSchema> {
      */
     onDrop: (event: DragEvent) => void;
     /**
-     * If the event is outside of the editor contents,
+     * If the event is outside the editor contents,
      * we dispatch a fake event, so that we can still drop the content
      * when dragging / dropping to the side of the editor
      */
@@ -40,7 +41,6 @@ export declare class BlockMenuView<BSchema extends BlockSchema> {
     onKeyDown: (_event: KeyboardEvent) => void;
     onMouseDown: (event: MouseEvent) => void;
     onMouseMove: (event: MouseEvent) => void;
-    onScroll: () => void;
     destroy(): void;
     addBlock(): void;
     getStaticParams(): BlockSideMenuStaticParams<BSchema>;

package/types/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.d.ts

@@ -3,9 +3,8 @@ import { BlockNoteEditor } from "../../BlockNoteEditor";
 import { BlockSchema } from "../Blocks/api/blockTypes";
 export type FormattingToolbarStaticParams<BSchema extends BlockSchema> = {
     editor: BlockNoteEditor<BSchema>;
+    getReferenceRect: () => DOMRect;
 };
-export type FormattingToolbarDynamicParams = {
-    referenceRect: DOMRect;
-};
+export type FormattingToolbarDynamicParams = {};
 export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
 export type FormattingToolbarFactory<BSchema extends BlockSchema> = ElementFactory<FormattingToolbarStaticParams<BSchema>, FormattingToolbarDynamicParams>;

package/types/src/extensions/FormattingToolbar/FormattingToolbarPlugin.d.ts

@@ -2,7 +2,7 @@ import { Editor } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { BlockNoteEditor, BlockSchema } from "../..";
-import { FormattingToolbar, FormattingToolbarDynamicParams, FormattingToolbarFactory, FormattingToolbarStaticParams } from "./FormattingToolbarFactoryTypes";
+import { FormattingToolbar, FormattingToolbarFactory, FormattingToolbarStaticParams } from "./FormattingToolbarFactoryTypes";
 export interface FormattingToolbarPluginProps<BSchema extends BlockSchema> {
     pluginKey: PluginKey;
     tiptapEditor: Editor;
@@ -21,6 +21,7 @@ export declare class FormattingToolbarView<BSchema extends BlockSchema> {
     preventShow: boolean;
     toolbarIsOpen: boolean;
     prevWasEditable: boolean | null;
+    private lastPosition;
     shouldShow: (props: {
         view: EditorView;
         state: EditorState;
@@ -35,11 +36,9 @@ export declare class FormattingToolbarView<BSchema extends BlockSchema> {
     blurHandler: ({ event }: {
         event: FocusEvent;
     }) => void;
-    scrollHandler: () => void;
     update(view: EditorView, oldState?: EditorState): void;
     destroy(): void;
     getSelectionBoundingBox(): DOMRect;
     getStaticParams(): FormattingToolbarStaticParams<BSchema>;
-    getDynamicParams(): FormattingToolbarDynamicParams;
 }
 export declare const createFormattingToolbarPlugin: <BSchema extends Record<string, import("../..").BlockSpec<string, import("../..").PropSchema>>>(options: FormattingToolbarPluginProps<BSchema>) => Plugin<any>;

package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.d.ts

@@ -2,11 +2,11 @@ import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 export type HyperlinkToolbarStaticParams = {
     editHyperlink: (url: string, text: string) => void;
     deleteHyperlink: () => void;
+    getReferenceRect: () => DOMRect;
 };
 export type HyperlinkToolbarDynamicParams = {
     url: string;
     text: string;
-    referenceRect: DOMRect;
 };
 export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;
 export type HyperlinkToolbarFactory = ElementFactory<HyperlinkToolbarStaticParams, HyperlinkToolbarDynamicParams>;

package/types/src/extensions/Placeholder/localisation/index.d.ts

@@ -0,0 +1,2 @@
+import i18next from "i18next";
+export default i18next;

package/types/src/extensions/Placeholder/localisation/translation.d.ts

@@ -0,0 +1,51 @@
+export declare const translation: {
+    en: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    de: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    it: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    es: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    fr: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    fi: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+    sv: {
+        translation: {
+            placeholder: string;
+            heading: string;
+            list: string;
+        };
+    };
+};

package/types/src/shared/EditorElement.d.ts

@@ -1,7 +1,7 @@
-export type RequiredStaticParams = Record<string, any>;
-export type RequiredDynamicParams = Record<string, any> & {
-    referenceRect: DOMRect;
+export type RequiredStaticParams = Record<string, any> & {
+    getReferenceRect: () => DOMRect;
 };
+export type RequiredDynamicParams = Record<string, any> & {};
 export type EditorElement<ElementDynamicParams extends RequiredDynamicParams> = {
     element: HTMLElement | undefined;
     render: (params: ElementDynamicParams, isHidden: boolean) => void;

package/types/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.d.ts

@@ -2,11 +2,11 @@ import { EditorElement, ElementFactory } from "../../EditorElement";
 import { SuggestionItem } from "./SuggestionItem";
 export type SuggestionsMenuStaticParams<T extends SuggestionItem> = {
     itemCallback: (item: T) => void;
+    getReferenceRect: () => DOMRect;
 };
 export type SuggestionsMenuDynamicParams<T extends SuggestionItem> = {
     items: T[];
     keyboardHoveredItemIndex: number;
-    referenceRect: DOMRect;
 };
 export type SuggestionsMenu<T extends SuggestionItem> = EditorElement<SuggestionsMenuDynamicParams<T>>;
 export type SuggestionsMenuFactory<T extends SuggestionItem> = ElementFactory<SuggestionsMenuStaticParams<T>, SuggestionsMenuDynamicParams<T>>;

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

@@ -1,13 +0,0 @@
-export declare const Alert: import("./blockTypes").BlockSpec<"alert", {
-    readonly textAlignment: {
-        default: "left";
-        values: readonly ["left", "center", "right", "justify"];
-    };
-    readonly textColor: {
-        default: "black";
-    };
-    readonly type: {
-        readonly default: "warning";
-        readonly values: readonly ["warning", "error", "info", "success"];
-    };
-}>;

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

@@ -1,13 +0,0 @@
-export declare const Alert2: import("./blockTypes").BlockSpec<"alert2", {
-    readonly textAlignment: {
-        default: "left";
-        values: readonly ["left", "center", "right", "justify"];
-    };
-    readonly textColor: {
-        default: "black";
-    };
-    readonly type: {
-        readonly default: "warning";
-        readonly values: readonly ["warning", "error", "info", "success"];
-    };
-}>;