@elixpo/lixeditor 2.1.6

package/src/blocks/SubpageBlock.jsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { createReactBlockSpec } from '@blocknote/react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export const TabsBlock = createReactBlockSpec(
+  {
+    type: 'tabsBlock',
+    propSchema: {
+      tabs: { default: '[]' },
+    },
+    content: 'none',
+  },
+  {
+    render: ({ block, editor }) => {
+      let tabs = [];
+      try { tabs = JSON.parse(block.props.tabs); } catch {}
+
+      const [adding, setAdding] = useState(tabs.length === 0);
+      const [newPageName, setNewPageName] = useState('');
+      const [creating, setCreating] = useState(false);
+      const inputRef = useRef(null);
+      const wrapperRef = useRef(null);
+
+      useEffect(() => {
+        if (adding && inputRef.current) inputRef.current.focus();
+        if (!adding && tabs.length === 0 && wrapperRef.current) wrapperRef.current.focus();
+      }, [adding, tabs.length]);
+
+      // Sync subpage titles from DB on mount
+      useEffect(() => {
+        if (tabs.length === 0) return;
+        const blogId = getBlogId();
+        if (!blogId) return;
+        fetch(`/api/subpages?blogId=${blogId}`)
+          .then(r => r.ok ? r.json() : null)
+          .then(data => {
+            if (!data?.subpages) return;
+            const titleMap = {};
+            data.subpages.forEach(sp => { titleMap[sp.id] = sp.title; });
+            let changed = false;
+            const updated = tabs.map(t => {
+              if (t.subpageId && titleMap[t.subpageId] && titleMap[t.subpageId] !== t.title) {
+                changed = true;
+                return { ...t, title: titleMap[t.subpageId] };
+              }
+              return t;
+            });
+            if (changed) editor.updateBlock(block, { props: { tabs: JSON.stringify(updated) } });
+          })
+          .catch(() => {});
+      }, []);
+
+      const getBlogId = () => {
+        const m = window.location.pathname.match(/\/edit\/([^/]+)/);
+        return m?.[1] || '';
+      };
+
+      const addPage = useCallback(async () => {
+        const name = newPageName.trim() || 'Untitled Page';
+        setCreating(true);
+        try {
+          const blogId = getBlogId();
+          const res = await fetch('/api/subpages', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ blogId, title: name }),
+          });
+          if (res.ok) {
+            const data = await res.json();
+            const updated = [...tabs, { title: name, subpageId: data.id }];
+            editor.updateBlock(block, { props: { tabs: JSON.stringify(updated) } });
+            setNewPageName('');
+            setAdding(false);
+          }
+        } catch {}
+        setCreating(false);
+      }, [newPageName, tabs, editor, block]);
+
+      const removePage = useCallback(async (idx) => {
+        const tab = tabs[idx];
+        if (tab?.subpageId) {
+          try { await fetch(`/api/subpages?id=${tab.subpageId}`, { method: 'DELETE' }); } catch {}
+        }
+        const updated = tabs.filter((_, i) => i !== idx);
+        editor.updateBlock(block, { props: { tabs: JSON.stringify(updated) } });
+      }, [tabs, editor, block]);
+
+      const openSubpage = useCallback((tab) => {
+        if (!tab.subpageId) return;
+        const blogId = getBlogId();
+        window.open(`/edit/${blogId}/${tab.subpageId}`, '_blank');
+      }, []);
+
+      const handleBlockKeyDown = (e) => {
+        if ((e.key === 'Backspace' || e.key === 'Delete') && tabs.length === 0 && !adding) {
+          e.preventDefault();
+          e.stopPropagation();
+          try { editor.removeBlocks([block.id]); } catch {}
+        }
+      };
+
+      // --- Adding state: name input ---
+      if (adding) {
+        return (
+          <div ref={wrapperRef} className="subpage-block" contentEditable={false} tabIndex={0} onKeyDown={handleBlockKeyDown} style={{ outline: 'none' }}>
+            <div className="subpage-block-inner subpage-block-adding">
+              <div className="subpage-icon subpage-icon--add">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9b7bf7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              </div>
+              <input
+                ref={inputRef}
+                value={newPageName}
+                onChange={(e) => setNewPageName(e.target.value)}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                  if (e.key === 'Enter' && newPageName.trim() && !creating) { e.preventDefault(); addPage(); }
+                  if (e.key === 'Backspace' && !newPageName) {
+                    e.preventDefault();
+                    if (tabs.length === 0) { try { editor.removeBlocks([block.id]); } catch {} }
+                    else setAdding(false);
+                  }
+                  if (e.key === 'Escape') {
+                    if (tabs.length === 0) { try { editor.removeBlocks([block.id]); } catch {} }
+                    else setAdding(false);
+                  }
+                }}
+                onKeyUp={(e) => e.stopPropagation()}
+                disabled={creating}
+                autoFocus
+                placeholder="Sub-page name..."
+                className="subpage-name-input"
+              />
+              {creating ? (
+                <div className="w-4 h-4 border-2 border-[#9b7bf7] border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <button onClick={addPage} disabled={!newPageName.trim()} className="subpage-create-btn">Create</button>
+              )}
+            </div>
+          </div>
+        );
+      }
+
+      // --- Rendered state: list of subpages ---
+      return (
+        <div ref={wrapperRef} className="subpage-block" contentEditable={false} tabIndex={0} onKeyDown={handleBlockKeyDown} style={{ outline: 'none' }}>
+          {tabs.map((tab, i) => (
+            <div
+              key={tab.subpageId || i}
+              className="subpage-block-inner subpage-item group/page"
+              onClick={() => openSubpage(tab)}
+            >
+              <div className="subpage-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                  <polyline points="14 2 14 8 20 8"/>
+                  <line x1="16" y1="13" x2="8" y2="13"/>
+                  <line x1="16" y1="17" x2="8" y2="17"/>
+                  <line x1="10" y1="9" x2="8" y2="9"/>
+                </svg>
+              </div>
+              <span className="subpage-title">{tab.title}</span>
+              {/* Delete — hover only */}
+              <button
+                onClick={(e) => { e.stopPropagation(); removePage(i); }}
+                className="subpage-delete-btn"
+                title="Remove sub-page"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><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>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="subpage-arrow">
+                <polyline points="9 18 15 12 9 6"/>
+              </svg>
+            </div>
+          ))}
+        </div>
+      );
+    },
+  }
+);

