refactor: Extract image panel components

packages/react/src/ariakit/ariakit.css

@@ -182,6 +182,128 @@
   color: hsl(204 20% 100%);
 }
 
+.input {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border-style: none;
+  background-color: hsl(204 20% 94% / 0.4);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: hsl(204 4% 0%);
+  box-shadow:
+          inset 0 0 0 1px rgba(0 0 0 / 0.1),
+          inset 0 2px 5px 0 rgba(0 0 0 / 0.05);
+}
+
+.input::placeholder {
+  color: hsl(204 4% 0% / 0.6);
+}
+
+.input:hover {
+  background-color: hsl(204 20% 94%);
+}
+
+.input:focus-visible,
+.input[data-focus-visible] {
+  outline: 2px solid hsl(204 100% 40%);
+  outline-offset: -1px;
+}
+
+:is(.dark .input) {
+  background-color: hsl(204 4% 10%);
+  color: hsl(204 20% 100%);
+  box-shadow:
+          inset 0 0 0 1px rgba(255 255 255 / 0.12),
+          inset 0 -1px 0 0 rgba(255 255 255 / 0.05),
+          inset 0 2px 5px 0 rgba(0 0 0 / 0.15);
+}
+
+:is(.dark .input)::placeholder {
+  color: hsl(204 20% 100% / 46%);
+}
+
+:is(.dark .input:hover) {
+  background-color: hsl(204 4% 8%);
+}
+
+:is(.dark .bn-image-panel) {
+  background-color: hsl(204 4% 16%);
+  box-shadow:
+          0 1px 3px 0 rgb(0 0 0 / 0.25),
+          0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.tab-list {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tab {
+  display: flex;
+  height: 2.5rem;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  border-style: none;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-decoration-line: none;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: hsl(204 100% 40%);
+}
+
+.tab:hover {
+  background-color: hsl(204 4% 0% / 7.5%);
+}
+
+.tab[aria-disabled="true"] {
+  opacity: 0.5;
+}
+
+.tab[aria-selected="true"] {
+  background-color: hsl(204 100% 40%);
+  color: hsl(204 20% 100%);
+}
+
+.tab:hover[aria-selected="true"] {
+  background-color: hsl(204 100% 32%);
+}
+
+.tab[data-focus-visible] {
+  outline-style: solid;
+}
+
+.tab:active,
+.tab[data-active] {
+  padding-top: 0.125rem;
+}
+
+:is(.dark .tab:hover) {
+  background-color: hsl(204 20% 100% / 0.1);
+}
+
+:is(.dark .tab[aria-selected="true"]) {
+  background-color: hsl(204 100% 40%);
+  color: hsl(204 20% 100%);
+}
+
+:is(.dark .tab:hover[aria-selected="true"]) {
+  background-color: hsl(204 100% 32%);
+}
+
+.panel {
+  padding: 0.5rem;
+}
+
 .bn-menu {
   position: relative;
   z-index: 50;
@@ -262,3 +384,16 @@
   font-weight: 500;
   opacity: 0.5;
 }
+
+.bn-image-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: hsl(204 20% 100%);
+  padding: 0.5rem;
+  box-shadow:
+          0 1px 3px 0 rgb(0 0 0 / 0.1),
+          0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+

packages/react/src/ariakit/components.tsx

@@ -15,6 +15,12 @@ import { Toolbar } from "./toolbar/Toolbar";
 import { ToolbarButton } from "./toolbar/ToolbarButton";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect";
 
+import { Panel } from "./panel/Panel";
+import { PanelButton } from "./panel/PanelButton";
+import { PanelFileInput } from "./panel/PanelFileInput";
+import { PanelTab } from "./panel/PanelTab";
+import { PanelTextInput } from "./panel/PanelTextInput";
+
 export const ariakitComponents: ComponentsContextValue = {
   Form,
   TextInput,
@@ -27,6 +33,11 @@ export const ariakitComponents: ComponentsContextValue = {
   MenuDivider,
   MenuLabel,
   MenuItem,
+  Panel,
+  PanelButton,
+  PanelFileInput,
+  PanelTab,
+  PanelTextInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

packages/react/src/ariakit/panel/Panel.tsx

@@ -0,0 +1,33 @@
+import * as Ariakit from "@ariakit/react";
+
+import { PanelProps } from "../../editor/ComponentsContext";
+
+export const Panel = (props: PanelProps) => {
+  return (
+    <div className={"bn-image-panel"}>
+      <Ariakit.TabProvider
+        selectedId={props.openTab}
+        setActiveId={(activeId) => {
+          if (activeId) {
+            props.setOpenTab(activeId);
+          }
+        }}>
+        {/*{props.loading && <LoadingOverlay visible={props.loading} />}*/}
+
+        <Ariakit.TabList className={"tab-list"}>
+          {props.tabs.map((tab) => (
+            <Ariakit.Tab id={tab.name} className={"tab"} key={tab.name}>
+              {tab.name}
+            </Ariakit.Tab>
+          ))}
+        </Ariakit.TabList>
+
+        {props.tabs.map((tab) => (
+          <Ariakit.TabPanel tabId={tab.name} className={"panel"} key={tab.name}>
+            {tab.tabPanel}
+          </Ariakit.TabPanel>
+        ))}
+      </Ariakit.TabProvider>
+    </div>
+  );
+};

packages/react/src/ariakit/panel/PanelButton.tsx

@@ -0,0 +1,16 @@
+import * as Ariakit from "@ariakit/react";
+
+import { PanelButtonProps } from "../../editor/ComponentsContext";
+import { mergeCSSClasses } from "@blocknote/core";
+
+export const PanelButton = (props: PanelButtonProps) => {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Ariakit.Button
+      className={mergeCSSClasses("button", className || "")}
+      {...rest}>
+      {children}
+    </Ariakit.Button>
+  );
+};

packages/react/src/ariakit/panel/PanelFileInput.tsx

@@ -0,0 +1,16 @@
+import * as Ariakit from "@ariakit/react";
+
+import { PanelFileInputProps } from "../../editor/ComponentsContext";
+
+export const PanelFileInput = (props: PanelFileInputProps) => (
+  <Ariakit.FormProvider>
+    <Ariakit.FormInput
+      name={"panel-input"}
+      type={"file"}
+      defaultValue={props.defaultValue ? props.defaultValue.name : undefined}
+      value={props.value ? props.value.name : undefined}
+      onChange={async (e) => props.onChange?.(e.target.files![0])}
+      placeholder={props.placeholder}
+    />
+  </Ariakit.FormProvider>
+);

packages/react/src/components/ImagePanel/mantine/ImagePanelTab.tsx → packages/react/src/ariakit/panel/PanelTab.tsx

@@ -1,18 +1,15 @@
 import { mergeCSSClasses } from "@blocknote/core";
-import { ComponentPropsWithoutRef, forwardRef } from "react";
 
-export const ImagePanelTab = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->((props, ref) => {
+import { PanelTabProps } from "../../editor/ComponentsContext";
+
+export const PanelTab = (props: PanelTabProps) => {
   const { className, children, ...rest } = props;
 
   return (
     <div
       className={mergeCSSClasses("bn-image-panel-tab", className || "")}
-      {...rest}
-      ref={ref}>
+      {...rest}>
       {children}
     </div>
   );
-});
+};

packages/react/src/ariakit/panel/PanelTextInput.tsx

@@ -0,0 +1,18 @@
+import * as Ariakit from "@ariakit/react";
+
+import { PanelTextInputProps } from "../../editor/ComponentsContext";
+
+export const PanelTextInput = (props: PanelTextInputProps) => {
+  const { children, ...rest } = props;
+
+  return (
+    <Ariakit.FormProvider>
+      <Ariakit.FormInput
+        name={"panel-input"}
+        className={"input"}
+        {...rest}
+        data-test={"embed-input"}
+      />
+    </Ariakit.FormProvider>
+  );
+};

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

@@ -10,7 +10,7 @@ import { RiImageEditFill } from "react-icons/ri";
 import { useComponentsContext } from "../../../editor/ComponentsContext";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor";
 import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-import { ImagePanel } from "../../ImagePanel/mantine/ImagePanel";
+import { ImagePanel } from "../../ImagePanel/ImagePanel";
 
 export const ReplaceImageButton = () => {
   const components = useComponentsContext()!;

packages/react/src/components/ImagePanel/mantine/DefaultTabs/EmbedTab.tsx → packages/react/src/components/ImagePanel/DefaultTabs/EmbedTab.tsx

@@ -6,19 +6,19 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 import { ChangeEvent, KeyboardEvent, useCallback, useState } from "react";
-import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
 
-import { ImagePanelProps } from "../../ImagePanelProps";
-import { ImagePanelButton } from "../ImagePanelButton";
-import { ImagePanelTab } from "../ImagePanelTab";
-import { ImagePanelTextInput } from "../ImagePanelTextInput";
+import { useComponentsContext } from "../../../editor/ComponentsContext";
+import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor";
+import { ImagePanelProps } from "../ImagePanelProps";
 
 export const EmbedTab = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(
   props: ImagePanelProps<I, S>
 ) => {
+  const components = useComponentsContext()!;
+
   const { block } = props;
 
   const editor = useBlockNoteEditor<
@@ -61,20 +61,20 @@ export const EmbedTab = <
   }, [editor, block, currentURL]);
 
   return (
-    <ImagePanelTab>
-      <ImagePanelTextInput
+    <components.PanelTab>
+      <components.PanelTextInput
         placeholder={"Enter URL"}
         value={currentURL}
         onChange={handleURLChange}
         onKeyDown={handleURLEnter}
         data-test={"embed-input"}
       />
-      <ImagePanelButton
+      <components.PanelButton
         className={"bn-image-panel-button"}
         onClick={handleURLClick}
         data-test={"embed-input-button"}>
         Embed Image
-      </ImagePanelButton>
-    </ImagePanelTab>
+      </components.PanelButton>
+    </components.PanelTab>
   );
 };