@canvas-digital/blog-sdk 2.0.0

package/dist/components/admin/editor/RichTextEditor.js

@@ -0,0 +1,475 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { domToLexical } from '../../../lib/lexical-dom';
+import { safeHref } from '../../../lib/lexical-doc';
+const LINK_TOKEN = 'https://internal.link.placeholder/x';
+const BLOCKS = [
+    { label: 'Paragraph', tag: 'p' },
+    { label: 'Heading 1', tag: 'h1' },
+    { label: 'Heading 2', tag: 'h2' },
+    { label: 'Heading 3', tag: 'h3' },
+    { label: 'Heading 4', tag: 'h4' },
+];
+const SPECIAL_CHARS = [
+    '–', '—', '…', '‘', '’', '“', '”', '«', '»', '€', '£', '¥', '©', '®', '™', '°', '±', '×', '÷', '½', '¼', '¾',
+];
+/* ---------------- paste hygiene ---------------- */
+const ALLOWED_BLOCKS = new Set(['P', 'H1', 'H2', 'H3', 'H4', 'UL', 'OL', 'LI', 'BLOCKQUOTE', 'HR', 'BR']);
+const ALLOWED_INLINE = new Set(['STRONG', 'B', 'EM', 'I', 'U', 'S', 'STRIKE', 'DEL', 'CODE', 'A']);
+const cleanNode = (node, doc) => {
+    if (node.nodeType === Node.TEXT_NODE)
+        return doc.createTextNode(node.textContent ?? '');
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return null;
+    const el = node;
+    const tag = el.tagName;
+    if (!ALLOWED_BLOCKS.has(tag) && !ALLOWED_INLINE.has(tag)) {
+        // Unknown wrapper: keep the words, drop the box.
+        const fragment = doc.createDocumentFragment();
+        el.childNodes.forEach((child) => {
+            const cleaned = cleanNode(child, doc);
+            if (cleaned)
+                fragment.appendChild(cleaned);
+        });
+        return fragment;
+    }
+    const copy = doc.createElement(tag.toLowerCase());
+    if (tag === 'A') {
+        const href = safeHref(el.getAttribute('href') ?? '');
+        if (!href) {
+            const fragment = doc.createDocumentFragment();
+            el.childNodes.forEach((child) => {
+                const cleaned = cleanNode(child, doc);
+                if (cleaned)
+                    fragment.appendChild(cleaned);
+            });
+            return fragment;
+        }
+        copy.setAttribute('href', href);
+        copy.setAttribute('data-link-type', 'custom');
+    }
+    el.childNodes.forEach((child) => {
+        const cleaned = cleanNode(child, doc);
+        if (cleaned)
+            copy.appendChild(cleaned);
+    });
+    return copy;
+};
+const cleanPastedHtml = (html) => {
+    const parsed = new DOMParser().parseFromString(html, 'text/html');
+    const out = parsed.createElement('div');
+    parsed.body.childNodes.forEach((child) => {
+        const cleaned = cleanNode(child, parsed);
+        if (cleaned)
+            out.appendChild(cleaned);
+    });
+    return out.innerHTML;
+};
+const escapeAttr = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const LINK_POPOVER_W = 360;
+const popoverPosForRange = (range) => {
+    const rects = range.getClientRects();
+    const anchorRect = rects.length ? rects[rects.length - 1] : range.getBoundingClientRect();
+    const left = Math.max(8, Math.min(anchorRect.left, window.innerWidth - LINK_POPOVER_W - 8));
+    const top = anchorRect.bottom + 10;
+    return { top, left };
+};
+/* ---------------- component ---------------- */
+export const RichTextEditor = ({ initialHtml, onChange, onPickImage, searchTargets }) => {
+    const editorRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const linkPopoverRef = useRef(null);
+    const savedRange = useRef(null);
+    const emitTimer = useRef(null);
+    const [block, setBlock] = useState('p');
+    const [marks, setMarks] = useState({});
+    const [empty, setEmpty] = useState(true);
+    const [words, setWords] = useState(0);
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [linkPos, setLinkPos] = useState(null);
+    const [linkSelection, setLinkSelection] = useState('');
+    const [linkUrl, setLinkUrl] = useState('');
+    const [linkNewTab, setLinkNewTab] = useState(false);
+    const [linkQuery, setLinkQuery] = useState('');
+    const [hits, setHits] = useState([]);
+    const [mode, setMode] = useState('visual');
+    const [codeHtml, setCodeHtml] = useState('');
+    const [moreTools, setMoreTools] = useState(false);
+    const [charsOpen, setCharsOpen] = useState(false);
+    const [foreColor, setForeColor] = useState('#16172b');
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    /* The DOM is owned by the browser once mounted, so React fills it exactly once. */
+    useEffect(() => {
+        if (!mounted)
+            return;
+        const el = editorRef.current;
+        if (!el)
+            return;
+        el.innerHTML = initialHtml || '<p><br></p>';
+        try {
+            document.execCommand('defaultParagraphSeparator', false, 'p');
+            document.execCommand('styleWithCSS', false, 'false');
+        }
+        catch {
+            /* older engines simply keep their default */
+        }
+        setEmpty(!el.textContent?.trim() && !el.querySelector('figure, hr'));
+        setWords((el.textContent ?? '').trim().split(/\s+/).filter(Boolean).length);
+        // Intentionally mount-only: re-running this would discard what has been typed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mounted]);
+    const emit = useCallback(() => {
+        const el = editorRef.current;
+        if (!el)
+            return;
+        const text = (el.textContent ?? '').trim();
+        const count = text ? text.split(/\s+/).filter(Boolean).length : 0;
+        setWords(count);
+        setEmpty(!text && !el.querySelector('figure, hr'));
+        onChange(domToLexical(el), { words: count, html: el.innerHTML });
+    }, [onChange]);
+    const scheduleEmit = useCallback(() => {
+        if (emitTimer.current)
+            clearTimeout(emitTimer.current);
+        emitTimer.current = setTimeout(emit, 250);
+    }, [emit]);
+    useEffect(() => () => { if (emitTimer.current)
+        clearTimeout(emitTimer.current); }, []);
+    const refreshState = useCallback(() => {
+        const el = editorRef.current;
+        const selection = document.getSelection();
+        if (!el || !selection?.anchorNode || !el.contains(selection.anchorNode))
+            return;
+        savedRange.current = selection.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
+        const node = selection.anchorNode.nodeType === Node.ELEMENT_NODE
+            ? selection.anchorNode
+            : selection.anchorNode.parentElement;
+        const container = node?.closest('p,h1,h2,h3,h4,blockquote,li');
+        setBlock(container ? container.tagName.toLowerCase() : 'p');
+        const state = (cmd) => {
+            try {
+                return document.queryCommandState(cmd);
+            }
+            catch {
+                return false;
+            }
+        };
+        setMarks({
+            bold: state('bold'),
+            italic: state('italic'),
+            underline: state('underline'),
+            strikeThrough: state('strikeThrough'),
+            insertUnorderedList: state('insertUnorderedList'),
+            insertOrderedList: state('insertOrderedList'),
+            quote: Boolean(node?.closest('blockquote')),
+            link: Boolean(node?.closest('a')),
+            code: Boolean(node?.closest('code')),
+        });
+    }, []);
+    useEffect(() => {
+        document.addEventListener('selectionchange', refreshState);
+        return () => document.removeEventListener('selectionchange', refreshState);
+    }, [refreshState]);
+    const focusBack = () => {
+        const el = editorRef.current;
+        if (!el)
+            return;
+        // Browsers scroll focused contenteditable into view (often to the top of the
+        // editor). Keep the viewport put while we restore caret/selection.
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        el.focus({ preventScroll: true });
+        const range = savedRange.current;
+        if (range) {
+            try {
+                const selection = document.getSelection();
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+            catch {
+                /* range may be stale after DOM mutations */
+            }
+        }
+        window.scrollTo(scrollX, scrollY);
+    };
+    const exec = (command, value) => {
+        focusBack();
+        try {
+            document.execCommand(command, false, value);
+        }
+        catch {
+            /* nothing to do — the command simply does not apply here */
+        }
+        // Keep the caret position for the next toolbar action without scrolling.
+        const selection = document.getSelection();
+        if (selection?.rangeCount && editorRef.current?.contains(selection.anchorNode)) {
+            savedRange.current = selection.getRangeAt(0).cloneRange();
+        }
+        refreshState();
+        emit();
+    };
+    const setBlockTag = (tag) => exec('formatBlock', `<${tag}>`);
+    const toggleQuote = () => (marks.quote ? setBlockTag('p') : setBlockTag('blockquote'));
+    const switchMode = (next) => {
+        const el = editorRef.current;
+        if (next === 'code') {
+            setCodeHtml(el?.innerHTML || '<p><br></p>');
+            setMode('code');
+            return;
+        }
+        if (el) {
+            el.innerHTML = cleanPastedHtml(codeHtml || '<p><br></p>') || '<p><br></p>';
+            emit();
+        }
+        setMode('visual');
+    };
+    const insertSpecial = (ch) => {
+        focusBack();
+        document.execCommand('insertText', false, ch);
+        setCharsOpen(false);
+        emit();
+    };
+    /** Inline code has no execCommand, so it is wrapped by hand. */
+    const toggleCode = () => {
+        focusBack();
+        const selection = document.getSelection();
+        if (!selection || selection.isCollapsed)
+            return;
+        const node = selection.anchorNode?.parentElement?.closest('code');
+        if (node) {
+            const parent = node.parentNode;
+            while (node.firstChild)
+                parent?.insertBefore(node.firstChild, node);
+            node.remove();
+        }
+        else {
+            const text = selection.toString();
+            document.execCommand('insertHTML', false, `<code>${escapeAttr(text)}</code>`);
+        }
+        refreshState();
+        emit();
+    };
+    const applyLinkAttributes = (apply) => {
+        const el = editorRef.current;
+        if (!el)
+            return;
+        el.querySelectorAll(`a[href="${LINK_TOKEN}"]`).forEach(apply);
+    };
+    const openLinkDialog = () => {
+        const el = editorRef.current;
+        const surface = surfaceRef.current;
+        if (!el || !surface)
+            return;
+        const selection = document.getSelection();
+        let range = null;
+        if (selection?.rangeCount && selection.anchorNode && el.contains(selection.anchorNode)) {
+            range = selection.getRangeAt(0).cloneRange();
+        }
+        else if (savedRange.current) {
+            range = savedRange.current.cloneRange();
+        }
+        if (!range)
+            return;
+        savedRange.current = range;
+        setLinkSelection(range.toString().trim());
+        setLinkPos(popoverPosForRange(range));
+        const anchor = (selection?.anchorNode?.parentElement?.closest('a') ??
+            (range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+                ? range.commonAncestorContainer.closest('a')
+                : (range.commonAncestorContainer.parentElement?.closest('a') ?? null)));
+        if (anchor?.dataset.linkType === 'internal') {
+            setLinkUrl('');
+            setLinkQuery(anchor.dataset.docLabel?.replace(/^(post|category):\s*/i, '') ?? '');
+        }
+        else {
+            setLinkUrl(anchor && anchor.dataset.linkType !== 'internal' ? anchor.getAttribute('href') ?? '' : '');
+            setLinkQuery('');
+        }
+        setLinkNewTab(anchor?.dataset.newTab === '1');
+        setHits([]);
+        setLinkOpen(true);
+    };
+    const closeLinkDialog = () => {
+        setLinkOpen(false);
+        setLinkPos(null);
+    };
+    const applyExternalLink = () => {
+        const href = safeHref(linkUrl);
+        if (!href)
+            return;
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        exec('createLink', LINK_TOKEN);
+        applyLinkAttributes((a) => {
+            a.setAttribute('href', href);
+            a.dataset.linkType = 'custom';
+            if (linkNewTab)
+                a.dataset.newTab = '1';
+            else
+                delete a.dataset.newTab;
+        });
+        closeLinkDialog();
+        emit();
+        window.scrollTo(scrollX, scrollY);
+        requestAnimationFrame(() => window.scrollTo(scrollX, scrollY));
+    };
+    const applyInternalLink = (hit) => {
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        exec('createLink', LINK_TOKEN);
+        applyLinkAttributes((a) => {
+            a.setAttribute('href', '#');
+            a.dataset.linkType = 'internal';
+            a.dataset.docCollection = hit.collection;
+            a.dataset.docId = hit.id;
+            a.dataset.docLabel = `${hit.collection === 'categories' ? 'category' : 'post'}: ${hit.label}`;
+            if (linkNewTab)
+                a.dataset.newTab = '1';
+        });
+        closeLinkDialog();
+        emit();
+        window.scrollTo(scrollX, scrollY);
+        requestAnimationFrame(() => window.scrollTo(scrollX, scrollY));
+    };
+    const removeLink = () => {
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        exec('unlink');
+        closeLinkDialog();
+        window.scrollTo(scrollX, scrollY);
+        requestAnimationFrame(() => window.scrollTo(scrollX, scrollY));
+    };
+    useEffect(() => {
+        if (!linkOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                closeLinkDialog();
+        };
+        const onDown = (e) => {
+            const target = e.target;
+            if (linkPopoverRef.current?.contains(target))
+                return;
+            if (target.closest?.('.ed-toolbar, .tb-btn'))
+                return;
+            closeLinkDialog();
+        };
+        const reposition = () => {
+            const range = savedRange.current;
+            if (!range)
+                return;
+            setLinkPos(popoverPosForRange(range));
+        };
+        document.addEventListener('keydown', onKey);
+        const downTimer = window.setTimeout(() => document.addEventListener('mousedown', onDown), 0);
+        window.addEventListener('resize', reposition);
+        window.addEventListener('scroll', reposition, true);
+        const surface = surfaceRef.current;
+        surface?.addEventListener('scroll', reposition, { passive: true });
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            window.clearTimeout(downTimer);
+            document.removeEventListener('mousedown', onDown);
+            window.removeEventListener('resize', reposition);
+            window.removeEventListener('scroll', reposition, true);
+            surface?.removeEventListener('scroll', reposition);
+        };
+    }, [linkOpen]);
+    useEffect(() => {
+        if (!linkOpen)
+            return;
+        const id = setTimeout(async () => {
+            setHits(await searchTargets(linkQuery));
+        }, 220);
+        return () => clearTimeout(id);
+    }, [linkOpen, linkQuery, searchTargets]);
+    const linkPopover = linkOpen && linkPos && mode === 'visual' ? (_jsxs("div", { ref: linkPopoverRef, className: "ed-link-popover", style: { top: linkPos.top, left: linkPos.left }, role: "dialog", "aria-label": "Insert link", onMouseDown: (e) => e.stopPropagation(), children: [linkSelection ? _jsxs("p", { className: "ed-link-selection", children: ["Linking: \u201C", linkSelection, "\u201D"] }) : null, _jsxs("div", { className: "ed-link-row", children: [_jsx("input", { className: "fld", placeholder: "Paste URL or type to search", value: linkUrl || linkQuery, onChange: (e) => {
+                            const v = e.target.value;
+                            if (/^https?:\/\//i.test(v) || v.includes('.')) {
+                                setLinkUrl(v);
+                                setLinkQuery('');
+                            }
+                            else {
+                                setLinkUrl('');
+                                setLinkQuery(v);
+                            }
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                if (linkUrl.trim())
+                                    applyExternalLink();
+                            }
+                            if (e.key === 'Escape')
+                                closeLinkDialog();
+                        }, autoFocus: true }), _jsx("button", { type: "button", className: "btn btn-primary btn-tiny", onMouseDown: (e) => e.preventDefault(), onClick: applyExternalLink, disabled: !linkUrl.trim(), children: "Apply" })] }), _jsxs("label", { className: "ed-link-tab", children: [_jsx("input", { type: "checkbox", checked: linkNewTab, onChange: (e) => setLinkNewTab(e.target.checked) }), "Open in new tab"] }), hits.length ? (_jsx("ul", { className: "ed-link-hits", children: hits.map((hit) => (_jsx("li", { children: _jsxs("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => applyInternalLink(hit), children: [_jsx("span", { className: "hit-label", children: hit.label }), _jsx("span", { className: "hit-path mono", children: hit.path })] }) }, `${hit.collection}-${hit.id}`))) })) : linkQuery.trim() ? (_jsx("p", { className: "ed-link-note", children: "No posts or categories match." })) : null, _jsxs("div", { className: "ed-link-actions", children: [marks.link ? (_jsx("button", { type: "button", className: "linkish", onMouseDown: (e) => e.preventDefault(), onClick: removeLink, children: "Remove link" })) : null, _jsx("button", { type: "button", className: "linkish", onClick: closeLinkDialog, children: "Cancel" })] })] })) : null;
+    const insertImage = async () => {
+        const picked = await onPickImage();
+        if (!picked)
+            return;
+        focusBack();
+        document.execCommand('insertHTML', false, `<figure class="ed-figure" contenteditable="false" data-media-id="${escapeAttr(picked.id)}">` +
+            `<img src="${escapeAttr(picked.url)}" alt="${escapeAttr(picked.alt)}">` +
+            `<figcaption>${escapeAttr(picked.alt || 'Image')}</figcaption></figure><p><br></p>`);
+        emit();
+    };
+    const onPaste = (event) => {
+        const html = event.clipboardData.getData('text/html');
+        const plain = event.clipboardData.getData('text/plain');
+        event.preventDefault();
+        if (html) {
+            document.execCommand('insertHTML', false, cleanPastedHtml(html));
+        }
+        else if (plain) {
+            const paragraphs = plain
+                .split(/\n{2,}/)
+                .map((para) => `<p>${escapeAttr(para).replace(/\n/g, '<br>')}</p>`)
+                .join('');
+            document.execCommand('insertHTML', false, paragraphs);
+        }
+        emit();
+    };
+    const onKeyDown = (event) => {
+        const mod = event.metaKey || event.ctrlKey;
+        if (!mod)
+            return;
+        const key = event.key.toLowerCase();
+        if (key === 'k') {
+            event.preventDefault();
+            refreshState();
+            openLinkDialog();
+        }
+        if (key === 'b' || key === 'i' || key === 'u') {
+            // The browser applies these itself; we only need the tree to catch up.
+            scheduleEmit();
+        }
+    };
+    const [active, setActive] = useState(false);
+    const Btn = ({ cmd, label, title, onClick, active: btnActive, }) => (_jsx("button", { type: "button", className: `tb-btn${btnActive ? ' is-on' : ''}`, title: title, "aria-label": title, "aria-pressed": btnActive ? 'true' : 'false', onMouseDown: (e) => e.preventDefault(), onClick: () => (onClick ? onClick() : cmd ? exec(cmd) : undefined), children: label }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `ed${active ? ' is-active' : ''}`, onFocusCapture: () => setActive(true), onBlurCapture: (e) => {
+                    const root = e.currentTarget;
+                    const next = e.relatedTarget;
+                    if (next && root.contains(next))
+                        return;
+                    // Link popover is portaled to body — keep chrome sticky while using it.
+                    // Capture `root` now: React nulls `e.currentTarget` after this handler returns.
+                    window.setTimeout(() => {
+                        const focused = document.activeElement;
+                        if (focused?.closest?.('.ed-link-popover'))
+                            return;
+                        if (focused && root.contains(focused))
+                            return;
+                        setActive(false);
+                    }, 0);
+                }, children: [_jsxs("div", { className: "ed-chrome", children: [_jsxs("div", { className: "ed-mode-tabs", role: "tablist", "aria-label": "Editor mode", children: [_jsx("button", { type: "button", role: "tab", className: mode === 'visual' ? 'is-on' : undefined, "aria-selected": mode === 'visual', onClick: () => switchMode('visual'), children: "Visual" }), _jsx("button", { type: "button", role: "tab", className: mode === 'code' ? 'is-on' : undefined, "aria-selected": mode === 'code', onClick: () => switchMode('code'), children: "Code" })] }), mode === 'visual' ? (_jsxs("div", { className: "ed-toolbar", role: "toolbar", "aria-label": "Formatting", children: [_jsx("button", { type: "button", className: "tb-btn tb-media", title: "Add Media", onMouseDown: (e) => e.preventDefault(), onClick: () => void insertImage(), children: "Add Media" }), _jsx("select", { className: "tb-select", value: BLOCKS.some((b) => b.tag === block) ? block : 'p', onChange: (e) => setBlockTag(e.target.value), "aria-label": "Text style", children: BLOCKS.map((b) => (_jsx("option", { value: b.tag, children: b.label }, b.tag))) }), _jsx("span", { className: "tb-sep" }), _jsx(Btn, { cmd: "bold", label: _jsx("b", { children: "B" }), title: "Bold (\u2318B)", active: marks.bold }), _jsx(Btn, { cmd: "italic", label: _jsx("i", { children: "I" }), title: "Italic (\u2318I)", active: marks.italic }), _jsx(Btn, { cmd: "underline", label: _jsx("u", { children: "U" }), title: "Underline (\u2318U)", active: marks.underline }), _jsx("span", { className: "tb-sep" }), _jsx(Btn, { cmd: "insertUnorderedList", label: "\u2022\u2014", title: "Bulleted list", active: marks.insertUnorderedList }), _jsx(Btn, { cmd: "insertOrderedList", label: "1\u2014", title: "Numbered list", active: marks.insertOrderedList }), _jsx(Btn, { label: "\u275D", title: "Quote", onClick: toggleQuote, active: marks.quote }), _jsx("span", { className: "tb-sep" }), _jsx(Btn, { cmd: "justifyLeft", label: "\u2261", title: "Align left" }), _jsx(Btn, { cmd: "justifyCenter", label: "\u2263", title: "Align centre" }), _jsx(Btn, { cmd: "justifyRight", label: "\u2261", title: "Align right" }), _jsx("span", { className: "tb-sep" }), _jsx(Btn, { label: "\uD83D\uDD17", title: "Link (\u2318K)", onClick: () => {
+                                            refreshState();
+                                            openLinkDialog();
+                                        }, active: marks.link }), _jsx(Btn, { label: "\u26D3\uFE0E", title: "Remove link", onClick: () => exec('unlink') }), _jsx(Btn, { label: "\uD83D\uDDBC", title: "Insert image", onClick: insertImage }), _jsx("span", { className: "tb-sep" }), _jsx(Btn, { label: "\u25BE", title: "Toolbar toggle", active: moreTools, onClick: () => setMoreTools((v) => !v) }), _jsxs("span", { className: "tb-count", children: [words, " words"] }), moreTools ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tb-sep" }), _jsx(Btn, { cmd: "strikeThrough", label: _jsx("s", { children: "S" }), title: "Strikethrough", active: marks.strikeThrough }), _jsx(Btn, { label: "\u2015", title: "Divider", onClick: () => exec('insertHorizontalRule') }), _jsxs("label", { className: "tb-color", title: "Text colour", children: [_jsx("span", { "aria-hidden": "true", children: "A" }), _jsx("input", { type: "color", value: foreColor, onChange: (e) => {
+                                                            setForeColor(e.target.value);
+                                                            focusBack();
+                                                            document.execCommand('foreColor', false, e.target.value);
+                                                            emit();
+                                                        }, "aria-label": "Text colour" })] }), _jsx(Btn, { label: "\u03A9", title: "Special character", onClick: () => setCharsOpen((v) => !v), active: charsOpen }), _jsx(Btn, { cmd: "outdent", label: "\u21E4", title: "Decrease indent" }), _jsx(Btn, { cmd: "indent", label: "\u21E5", title: "Increase indent" }), _jsx(Btn, { label: _jsx("span", { className: "mono", children: '</>' }), title: "Inline code", onClick: toggleCode, active: marks.code }), _jsx(Btn, { cmd: "removeFormat", label: "Tx", title: "Clear formatting" }), _jsx(Btn, { label: "\u21BA", title: "Undo", onClick: () => exec('undo') }), _jsx(Btn, { label: "\u21BB", title: "Redo", onClick: () => exec('redo') })] })) : null] })) : null, charsOpen && mode === 'visual' ? (_jsx("div", { className: "ed-chars", role: "listbox", "aria-label": "Special characters", children: SPECIAL_CHARS.map((ch) => (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => insertSpecial(ch), children: ch }, ch))) })) : null] }), mode === 'code' ? (_jsx("textarea", { className: "ed-code mono", value: codeHtml, onChange: (e) => setCodeHtml(e.target.value), "aria-label": "HTML source", spellCheck: false })) : !mounted ? (_jsx("div", { className: "ed-surface", ref: surfaceRef, children: _jsx("div", { className: "ed-input prose ed-skeleton", "aria-hidden": "true" }) })) : (_jsxs("div", { className: "ed-surface", ref: surfaceRef, children: [empty ? _jsx("div", { className: "ed-placeholder", children: "Tell the story\u2026" }) : null, _jsx("div", { ref: editorRef, className: "ed-input prose", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "true", "aria-label": "Post content", spellCheck: true, onInput: scheduleEmit, onBlur: emit, onPaste: onPaste, onKeyDown: onKeyDown, onKeyUp: refreshState, onMouseUp: refreshState })] }))] }), mounted && linkPopover ? createPortal(linkPopover, document.body) : null] }));
+};

