@maxal_studio/kratosjs-react 1.0.0

package/dist/components/RichEditorField.js

@@ -0,0 +1,655 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Underline from '@tiptap/extension-underline';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Highlight from '@tiptap/extension-highlight';
+import { Node, mergeAttributes } from '@tiptap/core';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { useToast } from './ui/Toast';
+import { authenticatedFetch } from '../api/authenticatedFetch';
+import { useValidation } from '../hooks/useValidation';
+import { translate } from '../i18n/activeLocale';
+// Custom Video extension
+const Video = Node.create({
+    name: 'video',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            controls: {
+                default: true,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'video[src]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['video', mergeAttributes(HTMLAttributes, { controls: true, class: 'max-w-full' })];
+    },
+    addCommands() {
+        return {
+            setVideo: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+});
+// Custom Audio extension
+const Audio = Node.create({
+    name: 'audio',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            controls: {
+                default: true,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'audio[src]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['audio', mergeAttributes(HTMLAttributes, { controls: true, class: 'max-w-full' })];
+    },
+    addCommands() {
+        return {
+            setAudio: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+});
+// Custom Embed extension for iframes (YouTube, websites, etc.)
+const Embed = Node.create({
+    name: 'embed',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            width: {
+                default: '100%',
+            },
+            height: {
+                default: '400',
+            },
+            allow: {
+                default: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+            },
+            allowFullScreen: {
+                default: true,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'iframe[src]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'iframe',
+            mergeAttributes(HTMLAttributes, {
+                class: 'max-w-full rounded',
+                frameborder: '0',
+                allowfullscreen: HTMLAttributes.allowFullScreen !== false,
+            }),
+        ];
+    },
+    addCommands() {
+        return {
+            setEmbed: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: {
+                        src: options.src,
+                        width: options.width || '100%',
+                        height: options.height || '400',
+                        allow: options.allow ||
+                            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+                    },
+                });
+            },
+        };
+    },
+});
+// Registry of available TipTap extensions
+const AVAILABLE_EXTENSIONS = {
+    link: Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+            class: 'text-accent underline hover:text-accent-hover',
+        },
+    }),
+    image: Image.configure({
+        inline: true,
+        allowBase64: false,
+        HTMLAttributes: {
+            class: 'max-w-full h-auto rounded',
+        },
+    }),
+    video: Video,
+    audio: Audio,
+    embed: Embed,
+    underline: Underline,
+    subscript: Subscript,
+    superscript: Superscript,
+    textAlign: TextAlign.configure({
+        types: ['heading', 'paragraph'],
+    }),
+    highlight: Highlight.configure({
+        multicolor: true,
+    }),
+};
+const ToolbarButton = ({ onClick, isActive = false, disabled = false, children, title, }) => (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, title: title, className: `
+			p-2 rounded transition-colors
+			${isActive ? 'bg-accent-soft text-accent' : 'text-fg hover:bg-muted'}
+			${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+		`, children: children }));
+/**
+ * Convert File to base64 string
+ */
+const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            resolve(result.split(',')[1]);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+};
+export function RichEditorField({ name, label, placeholder, helperText, hint, hintIcon, hintColor, disabled, required, toolbarButtons = [
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'code',
+    'h1',
+    'h2',
+    'h3',
+    'bulletList',
+    'orderedList',
+    'blockquote',
+    'codeBlock',
+    'link',
+    'image',
+    'video',
+    'audio',
+    'embed',
+    'subscript',
+    'superscript',
+    'highlight',
+    'alignLeft',
+    'alignCenter',
+    'alignRight',
+    'undo',
+    'redo',
+    'htmlSource',
+], extensions = ['link', 'underline', 'subscript', 'superscript', 'highlight', 'textAlign'], maxLength, fileAttachments, embeds, htmlSource, apiBaseUrl, resource, mode, value, validation, operation, }) {
+    // View mode: render formatted display
+    if (mode === 'view') {
+        const htmlContent = value || '';
+        return (_jsx(ViewFieldWrapper, { label: label, children: htmlContent ? (_jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none text-fg", dangerouslySetInnerHTML: { __html: htmlContent } })) : (_jsx("span", { className: "text-fg-secondary", children: "-" })) }));
+    }
+    const { setValue, watch, register, formState: { errors: formErrors }, } = useFormContext();
+    const toast = useToast();
+    const currentValue = watch(name);
+    const imageInputRef = useRef(null);
+    const videoInputRef = useRef(null);
+    const audioInputRef = useRef(null);
+    const [isHtmlView, setIsHtmlView] = React.useState(false);
+    const [htmlSourceValue, setHtmlSourceValue] = React.useState('');
+    // Evaluate validation conditions with form context
+    const validationResult = useValidation(validation?.rules || [], operation, name);
+    const isRequired = validationResult.required !== undefined;
+    const fieldError = getFieldError(formErrors, name);
+    // Register field with React Hook Form for validation
+    React.useEffect(() => {
+        register(name, validationResult);
+    }, [register, name, validationResult]);
+    // Compute upload endpoint
+    const uploadEndpoint = React.useMemo(() => {
+        if (!apiBaseUrl || !resource)
+            return null;
+        return `${apiBaseUrl}/${resource}/media/upload`;
+    }, [apiBaseUrl, resource]);
+    // Build extensions array
+    const editorExtensions = React.useMemo(() => {
+        const baseExtensions = [
+            StarterKit,
+            Placeholder.configure({
+                placeholder: placeholder || translate('core:editor.start_typing'),
+            }),
+        ];
+        // Add image extension if fileAttachments is enabled or if image is in extensions
+        if (fileAttachments || extensions.includes('image')) {
+            baseExtensions.push(AVAILABLE_EXTENSIONS.image);
+        }
+        // Add video extension if fileAttachments is enabled or if video is in extensions
+        if (fileAttachments || extensions.includes('video')) {
+            baseExtensions.push(AVAILABLE_EXTENSIONS.video);
+        }
+        // Add audio extension if fileAttachments is enabled or if audio is in extensions
+        if (fileAttachments || extensions.includes('audio')) {
+            baseExtensions.push(AVAILABLE_EXTENSIONS.audio);
+        }
+        // Add embed extension if embeds is enabled or if embed is in extensions
+        if (embeds || extensions.includes('embed')) {
+            baseExtensions.push(AVAILABLE_EXTENSIONS.embed);
+        }
+        // Add custom extensions
+        extensions.forEach(extName => {
+            if (AVAILABLE_EXTENSIONS[extName] && !['image', 'video', 'audio', 'embed'].includes(extName)) {
+                baseExtensions.push(AVAILABLE_EXTENSIONS[extName]);
+            }
+        });
+        return baseExtensions;
+    }, [placeholder, extensions, fileAttachments, embeds]);
+    const editor = useEditor({
+        extensions: editorExtensions,
+        content: currentValue || '',
+        editable: !disabled,
+        onUpdate: ({ editor }) => {
+            const html = editor.getHTML();
+            // Trigger validation when content changes
+            setValue(name, html, { shouldValidate: true });
+        },
+    });
+    // Upload file function
+    const uploadFile = useCallback(async (file) => {
+        if (!uploadEndpoint) {
+            console.warn('No upload endpoint configured');
+            return null;
+        }
+        try {
+            const base64 = await fileToBase64(file);
+            const response = await authenticatedFetch(uploadEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file: base64,
+                    filename: file.name,
+                    contentType: file.type,
+                    fieldName: name,
+                    isArray: false,
+                }),
+            }, apiBaseUrl);
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(`Upload failed: ${error.message || response.statusText}`);
+            }
+            const result = await response.json();
+            return result.data || null;
+        }
+        catch (error) {
+            console.error('Upload error:', error);
+            return null;
+        }
+    }, [uploadEndpoint, name]);
+    // Handle media upload
+    const handleMediaUpload = useCallback(async (file, type) => {
+        if (!editor)
+            return;
+        const uploadResult = await uploadFile(file);
+        if (!uploadResult || !uploadResult.url) {
+            toast.error(translate('core:toast.upload_failed'));
+            return;
+        }
+        // Insert media into editor based on type
+        if (type === 'image') {
+            editor.chain().focus().setImage({ src: uploadResult.url }).run();
+        }
+        else if (type === 'video') {
+            editor.chain().focus().setVideo({ src: uploadResult.url }).run();
+        }
+        else if (type === 'audio') {
+            editor.chain().focus().setAudio({ src: uploadResult.url }).run();
+        }
+    }, [editor, uploadFile]);
+    // Handle file input change
+    const handleFileInputChange = useCallback((e, type) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            handleMediaUpload(file, type);
+        }
+        // Reset input so same file can be selected again
+        e.target.value = '';
+    }, [handleMediaUpload]);
+    React.useEffect(() => {
+        if (editor && currentValue !== editor.getHTML()) {
+            editor.commands.setContent(currentValue || '');
+        }
+    }, [currentValue, editor]);
+    // Sync HTML source value when switching to HTML view
+    React.useEffect(() => {
+        if (isHtmlView && editor) {
+            setHtmlSourceValue(editor.getHTML());
+        }
+    }, [isHtmlView, editor]);
+    // Handle HTML source view toggle
+    const handleToggleHtmlView = useCallback(() => {
+        if (!editor)
+            return;
+        if (isHtmlView) {
+            // Switching from HTML view to rich text view
+            // Parse HTML and update editor
+            try {
+                editor.commands.setContent(htmlSourceValue);
+                setValue(name, htmlSourceValue, { shouldValidate: true });
+            }
+            catch (error) {
+                console.error('Error parsing HTML:', error);
+                toast.error(translate('core:toast.invalid_html'));
+            }
+        }
+        setIsHtmlView(!isHtmlView);
+    }, [isHtmlView, editor, htmlSourceValue, name, setValue]);
+    const buttonActions = {
+        bold: {
+            action: () => editor?.chain().focus().toggleBold().run(),
+            icon: _jsx("strong", { children: "B" }),
+            title: translate('core:editor.bold'),
+        },
+        italic: {
+            action: () => editor?.chain().focus().toggleItalic().run(),
+            icon: _jsx("em", { children: "I" }),
+            title: translate('core:editor.italic'),
+        },
+        strike: {
+            action: () => editor?.chain().focus().toggleStrike().run(),
+            icon: _jsx("s", { children: "S" }),
+            title: translate('core:editor.strikethrough'),
+        },
+        code: {
+            action: () => editor?.chain().focus().toggleCode().run(),
+            icon: _jsx("code", { children: '</>' }),
+            title: translate('core:editor.code'),
+        },
+        h1: {
+            action: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+            icon: _jsx("span", { className: "text-lg font-bold", children: "H1" }),
+            title: translate('core:editor.heading1'),
+        },
+        h2: {
+            action: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+            icon: _jsx("span", { className: "text-base font-bold", children: "H2" }),
+            title: translate('core:editor.heading2'),
+        },
+        h3: {
+            action: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+            icon: _jsx("span", { className: "text-sm font-bold", children: "H3" }),
+            title: translate('core:editor.heading3'),
+        },
+        bulletList: {
+            action: () => editor?.chain().focus().toggleBulletList().run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })),
+            title: translate('core:editor.bullet_list'),
+        },
+        orderedList: {
+            action: () => editor?.chain().focus().toggleOrderedList().run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4h18M3 12h18M3 20h18" }) })),
+            title: translate('core:editor.ordered_list'),
+        },
+        blockquote: {
+            action: () => editor?.chain().focus().toggleBlockquote().run(),
+            icon: _jsx("span", { children: "\"" }),
+            title: translate('core:editor.blockquote'),
+        },
+        codeBlock: {
+            action: () => editor?.chain().focus().toggleCodeBlock().run(),
+            icon: _jsx("code", { children: '{ }' }),
+            title: translate('core:editor.code_block'),
+        },
+        undo: {
+            action: () => editor?.chain().focus().undo().run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) })),
+            title: translate('core:editor.undo'),
+        },
+        redo: {
+            action: () => editor?.chain().focus().redo().run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 10h-10a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" }) })),
+            title: translate('core:editor.redo'),
+        },
+        link: {
+            action: () => {
+                const url = window.prompt('Enter URL:');
+                if (url) {
+                    editor?.chain().focus().setLink({ href: url }).run();
+                }
+            },
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) })),
+            title: translate('core:editor.link'),
+        },
+        underline: {
+            action: () => editor?.chain().focus().toggleUnderline().run(),
+            icon: _jsx("u", { children: "U" }),
+            title: translate('core:editor.underline'),
+        },
+        subscript: {
+            action: () => editor?.chain().focus().toggleSubscript().run(),
+            icon: (_jsxs("span", { children: ["X", _jsx("sub", { className: "text-xs", children: "2" })] })),
+            title: translate('core:editor.subscript'),
+        },
+        superscript: {
+            action: () => editor?.chain().focus().toggleSuperscript().run(),
+            icon: (_jsxs("span", { children: ["X", _jsx("sup", { className: "text-xs", children: "2" })] })),
+            title: translate('core:editor.superscript'),
+        },
+        highlight: {
+            action: () => editor?.chain().focus().toggleHighlight().run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10M12 16v5M5 3l14 14L5 3z" }) })),
+            title: translate('core:editor.highlight'),
+        },
+        alignLeft: {
+            action: () => editor?.chain().focus().setTextAlign('left').run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) })),
+            title: translate('core:editor.align_left'),
+        },
+        alignCenter: {
+            action: () => editor?.chain().focus().setTextAlign('center').run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M7 12h10M4 18h16" }) })),
+            title: translate('core:editor.align_center'),
+        },
+        alignRight: {
+            action: () => editor?.chain().focus().setTextAlign('right').run(),
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M10 12h10M4 18h16" }) })),
+            title: translate('core:editor.align_right'),
+        },
+        image: {
+            action: () => {
+                if (fileAttachments && imageInputRef.current) {
+                    imageInputRef.current.click();
+                }
+            },
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })),
+            title: translate('core:editor.insert_image'),
+        },
+        video: {
+            action: () => {
+                if (fileAttachments && videoInputRef.current) {
+                    videoInputRef.current.click();
+                }
+            },
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) })),
+            title: translate('core:editor.insert_video'),
+        },
+        audio: {
+            action: () => {
+                if (fileAttachments && audioInputRef.current) {
+                    audioInputRef.current.click();
+                }
+            },
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" }) })),
+            title: translate('core:editor.insert_audio'),
+        },
+        embed: {
+            action: () => {
+                const url = window.prompt('Enter embed URL (YouTube, website, etc.):');
+                if (url) {
+                    // Try to convert YouTube URL to embed format
+                    let embedUrl = url;
+                    const youtubeRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
+                    const youtubeMatch = url.match(youtubeRegex);
+                    if (youtubeMatch) {
+                        embedUrl = `https://www.youtube.com/embed/${youtubeMatch[1]}`;
+                    }
+                    (editor?.chain().focus())
+                        .setEmbed({
+                        src: embedUrl,
+                        width: '100%',
+                        height: '400',
+                    })
+                        .run();
+                }
+            },
+            icon: (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })),
+            title: translate('core:editor.insert_embed'),
+        },
+        htmlSource: {
+            action: handleToggleHtmlView,
+            icon: (_jsxs("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 6l3 3-3 3M18 6l-3 3 3 3" })] })),
+            title: translate('core:editor.html_source'), // Title will be updated dynamically in render
+        },
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [label, isRequired && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), helperText && _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText }), _jsx(HintDisplay, { hint: hint, hintIcon: hintIcon, hintColor: hintColor }), fieldError && _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: fieldError.message }), _jsxs("div", { className: "border border-border rounded-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-wrap gap-1 p-2 bg-muted border-b border-border", children: toolbarButtons.map(button => {
+                            const action = buttonActions[button];
+                            if (!action)
+                                return null;
+                            let isActive = false;
+                            if (editor) {
+                                if (button === 'bold')
+                                    isActive = editor.isActive('bold');
+                                else if (button === 'italic')
+                                    isActive = editor.isActive('italic');
+                                else if (button === 'strike')
+                                    isActive = editor.isActive('strike');
+                                else if (button === 'code')
+                                    isActive = editor.isActive('code');
+                                else if (button === 'h1')
+                                    isActive = editor.isActive('heading', { level: 1 });
+                                else if (button === 'h2')
+                                    isActive = editor.isActive('heading', { level: 2 });
+                                else if (button === 'h3')
+                                    isActive = editor.isActive('heading', { level: 3 });
+                                else if (button === 'bulletList')
+                                    isActive = editor.isActive('bulletList');
+                                else if (button === 'orderedList')
+                                    isActive = editor.isActive('orderedList');
+                                else if (button === 'blockquote')
+                                    isActive = editor.isActive('blockquote');
+                                else if (button === 'codeBlock')
+                                    isActive = editor.isActive('codeBlock');
+                                else if (button === 'link')
+                                    isActive = editor.isActive('link');
+                                else if (button === 'image')
+                                    isActive = editor.isActive('image');
+                                else if (button === 'video')
+                                    isActive = editor.isActive('video');
+                                else if (button === 'audio')
+                                    isActive = editor.isActive('audio');
+                                else if (button === 'embed')
+                                    isActive = editor.isActive('embed');
+                                else if (button === 'underline')
+                                    isActive = editor.isActive('underline');
+                                else if (button === 'subscript')
+                                    isActive = editor.isActive('subscript');
+                                else if (button === 'superscript')
+                                    isActive = editor.isActive('superscript');
+                                else if (button === 'highlight')
+                                    isActive = editor.isActive('highlight');
+                                else if (button === 'alignLeft')
+                                    isActive = editor.isActive({ textAlign: 'left' });
+                                else if (button === 'alignCenter')
+                                    isActive = editor.isActive({ textAlign: 'center' });
+                                else if (button === 'alignRight')
+                                    isActive = editor.isActive({ textAlign: 'right' });
+                            }
+                            // Hide image/video/audio buttons if fileAttachments is disabled
+                            if ((button === 'image' || button === 'video' || button === 'audio') && !fileAttachments) {
+                                return null;
+                            }
+                            // Hide embed button if embeds is disabled
+                            if (button === 'embed' && !embeds) {
+                                return null;
+                            }
+                            // Hide HTML source button if htmlSource is disabled
+                            if (button === 'htmlSource' && !htmlSource) {
+                                return null;
+                            }
+                            // Update HTML source button active state and title
+                            let buttonTitle = action.title;
+                            if (button === 'htmlSource') {
+                                isActive = isHtmlView;
+                                buttonTitle = isHtmlView
+                                    ? translate('core:editor.rich_text_view')
+                                    : translate('core:editor.html_source');
+                            }
+                            return (_jsx(ToolbarButton, { onClick: action.action, isActive: isActive, disabled: disabled ||
+                                    (fileAttachments &&
+                                        !uploadEndpoint &&
+                                        (button === 'image' || button === 'video' || button === 'audio')), title: buttonTitle, children: action.icon }, button));
+                        }) }), fileAttachments && (_jsxs(_Fragment, { children: [_jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: e => handleFileInputChange(e, 'image') }), _jsx("input", { ref: videoInputRef, type: "file", accept: "video/*", style: { display: 'none' }, onChange: e => handleFileInputChange(e, 'video') }), _jsx("input", { ref: audioInputRef, type: "file", accept: "audio/*", style: { display: 'none' }, onChange: e => handleFileInputChange(e, 'audio') })] })), isHtmlView ? (_jsx("div", { className: "p-4 min-h-[200px] k-input", children: _jsx("textarea", { value: htmlSourceValue, onChange: e => setHtmlSourceValue(e.target.value), disabled: disabled, className: "w-full h-full min-h-[200px] font-mono text-sm k-input resize-none focus:outline-none", placeholder: translate('core:editor.html_placeholder') }) })) : (_jsx("div", { className: `
+							rich-editor-content p-4 min-h-[200px]
+							${disabled ? 'bg-muted cursor-not-allowed' : 'k-input'}
+						`, style: {
+                            outline: 'none',
+                        }, onDrop: e => {
+                            if (!fileAttachments || !uploadEndpoint || disabled)
+                                return;
+                            e.preventDefault();
+                            const files = Array.from(e.dataTransfer.files);
+                            files.forEach(file => {
+                                if (file.type.startsWith('image/')) {
+                                    handleMediaUpload(file, 'image');
+                                }
+                                else if (file.type.startsWith('video/')) {
+                                    handleMediaUpload(file, 'video');
+                                }
+                                else if (file.type.startsWith('audio/')) {
+                                    handleMediaUpload(file, 'audio');
+                                }
+                            });
+                        }, onDragOver: e => {
+                            if (fileAttachments && uploadEndpoint && !disabled) {
+                                e.preventDefault();
+                            }
+                        }, children: _jsx(EditorContent, { editor: editor }) }))] }), maxLength && editor && (_jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-right", children: [editor.storage.characterCount?.characters() || 0, " / ", maxLength] }))] }));
+}

package/dist/components/SectionField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FieldProps } from '../types';
+export declare function SectionField({ heading, description, icon, collapsible, collapsed: initialCollapsed, compact, aside, mode, schema, columns, disabled, value, _recordData, operation, apiBaseUrl, resource, isLastSectionInParent, sectionDepth, }: FieldProps & {
+    _recordData?: any;
+    isLastSectionInParent?: boolean;
+    sectionDepth?: number;
+    apiBaseUrl?: string;
+    resource?: string;
+}): React.JSX.Element;