@airoom/nextmin-react 1.4.0 → 1.4.2

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

@@ -0,0 +1,161 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { ReactRenderer } from '@tiptap/react';
+import { CommandList } from '../components/CommandList';
+import { List, LayoutTemplate, LayoutPanelLeft } from 'lucide-react'; // Assuming these icons are available
+export const SlashCommand = Extension.create({
+    name: 'slashCommand',
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                command: ({ editor, range }) => {
+                    // Just delete the range (the "/") to clean up
+                    editor.chain().focus().deleteRange(range).run();
+                },
+                items: ({ query }) => {
+                    const allCommands = [
+                        {
+                            title: 'Bullet List',
+                            description: 'Create a simple bullet list.',
+                            icon: List,
+                            command: ({ editor, range }) => {
+                                editor.chain().focus().deleteRange(range).toggleBulletList().run();
+                            },
+                        },
+                        {
+                            title: '2 Columns',
+                            description: 'Insert 2 responsive columns',
+                            icon: LayoutTemplate,
+                            command: ({ editor, range }) => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .deleteRange(range)
+                                    .insertContent('<p></p>') // Ensure separation
+                                    .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();
+                            },
+                        },
+                        {
+                            title: '3 Columns',
+                            description: 'Insert 3 responsive columns',
+                            icon: LayoutPanelLeft,
+                            command: ({ editor, range }) => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .deleteRange(range)
+                                    .insertContent('<p></p>') // Ensure separation
+                                    .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();
+                            },
+                        },
+                        // Add other static commands here if any
+                    ];
+                    // Filter commands based on query
+                    return allCommands
+                        .filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
+                        .slice(0, 10);
+                },
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ];
+    },
+});
+export const getSuggestionOptions = (items, onSelect) => ({
+    items: ({ query }) => {
+        return items
+            .filter((item) => item.modelName.toLowerCase().startsWith(query.toLowerCase()))
+            .slice(0, 10);
+    },
+    command: ({ editor, range }) => {
+        // For schema-only suggestions, we just delete the range.
+        // The actual selection logic (onSelect) is handled in the render function's command prop.
+        editor.chain().focus().deleteRange(range).run();
+    },
+    render: () => {
+        let component;
+        let popup = null;
+        let container = null;
+        return {
+            onStart: (props) => {
+                component = new ReactRenderer(CommandList, {
+                    props: {
+                        ...props,
+                        // Fix 1: Explicitly pass the command prop expected by CommandList
+                        command: (item) => {
+                            // If external callback provided, use it
+                            if (onSelect) {
+                                onSelect(item);
+                            }
+                            // CRITICAL: Call the original command to close the popup and delete the "/"
+                            props.command(item);
+                        },
+                        items: props.items,
+                    },
+                    editor: props.editor,
+                });
+                // Create container for popup
+                container = document.createElement('div');
+                container.style.position = 'absolute';
+                container.style.zIndex = '9999';
+                container.style.display = 'none'; // Hidden until positioned
+                document.body.appendChild(container);
+                // Mount component
+                // @ts-ignore
+                container.appendChild(component.element);
+                // Position it
+                const coords = props.clientRect?.();
+                if (coords && container) {
+                    container.style.display = 'block';
+                    container.style.left = `${coords.left}px`;
+                    container.style.top = `${coords.bottom + 10}px`;
+                }
+            },
+            onUpdate(props) {
+                component.updateProps({
+                    ...props,
+                    // Fix 2: Ensure command prop is preserved during updates
+                    command: (item) => {
+                        if (onSelect) {
+                            onSelect(item);
+                        }
+                        props.command(item);
+                    },
+                    items: props.items,
+                });
+                const coords = props.clientRect?.();
+                if (coords && container) {
+                    container.style.left = `${coords.left}px`;
+                    container.style.top = `${coords.bottom + 10}px`;
+                }
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    if (container) {
+                        container.remove();
+                        container = null;
+                    }
+                    return true;
+                }
+                // @ts-ignore
+                return component.ref?.onKeyDown(props);
+            },
+            onExit() {
+                if (container) {
+                    container.remove();
+                    container = null;
+                }
+                component.destroy();
+            },
+        };
+    },
+});

package/dist/components/editor/utils/upload.d.ts

@@ -0,0 +1 @@
+export declare function uploadFile(file: File): Promise<string>;

package/dist/components/editor/utils/upload.js

@@ -0,0 +1,49 @@
+// Utility to upload files reusing existing API logic
+const DEFAULT_ENDPOINT = ((process.env.NEXT_PUBLIC_NEXTMIN_API_URL || '') + '/files').replace(/\/+$/, '') || '/files';
+const defaultAuthHeaders = () => {
+    if (typeof window === 'undefined')
+        return {};
+    let token;
+    let apiKey;
+    try {
+        const raw = localStorage.getItem('nextmin.user');
+        if (raw) {
+            const u = JSON.parse(raw);
+            token = u?.token ?? u?.data?.token;
+        }
+    }
+    catch { }
+    token = token ?? localStorage.getItem('nextmin.token') ?? undefined;
+    apiKey =
+        localStorage.getItem('nextmin.apiKey') ??
+            process.env.NEXT_PUBLIC_NEXTMIN_API_KEY;
+    const h = {};
+    if (token)
+        h.Authorization = `Bearer ${token}`;
+    if (apiKey)
+        h['x-api-key'] = apiKey;
+    return h;
+};
+export async function uploadFile(file) {
+    const headers = defaultAuthHeaders();
+    const endpoint = DEFAULT_ENDPOINT;
+    // XHR for progress support if needed, but fetch is simpler for now
+    const formData = new FormData();
+    formData.append('file', file);
+    const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            ...headers
+            // Content-Type is set automatically by fetch with FormData
+        },
+        body: formData
+    });
+    if (!response.ok) {
+        throw new Error('Upload failed');
+    }
+    const json = await response.json();
+    if (!json.success || !json.data || !json.data.length) {
+        throw new Error(json.message || 'Upload failed');
+    }
+    return json.data[0].url;
+}

package/dist/editor.css

