@airoom/nextmin-react 1.3.0 → 1.4.1

package/dist/components/SchemaForm.js

@@ -12,6 +12,10 @@ import { FileUploader } from './FileUploader';
 import AddressAutocompleteGoogle from './AddressAutocomplete';
 import { useGoogleMapsKey } from '../hooks/useGoogleMapsKey';
 import { parseDate, parseDateTime, parseTime, } from '@internationalized/date';
+// import RichTextEditor from './editor/RichTextEditor';
+// import ShadcnEditor from './editor/ShadcnEditor';
+// import LexicalEditor from './editor/LexicalEditor';
+import TiptapEditor from './editor/TiptapEditor';
 const inputClassNames = { inputWrapper: 'bg-transparent shadow-none' };
 const selectClassNames = { trigger: 'bg-transparent shadow-none' };
 const AUDIT_FIELDS = new Set(['createdAt', 'updatedAt']);
@@ -401,10 +405,15 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                         ? form[name]
                         : ''
                     : (form[name] ?? (Array.isArray(attr) ? [] : ''));
-                return (_jsx("div", { className: colClass, children: _jsx(SchemaField, { uid: formUid, name: name, attr: attr, value: baseValue, onChange: handleChange, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey }) }, name));
+                // If it's a rich text field, force full width
+                const isRich = attr?.rich === true;
+                const dynamicColClass = isRich ? 'col-span-2' : colClass;
+                return (_jsx("div", { className: dynamicColClass, children: _jsx(SchemaField, { uid: formUid, name: name, attr: attr, inputClassNames: inputClassNames, selectClassNames: selectClassNames, value: baseValue, onChange: handleChange, disabled: busy, 
+                        // pass schemas for slash cmd
+                        availableSchemas: items, mapsKey: mapsKey }) }, name));
             }), error && (_jsx("div", { className: "col-span-2", children: _jsx("div", { className: "text-danger text-sm", children: error }) })), _jsxs("div", { className: "flex gap-2 col-span-2", children: [_jsx(Button, { type: "submit", color: "primary", isLoading: busy, children: submitLabel }), showReset && (_jsx(Button, { type: "reset", variant: "flat", isDisabled: busy, children: "Reset" }))] })] }));
 }
-function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, }) {
+function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, availableSchemas, }) {
     const id = `${uid}-${name}`;
     const label = attr?.label ?? formatLabel(name);
     const required = !!attr?.required;
@@ -416,6 +425,10 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
     const isPasswordField = name.toLowerCase() === 'password' ||
         attr?.format === 'password' ||
         attr?.writeOnly === true;
+    // RICH TEXT EDITOR CHECK
+    if (attr?.rich === true) {
+        return (_jsx(TiptapEditor, { value: value, onChange: (html) => onChange(name, html), placeholder: label, availableSchemas: availableSchemas }));
+    }
     const isPhoneField = isPhoneAttr(name, attr);
     const rawMask = typeof attr?.mask === 'string' ? attr.mask : '';
     const hasSlots = /[Xx9#_]/.test(rawMask);

package/dist/components/SchemaSuggestionList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type SuggestionProps = {
+    items: any[];
+    command: (item: any) => void;
+};
+export declare const SchemaSuggestionList: React.ForwardRefExoticComponent<SuggestionProps & React.RefAttributes<unknown>>;
+export {};

package/dist/components/SchemaSuggestionList.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Card, Listbox, ListboxItem } from '@heroui/react';
+export const SchemaSuggestionList = forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === 'ArrowUp') {
+                setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+                return true;
+            }
+            if (event.key === 'ArrowDown') {
+                setSelectedIndex((selectedIndex + 1) % props.items.length);
+                return true;
+            }
+            if (event.key === 'Enter') {
+                selectItem(selectedIndex);
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (!props.items?.length) {
+        return null;
+    }
+    return (_jsx(Card, { className: "min-w-[200px] overflow-hidden p-1 shadow-medium border border-default-200", children: _jsx(Listbox, { variant: "flat", "aria-label": "Schema suggestions", onAction: (key) => {
+                const index = props.items.findIndex(i => i.title === key);
+                selectItem(index);
+            }, children: props.items.map((item, index) => (_jsx(ListboxItem, { 
+                // @ts-ignore
+                className: `${index === selectedIndex ? 'bg-default-100' : ''}`, startContent: _jsx("span", { className: "text-xl", children: "\uD83D\uDCC4" }), children: item.title }, item.title))) }) }));
+});
+SchemaSuggestionList.displayName = 'SchemaSuggestionList';

package/dist/components/editor/TiptapEditor.d.ts

@@ -0,0 +1,10 @@
+import { SchemaDef } from '../../lib/types';
+interface TiptapEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    placeholder?: string;
+    availableSchemas?: SchemaDef[];
+}
+export declare const TiptapEditor: ({ value, onChange, className, placeholder, availableSchemas }: TiptapEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default TiptapEditor;

package/dist/components/editor/TiptapEditor.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Color } from '@tiptap/extension-color';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Highlight from '@tiptap/extension-highlight';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import { api } from '../../lib/api';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import { ResizableImage } from './extensions/ResizableImage';
+import { GridContainer, GridItem } from './extensions/Grid';
+import { LayoutRow, LayoutColumn } from './extensions/Layout';
+import { Toolbar } from './Toolbar';
+import { cn } from '../../lib/utils';
+// Styles for Tiptap
+// Styles for Tiptap
+// import '../../styles.css'; // REMOVED: CSS should be imported by consumer (see package.json exports)
+import { SlashCommand, getSuggestionOptions } from './extensions/SlashCommand';
+// ... imports
+import { SchemaInsertionModal } from './components/SchemaInsertionModal';
+import { ImageBubbleMenu } from './components/ImageBubbleMenu';
+import { TableBubbleMenu } from './components/TableBubbleMenu';
+import { Container } from './extensions/Container';
+// ... interface
+export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start writing...', availableSchemas = [] }) => {
+    // State for modal
+    const [selectedSchema, setSelectedSchema] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    // Filter restricted schemas
+    const filteredSchemas = React.useMemo(() => {
+        const restricted = ['Roles', 'Settings', 'Users'];
+        return availableSchemas.filter(s => !restricted.includes(s.modelName));
+    }, [availableSchemas]);
+    const extensions = React.useMemo(() => [
+        StarterKit.configure({
+            heading: {
+                levels: [1, 2, 3]
+            }
+        }),
+        Highlight.configure({
+            multicolor: true,
+        }),
+        TextStyle,
+        Color,
+        Link.configure({
+            openOnClick: false,
+            HTMLAttributes: {
+                class: 'editor-link'
+            }
+        }),
+        Underline,
+        TextAlign.configure({
+            types: ['heading', 'paragraph', 'image'],
+        }),
+        ResizableImage,
+        GridContainer,
+        GridItem,
+        Container,
+        LayoutRow,
+        LayoutColumn,
+        Table.configure({
+            resizable: true,
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        Placeholder.configure({
+            placeholder,
+        }),
+        SlashCommand.configure({
+            suggestion: getSuggestionOptions(filteredSchemas, (item) => {
+                setSelectedSchema(item);
+                setIsModalOpen(true);
+            })
+        })
+    ], [placeholder, filteredSchemas]);
+    const editor = useEditor({
+        extensions,
+        content: value,
+        editorProps: {
+            attributes: {
+                class: cn("prose prose-sm sm:prose-base dark:prose-invert focus:outline-none h-[500px] overflow-y-auto p-4 max-w-none [&_li_p]:m-0", className)
+            }
+        },
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        immediatelyRender: false,
+    });
+    // ... useEffect for sync ...
+    useEffect(() => {
+        if (editor && value !== editor.getHTML()) {
+            if (editor.getText() === '' && value === '')
+                return;
+            if (!editor.isFocused) {
+                setTimeout(() => {
+                    editor.commands.setContent(value);
+                }, 0);
+            }
+        }
+    }, [value, editor]);
+    const handleSchemaInsert = async ({ viewType, template, ids = [], urlPattern }) => {
+        if (!editor || !selectedSchema)
+            return;
+        try {
+            let items = [];
+            if (ids.length > 0) {
+                // Fetch specific IDs
+                // Since api.list might not support ids array directly in all implementations,
+                // and we don't have a bulk get endpoint guaranteed, assume we can parallel fetch or filter.
+                // Optimally: user search results are already in RefMultiSelect but we don't have access to them here easily.
+                // We'll simplisticly fetch them in parallel. 
+                // In production, an API like /model?ids=a,b,c is better.
+                // Let's assume we can fetch them one by one for now (up to ~10-20 is fine).
+                const promises = ids.map(id => api.get(selectedSchema.modelName, id).then((r) => r.data || r).catch(() => null));
+                const results = await Promise.all(promises);
+                items = results.filter(Boolean);
+            }
+            else {
+                // Fallback to latest 6
+                const res = await api.list(selectedSchema.modelName, 0, 6);
+                const payload = res?.data ?? res;
+                items =
+                    payload?.items ??
+                        payload?.docs ??
+                        payload?.results ??
+                        payload?.list ??
+                        (Array.isArray(payload) ? payload : []);
+                items = items.slice(0, 6);
+            }
+            const displayItems = items;
+            const baseFrontendUrl = process.env.NEXT_PUBLIC_FRONTEND_URL || '';
+            // Helper to interpolate string with item data
+            const processTemplate = (tmpl, item) => {
+                let output = tmpl || selectedSchema.modelName;
+                output = output.replace(/{(\w+)}/g, (match, key) => {
+                    return item[key] !== undefined && item[key] !== null ? String(item[key]) : match;
+                });
+                return output;
+            };
+            // Helper for URL
+            const processUrl = (pattern, item) => {
+                const suffix = processTemplate(pattern || '{slug}_{id}', item);
+                // Ensure base ends with / if needed? Usually env var doesn't have it.
+                // Or Pattern starts with /?
+                // User said "add another input that I can configure the url parts too AFTER the base url part"
+                // Assuming base url is domain.com/
+                // Join them carefully.
+                const cleanBase = baseFrontendUrl.replace(/\/$/, '');
+                const cleanSuffix = suffix.replace(/^\//, '');
+                return `${cleanBase}/${cleanSuffix}`;
+            };
+            let html = ''; // Add new line first
+            // Helper to interpolate string with item data
+            // const processTemplate = (tmpl: string, item: any) => {
+            //     let output = tmpl || selectedSchema.modelName;
+            //     output = output.replace(/{(\w+)}/g, (match, key) => {
+            //         return item[key] !== undefined && item[key] !== null ? String(item[key]) : match;
+            //     });
+            //     return output;
+            // };
+            const gridClass = "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 my-4";
+            const listClass = "flex flex-col gap-2 my-4";
+            // Link to styling ...
+            // For Grid: Use our custom GridContainer/GridItem nodes via data-type
+            // For List: Use standard divs (if supported) or just paragraphs? 
+            // Actually, we can use the same Card style for list but in a single column?
+            // Tiptap might strip 'flex-col' div if we don't have a node for it.
+            // Let's use GridContainer with a modifier or just a standard behavior?
+            // The GridContainer is hardcoded to 3 cols.
+            // Responsive grid covers the list view mainly (mobile).
+            // But if user wants explicit List, maybe we use a different structure.
+            // For now, let's focus on GRID as requested. 
+            // If viewType is 'list', we might just insert paragraphs or a different styled container.
+            // Actually, if we want list view, we can style the container?
+            // But GridContainer class is hardcoded in the Node extension.
+            // We can pass attributes?
+            // "data-cols"="1"?
+            // But I didn't verify dynamic classes in extension.
+            // Let's stick to Grid for 'grid' view type.
+            // For 'list', maybe we can just use paragraphs for now, or the same Grid with 1 column?
+            // I'll assume 'grid' is the priority.
+            if (viewType === 'grid') {
+                html = `<div data-type="grid-container">`;
+                if (displayItems.length === 0) {
+                    html += `<div data-type="grid-item" href="#">No items found</div>`;
+                }
+                else {
+                    displayItems.forEach(item => {
+                        const text = processTemplate(template, item);
+                        const url = processUrl(urlPattern || '', item);
+                        html += `<div data-type="grid-item" href="${url}">${text}</div>`;
+                    });
+                }
+                html += `</div>`; // Exit block
+            }
+            else {
+                // List View - use standard markup which might be safer or just paragraphs
+                html = `<p><strong>${selectedSchema.modelName} List:</strong></p><ul class="list-disc pl-5">`;
+                displayItems.forEach(item => {
+                    const text = processTemplate(template, item);
+                    const url = processUrl(urlPattern || '', item);
+                    html += `<li><a href="${url}" target="_blank">${text}</a></li>`;
+                });
+                html += `</ul>`;
+            }
+            // Insert spacing first securely
+            editor.chain().focus()
+                .insertContent('<p>&nbsp;</p>') // Use non-breaking space to ensure block creation
+                .insertContent(html)
+                .run();
+        }
+        catch (err) {
+            console.error("Failed to fetch schema data", err);
+            // Fallback error message in editor?
+            editor.chain().focus().insertContent(`<p class="text-red-500">Error loading data for ${selectedSchema.modelName}</p>`).run();
+        }
+    };
+    return (_jsxs("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden bg-white dark:bg-zinc-950 shadow-sm transition-all hover:border-gray-300 dark:hover:border-gray-700", children: [_jsx(Toolbar, { editor: editor }), _jsx(EditorContent, { editor: editor }), _jsx(ImageBubbleMenu, { editor: editor }), _jsx(TableBubbleMenu, { editor: editor }), _jsx(SchemaInsertionModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), onInsert: handleSchemaInsert, schema: selectedSchema })] }));
+};
+export default TiptapEditor;

package/dist/components/editor/Toolbar.d.ts

@@ -0,0 +1,6 @@
+import { type Editor } from '@tiptap/react';
+interface ToolbarProps {
+    editor: Editor | null;
+}
+export declare const Toolbar: ({ editor }: ToolbarProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/editor/Toolbar.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Quote, Code, Undo, Redo, Image as ImageIcon, LayoutTemplate, LayoutPanelLeft, AlignLeft, AlignCenter, AlignRight, Square, Table as TableIcon, Palette, PaintBucket, Type } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { uploadFile } from '../../lib/upload';
+export const Toolbar = ({ editor }) => {
+    const fileInputRef = useRef(null);
+    if (!editor) {
+        return null;
+    }
+    const addImage = async (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            try {
+                // Upload logic here - reusing the one we discussed or a simple URL creator for now
+                // For production, use the real uploadFile utility
+                // const url = URL.createObjectURL(file); 
+                const url = await uploadFile(file); // Needs verify this exists/works
+                if (url) {
+                    editor.chain().focus().setImage({ src: url }).run();
+                }
+            }
+            catch (error) {
+                console.error("Upload failed", error);
+            }
+        }
+        // Reset inputs
+        if (fileInputRef.current)
+            fileInputRef.current.value = '';
+    };
+    const handleImageClick = () => {
+        fileInputRef.current?.click();
+    };
+    const ToolbarButton = ({ onClick, isActive = false, children, disabled = false }) => (_jsx("button", { onClick: onClick, disabled: disabled, className: cn("p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", isActive && "bg-gray-200 dark:bg-gray-700 text-blue-500", disabled && "opacity-50 cursor-not-allowed"), type: "button", children: children }));
+    return (_jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-2 flex flex-wrap gap-1 sticky top-0 bg-white dark:bg-zinc-950 z-10 items-center", children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), children: _jsx(Bold, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), children: _jsx(Italic, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), children: _jsx(UnderlineIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), children: _jsx(AlignLeft, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), children: _jsx(AlignCenter, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), children: _jsx(AlignRight, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: editor.isActive('heading', { level: 1 }), children: _jsx("span", { className: "font-bold text-sm", children: "H1" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: editor.isActive('heading', { level: 2 }), children: _jsx("span", { className: "font-bold text-sm", children: "H2" }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), children: _jsx(List, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), children: _jsx(ListOrdered, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), children: _jsx(Quote, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), children: _jsx(Code, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
+                    editor
+                        .chain()
+                        .focus()
+                        .insertContent('<p>&nbsp;</p>')
+                        .insertContent('<div data-type="layout-row" data-cols="2"><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div></div>')
+                        .run();
+                }, children: _jsx(LayoutTemplate, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => {
+                    editor
+                        .chain()
+                        .focus()
+                        .insertContent('<p>&nbsp;</p>')
+                        .insertContent('<div data-type="layout-row" data-cols="3"><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div></div>')
+                        .run();
+                }, children: _jsx(LayoutPanelLeft, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
+                    editor
+                        .chain()
+                        .focus()
+                        .insertContent({
+                        type: 'container',
+                        content: [
+                            {
+                                type: 'paragraph',
+                            }
+                        ]
+                    })
+                        .run();
+                }, children: _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx(Square, { size: 18 }), _jsx("span", { className: "text-[10px] leading-none", children: "Full" })] }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: _jsx(TableIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("div", { className: "relative group", children: [_jsx(ToolbarButton, { onClick: () => { }, isActive: editor.isActive('textStyle'), children: _jsx("div", { className: "flex items-center", children: _jsx(Type, { size: 18 }) }) }), _jsx("input", { type: "color", className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer", onChange: (e) => editor.chain().focus().setColor(e.target.value).run(), value: editor.getAttributes('textStyle').color || '#000000' })] }), _jsxs("div", { className: "relative group", children: [_jsx(ToolbarButton, { onClick: () => { }, isActive: editor.isActive('highlight'), children: _jsx("div", { className: "flex items-center", children: _jsx(Palette, { size: 18 }) }) }), _jsx("input", { type: "color", className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer", onChange: (e) => {
+                                    const color = e.target.value;
+                                    editor.chain().focus().setHighlight({ color }).run();
+                                }, value: editor.getAttributes('highlight').color || '#ffff00' })] }), _jsxs("div", { className: "relative group", children: [_jsx(ToolbarButton, { onClick: () => { }, isActive: !!editor.getAttributes('gridContainer').backgroundColor || !!editor.getAttributes('layoutRow').backgroundColor || !!editor.getAttributes('layoutColumn').backgroundColor || !!editor.getAttributes('container').backgroundColor, children: _jsx(PaintBucket, { size: 18 }) }), _jsx("input", { type: "color", className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer", onChange: (e) => {
+                                    const val = e.target.value;
+                                    // Priority: Grid Container (Apply to ALL) -> Container -> Column -> Row
+                                    if (editor.isActive('gridItem')) {
+                                        // Set on CONTAINER so it applies to all items via variable
+                                        editor.chain().focus().updateAttributes('gridContainer', { backgroundColor: val }).run();
+                                    }
+                                    else if (editor.isActive('container')) {
+                                        editor.chain().focus().updateAttributes('container', { backgroundColor: val }).run();
+                                    }
+                                    else if (editor.isActive('layoutColumn')) {
+                                        editor.chain().focus().updateAttributes('layoutColumn', { backgroundColor: val }).run();
+                                    }
+                                    else if (editor.isActive('layoutRow')) {
+                                        editor.chain().focus().updateAttributes('layoutRow', { backgroundColor: val }).run();
+                                    }
+                                } })] })] }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsxs("div", { className: "flex items-center gap-1 relative group", children: [_jsx("span", { className: "text-[10px] text-gray-500 absolute left-1 pointer-events-none", children: "R" }), _jsx("input", { type: "number", placeholder: "0", className: "w-16 h-8 pl-4 pr-1 text-xs bg-transparent border border-gray-200 dark:border-gray-700 rounded", onChange: (e) => {
+                            const val = e.target.value;
+                            const radius = val ? `${val}px` : null;
+                            const cmd = editor.chain().focus();
+                            if (editor.isActive('gridItem') || editor.isActive('gridContainer')) {
+                                cmd.updateAttributes('gridContainer', { borderRadius: radius });
+                            }
+                            else if (editor.isActive('container')) {
+                                cmd.updateAttributes('container', { borderRadius: radius });
+                            }
+                            else if (editor.isActive('layoutColumn')) {
+                                cmd.updateAttributes('layoutColumn', { borderRadius: radius });
+                            }
+                            else if (editor.isActive('layoutRow')) {
+                                cmd.updateAttributes('layoutRow', { borderRadius: radius });
+                            }
+                            cmd.run();
+                        } })] }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: handleImageClick, children: _jsx(ImageIcon, { size: 18 }) }), _jsx("input", { type: "file", ref: fileInputRef, onChange: addImage, className: "hidden", accept: "image/*" }), _jsx("div", { className: "flex-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), children: _jsx(Undo, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), children: _jsx(Redo, { size: 18 }) })] }));
+};

package/dist/components/editor/components/CommandList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SchemaDef } from '../../../lib/types';
+export interface CommandListProps {
+    items: SchemaDef[];
+    command: (item: any) => void;
+}
+export declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<unknown>>;

package/dist/components/editor/components/CommandList.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { cn } from '../../../lib/utils';
+import { LayoutGrid } from 'lucide-react';
+export const CommandList = forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === 'ArrowUp') {
+                upHandler();
+                return true;
+            }
+            if (event.key === 'ArrowDown') {
+                downHandler();
+                return true;
+            }
+            if (event.key === 'Enter') {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (!props.items.length) {
+        return null;
+    }
+    return (_jsx("div", { className: "z-50 min-w-[250px] max-h-[300px] overflow-y-auto rounded-md border border-gray-200 bg-white shadow-md dark:border-gray-800 dark:bg-zinc-950 p-1", children: props.items.map((item, index) => (_jsxs("button", { className: cn("flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", index === selectedIndex ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50" : "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"), onClick: () => selectItem(index), children: [_jsx(LayoutGrid, { className: "h-4 w-4" }), _jsx("span", { className: "flex-1 text-left", children: item.modelName })] }, index))) }));
+});
+CommandList.displayName = 'CommandList';

package/dist/components/editor/components/ImageBubbleMenu.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+interface ImageBubbleMenuProps {
+    editor: Editor | null;
+}
+export declare const ImageBubbleMenu: ({ editor }: ImageBubbleMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/editor/components/ImageBubbleMenu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Minimize, AlignLeft, AlignCenter, AlignRight, StretchHorizontal } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+export const ImageBubbleMenu = ({ editor }) => {
+    if (!editor)
+        return null;
+    return (_jsxs(BubbleMenu, { editor: editor, pluginKey: "imageBubbleMenu", shouldShow: ({ editor }) => editor.isActive('image'), 
+        // @ts-ignore
+        tippyOptions: {
+            duration: 100,
+            zIndex: 99, // Ensure it sits above other elements
+            maxWidth: 'none',
+        }, className: "flex items-center gap-1 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-gray-700 shadow-lg p-1 rounded-lg z-50", children: [_jsx("button", { type: "button", onClick: () => editor.chain().focus().updateAttributes('image', { width: '100%', height: null }).run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", editor.getAttributes('image').width === '100%' && "bg-gray-200 dark:bg-gray-600"), title: "Full Width", children: _jsx(StretchHorizontal, { size: 16 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().updateAttributes('image', { width: null, height: null }).run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Original Size", children: _jsx(Minimize, { size: 16 }) }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().setTextAlign('left').run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", editor.isActive({ textAlign: 'left' }) && "bg-gray-200 dark:bg-gray-600"), title: "Align Left", children: _jsx(AlignLeft, { size: 16 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().setTextAlign('center').run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", editor.isActive({ textAlign: 'center' }) && "bg-gray-200 dark:bg-gray-600"), title: "Align Center", children: _jsx(AlignCenter, { size: 16 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().setTextAlign('right').run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", editor.isActive({ textAlign: 'right' }) && "bg-gray-200 dark:bg-gray-600"), title: "Align Right", children: _jsx(AlignRight, { size: 16 }) }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().updateAttributes('image', { objectFit: 'contain' }).run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-medium", editor.getAttributes('image').objectFit === 'contain' && "bg-gray-200 dark:bg-gray-600"), title: "Contain", children: "Fit" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().updateAttributes('image', { objectFit: 'cover' }).run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-medium", editor.getAttributes('image').objectFit === 'cover' && "bg-gray-200 dark:bg-gray-600"), title: "Cover", children: "Cover" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().updateAttributes('image', { objectFit: 'fill' }).run(), className: cn("p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-medium", editor.getAttributes('image').objectFit === 'fill' && "bg-gray-200 dark:bg-gray-600"), title: "Fill", children: "Fill" })] }));
+};

package/dist/components/editor/components/ImageComponent.d.ts

@@ -0,0 +1,3 @@
+import { NodeViewProps } from '@tiptap/react';
+import React from 'react';
+export declare const ImageComponent: React.FC<NodeViewProps>;

package/dist/components/editor/components/ImageComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NodeViewWrapper } from '@tiptap/react';
+import { useState, useEffect } from 'react';
+import { ResizableBox } from 'react-resizable';
+import clsx from 'clsx';
+export const ImageComponent = (props) => {
+    const { node, updateAttributes, selected } = props;
+    const { src, alt, width, height, textAlign, objectFit } = node.attrs;
+    // Determine if we are in "Full Width" mode
+    const isFullWidth = width === '100%';
+    const [w, setW] = useState(width || 'auto');
+    const [h, setH] = useState(height || 'auto');
+    useEffect(() => {
+        setW(width || 'auto');
+        setH(height || 'auto');
+    }, [width, height]);
+    const onResize = (e, { size }) => {
+        setW(size.width);
+        setH(size.height);
+    };
+    const onResizeStop = (e, { size }) => {
+        updateAttributes({
+            width: size.width,
+            height: size.height,
+        });
+    };
+    const getSimulatedWidth = () => (typeof w === 'number' ? w : 300);
+    const getSimulatedHeight = () => (typeof h === 'number' ? h : 300);
+    const alignmentClass = textAlign === 'center'
+        ? 'image-align-center'
+        : textAlign === 'right'
+            ? 'image-align-right'
+            : textAlign === 'left'
+                ? 'image-align-left'
+                : 'image-align-default';
+    const renderImage = () => (_jsx("img", { src: src, alt: alt, style: {
+            width: isFullWidth ? '100%' : '100%',
+            height: isFullWidth ? 'auto' : '100%',
+            display: 'block',
+            objectFit: objectFit || 'contain',
+        }, className: clsx("nm-editor-img", isFullWidth && "nm-editor-w-full"), draggable: false }));
+    return (_jsx(NodeViewWrapper, { className: clsx('image-component-wrapper nm-editor-img-wrapper', alignmentClass, isFullWidth && 'nm-editor-w-full'), children: _jsx("div", { className: clsx('nm-editor-img-container group', selected && !isFullWidth && 'nm-editor-ring-selected', isFullWidth && 'nm-editor-w-full'), children: isFullWidth ? (_jsx("div", { className: clsx("nm-editor-w-full", selected && "nm-editor-ring-selected"), children: renderImage() })) : (_jsx(ResizableBox, { width: getSimulatedWidth(), height: getSimulatedHeight(), onResize: onResize, onResizeStop: onResizeStop, lockAspectRatio: true, draggableOpts: { enableUserSelectHack: false }, resizeHandles: selected ? ['sw', 'se', 'nw', 'ne'] : [], handle: (h, ref) => (_jsx("div", { className: `image-resizer image-resizer-${h}`, 
+                    // @ts-ignore
+                    ref: ref })), children: renderImage() })) }) }));
+};

package/dist/components/editor/components/SchemaInsertionModal.d.ts

@@ -0,0 +1,14 @@
+import { SchemaDef } from '../../../lib/types';
+interface SchemaInsertionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onInsert: (config: {
+        viewType: 'grid' | 'list';
+        template: string;
+        ids: string[];
+        urlPattern: string;
+    }) => void;
+    schema: SchemaDef | null;
+}
+export declare const SchemaInsertionModal: ({ isOpen, onClose, onInsert, schema, }: SchemaInsertionModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};