@open-cloud-initiative/editor-x 0.0.1

package/registry/editor/components/toolbars/link.tsx

@@ -0,0 +1,130 @@
+'use client'
+/* eslint-disable */
+// @ts-nocheck
+import { PopoverClose } from "@radix-ui/react-popover";
+import { Trash2, X } from "lucide-react";
+
+import React, { type FormEvent } from "react";
+
+import { cn } from "@/lib/utils";
+import { Button, type ButtonProps } from "components/ui/button";
+import { Input } from "components/ui/input";
+import { Label } from "components/ui/label";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/ui/tooltip";
+
+import { getUrlFromString } from "@/lib/tiptap-utils";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/ui/popover";
+import { useToolbar } from "./toolbar-provider";
+
+const LinkToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, ...props }, ref) => {
+		const { editor } = useToolbar();
+		const [link, setLink] = React.useState("");
+
+		const handleSubmit = (e: FormEvent) => {
+			e.preventDefault();
+			const url = getUrlFromString(link);
+			url && editor?.chain().focus().setLink({ href: url }).run();
+		};
+
+		React.useEffect(() => {
+			setLink(editor?.getAttributes("link").href ?? "");
+		}, [editor]);
+
+		return (
+			<Popover>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<PopoverTrigger
+							disabled={!editor?.can().chain().setLink({ href: "" }).run()}
+							asChild
+						>
+							<Button
+								variant="ghost"
+								size="sm"
+								type="button"
+								className={cn(
+									"h-8 w-max px-3 font-normal",
+									editor?.isActive("link") && "bg-accent",
+									className,
+								)}
+								ref={ref}
+								{...props}
+							>
+								<p className="mr-2 text-base">↗</p>
+								<p className={"underline decoration-gray-7 underline-offset-4"}>
+									Link
+								</p>
+							</Button>
+						</PopoverTrigger>
+					</TooltipTrigger>
+					<TooltipContent>
+						<span>Link</span>
+					</TooltipContent>
+				</Tooltip>
+
+				<PopoverContent
+					onCloseAutoFocus={(e) => {
+						e.preventDefault();
+					}}
+					asChild
+					className="relative px-3 py-2.5"
+				>
+					<div className="relative">
+						<PopoverClose className="absolute right-3 top-3">
+							<X className="h-4 w-4" />
+						</PopoverClose>
+						<form onSubmit={handleSubmit}>
+							<Label>Link</Label>
+							<p className="text-sm text-gray-11">
+								Attach a link to the selected text
+							</p>
+							<div className="mt-3 flex flex-col items-end justify-end gap-3">
+								<Input
+									value={link}
+									onChange={(e) => {
+										setLink(e.target.value);
+									}}
+									className="w-full"
+									placeholder="https://example.com"
+								/>
+								<div className="flex items-center gap-3">
+									{editor?.getAttributes("link").href && (
+										<Button
+											type="reset"
+											size="sm"
+											className="h-8 text-gray-11"
+											variant="ghost"
+											onClick={() => {
+												editor?.chain().focus().unsetLink().run();
+												setLink("");
+											}}
+										>
+											<Trash2 className="mr-2 h-4 w-4" />
+											Remove
+										</Button>
+									)}
+									<Button size="sm" className="h-8">
+										{editor?.getAttributes("link").href ? "Update" : "Confirm"}
+									</Button>
+								</div>
+							</div>
+						</form>
+					</div>
+				</PopoverContent>
+			</Popover>
+		);
+	},
+);
+
+LinkToolbar.displayName = "LinkToolbar";
+
+export { LinkToolbar };

package/registry/editor/components/toolbars/mobile-toolbar-group.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'components/ui/button'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from 'components/ui/drawer'
+import { ChevronDown } from 'lucide-react'
+import React, { useState } from 'react'
+
+interface MobileToolbarGroupProps {
+    label: string
+    children: React.ReactNode
+    className?: string
+}
+
+export const MobileToolbarGroup = ({ label, children, className }: MobileToolbarGroupProps) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const closeDrawer = () => setIsOpen(false)
+
+    return (
+        <Drawer open={isOpen} onOpenChange={setIsOpen}>
+            <DrawerTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    type="button"
+                    className={cn('h-8 w-max gap-1 px-3 font-normal', className)}
+                >
+                    {label}
+                    <ChevronDown className="h-4 w-4" />
+                </Button>
+            </DrawerTrigger>
+            <DrawerContent>
+                <DrawerHeader>
+                    <DrawerTitle className="text-start">{label}</DrawerTitle>
+                </DrawerHeader>
+                <div className="flex flex-col p-4">
+                    {React.Children.map(children, (child) =>
+                        React.isValidElement(child)
+                            ? React.cloneElement(child, { closeDrawer } as {
+                                  closeDrawer: () => void
+                              })
+                            : child,
+                    )}
+                </div>
+            </DrawerContent>
+        </Drawer>
+    )
+}
+
+export const MobileToolbarItem = ({
+    children,
+    active,
+    onClick,
+    closeDrawer,
+    ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean
+    closeDrawer?: () => void
+}) => (
+    <button
+        className={cn(
+            'flex w-full items-center rounded-md px-4 py-2 text-sm transition-colors hover:bg-accent',
+            active && 'bg-accent',
+        )}
+        onClick={(e) => {
+            onClick?.(e)
+            setTimeout(() => {
+                closeDrawer?.()
+            }, 100)
+        }}
+        {...props}
+    >
+        {children}
+    </button>
+)