package/src/blocks/TableOfContents.jsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { createReactBlockSpec } from '@blocknote/react';
+
+export const TableOfContents = createReactBlockSpec(
+  {
+    type: 'tableOfContents',
+    propSchema: {},
+    content: 'none',
+  },
+  {
+    render: ({ editor }) => {
+      const headings = editor.document.filter(
+        (b) => b.type === 'heading' && b.content?.length > 0
+      );
+
+      return (
+        <div className="toc-block border border-[var(--border-default)] rounded-xl bg-[var(--bg-surface)] px-5 py-4 my-2 select-none">
+          <p className="text-[11px] uppercase tracking-wider text-[var(--text-muted)] font-bold mb-3">Table of Contents</p>
+          {headings.length === 0 ? (
+            <p className="text-[13px] text-[var(--text-faint)] italic">Add headings to see the outline here.</p>
+          ) : (
+            <ul className="space-y-1.5">
+              {headings.map((h) => {
+                const level = h.props?.level || 1;
+                const text = h.content.map((c) => c.text || '').join('');
+                return (
+                  <li
+                    key={h.id}
+                    className="text-[13px] text-[#9b7bf7] hover:text-[#b69aff] cursor-pointer transition-colors"
+                    style={{ paddingLeft: `${(level - 1) * 16}px` }}
+                    onClick={() => editor.setTextCursorPosition(h.id)}
+                  >
+                    {text}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      );
+    },
+  }
+);

package/src/blocks/index.js

@@ -0,0 +1,8 @@
+export { BlockEquation } from './BlockEquation';
+export { InlineEquation } from './InlineEquation';
+export { DateInline } from './DateInline';
+export { MermaidBlock } from './MermaidBlock';
+export { TableOfContents } from './TableOfContents';
+export { ButtonBlock } from './ButtonBlock';
+export { PDFEmbedBlock } from './PDFEmbedBlock';
+export { BlogImageBlock as ImageBlock } from './ImageBlock';

package/src/editor/KeyboardShortcutsModal.jsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+const SHORTCUT_GROUPS = [
+  {
+    title: 'General',
+    shortcuts: [
+      { keys: ['Ctrl', 'S'], desc: 'Save & sync to cloud' },
+      { keys: ['Ctrl', 'O'], desc: 'Import markdown file (.md)' },
+      { keys: ['Ctrl', 'Shift', 'I'], desc: 'Invite collaborators' },
+      { keys: ['Ctrl', 'D'], desc: 'Insert date chip' },
+      { keys: ['Ctrl', 'Shift', 'P'], desc: 'Toggle editor / preview' },
+      { keys: ['Ctrl', 'Z'], desc: 'Undo' },
+      { keys: ['Ctrl', 'Shift', 'Z'], desc: 'Redo' },
+      { keys: ['Ctrl', 'A'], desc: 'Select all' },
+      { keys: ['?'], desc: 'Show this help' },
+    ],
+  },
+  {
+    title: 'Text Formatting',
+    shortcuts: [
+      { keys: ['Ctrl', 'B'], desc: 'Bold' },
+      { keys: ['Ctrl', 'I'], desc: 'Italic' },
+      { keys: ['Ctrl', 'U'], desc: 'Underline' },
+      { keys: ['Ctrl', 'E'], desc: 'Code (inline)' },
+      { keys: ['Ctrl', 'Shift', 'S'], desc: 'Strikethrough' },
+      { keys: ['Ctrl', 'K'], desc: 'Add link' },
+    ],
+  },
+  {
+    title: 'Blocks',
+    shortcuts: [
+      { keys: ['/'], desc: 'Slash commands menu' },
+      { keys: ['Space'], desc: 'AI assistant (on empty line)' },
+      { keys: ['@'], desc: 'Mention user/blog/org' },
+      { keys: ['Tab'], desc: 'Indent block' },
+      { keys: ['Shift', 'Tab'], desc: 'Outdent block' },
+      { keys: ['Enter'], desc: 'New block' },
+      { keys: ['Backspace'], desc: 'Delete block (when empty)' },
+    ],
+  },
+  {
+    title: 'AI',
+    shortcuts: [
+      { keys: ['Space'], desc: 'Open AI prompt (empty line)' },
+      { keys: ['★', 'click'], desc: 'AI edit selected text' },
+      { keys: ['Esc'], desc: 'Cancel AI / close menu' },
+    ],
+  },
+];
+
+export default function KeyboardShortcutsModal({ onClose }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    function handleKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    }
+    document.addEventListener('keydown', handleKey);
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30 backdrop-blur-sm">
+      <div
+        ref={ref}
+        className="w-full max-w-[520px] max-h-[80vh] rounded-2xl shadow-2xl overflow-hidden"
+        style={{ backgroundColor: 'var(--card-bg)', border: '1px solid var(--border-default)', boxShadow: 'var(--shadow-lg)' }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4" style={{ borderBottom: '1px solid var(--divider)' }}>
+          <div className="flex items-center gap-2.5">
+            <ion-icon name="keypad-outline" style={{ fontSize: '18px', color: '#9b7bf7' }} />
+            <h2 className="text-[15px] font-bold" style={{ color: 'var(--text-primary)' }}>Keyboard Shortcuts</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="transition-colors p-1"
+            style={{ color: 'var(--text-faint)' }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto max-h-[calc(80vh-60px)] p-6 space-y-6 scrollbar-thin">
+          {SHORTCUT_GROUPS.map((group) => (
+            <div key={group.title}>
+              <h3 className="text-[11px] font-semibold uppercase tracking-wider mb-3" style={{ color: '#9b7bf7' }}>{group.title}</h3>
+              <div className="space-y-1">
+                {group.shortcuts.map((s, i) => (
+                  <div key={i} className="flex items-center justify-between py-1.5">
+                    <span className="text-[13px]" style={{ color: 'var(--text-body)' }}>{s.desc}</span>
+                    <div className="flex items-center gap-1">
+                      {s.keys.map((key, j) => (
+                        <span key={j}>
+                          {j > 0 && <span className="text-[10px] mx-0.5" style={{ color: 'var(--text-faint)' }}>+</span>}
+                          <kbd
+                            className="inline-block min-w-[24px] text-center px-1.5 py-0.5 text-[11px] font-medium rounded-md"
+                            style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--bg-surface)', border: '1px solid var(--border-default)' }}
+                          >
+                            {key}
+                          </kbd>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/LinkPreviewTooltip.jsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+// Client-side cache to avoid refetching the same URL
+const previewCache = new Map();
+
+let linkPreviewEndpoint = '/api/link-preview';
+export function setLinkPreviewEndpoint(endpoint) { linkPreviewEndpoint = endpoint; }
+
+async function fetchPreview(url) {
+  if (previewCache.has(url)) return previewCache.get(url);
+  try {
+    const res = await fetch(`${linkPreviewEndpoint}?url=${encodeURIComponent(url)}`);
+    if (!res.ok) throw new Error('fetch failed');
+    const data = await res.json();
+    previewCache.set(url, data);
+    return data;
+  } catch {
+    const fallback = { title: new URL(url).hostname, description: '', image: '', favicon: '', domain: new URL(url).hostname };
+    previewCache.set(url, fallback);
+    return fallback;
+  }
+}
+
+export default function LinkPreviewTooltip({ anchorEl, url, onClose }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const tooltipRef = useRef(null);
+  const hoverRef = useRef(false); // true if mouse is over link OR tooltip
+  const hideTimerRef = useRef(null);
+
+  useEffect(() => {
+    if (!url) return;
+    setLoading(true);
+    fetchPreview(url).then(d => {
+      setData(d);
+      setLoading(false);
+    });
+  }, [url]);
+
+  // Position computed once on mount
+  const posRef = useRef(null);
+  if (!posRef.current && anchorEl) {
+    const rect = anchorEl.getBoundingClientRect();
+    const tooltipWidth = 320;
+    const tooltipHeight = 300;
+    let left = rect.left + rect.width / 2 - tooltipWidth / 2;
+    left = Math.max(8, Math.min(left, window.innerWidth - tooltipWidth - 8));
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    if (spaceBelow >= tooltipHeight || spaceBelow >= rect.top) {
+      // Show below
+      posRef.current = { top: rect.bottom + 4, left };
+    } else {
+      // Show above — use bottom anchoring
+      posRef.current = { bottom: window.innerHeight - rect.top + 4, left, useBottom: true };
+    }
+  }
+
+  // Unified hover tracking: mouse over link OR tooltip = alive
+  const scheduleHide = useCallback(() => {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!hoverRef.current) onClose();
+    }, 200);
+  }, [onClose]);
+
+  // Track mouse on the anchor link
+  useEffect(() => {
+    if (!anchorEl) return;
+    const onEnter = () => { hoverRef.current = true; clearTimeout(hideTimerRef.current); };
+    const onLeave = () => { hoverRef.current = false; scheduleHide(); };
+    anchorEl.addEventListener('mouseenter', onEnter);
+    anchorEl.addEventListener('mouseleave', onLeave);
+    return () => {
+      anchorEl.removeEventListener('mouseenter', onEnter);
+      anchorEl.removeEventListener('mouseleave', onLeave);
+    };
+  }, [anchorEl, scheduleHide]);
+
+  const onTooltipEnter = useCallback(() => {
+    hoverRef.current = true;
+    clearTimeout(hideTimerRef.current);
+  }, []);
+
+  const onTooltipLeave = useCallback(() => {
+    hoverRef.current = false;
+    scheduleHide();
+  }, [scheduleHide]);
+
+  useEffect(() => {
+    return () => clearTimeout(hideTimerRef.current);
+  }, []);
+
+  if (!url || !posRef.current) return null;
+
+  const style = posRef.current.useBottom
+    ? { bottom: posRef.current.bottom, left: posRef.current.left }
+    : { top: posRef.current.top, left: posRef.current.left };
+
+  return (
+    <div
+      ref={tooltipRef}
+      className="link-preview-tooltip"
+      style={style}
+      onMouseEnter={onTooltipEnter}
+      onMouseLeave={onTooltipLeave}
+    >
+      {loading ? (
+        <div className="link-preview-loading">
+          <div className="link-preview-skeleton" style={{ width: '60%', height: 12 }} />
+          <div className="link-preview-skeleton" style={{ width: '90%', height: 10, marginTop: 8 }} />
+          <div className="link-preview-skeleton" style={{ width: '40%', height: 10, marginTop: 4 }} />
+        </div>
+      ) : data ? (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="link-preview-card">
+          {data.image && (
+            <div className="link-preview-image">
+              <img src={data.image} alt="" onError={e => { e.target.style.display = 'none'; }} />
+            </div>
+          )}
+          <div className="link-preview-body">
+            <div className="link-preview-title">{data.title}</div>
+            {data.description && (
+              <div className="link-preview-desc">{data.description.length > 120 ? data.description.slice(0, 120) + '...' : data.description}</div>
+            )}
+            <div className="link-preview-domain">
+              {data.favicon && <img src={data.favicon} alt="" className="link-preview-favicon" onError={e => { e.target.style.display = 'none'; }} />}
+              <span>{data.domain}</span>
+            </div>
+          </div>
+        </a>
+      ) : null}
+    </div>
+  );
+}
+
+// Hook to manage link preview state for any container
+export function useLinkPreview() {
+  const [preview, setPreview] = useState(null);
+  const showTimerRef = useRef(null);
+
+  const show = useCallback((anchorEl, url) => {
+    clearTimeout(showTimerRef.current);
+    showTimerRef.current = setTimeout(() => {
+      setPreview({ anchorEl, url });
+    }, 400);
+  }, []);
+
+  const hide = useCallback(() => {
+    clearTimeout(showTimerRef.current);
+    setPreview(null);
+  }, []);
+
+  const cancel = useCallback(() => {
+    clearTimeout(showTimerRef.current);
+  }, []);
+
+  useEffect(() => {
+    return () => clearTimeout(showTimerRef.current);
+  }, []);
+
+  return { preview, show, hide, cancel };
+}