@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/fields/TiptapField.js

@@ -0,0 +1,857 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * TiptapField - Rich Text Editor Field for Puck
+ *
+ * A custom Puck field that provides WYSIWYG rich text editing using Tiptap.
+ * Outputs HTML content that can be rendered with dangerouslySetInnerHTML.
+ *
+ * Features:
+ * - Theme-aware "inherit" color option for text that adapts to dark/light mode
+ * - Expanded color palette organized by category
+ * - Strikethrough and highlight text styling
+ * - Font size options (small, normal, large, extra large)
+ * - Full toolbar with all formatting options
+ * - HTML source view/edit mode
+ */
+import { useCallback, memo, useState, useRef, useEffect } from 'react';
+import { useEditor, EditorContent, useEditorState } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Superscript from '@tiptap/extension-superscript';
+import Subscript from '@tiptap/extension-subscript';
+import { Extension } from '@tiptap/core';
+import { Bold, Italic, Underline, Strikethrough, Highlighter, Link, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, AlignJustify, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Quote, Code, RemoveFormatting, Palette, ALargeSmall, ChevronDown, Superscript as SuperscriptIcon, Subscript as SubscriptIcon, Minus, CornerDownLeft, Pilcrow, } from 'lucide-react';
+import { useTheme } from '../theme';
+import './tiptap-styles.css';
+import './richtext-output.css';
+// =============================================================================
+// Injected Editor Styles
+// =============================================================================
+const TIPTAP_EDITOR_STYLES = `
+.tiptap-editor h1 { font-size: 2em !important; font-weight: 700 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h2 { font-size: 1.5em !important; font-weight: 700 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h3 { font-size: 1.25em !important; font-weight: 600 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h4 { font-size: 1.1em !important; font-weight: 600 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h5 { font-size: 1em !important; font-weight: 600 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h6 { font-size: 0.9em !important; font-weight: 600 !important; margin: 1em 0 0.5em 0; }
+.tiptap-editor h1:first-child, .tiptap-editor h2:first-child, .tiptap-editor h3:first-child,
+.tiptap-editor h4:first-child, .tiptap-editor h5:first-child, .tiptap-editor h6:first-child { margin-top: 0; }
+.tiptap-editor ul, .tiptap-editor ol { padding-left: 1.5em !important; margin: 0 0 1em 0; }
+.tiptap-editor ul { list-style-type: disc !important; }
+.tiptap-editor ol { list-style-type: decimal !important; }
+.tiptap-editor li { margin: 0.25em 0; }
+.tiptap-editor li p { margin: 0; }
+.tiptap-editor blockquote { border-left: 4px solid var(--theme-elevation-200) !important; padding-left: 1em !important; margin: 1em 0 !important; font-style: italic !important; }
+.tiptap-editor p { margin: 0 0 1em 0; }
+.tiptap-editor p:last-child { margin-bottom: 0; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+`;
+// Inject styles once when module loads
+if (typeof document !== 'undefined') {
+    const styleId = 'tiptap-editor-injected-styles';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = TIPTAP_EDITOR_STYLES;
+        document.head.appendChild(style);
+    }
+}
+// =============================================================================
+// Styles
+// =============================================================================
+const styles = {
+    icon: {
+        width: '18px',
+        height: '18px',
+    },
+    iconSmall: {
+        width: '12px',
+        height: '12px',
+    },
+    toolbarButton: {
+        height: '28px',
+        width: '28px',
+        padding: 0,
+        flexShrink: 0,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        transition: 'background-color 0.15s',
+        border: 'none',
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+    },
+    toolbarButtonActive: {
+        backgroundColor: 'var(--theme-elevation-200)',
+    },
+    toolbarDivider: {
+        width: '1px',
+        height: '24px',
+        backgroundColor: 'var(--theme-elevation-300)',
+        margin: '0 4px',
+        flexShrink: 0,
+    },
+    dropdown: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        marginTop: '4px',
+        backgroundColor: 'var(--theme-bg)',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '6px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        zIndex: 50,
+        minWidth: '160px',
+    },
+    dropdownItem: {
+        width: '100%',
+        padding: '8px 12px',
+        textAlign: 'left',
+        fontSize: '14px',
+        transition: 'background-color 0.15s',
+        display: 'flex',
+        alignItems: 'center',
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+    },
+    dropdownLabel: {
+        padding: '4px 12px',
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+        fontWeight: 500,
+    },
+    dropdownSeparator: {
+        height: '1px',
+        backgroundColor: 'var(--theme-elevation-200)',
+        margin: '4px 0',
+    },
+    linkPopover: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        marginTop: '4px',
+        backgroundColor: 'var(--theme-bg)',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '6px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        zIndex: 50,
+        padding: '12px',
+        width: '320px',
+    },
+    input: {
+        width: '100%',
+        padding: '8px 12px',
+        border: '1px solid var(--theme-elevation-300)',
+        borderRadius: '6px',
+        fontSize: '14px',
+        outline: 'none',
+    },
+    buttonPrimary: {
+        padding: '6px 12px',
+        backgroundColor: 'var(--theme-elevation-900)',
+        color: 'var(--theme-bg)',
+        fontSize: '14px',
+        borderRadius: '6px',
+        border: 'none',
+        cursor: 'pointer',
+    },
+    buttonSecondary: {
+        padding: '6px 12px',
+        color: 'var(--theme-elevation-600)',
+        fontSize: '14px',
+        borderRadius: '6px',
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+    },
+    fieldContainer: {
+    // puck-field class
+    },
+    label: {
+        display: 'block',
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--theme-elevation-700)',
+        marginBottom: '8px',
+    },
+    editorWrapper: {
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '8px',
+        backgroundColor: 'var(--theme-bg)',
+        overflow: 'hidden',
+    },
+    toolbar: {
+        borderBottom: '1px solid var(--theme-elevation-200)',
+        backgroundColor: 'var(--theme-elevation-50)',
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: '4px',
+        padding: '8px',
+    },
+    editorContent: {
+        minHeight: '200px',
+        backgroundColor: 'var(--theme-bg)',
+    },
+    sourceTextarea: {
+        width: '100%',
+        minHeight: '200px',
+        padding: '16px',
+        fontFamily: 'monospace',
+        fontSize: '14px',
+        border: 'none',
+        resize: 'vertical',
+        outline: 'none',
+    },
+    fontSizeGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '4px',
+        padding: '0 8px 8px',
+    },
+    fontSizeButton: {
+        padding: '6px 8px',
+        fontSize: '12px',
+        borderRadius: '4px',
+        border: '1px solid var(--theme-elevation-200)',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        textAlign: 'center',
+        transition: 'background-color 0.15s',
+    },
+    customSizeInput: {
+        width: '64px',
+        padding: '4px 8px',
+        fontSize: '14px',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '4px',
+        outline: 'none',
+    },
+    customSizeSelect: {
+        padding: '4px',
+        fontSize: '14px',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '4px',
+        outline: 'none',
+    },
+    customSizeApply: {
+        padding: '4px 8px',
+        fontSize: '12px',
+        backgroundColor: 'var(--theme-elevation-900)',
+        color: 'var(--theme-bg)',
+        borderRadius: '4px',
+        border: 'none',
+        cursor: 'pointer',
+    },
+    sourceButton: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: '4px',
+        transition: 'background-color 0.15s',
+        fontSize: '12px',
+        height: '28px',
+        padding: '0 8px',
+        gap: '4px',
+        flexShrink: 0,
+        border: 'none',
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+    },
+    loadingState: {
+        minHeight: '200px',
+        padding: '16px',
+        color: 'var(--theme-elevation-400)',
+    },
+    // Color picker styles
+    colorPickerContainer: {
+        padding: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        minWidth: '240px',
+    },
+    colorPickerRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    colorPickerInput: {
+        width: '36px',
+        height: '36px',
+        padding: 0,
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        flexShrink: 0,
+    },
+    colorPickerHexInput: {
+        flex: 1,
+        height: '36px',
+        padding: '0 10px',
+        fontSize: '13px',
+        fontFamily: 'monospace',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '6px',
+        backgroundColor: 'var(--theme-input-bg)',
+        color: 'var(--theme-elevation-800)',
+        outline: 'none',
+    },
+    colorPickerPreview: {
+        width: '36px',
+        height: '36px',
+        borderRadius: '6px',
+        border: '1px solid var(--theme-elevation-200)',
+        flexShrink: 0,
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    colorPickerCheckerboard: {
+        position: 'absolute',
+        inset: 0,
+        backgroundImage: 'linear-gradient(45deg, #d0d0d0 25%, transparent 25%), linear-gradient(-45deg, #d0d0d0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d0d0d0 75%), linear-gradient(-45deg, transparent 75%, #d0d0d0 75%)',
+        backgroundSize: '8px 8px',
+        backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
+        backgroundColor: '#f0f0f0',
+    },
+    colorPickerOverlay: {
+        position: 'absolute',
+        inset: 0,
+    },
+    colorPickerOpacitySection: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    },
+    colorPickerOpacityHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    colorPickerOpacityLabel: {
+        fontSize: '11px',
+        color: 'var(--theme-elevation-500)',
+    },
+    colorPickerOpacityValue: {
+        fontSize: '11px',
+        fontFamily: 'monospace',
+        color: 'var(--theme-elevation-500)',
+    },
+    colorPickerOpacitySlider: {
+        position: 'relative',
+        height: '10px',
+        borderRadius: '5px',
+        overflow: 'hidden',
+        border: '1px solid var(--theme-elevation-200)',
+    },
+    colorPickerOpacityInputRange: {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0,
+        cursor: 'pointer',
+        margin: 0,
+    },
+    colorPickerOpacityThumb: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: '4px',
+        backgroundColor: 'white',
+        border: '1px solid var(--theme-elevation-400)',
+        borderRadius: '2px',
+        boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
+        pointerEvents: 'none',
+    },
+    colorPickerPresetsLabel: {
+        fontSize: '11px',
+        color: 'var(--theme-elevation-500)',
+        marginBottom: '4px',
+    },
+    colorPickerPresetsGrid: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+    },
+    colorPickerPresetButton: {
+        width: '22px',
+        height: '22px',
+        padding: 0,
+        borderRadius: '4px',
+        cursor: 'pointer',
+        border: '1px solid var(--theme-elevation-200)',
+        outline: 'none',
+        transition: 'transform 0.1s',
+    },
+    colorPickerPresetButtonSelected: {
+        width: '22px',
+        height: '22px',
+        padding: 0,
+        borderRadius: '4px',
+        cursor: 'pointer',
+        border: '2px solid var(--theme-elevation-800)',
+        outline: '2px solid var(--theme-elevation-200)',
+        outlineOffset: '1px',
+    },
+    colorPickerThemeButton: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        width: '100%',
+        padding: '8px',
+        border: '1px solid var(--theme-elevation-200)',
+        borderRadius: '6px',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        fontSize: '13px',
+        color: 'var(--theme-elevation-700)',
+        transition: 'background-color 0.15s',
+    },
+    colorPickerThemeSwatch: {
+        width: '20px',
+        height: '20px',
+        borderRadius: '4px',
+        border: '1px solid var(--theme-elevation-300)',
+        flexShrink: 0,
+        background: 'linear-gradient(135deg, #fff 50%, #1f2937 50%)',
+    },
+};
+const FontSize = Extension.create({
+    name: 'fontSize',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: element => element.style.fontSize?.replace(/['"]+/g, ''),
+                        renderHTML: attributes => {
+                            if (!attributes.fontSize) {
+                                return {};
+                            }
+                            return {
+                                style: `font-size: ${attributes.fontSize}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: (fontSize) => ({ chain }) => {
+                return chain().setMark('textStyle', { fontSize }).run();
+            },
+            unsetFontSize: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { fontSize: null })
+                    .removeEmptyTextStyle()
+                    .run();
+            },
+        };
+    },
+});
+// =============================================================================
+// Color Utilities
+// =============================================================================
+/**
+ * Validates and normalizes a hex color string
+ */
+function normalizeHex(hex) {
+    let clean = hex.replace(/^#/, '');
+    if (clean.length === 3) {
+        clean = clean.split('').map(c => c + c).join('');
+    }
+    if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {
+        return '';
+    }
+    return `#${clean.toLowerCase()}`;
+}
+/**
+ * Converts hex + opacity to rgba CSS string
+ */
+function hexToRgba(hex, opacity) {
+    const clean = hex.replace(/^#/, '');
+    const r = parseInt(clean.substring(0, 2), 16);
+    const g = parseInt(clean.substring(2, 4), 16);
+    const b = parseInt(clean.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+}
+/**
+ * Parses a color string (hex or rgba) and returns hex + opacity
+ */
+function parseColor(color) {
+    if (!color)
+        return { hex: '#000000', opacity: 100 };
+    // Handle rgba
+    const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+    if (rgbaMatch) {
+        const r = parseInt(rgbaMatch[1], 10);
+        const g = parseInt(rgbaMatch[2], 10);
+        const b = parseInt(rgbaMatch[3], 10);
+        const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+        const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        return { hex, opacity: Math.round(a * 100) };
+    }
+    // Handle hex
+    const normalized = normalizeHex(color);
+    if (normalized) {
+        return { hex: normalized, opacity: 100 };
+    }
+    return { hex: '#000000', opacity: 100 };
+}
+// =============================================================================
+// Font Sizes
+// =============================================================================
+const FONT_SIZES = [
+    { label: 'XS', value: '0.75rem', px: '12px' },
+    { label: 'Small', value: '0.875rem', px: '14px' },
+    { label: 'Normal', value: null, px: '16px' },
+    { label: 'Medium', value: '1.125rem', px: '18px' },
+    { label: 'Large', value: '1.25rem', px: '20px' },
+    { label: 'XL', value: '1.5rem', px: '24px' },
+    { label: '2XL', value: '1.875rem', px: '30px' },
+    { label: '3XL', value: '2.25rem', px: '36px' },
+    { label: '4XL', value: '3rem', px: '48px' },
+];
+const FONT_SIZE_UNITS = ['px', 'rem', 'em'];
+// =============================================================================
+// UI Components
+// =============================================================================
+function ToolbarButton({ onClick, isActive, title, children, }) {
+    const [hovered, setHovered] = useState(false);
+    return (_jsx("button", { type: "button", onClick: onClick, title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            ...styles.toolbarButton,
+            ...(isActive ? styles.toolbarButtonActive : {}),
+            ...(hovered && !isActive ? { backgroundColor: 'var(--theme-elevation-100)' } : {}),
+        }, children: children }));
+}
+function ToolbarDropdown({ trigger, children, title, isActive, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const dropdownRef = useRef(null);
+    const close = useCallback(() => setIsOpen(false), []);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            const activeElement = document.activeElement;
+            if (activeElement?.tagName === 'INPUT' && activeElement.type === 'color') {
+                return;
+            }
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return (_jsxs("div", { ref: dropdownRef, style: { position: 'relative', flexShrink: 0 }, children: [_jsx("button", { type: "button", onClick: () => setIsOpen(!isOpen), title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+                    ...styles.toolbarButton,
+                    ...(isActive ? styles.toolbarButtonActive : {}),
+                    ...(hovered && !isActive ? { backgroundColor: 'var(--theme-elevation-100)' } : {}),
+                }, children: trigger }), isOpen && (_jsx("div", { style: styles.dropdown, children: typeof children === 'function' ? children(close) : children }))] }));
+}
+function DropdownItem({ onClick, children, }) {
+    const [hovered, setHovered] = useState(false);
+    return (_jsx("button", { type: "button", onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            ...styles.dropdownItem,
+            ...(hovered ? { backgroundColor: 'var(--theme-elevation-100)' } : {}),
+        }, children: children }));
+}
+function DropdownLabel({ children }) {
+    return _jsx("div", { style: styles.dropdownLabel, children: children });
+}
+function DropdownSeparator() {
+    return _jsx("div", { style: styles.dropdownSeparator });
+}
+function TiptapColorPicker({ currentColor, onColorChange, onClose, showOpacity = true, mode = 'text', }) {
+    const theme = useTheme();
+    const presets = theme.colorPresets;
+    const parsed = parseColor(currentColor);
+    const [hex, setHex] = useState(parsed.hex);
+    const [hexInput, setHexInput] = useState(parsed.hex);
+    const [opacity, setOpacity] = useState(parsed.opacity);
+    const [hoverTheme, setHoverTheme] = useState(false);
+    // Apply color to editor (converts to rgba if opacity < 100)
+    const applyColor = useCallback((h, o) => {
+        if (o < 100) {
+            onColorChange(hexToRgba(h, o));
+        }
+        else {
+            onColorChange(h);
+        }
+    }, [onColorChange]);
+    const handleColorInputChange = useCallback((e) => {
+        const newHex = e.target.value;
+        setHex(newHex);
+        setHexInput(newHex);
+        applyColor(newHex, opacity);
+    }, [opacity, applyColor]);
+    const handleHexInputChange = useCallback((e) => {
+        const input = e.target.value;
+        setHexInput(input);
+        const normalized = normalizeHex(input);
+        if (normalized) {
+            setHex(normalized);
+            applyColor(normalized, opacity);
+        }
+    }, [opacity, applyColor]);
+    const handleHexInputBlur = useCallback(() => {
+        setHexInput(hex);
+    }, [hex]);
+    const handleOpacityChange = useCallback((e) => {
+        const newOpacity = parseInt(e.target.value, 10);
+        setOpacity(newOpacity);
+        applyColor(hex, newOpacity);
+    }, [hex, applyColor]);
+    const handlePresetClick = useCallback((preset) => {
+        setHex(preset.hex);
+        setHexInput(preset.hex);
+        setOpacity(100);
+        applyColor(preset.hex, 100);
+        onClose();
+    }, [applyColor, onClose]);
+    const handleClearColor = useCallback(() => {
+        onColorChange(null);
+        onClose();
+    }, [onColorChange, onClose]);
+    const previewColor = hexToRgba(hex, opacity);
+    return (_jsxs("div", { style: styles.colorPickerContainer, children: [_jsxs("button", { type: "button", onClick: handleClearColor, onMouseEnter: () => setHoverTheme(true), onMouseLeave: () => setHoverTheme(false), style: {
+                    ...styles.colorPickerThemeButton,
+                    ...(hoverTheme ? { backgroundColor: 'var(--theme-elevation-50)' } : {}),
+                }, children: [_jsx("span", { style: styles.colorPickerThemeSwatch }), mode === 'text' ? 'Theme Color (Auto)' : 'Remove Highlight'] }), _jsxs("div", { style: styles.colorPickerRow, children: [_jsx("input", { type: "color", value: hex, onChange: handleColorInputChange, style: styles.colorPickerInput, title: "Pick a color" }), _jsx("input", { type: "text", value: hexInput, onChange: handleHexInputChange, onBlur: handleHexInputBlur, placeholder: "#000000", style: styles.colorPickerHexInput }), _jsxs("div", { style: styles.colorPickerPreview, title: `${hex} at ${opacity}% opacity`, children: [_jsx("div", { style: styles.colorPickerCheckerboard }), _jsx("div", { style: { ...styles.colorPickerOverlay, backgroundColor: previewColor } })] })] }), showOpacity && (_jsxs("div", { style: styles.colorPickerOpacitySection, children: [_jsxs("div", { style: styles.colorPickerOpacityHeader, children: [_jsx("label", { style: styles.colorPickerOpacityLabel, children: "Opacity" }), _jsxs("span", { style: styles.colorPickerOpacityValue, children: [opacity, "%"] })] }), _jsxs("div", { style: styles.colorPickerOpacitySlider, children: [_jsx("div", { style: styles.colorPickerCheckerboard }), _jsx("div", { style: {
+                                    ...styles.colorPickerOverlay,
+                                    background: `linear-gradient(to right, transparent 0%, ${hex} 100%)`,
+                                } }), _jsx("input", { type: "range", min: "0", max: "100", value: opacity, onChange: handleOpacityChange, style: styles.colorPickerOpacityInputRange }), _jsx("div", { style: {
+                                    ...styles.colorPickerOpacityThumb,
+                                    left: `calc(${opacity}% - 2px)`,
+                                } })] })] })), presets.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: styles.colorPickerPresetsLabel, children: "Presets" }), _jsx("div", { style: styles.colorPickerPresetsGrid, children: presets.map((preset) => {
+                            const isSelected = hex.toLowerCase() === preset.hex.toLowerCase();
+                            return (_jsx("button", { type: "button", onClick: () => handlePresetClick(preset), style: {
+                                    ...(isSelected ? styles.colorPickerPresetButtonSelected : styles.colorPickerPresetButton),
+                                    backgroundColor: preset.hex,
+                                }, title: preset.label }, preset.hex));
+                        }) })] }))] }));
+}
+function LinkPopover({ isOpen, onClose, onSetLink, onRemoveLink, }) {
+    const [url, setUrl] = useState('');
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+                onClose();
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { ref: popoverRef, style: styles.linkPopover, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("label", { style: { fontSize: '14px', fontWeight: 500, color: 'var(--theme-elevation-700)' }, children: "URL" }), _jsx("input", { type: "text", placeholder: "https://example.com", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            if (url) {
+                                onSetLink(url);
+                                setUrl('');
+                            }
+                        }
+                    }, style: styles.input }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("button", { type: "button", onClick: () => {
+                                if (url) {
+                                    onSetLink(url);
+                                    setUrl('');
+                                }
+                            }, style: styles.buttonPrimary, children: "Add Link" }), _jsx("button", { type: "button", onClick: () => {
+                                onRemoveLink();
+                                setUrl('');
+                            }, style: styles.buttonSecondary, children: "Remove Link" })] })] }) }));
+}
+// =============================================================================
+// Tiptap Extensions Factory
+// =============================================================================
+function createTiptapExtensions() {
+    return [
+        StarterKit.configure({
+            heading: { levels: [1, 2, 3, 4, 5, 6] },
+            strike: {},
+            horizontalRule: {},
+            hardBreak: {},
+            link: {
+                openOnClick: false,
+                HTMLAttributes: {
+                    style: 'color: var(--theme-elevation-700); text-decoration: underline;',
+                },
+            },
+            underline: {},
+        }),
+        TextAlign.configure({
+            types: ['heading', 'paragraph'],
+            alignments: ['left', 'center', 'right', 'justify'],
+        }),
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        FontSize,
+        Superscript,
+        Subscript,
+    ];
+}
+// =============================================================================
+// TiptapField Component
+// =============================================================================
+function TiptapFieldInner({ value, onChange, label, readOnly }) {
+    const [isLinkPopoverOpen, setIsLinkPopoverOpen] = useState(false);
+    const [showSource, setShowSource] = useState(false);
+    const [sourceContent, setSourceContent] = useState(value);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const handleUpdate = useCallback(({ editor }) => {
+        if (editor) {
+            const html = editor.getHTML();
+            onChangeRef.current(html);
+        }
+    }, []);
+    const editor = useEditor({
+        extensions: createTiptapExtensions(),
+        content: value,
+        editorProps: {
+            attributes: {
+                class: 'tiptap-editor focus:outline-none min-h-[200px] p-4',
+                style: 'min-height: 200px; padding: 16px; outline: none;',
+            },
+        },
+        onUpdate: handleUpdate,
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+    });
+    const formattingState = useEditorState({
+        editor,
+        selector: ({ editor: e }) => {
+            if (!e)
+                return null;
+            return {
+                isBold: e.isActive('bold'),
+                isItalic: e.isActive('italic'),
+                isUnderline: e.isActive('underline'),
+                isStrike: e.isActive('strike'),
+                isH1: e.isActive('heading', { level: 1 }),
+                isH2: e.isActive('heading', { level: 2 }),
+                isH3: e.isActive('heading', { level: 3 }),
+                isH4: e.isActive('heading', { level: 4 }),
+                isH5: e.isActive('heading', { level: 5 }),
+                isH6: e.isActive('heading', { level: 6 }),
+                isBulletList: e.isActive('bulletList'),
+                isOrderedList: e.isActive('orderedList'),
+                isBlockquote: e.isActive('blockquote'),
+                isAlignLeft: e.isActive({ textAlign: 'left' }),
+                isAlignCenter: e.isActive({ textAlign: 'center' }),
+                isAlignRight: e.isActive({ textAlign: 'right' }),
+                isAlignJustify: e.isActive({ textAlign: 'justify' }),
+                isLink: e.isActive('link'),
+                isHighlight: e.isActive('highlight'),
+                isSuperscript: e.isActive('superscript'),
+                isSubscript: e.isActive('subscript'),
+            };
+        },
+    });
+    if (!editor) {
+        return (_jsxs("div", { className: "puck-field", children: [label && _jsx("label", { style: styles.label, children: label }), _jsx("div", { style: styles.editorWrapper, children: _jsx("div", { style: styles.loadingState, children: "Loading editor..." }) })] }));
+    }
+    const setLink = (url) => {
+        editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+        setIsLinkPopoverOpen(false);
+    };
+    const removeLink = () => {
+        editor.chain().focus().unsetLink().run();
+        setIsLinkPopoverOpen(false);
+    };
+    return (_jsxs("div", { className: "puck-field", children: [label && _jsx("label", { style: styles.label, children: label }), _jsxs("div", { style: styles.editorWrapper, children: [!readOnly && (_jsxs("div", { style: styles.toolbar, children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: formattingState?.isBold, title: "Bold", children: _jsx(Bold, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: formattingState?.isItalic, title: "Italic", children: _jsx(Italic, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: formattingState?.isUnderline, title: "Underline", children: _jsx(Underline, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), isActive: formattingState?.isStrike, title: "Strikethrough", children: _jsx(Strikethrough, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleSuperscript().run(), isActive: formattingState?.isSuperscript, title: "Superscript", children: _jsx(SuperscriptIcon, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleSubscript().run(), isActive: formattingState?.isSubscript, title: "Subscript", children: _jsx(SubscriptIcon, { style: styles.icon }) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarDropdown, { trigger: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [formattingState?.isH1 ? _jsx(Heading1, { style: styles.icon }) :
+                                            formattingState?.isH2 ? _jsx(Heading2, { style: styles.icon }) :
+                                                formattingState?.isH3 ? _jsx(Heading3, { style: styles.icon }) :
+                                                    formattingState?.isH4 ? _jsx(Heading4, { style: styles.icon }) :
+                                                        formattingState?.isH5 ? _jsx(Heading5, { style: styles.icon }) :
+                                                            formattingState?.isH6 ? _jsx(Heading6, { style: styles.icon }) :
+                                                                _jsx(Pilcrow, { style: styles.icon }), _jsx(ChevronDown, { style: styles.iconSmall })] }), title: "Text Type", isActive: formattingState?.isH1 || formattingState?.isH2 || formattingState?.isH3 || formattingState?.isH4 || formattingState?.isH5 || formattingState?.isH6, children: (close) => (_jsxs(_Fragment, { children: [_jsxs(DropdownItem, { onClick: () => { editor.chain().focus().setParagraph().run(); close(); }, children: [_jsx(Pilcrow, { style: { ...styles.icon, marginRight: '8px' } }), "Paragraph"] }), _jsx(DropdownSeparator, {}), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 1 }).run(); close(); }, children: [_jsx(Heading1, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 700, fontSize: '18px' }, children: "Heading 1" })] }), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 2 }).run(); close(); }, children: [_jsx(Heading2, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 700, fontSize: '16px' }, children: "Heading 2" })] }), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 3 }).run(); close(); }, children: [_jsx(Heading3, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 600 }, children: "Heading 3" })] }), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 4 }).run(); close(); }, children: [_jsx(Heading4, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 600, fontSize: '14px' }, children: "Heading 4" })] }), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 5 }).run(); close(); }, children: [_jsx(Heading5, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 600, fontSize: '12px' }, children: "Heading 5" })] }), _jsxs(DropdownItem, { onClick: () => { editor.chain().focus().toggleHeading({ level: 6 }).run(); close(); }, children: [_jsx(Heading6, { style: { ...styles.icon, marginRight: '8px' } }), _jsx("span", { style: { fontWeight: 600, fontSize: '12px', color: 'var(--theme-elevation-600)' }, children: "Heading 6" })] })] })) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarDropdown, { trigger: _jsx(ALargeSmall, { style: styles.icon }), title: "Font Size", children: (close) => (_jsxs(_Fragment, { children: [_jsx(DropdownLabel, { children: "Presets" }), _jsx("div", { style: styles.fontSizeGrid, children: FONT_SIZES.map((size) => (_jsx("button", { type: "button", onClick: () => {
+                                                    if (size.value) {
+                                                        editor.chain().focus().setFontSize(size.value).run();
+                                                    }
+                                                    else {
+                                                        editor.chain().focus().unsetFontSize().run();
+                                                    }
+                                                    close();
+                                                }, style: styles.fontSizeButton, title: size.px, children: size.label }, size.label))) }), _jsx(DropdownSeparator, {}), _jsxs("div", { style: { padding: '8px' }, children: [_jsx(DropdownLabel, { children: "Custom Size" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px', marginTop: '4px' }, children: [_jsx("input", { type: "number", placeholder: "16", min: "8", max: "200", style: styles.customSizeInput, onKeyDown: (e) => {
+                                                                if (e.key === 'Enter') {
+                                                                    const input = e.target;
+                                                                    const value = input.value;
+                                                                    const unit = input.nextElementSibling?.value || 'px';
+                                                                    if (value) {
+                                                                        editor.chain().focus().setFontSize(`${value}${unit}`).run();
+                                                                        close();
+                                                                    }
+                                                                }
+                                                            } }), _jsx("select", { style: styles.customSizeSelect, defaultValue: "px", children: FONT_SIZE_UNITS.map((unit) => (_jsx("option", { value: unit, children: unit }, unit))) }), _jsx("button", { type: "button", onClick: (e) => {
+                                                                const container = e.target.parentElement;
+                                                                const input = container?.querySelector('input');
+                                                                const select = container?.querySelector('select');
+                                                                const value = input?.value;
+                                                                const unit = select?.value || 'px';
+                                                                if (value) {
+                                                                    editor.chain().focus().setFontSize(`${value}${unit}`).run();
+                                                                    close();
+                                                                }
+                                                            }, style: styles.customSizeApply, children: "Apply" })] })] })] })) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: formattingState?.isBulletList, title: "Bullet List", children: _jsx(List, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: formattingState?.isOrderedList, title: "Numbered List", children: _jsx(ListOrdered, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: formattingState?.isBlockquote, title: "Blockquote", children: _jsx(Quote, { style: styles.icon }) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: formattingState?.isAlignLeft, title: "Align Left", children: _jsx(AlignLeft, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: formattingState?.isAlignCenter, title: "Align Center", children: _jsx(AlignCenter, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: formattingState?.isAlignRight, title: "Align Right", children: _jsx(AlignRight, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: formattingState?.isAlignJustify, title: "Justify", children: _jsx(AlignJustify, { style: styles.icon }) }), _jsx("div", { style: styles.toolbarDivider }), _jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx(ToolbarButton, { onClick: () => setIsLinkPopoverOpen(!isLinkPopoverOpen), isActive: formattingState?.isLink, title: "Add Link", children: _jsx(Link, { style: styles.icon }) }), _jsx(LinkPopover, { isOpen: isLinkPopoverOpen, onClose: () => setIsLinkPopoverOpen(false), onSetLink: setLink, onRemoveLink: removeLink })] }), _jsx(ToolbarDropdown, { trigger: _jsx(Palette, { style: styles.icon }), title: "Text Color", children: (close) => (_jsx(TiptapColorPicker, { currentColor: editor.getAttributes('textStyle').color, onColorChange: (color) => {
+                                        if (color) {
+                                            editor.chain().focus().setColor(color).run();
+                                        }
+                                        else {
+                                            editor.chain().focus().unsetColor().run();
+                                        }
+                                    }, onClose: close, showOpacity: true, mode: "text" })) }), _jsx(ToolbarDropdown, { trigger: _jsx(Highlighter, { style: styles.icon }), title: "Highlight", isActive: formattingState?.isHighlight, children: (close) => (_jsx(TiptapColorPicker, { currentColor: editor.getAttributes('highlight').color, onColorChange: (color) => {
+                                        if (color) {
+                                            editor.chain().focus().setHighlight({ color }).run();
+                                        }
+                                        else {
+                                            editor.chain().focus().unsetHighlight().run();
+                                        }
+                                    }, onClose: close, showOpacity: true, mode: "highlight" })) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal Rule", children: _jsx(Minus, { style: styles.icon }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHardBreak().run(), title: "Hard Break (Shift+Enter)", children: _jsx(CornerDownLeft, { style: styles.icon }) }), _jsx("div", { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(), title: "Clear Formatting", children: _jsx(RemoveFormatting, { style: styles.icon }) }), _jsxs("button", { type: "button", onClick: () => {
+                                    if (showSource) {
+                                        editor.commands.setContent(sourceContent);
+                                        onChange(sourceContent);
+                                    }
+                                    else {
+                                        setSourceContent(editor.getHTML());
+                                    }
+                                    setShowSource(!showSource);
+                                }, title: "View Source", style: {
+                                    ...styles.sourceButton,
+                                    ...(showSource ? styles.toolbarButtonActive : {}),
+                                }, children: [_jsx(Code, { style: styles.icon }), "Source"] })] })), showSource ? (_jsx("textarea", { value: sourceContent, onChange: (e) => {
+                            setSourceContent(e.target.value);
+                            onChange(e.target.value);
+                        }, style: styles.sourceTextarea, placeholder: "Edit HTML source..." })) : (_jsx("div", { style: styles.editorContent, children: _jsx(EditorContent, { editor: editor }) }))] })] }));
+}
+export const TiptapField = memo(TiptapFieldInner);
+// =============================================================================
+// Field Configuration Factory
+// =============================================================================
+export function createTiptapField(config) {
+    return {
+        type: 'custom',
+        label: config.label,
+        render: ({ name, value, onChange, readOnly }) => (_jsx(TiptapField, { value: value || '', onChange: onChange, label: config.label, readOnly: readOnly }, `tiptap-${name}`)),
+    };
+}
+//# sourceMappingURL=TiptapField.js.map