@blocknote/ariakit 0.13.0

package/src/index.tsx

@@ -0,0 +1,103 @@
+import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockNoteViewRaw,
+  Components,
+  ComponentsContext,
+} from "@blocknote/react";
+import { ComponentProps } from "react";
+
+import { Form } from "./input/Form";
+import { TextInput } from "./input/TextInput";
+import {
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTrigger,
+} from "./menu/Menu";
+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";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover/Popover";
+import { SideMenu } from "./sideMenu/SideMenu";
+import { SideMenuButton } from "./sideMenu/SideMenuButton";
+import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu";
+import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem";
+import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem";
+import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel";
+import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader";
+import { TableHandle } from "./tableHandle/TableHandle";
+import { Toolbar } from "./toolbar/Toolbar";
+import { ToolbarButton } from "./toolbar/ToolbarButton";
+import { ToolbarSelect } from "./toolbar/ToolbarSelect";
+
+import "./style.css";
+
+export const components: Components = {
+  FormattingToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+    Select: ToolbarSelect,
+  },
+  ImagePanel: {
+    Root: Panel,
+    Button: PanelButton,
+    FileInput: PanelFileInput,
+    TabPanel: PanelTab,
+    TextInput: PanelTextInput,
+  },
+  LinkToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+  },
+  SideMenu: {
+    Root: SideMenu,
+    Button: SideMenuButton,
+  },
+  SuggestionMenu: {
+    Root: SuggestionMenu,
+    Item: SuggestionMenuItem,
+    EmptyItem: SuggestionMenuEmptyItem,
+    Label: SuggestionMenuLabel,
+    Loader: SuggestionMenuLoader,
+  },
+  TableHandle: {
+    Root: TableHandle,
+  },
+  Generic: {
+    Form: {
+      Root: Form,
+      TextInput: TextInput,
+    },
+    Menu: {
+      Root: Menu,
+      Trigger: MenuTrigger,
+      Dropdown: MenuDropdown,
+      Divider: MenuDivider,
+      Label: MenuLabel,
+      Item: MenuItem,
+    },
+    Popover: {
+      Root: Popover,
+      Trigger: PopoverTrigger,
+      Content: PopoverContent,
+    },
+  },
+};
+
+export const BlockNoteView = <
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+>(
+  props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
+) => {
+  return (
+    <ComponentsContext.Provider value={components}>
+      <BlockNoteViewRaw {...props} />
+    </ComponentsContext.Provider>
+  );
+};

package/src/input/Form.tsx

@@ -0,0 +1,12 @@
+import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
+
+import { ComponentProps } from "@blocknote/react";
+
+export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return <Ariakit.FormProvider>{children}</Ariakit.FormProvider>;
+};

package/src/input/TextInput.tsx

@@ -0,0 +1,48 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const TextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["Generic"]["Form"]["TextInput"]
+>((props, ref) => {
+  const {
+    className,
+    name,
+    label,
+    icon,
+    value,
+    autoFocus,
+    placeholder,
+    onKeyDown,
+    onChange,
+    onSubmit,
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <>
+      {props.label && (
+        <Ariakit.FormLabel name={name}>{label}</Ariakit.FormLabel>
+      )}
+      <div className="bn-ak-input-wrapper">
+        {icon}
+        <Ariakit.FormInput
+          className={mergeCSSClasses("bn-ak-input", className || "")}
+          ref={ref}
+          name={name}
+          value={value}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+          onSubmit={onSubmit}
+        />
+      </div>
+    </>
+  );
+});

package/src/menu/Menu.tsx