@@ -0,0 +1,460 @@
+.editor-input {
+    min-height: 150px;
+    resize: none;
+    font-size: 15px;
+    caret-color: rgb(5, 5, 5);
+    display: block;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: 10px;
+    caret-color: #444;
+}
+
+.editor-placeholder {
+    color: #999;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 15px;
+    left: 10px;
+    font-size: 15px;
+    user-select: none;
+    display: inline-block;
+    pointer-events: none;
+}
+
+.editor-text-bold {
+    font-weight: bold;
+}
+
+.editor-text-italic {
+    font-style: italic;
+}
+
+.editor-text-underline {
+    text-decoration: underline !important;
+}
+
+.image-resizer {
+    display: block;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+    z-index: 100 !important;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+.editor-text-strikethrough {
+    text-decoration: line-through;
+}
+
+.editor-text-underlineStrikethrough {
+    text-decoration: underline line-through;
+}
+
+.editor-text-code {
+    background-color: rgb(240, 242, 245);
+    padding: 1px 0.25rem;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 94%;
+}
+
+.editor-link {
+    color: rgb(33, 111, 219);
+    text-decoration: none;
+}
+
+.editor-code {
+    background-color: rgb(240, 242, 245);
+    font-family: Menlo, Consolas, Monaco, monospace;
+    display: block;
+    padding: 8px 8px 8px 52px;
+    line-height: 1.53;
+    font-size: 13px;
+    margin: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    tab-size: 2;
+    overflow-x: auto;
+    position: relative;
+}
+
+.editor-code:before {
+    content: attr(data-gutter);
+    position: absolute;
+    background-color: #eee;
+    left: 0;
+    top: 0;
+    border-right: 1px solid #ccc;
+    padding: 8px;
+    color: #777;
+    white-space: pre-wrap;
+    text-align: right;
+    min-width: 25px;
+}
+
+.editor-paragraph {
+    margin: 0;
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.editor-heading-h1 {
+    font-size: 24px;
+    color: rgb(5, 5, 5);
+    font-weight: bold;
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 0;
+}
+
+.editor-heading-h2 {
+    font-size: 15px;
+    color: rgb(101, 103, 107);
+    font-weight: bold;
+    margin: 0;
+    margin-top: 10px;
+    padding: 0;
+    text-transform: uppercase;
+}
+
+.editor-quote {
+    margin: 0;
+    margin-left: 20px;
+    font-size: 15px;
+    color: rgb(101, 103, 107);
+    border-left-color: rgb(206, 208, 212);
+    border-left-width: 4px;
+    border-left-style: solid;
+    padding-left: 16px;
+}
+
+.editor-list-ol {
+    padding: 0;
+    margin: 0;
+    margin-left: 20px;
+    list-style-type: decimal;
+}
+
+.editor-list-ul {
+    padding: 0;
+    margin: 0;
+    margin-left: 20px;
+    list-style-type: disc;
+}
+
+.editor-listitem {
+    margin: 8px 32px 8px 32px;
+}
+
+.editor-nested-listitem {
+    list-style-type: none;
+}
+
+/* Image Resizer Styles */
+.editor-image {
+    cursor: default;
+    display: inline-block;
+    position: relative;
+    user-select: none;
+}
+
+.editor-image img {
+    max-width: 100%;
+    cursor: default;
+}
+
+.editor-image.focused {
+    outline: 2px solid rgb(60, 132, 244);
+    user-select: none;
+}
+
+
+
+.image-resizer-n {
+    top: -6px;
+    left: 48%;
+    cursor: n-resize;
+}
+
+.image-resizer-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+}
+
+.image-resizer-e {
+    bottom: 48%;
+    right: -6px;
+    cursor: e-resize;
+}
+
+.image-resizer-se {
+    bottom: -6px;
+    right: -6px;
+    cursor: se-resize;
+}
+
+.image-resizer-s {
+    bottom: -6px;
+    left: 48%;
+    cursor: s-resize;
+}
+
+.image-resizer-sw {
+    bottom: -6px;
+    left: -6px;
+    cursor: sw-resize;
+}
+
+.image-resizer-w {
+    bottom: 48%;
+    left: -6px;
+    cursor: w-resize;
+}
+
+.image-resizer-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+}
+
+.editor-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    max-width: 100%;
+    overflow-y: scroll;
+    table-layout: fixed;
+    width: 100%;
+}
+
+.editor-tableRow {}
+
+.editor-tableCell {
+    border: 1px solid #bbb;
+    min-width: 75px;
+    padding: 8px;
+    position: relative;
+    vertical-align: top;
+    z-index: 0;
+}
+
+.editor-tableCellHeader {
+    background-color: #f2f3f5;
+    text-align: start;
+}
+
+.editor-layout-container {
+    display: grid;
+    gap: 10px;
+    margin: 10px 0;
+}
+
+.editor-layout-item {
+    border: 1px dashed #ddd;
+    padding: 8px;
+    min-height: 50px;
+}
+
+/* ========================================================================= */
+/* MERGED: NextMin Custom Editor Components (Grid, Layout, Image)            */
+/* ========================================================================= */
+
+/* Editor Grid System (replacing Tailwind) */
+
+/* Grid Container */
+.nm-editor-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 1.5rem;
+    /* gap-6 equivalent */
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 640px) {
+    .nm-editor-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 768px) {
+    .nm-editor-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+/* Layout Rows */
+.nm-editor-row-1 {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.nm-editor-row-2 {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+    .nm-editor-row-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+.nm-editor-row-3 {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+    .nm-editor-row-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+
+/* Grid Item Wrapper (div) */
+/* Grid Item (Card) */
+.nm-editor-grid-card {
+    /* Container Styles */
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e5e7eb;
+    /* gray-200 */
+    border-radius: var(--nm-grid-radius, 0.5rem);
+    /* rounded-lg with override */
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    /* shadow-sm */
+    background-color: var(--nm-grid-card-bg, #ffffff);
+    overflow: hidden;
+
+    /* Transition */
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+
+    /* Content/Layout Styles */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    /* p-5 */
+
+    /* Text Styles */
+    font-weight: 500;
+    font-size: 1rem;
+    color: #374151;
+    /* gray-700 */
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+.nm-editor-grid-card:hover {
+    background-color: #f9fafb;
+    /* gray-50 */
+}
+
+/* Ensure content inside grid cards is compact */
+.nm-editor-grid-card p {
+    margin: 0 !important;
+}
+
+/* Dark Mode support */
+.dark .nm-editor-grid-card {
+    border-color: #1f2937;
+    /* gray-800 */
+    background-color: #18181b;
+    /* zinc-900 */
+    color: #e5e7eb;
+    /* gray-200 */
+}
+
+.dark .nm-editor-grid-card:hover {
+    background-color: #27272a;
+    /* zinc-800 */
+}
+
+
+/* Layout Column */
+.nm-editor-col {
+    width: 100%;
+    height: 100%;
+}
+
+/* Image Component Styles */
+.nm-editor-w-full {
+    width: 100%;
+}
+
+.nm-editor-img {
+    border-radius: 0.125rem;
+    /* rounded-sm */
+    max-width: 100%;
+}
+
+.nm-editor-img-wrapper {
+    position: relative;
+    line-height: 1;
+}
+
+.nm-editor-img-container {
+    position: relative;
+    display: inline-flex;
+}
+
+.nm-editor-ring-selected {
+    border-radius: 0.125rem;
+    box-shadow: 0 0 0 2px var(--nm-primary, #3b82f6);
+    /* ring-2 ring-primary */
+}
+
+.nm-editor-group {
+    /* placeholder for group if needed */
+}
+
+/* Table Resizing */
+.resize-cursor {
+    cursor: col-resize;
+}
+
+.column-resize-handle {
+    background-color: #3b82f6;
+    /* blue-500 */
+    bottom: -2px;
+    pointer-events: none;
+    position: absolute;
+    right: -2px;
+    top: 0;
+    width: 4px;
+    z-index: 10;
+}
+
+
+/* Standalone Container */
+.nm-editor-container {
+    display: block;
+    width: 100%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+    /* Default padding if user puts text directly */
+    padding: 1rem;
+    border: 1px dashed transparent;
+    /* Helps selection visualization if needed */
+}

package/dist/lib/upload.d.ts

@@ -0,0 +1 @@
+export declare function uploadFile(file: File): Promise<string | null>;