@airoom/nextmin-react 1.4.1 → 1.4.3

package/dist/components/SchemaForm.js

@@ -410,10 +410,10 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                 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));
+                        availableSchemas: items, mapsKey: mapsKey, formState: form }) }, 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, availableSchemas, }) {
+function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, availableSchemas, formState, }) {
     const id = `${uid}-${name}`;
     const label = attr?.label ?? formatLabel(name);
     const required = !!attr?.required;
@@ -427,7 +427,9 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         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 }));
+        // Extract speciality slug from form state
+        const specialitySlug = formState?.speciality?.slug || formState?.slug || '';
+        return (_jsx(TiptapEditor, { value: value, onChange: (html) => onChange(name, html), placeholder: label, availableSchemas: availableSchemas, currentSpeciality: specialitySlug }));
     }
     const isPhoneField = isPhoneAttr(name, attr);
     const rawMask = typeof attr?.mask === 'string' ? attr.mask : '';

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

@@ -5,6 +5,7 @@ interface TiptapEditorProps {
     className?: string;
     placeholder?: string;
     availableSchemas?: SchemaDef[];
+    currentSpeciality?: string;
 }
-export declare const TiptapEditor: ({ value, onChange, className, placeholder, availableSchemas }: TiptapEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TiptapEditor: ({ value, onChange, className, placeholder, availableSchemas, currentSpeciality }: TiptapEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TiptapEditor;

package/dist/components/editor/TiptapEditor.js

@@ -25,14 +25,17 @@ import { cn } from '../../lib/utils';
 import { SlashCommand, getSuggestionOptions } from './extensions/SlashCommand';
 // ... imports
 import { SchemaInsertionModal } from './components/SchemaInsertionModal';
+import { DistrictGridModal } from './components/DistrictGridModal';
 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
+export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start writing...', availableSchemas = [], currentSpeciality }) => {
+    // State for schema insertion modal
     const [selectedSchema, setSelectedSchema] = useState(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    // State for district grid modal
+    const [isDistrictGridModalOpen, setIsDistrictGridModalOpen] = useState(false);
     // Filter restricted schemas
     const filteredSchemas = React.useMemo(() => {
         const restricted = ['Roles', 'Settings', 'Users'];
@@ -137,22 +140,83 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
             }
             const displayItems = items;
             const baseFrontendUrl = process.env.NEXT_PUBLIC_FRONTEND_URL || '';
+            // Helper to safe access nested properties with Array support (Map & Lookup)
+            const getGenericNestedValue = (obj, path) => {
+                if (!obj)
+                    return '';
+                const parts = path.split('.');
+                let current = obj;
+                for (let i = 0; i < parts.length; i++) {
+                    const part = parts[i];
+                    if (current === undefined || current === null)
+                        return '';
+                    if (Array.isArray(current)) {
+                        // Case 1: Is 'part' a property of the items? (Map)
+                        // Heuristic: check first item
+                        if (current.length > 0 && current[0] && typeof current[0] === 'object' && part in current[0]) {
+                            // Map
+                            current = current.map((item) => item[part]);
+                            // If this was the last part, we are potentially done (will be joined at end if it's array of primitives)
+                            // If there are more parts, we have an array of values. 
+                            // Deep mapping? e.g. tags.author.name -> tags map(author) -> map(name).
+                            // For simplicity, if we mapped and there are more parts, we recursively map?
+                            // This gets complex. Let's handle simple map for now.
+                            // If there are more parts, we'd need to map current array again.
+                            // Let's defer mapping logic:
+                            // Actually 'current' becomes array. Next loop iteration will hit Array check again.
+                        }
+                        else {
+                            // Case 2: Is 'part' a Lookup Key? (ID/Slug)
+                            const found = current.find((item) => item.id === part || item._id === part || item.slug === part || item.code === part);
+                            if (found) {
+                                current = found;
+                            }
+                            else {
+                                // No match found, maybe it's just not there.
+                                return '';
+                            }
+                        }
+                    }
+                    else if (typeof current === 'object') {
+                        // Standard object access
+                        current = current[part];
+                    }
+                    else {
+                        // Primitive cannot have property
+                        return '';
+                    }
+                }
+                // Final Value processing
+                if (Array.isArray(current)) {
+                    // Filter nulls/undefined and join
+                    return current.filter((c) => c !== undefined && c !== null).join(', ');
+                }
+                return current !== undefined && current !== null ? String(current) : '';
+            };
             // 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;
+                output = output.replace(/{([\w\.]+)}/g, (match, key) => {
+                    const val = getGenericNestedValue(item, key);
+                    return val !== '' ? val : 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.
+                // Clean output (remove unresolved braces if any?)
+                // Actually processTemplate leaves match if returns empty, but we changed logic to return match if val is empty in previous version?
+                // New logic: returns '' if empty. So `{foo}` becomes ``.
+                // Wait, replace expects string.
+                // If val is '', we likely want to specific behavior.
+                // If the key doesn't exist at all, usually simple templates leave it or show empty.
+                // User's previous behavior: `return val !== undefined ... ? String(val) : match;`
+                // Let's stick to: if resolved value is empty string, we replace with empty string? Or keep placeholder?
+                // Actually my implementation returned `match` if `val===''`? No, `val !== '' ? val : match`.
+                // If `getGenericNestedValue` returns '', then we return match.
+                // If we want to clear it, we should return ''.
+                // Use case: `{districts.dhaka.name}`. If not found, showing `{...}` hints error.
                 const cleanBase = baseFrontendUrl.replace(/\/$/, '');
                 const cleanSuffix = suffix.replace(/^\//, '');
                 return `${cleanBase}/${cleanSuffix}`;
@@ -223,6 +287,47 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
             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 })] }));
+    const handleDistrictGridInsert = async ({ districts, baseType, specialitySlug, specialityName }) => {
+        if (!editor || districts.length === 0)
+            return;
+        try {
+            // Fetch district data for selected IDs
+            const promises = districts.map(id => api.get('Districts', id).then((r) => r.data || r).catch(() => null));
+            const results = await Promise.all(promises);
+            const districtItems = results.filter(Boolean);
+            if (districtItems.length === 0) {
+                console.error('No districts found');
+                return;
+            }
+            const baseFrontendUrl = process.env.NEXT_PUBLIC_FRONTEND_URL || '';
+            const cleanBase = baseFrontendUrl.replace(/\/$/, '');
+            // Build grid HTML
+            let html = `<div data-type="grid-container">`;
+            districtItems.forEach((district) => {
+                const districtSlug = district.slug || district.name?.toLowerCase().replace(/\s+/g, '-');
+                const urlParts = [cleanBase, baseType, districtSlug];
+                if (specialitySlug) {
+                    urlParts.push(specialitySlug);
+                }
+                const url = urlParts.join('/');
+                // Format: "Speciality Name in District Name" or just "District Name" if no speciality
+                const displayText = specialityName
+                    ? `${specialityName} in ${district.name}`
+                    : district.name;
+                html += `<div data-type="grid-item" href="${url}"><p>${displayText}</p></div>`;
+            });
+            html += `</div>`;
+            // Insert spacing first, then grid
+            editor.chain().focus()
+                .insertContent('<p>&nbsp;</p>')
+                .insertContent(html)
+                .run();
+        }
+        catch (err) {
+            console.error('Failed to fetch district data', err);
+            editor.chain().focus().insertContent(`<p class="text-red-500">Error loading district data</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, onDistrictGridClick: () => setIsDistrictGridModalOpen(true) }), _jsx(EditorContent, { editor: editor }), _jsx(ImageBubbleMenu, { editor: editor }), _jsx(TableBubbleMenu, { editor: editor }), _jsx(SchemaInsertionModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), onInsert: handleSchemaInsert, schema: selectedSchema, availableSchemas: filteredSchemas }), _jsx(DistrictGridModal, { isOpen: isDistrictGridModalOpen, onClose: () => setIsDistrictGridModalOpen(false), onInsert: handleDistrictGridInsert, currentSpeciality: currentSpeciality })] }));
 };
 export default TiptapEditor;

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

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

package/dist/components/editor/Toolbar.js

@@ -1,9 +1,9 @@
 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 { 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, MapPin } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { uploadFile } from '../../lib/upload';
-export const Toolbar = ({ editor }) => {
+export const Toolbar = ({ editor, onDistrictGridClick }) => {
     const fileInputRef = useRef(null);
     if (!editor) {
         return null;
@@ -46,7 +46,7 @@ export const Toolbar = ({ editor }) => {
                         .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: () => {
+                }, children: _jsx(LayoutPanelLeft, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), onDistrictGridClick && (_jsx(ToolbarButton, { onClick: onDistrictGridClick, children: _jsx(MapPin, { 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()

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

@@ -0,0 +1,13 @@
+interface DistrictGridModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onInsert: (config: {
+        districts: string[];
+        baseType: 'doctors' | 'hospitals';
+        specialitySlug?: string;
+        specialityName?: string;
+    }) => void;
+    currentSpeciality?: string;
+}
+export declare const DistrictGridModal: ({ isOpen, onClose, onInsert, currentSpeciality, }: DistrictGridModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/components/DistrictGridModal.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, } from '@heroui/react';
+import { RefMultiSelect } from '../../RefMultiSelect';
+import { RefSingleSelect } from '../../RefSingleSelect';
+import { cn } from '../../../lib/utils';
+import { api } from '../../../lib/api';
+export const DistrictGridModal = ({ isOpen, onClose, onInsert, currentSpeciality, }) => {
+    const [baseType, setBaseType] = useState('doctors');
+    const [selectedDistricts, setSelectedDistricts] = useState([]);
+    const [selectedSpecialityId, setSelectedSpecialityId] = useState('');
+    const [specialitySlug, setSpecialitySlug] = useState('');
+    const [specialityName, setSpecialityName] = useState('');
+    // Fetch speciality data when ID changes
+    useEffect(() => {
+        if (!selectedSpecialityId) {
+            setSpecialitySlug('');
+            return;
+        }
+        const fetchSpeciality = async () => {
+            try {
+                const res = await api.get('Specialities', selectedSpecialityId);
+                const speciality = res.data || res;
+                setSpecialitySlug(speciality?.slug || '');
+                setSpecialityName(speciality?.name || '');
+            }
+            catch (err) {
+                console.error('Failed to fetch speciality:', err);
+                setSpecialitySlug('');
+                setSpecialityName('');
+            }
+        };
+        fetchSpeciality();
+    }, [selectedSpecialityId]);
+    const handleInsert = () => {
+        onInsert({
+            districts: selectedDistricts,
+            baseType,
+            specialitySlug: specialitySlug,
+            specialityName: specialityName
+        });
+        onClose();
+        // Reset state after a short delay
+        setTimeout(() => {
+            setBaseType('doctors');
+            setSelectedDistricts([]);
+            setSelectedSpecialityId('');
+            setSpecialitySlug('');
+            setSpecialityName('');
+        }, 200);
+    };
+    const baseFrontendUrl = process.env.NEXT_PUBLIC_FRONTEND_URL || '';
+    const cleanBase = baseFrontendUrl.replace(/\/$/, '');
+    // Generate preview URL
+    const getPreviewUrl = (districtSlug) => {
+        const parts = [cleanBase, baseType, districtSlug];
+        if (specialitySlug) {
+            parts.push(specialitySlug);
+        }
+        return parts.join('/');
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "2xl", classNames: {
+            base: "bg-white dark:bg-zinc-950 border border-gray-200 dark:border-gray-800",
+            header: "border-b border-gray-200 dark:border-gray-800",
+            footer: "border-t border-gray-200 dark:border-gray-800",
+        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: "Insert District Grid" }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Base Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setBaseType('doctors'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", baseType === 'doctors'
+                                                    ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Doctors" }), _jsx("button", { onClick: () => setBaseType('hospitals'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", baseType === 'hospitals'
+                                                    ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Hospitals" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Districts" }), _jsx(RefMultiSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), pageSize: 64 }), _jsx("p", { className: "text-xs text-gray-400", children: "Select one or more districts to create grid items." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Speciality (Optional)" }), _jsx(RefSingleSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), pageSize: 50 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to create URLs without speciality." }), specialitySlug && (_jsx("div", { className: "mt-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 rounded border border-primary-200 dark:border-primary-800", children: _jsxs("p", { className: "text-xs text-primary-700 dark:text-primary-400", children: ["Slug: ", _jsx("code", { className: "font-mono", children: specialitySlug })] }) }))] }), selectedDistricts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "URL Preview" }), _jsxs("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 max-h-32 overflow-y-auto", children: [_jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Example URL pattern (actual district slugs will be used):" }), _jsx("code", { className: "text-xs text-gray-700 dark:text-gray-300", children: getPreviewUrl('[district-slug]') })] })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, isDisabled: selectedDistricts.length === 0, children: "Insert Grid" })] })] }) }) }));
+};

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

@@ -5,11 +5,5 @@ 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" })] }));
+    return (_jsxs(BubbleMenu, { editor: editor, pluginKey: "imageBubbleMenu", shouldShow: ({ editor }) => editor.isActive('image'), 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/SchemaInsertionModal.d.ts

@@ -9,6 +9,7 @@ interface SchemaInsertionModalProps {
         urlPattern: string;
     }) => void;
     schema: SchemaDef | null;
+    availableSchemas: SchemaDef[];
 }
-export declare const SchemaInsertionModal: ({ isOpen, onClose, onInsert, schema, }: SchemaInsertionModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SchemaInsertionModal: ({ isOpen, onClose, onInsert, schema, availableSchemas, }: SchemaInsertionModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/editor/components/SchemaInsertionModal.js

@@ -1,22 +1,64 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, 
 // RadioGroup, // Removed
 // Radio, // Removed
 Input, } from '@heroui/react';
 import { RefMultiSelect } from '../../RefMultiSelect';
 import { cn } from '../../../lib/utils'; // Assuming cn utility is available
-export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, }) => {
+// Helper to get nested keys with recursion limit
+const getAllKeys = (attributes, allSchemas, prefix = '', depth = 0) => {
+    if (depth > 2)
+        return []; // Prevent infinite recursion
+    let keys = [];
+    Object.keys(attributes).forEach(key => {
+        const attr = attributes[key];
+        const currentKey = prefix ? `${prefix}.${key}` : key;
+        keys.push(currentKey);
+        // Check for reference
+        let refModelName;
+        if (attr.ref) {
+            refModelName = attr.ref;
+        }
+        else if (Array.isArray(attr) && attr[0]?.ref) {
+            refModelName = attr[0].ref;
+        }
+        if (refModelName) {
+            const refSchema = allSchemas.find(s => s.modelName === refModelName);
+            if (refSchema) {
+                const subKeys = getAllKeys(refSchema.attributes, allSchemas, currentKey, depth + 1);
+                keys = [...keys, ...subKeys];
+            }
+        }
+        else if (typeof attr === 'object' && !attr.type && !Array.isArray(attr)) {
+            // Plain nested object (not an attribute definition itself, but a grouping)
+            // Check if it has type property? SchemaDef attributes are Record<string, Attribute>.
+            // Attribute can be AttributeBase or AttributeBase[].
+            // If it doesn't have 'type', it might be a nested object structure if supported.
+            // But based on types.ts, attributes is Record<string, Attribute>.
+            // So we strictly look for ref in AttributeBase.
+            // If keys are just grouping (e.g. meta: { title: ... }), then we recurse.
+            // But Mongoose schema defs usually have type.
+            // Let's assume structure is flat or standard Mongoose.
+        }
+    });
+    // Add common virtuals at appropriate levels if needed, or just top level
+    if (prefix === '') {
+        keys.push('id');
+        keys.push('createdAt');
+        keys.push('updatedAt');
+    }
+    return keys;
+};
+export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, availableSchemas, }) => {
     const [viewType, setViewType] = useState('grid');
     const [template, setTemplate] = useState('');
     const [urlPattern, setUrlPattern] = useState('{slug}_{id}');
     const [selectedIds, setSelectedIds] = useState([]);
-    // const [limit, setLimit] = useState('6'); // Removed limit
     const handleInsert = () => {
         onInsert({ viewType, template, ids: selectedIds, urlPattern });
         onClose();
-        // Reset state
         setTimeout(() => {
             setViewType('grid');
             setTemplate('');
@@ -24,6 +66,17 @@ export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, }) =>
             setSelectedIds([]);
         }, 200);
     };
+    const availableKeys = React.useMemo(() => {
+        if (!schema)
+            return [];
+        return getAllKeys(schema.attributes, availableSchemas);
+    }, [schema, availableSchemas]);
+    const addToTemplate = (key) => {
+        setTemplate(prev => `${prev} {${key}}`);
+    };
+    const addToUrlPattern = (key) => {
+        setUrlPattern(prev => `${prev}{${key}}`);
+    };
     if (!schema)
         return null;
     return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "2xl", classNames: {
@@ -34,5 +87,5 @@ export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, }) =>
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
                                                     : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "Grid (Pills)" }), _jsx("button", { onClick: () => setViewType('list'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'list'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
-                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "List (Rows)" })] })] }), _jsx(Input, { label: "Template String", placeholder: "e.g. {name} - {designation}", value: template, onChange: (e) => setTemplate(e.target.value), description: "Use {fieldName} to insert dynamic data", variant: "bordered", labelPlacement: "outside" }), _jsx(Input, { label: "URL Suffix", placeholder: "{slug}_{id}", value: urlPattern, onChange: (e) => setUrlPattern(e.target.value), description: `Appended to ${process.env.NEXT_PUBLIC_FRONTEND_URL || 'BASE_URL'}/...`, variant: "bordered", labelPlacement: "outside" })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, children: "Insert" })] })] }) }) }));
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "List (Rows)" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { label: "Template String", placeholder: "e.g. {name} - {designation}", value: template, onChange: (e) => setTemplate(e.target.value), description: "Use {fieldName} to insert dynamic data", variant: "bordered", labelPlacement: "outside" }), _jsx("div", { className: "flex flex-wrap gap-2 mt-1", children: availableKeys.map(key => (_jsx("button", { onClick: () => addToTemplate(key), className: "px-2 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", children: key }, key))) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { label: "URL Suffix", placeholder: "{slug}_{id}", value: urlPattern, onChange: (e) => setUrlPattern(e.target.value), description: `Appended to ${process.env.NEXT_PUBLIC_FRONTEND_URL || 'BASE_URL'}/...`, variant: "bordered", labelPlacement: "outside" }), _jsx("div", { className: "flex flex-wrap gap-2 mt-1", children: availableKeys.map(key => (_jsx("button", { onClick: () => addToUrlPattern(key), className: "px-2 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", children: key }, key))) })] })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, children: "Insert" })] })] }) }) }));
 };