Merge branch 'main' into new-releases

matthewlipski · matthewlipski · commit ae2d35d2ce9e · 2023-10-11T21:04:35.000+02:00
diff --git a/packages/core/src/extensions/Blocks/api/block.ts b/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
           ? {
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContainer.ts b/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.
diff --git a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts b/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()
diff --git a/packages/react/src/FormattingToolbar/components/DefaultDropdowns/BlockTypeDropdown.tsx b/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);
diff --git a/packages/react/src/SideMenu/components/DragHandleMenu/DefaultButtons/BlockColorsButton.tsx b/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>
diff --git a/packages/react/src/SideMenu/components/DragHandleMenu/DragHandleMenuItem.tsx b/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>;
diff --git a/packages/website/docs/data.ts b/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 {
diff --git a/packages/website/docs/docs/side-menu.md b/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) => ...;
 ```
diff --git a/packages/website/docs/public/img/sponsors/twenty-dark.png b/packages/website/docs/public/img/sponsors/twenty-dark.png
diff --git a/packages/website/docs/public/img/sponsors/twenty.png b/packages/website/docs/public/img/sponsors/twenty.png
diff --git a/tests/end-to-end/copypaste/copypaste.test.ts b/tests/end-to-end/copypaste/copypaste.test.ts
@@ -9,6 +9,7 @@ import {
   insertNestedListItems,
   insertParagraph,
 } from "../../utils/copypaste";
+import { executeSlashCommand } from "../../utils/slashmenu";
 
 test.describe.configure({ mode: "serial" });
 
@@ -135,4 +136,59 @@ test.describe("Check Copy/Paste Functionality", () => {
 
     await compareDocToSnapshot(page, "nestedOrderedLists.json");
   });
+
+  test("Images should keep props", async ({ page, browserName }) => {
+    test.skip(
+      browserName === "firefox" || browserName === "webkit",
+      "Firefox doesn't yet support the async clipboard API. Webkit copy/paste stopped working after updating to Playwright 1.33."
+    );
+
+    await focusOnEditor(page);
+    await page.keyboard.type("paragraph");
+
+    const IMAGE_EMBED_URL =
+      "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg";
+    await executeSlashCommand(page, "image");
+
+    await page.click(`[data-test="embed-tab"]`);
+    await page.click(`[data-test="embed-input"]`);
+    await page.keyboard.type(IMAGE_EMBED_URL);
+    await page.click(`[data-test="embed-input-button"]`);
+    await page.waitForSelector(`img[src="${IMAGE_EMBED_URL}"]`);
+
+    await page.click(`img`);
+
+    await page.waitForSelector(`[class*="resizeHandle"][style*="right"]`);
+    const resizeHandle = page.locator(
+      `[class*="resizeHandle"][style*="right"]`
+    );
+    const resizeHandleBoundingBox = await resizeHandle.boundingBox();
+    await page.mouse.move(
+      resizeHandleBoundingBox.x + resizeHandleBoundingBox.width / 2,
+      resizeHandleBoundingBox.y + resizeHandleBoundingBox.height / 2,
+      {
+        steps: 5,
+      }
+    );
+    await page.mouse.down();
+
+    await page.mouse.move(
+      resizeHandleBoundingBox.x + resizeHandleBoundingBox.width / 2 - 50,
+      resizeHandleBoundingBox.y + resizeHandleBoundingBox.height / 2,
+      {
+        steps: 5,
+      }
+    );
+
+    await page.mouse.up();
+
+    await page.click(`img`);
+    await page.keyboard.press("ArrowDown");
+    await page.pause();
+
+    await copyPasteAll(page);
+    await page.pause();
+
+    await compareDocToSnapshot(page, "images.json");
+  });
 });
diff --git a/tests/end-to-end/copypaste/copypaste.test.ts-snapshots/images-json-chromium-linux.json b/tests/end-to-end/copypaste/copypaste.test.ts-snapshots/images-json-chromium-linux.json

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