@meta-1/editor 0.0.27

package/src/editor/ui/Panel/index.tsx

@@ -0,0 +1,109 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import cn from "classnames";
+
+import { Surface } from "../Surface";
+
+export type PanelProps = {
+  spacing?: "medium" | "small";
+  noShadow?: boolean;
+  asChild?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ asChild, className, children, spacing, noShadow, ...rest }, ref) => {
+    const panelClass = cn("p-2", spacing === "small" && "p-[0.2rem]", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp ref={ref} {...rest}>
+        <Surface className={panelClass} withShadow={!noShadow}>
+          {children}
+        </Surface>
+      </Comp>
+    );
+  },
+);
+
+Panel.displayName = "Panel";
+
+export const PanelDivider = forwardRef<HTMLDivElement, { asChild?: boolean } & HTMLAttributes<HTMLDivElement>>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const dividerClass = cn("mb-2 border-b border-b-black/10 pb-2", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp className={dividerClass} {...rest} ref={ref}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelDivider.displayName = "PanelDivider";
+
+export const PanelHeader = forwardRef<HTMLDivElement, { asChild?: boolean } & HTMLAttributes<HTMLDivElement>>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const headerClass = cn("mb-2 border-b border-b-black/10 pb-2 text-sm", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp className={headerClass} {...rest} ref={ref}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelHeader.displayName = "PanelHeader";
+
+export const PanelSection = forwardRef<HTMLDivElement, { asChild?: boolean } & HTMLAttributes<HTMLDivElement>>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const sectionClass = cn("mt-4 first:mt-1", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp className={sectionClass} {...rest} ref={ref}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelSection.displayName = "PanelSection";
+
+export const PanelHeadline = forwardRef<HTMLDivElement, { asChild?: boolean } & HTMLAttributes<HTMLDivElement>>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const headlineClass = cn("mb-2 ml-1.5 font-medium text-black/80 text-xs dark:text-white/80", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp className={headlineClass} {...rest} ref={ref}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelHeadline.displayName = "PanelHeadline";
+
+export const PanelFooter = forwardRef<HTMLDivElement, { asChild?: boolean } & HTMLAttributes<HTMLDivElement>>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const footerClass = cn("mt-2 border-black/10 border-t pt-2 text-sm", className);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp className={footerClass} {...rest} ref={ref}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelFooter.displayName = "PanelFooter";

package/src/editor/ui/PopoverMenu.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, type ReactNode } from "react";
+import {
+  Close as PopoverClose,
+  Content as PopoverContent,
+  Portal as PopoverPortal,
+  Root as PopoverRoot,
+  Trigger as PopoverTrigger,
+} from "@radix-ui/react-popover";
+import { icons } from "lucide-react";
+
+import { cn } from "../utils";
+import { Surface } from "./Surface";
+import { Toolbar } from "./Toolbar";
+
+export const Trigger = PopoverTrigger;
+export const Portal = PopoverPortal;
+
+export type MenuProps = {
+  children: ReactNode;
+  trigger: ReactNode;
+  triggerClassName?: string;
+  customTrigger?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (state: boolean) => void;
+  withPortal?: boolean;
+  tooltip?: string;
+  isActive?: boolean;
+};
+
+export const Menu = ({
+  customTrigger,
+  trigger,
+  triggerClassName,
+  children,
+  isOpen,
+  withPortal,
+  tooltip,
+  onOpenChange,
+}: MenuProps) => {
+  return (
+    <PopoverRoot onOpenChange={onOpenChange}>
+      {customTrigger ? (
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      ) : (
+        <PopoverTrigger asChild>
+          <Toolbar.Button className={triggerClassName} tooltip={isOpen ? "" : tooltip}>
+            {trigger}
+          </Toolbar.Button>
+        </PopoverTrigger>
+      )}
+      {withPortal ? (
+        <PopoverPortal>
+          <PopoverContent asChild sideOffset={8}>
+            <Surface className="z-[9999] flex max-h-80 min-w-[15rem] flex-col gap-0.5 overflow-auto p-2">
+              {children}
+            </Surface>
+          </PopoverContent>
+        </PopoverPortal>
+      ) : (
+        <PopoverContent asChild sideOffset={8}>
+          <Surface className="z-[9999] flex max-h-80 min-w-[15rem] flex-col gap-0.5 overflow-auto p-2">
+            {children}
+          </Surface>
+        </PopoverContent>
+      )}
+    </PopoverRoot>
+  );
+};
+
+Menu.displayName = "Menu";
+
+export const Item = ({
+  label,
+  close = true,
+  icon,
+  iconComponent,
+  disabled,
+  onClick,
+  isActive,
+}: {
+  label: string | ReactNode;
+  icon?: keyof typeof icons;
+  iconComponent?: ReactNode;
+  close?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  isActive?: boolean;
+}) => {
+  const className = cn(
+    "flex w-full items-center gap-2 rounded bg-transparent p-1.5 text-left font-medium text-neutral-500 text-sm",
+    !(isActive || disabled),
+    "hover:bg-neutral-100 hover:text-neutral-800 dark:hover:bg-neutral-900 dark:hover:text-neutral-200",
+    isActive && !disabled && "bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200",
+    disabled && "cursor-not-allowed text-neutral-400 dark:text-neutral-600",
+  );
+
+  const IconComponent = icon ? icons[icon] : null;
+  const IconCustomComponent = iconComponent || null;
+
+  const ItemComponent = close ? PopoverClose : "button";
+
+  return (
+    <ItemComponent className={className} disabled={disabled} onClick={onClick}>
+      {IconComponent && <IconComponent className="h-4 w-4" />}
+      {IconCustomComponent}
+      {label}
+    </ItemComponent>
+  );
+};
+
+export type CategoryTitle = {
+  children: ReactNode;
+};
+
+export const CategoryTitle = ({ children }: CategoryTitle) => {
+  return (
+    <div className="mt-4 mb-1.5 select-none px-1 font-medium text-[0.625rem] text-neutral-400 uppercase first:mt-1.5 dark:text-neutral-600">
+      {children}
+    </div>
+  );
+};
+
+export const Divider = forwardRef<HTMLHRElement>((props, ref) => {
+  return <hr {...props} className="my-1 border-neutral-200 dark:border-neutral-800" ref={ref} />;
+});
+
+Divider.displayName = "Divider";

package/src/editor/ui/Spinner/Spinner.tsx

@@ -0,0 +1,10 @@
+import { forwardRef, type HTMLProps } from "react";
+import cn from "classnames";
+
+export const Spinner = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ className, ...rest }, ref) => {
+  const spinnerClass = cn("h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent", className);
+
+  return <div className={spinnerClass} ref={ref} {...rest} />;
+});
+
+Spinner.displayName = "Spinner";

