Merge branch 'main' into new-releases

Author: matthewlipski

packages/core/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -192,18 +192,42 @@ export const BlockContainer = Node.create<{
               );
             }
 
-            // Changes the blockContent node type and adds the provided props as attributes. Also preserves all existing
-            // attributes that are compatible with the new type.
-            state.tr.setNodeMarkup(
-              startPos,
-              block.type === undefined
-                ? undefined
-                : state.schema.nodes[block.type],
-              {
-                ...contentNode.attrs,
-                ...block.props,
-              }
-            );
+            // Since some block types contain inline content and others don't,
+            // we either need to call setNodeMarkup to just update type &
+            // attributes, or replaceWith to replace the whole blockContent.
+            const oldType = contentNode.type.name;
+            const newType = block.type || oldType;
+
+            const oldContentType = state.schema.nodes[oldType].spec.content;
+            const newContentType = state.schema.nodes[newType].spec.content;
+
+            if (oldContentType === "inline*" && newContentType === "") {
+              // Replaces the blockContent node with one of the new type and
+              // adds the provided props as attributes. Also preserves all
+              // existing attributes that are compatible with the new type.
+              state.tr.replaceWith(
+                startPos,
+                endPos,
+                state.schema.nodes[newType].create({
+                  ...contentNode.attrs,
+                  ...block.props,
+                })
+              );
+            } else {
+              // Changes the blockContent node type and adds the provided props
+              // as attributes. Also preserves all existing attributes that are
+              // compatible with the new type.
+              state.tr.setNodeMarkup(
+                startPos,
+                block.type === undefined
+                  ? undefined
+                  : state.schema.nodes[block.type],
+                {
+                  ...contentNode.attrs,
+                  ...block.props,
+                }
+              );
+            }
 
             // Adds all provided props as attributes to the parent blockContainer node too, and also preserves existing
             // attributes.

packages/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts

@@ -73,6 +73,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
+        ...blockContentDOMAttributes,
         class: mergeCSSClasses(
           styles.blockContent,
           blockContentDOMAttributes.class
@@ -82,6 +83,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
       [
         "h" + node.attrs.level,
         {
+          ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
             styles.inlineContent,
             inlineContentDOMAttributes.class

packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -91,6 +91,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
+        ...blockContentDOMAttributes,
         class: mergeCSSClasses(
           styles.blockContent,
           blockContentDOMAttributes.class
@@ -100,6 +101,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
       [
         "p",
         {
+          ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
             styles.inlineContent,
             inlineContentDOMAttributes.class

packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -115,6 +115,7 @@ export const NumberedListItemBlockContent =
       return [
         "div",
         mergeAttributes(HTMLAttributes, {
+          ...blockContentDOMAttributes,
           class: mergeCSSClasses(
             styles.blockContent,
             blockContentDOMAttributes.class
@@ -126,6 +127,7 @@ export const NumberedListItemBlockContent =
         [
           "p",
           {
+            ...inlineContentDOMAttributes,
             class: mergeCSSClasses(
               styles.inlineContent,
               inlineContentDOMAttributes.class

packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -64,7 +64,19 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
             if (!lastNode || lastNode.type.name !== "blockContainer") {
               throw new Error("Expected blockContainer");
             }
-            return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
+
+            const lastContentNode = lastNode.firstChild;
+
+            if (!lastContentNode) {
+              throw new Error("Expected blockContent");
+            }
+
+            // If last node is not empty (size > 4) or it doesn't contain
+            // inline content, we need to add a trailing node.
+            return (
+              lastNode.nodeSize > 4 ||
+              lastContentNode.type.spec.content !== "inline*"
+            );
           },
         },
       }),

packages/react/src/BlockNoteTheme.ts

@@ -41,7 +41,8 @@ export type ComponentStyles = Partial<{
   Editor: CSSObject;
   // Wraps Formatting Toolbar & Hyperlink Toolbar
   Toolbar: CSSObject;
-  // Appears on hover for Formatting Toolbar & Hyperlink Toolbar buttons
+  // Appears on hover for Formatting Toolbar
+  // & Hyperlink Toolbar buttons
   Tooltip: CSSObject;
   SlashMenu: CSSObject;
   SideMenu: CSSObject;
@@ -105,6 +106,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
               boxShadow: shadow,
               color: theme.colors.menu.text,
               padding: "2px",
+              overflowY: "scroll",
               ".mantine-Menu-label": {
                 backgroundColor: theme.colors.menu.background,
                 color: theme.colors.menu.text,

packages/react/src/FormattingToolbar/components/DefaultButtons/ColorStyleButton.tsx

@@ -6,6 +6,7 @@ import { ColorIcon } from "../../../SharedComponents/ColorPicker/components/Colo
 import { ColorPicker } from "../../../SharedComponents/ColorPicker/components/ColorPicker";
 import { useEditorContentChange } from "../../../hooks/useEditorContentChange";
 import { useEditorSelectionChange } from "../../../hooks/useEditorSelectionChange";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
@@ -51,8 +52,10 @@ export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
     [props.editor]
   );
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   return (
-    <Menu>
+    <Menu onOpen={updateMaxHeight}>
       <Menu.Target>
         <ToolbarButton
           mainTooltip={"Colors"}
@@ -65,14 +68,16 @@ export const ColorStyleButton = <BSchema extends BlockSchema>(props: {
           )}
         />
       </Menu.Target>
-      <Menu.Dropdown>
-        <ColorPicker
-          textColor={currentTextColor}
-          setTextColor={setTextColor}
-          backgroundColor={currentBackgroundColor}
-          setBackgroundColor={setBackgroundColor}
-        />
-      </Menu.Dropdown>
+      <div ref={ref}>
+        <Menu.Dropdown>
+          <ColorPicker
+            textColor={currentTextColor}
+            setTextColor={setTextColor}
+            backgroundColor={currentBackgroundColor}
+            setBackgroundColor={setBackgroundColor}
+          />
+        </Menu.Dropdown>
+      </div>
     </Menu>
   );
 };

packages/react/src/FormattingToolbar/components/DefaultDropdowns/BlockTypeDropdown.tsx

@@ -1,5 +1,10 @@
 import { useMemo, useState } from "react";
-import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
+import {
+  Block,
+  BlockNoteEditor,
+  BlockSchema,
+  PartialBlock,
+} from "@blocknote/core";
 import { IconType } from "react-icons";
 import {
   RiH1,
@@ -20,41 +25,57 @@ export type BlockTypeDropdownItem = {
   type: string;
   props?: Record<string, string>;
   icon: IconType;
+  isSelected: (block: Block<BlockSchema>) => boolean;
 };
 
 export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
   {
     name: "Paragraph",
     type: "paragraph",
     icon: RiText,
+    isSelected: (block) => block.type === "paragraph",
   },
   {
     name: "Heading 1",
     type: "heading",
     props: { level: "1" },
     icon: RiH1,
+    isSelected: (block) =>
+      block.type === "heading" &&
+      "level" in block.props &&
+      block.props.level === "1",
   },
   {
     name: "Heading 2",
     type: "heading",
     props: { level: "2" },
     icon: RiH2,
+    isSelected: (block) =>
+      block.type === "heading" &&
+      "level" in block.props &&
+      block.props.level === "2",
   },
   {
     name: "Heading 3",
     type: "heading",
     props: { level: "3" },
     icon: RiH3,
+    isSelected: (block) =>
+      block.type === "heading" &&
+      "level" in block.props &&
+      block.props.level === "3",
   },
   {
     name: "Bullet List",
     type: "bulletListItem",
     icon: RiListUnordered,
+    isSelected: (block) => block.type === "bulletListItem",
   },
   {
     name: "Numbered List",
     type: "numberedListItem",
     icon: RiListOrdered,
+    isSelected: (block) => block.type === "numberedListItem",
   },
 ];
 
@@ -100,22 +121,22 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
     [block.type, filteredItems]
   );
 
-  const fullItems: ToolbarDropdownItemProps[] = useMemo(
-    () =>
-      filteredItems.map((item) => ({
-        text: item.name,
-        icon: item.icon,
-        onClick: () => {
-          props.editor.focus();
-          props.editor.updateBlock(block, {
-            type: item.type,
-            props: {},
-          });
-        },
-        isSelected: block.type === item.type,
-      })),
-    [block, filteredItems, props.editor]
-  );
+  const fullItems: ToolbarDropdownItemProps[] = useMemo(() => {
+    const onClick = (item: BlockTypeDropdownItem) => {
+      props.editor.focus();
+      props.editor.updateBlock(block, {
+        type: item.type,
+        props: item.props,
+      } as PartialBlock<BlockSchema>);
+    };
+
+    return filteredItems.map((item) => ({
+      text: item.name,
+      icon: item.icon,
+      onClick: () => onClick(item),
+      isSelected: item.isSelected(block as Block<BlockSchema>),
+    }));
+  }, [block, filteredItems, props.editor]);
 
   useEditorContentChange(props.editor, () => {
     setBlock(props.editor.getTextCursorPosition().block);

packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx

@@ -4,6 +4,7 @@ import {
   ToolbarDropdownItemProps,
 } from "./ToolbarDropdownItem";
 import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export type ToolbarDropdownProps = {
   items: ToolbarDropdownItemProps[];
@@ -13,24 +14,31 @@ export type ToolbarDropdownProps = {
 export function ToolbarDropdown(props: ToolbarDropdownProps) {
   const selectedItem = props.items.filter((p) => p.isSelected)[0];
 
+  const { ref, updateMaxHeight } = usePreventMenuOverflow();
+
   if (!selectedItem) {
     return null;
   }
 
   return (
-    <Menu exitTransitionDuration={0} disabled={props.isDisabled}>
+    <Menu
+      exitTransitionDuration={0}
+      disabled={props.isDisabled}
+      onOpen={updateMaxHeight}>
       <Menu.Target>
         <ToolbarDropdownTarget
           text={selectedItem.text}
           icon={selectedItem.icon}
           isDisabled={selectedItem.isDisabled}
         />
       </Menu.Target>
-      <Menu.Dropdown>
-        {props.items.map((item) => (
-          <ToolbarDropdownItem key={item.text} {...item} />
-        ))}
-      </Menu.Dropdown>
+      <div ref={ref}>
+        <Menu.Dropdown>
+          {props.items.map((item) => (
+            <ToolbarDropdownItem key={item.text} {...item} />
+          ))}
+        </Menu.Dropdown>
+      </div>
     </Menu>
   );
 }