@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui-primitive/menu/menu.css

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+
+.tiptap-menu-content {
+  @apply z-50 flex flex-col h-full outline-none;
+  min-width: var(--popover-anchor-width);
+}
+
+.tiptap-menu-content[data-state="closed"] {
+  @apply hidden;
+}
+
+.tiptap-menu-content[data-state="open"] {
+  animation: popover 150ms ease-out;
+}
+
+.tiptap-menu-group {
+  @apply hidden;
+}
+
+.tiptap-menu-group:has([role="menuitem"]),
+.tiptap-menu-group:has([role="option"]) {
+  @apply block;
+}
+
+.tiptap-menu-item {
+  @apply w-full;
+}
+
+@keyframes popover {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes zoom {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/components/tiptap-ui-primitive/menu/menu.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react"
+import * as Ariakit from "@ariakit/react"
+
+// -- Hooks --
+import { useOnClickOutside } from "../../../hooks/use-on-click-outside"
+import { useComposedRef } from "../../../hooks/use-composed-ref"
+
+// -- Utils --
+import { cn } from "../../../lib/tiptap-utils"
+
+// -- UI Primitives --
+import {
+  ComboboxItem,
+  ComboboxProvider,
+} from "../combobox"
+import { Label } from "../label"
+
+// -- Local imports --
+import type {
+  MenuProps,
+  MenuContentProps,
+  MenuItemProps,
+} from "./"
+import {
+  SearchableContext,
+  MenuContext,
+  useSearchableContext,
+  useMenuContext,
+} from "./"
+import {
+  useMenuPlacement,
+  useMenuItemClick,
+} from "./"
+
+// -- Styles --
+import "./menu.css"
+
+export function Menu({
+  children,
+  trigger,
+  value,
+  onOpenChange,
+  onValueChange,
+  onValuesChange,
+  ...props
+}: MenuProps) {
+  const isRootMenu = !Ariakit.useMenuContext()
+  const [open, setOpen] = useState<boolean>(false)
+  const searchable = !!onValuesChange || isRootMenu
+
+  const handleOpenChange = useCallback(
+    (v: boolean) => {
+      if (props.open === undefined) {
+        setOpen(v)
+      }
+      onOpenChange?.(v)
+    },
+    [props.open, onOpenChange]
+  )
+
+  const menuContextValue = useMemo(
+    () => ({
+      isRootMenu,
+      open: props.open ?? open,
+    }),
+    [isRootMenu, props.open, open]
+  )
+
+  const menuProvider = (
+    <Ariakit.MenuProvider
+      open={open}
+      setOpen={handleOpenChange}
+      setValues={onValuesChange}
+      showTimeout={100}
+      {...props}
+    >
+      {trigger}
+      <MenuContext.Provider value={menuContextValue}>
+        <SearchableContext.Provider value={searchable}>
+          {children}
+        </SearchableContext.Provider>
+      </MenuContext.Provider>
+    </Ariakit.MenuProvider>
+  )
+
+  if (searchable) {
+    return (
+      <ComboboxProvider value={value} setValue={onValueChange}>
+        {menuProvider}
+      </ComboboxProvider>
+    )
+  }
+
+  return menuProvider
+}
+
+export function MenuContent({
+  children,
+  className,
+  ref,
+  onClickOutside,
+  ...props
+}: MenuContentProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const { open } = useMenuContext()
+  const side = useMenuPlacement()
+
+  useOnClickOutside(menuRef, onClickOutside || (() => {}))
+
+  return (
+    <Ariakit.Menu
+      ref={useComposedRef(menuRef, ref)}
+      className={cn("tiptap-menu-content", className)}
+      data-side={side}
+      data-state={open ? "open" : "closed"}
+      gutter={4}
+      flip
+      unmountOnHide
+      {...props}
+    >
+      {children}
+    </Ariakit.Menu>
+  )
+}
+
+export const MenuButton = forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuButton>
+>(({ className, ...props }, ref) => (
+  <Ariakit.MenuButton
+    ref={ref}
+    {...props}
+    className={cn("tiptap-menu-button", className)}
+  />
+))
+
+MenuButton.displayName = "MenuButton"
+
+export const MenuButtonArrow = forwardRef<
+  React.ComponentRef<typeof Ariakit.MenuButtonArrow>,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuButtonArrow>
+>(({ className, ...props }, ref) => (
+  <Ariakit.MenuButtonArrow
+    ref={ref}
+    {...props}
+    className={cn("tiptap-menu-button-arrow", className)}
+  />
+))
+
+MenuButtonArrow.displayName = "MenuButtonArrow"
+
+export const MenuGroup = forwardRef<
+  React.ComponentRef<typeof Ariakit.MenuGroup>,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuGroup>
+>(({ className, ...props }, ref) => (
+  <Ariakit.MenuGroup
+    ref={ref}
+    {...props}
+    className={cn("tiptap-menu-group", className)}
+  />
+))
+
+MenuGroup.displayName = "MenuGroup"
+
+export const MenuGroupLabel = forwardRef<
+  React.ComponentRef<typeof Ariakit.MenuGroupLabel>,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuGroupLabel>
+>((props, ref) => <Label ref={ref} {...props} />)
+
+MenuGroupLabel.displayName = "MenuGroupLabel"
+
+export const MenuItemCheck = forwardRef<
+  React.ComponentRef<typeof Ariakit.MenuItemCheck>,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuItemCheck>
+>(({ className, ...props }, ref) => (
+  <Ariakit.MenuItemCheck
+    ref={ref}
+    {...props}
+    className={cn("tiptap-menu-item-check", className)}
+  />
+))
+
+MenuItemCheck.displayName = "MenuItemCheck"
+
+export const MenuItemRadio = forwardRef<
+  React.ComponentRef<typeof Ariakit.MenuItemRadio>,
+  React.ComponentPropsWithoutRef<typeof Ariakit.MenuItemRadio>
+>(({ className, ...props }, ref) => (
+  <Ariakit.MenuItemRadio
+    ref={ref}
+    {...props}
+    className={cn("tiptap-menu-item-radio", className)}
+  />
+))
+
+MenuItemRadio.displayName = "MenuItemRadio"
+
+export const MenuItem = function MenuItem({
+  name,
+  value,
+  preventClose,
+  className,
+  ...props
+}: MenuItemProps) {
+  const menu = Ariakit.useMenuContext()
+  const searchable = useSearchableContext()
+
+  const hideOnClick = useMenuItemClick(menu, preventClose)
+
+  const itemProps: MenuItemProps = {
+    blurOnHoverEnd: false,
+    focusOnHover: true,
+    className: cn("tiptap-menu-item", className),
+    ...props,
+  }
+
+  if (!searchable) {
+    if (name && value) {
+      return (
+        <MenuItemRadio
+          {...itemProps}
+          hideOnClick={true}
+          name={name}
+          value={value}
+        />
+      )
+    }
+
+    return <Ariakit.MenuItem {...itemProps} />
+  }
+
+  return <ComboboxItem {...itemProps} hideOnClick={hideOnClick} />
+}

package/src/components/tiptap-ui-primitive/popover/index.tsx

@@ -0,0 +1 @@
+export * from "./popover"

package/src/components/tiptap-ui-primitive/popover/popover.css

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+
+.tiptap-popover {
+  @apply z-50 outline-none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  max-height: var(--radix-popover-content-available-height);
+}
+
+.tiptap-popover > * {
+  max-height: var(--radix-popover-content-available-height);
+}
+
+/* Animation states */
+.tiptap-popover[data-state="open"] {
+  animation:
+    fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+    zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-popover[data-state="closed"] {
+  animation:
+    fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+    zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Position-based animations */
+.tiptap-popover[data-side="top"],
+.tiptap-popover[data-side="top-start"],
+.tiptap-popover[data-side="top-end"] {
+  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-popover[data-side="right"],
+.tiptap-popover[data-side="right-start"],
+.tiptap-popover[data-side="right-end"] {
+  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-popover[data-side="bottom"],
+.tiptap-popover[data-side="bottom-start"],
+.tiptap-popover[data-side="bottom-end"] {
+  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-popover[data-side="left"],
+.tiptap-popover[data-side="left-start"],
+.tiptap-popover[data-side="left-end"] {
+  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}

package/src/components/tiptap-ui-primitive/popover/popover.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "../../../lib/tiptap-utils"
+import "./popover.css"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn("tiptap-popover", className)}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }

package/src/components/tiptap-ui-primitive/separator/index.tsx

@@ -0,0 +1 @@
+export * from "./separator"

package/src/components/tiptap-ui-primitive/separator/separator.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+.tiptap-separator {
+  @apply flex-shrink-0 bg-gray-200;
+}
+
+.dark .tiptap-separator {
+  @apply bg-gray-700;
+}
+
+.tiptap-separator[data-orientation="horizontal"] {
+  @apply w-full my-2;
+  height: 1px;
+}
+
+.tiptap-separator[data-orientation="vertical"] {
+  @apply h-6;
+  width: 1px;
+}

package/src/components/tiptap-ui-primitive/separator/separator.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { forwardRef } from "react"
+import "./separator.css"
+import { cn } from "../../../lib/tiptap-utils"
+
+export type Orientation = "horizontal" | "vertical"
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation
+  decorative?: boolean
+}
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ decorative, orientation = "vertical", className, ...divProps }, ref) => {
+    const ariaOrientation = orientation === "vertical" ? orientation : undefined
+    const semanticProps = decorative
+      ? { role: "none" }
+      : { "aria-orientation": ariaOrientation, role: "separator" }
+
+    return (
+      <div
+        className={cn("tiptap-separator", className)}
+        data-orientation={orientation}
+        {...semanticProps}
+        {...divProps}
+        ref={ref}
+      />
+    )
+  }
+)
+
+Separator.displayName = "Separator"

package/src/components/tiptap-ui-primitive/sidebar/index.tsx

@@ -0,0 +1 @@
+export * from "./sidebar"

package/src/components/tiptap-ui-primitive/sidebar/sidebar.css

@@ -0,0 +1,140 @@
+@import "tailwindcss";
+
+.sidebar {
+  @apply hidden md:block;
+}
+
+/* Sidebar wrapper */
+.sidebar-wrapper {
+  @apply flex min-h-screen w-full;
+}
+
+/* Main sidebar container */
+.sidebar-container {
+  @apply fixed top-0 bottom-0 z-10 h-screen hidden md:flex;
+  width: var(--sidebar-width);
+  transition:
+    left 0.2s linear,
+    right 0.2s linear,
+    width 0.2s linear;
+}
+
+.sidebar-container[data-side="left"] {
+  @apply left-0 border-r;
+}
+
+.sidebar-container[data-side="left"][data-collapsible="offcanvas"] {
+  left: calc(var(--sidebar-width) * -1);
+}
+
+.sidebar-container[data-side="right"] {
+  @apply right-0 border-l;
+}
+
+.sidebar-container[data-side="right"][data-collapsible="offcanvas"] {
+  right: calc(var(--sidebar-width) * -1);
+}
+
+/* The gap element for sidebar */
+.sidebar-gap {
+  @apply relative bg-transparent;
+  width: var(--sidebar-width);
+  transition: width 0.2s linear;
+}
+
+.sidebar-gap[data-collapsible="offcanvas"] {
+  @apply w-0;
+}
+
+.sidebar-gap[data-side="right"] {
+  transform: rotate(180deg);
+}
+
+/* Sidebar main content */
+.sidebar-main {
+  @apply flex h-full w-full flex-col bg-gray-100;
+}
+
+.dark .sidebar-main {
+  @apply bg-gray-900;
+}
+
+/* Sidebar rail for resizing */
+.sidebar-rail {
+  @apply absolute top-0 bottom-0 z-20 w-4 hidden sm:flex;
+  transform: translateX(-50%);
+  transition: all 0.2s linear;
+}
+
+.sidebar-rail::after {
+  content: "";
+  @apply absolute top-0 bottom-0 left-1/2 w-0.5;
+}
+
+.sidebar-rail:hover::after {
+  @apply bg-gray-100;
+}
+
+.dark .sidebar-rail:hover::after {
+  @apply bg-gray-900;
+}
+
+.sidebar-container[data-side="left"] .sidebar-rail {
+  @apply right-[-1rem] cursor-w-resize;
+}
+
+.sidebar-container[data-side="right"] .sidebar-rail {
+  @apply left-0 cursor-e-resize;
+}
+
+.sidebar-container[data-side="left"][data-state="collapsed"] .sidebar-rail {
+  @apply cursor-e-resize;
+}
+
+.sidebar-container[data-side="right"][data-state="collapsed"] .sidebar-rail {
+  @apply cursor-w-resize;
+}
+
+.sidebar-container[data-collapsible="offcanvas"] .sidebar-rail {
+  transform: translateX(0);
+}
+
+.sidebar-container[data-collapsible="offcanvas"] .sidebar-rail::after {
+  @apply left-full;
+}
+
+.sidebar-container[data-collapsible="offcanvas"] .sidebar-rail:hover {
+  @apply bg-gray-100;
+}
+
+.dark .sidebar-container[data-collapsible="offcanvas"] .sidebar-rail:hover {
+  @apply bg-gray-900;
+}
+
+.sidebar-container[data-side="left"][data-collapsible="offcanvas"] .sidebar-rail {
+  @apply right-[-0.5rem];
+}
+
+.sidebar-container[data-side="right"][data-collapsible="offcanvas"] .sidebar-rail {
+  @apply left-[-0.5rem];
+}
+
+/* Inset content */
+.sidebar-inset {
+  @apply relative flex w-full flex-1 flex-col;
+}
+
+/* Sidebar header */
+.sidebar-header {
+  @apply flex flex-col gap-2 p-2;
+}
+
+/* Sidebar footer */
+.sidebar-footer {
+  @apply flex flex-col gap-2 p-2;
+}
+
+/* Sidebar content */
+.sidebar-content {
+  @apply flex min-h-0 flex-1 flex-col gap-2 overflow-auto;
+}