@meta-1/editor 0.0.29 → 1.0.0

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

@@ -0,0 +1,299 @@
+"use client"
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { Button } from "../button"
+import { MessageSquareIcon } from "../../tiptap-icons/message-square-icon"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+import "./sidebar.css"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "26rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsBreakpoint()
+    const [openMobile, setOpenMobile] = useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={`sidebar-wrapper${className ? ` ${className}` : ""}`}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    collapsible?: "offcanvas"
+  }
+>(
+  (
+    { side = "left", collapsible = "offcanvas", className, children, ...props },
+    ref
+  ) => {
+    const { state } = useSidebar()
+
+    return (
+      <div
+        ref={ref}
+        className="sidebar"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className="sidebar-gap"
+          data-collapsible={state === "collapsed" ? collapsible : ""}
+          data-side={side}
+        />
+        <div
+          className={`sidebar-container${className ? ` ${className}` : ""}`}
+          data-state={state}
+          data-collapsible={state === "collapsed" ? collapsible : ""}
+          data-side={side}
+          {...props}
+        >
+          <div data-sidebar="sidebar" className="sidebar-main">
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = forwardRef<
+  React.ComponentRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      data-style="ghost"
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <MessageSquareIcon className="tiptap-button-icon" />
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={`sidebar-rail${className ? ` ${className}` : ""}`}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={`sidebar-inset${className ? ` ${className}` : ""}`}
+        {...props}
+      />
+    )
+  }
+)
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={`sidebar-header${className ? ` ${className}` : ""}`}
+        {...props}
+      />
+    )
+  }
+)
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={`sidebar-footer${className ? ` ${className}` : ""}`}
+        {...props}
+      />
+    )
+  }
+)
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={`sidebar-content${className ? ` ${className}` : ""}`}
+        {...props}
+      />
+    )
+  }
+)
+SidebarContent.displayName = "SidebarContent"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+}

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

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

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

@@ -0,0 +1,26 @@
+"use client"
+
+export type SpacerOrientation = "horizontal" | "vertical"
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: SpacerOrientation
+  size?: string | number
+}
+
+export function Spacer({
+  orientation = "horizontal",
+  size,
+  style = {},
+  ...props
+}: SpacerProps) {
+  const computedStyle = {
+    ...style,
+    ...(orientation === "horizontal" && !size && { flex: 1 }),
+    ...(size && {
+      width: orientation === "vertical" ? "1px" : size,
+      height: orientation === "horizontal" ? "1px" : size,
+    }),
+  }
+
+  return <div {...props} style={computedStyle} />
+}

package/src/components/tiptap-ui-primitive/textarea-autosize/index.tsx

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

package/src/components/tiptap-ui-primitive/textarea-autosize/textarea-autosize.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { useState } from "react"
+import type { TextareaAutosizeProps } from "react-textarea-autosize"
+import ReactTextareaAutosize from "react-textarea-autosize"
+
+// -- Hooks --
+import { useIsomorphicLayoutEffect } from "../../../hooks/use-isomorphic-layout-effect"
+
+export function TextareaAutosize({ ...props }: TextareaAutosizeProps) {
+  const [isRerendered, setIsRerendered] = useState(false)
+
+  useIsomorphicLayoutEffect(() => setIsRerendered(true), [])
+
+  return isRerendered ? <ReactTextareaAutosize {...props} /> : null
+}
+
+TextareaAutosize.displayName = "TextareaAutosize"

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

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

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

