@delmaredigital/payload-puck 0.4.0 → 0.6.0

package/dist/fields/TiptapField.js

@@ -1,857 +0,0 @@
-'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