@airoom/nextmin-react 1.4.0 → 1.4.1

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>;

package/dist/lib/upload.js

@@ -0,0 +1,53 @@
+const getAuthHeaders = () => {
+    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;
+};
+// Basic upload helper for Tiptap editor
+// This mimics the logic in FileUploader but simplified for single file upload
+export async function uploadFile(file) {
+    const DEFAULT_ENDPOINT = ((process.env.NEXT_PUBLIC_NEXTMIN_API_URL || '') + '/files').replace(/\/+$/, '') || '/files';
+    const endpoint = DEFAULT_ENDPOINT;
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+        const headers = getAuthHeaders();
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            body: formData,
+            headers
+        });
+        if (!response.ok) {
+            console.error('Upload failed');
+            return null;
+        }
+        const json = await response.json();
+        if (json.success && Array.isArray(json.data) && json.data.length > 0) {
+            return json.data[0].url;
+        }
+        return json.url || null; // Fallback
+    }
+    catch (error) {
+        console.error('Error uploading file:', error);
+        return null;
+    }
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}