@@ -0,0 +1,65 @@
+@import "tailwindcss";
+
+.tiptap-toolbar {
+  @apply flex items-center gap-1;
+}
+
+.tiptap-toolbar-group {
+  @apply flex items-center gap-0.5;
+}
+
+.tiptap-toolbar-group:empty {
+  @apply hidden;
+}
+
+.tiptap-toolbar-group:empty + .tiptap-separator,
+.tiptap-separator + .tiptap-toolbar-group:empty {
+  @apply hidden;
+}
+
+.tiptap-toolbar[data-variant="fixed"] {
+  @apply sticky top-0 z-10 w-full bg-white border-b border-gray-200 px-2 overflow-x-auto;
+  min-height: 2.75rem;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.dark .tiptap-toolbar[data-variant="fixed"] {
+  @apply bg-black border-gray-800;
+}
+
+.tiptap-toolbar[data-variant="fixed"]::-webkit-scrollbar {
+  display: none;
+}
+
+@media (max-width: 480px) {
+  .tiptap-toolbar[data-variant="fixed"] {
+    @apply absolute top-auto flex-nowrap justify-start border-t border-b-0;
+    height: calc(2.75rem + env(safe-area-inset-bottom, 0px));
+    padding: 0 0.5rem env(safe-area-inset-bottom, 0px);
+  }
+
+  .tiptap-toolbar[data-variant="fixed"] .tiptap-toolbar-group {
+    flex: 0 0 auto;
+  }
+}
+
+.tiptap-toolbar[data-variant="floating"] {
+  @apply p-[0.188rem] rounded-xl border border-gray-200 bg-white shadow-lg outline-none overflow-hidden;
+}
+
+.dark .tiptap-toolbar[data-variant="floating"] {
+  @apply border-gray-800 bg-black;
+}
+
+.tiptap-toolbar[data-variant="floating"][data-plain="true"] {
+  @apply p-0 rounded-none border-0 shadow-none bg-transparent;
+}
+
+@media screen and (max-width: 480px) {
+  .tiptap-toolbar[data-variant="floating"] {
+    @apply w-full rounded-none border-0 shadow-none;
+  }
+}

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

@@ -0,0 +1,123 @@
+"use client"
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
+import { Separator } from "../separator"
+import "./toolbar.css"
+import { cn } from "../../../lib/tiptap-utils"
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation"
+import { useComposedRef } from "../../../hooks/use-composed-ref"
+
+type BaseProps = React.HTMLAttributes<HTMLDivElement>
+
+interface ToolbarProps extends BaseProps {
+  variant?: "floating" | "fixed"
+}
+
+const useToolbarNavigation = (
+  toolbarRef: React.RefObject<HTMLDivElement | null>
+) => {
+  const [items, setItems] = useState<HTMLElement[]>([])
+
+  const collectItems = useCallback(() => {
+    if (!toolbarRef.current) return []
+    return Array.from(
+      toolbarRef.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'
+      )
+    )
+  }, [toolbarRef])
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const updateItems = () => setItems(collectItems())
+
+    updateItems()
+    const observer = new MutationObserver(updateItems)
+    observer.observe(toolbar, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }, [collectItems, toolbarRef])
+
+  const { selectedIndex } = useMenuNavigation<HTMLElement>({
+    containerRef: toolbarRef,
+    items,
+    orientation: "horizontal",
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false,
+  })
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const handleFocus = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target))
+        target.setAttribute("data-focus-visible", "true")
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.removeAttribute("data-focus-visible")
+    }
+
+    toolbar.addEventListener("focus", handleFocus, true)
+    toolbar.addEventListener("blur", handleBlur, true)
+
+    return () => {
+      toolbar.removeEventListener("focus", handleFocus, true)
+      toolbar.removeEventListener("blur", handleBlur, true)
+    }
+  }, [toolbarRef])
+
+  useEffect(() => {
+    if (selectedIndex !== undefined && items[selectedIndex]) {
+      items[selectedIndex].focus()
+    }
+  }, [selectedIndex, items])
+}
+
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ children, className, variant = "fixed", ...props }, ref) => {
+    const toolbarRef = useRef<HTMLDivElement>(null)
+    const composedRef = useComposedRef(toolbarRef, ref)
+    useToolbarNavigation(toolbarRef)
+
+    return (
+      <div
+        ref={composedRef}
+        role="toolbar"
+        aria-label="toolbar"
+        data-variant={variant}
+        className={cn("tiptap-toolbar", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Toolbar.displayName = "Toolbar"
+
+export const ToolbarGroup = forwardRef<HTMLDivElement, BaseProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn("tiptap-toolbar-group", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+ToolbarGroup.displayName = "ToolbarGroup"
+
+export const ToolbarSeparator = forwardRef<HTMLDivElement, BaseProps>(
+  ({ ...props }, ref) => (
+    <Separator ref={ref} orientation="vertical" decorative {...props} />
+  )
+)
+ToolbarSeparator.displayName = "ToolbarSeparator"

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

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

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

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+.tiptap-tooltip {
+  @apply z-[200] overflow-hidden rounded-md bg-gray-900 px-2 py-1.5 text-xs font-medium text-white text-center;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.dark .tiptap-tooltip {
+  @apply bg-white text-gray-600;
+}
+
+.tiptap-tooltip kbd {
+  @apply inline-block text-center align-baseline capitalize text-gray-400;
+  font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", sans-serif;
+}
+
+.dark .tiptap-tooltip kbd {
+  @apply text-gray-500;
+}