package/dist/components/admin/editor/SeoAnalysisPanel.d.ts

@@ -0,0 +1,11 @@
+import { type CheckTone, type SeoAnalysisInput } from '../../../lib/seo-analysis';
+export declare const SeoAnalysisPanel: ({ input }: {
+    input: SeoAnalysisInput;
+}) => import("react").JSX.Element;
+export declare const useSeoSummary: (input: SeoAnalysisInput) => {
+    seoTone: CheckTone;
+    readTone: CheckTone;
+    seoLabel: string;
+    readLabel: string;
+};
+//# sourceMappingURL=SeoAnalysisPanel.d.ts.map

package/dist/components/admin/editor/SeoAnalysisPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeoAnalysisPanel.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/editor/SeoAnalysisPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAA;AA0BlC,eAAO,MAAM,gBAAgB,GAAI,WAAW;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE,gCAsCtE,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,gBAAgB;;;;;CASpD,CAAA"}

package/dist/components/admin/editor/SeoAnalysisPanel.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analyseReadability, analyseSeo, summariseTone, toneLabel, } from '../../../lib/seo-analysis';
+const Dot = ({ tone }) => (_jsx("span", { className: `seo-dot seo-dot-${tone}`, "aria-hidden": "true" }));
+const CheckList = ({ title, items }) => {
+    if (!items.length)
+        return null;
+    return (_jsxs("div", { className: "seo-group", children: [_jsx("p", { className: "seo-group-title", children: title }), _jsx("ul", { className: "seo-checks", children: items.map((c) => (_jsxs("li", { children: [_jsx(Dot, { tone: c.tone }), _jsxs("div", { children: [_jsx("strong", { children: c.label }), _jsx("span", { children: c.detail })] })] }, c.id))) })] }));
+};
+export const SeoAnalysisPanel = ({ input }) => {
+    const seo = analyseSeo(input);
+    const read = analyseReadability(input);
+    const seoTone = summariseTone(seo);
+    const readTone = summariseTone(read);
+    const problems = seo.filter((c) => c.tone === 'bad');
+    const improvements = seo.filter((c) => c.tone === 'ok');
+    const good = seo.filter((c) => c.tone === 'good');
+    const readProblems = read.filter((c) => c.tone === 'bad' || c.tone === 'ok');
+    const readGood = read.filter((c) => c.tone === 'good');
+    return (_jsxs("div", { className: "seo-analysis", children: [_jsxs("div", { className: "seo-summary", children: [_jsxs("span", { className: `seo-pill seo-pill-${seoTone}`, children: [_jsx(Dot, { tone: seoTone }), " SEO analysis: ", toneLabel(seoTone)] }), _jsxs("span", { className: `seo-pill seo-pill-${readTone}`, children: [_jsx(Dot, { tone: readTone }), " Readability: ", toneLabel(readTone)] })] }), _jsxs("details", { className: "seo-details", children: [_jsx("summary", { children: "SEO results" }), _jsx(CheckList, { title: "Problems", items: problems }), _jsx(CheckList, { title: "Improvements", items: improvements }), _jsx(CheckList, { title: "Good results", items: good })] }), _jsxs("details", { className: "seo-details", children: [_jsx("summary", { children: "Readability results" }), _jsx(CheckList, { title: "Problems", items: readProblems }), _jsx(CheckList, { title: "Good results", items: readGood })] })] }));
+};
+export const useSeoSummary = (input) => {
+    const seoTone = summariseTone(analyseSeo(input));
+    const readTone = summariseTone(analyseReadability(input));
+    return {
+        seoTone,
+        readTone,
+        seoLabel: toneLabel(seoTone),
+        readLabel: toneLabel(readTone),
+    };
+};