package/registry/editor/components/toolbars/ordered-list.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { ListOrdered } from 'lucide-react'
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from 'components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
+import { useToolbar } from './toolbar-provider'
+
+const OrderedListToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, onClick, children, ...props }, ref) => {
+        const { editor } = useToolbar()
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        className={cn(
+                            'h-8 w-8 p-0 sm:h-9 sm:w-9',
+                            editor?.isActive('orderedList') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleOrderedList().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleOrderedList().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <ListOrdered className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Ordered list</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+OrderedListToolbar.displayName = 'OrderedListToolbar'
+
+export { OrderedListToolbar }

package/registry/editor/components/toolbars/redo.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Redo2 } from 'lucide-react'
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from 'components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
+import { useToolbar } from './toolbar-provider'
+
+const RedoToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, onClick, children, ...props }, ref) => {
+        const { editor } = useToolbar()
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        className={cn('h-8 w-8 p-0 sm:h-9 sm:w-9', className)}
+                        onClick={(e) => {
+                            editor?.chain().focus().redo().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().redo().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Redo2 className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Redo</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+RedoToolbar.displayName = 'RedoToolbar'
+
+export { RedoToolbar }

package/registry/editor/components/toolbars/strikethrough.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Strikethrough } from 'lucide-react'
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from 'components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
+import { useToolbar } from './toolbar-provider'
+
+const StrikeThroughToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, onClick, children, ...props }, ref) => {
+        const { editor } = useToolbar()
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        className={cn(
+                            'h-8 w-8 p-0 sm:h-9 sm:w-9',
+                            editor?.isActive('strike') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleStrike().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleStrike().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Strikethrough className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Strikethrough</span>
+                    <span className="ml-1 text-xs text-gray-11">(cmd + shift + x)</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+StrikeThroughToolbar.displayName = 'StrikeThroughToolbar'
+
+export { StrikeThroughToolbar }

package/registry/editor/components/toolbars/toolbar-provider.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import React from 'react'
+
+export interface ToolbarContextProps {
+    editor: Editor | null
+}
+
+export const ToolbarContext = React.createContext<ToolbarContextProps | null>(null)
+
+interface ToolbarProviderProps {
+    editor: Editor | null
+    children: React.ReactNode
+}
+
+export const ToolbarProvider = ({ editor, children }: ToolbarProviderProps) => {
+    return <ToolbarContext.Provider value={{ editor }}>{children}</ToolbarContext.Provider>
+}
+
+export const useToolbar = () => {
+    const context = React.useContext(ToolbarContext)
+
+    if (!context) {
+        throw new Error('useToolbar must be used within a ToolbarProvider')
+    }
+
+    return context
+}

package/registry/editor/components/toolbars/underline.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { UnderlineIcon } from 'lucide-react'
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from 'components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
+import { useToolbar } from './toolbar-provider'
+
+const UnderlineToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, onClick, children, ...props }, ref) => {
+        const { editor } = useToolbar()
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        className={cn(
+                            'h-8 w-8 p-0 sm:h-9 sm:w-9',
+                            editor?.isActive('underline') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleUnderline().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleUnderline().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <UnderlineIcon className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Underline</span>
+                    <span className="ml-1 text-xs text-gray-11">(cmd + u)</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+UnderlineToolbar.displayName = 'UnderlineToolbar'
+
+export { UnderlineToolbar }

package/registry/editor/components/toolbars/undo.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from 'components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
+import { Undo2 } from 'lucide-react'
+import React from 'react'
+import { useToolbar } from './toolbar-provider'
+
+const UndoToolbar = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, onClick, children, ...props }, ref) => {
+        const { editor } = useToolbar()
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        className={cn('h-8 w-8 p-0 sm:h-9 sm:w-9', className)}
+                        onClick={(e) => {
+                            editor?.chain().focus().undo().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().undo().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Undo2 className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Undo</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+UndoToolbar.displayName = 'UndoToolbar'
+
+export { UndoToolbar }

package/registry/editor/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/registry/editor/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/registry/editor/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }