Merge branch 'main' into new-releases

Author: matthewlipski

packages/core/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 || ""
           ),

packages/core/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];

packages/core/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
 }

packages/core/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

packages/core/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);
   }
 

packages/react/src/BlockNoteTheme.ts

@@ -39,6 +39,10 @@ export type ComponentStyles = Partial<{
   // Menu to edit hyperlinks (in Formatting Toolbar & Hyperlink Toolbar)
   EditHyperlinkMenu: CSSObject;
   Editor: CSSObject;
+  // Used in the Image Toolbar
+  FileInput: CSSObject;
+  Tabs: CSSObject;
+  TextInput: CSSObject;
   // Wraps Formatting Toolbar & Hyperlink Toolbar
   Toolbar: CSSObject;
   // Appears on hover for Formatting Toolbar
@@ -129,10 +133,13 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       Tabs: {
         styles: () => ({
-          root: {
-            width: "100%",
-            backgroundColor: theme.colors.menu.background,
-          },
+          root: _.merge<CSSObject, CSSObject>(
+            {
+              width: "100%",
+              backgroundColor: theme.colors.menu.background,
+            },
+            theme.componentStyles?.(theme).Tabs || {}
+          ),
           tabsList: {
             borderColor: theme.colors.hovered.background,
           },
@@ -166,6 +173,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       FileInput: {
         styles: () => ({
+          root: theme.componentStyles?.(theme).FileInput || {},
           input: {
             color: theme.colors.menu.text,
             backgroundColor: theme.colors.menu.background,
@@ -191,6 +199,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       TextInput: {
         styles: () => ({
+          root: theme.componentStyles?.(theme).TextInput || {},
           input: {
             color: theme.colors.menu.text,
             backgroundColor: theme.colors.menu.background,

packages/website/docs/.vitepress/config.ts

@@ -133,6 +133,10 @@ const EXAMPLES_SIDEBAR = [
         text: "Saving & Loading",
         link: "/examples/saving-loading",
       },
+      {
+        text: "Changing Font",
+        link: "/examples/changing-font",
+      },
     ],
   },
   {

packages/website/docs/docs/block-types.md

@@ -262,7 +262,7 @@ img {
 ::: info
 While custom blocks open a lot of doors for what you can do with BlockNote, we're still working on the API and there are a few limitations for the kinds of blocks you can create.
 
-We'd love to hear your feedback on Github or in our Discord community!
+We'd love to hear your feedback on GitHub or in our Discord community!
 :::
 
 ### Creating a Custom Block Type

packages/website/docs/docs/image-toolbar.md

@@ -35,15 +35,18 @@ You can use the provided `uploadToTempFilesOrg` function to as a starting point,
 ::: sandbox {template=react-ts}
 
 ```typescript-vue /App.tsx
-import { BlockNoteEditor, uploadToTmpFilesOrg } from "@blocknote/core";
+import {
+  BlockNoteEditor,
+  uploadToTmpFilesDotOrg_DEV_ONLY,
+} from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
     // Sets the example file upload handler.
-    uploadFile: uploadToTmpFilesOrg,
+    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
   });
 
   return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;

packages/website/docs/docs/slash-menu.md

@@ -77,7 +77,6 @@ export default function App() {
   // Renders the editor instance.
   return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
-
 ```
 
 ```css-vue /styles.css [hidden]

packages/website/docs/docs/theming.md

@@ -37,7 +37,6 @@ import "@blocknote/core/style.css";
 
 // Custom red light theme
 const lightRedTheme = {
-  type: "light",
   colors: {
     editor: {
       text: "#222222",
@@ -75,7 +74,6 @@ const lightRedTheme = {
 // Custom red dark theme
 const darkRedTheme = {
   ...lightRedTheme,
-  type: "dark",
   colors: {
     ...lightRedTheme.colors,
     editor: {
@@ -247,6 +245,12 @@ There are a number of components that you can override styles for:
 
 `Editor:` The editor itself, excluding menus & toolbars.
 
+`FileInput:` Component used for file inputs in the Image Toolbar.
+
+`Tabs:` Component used for tabs in the Image Toolbar.
+
+`TextInput:` Component used for text inputs in the Image Toolbar.
+
 `Toolbar:` Component used for the [Formatting Toolbar](/docs/formatting-toolbar), Hyperlink Toolbar, and [Image Toolbar](/docs/image-toolbar).
 
 `Tooltip:` Component for the tooltip that appears on hover, for Formatting Toolbar & Hyperlink Toolbar buttons.

packages/website/docs/docs/ui-elements.md

@@ -116,7 +116,7 @@ export default function App() {
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor} theme={"light"}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />