@elixpo/lixeditor 2.1.6

package/src/editor/LixEditor.jsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs, createCodeBlockSpec } from '@blocknote/core';
+import { useCreateBlockNote, SuggestionMenuController, getDefaultReactSlashMenuItems, TableHandlesController } from '@blocknote/react';
+import { BlockNoteView } from '@blocknote/mantine';
+import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
+import { useLixTheme } from '../hooks/useLixTheme';
+
+// Core blocks
+import { BlockEquation } from '../blocks/BlockEquation';
+import { MermaidBlock } from '../blocks/MermaidBlock';
+import { TableOfContents } from '../blocks/TableOfContents';
+import { InlineEquation } from '../blocks/InlineEquation';
+import { DateInline } from '../blocks/DateInline';
+
+// Optional blocks — imported but can be disabled via config
+import { BlogImageBlock as ImageBlock } from '../blocks/ImageBlock';
+import { ButtonBlock } from '../blocks/ButtonBlock';
+import { PDFEmbedBlock } from '../blocks/PDFEmbedBlock';
+
+// Utilities
+import LinkPreviewTooltip, { useLinkPreview } from './LinkPreviewTooltip';
+
+// Default code block languages
+const DEFAULT_LANGUAGES = {
+  text: { name: 'Text' },
+  javascript: { name: 'JavaScript', aliases: ['js'] },
+  typescript: { name: 'TypeScript', aliases: ['ts'] },
+  python: { name: 'Python', aliases: ['py'] },
+  java: { name: 'Java' },
+  c: { name: 'C' },
+  cpp: { name: 'C++' },
+  csharp: { name: 'C#', aliases: ['cs'] },
+  go: { name: 'Go' },
+  rust: { name: 'Rust', aliases: ['rs'] },
+  ruby: { name: 'Ruby', aliases: ['rb'] },
+  php: { name: 'PHP' },
+  swift: { name: 'Swift' },
+  kotlin: { name: 'Kotlin', aliases: ['kt'] },
+  html: { name: 'HTML' },
+  css: { name: 'CSS' },
+  json: { name: 'JSON' },
+  yaml: { name: 'YAML', aliases: ['yml'] },
+  markdown: { name: 'Markdown', aliases: ['md'] },
+  bash: { name: 'Bash', aliases: ['sh'] },
+  shell: { name: 'Shell' },
+  sql: { name: 'SQL' },
+  graphql: { name: 'GraphQL', aliases: ['gql'] },
+  jsx: { name: 'JSX' },
+  tsx: { name: 'TSX' },
+  vue: { name: 'Vue' },
+  svelte: { name: 'Svelte' },
+  dart: { name: 'Dart' },
+  lua: { name: 'Lua' },
+  r: { name: 'R' },
+  scala: { name: 'Scala' },
+};
+
+/**
+ * LixEditor — A rich WYSIWYG block editor.
+ *
+ * @param {Object} props
+ * @param {Array} [props.initialContent] - Initial block content (BlockNote format)
+ * @param {Function} [props.onChange] - Called when content changes, receives the editor instance
+ * @param {Object} [props.features] - Enable/disable features
+ * @param {boolean} [props.features.equations=true] - Block & inline LaTeX equations
+ * @param {boolean} [props.features.mermaid=true] - Mermaid diagram blocks
+ * @param {boolean} [props.features.codeHighlighting=true] - Shiki syntax highlighting
+ * @param {boolean} [props.features.tableOfContents=true] - TOC block
+ * @param {boolean} [props.features.images=true] - Image blocks
+ * @param {boolean} [props.features.buttons=true] - Button blocks
+ * @param {boolean} [props.features.pdf=true] - PDF embed blocks
+ * @param {boolean} [props.features.dates=true] - Inline date chips
+ * @param {boolean} [props.features.linkPreview=true] - Link hover preview
+ * @param {boolean} [props.features.markdownLinks=true] - Auto-convert [text](url) to links
+ * @param {Object} [props.codeLanguages] - Custom code block language map (overrides defaults)
+ * @param {Array} [props.extraBlockSpecs] - Additional custom block specs to register
+ * @param {Array} [props.extraInlineSpecs] - Additional custom inline content specs
+ * @param {Array} [props.slashMenuItems] - Additional slash menu items
+ * @param {string} [props.placeholder] - Editor placeholder text
+ * @param {Object} [props.collaboration] - Yjs collaboration config
+ * @param {Function} [props.onReady] - Called when editor is ready
+ * @param {React.ReactNode} [props.children] - Additional children rendered inside BlockNoteView
+ */
+const LixEditor = forwardRef(function LixEditor({
+  initialContent,
+  onChange,
+  features = {},
+  codeLanguages,
+  extraBlockSpecs = [],
+  extraInlineSpecs = [],
+  slashMenuItems: extraSlashItems = [],
+  placeholder = "Type '/' for commands...",
+  collaboration,
+  onReady,
+  children,
+}, ref) {
+  const { isDark } = useLixTheme();
+  const wrapperRef = useRef(null);
+  const editorLinkPreview = useLinkPreview();
+
+  // Merge features with defaults
+  const f = {
+    equations: true, mermaid: true, codeHighlighting: true,
+    tableOfContents: true, images: true, buttons: true, pdf: true,
+    dates: true, linkPreview: true, markdownLinks: true,
+    ...features,
+  };
+
+  // Build block specs
+  const langs = codeLanguages || DEFAULT_LANGUAGES;
+  const codeBlock = f.codeHighlighting
+    ? createCodeBlockSpec({
+        supportedLanguages: langs,
+        createHighlighter: async () => {
+          const { createHighlighter } = await import('shiki');
+          return createHighlighter({
+            themes: ['vitesse-dark', 'vitesse-light'],
+            langs: Object.keys(langs).filter(k => k !== 'text'),
+          });
+        },
+      })
+    : undefined;
+
+  const schema = useMemo(() => {
+    const blockSpecs = { ...defaultBlockSpecs };
+    if (codeBlock) blockSpecs.codeBlock = codeBlock;
+    if (f.equations) blockSpecs.blockEquation = BlockEquation({});
+    if (f.mermaid) blockSpecs.mermaidBlock = MermaidBlock({});
+    if (f.tableOfContents) blockSpecs.tableOfContents = TableOfContents({});
+    if (f.images) blockSpecs.image = ImageBlock({});
+    if (f.buttons) blockSpecs.buttonBlock = ButtonBlock({});
+    if (f.pdf) blockSpecs.pdfEmbed = PDFEmbedBlock({});
+
+    // Register extra block specs
+    for (const spec of extraBlockSpecs) {
+      if (spec.type && spec.spec) blockSpecs[spec.type] = spec.spec;
+    }
+
+    const inlineContentSpecs = { ...defaultInlineContentSpecs };
+    if (f.equations) inlineContentSpecs.inlineEquation = InlineEquation;
+    if (f.dates) inlineContentSpecs.dateInline = DateInline;
+
+    // Register extra inline specs
+    for (const spec of extraInlineSpecs) {
+      if (spec.type && spec.spec) inlineContentSpecs[spec.type] = spec.spec;
+    }
+
+    return BlockNoteSchema.create({ blockSpecs, inlineContentSpecs });
+  }, []);
+
+  // Sanitize initial content
+  const sanitized = useMemo(() => {
+    if (!initialContent) return undefined;
+    let blocks = initialContent;
+    if (typeof blocks === 'string') {
+      try { blocks = JSON.parse(blocks); } catch { return undefined; }
+    }
+    if (!Array.isArray(blocks) || blocks.length === 0) return undefined;
+    return blocks;
+  }, [initialContent]);
+
+  const editor = useCreateBlockNote({
+    schema,
+    ...(collaboration ? { collaboration } : { initialContent: sanitized || undefined }),
+    domAttributes: { editor: { class: 'lix-editor' } },
+    placeholders: { default: placeholder },
+  });
+
+  useImperativeHandle(ref, () => ({
+    getDocument: () => editor.document,
+    getEditor: () => editor,
+    getBlocks: () => editor.document,
+    getHTML: async () => await editor.blocksToHTMLLossy(editor.document),
+    getMarkdown: async () => await editor.blocksToMarkdownLossy(editor.document),
+  }), [editor]);
+
+  // Notify parent when ready
+  useEffect(() => { if (onReady) onReady(); }, []);
+
+  // Auto-convert ![alt](url) to image block and [text](url) to link as you type
+  useEffect(() => {
+    if (!f.markdownLinks || !editor) return;
+    const tiptap = editor._tiptapEditor;
+    if (!tiptap) return;
+
+    const handleInput = () => {
+      const { state, view } = tiptap;
+      const { $from } = state.selection;
+      const textBefore = $from.parent.textBetween(0, $from.parentOffset, undefined, '\ufffc');
+
+      // Image syntax: ![alt](url)
+      const imgMatch = textBefore.match(/!\[([^\]]*)\]\((https?:\/\/[^\s)]+)\)$/);
+      if (imgMatch) {
+        const [fullMatch, alt, imgUrl] = imgMatch;
+        const from = $from.pos - fullMatch.length;
+        view.dispatch(state.tr.delete(from, $from.pos));
+        const cursorBlock = editor.getTextCursorPosition().block;
+        editor.insertBlocks(
+          [{ type: 'image', props: { url: imgUrl, caption: alt || '' } }],
+          cursorBlock, 'after'
+        );
+        requestAnimationFrame(() => {
+          try {
+            const block = editor.getTextCursorPosition().block;
+            if (block?.type === 'paragraph' && !(block.content || []).some(c => c.text?.trim())) {
+              editor.removeBlocks([block.id]);
+            }
+          } catch {}
+        });
+        return;
+      }
+
+      // Link syntax: [text](url)
+      const match = textBefore.match(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/);
+      if (!match) return;
+      const [fullMatch, linkText, url] = match;
+      const from = $from.pos - fullMatch.length;
+      const linkMark = state.schema.marks.link.create({ href: url });
+      const tr = state.tr.delete(from, $from.pos).insertText(linkText, from).addMark(from, from + linkText.length, linkMark);
+      view.dispatch(tr);
+    };
+
+    tiptap.on('update', handleInput);
+    return () => tiptap.off('update', handleInput);
+  }, [editor, f.markdownLinks]);
+
+  // Link preview hover
+  useEffect(() => {
+    if (!f.linkPreview) return;
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const handleMouseOver = (e) => {
+      const link = e.target.closest('a[href]');
+      if (!link || link.closest('.bn-link-toolbar') || link.closest('.bn-toolbar')) return;
+      const href = link.getAttribute('href');
+      if (href && href.startsWith('http')) editorLinkPreview.show(link, href);
+    };
+    const handleMouseOut = (e) => {
+      const link = e.target.closest('a[href]');
+      if (!link) return;
+      editorLinkPreview.cancel();
+    };
+    const handleClick = (e) => {
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const link = e.target.closest('a[href]');
+      if (!link || link.closest('.bn-link-toolbar')) return;
+      const href = link.getAttribute('href');
+      if (href && href.startsWith('http')) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(href, '_blank', 'noopener,noreferrer');
+      }
+    };
+    const handleKeyDown = (e) => { if (e.ctrlKey || e.metaKey) wrapper.classList.add('ctrl-held'); };
+    const handleKeyUp = () => wrapper.classList.remove('ctrl-held');
+
+    wrapper.addEventListener('mouseover', handleMouseOver);
+    wrapper.addEventListener('mouseout', handleMouseOut);
+    wrapper.addEventListener('click', handleClick);
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    return () => {
+      wrapper.removeEventListener('mouseover', handleMouseOver);
+      wrapper.removeEventListener('mouseout', handleMouseOut);
+      wrapper.removeEventListener('click', handleClick);
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [f.linkPreview]);
+
+  // Slash menu items
+  const getItems = useCallback(async (query) => {
+    const defaults = getDefaultReactSlashMenuItems(editor)
+      .filter(item => !['video', 'audio', 'file'].includes(item.key));
+
+    const custom = [];
+
+    if (f.equations) {
+      custom.push({
+        title: 'Block Equation',
+        subtext: 'LaTeX block equation',
+        group: 'Advanced',
+        icon: <span style={{ fontSize: 16 }}>∑</span>,
+        onItemClick: () => editor.insertBlocks([{ type: 'blockEquation' }], editor.getTextCursorPosition().block, 'after'),
+      });
+    }
+
+    if (f.mermaid) {
+      custom.push({
+        title: 'Diagram',
+        subtext: 'Mermaid diagram (flowchart, sequence, etc.)',
+        group: 'Advanced',
+        icon: <span style={{ fontSize: 14 }}>◇</span>,
+        onItemClick: () => editor.insertBlocks([{ type: 'mermaidBlock' }], editor.getTextCursorPosition().block, 'after'),
+      });
+    }
+
+    if (f.tableOfContents) {
+      custom.push({
+        title: 'Table of Contents',
+        subtext: 'Auto-generated document outline',
+        group: 'Advanced',
+        icon: <span style={{ fontSize: 14 }}>☰</span>,
+        onItemClick: () => editor.insertBlocks([{ type: 'tableOfContents' }], editor.getTextCursorPosition().block, 'after'),
+      });
+    }
+
+    return [...defaults, ...custom, ...extraSlashItems]
+      .filter(item => item.title.toLowerCase().includes(query.toLowerCase()));
+  }, [editor, f, extraSlashItems]);
+
+  const handleChange = useCallback(() => {
+    if (onChange) onChange(editor);
+  }, [editor, onChange]);
+
+  return (
+    <div className={`lix-editor-wrapper${''}`} ref={wrapperRef} style={{ position: 'relative' }}>
+      <BlockNoteView
+        editor={editor}
+        onChange={handleChange}
+        theme={isDark ? 'dark' : 'light'}
+        slashMenu={false}
+      >
+        <SuggestionMenuController triggerCharacter="/" getItems={getItems} />
+        <TableHandlesController />
+        {children}
+      </BlockNoteView>
+
+      {f.linkPreview && editorLinkPreview.preview && (
+        <LinkPreviewTooltip
+          anchorEl={editorLinkPreview.preview.anchorEl}
+          url={editorLinkPreview.preview.url}
+          onClose={editorLinkPreview.hide}
+        />
+      )}
+    </div>
+  );
+});
+
+export default LixEditor;

