@airoom/nextmin-react 1.4.0 → 1.4.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/editor/components/TableBubbleMenu.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Columns, Rows, Trash2 } from 'lucide-react';
+export const TableBubbleMenu = ({ editor }) => {
+    if (!editor)
+        return null;
+    return (_jsxs(BubbleMenu, { editor: editor, shouldShow: ({ editor }) => editor.isActive('table'), className: "flex items-center gap-1 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-gray-700 shadow-lg p-1 rounded-lg", children: [_jsxs("button", { type: "button", onClick: () => editor.chain().focus().addColumnBefore().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Column Before", children: [_jsx(Columns, { size: 14, className: "rotate-180" }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Column After", children: [_jsx(Columns, { size: 14 }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Column", children: [_jsx(Columns, { size: 14 }), "-"] }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addRowBefore().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Row Before", children: [_jsx(Rows, { size: 14, className: "rotate-180" }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Row After", children: [_jsx(Rows, { size: 14 }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Row", children: [_jsx(Rows, { size: 14 }), "-"] }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteTable().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Table", children: _jsx(Trash2, { size: 16 }) })] }));
+};

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

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const Container: Node<any, any>;

package/dist/components/editor/extensions/Container.js

@@ -0,0 +1,51 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Container = Node.create({
+    name: 'container',
+    group: 'block',
+    content: 'block+', // Can contain paragraphs, lists, etc.
+    defining: true, // Prevents node from being replaced when content is pasted
+    isolating: false, // Allow backspace to delete/merge
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="container"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'container',
+                class: 'nm-editor-container',
+            }),
+            0,
+        ];
+    },
+});

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

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+export declare const GridContainer: Node<any, any>;
+export declare const GridItem: Node<any, any>;

package/dist/components/editor/extensions/Grid.js

@@ -0,0 +1,89 @@
+import { Node } from '@tiptap/core';
+export const GridContainer = Node.create({
+    name: 'gridContainer',
+    group: 'block',
+    content: 'gridItem+', // Contains only grid items
+    defining: true,
+    isolating: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="grid-container"]', priority: 51 },
+            { tag: 'div.nm-editor-grid', priority: 51 },
+        ];
+    },
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.getPropertyValue('--nm-grid-card-bg'),
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `--nm-grid-card-bg: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.getPropertyValue('--nm-grid-radius')?.replace(/["']/g, ''), // parse from var if possible, or just ignore since it's logical
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `--nm-grid-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            {
+                'data-type': 'grid-container',
+                ...HTMLAttributes,
+                class: 'nm-editor-grid',
+            },
+            0,
+        ];
+    },
+});
+export const GridItem = Node.create({
+    name: 'gridItem',
+    group: 'block',
+    content: 'block+', // Allow blocks (paragraphs) prevents flattening
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            href: {
+                default: null,
+                parseHTML: element => element.getAttribute('href'),
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="grid-item"]', priority: 60 },
+            { tag: 'div.nm-editor-grid-card', priority: 60 },
+            { tag: 'a[data-type="grid-item"]', priority: 60 },
+            { tag: 'a.nm-editor-grid-card', priority: 60 },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { href, class: _c, className: _cn, ...attributesWithoutHref } = HTMLAttributes;
+        const hasHref = !!href;
+        const Tag = hasHref ? 'a' : 'div';
+        return [
+            Tag,
+            {
+                'data-type': 'grid-item',
+                ...attributesWithoutHref,
+                ...(hasHref ? { href } : {}),
+                class: 'nm-editor-grid-card',
+            },
+            0,
+        ];
+    },
+});

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

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+export declare const LayoutRow: Node<any, any>;
+export declare const LayoutColumn: Node<any, any>;

package/dist/components/editor/extensions/Layout.js

@@ -0,0 +1,116 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const LayoutRow = Node.create({
+    name: 'layoutRow',
+    group: 'block',
+    content: 'layoutColumn+', // Must contain one or more columns
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            cols: {
+                default: 2,
+                parseHTML: element => element.getAttribute('data-cols'),
+                renderHTML: attributes => ({
+                    'data-cols': attributes.cols,
+                }),
+            },
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="layout-row"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const cols = HTMLAttributes.cols || 2;
+        let gridClass = 'nm-editor-row-2';
+        if (cols == 3) {
+            gridClass = 'nm-editor-row-3';
+        }
+        else if (cols == 1) {
+            gridClass = 'nm-editor-row-1';
+        }
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'layout-row',
+                class: gridClass,
+            }),
+            0,
+        ];
+    },
+});
+export const LayoutColumn = Node.create({
+    name: 'layoutColumn',
+    group: 'block',
+    content: 'block+', // Can contain paragraphs, lists, images, etc.
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="layout-column"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'layout-column',
+                class: 'nm-editor-col',
+            }),
+            0,
+        ];
+    },
+});

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

@@ -0,0 +1 @@
+export declare const ResizableImage: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/editor/extensions/ResizableImage.js

@@ -0,0 +1,52 @@
+import Image from '@tiptap/extension-image';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { ImageComponent } from '../components/ImageComponent';
+import { mergeAttributes } from '@tiptap/core';
+export const ResizableImage = Image.extend({
+    name: 'image',
+    group: 'block',
+    inline: false,
+    draggable: true,
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            width: {
+                default: null,
+                renderHTML: (attributes) => {
+                    if (!attributes.width)
+                        return {};
+                    return { width: attributes.width };
+                }
+            },
+            height: {
+                default: null,
+                renderHTML: (attributes) => {
+                    if (!attributes.height)
+                        return {};
+                    return { height: attributes.height };
+                }
+            },
+            src: {
+                default: '',
+            },
+            alt: {
+                default: '',
+            },
+            objectFit: {
+                default: 'contain', // cover, contain, fill
+                renderHTML: (attributes) => {
+                    if (!attributes.objectFit)
+                        return {};
+                    return { style: `object-fit: ${attributes.objectFit}` };
+                }
+            },
+        };
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ImageComponent);
+    },
+    // Custom renderHTML to ensure attributes are correct in output
+    renderHTML({ HTMLAttributes }) {
+        return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+});

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

@@ -0,0 +1,15 @@
+import { Extension } from '@tiptap/core';
+import { SchemaDef } from '../../../lib/types';
+export declare const SlashCommand: Extension<any, any>;
+export declare const getSuggestionOptions: (items: SchemaDef[], onSelect?: (item: SchemaDef) => void) => {
+    items: ({ query }: {
+        query: string;
+    }) => SchemaDef[];
+    command: ({ editor, range }: any) => void;
+    render: () => {
+        onStart: (props: any) => void;
+        onUpdate(props: any): void;
+        onKeyDown(props: any): any;
+        onExit(): void;
+    };
+};