@blocknote/core 0.9.5 → 0.9.6

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d1720576466e2d32ebbfaff43a7a5e6f6333a600"
+  "gitHead": "7f4c6fd01941eef3b5ba5c3e670b02768322e482"
 }

package/src/BlockNoteEditor.ts

@@ -140,7 +140,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   };
 
   // tiptap options, undocumented
-  _tiptapOptions: any;
+  _tiptapOptions: Partial<EditorOptions>;
 };
 
 const blockNoteTipTapOptions = {
@@ -228,10 +228,11 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
             },
           ]);
 
-    const tiptapOptions: EditorOptions = {
+    const tiptapOptions: Partial<EditorOptions> = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       onBeforeCreate(editor) {
+        newOptions._tiptapOptions?.onBeforeCreate?.(editor);
         if (!initialContent) {
           // when using collaboration
           return;
@@ -250,7 +251,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         );
         editor.editor.options.content = root.toJSON();
       },
-      onCreate: () => {
+      onCreate: (editor) => {
+        newOptions._tiptapOptions?.onCreate?.(editor);
         // We need to wait for the TipTap editor to init before we can set the
         // initial content, as the schema may contain custom blocks which need
         // it to render.
@@ -261,7 +263,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         newOptions.onEditorReady?.(this);
         this.ready = true;
       },
-      onUpdate: () => {
+      onUpdate: (editor) => {
+        newOptions._tiptapOptions?.onUpdate?.(editor);
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
         if (!this.ready) {
@@ -270,7 +273,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
         newOptions.onEditorContentChange?.(this);
       },
-      onSelectionUpdate: () => {
+      onSelectionUpdate: (editor) => {
+        newOptions._tiptapOptions?.onSelectionUpdate?.(editor);
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583
         if (!this.ready) {
@@ -279,17 +283,25 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
         newOptions.onTextCursorPositionChange?.(this);
       },
-      editable: options.editable === undefined ? true : options.editable,
+      editable:
+        options.editable !== undefined
+          ? options.editable
+          : newOptions._tiptapOptions?.editable !== undefined
+          ? newOptions._tiptapOptions?.editable
+          : true,
       extensions:
         newOptions.enableBlockNoteExtensions === false
-          ? newOptions._tiptapOptions?.extensions
+          ? newOptions._tiptapOptions?.extensions || []
           : [...(newOptions._tiptapOptions?.extensions || []), ...extensions],
       editorProps: {
+        ...newOptions._tiptapOptions?.editorProps,
         attributes: {
+          ...newOptions._tiptapOptions?.editorProps?.attributes,
           ...newOptions.domAttributes?.editor,
           class: mergeCSSClasses(
             styles.bnEditor,
             styles.bnRoot,
+            newOptions.domAttributes?.editor?.class || "",
             newOptions.defaultStyles ? styles.defaultStyles : "",
             newOptions.domAttributes?.editor?.class || ""
           ),

package/src/api/nodeConversions/nodeConversions.ts

@@ -5,7 +5,6 @@ import {
   BlockSchema,
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
-import { defaultProps } from "../../extensions/Blocks/api/defaultProps";
 import {
   ColorStyle,
   InlineContent,
@@ -394,18 +393,6 @@ export function nodeToBlock<BSchema extends BlockSchema>(
     if (attr in propSchema) {
       props[attr] = value;
     }
-    // Block ids are stored as node attributes the same way props are, so we
-    // need to ensure we don't attempt to read block ids as props.
-
-    // the second check is for the backgroundColor & textColor props.
-    // Since we want them to be inherited by child blocks, we can't put them on the blockContent node,
-    // and instead have to put them on the blockContainer node.
-    // The blockContainer node is the same for all block types, but some custom blocks might not use backgroundColor & textColor,
-    // so these 2 props are technically unexpected but we shouldn't log a warning.
-    // (this is a bit hacky)
-    else if (attr !== "id" && !(attr in defaultProps)) {
-      console.warn("Block has an unrecognized attribute: " + attr);
-    }
   }
 
   const blockSpec = blockSchema[blockInfo.contentType.name];

package/src/extensions/Blocks/nodes/Block.module.css

@@ -23,6 +23,7 @@ BASIC STYLES
   padding: 3px 0;
   flex-grow: 1;
   transition: font-size 0.2s;
+  width: 100%;
   /*
   because the content elements are display: block
   we use flex to position them next to list markers
@@ -287,10 +288,6 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="image"] .imageWrapper:hover .resizeHandle {
-  display: block;
-}
-
 [data-content-type="image"] .caption {
   font-size: 0.8em
 }

package/src/extensions/Blocks/nodes/BlockContent/ImageBlockContent/ImageBlockContent.ts

@@ -225,6 +225,34 @@ const renderImage = (
     );
   };
 
+  // Shows the resize handles when hovering over the image with the cursor.
+  const imageMouseEnterHandler = () => {
+    if (editor.isEditable) {
+      leftResizeHandle.style.display = "block";
+      rightResizeHandle.style.display = "block";
+    } else {
+      leftResizeHandle.style.display = "none";
+      rightResizeHandle.style.display = "none";
+    }
+  };
+  // Hides the resize handles when the cursor leaves the image, unless the
+  // cursor moves to one of the resize handles.
+  const imageMouseLeaveHandler = (event: MouseEvent) => {
+    if (
+      event.relatedTarget === leftResizeHandle ||
+      event.relatedTarget === rightResizeHandle
+    ) {
+      return;
+    }
+
+    if (resizeParams) {
+      return;
+    }
+
+    leftResizeHandle.style.display = "none";
+    rightResizeHandle.style.display = "none";
+  };
+
   // Sets the resize params, allowing the user to begin resizing the image by
   // moving the cursor left or right.
   const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
@@ -266,6 +294,8 @@ const renderImage = (
   window.addEventListener("mouseup", windowMouseUpHandler);
   addImageButton.addEventListener("mousedown", addImageButtonMouseDownHandler);
   addImageButton.addEventListener("click", addImageButtonClickHandler);
+  image.addEventListener("mouseenter", imageMouseEnterHandler);
+  image.addEventListener("mouseleave", imageMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
     leftResizeHandleMouseDownHandler

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -265,6 +265,8 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
     // Makes menu scroll with the page.
     document.addEventListener("scroll", this.onScroll);
 
+    // Unfreezes the menu whenever the user clicks anywhere.
+    document.body.addEventListener("mousedown", this.onMouseDown, true);
     // Hides and unfreezes the menu whenever the user presses a key.
     document.body.addEventListener("keydown", this.onKeyDown, true);
   }
@@ -347,6 +349,14 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
     this.menuFrozen = false;
   };
 
+  onMouseDown = (_event: MouseEvent) => {
+    if (this.sideMenuState && !this.sideMenuState.show) {
+      this.sideMenuState.show = true;
+      this.updateSideMenu(this.sideMenuState);
+    }
+    this.menuFrozen = false;
+  };
+
   onMouseMove = (event: MouseEvent) => {
     if (this.menuFrozen) {
       return;
@@ -479,6 +489,7 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
     this.pmView.dom.removeEventListener("dragstart", this.onDragStart);
     document.body.removeEventListener("drop", this.onDrop, true);
     document.removeEventListener("scroll", this.onScroll);
+    document.body.removeEventListener("mousedown", this.onMouseDown, true);
     document.body.removeEventListener("keydown", this.onKeyDown, true);
   }
 

package/types/src/BlockNoteEditor.d.ts

@@ -1,3 +1,4 @@
+import { EditorOptions } from "@tiptap/core";
 import { Node } from "prosemirror-model";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
 import * as Y from "yjs";
@@ -93,7 +94,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
          */
         renderCursor?: (user: any) => HTMLElement;
     };
-    _tiptapOptions: any;
+    _tiptapOptions: Partial<EditorOptions>;
 };
 export declare class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     private readonly options;

package/types/src/extensions/SideMenu/SideMenuPlugin.d.ts

@@ -36,6 +36,7 @@ export declare class SideMenuView<BSchema extends BlockSchema> implements Plugin
      */
     onDragOver: (event: DragEvent) => void;
     onKeyDown: (_event: KeyboardEvent) => void;
+    onMouseDown: (_event: MouseEvent) => void;
     onMouseMove: (event: MouseEvent) => void;
     onScroll: () => void;
     destroy(): void;