@elixpo/lixeditor 2.1.6

package/src/blocks/ImageBlock.jsx

@@ -0,0 +1,274 @@
+'use client';
+
+import { createReactBlockSpec } from '@blocknote/react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Image block for @elixpo/lixeditor.
+ * Supports: Upload (base64), Embed URL, Paste, Drag & Drop, Captions.
+ * Same class names as LixBlogs for CSS compatibility.
+ *
+ * For custom upload (e.g. cloud storage), consumers should use the LixBlogs
+ * BlogImageBlock or override via extraBlockSpecs.
+ */
+export const BlogImageBlock = createReactBlockSpec(
+  {
+    type: 'image',
+    propSchema: {
+      url: { default: '' },
+      caption: { default: '' },
+      previewWidth: { default: 740 },
+      name: { default: '' },
+      showPreview: { default: true },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => <ImageRenderer {...props} />,
+  }
+);
+
+function ImageRenderer({ block, editor }) {
+  const { url, caption } = block.props;
+  const [mode, setMode] = useState('idle'); // idle | embed | uploading
+  const [embedUrl, setEmbedUrl] = useState('');
+  const [embedError, setEmbedError] = useState('');
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState('');
+  const [editingCaption, setEditingCaption] = useState(false);
+  const [captionText, setCaptionText] = useState(caption || '');
+  const fileInputRef = useRef(null);
+  const blockRef = useRef(null);
+  const embedInputRef = useRef(null);
+
+  // Focus input when mode changes
+  useEffect(() => {
+    if (mode === 'embed') setTimeout(() => embedInputRef.current?.focus(), 50);
+  }, [mode]);
+
+  // Keyboard: backspace to delete when focused
+  useEffect(() => {
+    const el = blockRef.current;
+    if (!el) return;
+    function handleKey(e) {
+      if ((e.key === 'Backspace' || e.key === 'Delete') && mode === 'idle' && !url) {
+        e.preventDefault();
+        try { editor.removeBlocks([block.id]); } catch {}
+      }
+    }
+    el.addEventListener('keydown', handleKey);
+    return () => el.removeEventListener('keydown', handleKey);
+  }, [editor, block.id, mode, url]);
+
+  // Upload — reads file as base64 data URL
+  const uploadFile = useCallback(async (file) => {
+    if (!file || !file.type.startsWith('image/')) return;
+    setMode('uploading');
+    setUploadStatus('Processing...');
+    try {
+      const reader = new FileReader();
+      reader.onload = () => {
+        editor.updateBlock(block.id, { props: { url: reader.result, name: file.name } });
+        setMode('idle');
+      };
+      reader.onerror = () => {
+        showFailToast('Failed to read image');
+        setMode('idle');
+      };
+      reader.readAsDataURL(file);
+    } catch {
+      setMode('idle');
+    }
+  }, [editor, block.id]);
+
+  // Paste handler
+  const handlePaste = useCallback((e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        uploadFile(item.getAsFile());
+        return;
+      }
+    }
+  }, [uploadFile]);
+
+  // Drag and drop
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (file?.type.startsWith('image/')) uploadFile(file);
+  }, [uploadFile]);
+
+  // Embed URL submit
+  const handleEmbed = useCallback(() => {
+    const trimmed = embedUrl.trim();
+    if (!trimmed) return;
+    if (!trimmed.startsWith('http')) {
+      setEmbedError('URL must start with http:// or https://');
+      return;
+    }
+    editor.updateBlock(block.id, { props: { url: trimmed } });
+    setMode('idle');
+    setEmbedUrl('');
+    setEmbedError('');
+  }, [embedUrl, editor, block.id]);
+
+  // Toast on failure
+  const showFailToast = useCallback((msg) => {
+    const toast = document.createElement('div');
+    toast.className = 'blog-img-fail-toast';
+    toast.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="flex-shrink:0"><circle cx="8" cy="8" r="7" stroke="#f87171" stroke-width="1.5"/><path d="M8 4.5v4" stroke="#f87171" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11" r=".75" fill="#f87171"/></svg><span>${msg}</span>`;
+    document.body.appendChild(toast);
+    setTimeout(() => { toast.classList.add('blog-img-fail-toast--out'); }, 3200);
+    setTimeout(() => { toast.remove(); }, 3600);
+  }, []);
+
+  const handleDelete = useCallback(() => {
+    try { editor.removeBlocks([block.id]); } catch {}
+  }, [editor, block.id]);
+
+  const handleReplace = useCallback(() => {
+    editor.updateBlock(block.id, { props: { url: '' } });
+    setMode('idle');
+  }, [editor, block.id]);
+
+  const handleCaptionSave = useCallback(() => {
+    editor.updateBlock(block.id, { props: { caption: captionText } });
+    setEditingCaption(false);
+  }, [editor, block.id, captionText]);
+
+  // ─── No image yet ───
+  if (!url) {
+    return (
+      <div
+        ref={blockRef}
+        className="blog-img-empty"
+        tabIndex={0}
+        onPaste={handlePaste}
+        onDrop={handleDrop}
+        onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+        onDragLeave={() => setIsDragOver(false)}
+        data-drag-over={isDragOver}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => { if (e.target.files?.[0]) uploadFile(e.target.files[0]); e.target.value = ''; }}
+          style={{ display: 'none' }}
+        />
+
+        {/* Uploading state */}
+        {mode === 'uploading' && (
+          <div className="blog-img-status">
+            <div className="blog-img-spinner" />
+            <span>{uploadStatus}</span>
+          </div>
+        )}
+
+        {/* Idle — 2 action buttons (no AI) */}
+        {mode === 'idle' && (
+          <>
+            <div className="blog-img-actions-row">
+              <button className="blog-img-action" onClick={() => fileInputRef.current?.click()}>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+                Upload
+              </button>
+              <button className="blog-img-action" onClick={() => setMode('embed')}>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
+                  <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
+                </svg>
+                Embed URL
+              </button>
+            </div>
+            <p className="blog-img-hint">or drag & drop / paste an image</p>
+          </>
+        )}
+
+        {/* Embed URL input */}
+        {mode === 'embed' && (
+          <div className="blog-img-input-row">
+            <input
+              ref={embedInputRef}
+              type="url"
+              value={embedUrl}
+              onChange={(e) => { setEmbedUrl(e.target.value); setEmbedError(''); }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleEmbed();
+                if (e.key === 'Escape') { setMode('idle'); setEmbedUrl(''); setEmbedError(''); }
+              }}
+              placeholder="https://example.com/image.jpg"
+              className="blog-img-url-input"
+            />
+            <button className="blog-img-submit-btn" onClick={handleEmbed} disabled={!embedUrl.trim()}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </button>
+            <button className="blog-img-cancel-btn" onClick={() => { setMode('idle'); setEmbedUrl(''); setEmbedError(''); }}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+            {embedError && <span className="blog-img-error">{embedError}</span>}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ─── Image loaded ───
+  return (
+    <div ref={blockRef} className="blog-img-loaded" tabIndex={0} onPaste={handlePaste}>
+      <div className="blog-img-wrapper">
+        <img src={url} alt={caption || 'Image'} className="blog-img-main" draggable={false} />
+        <div className="blog-img-hover-overlay">
+          <div className="blog-img-hover-actions">
+            <button className="blog-img-hover-btn" onClick={handleReplace}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+              </svg>
+            </button>
+            <button className="blog-img-hover-btn" onClick={() => setEditingCaption(true)}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+              </svg>
+            </button>
+            <button className="blog-img-hover-btn blog-img-hover-delete" onClick={handleDelete}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      {editingCaption ? (
+        <input
+          type="text"
+          value={captionText}
+          onChange={(e) => setCaptionText(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') handleCaptionSave(); if (e.key === 'Escape') { setEditingCaption(false); setCaptionText(caption || ''); } }}
+          onBlur={handleCaptionSave}
+          placeholder="Add a caption..."
+          className="blog-img-caption-input"
+          autoFocus
+        />
+      ) : (
+        <p
+          className={`blog-img-caption ${caption ? '' : 'blog-img-caption--empty'}`}
+          onClick={() => { setCaptionText(caption || ''); setEditingCaption(true); }}
+        >
+          {caption || 'Add a caption...'}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/blocks/InlineEquation.jsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { createReactInlineContentSpec } from '@blocknote/react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import katex from 'katex';
+
+function stripDelimiters(raw) {
+  let s = raw.trim();
+  if (s.startsWith('\\(') && s.endsWith('\\)')) return s.slice(2, -2).trim();
+  if (s.startsWith('\\[') && s.endsWith('\\]')) return s.slice(2, -2).trim();
+  if (s.startsWith('$$') && s.endsWith('$$')) return s.slice(2, -2).trim();
+  if (s.startsWith('$') && s.endsWith('$') && s.length > 2) return s.slice(1, -1).trim();
+  return s;
+}
+
+function renderKaTeXInline(latex) {
+  try {
+    return katex.renderToString(stripDelimiters(latex), { displayMode: false, throwOnError: false });
+  } catch {
+    return `<span style="color:#f87171">${latex}</span>`;
+  }
+}
+
+function InlineEquationChip({ inlineContent }) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(inlineContent.props.latex || '');
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+
+  useEffect(() => {
+    if (editing && inputRef.current) inputRef.current.focus();
+  }, [editing]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!editing) return;
+    function handleClick(e) {
+      if (popupRef.current && !popupRef.current.contains(e.target)) {
+        setEditing(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [editing]);
+
+  const save = useCallback(() => {
+    if (value.trim()) {
+      inlineContent.props.latex = value.trim();
+    }
+    setEditing(false);
+  }, [value, inlineContent]);
+
+  const html = renderKaTeXInline(inlineContent.props.latex);
+
+  // Live preview while editing
+  const previewHtml = value.trim() ? renderKaTeXInline(value) : '';
+
+  return (
+    <span className="relative inline-flex items-center">
+      <span
+        onClick={(e) => { e.preventDefault(); e.stopPropagation(); setValue(inlineContent.props.latex || ''); setEditing(!editing); }}
+        className="inline-equation-chip"
+        dangerouslySetInnerHTML={{ __html: html }}
+        title={inlineContent.props.latex}
+      />
+      {editing && (
+        <div
+          ref={popupRef}
+          className="inline-equation-editor"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            className="inline-equation-editor-input"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') { e.preventDefault(); save(); }
+              if (e.key === 'Escape') { setEditing(false); }
+            }}
+            placeholder="E = mc^2"
+          />
+          {previewHtml && (
+            <div className="inline-equation-editor-preview" dangerouslySetInnerHTML={{ __html: previewHtml }} />
+          )}
+          <div className="inline-equation-editor-actions">
+            <button className="mermaid-btn-cancel" onClick={() => setEditing(false)}>Cancel</button>
+            <button className="mermaid-btn-save" disabled={!value.trim()} onClick={save}>Save</button>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+}
+
+export const InlineEquation = createReactInlineContentSpec(
+  {
+    type: 'inlineEquation',
+    propSchema: {
+      latex: { default: 'x^2' },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => <InlineEquationChip {...props} />,
+  }
+);