@meta-1/editor 0.0.28 → 1.0.0

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

@@ -1,109 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/src/editor/ui/Surface.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

package/src/editor/ui/Toolbar.tsx

@@ -1,107 +0,0 @@
-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

@@ -1,77 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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;