@@ -0,0 +1,130 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
+  const {
+    children,
+    onOpenChange,
+    position,
+    sub, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.MenuProvider
+      placement={position}
+      setOpen={onOpenChange}
+      virtualFocus={true}>
+      {children}
+    </Ariakit.MenuProvider>
+  );
+};
+
+export const MenuDropdown = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Dropdown"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    sub, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.Menu
+      className={mergeCSSClasses("bn-ak-menu", className || "")}
+      ref={ref}>
+      {children}
+    </Ariakit.Menu>
+  );
+});
+
+export const MenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Item"]
+>((props, ref) => {
+  const { className, children, icon, checked, subTrigger, onClick, ...rest } =
+    props;
+
+  assertEmpty(rest);
+
+  if (subTrigger) {
+    return (
+      <Ariakit.MenuButton
+        render={<Ariakit.MenuItem />}
+        className={mergeCSSClasses("bn-ak-menu-item", className || "")}
+        ref={ref}
+        onClick={onClick}>
+        {icon}
+        {children}
+        <Ariakit.MenuButtonArrow />
+        {checked !== undefined && <Ariakit.CheckboxCheck checked={checked} />}
+      </Ariakit.MenuButton>
+    );
+  }
+  return (
+    <Ariakit.MenuItem
+      className={mergeCSSClasses("bn-ak-menu-item", className || "")}
+      ref={ref}
+      onClick={onClick}>
+      {icon}
+      {children}
+      {checked !== undefined && <Ariakit.CheckboxCheck checked={checked} />}
+    </Ariakit.MenuItem>
+  );
+});
+
+export const MenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Label"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.MenuGroupLabel
+      className={mergeCSSClasses("bn-ak-group-label", className || "")}
+      ref={ref}>
+      {children}
+    </Ariakit.MenuGroupLabel>
+  );
+});
+
+export const MenuTrigger = (
+  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+) => {
+  const { children, sub, ...rest } = props;
+
+  assertEmpty(rest);
+
+  if (sub) {
+    return children;
+  }
+
+  return <Ariakit.MenuButton render={children as any}></Ariakit.MenuButton>;
+};
+
+export const MenuDivider = forwardRef<
+  HTMLHRElement,
+  ComponentProps["Generic"]["Menu"]["Divider"]
+>((props, ref) => {
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.MenuSeparator
+      className={mergeCSSClasses("bn-ak-separator", className || "")}
+      ref={ref}
+    />
+  );
+});

package/src/panel/Panel.tsx

@@ -0,0 +1,55 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Panel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    tabs,
+    defaultOpenTab,
+    openTab,
+    setOpenTab,
+    loading, // TODO: implement loading
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={mergeCSSClasses("bn-ak-wrapper", className || "")}
+      ref={ref}>
+      <Ariakit.TabProvider
+        defaultSelectedId={defaultOpenTab}
+        selectedId={openTab}
+        setActiveId={(activeId) => {
+          if (activeId) {
+            setOpenTab(activeId);
+          }
+        }}>
+        {/*{loading && <LoadingOverlay visible={loading} />}*/}
+
+        <Ariakit.TabList className={"bn-ak-tab-list"}>
+          {tabs.map((tab) => (
+            <Ariakit.Tab className={"bn-ak-tab"} id={tab.name} key={tab.name}>
+              {tab.name}
+            </Ariakit.Tab>
+          ))}
+        </Ariakit.TabList>
+
+        <div className={"bn-ak-panels"}>
+          {tabs.map((tab) => (
+            <Ariakit.TabPanel tabId={tab.name} key={tab.name}>
+              {tab.tabPanel}
+            </Ariakit.TabPanel>
+          ))}
+        </div>
+      </Ariakit.TabProvider>
+    </div>
+  );
+});

package/src/panel/PanelButton.tsx

@@ -0,0 +1,24 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["ImagePanel"]["Button"]
+>((props, ref) => {
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.Button
+      className={mergeCSSClasses("bn-ak-button", className || "")}
+      onClick={onClick}
+      aria-label={label}
+      ref={ref}>
+      {children}
+    </Ariakit.Button>
+  );
+});

package/src/panel/PanelFileInput.tsx

@@ -0,0 +1,28 @@
+import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
+
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelFileInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["ImagePanel"]["FileInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.FormProvider>
+      <Ariakit.FormInput
+        className={className}
+        ref={ref}
+        name={"panel-input"}
+        type={"file"}
+        value={value ? value.name : undefined}
+        onChange={async (e) => onChange?.(e.target.files![0])}
+        placeholder={placeholder}
+      />
+    </Ariakit.FormProvider>
+  );
+});

package/src/panel/PanelTab.tsx

@@ -0,0 +1,18 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelTab = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["TabPanel"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/panel/PanelTextInput.tsx

@@ -0,0 +1,29 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelTextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["ImagePanel"]["TextInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.FormProvider>
+      <Ariakit.FormInput
+        className={mergeCSSClasses("bn-ak-input", className || "")}
+        name={"panel-input"}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        data-test={"embed-input"}
+        ref={ref}
+      />
+    </Ariakit.FormProvider>
+  );
+});

