@blocknote/shadcn 0.13.0

package/src/panel/Panel.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const Panel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    tabs,
+    defaultOpenTab,
+    openTab,
+    setOpenTab,
+    loading, // TODO: implement loader
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Tabs.Tabs
+      className={cn(className, "bg-popover p-2 rounded-lg")}
+      ref={ref}
+      value={openTab}
+      defaultValue={defaultOpenTab}
+      onValueChange={setOpenTab}>
+      {/*{loading && <LoadingOverlay visible={loading} />}*/}
+
+      <ShadCNComponents.Tabs.TabsList>
+        {tabs.map((tab) => (
+          <ShadCNComponents.Tabs.TabsTrigger value={tab.name} key={tab.name}>
+            {tab.name}
+          </ShadCNComponents.Tabs.TabsTrigger>
+        ))}
+      </ShadCNComponents.Tabs.TabsList>
+
+      {tabs.map((tab) => (
+        <ShadCNComponents.Tabs.TabsContent value={tab.name} key={tab.name}>
+          <ShadCNComponents.Card.Card>
+            <ShadCNComponents.Card.CardContent className={"p-4"}>
+              {tab.tabPanel}
+            </ShadCNComponents.Card.CardContent>
+          </ShadCNComponents.Card.Card>
+        </ShadCNComponents.Tabs.TabsContent>
+      ))}
+    </ShadCNComponents.Tabs.Tabs>
+  );
+});

package/src/panel/PanelButton.tsx

@@ -0,0 +1,27 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+
+export const PanelButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["ImagePanel"]["Button"]
+>((props, ref) => {
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Button.Button
+      type={"submit"}
+      className={className}
+      aria-label={label}
+      ref={ref}
+      onClick={onClick}>
+      {children}
+    </ShadCNComponents.Button.Button>
+  );
+});

package/src/panel/PanelFileInput.tsx

@@ -0,0 +1,27 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+
+export const PanelFileInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["ImagePanel"]["FileInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Input.Input
+      type={"file"}
+      className={className}
+      ref={ref}
+      value={value ? value.name : undefined}
+      onChange={async (e) => onChange?.(e.target.files![0])}
+      placeholder={placeholder}
+    />
+  );
+});

package/src/panel/PanelTab.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { cn } from "../lib/utils";
+
+export const PanelTab = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["TabPanel"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={cn(
+        className,
+        "flex flex-col gap-2 items-start justify-center"
+      )}
+      ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/panel/PanelTextInput.tsx

@@ -0,0 +1,29 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const PanelTextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["ImagePanel"]["TextInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Input.Input
+      data-test={"embed-input"}
+      className={cn(className, "w-80")}
+      ref={ref}
+      value={value}
+      placeholder={placeholder}
+      onKeyDown={onKeyDown}
+      onChange={onChange}
+    />
+  );
+});

package/src/popover/popover.tsx

@@ -0,0 +1,69 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const Popover = (
+  props: ComponentProps["Generic"]["Popover"]["Root"]
+) => {
+  const {
+    children,
+    opened,
+    position, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Popover.Popover open={opened}>
+      {children}
+    </ShadCNComponents.Popover.Popover>
+  );
+};
+
+export const PopoverTrigger = forwardRef(
+  (props: ComponentProps["Generic"]["Popover"]["Trigger"], ref: any) => {
+    const { children, ...rest } = props;
+
+    assertEmpty(rest);
+
+    const ShadCNComponents = useShadCNComponentsContext()!;
+
+    return (
+      <ShadCNComponents.Popover.PopoverTrigger ref={ref} asChild={true}>
+        {children}
+      </ShadCNComponents.Popover.PopoverTrigger>
+    );
+  }
+);
+
+export const PopoverContent = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Popover"]["Content"]
+>((props, ref) => {
+  const { className, variant, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Popover.PopoverContent
+      sideOffset={8}
+      className={cn(
+        className,
+        "flex flex-col gap-2",
+        variant === "panel-popover"
+          ? "p-0 border-none shadow-none max-w-none w-fit"
+          : ""
+      )}
+      ref={ref}>
+      {children}
+    </ShadCNComponents.Popover.PopoverContent>
+  );
+});