package/src/editor/ui/Spinner/index.tsx

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";

package/src/editor/ui/Surface.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLProps } from "react";
+
+import { cn } from "../utils";
+
+export type SurfaceProps = HTMLProps<HTMLDivElement> & {
+  withShadow?: boolean;
+  withBorder?: boolean;
+};
+
+export const Surface = forwardRef<HTMLDivElement, SurfaceProps>(
+  ({ children, className, withShadow = true, withBorder = true, ...props }, ref) => {
+    const surfaceClass = cn(
+      className,
+      "rounded-lg bg-white dark:bg-black",
+      withShadow ? "shadow-sm" : "",
+      withBorder ? "border border-neutral-200 dark:border-neutral-800" : "",
+    );
+
+    return (
+      <div className={surfaceClass} {...props} ref={ref}>
+        {children}
+      </div>
+    );
+  },
+);
+
+Surface.displayName = "Surface";

package/src/editor/ui/Textarea/Textarea.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import cn from "classnames";
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...rest }, ref) => {
+    const textAreaClassName = cn(
+      "block h-[4.5rem] w-full rounded-lg border-0 bg-black/5 px-2 py-1 font-medium text-black text-sm caret-black",
+      "dark:bg-white/10 dark:text-white dark:caret-white",
+      "hover:bg-black/10",
+      "dark:hover:bg-white/20",
+      "focus:bg-transparent focus:outline focus:outline-black active:bg-transparent active:outline active:outline-black",
+      "dark:active:outline-white dark:focus:outline-white",
+      className,
+    );
+
+    return <textarea className={textAreaClassName} ref={ref} {...rest} />;
+  },
+);
+
+Textarea.displayName = "Textarea";