package/src/popover/Popover.tsx

@@ -0,0 +1,47 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PopoverTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Generic"]["Popover"]["Trigger"]
+>((props, ref) => {
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return <Ariakit.PopoverDisclosure render={children as any} ref={ref} />;
+});
+
+export const PopoverContent = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Popover"]["Content"]
+>((props, ref) => {
+  const { className, children, variant, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.Popover
+      className={mergeCSSClasses("bn-ak-popover", className || "")}
+      ref={ref}>
+      {children}
+    </Ariakit.Popover>
+  );
+});
+
+export const Popover = (
+  props: ComponentProps["Generic"]["Popover"]["Root"]
+) => {
+  const { children, opened, position, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.PopoverProvider open={opened} placement={position}>
+      {children}
+    </Ariakit.PopoverProvider>
+  );
+};

package/src/sideMenu/SideMenu.tsx

@@ -0,0 +1,20 @@
+import * as Ariakit from "@ariakit/react";
+import { assertEmpty } from "@blocknote/core";
+
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SideMenu = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SideMenu"]["Root"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.Group className={className} ref={ref}>
+      {children}
+    </Ariakit.Group>
+  );
+});

package/src/sideMenu/SideMenuButton.tsx

@@ -0,0 +1,44 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SideMenuButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["SideMenu"]["Button"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    label,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <Ariakit.Button
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
+      className={mergeCSSClasses(
+        "bn-ak-button bn-ak-secondary",
+        className || ""
+      )}
+      ref={ref}
+      onClick={onClick}
+      {...rest}>
+      {icon}
+      {children}
+    </Ariakit.Button>
+  );
+});

package/src/style.css

@@ -0,0 +1,136 @@
+@import url("@blocknote/react/style.css");
+
+/* This file contains BlockNote-specific fixes for the styles in
+ ariakitStyles.css. */
+
+@import "./ariakitStyles.css";
+
+.bn-ak-input-wrapper {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bn-toolbar .bn-ak-button {
+  width: unset;
+}
+
+.bn-toolbar .bn-ak-button[data-selected] {
+  padding-top: 0.125rem;
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
+}
+
+.bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
+}
+
+.bn-toolbar .bn-ak-popover {
+  gap: 0.5rem;
+}
+
+.bn-tab-panel {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.bn-file-input {
+  max-width: 100%;
+}
+
+.bn-ak-button {
+  outline-style: none;
+}
+
+.bn-ak-menu-item[aria-selected="true"],
+.bn-ak-menu-item:hover {
+  background-color: hsl(204 100% 40%);
+  color: hsl(204 20% 100%);
+}
+
+.bn-ak-menu-item {
+  display: flex;
+}
+
+.bn-dropdown {
+  overflow: visible;
+}
+
+.bn-suggestion-menu,
+.bn-color-picker-dropdown {
+  overflow: scroll;
+}
+
+.bn-ak-suggestion-menu-item-body {
+  flex: 1;
+}
+
+.bn-ak-suggestion-menu-item-subtitle {
+  font-size: 0.7rem;
+}
+
+.bn-ak-suggestion-menu-item-section[data-position="left"] {
+  padding: 8px;
+}
+
+.bn-ak-suggestion-menu-item-section[data-position="right"] {
+  --border: rgb(0 0 0/13%);
+  --highlight: rgb(255 255 255/20%);
+  --shadow: rgb(0 0 0/10%);
+  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
+    inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
+  font-size: 0.7rem;
+  border-radius: 4px;
+  padding-inline: 4px;
+}
+
+.bn-side-menu {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bn-side-menu .bn-ak-button {
+  height: fit-content;
+  padding: 0;
+  width: fit-content;
+}
+
+.bn-panel-popover {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.bn-table-handle {
+  height: fit-content;
+  padding: 0;
+  width: fit-content;
+}
+
+.bn-side-menu,
+.bn-table-handle {
+  color: gray;
+}
+
+.bn-ak-button:where(.dark, .dark *) {
+  color: hsl(204 20% 100%);
+}
+
+.bn-ak-tab,
+.bn-file-input {
+  background-color: transparent;
+  color: black;
+}
+
+.bn-ak-tab:where(.dark, .dark *),
+.bn-file-input:where(.dark, .dark *) {
+  color: white;
+}
+
+.bn-ak-tooltip {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}