package/src/sideMenu/SideMenu.tsx

@@ -0,0 +1,18 @@
+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 (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/sideMenu/SideMenuButton.tsx

@@ -0,0 +1,45 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const SideMenuButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["SideMenu"]["Button"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    label,
+    ...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);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Button.Button
+      variant={"ghost"}
+      className={cn(className, "text-gray-400")}
+      ref={ref}
+      aria-label={label}
+      onClick={onClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      draggable={draggable}
+      {...rest}>
+      {icon}
+      {children}
+    </ShadCNComponents.Button.Button>
+  );
+});

package/src/style.css

@@ -0,0 +1,109 @@
+@import url("@blocknote/react/style.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.bn-container {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.bn-container.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+.bn-container * {
+  @apply border-border;
+}
+.bn-editor {
+  @apply bg-background text-foreground;
+}
+
+:focus-visible {
+  outline: none;
+}
+
+[data-radix-popper-content-wrapper] {
+  z-index: 99999 !important;
+}
+
+.bn-side-menu {
+  display: flex;
+  justify-content: center;
+}
+
+.bn-side-menu .bn-button {
+  padding: 0;
+  height: 24px;
+}
+
+.bn-select {
+  max-height: var(--radix-select-content-available-height);
+}
+
+.bn-menu-dropdown {
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
+
+.bn-color-picker-dropdown {
+  overflow: auto;
+}
+
+.bn-suggestion-menu-item[aria-selected="true"],
+.bn-suggestion-menu-item:hover {
+  background-color: hsl(var(--accent));
+}

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -0,0 +1,28 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { cn } from "../lib/utils";
+
+export const SuggestionMenu = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Root"]
+>((props, ref) => {
+  const { className, children, id, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      id={id}
+      role="listbox"
+      // Styles from ShadCN DropdownMenuContent component
+      className={cn(
+        "z-50 min-w-[8rem] overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -0,0 +1,26 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { cn } from "../lib/utils";
+
+export const SuggestionMenuEmptyItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["EmptyItem"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      // Styles from ShadCN DropdownMenuItem component
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      ref={ref}>
+      <div>{children}</div>
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -0,0 +1,47 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const SuggestionMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Item"]
+>((props, ref) => {
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  const { className, item, isSelected, onClick, id, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      // Styles from ShadCN DropdownMenuItem component
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      ref={ref}
+      id={id}
+      onClick={onClick}
+      role="option"
+      aria-selected={isSelected || undefined}>
+      {item.icon && (
+        <div className="p-3" data-position="left">
+          {item.icon}
+        </div>
+      )}
+      <div className="flex-1">
+        <div className="text-base">{item.title}</div>
+        <div className="text-xs">{item.subtext}</div>
+      </div>
+      {item.badge && (
+        <div data-position="right" className="text-xs">
+          <ShadCNComponents.Badge.Badge variant={"secondary"}>
+            {item.badge}
+          </ShadCNComponents.Badge.Badge>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -0,0 +1,22 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+export const SuggestionMenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Label"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      // Styles from ShadCN DropdownMenuLabel component
+      className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+      ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuLoader.tsx

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

package/src/tableHandle/TableHandle.tsx

@@ -0,0 +1,43 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+export const TableHandle = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["TableHandle"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    draggable,
+    onDragStart,
+    onDragEnd,
+    style,
+    label,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by shadcn when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Button.Button
+      variant={"ghost"}
+      className={cn(className, "p-0 h-fit w-fit text-gray-400")}
+      ref={ref}
+      aria-label={label}
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      style={style}
+      {...rest}>
+      {children}
+    </ShadCNComponents.Button.Button>
+  );
+});