package/src/editor/ui/Textarea/index.tsx

@@ -0,0 +1 @@
+export { Textarea } from "./Textarea";

package/src/editor/ui/Toggle/Toggle.tsx

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+import cn from "classnames";
+
+export type ToggleProps = {
+  active?: boolean;
+  onChange: (active: boolean) => void;
+  size?: "small" | "large";
+};
+
+export const Toggle = ({ onChange, active = false, size = "large" }: ToggleProps) => {
+  const state = active ? "checked" : "unchecked";
+  const value = active ? "on" : "off";
+
+  const buttonClass = cn(
+    "inline-flex cursor-pointer items-center rounded-full border-transparent transition-colors",
+    active ? "bg-black" : "bg-neutral-200 hover:bg-neutral-300",
+    active ? "dark:bg-white" : "dark:bg-neutral-800 dark:hover:bg-neutral-700",
+    size === "small" && "h-3 w-6 px-0.5",
+    size === "large" && "h-5 w-9 px-0.5",
+  );
+
+  const pinClass = cn(
+    "pointer-events-none block rounded-full transition-transform",
+    "bg-white dark:bg-black",
+    size === "small" && "h-2 w-2",
+    size === "large" && "h-4 w-4",
+    active ? cn(size === "small" ? "translate-x-3" : "", size === "large" ? "translate-x-4" : "") : "translate-x-0",
+  );
+
+  const handleChange = useCallback(() => {
+    onChange(!active);
+  }, [active, onChange]);
+
+  return (
+    <button className={buttonClass} data-state={state} onClick={handleChange} type="button" value={value}>
+      <span className={pinClass} data-state={state} />
+    </button>
+  );
+};

package/src/editor/ui/Toggle/index.tsx

@@ -0,0 +1 @@
+export { Toggle } from "./Toggle";

package/src/editor/ui/Toolbar.tsx

@@ -0,0 +1,107 @@
+import { type ButtonHTMLAttributes, forwardRef, type HTMLProps } from "react";
+
+import { cn } from "../utils";
+import { Button, type ButtonProps } from "./Button";
+import { Surface } from "./Surface";
+import Tooltip from "./Tooltip";
+
+export type ToolbarWrapperProps = {
+  shouldShowContent?: boolean;
+  isVertical?: boolean;
+} & HTMLProps<HTMLDivElement>;
+
+const ToolbarWrapper = forwardRef<HTMLDivElement, ToolbarWrapperProps>(
+  ({ shouldShowContent = true, children, isVertical = false, className, ...rest }, ref) => {
+    const toolbarClassName = cn(
+      "inline-flex h-full gap-0.5 text-black leading-none",
+      isVertical ? "flex-col p-2" : "flex-row items-center p-1",
+      className,
+    );
+
+    return (
+      shouldShowContent && (
+        <Surface className={toolbarClassName} {...rest} ref={ref}>
+          {children}
+        </Surface>
+      )
+    );
+  },
+);
+
+ToolbarWrapper.displayName = "Toolbar";
+
+export type ToolbarDividerProps = {
+  horizontal?: boolean;
+} & HTMLProps<HTMLDivElement>;
+
+const ToolbarDivider = forwardRef<HTMLDivElement, ToolbarDividerProps>(({ horizontal, className, ...rest }, ref) => {
+  const dividerClassName = cn(
+    "bg-neutral-200 dark:bg-neutral-800",
+    horizontal
+      ? "my-1 h-[1px] w-full min-w-[1.5rem] first:mt-0 last:mt-0"
+      : "mx-1 h-full min-h-[1.5rem] w-[1px] first:ml-0 last:mr-0",
+    className,
+  );
+
+  return <div className={dividerClassName} ref={ref} {...rest} />;
+});
+
+ToolbarDivider.displayName = "Toolbar.Divider";
+
+export type ToolbarButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  active?: boolean;
+  activeClassname?: string;
+  tooltip?: string;
+  tooltipShortcut?: string[];
+  buttonSize?: ButtonProps["buttonSize"];
+  variant?: ButtonProps["variant"];
+};
+
+const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (
+    {
+      children,
+      buttonSize = "icon",
+      variant = "ghost",
+      className,
+      tooltip,
+      tooltipShortcut,
+      activeClassname = "!bg-neutral-200 dark:!bg-neutral-800",
+      ...rest
+    },
+    ref,
+  ) => {
+    const buttonClass = cn("!w-auto min-w-[2rem] gap-1 px-2", className);
+
+    const content = (
+      <Button
+        activeClassname={activeClassname}
+        buttonSize={buttonSize}
+        className={buttonClass}
+        ref={ref}
+        variant={variant}
+        {...rest}
+      >
+        {children}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <Tooltip shortcut={tooltipShortcut} title={tooltip}>
+          {content}
+        </Tooltip>
+      );
+    }
+
+    return content;
+  },
+);
+
+ToolbarButton.displayName = "ToolbarButton";
+
+export const Toolbar = {
+  Wrapper: ToolbarWrapper,
+  Divider: ToolbarDivider,
+  Button: ToolbarButton,
+};

