@airoom/nextmin-react 2.0.2 → 2.0.3

package/dist/components/editor/TiptapEditor.js

@@ -18,19 +18,37 @@ 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 { FontSize } from './extensions/FontSize';
 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 { Extension } from '@tiptap/core';
 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
+// Extension to clear inherited marks when pressing Enter at the end of a heading
+const ClearMarksOnHeaderEnter = Extension.create({
+    name: 'clearMarksOnHeaderEnter',
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => {
+                if (editor.isActive('heading')) {
+                    const handled = editor.commands.splitBlock();
+                    if (handled) {
+                        editor.commands.unsetAllMarks();
+                        return true;
+                    }
+                }
+                return false;
+            },
+        };
+    },
+});
 export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start writing...', availableSchemas = [], currentSpeciality }) => {
     // State for schema insertion modal
     const [selectedSchema, setSelectedSchema] = useState(null);
@@ -46,12 +64,16 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
         StarterKit.configure({
             heading: {
                 levels: [1, 2, 3, 4, 5, 6]
-            }
+            },
+            link: false,
+            underline: false,
         }),
+        ClearMarksOnHeaderEnter,
         Highlight.configure({
             multicolor: true,
         }),
         TextStyle,
+        FontSize,
         FontFamily,
         Color,
         Link.configure({
@@ -92,22 +114,31 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
         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)
-            }
+            },
+            transformPastedHTML(html) {
+                let cleaned = html
+                    .replace(/<!--[\s\S]*?-->/g, '')
+                    .replace(/<o:p>[\s\S]*?<\/o:p>/gi, '')
+                    .replace(/<\/?(xml|meta|link)[^>]*>/gi, '');
+                return cleaned;
+            },
         },
         onUpdate: ({ editor }) => {
             onChange(editor.getHTML());
         },
         immediatelyRender: false,
     });
-    // ... useEffect for sync ...
+    // Sync editor content when value prop changes from outside
     useEffect(() => {
-        if (editor && value !== editor.getHTML()) {
-            if (editor.getText() === '' && value === '')
-                return;
-            if (!editor.isFocused) {
-                setTimeout(() => {
-                    editor.commands.setContent(value);
-                }, 0);
+        if (editor && value !== undefined) {
+            const currentHTML = editor.getHTML();
+            if (value !== currentHTML) {
+                // Do not reset if both are effectively empty
+                if ((editor.getText() === '' || currentHTML === '<p></p>') && (value === '' || value === '<p></p>'))
+                    return;
+                if (!editor.isFocused) {
+                    editor.commands.setContent(value || '', { emitUpdate: false });
+                }
             }
         }
     }, [value, editor]);

package/dist/components/editor/Toolbar.js

@@ -1,103 +1,228 @@
-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, AlignJustify, Link as LinkIcon } from 'lucide-react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useState } from 'react';
+import { RemoveFormatting, Bold, Italic, Underline as UnderlineIcon, Strikethrough, List, ListOrdered, Quote, Code, Code2, Undo, Redo, Image as ImageIcon, LayoutTemplate, LayoutPanelLeft, AlignLeft, AlignCenter, AlignRight, AlignJustify, Square, Table as TableIcon, Palette, PaintBucket, Type, MapPin, Link as LinkIcon, Minus, } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { uploadFile } from '../../lib/upload';
+import { CustomFontSizeModal } from './components/CustomFontSizeModal';
+// ─── Block Type Dropdown ─────────────────────────────────────────────────────
+const BLOCK_TYPES = [
+    { label: 'Paragraph', value: 'paragraph' },
+    { label: 'Heading 1', value: 'h1' },
+    { label: 'Heading 2', value: 'h2' },
+    { label: 'Heading 3', value: 'h3' },
+    { label: 'Heading 4', value: 'h4' },
+    { label: 'Heading 5', value: 'h5' },
+    { label: 'Heading 6', value: 'h6' },
+];
+function getActiveBlock(editor) {
+    for (let i = 1; i <= 6; i++) {
+        if (editor.isActive('heading', { level: i }))
+            return `h${i}`;
+    }
+    return 'paragraph';
+}
+function setBlock(editor, value) {
+    if (value === 'paragraph') {
+        editor.chain().focus().setParagraph().run();
+    }
+    else {
+        const level = parseInt(value.replace('h', ''), 10);
+        editor.chain().focus().toggleHeading({ level }).unsetFontSize().run();
+    }
+}
+// ─── Font Family List ─────────────────────────────────────────────────────────
+const FONT_GROUPS = [
+    {
+        label: 'Default',
+        fonts: [
+            { label: 'Default', value: 'default' },
+        ],
+    },
+    {
+        label: 'Sans-Serif',
+        fonts: [
+            { label: 'Inter', value: "'Inter', sans-serif" },
+            { label: 'Roboto', value: "'Roboto', sans-serif" },
+            { label: 'Open Sans', value: "'Open Sans', sans-serif" },
+            { label: 'Lato', value: "'Lato', sans-serif" },
+            { label: 'Poppins', value: "'Poppins', sans-serif" },
+            { label: 'Nunito', value: "'Nunito', sans-serif" },
+            { label: 'Outfit', value: "'Outfit', sans-serif" },
+            { label: 'DM Sans', value: "'DM Sans', sans-serif" },
+            { label: 'Figtree', value: "'Figtree', sans-serif" },
+        ],
+    },
+    {
+        label: 'Serif',
+        fonts: [
+            { label: 'Georgia', value: "Georgia, serif" },
+            { label: 'Playfair Display', value: "'Playfair Display', serif" },
+            { label: 'Merriweather', value: "'Merriweather', serif" },
+            { label: 'Lora', value: "'Lora', serif" },
+            { label: 'EB Garamond', value: "'EB Garamond', serif" },
+        ],
+    },
+    {
+        label: 'Monospace',
+        fonts: [
+            { label: 'Fira Code', value: "'Fira Code', monospace" },
+            { label: 'JetBrains Mono', value: "'JetBrains Mono', monospace" },
+            { label: 'Source Code Pro', value: "'Source Code Pro', monospace" },
+        ],
+    },
+    {
+        label: 'Bangla',
+        fonts: [
+            { label: 'Hind Siliguri', value: "'Hind Siliguri', sans-serif" },
+            { label: 'Noto Sans Bengali', value: "'Noto Sans Bengali', sans-serif" },
+            { label: 'Kalpurush', value: "'Kalpurush', sans-serif" },
+            { label: 'Siyam Rupali', value: "'Siyam Rupali', sans-serif" },
+            { label: 'SolaimanLipi', value: "'SolaimanLipi', sans-serif" },
+            { label: 'Akaash', value: "'Akaash', sans-serif" },
+        ],
+    },
+];
+// ─── Font Size List ──────────────────────────────────────────────────────────
+const FONT_SIZES = [
+    { label: 'Default size', value: 'default' },
+    { label: '10px', value: '10px' },
+    { label: '12px', value: '12px' },
+    { label: '13px', value: '13px' },
+    { label: '14px', value: '14px' },
+    { label: '15px', value: '15px' },
+    { label: '16px', value: '16px' },
+    { label: '18px', value: '18px' },
+    { label: '20px', value: '20px' },
+    { label: '24px', value: '24px' },
+    { label: '28px', value: '28px' },
+    { label: '32px', value: '32px' },
+    { label: '36px', value: '36px' },
+    { label: '48px', value: '48px' },
+    { label: '72px', value: '72px' },
+    { label: 'Custom...', value: 'custom' },
+];
+// ─── Divider ──────────────────────────────────────────────────────────────────
+const Divider = () => (_jsx("div", { className: "w-px h-5 bg-gray-200 dark:bg-gray-700 mx-0.5 flex-shrink-0" }));
+// ─── Toolbar Button ───────────────────────────────────────────────────────────
+const Btn = ({ onClick, isActive = false, disabled = false, title, children, }) => (_jsx("button", { onClick: onClick, disabled: disabled, title: title, type: "button", className: cn('inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-600 dark:text-gray-300', 'transition-all duration-100', 'hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white', isActive && 'bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 ring-1 ring-blue-200 dark:ring-blue-800', disabled && 'opacity-30 cursor-not-allowed pointer-events-none'), children: children }));
+// ─── Styled native select ─────────────────────────────────────────────────────
+const NativeSelect = ({ value, onChange, className, children, title, }) => (_jsx("select", { title: title, value: value, onChange: e => onChange(e.target.value), className: cn('h-7 px-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700', 'bg-white dark:bg-zinc-900 text-gray-700 dark:text-gray-200', 'outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer', 'appearance-none pr-5', className), style: { backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center' }, children: children }));
+// ─── Main Toolbar ─────────────────────────────────────────────────────────────
 export const Toolbar = ({ editor, onDistrictGridClick }) => {
     const fileInputRef = useRef(null);
-    if (!editor) {
+    const [fontSizeInput, setFontSizeInput] = useState(null);
+    const [isCustomFontSizeModalOpen, setIsCustomFontSizeModalOpen] = useState(false);
+    const [, setTick] = useState(0);
+    React.useEffect(() => {
+        if (!editor)
+            return;
+        const update = () => setTick(t => t + 1);
+        editor.on('selectionUpdate', update);
+        editor.on('transaction', update);
+        editor.on('focus', update);
+        editor.on('blur', update);
+        return () => {
+            editor.off('selectionUpdate', update);
+            editor.off('transaction', update);
+            editor.off('focus', update);
+            editor.off('blur', update);
+        };
+    }, [editor]);
+    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) {
+                const url = await uploadFile(file);
+                if (url)
                     editor.chain().focus().setImage({ src: url }).run();
-                }
             }
             catch (error) {
-                console.error("Upload failed", error);
+                console.error('Upload failed', error);
             }
         }
-        // Reset inputs
         if (fileInputRef.current)
             fileInputRef.current.value = '';
     };
-    const handleImageClick = () => {
-        fileInputRef.current?.click();
+    const activeFont = editor.getAttributes('textStyle').fontFamily || 'default';
+    const activeFontSize = editor.getAttributes('textStyle').fontSize || '';
+    const applyFontSize = (val) => {
+        const trimmed = val.trim();
+        if (!trimmed || trimmed.toLowerCase() === 'default' || trimmed === '0') {
+            editor.chain().focus().unsetFontSize().run();
+        }
+        else {
+            editor.chain().focus().setFontSize(trimmed).run();
+        }
     };
-    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("div", { className: "flex items-center px-2 py-1 bg-gray-50 dark:bg-zinc-900 rounded-md border border-gray-200 dark:border-gray-800", children: _jsxs("select", { className: "bg-transparent text-xs outline-none cursor-pointer pr-1", onChange: (e) => {
-                        const font = e.target.value;
-                        if (font === 'default') {
-                            editor.chain().focus().unsetFontFamily().run();
-                        }
-                        else {
-                            editor.chain().focus().setFontFamily(font).run();
-                        }
-                    }, value: editor.getAttributes('textStyle').fontFamily || 'default', children: [_jsx("option", { value: "default", children: "Default Font" }), _jsxs("optgroup", { label: "Bangla Fonts", children: [_jsx("option", { value: "'Hind Siliguri', sans-serif", children: "Hind Siliguri" }), _jsx("option", { value: "'Kalpurush', sans-serif", children: "Kalpurush" }), _jsx("option", { value: "'Siyam Rupali', sans-serif", children: "Siyam Rupali" }), _jsx("option", { value: "'SolaimanLipi', sans-serif", children: "SolaimanLipi" }), _jsx("option", { value: "'Akaash', sans-serif", children: "Akaash" }), _jsx("option", { value: "'Mukti Narrow', sans-serif", children: "Mukti Narrow" })] }), _jsxs("optgroup", { label: "Standard", children: [_jsx("option", { value: "Inter, sans-serif", children: "Inter" }), _jsx("option", { value: "Roboto, sans-serif", children: "Roboto" }), _jsx("option", { value: "serif", children: "Serif" }), _jsx("option", { value: "monospace", children: "Monospace" })] })] }) }), _jsx(ToolbarButton, { onClick: () => {
-                    const previousUrl = editor.getAttributes('link').href;
-                    const url = window.prompt('URL', previousUrl);
-                    if (url === null) {
-                        return;
+    return (_jsxs("div", { className: "\n            flex flex-wrap items-center gap-0.5 px-2 py-1.5\n            border-b border-gray-100 dark:border-gray-800\n            bg-gray-50/80 dark:bg-zinc-900/80\n            backdrop-blur-sm sticky top-0 z-10\n        ", children: [_jsx(Btn, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo (Ctrl+Z)", children: _jsx(Undo, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo (Ctrl+Shift+Z)", children: _jsx(Redo, { size: 15 }) }), _jsx(Divider, {}), _jsx(NativeSelect, { title: "Block type", value: getActiveBlock(editor), onChange: v => setBlock(editor, v), className: "w-32", children: BLOCK_TYPES.map(bt => (_jsx("option", { value: bt.value, children: bt.label }, bt.value))) }), _jsx(Divider, {}), _jsx(NativeSelect, { title: "Font family", value: activeFont, onChange: v => {
+                    if (v === 'default') {
+                        editor.chain().focus().unsetFontFamily().run();
                     }
+                    else {
+                        editor.chain().focus().setFontFamily(v).run();
+                    }
+                }, className: "w-36", children: FONT_GROUPS.map(group => (_jsx("optgroup", { label: group.label, children: group.fonts.map(f => (_jsx("option", { value: f.value, children: f.label }, f.value))) }, group.label))) }), _jsxs(NativeSelect, { title: "Font size", value: activeFontSize || 'default', onChange: v => {
+                    if (v === 'custom') {
+                        setIsCustomFontSizeModalOpen(true);
+                    }
+                    else if (v === 'default') {
+                        editor.chain().focus().unsetFontSize().run();
+                    }
+                    else {
+                        editor.chain().focus().setFontSize(v).run();
+                    }
+                }, className: "w-24", children: [!FONT_SIZES.some(s => s.value === activeFontSize) && activeFontSize && (_jsx("option", { value: activeFontSize, children: activeFontSize })), FONT_SIZES.map(s => (_jsx("option", { value: s.value, children: s.label }, s.value)))] }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), title: "Bold (Ctrl+B)", children: _jsx(Bold, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), title: "Italic (Ctrl+I)", children: _jsx(Italic, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), title: "Underline (Ctrl+U)", children: _jsx(UnderlineIcon, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleStrike().run(), isActive: editor.isActive('strike'), title: "Strikethrough", children: _jsx(Strikethrough, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleCode().run(), isActive: editor.isActive('code'), title: "Inline code", children: _jsx(Code, { size: 15 }) }), _jsx(Btn, { onClick: () => {
+                    editor.chain()
+                        .focus()
+                        .unsetAllMarks()
+                        .unsetFontSize()
+                        .unsetFontFamily()
+                        .run();
+                }, title: "Clear formatting", children: _jsx(RemoveFormatting, { size: 15 }) }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), title: "Align left", children: _jsx(AlignLeft, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), title: "Align center", children: _jsx(AlignCenter, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), title: "Align right", children: _jsx(AlignRight, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: editor.isActive({ textAlign: 'justify' }), title: "Justify", children: _jsx(AlignJustify, { size: 15 }) }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), title: "Bullet list", children: _jsx(List, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), title: "Numbered list", children: _jsx(ListOrdered, { size: 15 }) }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), title: "Blockquote", children: _jsx(Quote, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), title: "Code block", children: _jsx(Code2, { size: 15 }) }), _jsx(Btn, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: _jsx(Minus, { size: 15 }) }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => {
+                    const prev = editor.getAttributes('link').href;
+                    const url = window.prompt('URL', prev);
+                    if (url === null)
+                        return;
                     if (url === '') {
                         editor.chain().focus().extendMarkRange('link').unsetLink().run();
                         return;
                     }
                     editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
-                }, isActive: editor.isActive('link'), children: _jsx(LinkIcon, { 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(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: editor.isActive({ textAlign: 'justify' }), children: _jsx(AlignJustify, { 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(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isActive: editor.isActive('heading', { level: 3 }), children: _jsx("span", { className: "font-bold text-sm", children: "H3" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(), isActive: editor.isActive('heading', { level: 4 }), children: _jsx("span", { className: "font-bold text-sm", children: "H4" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 5 }).run(), isActive: editor.isActive('heading', { level: 5 }), children: _jsx("span", { className: "font-bold text-sm", children: "H5" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 6 }).run(), isActive: editor.isActive('heading', { level: 6 }), children: _jsx("span", { className: "font-bold text-sm", children: "H6" }) }), _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()
+                }, isActive: editor.isActive('link'), title: "Link", children: _jsx(LinkIcon, { size: 15 }) }), _jsx(Btn, { onClick: () => fileInputRef.current?.click(), title: "Insert image", children: _jsx(ImageIcon, { size: 15 }) }), _jsx("input", { type: "file", ref: fileInputRef, onChange: addImage, className: "hidden", accept: "image/*" }), _jsx(Divider, {}), _jsx(Btn, { onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), title: "Insert table", children: _jsx(TableIcon, { size: 15 }) }), _jsx(Btn, { title: "2-column layout", 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()
+                }, children: _jsx(LayoutTemplate, { size: 15 }) }), _jsx(Btn, { title: "3-column layout", 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',
+                }, children: _jsx(LayoutPanelLeft, { size: 15 }) }), _jsx(Btn, { title: "Full-width container", onClick: () => {
+                    editor.chain().focus().insertContent({ type: 'container', content: [{ type: 'paragraph' }] }).run();
+                }, children: _jsx(Square, { size: 15 }) }), onDistrictGridClick && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Btn, { onClick: onDistrictGridClick, title: "District grid", children: _jsx(MapPin, { size: 15 }) })] })), _jsx(Divider, {}), _jsxs("div", { className: "relative inline-flex", title: "Text color", children: [_jsx(Btn, { onClick: () => { }, isActive: editor.isActive('textStyle'), children: _jsx(Type, { size: 15 }) }), _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 inline-flex", title: "Highlight color", children: [_jsx(Btn, { onClick: () => { }, isActive: editor.isActive('highlight'), children: _jsx(Palette, { size: 15 }) }), _jsx("input", { type: "color", className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer", onChange: e => editor.chain().focus().setHighlight({ color: e.target.value }).run(), value: editor.getAttributes('highlight').color || '#ffff00' })] }), _jsxs("div", { className: "relative inline-flex", title: "Background color", children: [_jsx(Btn, { onClick: () => { }, isActive: !!editor.getAttributes('gridContainer').backgroundColor ||
+                            !!editor.getAttributes('layoutRow').backgroundColor ||
+                            !!editor.getAttributes('layoutColumn').backgroundColor ||
+                            !!editor.getAttributes('container').backgroundColor, children: _jsx(PaintBucket, { size: 15 }) }), _jsx("input", { type: "color", className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer", onChange: e => {
+                            const val = e.target.value;
+                            const cmd = editor.chain().focus();
+                            if (editor.isActive('gridItem') || editor.isActive('gridContainer')) {
+                                cmd.updateAttributes('gridContainer', { backgroundColor: val });
                             }
-                        ]
-                    })
-                        .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) => {
+                            else if (editor.isActive('container')) {
+                                cmd.updateAttributes('container', { backgroundColor: val });
+                            }
+                            else if (editor.isActive('layoutColumn')) {
+                                cmd.updateAttributes('layoutColumn', { backgroundColor: val });
+                            }
+                            else if (editor.isActive('layoutRow')) {
+                                cmd.updateAttributes('layoutRow', { backgroundColor: val });
+                            }
+                            cmd.run();
+                        } })] }), _jsx(Divider, {}), _jsxs("div", { className: "relative flex items-center", title: "Border radius", children: [_jsx("span", { className: "absolute left-1.5 text-[9px] text-gray-400 pointer-events-none font-medium", children: "R" }), _jsx("input", { type: "number", placeholder: "0", className: "\n                        w-14 h-7 pl-4 pr-1 text-xs rounded-md\n                        border border-gray-200 dark:border-gray-700\n                        bg-white dark:bg-zinc-900\n                        text-gray-700 dark:text-gray-200\n                        outline-none focus:ring-1 focus:ring-blue-400\n                    ", onChange: e => {
                             const val = e.target.value;
                             const radius = val ? `${val}px` : null;
                             const cmd = editor.chain().focus();
@@ -114,5 +239,5 @@ export const Toolbar = ({ editor, onDistrictGridClick }) => {
                                 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 }) })] }));
+                        } })] }), _jsx(CustomFontSizeModal, { isOpen: isCustomFontSizeModalOpen, onClose: () => setIsCustomFontSizeModalOpen(false), onApply: applyFontSize, currentSize: activeFontSize })] }));
 };

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

@@ -0,0 +1,13 @@
+interface CustomFontSizeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onApply: (fontSize: string) => void;
+    currentSize?: string;
+}
+export declare function validateAndFormatFontSize(input: string): {
+    valid: boolean;
+    formatted: string;
+    error?: string;
+};
+export declare const CustomFontSizeModal: ({ isOpen, onClose, onApply, currentSize, }: CustomFontSizeModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/components/CustomFontSizeModal.js

@@ -0,0 +1,81 @@
+'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, Input, } from '@heroui/react';
+import { Type, AlertCircle } from 'lucide-react';
+export function validateAndFormatFontSize(input) {
+    const raw = input.trim();
+    if (!raw)
+        return { valid: false, formatted: '', error: 'Please enter a font size' };
+    const match = raw.match(/^([0-9]+(?:\.[0-9]+)?)\s*([a-zA-Z%]*)$/);
+    if (!match) {
+        return { valid: false, formatted: raw, error: 'Invalid size format (e.g. 16px or 1.5rem)' };
+    }
+    const num = parseFloat(match[1]);
+    const unit = match[2].toLowerCase();
+    if (isNaN(num)) {
+        return { valid: false, formatted: raw, error: 'Invalid numeric value' };
+    }
+    // Default unit to px if none provided
+    if (!unit || unit === 'px') {
+        if (num < 6) {
+            return { valid: false, formatted: '6px', error: 'Minimum allowed size is 6px' };
+        }
+        if (num > 150) {
+            return { valid: false, formatted: '150px', error: 'Maximum allowed size is 150px (capped)' };
+        }
+        return { valid: true, formatted: `${num}px` };
+    }
+    if (unit === 'rem' || unit === 'em') {
+        if (num < 0.5) {
+            return { valid: false, formatted: `0.5${unit}`, error: `Minimum allowed size is 0.5${unit}` };
+        }
+        if (num > 8) {
+            return { valid: false, formatted: `8${unit}`, error: `Maximum size for ${unit} is 8${unit} (capped at ~128px)` };
+        }
+        return { valid: true, formatted: `${num}${unit}` };
+    }
+    if (unit === 'pt') {
+        if (num < 5)
+            return { valid: false, formatted: '5pt', error: 'Minimum allowed size is 5pt' };
+        if (num > 115)
+            return { valid: false, formatted: '115pt', error: 'Maximum allowed size is 115pt' };
+        return { valid: true, formatted: `${num}pt` };
+    }
+    if (unit === '%') {
+        if (num < 50)
+            return { valid: false, formatted: '50%', error: 'Minimum allowed size is 50%' };
+        if (num > 1000)
+            return { valid: false, formatted: '1000%', error: 'Maximum allowed size is 1000%' };
+        return { valid: true, formatted: `${num}%` };
+    }
+    return { valid: false, formatted: raw, error: `Unsupported unit "${unit}". Use px, rem, pt, or em` };
+}
+export const CustomFontSizeModal = ({ isOpen, onClose, onApply, currentSize = '', }) => {
+    const [sizeInput, setSizeInput] = useState(currentSize || '16px');
+    useEffect(() => {
+        if (isOpen) {
+            setSizeInput(currentSize || '16px');
+        }
+    }, [isOpen, currentSize]);
+    const validation = validateAndFormatFontSize(sizeInput);
+    const handleApply = () => {
+        if (validation.formatted) {
+            onApply(validation.formatted);
+        }
+        onClose();
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "xs", backdrop: "opaque", classNames: {
+            base: "dark:bg-zinc-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl",
+            header: "border-b border-gray-100 dark:border-gray-800 py-3 px-4",
+            body: "py-4 px-4",
+            footer: "border-t border-gray-100 dark:border-gray-800 py-2.5 px-4 flex justify-end gap-2"
+        }, children: _jsx(ModalContent, { children: () => (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800 dark:text-gray-100", children: [_jsx(Type, { size: 16, className: "text-blue-500" }), _jsx("span", { children: "Custom Font Size" })] }), _jsx(ModalBody, { children: _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Enter size (e.g. 15px, 22px, 1.5rem)" }), _jsx(Input, { autoFocus: true, placeholder: "16px", value: sizeInput, onChange: (e) => setSizeInput(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            handleApply();
+                                        }
+                                    }, variant: "bordered", size: "sm", isInvalid: !validation.valid, classNames: {
+                                        inputWrapper: "border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-950 shadow-none focus-within:ring-2 focus-within:ring-blue-500"
+                                    } }), validation.error && (_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-amber-600 dark:text-amber-400 font-medium", children: [_jsx(AlertCircle, { size: 13, className: "flex-shrink-0" }), _jsx("span", { children: validation.error })] })), _jsxs("div", { className: "flex items-center gap-1.5 pt-1", children: [_jsx("span", { className: "text-[11px] text-gray-400", children: "Quick units:" }), ['12px', '15px', '22px', '28px', '40px'].map((preset) => (_jsx("button", { type: "button", onClick: () => setSizeInput(preset), className: "px-1.5 py-0.5 text-[11px] rounded bg-gray-100 dark:bg-zinc-800 text-gray-600 dark:text-gray-300 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950 transition-colors", children: preset }, preset)))] })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { size: "sm", variant: "flat", color: "default", onPress: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", color: "primary", onPress: handleApply, children: "Apply Size" })] })] })) }) }));
+};

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

@@ -67,5 +67,5 @@ export const DistrictGridModal = ({ isOpen, onClose, onInsert, currentSpeciality
                                                     ? "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(RefSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), multiple: true, pageSize: 1000 }), _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(RefSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), multiple: false, pageSize: 10000 }), _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" })] })] }) }) }));
+                                                    : "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(RefSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), multiple: true }), _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(RefSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), multiple: false }), _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/SchemaInsertionModal.js

@@ -83,7 +83,7 @@ export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, availa
             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: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), multiple: true, pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
+        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), multiple: true }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
                                                     ? "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"

package/dist/components/editor/editor.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fira+Code:wght@300..700&family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Sans+Bengali:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+
 .editor-input {
     min-height: 150px;
     resize: none;

package/dist/components/editor/extensions/FontSize.d.ts

@@ -0,0 +1,19 @@
+import { Extension } from '@tiptap/core';
+export interface FontSizeOptions {
+    types: string[];
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size attribute
+             */
+            setFontSize: (fontSize: string) => ReturnType;
+            /**
+             * Unset the font size attribute
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Extension<FontSizeOptions, any>;