package/dist/components/admin/editor/YoastCollapsible.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+type Props = {
+    title: string;
+    defaultOpen?: boolean;
+    status?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare const AccChevron: () => import("react").JSX.Element;
+export { AccChevron };
+export declare const YoastCollapsible: ({ title, defaultOpen, status, children, className }: Props) => import("react").JSX.Element;
+//# sourceMappingURL=YoastCollapsible.d.ts.map

package/dist/components/admin/editor/YoastCollapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YoastCollapsible.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/editor/YoastCollapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,UAAU,mCAYf,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,eAAO,MAAM,gBAAgB,GAAI,qDAA6D,KAAK,gCASlG,CAAA"}

package/dist/components/admin/editor/YoastCollapsible.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AccChevron = () => (_jsx("span", { className: "acc-chevron", "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.5 4.5L6 8L9.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+export { AccChevron };
+export const YoastCollapsible = ({ title, defaultOpen = false, status, children, className }) => (_jsxs("details", { className: `yoast-collapse${className ? ` ${className}` : ''}`, open: defaultOpen, children: [_jsxs("summary", { className: "yoast-collapse-summary", children: [_jsx(AccChevron, {}), _jsx("span", { className: "yoast-collapse-title", children: title }), status ? _jsx("span", { className: "yoast-collapse-status", children: status }) : null] }), _jsx("div", { className: "yoast-collapse-body", children: children })] }));

package/dist/components/admin/editor/YoastInsightsPanel.d.ts

@@ -0,0 +1,4 @@
+export declare const YoastInsightsPanel: ({ contentText }: {
+    contentText: string;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=YoastInsightsPanel.d.ts.map

package/dist/components/admin/editor/YoastInsightsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YoastInsightsPanel.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/editor/YoastInsightsPanel.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,kBAAkB,GAAI,iBAAiB;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,gCAyC1E,CAAA"}

package/dist/components/admin/editor/YoastInsightsPanel.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+const wordsOf = (text) => text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s'-]/g, ' ')
+    .split(/\s+/)
+    .filter((w) => w.length > 2);
+const STOP_WORDS = new Set([
+    'the', 'and', 'for', 'are', 'but', 'not', 'you', 'all', 'can', 'had', 'her', 'was', 'one', 'our',
+    'out', 'day', 'get', 'has', 'him', 'his', 'how', 'its', 'may', 'new', 'now', 'old', 'see', 'two',
+    'way', 'who', 'boy', 'did', 'she', 'use', 'her', 'that', 'this', 'with', 'from', 'they', 'have',
+    'been', 'will', 'your', 'what', 'when', 'make', 'like', 'time', 'just', 'know', 'take', 'into',
+    'year', 'some', 'them', 'than', 'then', 'also', 'only', 'come', 'over', 'such', 'after', 'most',
+]);
+export const YoastInsightsPanel = ({ contentText }) => {
+    const words = useMemo(() => wordsOf(contentText), [contentText]);
+    const wordCount = words.length;
+    const prominent = useMemo(() => {
+        const counts = new Map();
+        for (const w of words) {
+            if (STOP_WORDS.has(w))
+                continue;
+            counts.set(w, (counts.get(w) ?? 0) + 1);
+        }
+        return [...counts.entries()]
+            .sort((a, b) => b[1] - a[1])
+            .slice(0, 8);
+    }, [words]);
+    return (_jsxs("div", { className: "yoast-accordion-panel", children: [_jsx("p", { className: "yoast-help", children: "See word count and prominent terms used in your post content." }), _jsxs("div", { className: "yoast-link-section", children: [_jsx("h4", { className: "yoast-link-section-title", children: "Word count" }), _jsx("p", { className: "yoast-insight-value", children: wordCount })] }), _jsxs("div", { className: "yoast-link-section", children: [_jsx("h4", { className: "yoast-link-section-title", children: "Prominent words" }), prominent.length === 0 ? (_jsx("p", { className: "yoast-result-empty", children: "Add body content to see prominent words." })) : (_jsx("ul", { className: "yoast-link-list", children: prominent.map(([word, count]) => (_jsxs("li", { children: [_jsx("span", { className: "yoast-link-label", children: word }), _jsxs("span", { className: "yoast-link-href", children: [count, " occurrences"] })] }, word))) }))] })] }));
+};

package/dist/components/admin/editor/YoastInternalLinksPanel.d.ts

@@ -0,0 +1,4 @@
+export declare const YoastInternalLinksPanel: ({ contentHtml }: {
+    contentHtml: string;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=YoastInternalLinksPanel.d.ts.map

package/dist/components/admin/editor/YoastInternalLinksPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YoastInternalLinksPanel.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/editor/YoastInternalLinksPanel.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,uBAAuB,GAAI,iBAAiB;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,gCA0D/E,CAAA"}

package/dist/components/admin/editor/YoastInternalLinksPanel.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+const parseLinks = (html) => {
+    if (!html || typeof document === 'undefined')
+        return [];
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const hits = [];
+    doc.querySelectorAll('a[href]').forEach((a) => {
+        const href = a.getAttribute('href') ?? '';
+        const label = (a.textContent ?? '').trim() || href;
+        if (href)
+            hits.push({ href, label });
+    });
+    return hits;
+};
+export const YoastInternalLinksPanel = ({ contentHtml }) => {
+    const { outgoing, external } = useMemo(() => {
+        const links = parseLinks(contentHtml);
+        const outgoing = [];
+        const external = [];
+        for (const link of links) {
+            if (link.href.startsWith('/') ||
+                link.href.includes('/blog/') ||
+                link.href.includes('data-link-type="internal"')) {
+                outgoing.push(link);
+            }
+            else if (/^https?:\/\//i.test(link.href)) {
+                external.push(link);
+            }
+        }
+        return { outgoing, external };
+    }, [contentHtml]);
+    return (_jsxs("div", { className: "yoast-accordion-panel", children: [_jsx("p", { className: "yoast-help", children: "Internal links help visitors and search engines navigate your site. Outbound links add context." }), _jsxs("div", { className: "yoast-link-section", children: [_jsx("h4", { className: "yoast-link-section-title", children: "Outgoing internal links" }), outgoing.length === 0 ? (_jsx("p", { className: "yoast-result-empty", children: "No internal links in this post yet." })) : (_jsx("ul", { className: "yoast-link-list", children: outgoing.map((l, i) => (_jsxs("li", { children: [_jsx("span", { className: "yoast-link-label", children: l.label }), _jsx("span", { className: "yoast-link-href mono", children: l.href })] }, `${l.href}-${i}`))) }))] }), _jsxs("div", { className: "yoast-link-section", children: [_jsx("h4", { className: "yoast-link-section-title", children: "Outgoing external links" }), external.length === 0 ? (_jsx("p", { className: "yoast-result-empty", children: "No external links in this post yet." })) : (_jsx("ul", { className: "yoast-link-list", children: external.map((l, i) => (_jsxs("li", { children: [_jsx("span", { className: "yoast-link-label", children: l.label }), _jsx("span", { className: "yoast-link-href mono", children: l.href })] }, `${l.href}-${i}`))) }))] })] }));
+};