Merge branch 'main' into new-releases

Author: matthewlipski

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

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

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

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

@@ -18,6 +18,7 @@ import {
 import { ToolbarDropdown } from "../../../SharedComponents/Toolbar/components/ToolbarDropdown";
 import { ToolbarDropdownItemProps } from "../../../SharedComponents/Toolbar/components/ToolbarDropdownItem";
 import { useEditorChange } from "../../../hooks/useEditorChange";
+import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
 
 export type BlockTypeDropdownItem = {
   name: string;
@@ -42,7 +43,7 @@ export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
     isSelected: (block) =>
       block.type === "heading" &&
       "level" in block.props &&
-      block.props.level === "1",
+      block.props.level === 1,
   },
   {
     name: "Heading 2",
@@ -52,7 +53,7 @@ export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
     isSelected: (block) =>
       block.type === "heading" &&
       "level" in block.props &&
-      block.props.level === "2",
+      block.props.level === 2,
   },
   {
     name: "Heading 3",
@@ -62,7 +63,7 @@ export const defaultBlockTypeDropdownItems: BlockTypeDropdownItem[] = [
     isSelected: (block) =>
       block.type === "heading" &&
       "level" in block.props &&
-      block.props.level === "3",
+      block.props.level === 3,
   },
   {
     name: "Bullet List",
@@ -82,6 +83,8 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
   items?: BlockTypeDropdownItem[];
 }) => {
+  const selectedBlocks = useSelectedBlocks(props.editor);
+
   const [block, setBlock] = useState(
     props.editor.getTextCursorPosition().block
   );
@@ -123,10 +126,13 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
   const fullItems: ToolbarDropdownItemProps[] = useMemo(() => {
     const onClick = (item: BlockTypeDropdownItem) => {
       props.editor.focus();
-      props.editor.updateBlock(block, {
-        type: item.type,
-        props: item.props,
-      } as PartialBlock<BlockSchema>);
+
+      for (const block of selectedBlocks) {
+        props.editor.updateBlock(block, {
+          type: item.type,
+          props: item.props,
+        } as PartialBlock<BlockSchema>);
+      }
     };
 
     return filteredItems.map((item) => ({
@@ -135,7 +141,7 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
       onClick: () => onClick(item),
       isSelected: item.isSelected(block as Block<BlockSchema>),
     }));
-  }, [block, filteredItems, props.editor]);
+  }, [block, filteredItems, props.editor, selectedBlocks]);
 
   useEditorChange(props.editor, () => {
     setBlock(props.editor.getTextCursorPosition().block);

packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx

@@ -59,38 +59,38 @@ export const BlockColorsButton = <BSchema extends BlockSchema>(
           </div>
         </Menu.Target>
         <div ref={ref}>
-        <Menu.Dropdown
-          onMouseLeave={startMenuCloseTimer}
-          onMouseOver={stopMenuCloseTimer}
-          style={{ marginLeft: "5px" }}>
-          <ColorPicker
-            iconSize={18}
-            text={
-              "textColor" in props.block.props &&
-              typeof props.block.props.textColor === "string"
-                ? {
-                    color: props.block.props.textColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { textColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-            background={
-              "backgroundColor" in props.block.props &&
-              typeof props.block.props.backgroundColor === "string"
-                ? {
-                    color: props.block.props.backgroundColor,
-                    setColor: (color) =>
-                      props.editor.updateBlock(props.block, {
-                        props: { backgroundColor: color },
-                      } as PartialBlock<BSchema>),
-                  }
-                : undefined
-            }
-          />
-        </Menu.Dropdown>
+          <Menu.Dropdown
+            onMouseLeave={startMenuCloseTimer}
+            onMouseOver={stopMenuCloseTimer}
+            style={{ marginLeft: "5px" }}>
+            <ColorPicker
+              iconSize={18}
+              text={
+                "textColor" in props.block.props &&
+                typeof props.block.props.textColor === "string"
+                  ? {
+                      color: props.block.props.textColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { textColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+              background={
+                "backgroundColor" in props.block.props &&
+                typeof props.block.props.backgroundColor === "string"
+                  ? {
+                      color: props.block.props.backgroundColor,
+                      setColor: (color) =>
+                        props.editor.updateBlock(props.block, {
+                          props: { backgroundColor: color },
+                        } as PartialBlock<BSchema>),
+                    }
+                  : undefined
+              }
+            />
+          </Menu.Dropdown>
         </div>
       </Menu>
     </DragHandleMenuItem>

packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx

@@ -1,8 +1,8 @@
-import { Menu } from "@mantine/core";
+import { Menu, MenuItemProps } from "@mantine/core";
 import { PolymorphicComponentProps } from "@mantine/utils";
 
 export const DragHandleMenuItem = (
-  props: PolymorphicComponentProps<"button">
+  props: PolymorphicComponentProps<"button"> & MenuItemProps
 ) => {
   const { children, ...remainingProps } = props;
   return <Menu.Item {...remainingProps}>{children}</Menu.Item>;

packages/website/docs/data.ts

@@ -20,6 +20,11 @@ export const sponsors: Sponsors[] = [
     imgDark: "/img/sponsors/nlnet-dark.svg",
     imgLight: "/img/sponsors/nlnet.svg",
   },
+  {
+    name: "Twenty",
+    imgDark: "/img/sponsors/twenty-dark.png",
+    imgLight: "/img/sponsors/twenty.png",
+  },
 ];
 
 export interface FeaturesCardData {

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

@@ -177,6 +177,7 @@ type SideMenuButtonProps = {
 }
 export const SideMenuButton = (props: SideMenuButtonProps) => ...;
 
-// Takes same props as `button` elements, e.g. onClick.
-export const DragHandleMenuItem = (props) => ...;
+// Contains all props that a regular button element would take, as well as all props from the Mantine `Menu.Item` component.
+type DragHandleMenuItemProps = PolymorphicComponentProps<"button"> & MenuItemProps
+export const DragHandleMenuItem = (props: DragHandleMenuItemProps) => ...;
 ```