@open-cloud-initiative/editor-x 0.0.1

package/registry/editor/components/toolbars/code-block.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Code } 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 CodeBlockToolbar = 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('codeBlock') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleCodeBlock().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleCodeBlock().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Code className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Code Block</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+CodeBlockToolbar.displayName = 'CodeBlockToolbar'
+
+export { CodeBlockToolbar }

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

@@ -0,0 +1,43 @@
+'use client'
+
+import { Code2 } 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 CodeToolbar = 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('code') && 'bg-accent', className)}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleCode().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleCode().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Code2 className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Code</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+CodeToolbar.displayName = 'CodeToolbar'
+
+export { CodeToolbar }

package/registry/editor/components/toolbars/color-and-highlight.tsx

@@ -0,0 +1,215 @@
+'use client'
+/* eslint-disable */
+// @ts-nocheck
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useMediaQuery } from "@/hooks/use-media-querry";
+import { cn } from "@/lib/utils";
+import type { Extension } from "@tiptap/core";
+import type { ColorOptions } from "@tiptap/extension-color";
+import type { HighlightOptions } from "@tiptap/extension-highlight";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { MobileToolbarGroup, MobileToolbarItem } from "./mobile-toolbar-group";
+import { useToolbar } from "./toolbar-provider";
+
+type TextStylingExtensions =
+	| Extension<ColorOptions, any>
+	| Extension<HighlightOptions, any>;
+
+const TEXT_COLORS = [
+	{ name: "Default", color: "var(--editor-text-default)" },
+	{ name: "Gray", color: "var(--editor-text-gray)" },
+	{ name: "Brown", color: "var(--editor-text-brown)" },
+	{ name: "Orange", color: "var(--editor-text-orange)" },
+	{ name: "Yellow", color: "var(--editor-text-yellow)" },
+	{ name: "Green", color: "var(--editor-text-green)" },
+	{ name: "Blue", color: "var(--editor-text-blue)" },
+	{ name: "Purple", color: "var(--editor-text-purple)" },
+	{ name: "Pink", color: "var(--editor-text-pink)" },
+	{ name: "Red", color: "var(--editor-text-red)" },
+];
+
+const HIGHLIGHT_COLORS = [
+	{ name: "Default", color: "var(--editor-highlight-default)" },
+	{ name: "Gray", color: "var(--editor-highlight-gray)" },
+	{ name: "Brown", color: "var(--editor-highlight-brown)" },
+	{ name: "Orange", color: "var(--editor-highlight-orange)" },
+	{ name: "Yellow", color: "var(--editor-highlight-yellow)" },
+	{ name: "Green", color: "var(--editor-highlight-green)" },
+	{ name: "Blue", color: "var(--editor-highlight-blue)" },
+	{ name: "Purple", color: "var(--editor-highlight-purple)" },
+	{ name: "Pink", color: "var(--editor-highlight-pink)" },
+	{ name: "Red", color: "var(--editor-highlight-red)" },
+];
+
+interface ColorHighlightButtonProps {
+	name: string;
+	color: string;
+	isActive: boolean;
+	onClick: () => void;
+	isHighlight?: boolean;
+}
+
+const ColorHighlightButton = ({
+	name,
+	color,
+	isActive,
+	onClick,
+	isHighlight,
+}: ColorHighlightButtonProps) => (
+	<button
+		onClick={onClick}
+		className="flex w-full items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-gray-3"
+		type="button"
+	>
+		<div className="flex items-center space-x-2">
+			<div
+				className="rounded-sm border px-1 py-px font-medium"
+				style={isHighlight ? { backgroundColor: color } : { color }}
+			>
+				A
+			</div>
+			<span>{name}</span>
+		</div>
+		{isActive && <CheckIcon className="h-4 w-4" />}
+	</button>
+);
+
+export const ColorHighlightToolbar = () => {
+	const { editor } = useToolbar();
+	const isMobile = useMediaQuery("(max-width: 640px)");
+
+	const currentColor = editor?.getAttributes("textStyle").color;
+	const currentHighlight = editor?.getAttributes("highlight").color;
+
+	const handleSetColor = (color: string) => {
+		editor
+			?.chain()
+			.focus()
+			.setColor(color === currentColor ? "" : color)
+			.run();
+	};
+
+	const handleSetHighlight = (color: string) => {
+		editor
+			?.chain()
+			.focus()
+			.setHighlight(color === currentHighlight ? { color: "" } : { color })
+			.run();
+	};
+
+	const isDisabled =
+		!editor?.can().chain().setHighlight().run() ||
+		!editor?.can().chain().setColor("").run();
+
+	if (isMobile) {
+		return (
+			<div className="flex gap-1">
+				<MobileToolbarGroup label="Color">
+					{TEXT_COLORS.map(({ name, color }) => (
+						<MobileToolbarItem
+							key={name}
+							onClick={() => handleSetColor(color)}
+							active={currentColor === color}
+						>
+							<div className="flex items-center gap-2">
+								<div className="rounded-sm border px-2" style={{ color }}>
+									A
+								</div>
+								<span>{name}</span>
+							</div>
+						</MobileToolbarItem>
+					))}
+				</MobileToolbarGroup>
+
+				<MobileToolbarGroup label="Highlight">
+					{HIGHLIGHT_COLORS.map(({ name, color }) => (
+						<MobileToolbarItem
+							key={name}
+							onClick={() => handleSetHighlight(color)}
+							active={currentHighlight === color}
+						>
+							<div className="flex items-center gap-2">
+								<div
+									className="rounded-sm border px-2"
+									style={{ backgroundColor: color }}
+								>
+									A
+								</div>
+								<span>{name}</span>
+							</div>
+						</MobileToolbarItem>
+					))}
+				</MobileToolbarGroup>
+			</div>
+		);
+	}
+
+	return (
+		<Popover>
+			<div className="relative h-full">
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<PopoverTrigger disabled={isDisabled} asChild>
+							<Button
+								variant="ghost"
+								size="sm"
+								type="button"
+								style={{
+									color: currentColor,
+								}}
+								className={cn("h-8 w-14 p-0 font-normal")}
+							>
+								<span className="text-md">A</span>
+								<ChevronDownIcon className="ml-2 h-4 w-4" />
+							</Button>
+						</PopoverTrigger>
+					</TooltipTrigger>
+					<TooltipContent>Text Color & Highlight</TooltipContent>
+				</Tooltip>
+
+				<PopoverContent align="start" className="w-56 p-1 dark:bg-gray-2">
+					<ScrollArea className="max-h-80 overflow-y-auto pr-2">
+						<div className="mb-2.5 mt-2 px-2 text-xs text-gray-11">Color</div>
+						{TEXT_COLORS.map(({ name, color }) => (
+							<ColorHighlightButton
+								key={name}
+								name={name}
+								color={color}
+								isActive={currentColor === color}
+								onClick={() => handleSetColor(color)}
+							/>
+						))}
+
+						<Separator className="my-3" />
+
+						<div className="mb-2.5 w-full px-2 pr-3 text-xs text-gray-11">
+							Background
+						</div>
+						{HIGHLIGHT_COLORS.map(({ name, color }) => (
+							<ColorHighlightButton
+								key={name}
+								name={name}
+								color={color}
+								isActive={currentHighlight === color}
+								onClick={() => handleSetHighlight(color)}
+								isHighlight
+							/>
+						))}
+					</ScrollArea>
+				</PopoverContent>
+			</div>
+		</Popover>
+	);
+};

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

@@ -0,0 +1,77 @@
+'use client'
+
+import { useCurrentEditor } from '@tiptap/react'
+import { ScrollArea, ScrollBar } from 'components/ui/scroll-area'
+import { Separator } from 'components/ui/separator'
+import { TooltipProvider } from 'components/ui/tooltip'
+import { AlignmentTooolbar } from './alignment'
+import { BlockquoteToolbar } from './blockquote'
+import { BoldToolbar } from './bold'
+import { BulletListToolbar } from './bullet-list'
+import { CodeToolbar } from './code'
+import { CodeBlockToolbar } from './code-block'
+import { ColorHighlightToolbar } from './color-and-highlight'
+import { HeadingsToolbar } from './headings'
+import { HorizontalRuleToolbar } from './horizontal-rule'
+import { ImagePlaceholderToolbar } from './image-placeholder-toolbar'
+import { ItalicToolbar } from './italic'
+import { LinkToolbar } from './link'
+import { OrderedListToolbar } from './ordered-list'
+import { RedoToolbar } from './redo'
+import { StrikeThroughToolbar } from './strikethrough'
+import { ToolbarProvider } from './toolbar-provider'
+import { UnderlineToolbar } from './underline'
+import { UndoToolbar } from './undo'
+
+export const EditorToolbar = () => {
+    const { editor } = useCurrentEditor()
+
+    return (
+        <div className="sticky top-0 z-20 w-full border-b bg-background hidden sm:block">
+            <ToolbarProvider editor={editor}>
+                <TooltipProvider>
+                    <ScrollArea className="h-fit py-0.5">
+                        <div>
+                            <div className="flex items-center gap-1 px-2">
+                                {/* History Group */}
+                                <UndoToolbar />
+                                <RedoToolbar />
+                                <Separator orientation="vertical" className="mx-1 h-7" />
+
+                                {/* Text Structure Group */}
+                                <HeadingsToolbar />
+                                <BlockquoteToolbar />
+                                <CodeToolbar />
+                                <CodeBlockToolbar />
+                                <Separator orientation="vertical" className="mx-1 h-7" />
+
+                                {/* Basic Formatting Group */}
+                                <BoldToolbar />
+                                <ItalicToolbar />
+                                <UnderlineToolbar />
+                                <StrikeThroughToolbar />
+                                <LinkToolbar />
+                                <Separator orientation="vertical" className="mx-1 h-7" />
+
+                                {/* Lists & Structure Group */}
+                                <BulletListToolbar />
+                                <OrderedListToolbar />
+                                <HorizontalRuleToolbar />
+                                <Separator orientation="vertical" className="mx-1 h-7" />
+
+                                {/* Alignment Group */}
+                                <AlignmentTooolbar />
+                                <Separator orientation="vertical" className="mx-1 h-7" />
+
+                                {/* Media & Styling Group */}
+                                <ImagePlaceholderToolbar />
+                                <ColorHighlightToolbar />
+                            </div>
+                        </div>
+                        <ScrollBar className="hidden" orientation="horizontal" />
+                    </ScrollArea>
+                </TooltipProvider>
+            </ToolbarProvider>
+        </div>
+    )
+}

package/registry/editor/components/toolbars/hard-break.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { WrapText } 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 HardBreakToolbar = 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().setHardBreak().run();
+							onClick?.(e);
+						}}
+						ref={ref}
+						{...props}
+					>
+						{children ?? <WrapText className="h-4 w-4" />}
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>
+					<span>Hard break</span>
+				</TooltipContent>
+			</Tooltip>
+		);
+	},
+);
+
+HardBreakToolbar.displayName = "HardBreakToolbar";
+
+export { HardBreakToolbar };

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

@@ -0,0 +1,97 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useMediaQuery } from '@/hooks/use-media-querry'
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-react'
+import React from 'react'
+import { MobileToolbarGroup, MobileToolbarItem } from './mobile-toolbar-group'
+import { useToolbar } from './toolbar-provider'
+
+const levels = [1, 2, 3, 4] as const
+
+export const HeadingsToolbar = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+    ({ className, ...props }, ref) => {
+        const { editor } = useToolbar()
+        const isMobile = useMediaQuery('(max-width: 640px)')
+        const activeLevel = levels.find((level) => editor?.isActive('heading', { level }))
+
+        if (isMobile) {
+            return (
+                <MobileToolbarGroup label={activeLevel ? `H${activeLevel}` : 'Normal'}>
+                    <MobileToolbarItem
+                        onClick={() => editor?.chain().focus().setParagraph().run()}
+                        active={!editor?.isActive('heading')}
+                    >
+                        Normal
+                    </MobileToolbarItem>
+                    {levels.map((level) => (
+                        <MobileToolbarItem
+                            key={level}
+                            onClick={() => editor?.chain().focus().toggleHeading({ level }).run()}
+                            active={editor?.isActive('heading', { level })}
+                        >
+                            H{level}
+                        </MobileToolbarItem>
+                    ))}
+                </MobileToolbarGroup>
+            )
+        }
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                type="button"
+                                className={cn(
+                                    'h-8 w-max gap-1 px-3 font-normal',
+                                    editor?.isActive('heading') && 'bg-accent',
+                                    className,
+                                )}
+                                ref={ref}
+                                {...props}
+                            >
+                                {activeLevel ? `H${activeLevel}` : 'Normal'}
+                                <ChevronDown className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                            <DropdownMenuItem
+                                onClick={() => editor?.chain().focus().setParagraph().run()}
+                                className={cn(
+                                    'flex items-center gap-2 h-fit',
+                                    !editor?.isActive('heading') && 'bg-accent',
+                                )}
+                            >
+                                Normal
+                            </DropdownMenuItem>
+                            {levels.map((level) => (
+                                <DropdownMenuItem
+                                    key={level}
+                                    onClick={() => editor?.chain().focus().toggleHeading({ level }).run()}
+                                    className={cn(
+                                        'flex items-center gap-2',
+                                        editor?.isActive('heading', { level }) && 'bg-accent',
+                                    )}
+                                >
+                                    H{level}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Headings</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+HeadingsToolbar.displayName = 'HeadingsToolbar'

package/registry/editor/components/toolbars/horizontal-rule.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { SeparatorHorizontal } 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 HorizontalRuleToolbar = 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().setHorizontalRule().run()
+                            onClick?.(e)
+                        }}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <SeparatorHorizontal className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Horizontal Rule</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+HorizontalRuleToolbar.displayName = 'HorizontalRuleToolbar'
+
+export { HorizontalRuleToolbar }

package/registry/editor/components/toolbars/image-placeholder-toolbar.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Image } 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 ImagePlaceholderToolbar = 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('image-placeholder') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            e.preventDefault()
+                            editor?.chain().focus().insertImagePlaceholder().run()
+                            onClick?.(e)
+                        }}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <Image className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Image</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+ImagePlaceholderToolbar.displayName = 'ImagePlaceholderToolbar'
+
+export { ImagePlaceholderToolbar }

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

@@ -0,0 +1,48 @@
+'use client'
+
+import { ItalicIcon } 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 ItalicToolbar = 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('italic') && 'bg-accent',
+                            className,
+                        )}
+                        onClick={(e) => {
+                            editor?.chain().focus().toggleItalic().run()
+                            onClick?.(e)
+                        }}
+                        disabled={!editor?.can().chain().focus().toggleItalic().run()}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children ?? <ItalicIcon className="h-4 w-4" />}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <span>Italic</span>
+                    <span className="ml-1 text-xs text-gray-11">(cmd + i)</span>
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+ItalicToolbar.displayName = 'ItalicToolbar'
+
+export { ItalicToolbar }