merge / undo button separation

YousefED · YousefED · commit 4cdf8a7dad5c · 2025-02-25T13:23:54.000+01:00
diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx
@@ -1,9 +1,9 @@
+import "@blocknote/mantine/style.css";
 import {
   useBlockNoteEditor,
   useComponentsContext,
   useEditorContentOrSelectionChange,
 } from "@blocknote/react";
-import "@blocknote/mantine/style.css";
 import { useState } from "react";
 
 // Custom Formatting Toolbar Button to toggle blue text & background color.
@@ -27,7 +27,7 @@ export function BlueButton() {
   }, editor);
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       mainTooltip={"Blue Text & Background"}
       onClick={() => {
         editor.toggleStyles({
@@ -37,6 +37,6 @@ export function BlueButton() {
       }}
       isSelected={isSelected}>
       Blue
-    </Components.Toolbar.Button>
+    </Components.FormattingToolbar.Button>
   );
 }
diff --git a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx b/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx
@@ -49,7 +49,7 @@ export const FileReplaceButton = () => {
   return (
     <Components.Generic.Popover.Root opened={isOpen} position={"bottom"}>
       <Components.Generic.Popover.Trigger>
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           onClick={() => setIsOpen(!isOpen)}
           isSelected={isOpen}
diff --git a/examples/03-ui-components/link-toolbar-buttons/AlertButton.tsx b/examples/03-ui-components/link-toolbar-buttons/AlertButton.tsx
@@ -5,12 +5,12 @@ export function AlertButton(props: LinkToolbarProps) {
   const Components = useComponentsContext()!;
 
   return (
-    <Components.Toolbar.Button
+    <Components.LinkToolbar.Button
       mainTooltip={"Open Alert with URL"}
       onClick={() => {
         window.alert(`Link URL: ${props.url}`);
       }}>
       Open Alert
-    </Components.Toolbar.Button>
+    </Components.LinkToolbar.Button>
   );
 }
diff --git a/examples/06-custom-schema/03-font-style/App.tsx b/examples/06-custom-schema/03-font-style/App.tsx
@@ -45,7 +45,7 @@ const SetFontStyleButton = () => {
   const Components = useComponentsContext()!;
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       label="Set Font"
       mainTooltip={"Set Font"}
       icon={<RiText />}
diff --git a/examples/06-custom-schema/react-custom-styles/App.tsx b/examples/06-custom-schema/react-custom-styles/App.tsx
@@ -1,17 +1,17 @@
 import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
-  createReactStyleSpec,
   FormattingToolbar,
   FormattingToolbarController,
   FormattingToolbarProps,
+  createReactStyleSpec,
   useActiveStyles,
   useBlockNoteEditor,
   useComponentsContext,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/mantine/style.css";
 
 const small = createReactStyleSpec(
   {
@@ -55,7 +55,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
 
   return (
     <FormattingToolbar>
-      <Components.Toolbar.Button
+      <Components.FormattingToolbar.Button
         mainTooltip={"small"}
         onClick={() => {
           editor.toggleStyles({
@@ -64,8 +64,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         }}
         isSelected={activeStyles.small}>
         Small
-      </Components.Toolbar.Button>
-      <Components.Toolbar.Button
+      </Components.FormattingToolbar.Button>
+      <Components.FormattingToolbar.Button
         mainTooltip={"font size"}
         onClick={() => {
           editor.toggleStyles({
@@ -74,7 +74,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         }}
         isSelected={!!activeStyles.fontSize}>
         Font size
-      </Components.Toolbar.Button>
+      </Components.FormattingToolbar.Button>
     </FormattingToolbar>
   );
 };
diff --git a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx
@@ -4,6 +4,8 @@ import {
   defaultStyleSpecs,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
   FormattingToolbar,
   FormattingToolbarController,
@@ -13,8 +15,6 @@ import {
   useComponentsContext,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/mantine/style.css";
 
 const small = createStyleSpec(
   {
@@ -67,7 +67,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
 
   return (
     <FormattingToolbar>
-      <Components.Toolbar.Button
+      <Components.FormattingToolbar.Button
         mainTooltip={"small"}
         onClick={() => {
           editor.toggleStyles({
@@ -76,8 +76,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         }}
         isSelected={activeStyles.small}>
         Small
-      </Components.Toolbar.Button>
-      <Components.Toolbar.Button
+      </Components.FormattingToolbar.Button>
+      <Components.FormattingToolbar.Button
         mainTooltip={"font size"}
         onClick={() => {
           editor.toggleStyles({
@@ -86,7 +86,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         }}
         isSelected={!!activeStyles.fontSize}>
         Font size
-      </Components.Toolbar.Button>
+      </Components.FormattingToolbar.Button>
     </FormattingToolbar>
   );
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ariakit/src/toolbar/Toolbar.tsx b/packages/ariakit/src/toolbar/Toolbar.tsx
@@ -4,7 +4,7 @@ import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
-type ToolbarProps = ComponentProps["Toolbar"]["Root"];
+type ToolbarProps = ComponentProps["Generic"]["Toolbar"]["Root"];
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
diff --git a/packages/ariakit/src/toolbar/ToolbarButton.tsx b/packages/ariakit/src/toolbar/ToolbarButton.tsx
@@ -1,15 +1,15 @@
 import {
+  ToolbarItem as AriakitToolbarItem,
   Tooltip as AriakitTooltip,
   TooltipAnchor as AriakitTooltipAnchor,
-  ToolbarItem as AriakitToolbarItem,
   TooltipProvider as AriakitTooltipProvider,
 } from "@ariakit/react";
 
 import { assertEmpty, isSafari, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
-type ToolbarButtonProps = ComponentProps["Toolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.
diff --git a/packages/ariakit/src/toolbar/ToolbarSelect.tsx b/packages/ariakit/src/toolbar/ToolbarSelect.tsx
@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 
 export const ToolbarSelect = forwardRef<
   HTMLDivElement,
-  ComponentProps["Toolbar"]["Select"]
+  ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
   const { className, items, isDisabled, ...rest } = props;
 
diff --git a/packages/mantine/src/toolbar/Toolbar.tsx b/packages/mantine/src/toolbar/Toolbar.tsx
@@ -5,7 +5,7 @@ import { ComponentProps } from "@blocknote/react";
 import { mergeRefs, useFocusTrap, useFocusWithin } from "@mantine/hooks";
 import { forwardRef } from "react";
 
-type ToolbarProps = ComponentProps["Toolbar"]["Root"];
+type ToolbarProps = ComponentProps["Generic"]["Toolbar"]["Root"];
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
diff --git a/packages/mantine/src/toolbar/ToolbarButton.tsx b/packages/mantine/src/toolbar/ToolbarButton.tsx
@@ -22,7 +22,7 @@ export const TooltipContent = (props: {
   </MantineStack>
 );
 
-type ToolbarButtonProps = ComponentProps["Toolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.
diff --git a/packages/mantine/src/toolbar/ToolbarSelect.tsx b/packages/mantine/src/toolbar/ToolbarSelect.tsx
@@ -12,7 +12,7 @@ import { HiChevronDown } from "react-icons/hi";
 // TODO: Turn into select?
 export const ToolbarSelect = forwardRef<
   HTMLDivElement,
-  ComponentProps["Toolbar"]["Select"]
+  ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
   const { className, items, isDisabled, ...rest } = props;
 
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
@@ -107,7 +107,7 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
 
   const Icon = icons[props.basicTextStyle] as any; // TODO
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className="bn-button"
       data-test={props.basicTextStyle}
       onClick={() => toggleStyle(props.basicTextStyle)}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
@@ -138,7 +138,7 @@ export const ColorStyleButton = () => {
   return (
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           data-test="colors"
           label={dict.formatting_toolbar.colors.tooltip}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -107,7 +107,7 @@ export const CreateLinkButton = () => {
     <Components.Generic.Popover.Root opened={opened}>
       <Components.Generic.Popover.Trigger>
         {/* TODO: hide tooltip on click */}
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           data-test="createLink"
           label={dict.formatting_toolbar.link.tooltip}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
@@ -80,7 +80,7 @@ export const FileCaptionButton = () => {
   return (
     <Components.Generic.Popover.Root>
       <Components.Generic.Popover.Trigger>
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           label={dict.formatting_toolbar.file_caption.tooltip}
           mainTooltip={dict.formatting_toolbar.file_caption.tooltip}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx
@@ -54,7 +54,7 @@ export const FileDeleteButton = () => {
   }
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       label={
         dict.formatting_toolbar.file_delete.tooltip[fileBlock.type] ||
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
@@ -62,7 +62,7 @@ export const FileDownloadButton = () => {
   }
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       label={
         dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FilePreviewButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FilePreviewButton.tsx
@@ -59,7 +59,7 @@ export const FilePreviewButton = () => {
   }
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       label={"Toggle preview"}
       mainTooltip={dict.formatting_toolbar.file_preview_toggle.tooltip}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
@@ -80,7 +80,7 @@ export const FileRenameButton = () => {
   return (
     <Components.Generic.Popover.Root>
       <Components.Generic.Popover.Trigger>
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           label={
             dict.formatting_toolbar.file_rename.tooltip[fileBlock.type] ||
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
@@ -44,7 +44,7 @@ export const FileReplaceButton = () => {
   return (
     <Components.Generic.Popover.Root opened={isOpen} position={"bottom"}>
       <Components.Generic.Popover.Trigger>
-        <Components.Toolbar.Button
+        <Components.FormattingToolbar.Button
           className={"bn-button"}
           onClick={() => setIsOpen(!isOpen)}
           isSelected={isOpen}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
@@ -49,7 +49,7 @@ export const NestBlockButton = () => {
   }
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       data-test="nestBlock"
       onClick={nestBlock}
@@ -97,7 +97,7 @@ export const UnnestBlockButton = () => {
   }
 
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       data-test="unnestBlock"
       onClick={unnestBlock}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
@@ -76,7 +76,7 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
 
   const Icon: IconType = icons[props.textAlignment];
   return (
-    <Components.Toolbar.Button
+    <Components.FormattingToolbar.Button
       className={"bn-button"}
       data-test={`alignText${
         props.textAlignment.slice(0, 1).toUpperCase() +
diff --git a/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx b/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
@@ -133,7 +133,7 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
     [block.type, filteredItems]
   );
 
-  const fullItems: ComponentProps["Toolbar"]["Select"]["items"] =
+  const fullItems: ComponentProps["FormattingToolbar"]["Select"]["items"] =
     useMemo(() => {
       const onClick = (item: BlockTypeSelectItem) => {
         editor.focus();
@@ -167,6 +167,9 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
   }
 
   return (
-    <Components.Toolbar.Select className={"bn-select"} items={fullItems} />
+    <Components.FormattingToolbar.Select
+      className={"bn-select"}
+      items={fullItems}
+    />
   );
 };
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/DeleteLinkButton.tsx
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/OpenLinkButton.tsx
diff --git a/packages/react/src/components/LinkToolbar/LinkToolbar.tsx b/packages/react/src/components/LinkToolbar/LinkToolbar.tsx
diff --git a/packages/shadcn/src/toolbar/Toolbar.tsx b/packages/shadcn/src/toolbar/Toolbar.tsx
diff --git a/packages/xl-ai/package.json b/packages/xl-ai/package.json
diff --git a/packages/xl-ai/src/components/FormattingToolbar/AIToolbarButton.tsx b/packages/xl-ai/src/components/FormattingToolbar/AIToolbarButton.tsx
