@open-cloud-initiative/editor-x 0.0.1

package/components/editorx/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/components/editorx/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/components/editorx/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/components/editorx/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/components/editorx/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/components/editorx/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/components/editorx/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/components/editorx/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/components/layout/theme-switcher.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { persistPreference } from '@/lib/preferences-storage'
+import { applyThemeMode } from '@/lib/theme-utils'
+import { usePreferencesStore } from '@/stores/preferences/preferences-provider'
+
+export function ThemeSwitcher() {
+    const themeMode = usePreferencesStore((s) => s.themeMode)
+    const setThemeMode = usePreferencesStore((s) => s.setThemeMode)
+
+    const handleValueChange = async () => {
+        const newTheme = themeMode === 'dark' ? 'light' : 'dark'
+        applyThemeMode(newTheme)
+        setThemeMode(newTheme)
+        persistPreference('theme_mode', newTheme)
+    }
+
+    return (
+        <Button variant="ghost" onClick={handleValueChange}>
+            {themeMode === 'dark' ? <Sun /> : <Moon />}
+        </Button>
+    )
+}

package/components/main-nav.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { navConfig } from '@/config/site'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export function MainNav() {
+    const pathname = usePathname()
+
+    return (
+        <div className="mr-4 hidden items-center space-x-6 md:flex">
+            <nav className="flex items-center gap-4 text-sm xl:gap-6">
+                {navConfig.mainNav.map((item, idx) => (
+                    <Button key={idx} variant="ghost">
+                        <Link key={item.path} href={item.path}>
+                            {item.title}
+                        </Link>
+                    </Button>
+                ))}
+            </nav>
+        </div>
+    )
+}

package/components/mobile-nav.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { navConfig } from '@/config/site'
+import { Button } from 'components/ui/button'
+import { Drawer, DrawerContent, DrawerTrigger } from 'components/ui/drawer'
+import Link from 'next/link'
+import * as React from 'react'
+
+export default function MobileNav() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <Drawer open={open} onOpenChange={setOpen}>
+            <DrawerTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth="1.5"
+                        stroke="currentColor"
+                        className="h-6 w-6"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
+                    </svg>
+                    <span className="sr-only">Toggle Menu</span>
+                </Button>
+            </DrawerTrigger>
+            <DrawerContent className="h-[50%]">
+                <nav className="flex flex-col space-y-3 p-4">
+                    <Link href="/" onClick={() => setOpen(false)}>
+                        Home
+                    </Link>
+                    {navConfig.mainNav.map((item) => (
+                        <Link key={item.path} href={item.path} onClick={() => setOpen(false)}>
+                            {item.title}
+                        </Link>
+                    ))}
+                </nav>
+            </DrawerContent>
+        </Drawer>
+    )
+}

package/components/open-in-v0-button.tsx

@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils'
+import { Button } from 'components/ui/button'
+
+export function OpenInV0Button({ name, className }: { name: string } & React.ComponentProps<typeof Button>) {
+    return (
+        <Button
+            aria-label="Open in v0"
+            className={cn(
+                'h-7 gap-1 rounded-lg shadow-none bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black',
+                className,
+            )}
+            asChild
+        >
+            <a
+                href={`https://v0.dev/chat/api/open?url=${process.env.NEXT_PUBLIC_BASE_URL}/r/${name}.json`}
+                target="_blank"
+                rel="noreferrer"
+            >
+                Open in{' '}
+                <svg
+                    viewBox="0 0 40 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 text-current"
+                >
+                    <path
+                        d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+                        fill="currentColor"
+                    ></path>
+                    <path
+                        d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+                        fill="currentColor"
+                    ></path>
+                </svg>
+            </a>
+        </Button>
+    )
+}

package/components/page-header.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils'
+
+function PageHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <section className={cn('border-grid border-b', className)} {...props}>
+            <div className="container-wrapper">
+                <div className="container flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">{children}</div>
+            </div>
+        </section>
+    )
+}
+
+function PageHeaderHeading({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+    return (
+        <h1
+            className={cn('text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]', className)}
+            {...props}
+        />
+    )
+}
+
+function PageHeaderDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+    return <p className={cn('max-w-2xl text-balance text-lg font-light text-foreground', className)} {...props} />
+}
+
+function PageActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('flex w-full items-center justify-start gap-2 pt-2', className)} {...props} />
+}
+
+export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }

package/components/site-footer.tsx

@@ -0,0 +1,41 @@
+import { siteConfig } from '@/config/site'
+import Link from 'next/link'
+
+export function SiteFooter() {
+    return (
+        <footer className="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
+            <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+                <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
+                    From{' '}
+                    <a
+                        href={siteConfig.authorUrl}
+                        className="font-medium underline underline-offset-4"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        {siteConfig.author}
+                    </a>{' '}
+                    Inspired by{' '}
+                    <a
+                        className="font-medium underline underline-offset-4"
+                        href="https://ui.shadcn.com"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        ShadCN UI Website
+                    </a>{' '}
+                    . The source code is available on{' '}
+                    <Link
+                        href={siteConfig.links.github}
+                        rel="noreferrer"
+                        target="_blank"
+                        className="font-medium underline underline-offset-4"
+                    >
+                        GitHub
+                    </Link>
+                    .
+                </p>
+            </div>
+        </footer>
+    )
+}