@airoom/nextmin-react 1.4.0 → 1.4.2

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, 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, }) {
+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;
@@ -416,6 +425,12 @@ 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) {
+        // 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 : '';
     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,11 @@
+import { SchemaDef } from '../../lib/types';
+interface TiptapEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    placeholder?: string;
+    availableSchemas?: SchemaDef[];
+    currentSpeciality?: string;
+}
+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

@@ -0,0 +1,330 @@
+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 { 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 = [], 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'];
+        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 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) => {
+                    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);
+                // 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}`;
+            };
+            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();
+        }
+    };
+    const handleDistrictGridInsert = async ({ districts, baseType, specialitySlug }) => {
+        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('/');
+                const displayName = district.name || district.bnName || districtSlug;
+                html += `<div data-type="grid-item" href="${url}"><p>${displayName}</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

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/react';
+interface ToolbarProps {
+    editor: Editor | null;
+    onDistrictGridClick?: () => void;
+}
+export declare const Toolbar: ({ editor, onDistrictGridClick }: 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, MapPin } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { uploadFile } from '../../lib/upload';
+export const Toolbar = ({ editor, onDistrictGridClick }) => {
+    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" }), 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()
+                        .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/DistrictGridModal.d.ts

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