package/src/hooks/useLixTheme.js

@@ -0,0 +1,55 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const LixThemeContext = createContext(null);
+
+/**
+ * Theme provider for the LixEditor package.
+ * Manages light/dark theme and applies it to the document.
+ *
+ * @param {Object} props
+ * @param {'light'|'dark'} [props.defaultTheme='light'] - Initial theme
+ * @param {string} [props.storageKey='lixeditor_theme'] - localStorage key for persistence
+ * @param {React.ReactNode} props.children
+ */
+export function LixThemeProvider({ children, defaultTheme = 'light', storageKey = 'lixeditor_theme' }) {
+  const [theme, setTheme] = useState(defaultTheme);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    if (storageKey) {
+      const saved = localStorage.getItem(storageKey);
+      if (saved === 'dark' || saved === 'light') setTheme(saved);
+    }
+    setMounted(true);
+  }, [storageKey]);
+
+  useEffect(() => {
+    if (!mounted) return;
+    document.documentElement.setAttribute('data-theme', theme);
+    if (storageKey) localStorage.setItem(storageKey, theme);
+  }, [theme, mounted, storageKey]);
+
+  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
+  const isDark = theme === 'dark';
+
+  return (
+    <LixThemeContext.Provider value={{ theme, setTheme, toggleTheme, isDark, mounted }}>
+      {children}
+    </LixThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to access the current theme.
+ * Falls back to detecting data-theme attribute if no provider is present.
+ */
+export function useLixTheme() {
+  const ctx = useContext(LixThemeContext);
+  if (ctx) return ctx;
+
+  // Fallback: detect theme from DOM
+  const isDark = typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') === 'dark';
+  return { theme: isDark ? 'dark' : 'light', isDark, toggleTheme: () => {}, setTheme: () => {}, mounted: true };
+}

package/src/index.js

@@ -0,0 +1,41 @@
+/**
+ * @elixpo/lixeditor — A rich WYSIWYG block editor and renderer.
+ *
+ * Usage:
+ *   import { LixEditor, LixPreview, LixThemeProvider } from '@elixpo/lixeditor';
+ *   import '@elixpo/lixeditor/styles';
+ *
+ *   <LixThemeProvider>
+ *     <LixEditor
+ *       initialContent={blocks}
+ *       onChange={(editor) => save(editor.getBlocks())}
+ *       features={{ equations: true, mermaid: true }}
+ *     />
+ *   </LixThemeProvider>
+ *
+ *   <LixPreview blocks={blocks} />
+ */
+
+// Core components
+export { default as LixEditor } from './editor/LixEditor';
+export { default as LixPreview } from './preview/LixPreview';
+
+// Theme
+export { LixThemeProvider, useLixTheme } from './hooks/useLixTheme';
+
+// Block specs — for consumers who want to build custom schemas
+export {
+  BlockEquation,
+  InlineEquation,
+  DateInline,
+  MermaidBlock,
+  TableOfContents,
+  ButtonBlock,
+  PDFEmbedBlock,
+  ImageBlock,
+} from './blocks/index';
+
+// Utilities
+export { renderBlocksToHTML } from './preview/renderBlocks';
+export { default as LinkPreviewTooltip, useLinkPreview, setLinkPreviewEndpoint } from './editor/LinkPreviewTooltip';
+export { default as KeyboardShortcutsModal } from './editor/KeyboardShortcutsModal';

package/src/preview/LixPreview.jsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useLixTheme } from '../hooks/useLixTheme';
+import LinkPreviewTooltip, { useLinkPreview } from '../editor/LinkPreviewTooltip';
+import { renderBlocksToHTML } from './renderBlocks';
+
+/**
+ * LixPreview — Renders BlockNote content as styled HTML with post-processing.
+ *
+ * @param {Object} props
+ * @param {Array} props.blocks - BlockNote document blocks
+ * @param {string} [props.html] - Fallback raw HTML (used if blocks not provided)
+ * @param {Object} [props.features] - Enable/disable features (same keys as LixEditor)
+ * @param {string} [props.className] - Additional CSS class
+ */
+export default function LixPreview({ blocks, html, features = {}, className = '' }) {
+  const { isDark } = useLixTheme();
+  const contentRef = useRef(null);
+  const linkPreview = useLinkPreview();
+  const linkPreviewRef = useRef(linkPreview);
+  linkPreviewRef.current = linkPreview;
+
+  const f = {
+    equations: true, mermaid: true, codeHighlighting: true, linkPreview: true,
+    ...features,
+  };
+
+  const renderedHTML = blocks && blocks.length > 0 ? renderBlocksToHTML(blocks) : (html || '');
+
+  // Set innerHTML via ref so React doesn't overwrite post-processed content
+  const effectGenRef = useRef(0);
+  useEffect(() => {
+    const root = contentRef.current;
+    if (!root) return;
+    const gen = ++effectGenRef.current;
+    root.innerHTML = renderedHTML || '';
+
+    function isStale() { return effectGenRef.current !== gen; }
+
+    // ── KaTeX rendering ──
+    if (f.equations) {
+      const eqEls = root.querySelectorAll('.lix-block-equation[data-latex]');
+      const inlineEls = root.querySelectorAll('.lix-inline-equation[data-latex]');
+      if (eqEls.length || inlineEls.length) {
+        import('katex').then((mod) => {
+          if (isStale()) return;
+          const katex = mod.default || mod;
+          const strip = (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;
+          };
+          eqEls.forEach(el => {
+            if (!el.isConnected) return;
+            try { el.innerHTML = katex.renderToString(strip(decodeURIComponent(el.dataset.latex)), { displayMode: true, throwOnError: false }); }
+            catch (err) { el.innerHTML = `<span style="color:#f87171">${err.message}</span>`; }
+          });
+          inlineEls.forEach(el => {
+            if (!el.isConnected) return;
+            try { el.innerHTML = katex.renderToString(strip(decodeURIComponent(el.dataset.latex)), { displayMode: false, throwOnError: false }); }
+            catch (err) { el.innerHTML = `<span style="color:#f87171">${err.message}</span>`; }
+          });
+        }).catch(() => {});
+      }
+    }
+
+    // ── Mermaid rendering ──
+    if (f.mermaid) {
+      const mermaidEls = root.querySelectorAll('.lix-mermaid-block[data-diagram]');
+      if (mermaidEls.length) {
+        import('mermaid').then((mod) => {
+          if (isStale()) return;
+          const mermaid = mod.default || mod;
+          mermaid.initialize({
+            startOnLoad: false, securityLevel: 'loose',
+            theme: isDark ? 'dark' : 'default',
+            flowchart: { useMaxWidth: false, padding: 20 },
+          });
+          (async () => {
+            for (const el of mermaidEls) {
+              const id = `lix-mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+              try {
+                const diagram = decodeURIComponent(el.dataset.diagram).trim();
+                const tempDiv = document.createElement('div');
+                tempDiv.id = 'c-' + id;
+                tempDiv.style.cssText = 'position:fixed;top:0;left:0;width:100vw;opacity:0;pointer-events:none;z-index:-9999;';
+                document.body.appendChild(tempDiv);
+                const { svg } = await mermaid.render(id, diagram, tempDiv);
+                tempDiv.remove();
+                if (el.isConnected && !isStale()) {
+                  el.innerHTML = svg;
+                  const svgEl = el.querySelector('svg');
+                  if (svgEl) { svgEl.removeAttribute('width'); svgEl.style.width = '100%'; svgEl.style.height = 'auto'; }
+                }
+              } catch (err) {
+                if (el.isConnected) el.innerHTML = `<pre style="color:#f87171;font-size:12px">${err.message || 'Diagram error'}</pre>`;
+                try { document.getElementById(id)?.remove(); document.getElementById('c-' + id)?.remove(); } catch {}
+              }
+            }
+          })();
+        }).catch(() => {});
+      }
+    }
+
+    // ── Shiki code highlighting ──
+    if (f.codeHighlighting) {
+      const codeEls = root.querySelectorAll('pre > code[class*="language-"]');
+      if (codeEls.length) {
+        import('shiki').then(({ createHighlighter }) => {
+          if (isStale()) return;
+          const langs = new Set();
+          codeEls.forEach(el => { const m = el.className.match(/language-(\w+)/); if (m?.[1] && m[1] !== 'text') langs.add(m[1]); });
+          return createHighlighter({ themes: ['vitesse-dark', 'vitesse-light'], langs: [...langs] }).then(hl => {
+            if (isStale()) return;
+            const theme = isDark ? 'vitesse-dark' : 'vitesse-light';
+            codeEls.forEach(codeEl => {
+              const pre = codeEl.parentElement;
+              if (!pre || pre.dataset.highlighted) return;
+              pre.dataset.highlighted = 'true';
+              const m = codeEl.className.match(/language-(\w+)/);
+              const lang = m?.[1] || 'text';
+              const code = codeEl.textContent || '';
+              if (lang !== 'text' && langs.has(lang)) {
+                try {
+                  const html = hl.codeToHtml(code, { lang, theme });
+                  const tmp = document.createElement('div'); tmp.innerHTML = html;
+                  const shikiPre = tmp.querySelector('pre');
+                  if (shikiPre) codeEl.innerHTML = shikiPre.querySelector('code')?.innerHTML || codeEl.innerHTML;
+                } catch {}
+              }
+              // Language label
+              pre.style.position = 'relative';
+              const label = document.createElement('span');
+              label.className = 'lix-code-lang-label';
+              label.textContent = lang;
+              pre.appendChild(label);
+              // Copy button
+              const btn = document.createElement('button');
+              btn.className = 'lix-code-copy-btn';
+              btn.title = 'Copy code';
+              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+              btn.onclick = () => {
+                navigator.clipboard.writeText(code);
+                btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
+                btn.style.color = '#86efac';
+                setTimeout(() => { btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>'; btn.style.color = ''; }, 1500);
+              };
+              pre.appendChild(btn);
+            });
+          });
+        }).catch(() => {});
+      }
+    }
+
+    // ── Link preview on hover ──
+    if (f.linkPreview) {
+      const externalLinks = root.querySelectorAll('a[href^="http"]');
+      const handlers = [];
+      externalLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        if (!href) return;
+        const onEnter = () => linkPreviewRef.current.show(link, href);
+        const onLeave = () => linkPreviewRef.current.cancel();
+        link.addEventListener('mouseenter', onEnter);
+        link.addEventListener('mouseleave', onLeave);
+        handlers.push({ el: link, onEnter, onLeave });
+      });
+      return () => handlers.forEach(({ el, onEnter, onLeave }) => {
+        el.removeEventListener('mouseenter', onEnter);
+        el.removeEventListener('mouseleave', onLeave);
+      });
+    }
+  }, [renderedHTML, isDark]);
+
+  return (
+    <div className={`lix-preview ${className}`}>
+      <div ref={contentRef} className="lix-preview-content" />
+      {f.linkPreview && linkPreview.preview && (
+        <LinkPreviewTooltip
+          anchorEl={linkPreview.preview.anchorEl}
+          url={linkPreview.preview.url}
+          onClose={linkPreview.hide}
+        />
+      )}
+    </div>
+  );
+}