@meta-1/editor 0.0.29 → 1.0.0

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

@@ -0,0 +1,79 @@
+"use client"
+
+import { forwardRef } from "react"
+import { cn } from "../../../lib/tiptap-utils"
+import "./card.css"
+
+const Card = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn("tiptap-card", className)} {...props} />
+  }
+)
+Card.displayName = "Card"
+
+const CardHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-header", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardHeader.displayName = "CardHeader"
+
+const CardBody = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("tiptap-card-body", className)} {...props} />
+    )
+  }
+)
+CardBody.displayName = "CardBody"
+
+const CardItemGroup = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical"
+  }
+>(({ className, orientation = "vertical", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-orientation={orientation}
+      className={cn("tiptap-card-item-group", className)}
+      {...props}
+    />
+  )
+})
+CardItemGroup.displayName = "CardItemGroup"
+
+const CardGroupLabel = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-group-label", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardGroupLabel.displayName = "CardGroupLabel"
+
+const CardFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-footer", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardBody, CardItemGroup, CardGroupLabel }

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

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

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

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+.tiptap-combobox-list {
+  @apply h-full rounded-xl border border-gray-200 bg-white text-gray-600 p-1.5 shadow-lg outline-none max-w-64 overflow-y-auto;
+  max-height: var(--popover-available-height);
+  margin-block: 0.375rem;
+}
+
+.dark .tiptap-combobox-list {
+  @apply border-gray-800 bg-gray-900 text-gray-400;
+}
+
+.tiptap-combobox-list:empty {
+  display: none !important;
+}

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

@@ -0,0 +1,73 @@
+"use client"
+
+import { forwardRef } from "react"
+import * as Ariakit from "@ariakit/react"
+import { cn } from "../../../lib/tiptap-utils"
+import "./combobox.css"
+
+export function ComboboxProvider({ ...props }: Ariakit.ComboboxProviderProps) {
+  return (
+    <Ariakit.ComboboxProvider
+      includesBaseElement={false}
+      resetValueOnHide
+      {...props}
+    />
+  )
+}
+
+export const ComboboxList = forwardRef<
+  React.ComponentRef<typeof Ariakit.ComboboxList>,
+  React.ComponentProps<typeof Ariakit.ComboboxList>
+>(({ className, ...props }, ref) => {
+  return (
+    <Ariakit.ComboboxList
+      ref={ref}
+      className={cn("tiptap-combobox-list", className)}
+      {...props}
+    />
+  )
+})
+ComboboxList.displayName = "ComboboxList"
+
+export const ComboboxPopover = forwardRef<
+  React.ComponentRef<typeof Ariakit.ComboboxPopover>,
+  React.ComponentProps<typeof Ariakit.ComboboxPopover>
+>(({ className, ...props }, ref) => {
+  return (
+    <Ariakit.ComboboxPopover
+      ref={ref}
+      className={cn("tiptap-combobox-popover", className)}
+      {...props}
+    />
+  )
+})
+ComboboxPopover.displayName = "ComboboxPopover"
+
+export const Combobox = forwardRef<
+  React.ComponentRef<typeof Ariakit.Combobox>,
+  React.ComponentProps<typeof Ariakit.Combobox>
+>(({ className, ...props }, ref) => {
+  return (
+    <Ariakit.Combobox
+      ref={ref}
+      autoSelect
+      {...props}
+      className={cn("tiptap-combobox", className)}
+    />
+  )
+})
+Combobox.displayName = "Combobox"
+
+export const ComboboxItem = forwardRef<
+  React.ComponentRef<typeof Ariakit.ComboboxItem>,
+  React.ComponentProps<typeof Ariakit.ComboboxItem>
+>(({ className, ...props }, ref) => {
+  return (
+    <Ariakit.ComboboxItem
+      ref={ref}
+      className={cn("tiptap-combobox-item", className)}
+      {...props}
+    />
+  )
+})
+ComboboxItem.displayName = "ComboboxItem"

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

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

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

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+
+.tiptap-dropdown-menu {
+  @apply z-50 outline-none;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
+
+.tiptap-dropdown-menu > * {
+  max-height: var(--radix-dropdown-menu-content-available-height);
+}
+
+/* Animation states */
+.tiptap-dropdown-menu[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-dropdown-menu[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-dropdown-menu[data-side="top"],
+.tiptap-dropdown-menu[data-side="top-start"],
+.tiptap-dropdown-menu[data-side="top-end"] {
+  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-dropdown-menu[data-side="right"],
+.tiptap-dropdown-menu[data-side="right-start"],
+.tiptap-dropdown-menu[data-side="right-end"] {
+  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-dropdown-menu[data-side="bottom"],
+.tiptap-dropdown-menu[data-side="bottom-start"],
+.tiptap-dropdown-menu[data-side="bottom-end"] {
+  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-dropdown-menu[data-side="left"],
+.tiptap-dropdown-menu[data-side="left-start"],
+.tiptap-dropdown-menu[data-side="left-end"] {
+  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}

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

@@ -0,0 +1,98 @@
+"use client"
+
+import { forwardRef } from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "../../../lib/tiptap-utils"
+import "./dropdown-menu.css"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root modal={false} {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal {...props} />
+}
+
+const DropdownMenuTrigger = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ ...props }, ref) => <DropdownMenuPrimitive.Trigger ref={ref} {...props} />)
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuItem = DropdownMenuPrimitive.Item
+
+const DropdownMenuSubTrigger = DropdownMenuPrimitive.SubTrigger
+
+const DropdownMenuSubContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    portal?: boolean | React.ComponentProps<typeof DropdownMenuPortal>
+  }
+>(({ className, portal = true, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn("tiptap-dropdown-menu", className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === "object" ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    portal?: boolean
+  }
+>(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+      className={cn("tiptap-dropdown-menu", className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === "object" ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

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

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

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

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

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

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+.tiptap-input {
+  @apply block w-full h-8 text-sm font-normal rounded-md bg-transparent appearance-none outline-none;
+  line-height: 1.5;
+  padding: 0.375rem 0.5rem;
+}
+
+.tiptap-input::placeholder {
+  @apply text-gray-400 dark:text-gray-600;
+}
+
+.tiptap-input-clamp {
+  @apply min-w-48 pr-0 overflow-hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tiptap-input-clamp:focus {
+  text-overflow: clip;
+  overflow: visible;
+}
+
+.tiptap-input-group {
+  @apply relative flex flex-wrap items-stretch;
+}

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

@@ -0,0 +1,24 @@
+"use client"
+
+import { cn } from "../../../lib/tiptap-utils"
+import "./input.css"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input type={type} className={cn("tiptap-input", className)} {...props} />
+  )
+}
+
+function InputGroup({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("tiptap-input-group", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export { Input, InputGroup }

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

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

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

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+.tiptap-label {
+  @apply mt-3 mx-2 mb-1 text-xs font-semibold leading-normal capitalize text-gray-800;
+}
+
+.dark .tiptap-label {
+  @apply text-gray-200;
+}

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

@@ -0,0 +1,42 @@
+"use client"
+
+import { cn } from "../../../lib/tiptap-utils"
+import { createElement, forwardRef } from "react"
+import "./label.css"
+
+export interface BaseProps extends React.HTMLAttributes<HTMLElement> {
+  as?: "label" | "div"
+  onMouseDown?: React.MouseEventHandler<HTMLElement>
+}
+
+export type LabelProps<T extends "label" | "div"> = T extends "label"
+  ? BaseProps & { htmlFor?: string }
+  : BaseProps
+
+export const Label = forwardRef<
+  HTMLElement,
+  LabelProps<"label"> | LabelProps<"div">
+>(({ as = "div", ...props }, ref) => {
+  const renderProps = { ...props }
+
+  if (as === "label") {
+    renderProps.onMouseDown = (event: React.MouseEvent<HTMLElement>) => {
+      // only prevent text selection if clicking inside the label itself
+      const target = event.target as HTMLElement
+      if (target.closest("button, input, select, textarea")) return
+      props.onMouseDown?.(event)
+      // prevent text selection when double clicking label
+      if (!event.defaultPrevented && event.detail > 1) event.preventDefault()
+    }
+  }
+
+  return createElement(as, {
+    ...renderProps,
+    ref,
+    className: cn("tiptap-label", props.className),
+  })
+})
+
+Label.displayName = "Label"
+
+export default Label

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

@@ -0,0 +1,5 @@
+export * from "./menu"
+export * from "./menu-context"
+export * from "./menu-hooks"
+export * from "./menu-types"
+export * from "./menu-utils"

package/src/components/tiptap-ui-primitive/menu/menu-context.ts

@@ -0,0 +1,19 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { MenuContextValue } from "./menu-types"
+
+export const SearchableContext = createContext<boolean>(false)
+
+export const MenuContext = createContext<MenuContextValue>({
+  isRootMenu: false,
+  open: false,
+})
+
+export const useSearchableContext = (): boolean => {
+  return useContext(SearchableContext)
+}
+
+export const useMenuContext = (): MenuContextValue => {
+  return useContext(MenuContext)
+}

package/src/components/tiptap-ui-primitive/menu/menu-hooks.ts

@@ -0,0 +1,102 @@
+"use client"
+
+import { useCallback, useEffect, useMemo } from "react"
+import * as Ariakit from "@ariakit/react"
+import type {
+  ContextMenuAnchor,
+  UseContextMenuReturn,
+  UseMenuStoreReturn,
+} from "./menu-types"
+
+export function useComboboxValueState(): readonly [
+  string,
+  (value: string) => void,
+] {
+  const store = Ariakit.useComboboxContext()
+  const searchValue = Ariakit.useStoreState(store, "value") ?? ""
+
+  if (!store) {
+    throw new Error(
+      "useComboboxValueState must be used within ComboboxProvider"
+    )
+  }
+
+  return [searchValue, store.setValue] as const
+}
+
+export function useMenuPlacement(): string {
+  const store = Ariakit.useMenuStore()
+  const currentPlacement = Ariakit.useStoreState(
+    store,
+    (state) => state.currentPlacement?.split("-")[0] || "bottom"
+  )
+  return currentPlacement
+}
+
+export function useContextMenu(
+  anchorRect: ContextMenuAnchor
+): UseContextMenuReturn {
+  const menu = Ariakit.useMenuStore()
+
+  useEffect(() => {
+    if (anchorRect) {
+      menu.render()
+    }
+  }, [anchorRect, menu])
+
+  const getAnchorRect = useCallback(() => anchorRect, [anchorRect])
+
+  const show = useCallback(() => {
+    menu.show()
+    menu.setAutoFocusOnShow(true)
+  }, [menu])
+
+  return useMemo(
+    () => ({
+      store: menu,
+      getAnchorRect,
+      show,
+    }),
+    [menu, getAnchorRect, show]
+  )
+}
+
+export function useFloatingMenuStore(): UseMenuStoreReturn {
+  const menu = Ariakit.useMenuStore()
+
+  const show = useCallback(
+    (anchorElement: HTMLElement) => {
+      menu.setAnchorElement(anchorElement)
+      menu.show()
+      menu.setAutoFocusOnShow(true)
+    },
+    [menu]
+  )
+
+  return useMemo(
+    () => ({
+      store: menu,
+      show,
+    }),
+    [menu, show]
+  )
+}
+
+export function useMenuItemClick(
+  menu?: Ariakit.MenuStore,
+  preventClose?: boolean
+) {
+  return useCallback(
+    (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      const expandable = event.currentTarget.hasAttribute("aria-expanded")
+
+      if (expandable || preventClose) {
+        return false
+      }
+
+      menu?.hideAll()
+      return false
+    },
+    [menu, preventClose]
+  )
+}

package/src/components/tiptap-ui-primitive/menu/menu-types.ts

@@ -0,0 +1,56 @@
+"use client"
+
+import type * as React from "react"
+import type * as Ariakit from "@ariakit/react"
+
+export interface Action {
+  filterItems?: boolean
+  group?: string
+  icon?: React.ReactNode
+  items?: Action[]
+  keywords?: string[]
+  label?: string
+  value?: string
+}
+
+export interface MenuItemProps
+  extends Omit<Ariakit.ComboboxItemProps, "store"> {
+  group?: string
+  name?: string
+  parentGroup?: string
+  preventClose?: boolean
+}
+
+export interface MenuContextValue {
+  isRootMenu: boolean
+  open: boolean
+}
+
+export interface MenuProps extends Ariakit.MenuProviderProps {
+  trigger?: React.ReactNode
+  value?: string
+  onOpenChange?: Ariakit.MenuProviderProps["setOpen"]
+  onValueChange?: Ariakit.ComboboxProviderProps["setValue"]
+  onValuesChange?: Ariakit.MenuProviderProps["setValues"]
+}
+
+export interface MenuContentProps
+  extends React.ComponentProps<typeof Ariakit.Menu> {
+  onClickOutside?: (event: MouseEvent | TouchEvent | FocusEvent) => void
+}
+
+export interface ContextMenuAnchor {
+  x: number
+  y: number
+}
+
+export interface UseContextMenuReturn {
+  store: ReturnType<typeof Ariakit.useMenuStore>
+  getAnchorRect: () => ContextMenuAnchor
+  show: () => void
+}
+
+export interface UseMenuStoreReturn {
+  store: ReturnType<typeof Ariakit.useMenuStore>
+  show: (anchorElement: HTMLElement) => void
+}

package/src/components/tiptap-ui-primitive/menu/menu-utils.ts

@@ -0,0 +1,64 @@
+"use client"
+
+import type { Action } from "./menu-types"
+
+/**
+ * Filters menu items based on search value
+ * @param group - The action group containing items to filter
+ * @param searchValue - The search string to filter against
+ * @returns Filtered array of actions
+ */
+export function filterMenuItems(
+  { items = [], ...group }: Action,
+  searchValue: string
+): Action[] {
+  if (!searchValue.trim()) return items
+
+  const normalizedSearchValue = searchValue.toLowerCase().trim()
+
+  const groupKeywords = [group.label, ...(group.keywords || [])]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+
+  if (groupKeywords.includes(normalizedSearchValue)) {
+    return items
+  }
+
+  return items.filter((item) => {
+    if (item.filterItems) return true
+
+    const itemKeywords = [item.label, item.value, ...(item.keywords || [])]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase()
+
+    return itemKeywords.includes(normalizedSearchValue)
+  })
+}
+
+/**
+ * Filters menu groups based on search value
+ * @param menuGroups - Array of action groups to filter
+ * @param searchValue - The search string to filter against
+ * @returns Filtered array of action groups
+ */
+export function filterMenuGroups(
+  menuGroups: Action[],
+  searchValue: string
+): Action[] {
+  if (!searchValue.trim()) return menuGroups
+
+  return menuGroups.reduce<Action[]>((acc, group) => {
+    const filteredItems = filterMenuItems(group, searchValue)
+
+    if (filteredItems.length > 0) {
+      acc.push({
+        ...group,
+        items: filteredItems,
+      })
+    }
+
+    return acc
+  }, [])
+}