package/src/editor/ui/Tooltip/index.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { type ReactElement, useCallback } from "react";
+import Tippy from "rb-tippyjs-react/headless";
+
+import type { TippyProps, TooltipProps } from "./types";
+
+const isMac = typeof window !== "undefined" ? navigator.platform.toUpperCase().indexOf("MAC") >= 0 : false;
+
+const ShortcutKey = ({ children }: { children: string }): ReactElement => {
+  const className =
+    "inline-flex items-center justify-center w-5 h-5 p-1 text-[0.625rem] rounded font-semibold leading-none border border-neutral-200 text-neutral-500 border-b-2";
+
+  if (children === "Mod") {
+    return <kbd className={className}>{isMac ? "⌘" : "Ctrl"}</kbd>; // ⌃
+  }
+
+  if (children === "Shift") {
+    return <kbd className={className}>⇧</kbd>;
+  }
+
+  if (children === "Alt") {
+    return <kbd className={className}>{isMac ? "⌥" : "Alt"}</kbd>;
+  }
+
+  return <kbd className={className}>{children}</kbd>;
+};
+
+export const Tooltip = ({
+  children,
+  enabled = true,
+  title,
+  shortcut,
+  tippyOptions = {},
+}: TooltipProps): ReactElement => {
+  const renderTooltip = useCallback(
+    (attrs: TippyProps) => (
+      <span
+        className="z-[999] flex items-center gap-2 rounded-lg border border-neutral-100 bg-white px-2.5 py-1 shadow-sm"
+        data-escaped={attrs["data-escaped"]}
+        data-placement={attrs["data-placement"]}
+        data-reference-hidden={attrs["data-reference-hidden"]}
+        tabIndex={-1}
+      >
+        {title && <span className="font-medium text-neutral-500 text-xs">{title}</span>}
+        {shortcut && (
+          <span className="flex items-center gap-0.5">
+            {shortcut.map((shortcutKey) => (
+              <ShortcutKey key={shortcutKey}>{shortcutKey}</ShortcutKey>
+            ))}
+          </span>
+        )}
+      </span>
+    ),
+    [shortcut, title],
+  );
+
+  if (enabled) {
+    return (
+      <Tippy
+        appendTo={document.body}
+        delay={500}
+        offset={[0, 8]}
+        touch={false}
+        zIndex={99999}
+        {...tippyOptions}
+        render={renderTooltip}
+      >
+        <span>{children}</span>
+      </Tippy>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default Tooltip;

package/src/editor/ui/Tooltip/types.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { Placement, Props } from "tippy.js";
+
+export interface TooltipProps {
+  children?: string | React.ReactNode;
+  enabled?: boolean;
+  title?: string;
+  shortcut?: string[];
+  tippyOptions?: Omit<Partial<Props>, "content">;
+  content?: React.ReactNode;
+}
+
+export interface TippyProps {
+  "data-placement": Placement;
+  "data-reference-hidden"?: string;
+  "data-escaped"?: string;
+}

package/src/editor/utils/cssVar.ts

@@ -0,0 +1,14 @@
+export const cssVar = (name: string, value?: string) => {
+  let currentName = name;
+  if (name.substring(0, 2) !== "--") {
+    currentName = `--${currentName}`;
+  }
+
+  if (value) {
+    document.documentElement.style.setProperty(currentName, value);
+  }
+
+  return getComputedStyle(document.body).getPropertyValue(currentName);
+};
+
+export default cssVar;

package/src/editor/utils/getRenderContainer.ts

@@ -0,0 +1,39 @@
+import type { Editor } from "@tiptap/react";
+
+export const getRenderContainer = (editor: Editor, nodeType: string) => {
+  const {
+    view,
+    state: {
+      selection: { from },
+    },
+  } = editor;
+
+  const elements = document.querySelectorAll(".has-focus");
+  const elementCount = elements.length;
+  const innermostNode = elements[elementCount - 1];
+  const element = innermostNode;
+
+  if (
+    (element?.getAttribute("data-type") && element.getAttribute("data-type") === nodeType) ||
+    element?.classList?.contains(nodeType)
+  ) {
+    return element;
+  }
+
+  const node = view.domAtPos(from).node as HTMLElement;
+  let container = node;
+
+  if (!container.tagName) {
+    container = node.parentElement!;
+  }
+
+  while (
+    container &&
+    !(container.getAttribute("data-type") && container.getAttribute("data-type") === nodeType) &&
+    !container.classList.contains(nodeType)
+  ) {
+    container = container.parentElement!;
+  }
+
+  return container;
+};

package/src/editor/utils/index.ts

@@ -0,0 +1,16 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: <randomElement>
+export function randomElement(array: any[]) {
+  return array[Math.floor(Math.random() * array.length)];
+}
+
+export { cssVar } from "./cssVar";
+export { getRenderContainer } from "./getRenderContainer";
+export { isCustomNodeSelected } from "./isCustomNodeSelected";
+export { isTextSelected } from "./isTextSelected";

package/src/editor/utils/isCustomNodeSelected.ts

@@ -0,0 +1,47 @@
+import CodeBlock from "@tiptap/extension-code-block";
+import type { Editor } from "@tiptap/react";
+
+import {
+  // AiWriter, AiImage,
+  Figcaption,
+  HorizontalRule,
+  ImageBlock,
+  ImageUpload,
+  Link,
+} from "../../editor/extension";
+// import { TableOfContentsNode } from '@/extensions/TableOfContentsNode'
+
+export const isTableGripSelected = (node: HTMLElement) => {
+  let container = node;
+
+  while (container && !["TD", "TH"].includes(container.tagName)) {
+    container = container.parentElement!;
+  }
+
+  const gripColumn = container?.querySelector?.("a.grip-column.selected");
+  const gripRow = container?.querySelector?.("a.grip-row.selected");
+
+  if (gripColumn || gripRow) {
+    return true;
+  }
+
+  return false;
+};
+
+export const isCustomNodeSelected = (editor: Editor, node: HTMLElement) => {
+  const customNodes = [
+    HorizontalRule.name,
+    ImageBlock.name,
+    ImageUpload.name,
+    CodeBlock.name,
+    Link.name,
+    // AiWriter.name,
+    // AiImage.name,
+    Figcaption.name,
+    // TableOfContentsNode.name,
+  ];
+
+  return customNodes.some((type) => editor.isActive(type)) || isTableGripSelected(node);
+};
+
+export default isCustomNodeSelected;