@blocknote/core 0.9.4 → 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.4",
+  "version": "0.9.6",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "31e3c53bdcc082e3793bbb5517462cc18abd9e22"
+  "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/api/block.ts

@@ -38,7 +38,39 @@ export function propsToAttributes<
       // Props are displayed in kebab-case as HTML attributes. If a prop's
       // value is the same as its default, we don't display an HTML
       // attribute for it.
-      parseHTML: (element) => element.getAttribute(camelToDataKebab(name)),
+      parseHTML: (element) => {
+        const value = element.getAttribute(camelToDataKebab(name));
+
+        if (value === null) {
+          return null;
+        }
+
+        if (typeof spec.default === "boolean") {
+          if (value === "true") {
+            return true;
+          }
+
+          if (value === "false") {
+            return false;
+          }
+
+          return null;
+        }
+
+        if (typeof spec.default === "number") {
+          const asNumber = parseFloat(value);
+          const isNumeric =
+            !Number.isNaN(asNumber) && Number.isFinite(asNumber);
+
+          if (isNumeric) {
+            return asNumber;
+          }
+
+          return null;
+        }
+
+        return value;
+      },
       renderHTML: (attributes) =>
         attributes[name] !== spec.default
           ? {

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/BlockContainer.ts

@@ -485,6 +485,51 @@ export const BlockContainer = Node.create<{
           }),
       ]);
 
+    const handleDelete = () =>
+      this.editor.commands.first(({ commands }) => [
+        // Deletes the selection if it's not empty.
+        () => commands.deleteSelection(),
+        // Merges block with the next one (at the same nesting level or lower),
+        // if one exists, the block has no children, and the selection is at the
+        // end of the block.
+        () =>
+          commands.command(({ state }) => {
+            const { node, contentNode, depth, endPos } = getBlockInfoFromPos(
+              state.doc,
+              state.selection.from
+            )!;
+
+            const blockAtDocEnd = false;
+            const selectionAtBlockEnd =
+              state.selection.$anchor.parentOffset ===
+              contentNode.firstChild!.nodeSize;
+            const selectionEmpty =
+              state.selection.anchor === state.selection.head;
+            const hasChildBlocks = node.childCount === 2;
+
+            if (
+              !blockAtDocEnd &&
+              selectionAtBlockEnd &&
+              selectionEmpty &&
+              !hasChildBlocks
+            ) {
+              let oldDepth = depth;
+              let newPos = endPos + 2;
+              let newDepth = state.doc.resolve(newPos).depth;
+
+              while (newDepth < oldDepth) {
+                oldDepth = newDepth;
+                newPos += 2;
+                newDepth = state.doc.resolve(newPos).depth;
+              }
+
+              return commands.BNMergeBlocks(newPos - 1);
+            }
+
+            return false;
+          }),
+      ]);
+
     const handleEnter = () =>
       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
@@ -552,12 +597,14 @@ export const BlockContainer = Node.create<{
               state.selection.from
             )!;
 
+            const selectionAtBlockStart =
+              state.selection.$anchor.parentOffset === 0;
             const blockEmpty = node.textContent.length === 0;
 
             if (!blockEmpty) {
               chain()
                 .deleteSelection()
-                .BNSplitBlock(state.selection.from, false)
+                .BNSplitBlock(state.selection.from, selectionAtBlockStart)
                 .run();
 
               return true;
@@ -569,6 +616,7 @@ export const BlockContainer = Node.create<{
 
     return {
       Backspace: handleBackspace,
+      Delete: handleDelete,
       Enter: handleEnter,
       // 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.

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/src/shared/plugins/suggestion/SuggestionPlugin.ts

@@ -346,6 +346,10 @@ export const setupSuggestionsMenu = <
 
           // Selects an item and closes the menu.
           if (event.key === "Enter") {
+            if (items.length === 0) {
+              return true;
+            }
+
             deactivate(view);
             editor._tiptapEditor
               .chain()

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;

package/types/src/extensions/Blocks/nodes/BlockContent/ImageBlockContent/Image.d.ts

@@ -1,6 +0,0 @@
-import "@uppy/core/dist/style.css";
-import "@uppy/dashboard/dist/style.css";
-import "@uppy/drag-drop/dist/style.css";
-import "@uppy/file-input/dist/style.css";
-import "@uppy/progress-bar/dist/style.css";
-export declare const Image: BlockSpec<BType, PSchema, ContainsInlineContent>;

package/types/src/extensions/Blocks/nodes/BlockContent/ImageBlockContent/uploadToTmpFilesOrg_DEV_ONLY.d.ts

@@ -1 +0,0 @@
-export declare const uploadToTmpFilesOrg: (file: File) => Promise<any>;