@bendyline/squisq-editor-react 1.4.0 → 1.5.1

package/dist/Toolbar.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useEditorContext } from './EditorContext';
-import { getAvailableTemplates } from '@bendyline/squisq/doc';
-/** Template names are static — computed once at module load. */
-const TEMPLATE_NAMES = getAvailableTemplates();
+import { VersionHistoryPanel } from './VersionHistoryPanel';
+import { RecorderEntry } from './RecorderEntry';
+import { ViewMenuPanel } from './ViewMenuPanel';
+import { TemplatePicker, TEMPLATE_NAMES } from './TemplatePicker';
+import { profileBlockContents, recommendTemplatesForBlock } from '@bendyline/squisq/recommend';
+import { findBlockSliceAtLine, findBlockSliceByHeadingIndex } from './blockSlice';
+import { LinkDialog } from './LinkDialog';
+import { DocumentSettingsDialog } from './DocumentSettingsDialog';
+import { EmojiPicker, EMOJI_PICKER_WIDTH, EMOJI_PICKER_MAX_HEIGHT } from './EmojiPicker';
+import { createPortal } from 'react-dom';
 const VIEWS = [
     { id: 'wysiwyg', label: 'Editor', shortcut: '⌘1' },
     { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘2' },
@@ -43,16 +50,41 @@ const BUTTONS = [
     { id: 'h1', label: 'H1', icon: 'H1', title: 'Heading 1', group: 'structure' },
     { id: 'h2', label: 'H2', icon: 'H2', title: 'Heading 2', group: 'structure' },
     { id: 'h3', label: 'H3', icon: 'H3', title: 'Heading 3', group: 'structure' },
+    { id: 'h4', label: 'H4', icon: 'H4', title: 'Heading 4', group: 'structure' },
+    { id: 'h5', label: 'H5', icon: 'H5', title: 'Heading 5', group: 'structure' },
+    { id: 'h6', label: 'H6', icon: 'H6', title: 'Heading 6', group: 'structure' },
     // Insert group — block-level inserts (quote, code blocks, rules)
     { id: 'quote', label: '❝', icon: '❝', title: 'Blockquote', group: 'insert' },
     { id: 'codeblock', label: '{ }', icon: '{ }', title: 'Code block', group: 'insert' },
     { id: 'code', label: '</>', icon: '</>', title: 'Inline code', group: 'insert' },
     { id: 'hr', label: '—', icon: '—', title: 'Horizontal rule', group: 'insert' },
-    // Media group — links, tables, images
+    // Media group — links, tables, images, emoji
     { id: 'link', label: '🔗', icon: '🔗', title: 'Insert link', group: 'media' },
     { id: 'table', label: 'table', icon: '', title: 'Insert table', group: 'media' },
     { id: 'image', label: '🖼', icon: '🖼', title: 'Insert image', group: 'media' },
+    { id: 'emoji', label: '😊', icon: '😊', title: 'Insert emoji', group: 'media' },
 ];
+// ─── Inline SVG icons (line-art, currentColor) ──────────
+const TABLE_ICON = (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1" }), _jsx("line", { x1: "1", y1: "5", x2: "13", y2: "5" }), _jsx("line", { x1: "1", y1: "9", x2: "13", y2: "9" }), _jsx("line", { x1: "5", y1: "1", x2: "5", y2: "13" }), _jsx("line", { x1: "9", y1: "1", x2: "9", y2: "13" })] }));
+const LINK_ICON = (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M5.75 8.25 L8.25 5.75" }), _jsx("path", { d: "M6.5 3.75 L8 2.25 a2.5 2.5 0 0 1 3.54 3.54 L10 7.25" }), _jsx("path", { d: "M7.5 10.25 L6 11.75 a2.5 2.5 0 0 1 -3.54 -3.54 L4 6.75" })] }));
+const IMAGE_ICON = (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "1.5", y: "2.5", width: "11", height: "9", rx: "1" }), _jsx("circle", { cx: "5", cy: "5.5", r: "0.9" }), _jsx("path", { d: "M2 10 L5.5 7 L8 9 L10 7.5 L12.5 10" })] }));
+const PAPERCLIP_ICON = (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M11 4 L5.5 9.5 a1.75 1.75 0 0 0 2.5 2.5 L12.5 7.5 a3 3 0 0 0 -4.25 -4.25 L3 8.5 a4.25 4.25 0 0 0 6 6 L13 10.5" }) }));
+const EMOJI_ICON = (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "7", cy: "7", r: "5.25" }), _jsx("circle", { cx: "5.25", cy: "5.75", r: "0.6", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "8.75", cy: "5.75", r: "0.6", fill: "currentColor", stroke: "none" }), _jsx("path", { d: "M4.75 8.5 a2.5 2.5 0 0 0 4.5 0" })] }));
+/** Returns an SVG element when the button id maps to one, otherwise null. */
+function buttonIconSvg(id) {
+    switch (id) {
+        case 'table':
+            return TABLE_ICON;
+        case 'link':
+            return LINK_ICON;
+        case 'image':
+            return IMAGE_ICON;
+        case 'emoji':
+            return EMOJI_ICON;
+        default:
+            return null;
+    }
+}
 // ─── Tiptap active-state map ────────────────────────────
 /** Returns true if the given button id is currently active in Tiptap */
 function isTiptapActive(editor, id) {
@@ -73,6 +105,12 @@ function isTiptapActive(editor, id) {
             return editor.isActive('heading', { level: 2 });
         case 'h3':
             return editor.isActive('heading', { level: 3 });
+        case 'h4':
+            return editor.isActive('heading', { level: 4 });
+        case 'h5':
+            return editor.isActive('heading', { level: 5 });
+        case 'h6':
+            return editor.isActive('heading', { level: 6 });
         case 'quote':
             return editor.isActive('blockquote');
         case 'ul':
@@ -91,7 +129,7 @@ function isTiptapActive(editor, id) {
  * - Raw: appends markdown syntax to the source
  */
 export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAfterActions, slotRight, showPlayTab = true, }) {
-    const { activeView, setActiveView, markdownSource, setMarkdownSource, tiptapEditor, monacoEditor, mediaProvider, editorMode, } = useEditorContext();
+    const { activeView, setActiveView, markdownSource, setMarkdownSource, tiptapEditor, monacoEditor, mediaProvider, editorMode, versioning, allowRecording, documentLinkProvider, theme, } = useEditorContext();
     const isCodeMode = editorMode === 'code';
     // In code mode only the raw view is meaningful; the WYSIWYG and Preview
     // surfaces aren't mounted, so hide their tabs.
@@ -105,6 +143,41 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
     const showViewTabs = visibleViews.length > 1;
     // Hidden file input for image picker
     const imageInputRef = useRef(null);
+    // Link dialog — shared by WYSIWYG and Raw views.
+    const [linkDialog, setLinkDialog] = useState(null);
+    // Emoji picker — toolbar-anchored popover. We track the trigger
+    // button's screen rect so the picker can position itself just below
+    // it via createPortal (the toolbar's overflow:hidden actions row
+    // would otherwise clip the popover).
+    const emojiButtonRef = useRef(null);
+    const [emojiPickerAnchor, setEmojiPickerAnchor] = useState(null);
+    const openEmojiPicker = useCallback(() => {
+        const btn = emojiButtonRef.current;
+        if (!btn)
+            return;
+        const rect = btn.getBoundingClientRect();
+        // Position just below the trigger by default, then clamp into the
+        // visible viewport so the picker is never clipped on the right or
+        // bottom — flips above the trigger when there isn't room below.
+        const gap = 6;
+        const margin = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let left = rect.left;
+        if (left + EMOJI_PICKER_WIDTH + margin > vw) {
+            left = Math.max(margin, vw - EMOJI_PICKER_WIDTH - margin);
+        }
+        let top = rect.bottom + gap;
+        if (top + EMOJI_PICKER_MAX_HEIGHT + margin > vh) {
+            const flipped = rect.top - EMOJI_PICKER_MAX_HEIGHT - gap;
+            // Prefer flipping above when there's more room there; otherwise
+            // pin to the top edge with margin and let the picker's own
+            // maxHeight clip it.
+            top = flipped >= margin ? flipped : margin;
+        }
+        setEmojiPickerAnchor({ top, left });
+    }, []);
+    const closeEmojiPicker = useCallback(() => setEmojiPickerAnchor(null), []);
     // ── Narrow-screen detection ──────────────────────────
     const [isNarrow, setIsNarrow] = useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 768px)').matches);
     useEffect(() => {
@@ -118,6 +191,8 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
     const [measuredOverflowIndex, setMeasuredOverflowIndex] = useState(null);
     const [showOverflow, setShowOverflow] = useState(false);
     const overflowRef = useRef(null);
+    // Document settings (frontmatter) dialog
+    const [showDocSettings, setShowDocSettings] = useState(false);
     // On narrow screens, force all buttons into the overflow menu
     const overflowIndex = isNarrow ? 0 : measuredOverflowIndex;
     useEffect(() => {
@@ -220,6 +295,15 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
             case 'h3':
                 chain.toggleHeading({ level: 3 }).run();
                 break;
+            case 'h4':
+                chain.toggleHeading({ level: 4 }).run();
+                break;
+            case 'h5':
+                chain.toggleHeading({ level: 5 }).run();
+                break;
+            case 'h6':
+                chain.toggleHeading({ level: 6 }).run();
+                break;
             case 'quote':
                 chain.toggleBlockquote().run();
                 break;
@@ -236,12 +320,30 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
                 chain.setHorizontalRule().run();
                 break;
             case 'link': {
-                const url = window.prompt('URL:');
-                if (url) {
-                    chain
-                        .setLink?.({ href: url })
-                        .run();
+                const isActive = tiptapEditor.isActive('link');
+                let initialText = '';
+                let initialUrl = '';
+                if (isActive) {
+                    // Snap selection to the full link mark so editing replaces
+                    // the entire `[text](url)` rather than just the cursor word.
+                    tiptapEditor.chain().focus().extendMarkRange('link').run();
+                    const sel = tiptapEditor.state.selection;
+                    initialText = tiptapEditor.state.doc.textBetween(sel.from, sel.to, ' ');
+                    initialUrl = tiptapEditor.getAttributes('link').href ?? '';
+                }
+                else {
+                    const { from, to, empty } = tiptapEditor.state.selection;
+                    if (!empty) {
+                        initialText = tiptapEditor.state.doc.textBetween(from, to, ' ');
+                    }
                 }
+                setLinkDialog({
+                    mode: isActive ? 'update' : 'insert',
+                    target: 'wysiwyg',
+                    initialText,
+                    initialUrl,
+                    rawRange: null,
+                });
                 break;
             }
             case 'table':
@@ -307,6 +409,15 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
                 case 'h3':
                     prefixLines('### ', 'Heading 3');
                     break;
+                case 'h4':
+                    prefixLines('#### ', 'Heading 4');
+                    break;
+                case 'h5':
+                    prefixLines('##### ', 'Heading 5');
+                    break;
+                case 'h6':
+                    prefixLines('###### ', 'Heading 6');
+                    break;
                 case 'quote':
                     prefixLines('> ', 'Quote');
                     break;
@@ -328,14 +439,42 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
                     break;
                 }
                 case 'link': {
-                    if (hasSelection) {
-                        replacement = '[' + selectedText + '](url)';
-                    }
-                    else {
-                        replacement = '[link text](url)';
-                        newCursorOffset = 1; // inside the []
+                    // Open the LinkDialog instead of inserting literal text. If the
+                    // cursor sits inside an existing `[text](url)` on this line,
+                    // prefill from it and replace the whole match on confirm.
+                    const lineNumber = selection.startLineNumber;
+                    const lineText = model.getLineContent(lineNumber);
+                    const cursorCol = selection.startColumn;
+                    const linkRe = /\[([^\]]*)\]\(([^)]*)\)/g;
+                    let match;
+                    let existing = null;
+                    while ((match = linkRe.exec(lineText)) !== null) {
+                        const startCol = match.index + 1; // 1-based
+                        const endCol = startCol + match[0].length;
+                        if (cursorCol >= startCol && cursorCol <= endCol) {
+                            existing = {
+                                text: match[1],
+                                url: match[2],
+                                range: {
+                                    startLineNumber: lineNumber,
+                                    startColumn: startCol,
+                                    endLineNumber: lineNumber,
+                                    endColumn: endCol,
+                                },
+                            };
+                            break;
+                        }
                     }
-                    break;
+                    setLinkDialog({
+                        mode: existing ? 'update' : 'insert',
+                        target: 'raw',
+                        initialText: existing ? existing.text : hasSelection ? selectedText : '',
+                        initialUrl: existing ? existing.url : '',
+                        rawRange: existing ? existing.range : null,
+                    });
+                    // Skip the executeEdits/setPosition tail below — the dialog will
+                    // apply its own edit on confirm.
+                    return;
                 }
                 case 'table': {
                     const tpl = '| Header 1 | Header 2 | Header 3 |\n| --- | --- | --- |\n| Cell | Cell | Cell |\n| Cell | Cell | Cell |';
@@ -436,29 +575,343 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
             imageInputRef.current?.click();
             return;
         }
+        if (id === 'emoji') {
+            // Toggle the popover: clicking the button again closes it.
+            if (emojiPickerAnchor)
+                closeEmojiPicker();
+            else
+                openEmojiPicker();
+            return;
+        }
         if (activeView === 'wysiwyg' && tiptapEditor) {
             handleTiptap(id);
         }
         else {
             handleRaw(id);
         }
-    }, [activeView, tiptapEditor, handleTiptap, handleRaw]);
+    }, [
+        activeView,
+        tiptapEditor,
+        handleTiptap,
+        handleRaw,
+        emojiPickerAnchor,
+        openEmojiPicker,
+        closeEmojiPicker,
+    ]);
+    // ── Picker insert (emoji or FontAwesome icon) ──────
+    // Inserts a chosen picker entry at the cursor. We bypass
+    // `insertAtCursor` (which routes through markdown→Tiptap conversion
+    // and wraps the input in a paragraph) so entries land inline at the
+    // caret rather than starting a new block. Emoji insert as a plain
+    // character; FontAwesome icons insert as the `InlineIcon` Tiptap
+    // node so the editor renders them inline immediately.
+    const handleEmojiSelect = useCallback((entry) => {
+        if (activeView === 'wysiwyg' && tiptapEditor) {
+            if (entry.kind === 'emoji') {
+                tiptapEditor.chain().focus().insertContent(entry.char).run();
+            }
+            else {
+                tiptapEditor
+                    .chain()
+                    .focus()
+                    .insertContent({
+                    type: 'inlineIcon',
+                    attrs: { token: entry.token, family: entry.family, name: entry.name },
+                })
+                    .run();
+            }
+        }
+        else if (activeView === 'raw' && monacoEditor) {
+            const insertion = entry.kind === 'emoji' ? entry.char : `{[${entry.token}]}`;
+            const position = monacoEditor.getPosition();
+            if (position) {
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    startColumn: position.column,
+                    endLineNumber: position.lineNumber,
+                    endColumn: position.column,
+                };
+                monacoEditor.executeEdits('picker-insert', [{ range, text: insertion }]);
+                monacoEditor.focus();
+            }
+            else {
+                setMarkdownSource(markdownSource + insertion);
+            }
+        }
+        else {
+            const insertion = entry.kind === 'emoji' ? entry.char : `{[${entry.token}]}`;
+            setMarkdownSource(markdownSource + insertion);
+        }
+        closeEmojiPicker();
+    }, [activeView, tiptapEditor, monacoEditor, markdownSource, setMarkdownSource, closeEmojiPicker]);
+    // ── Ctrl+K / Cmd+K → open the link dialog ────────────
+    // Mirrors the behaviour of common editors (Word, Google Docs, VS Code's
+    // Markdown preview): if the cursor is in a Squisq editor surface, the
+    // shortcut routes through the same handler the toolbar Link button uses,
+    // which prefills the dialog from the current selection (or the link
+    // under the cursor) before opening.
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            if (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey)
+                return;
+            if (e.key.toLowerCase() !== 'k')
+                return;
+            const target = e.target;
+            if (!target)
+                return;
+            // Only intercept when focus is inside one of our editor surfaces.
+            const inEditor = !!target.closest('.squisq-wysiwyg-editor, .ProseMirror, .squisq-raw-editor-container, .monaco-editor');
+            if (!inEditor)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            handleAction('link');
+        };
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, [handleAction]);
+    // ── Link dialog confirm ──────────────────────────────
+    const handleLinkConfirm = useCallback((text, url) => {
+        if (!linkDialog)
+            return;
+        const trimmedUrl = url.trim();
+        const trimmedText = text.trim();
+        if (linkDialog.target === 'wysiwyg' && tiptapEditor) {
+            if (!trimmedUrl) {
+                // Empty URL on update = unlink. On insert with no URL, do nothing.
+                if (linkDialog.mode === 'update') {
+                    tiptapEditor.chain().focus().unsetLink().run();
+                }
+                setLinkDialog(null);
+                return;
+            }
+            const visibleText = trimmedText || trimmedUrl;
+            const chain = tiptapEditor.chain().focus();
+            // Insert (or replace selection) with text carrying a link mark. When
+            // updating an existing link, the selection was extended to the full
+            // mark range earlier, so this replaces the entire `[text](url)`.
+            chain
+                .insertContent({
+                type: 'text',
+                text: visibleText,
+                marks: [{ type: 'link', attrs: { href: trimmedUrl } }],
+            })
+                .run();
+            setLinkDialog(null);
+            return;
+        }
+        if (linkDialog.target === 'raw' && monacoEditor) {
+            const model = monacoEditor.getModel();
+            if (!model) {
+                setLinkDialog(null);
+                return;
+            }
+            if (!trimmedUrl && linkDialog.mode === 'update' && linkDialog.rawRange) {
+                // Empty URL on update = strip the markdown link, keep the text.
+                monacoEditor.executeEdits('toolbar-link-edit', [
+                    { range: linkDialog.rawRange, text: trimmedText || linkDialog.initialText },
+                ]);
+                monacoEditor.focus();
+                setLinkDialog(null);
+                return;
+            }
+            if (!trimmedUrl) {
+                setLinkDialog(null);
+                return;
+            }
+            const visibleText = trimmedText || trimmedUrl;
+            const replacement = `[${visibleText}](${trimmedUrl})`;
+            const range = linkDialog.rawRange ?? monacoEditor.getSelection();
+            if (!range) {
+                setLinkDialog(null);
+                return;
+            }
+            monacoEditor.executeEdits('toolbar-link-edit', [{ range, text: replacement }]);
+            monacoEditor.focus();
+            setLinkDialog(null);
+            return;
+        }
+        setLinkDialog(null);
+    }, [linkDialog, tiptapEditor, monacoEditor]);
     const groups = ['format', 'lists', 'structure', 'insert', 'media'];
     const isWysiwyg = activeView === 'wysiwyg' && tiptapEditor;
     const isPreview = activeView === 'preview';
+    // ── Progressive heading disclosure ───────────────────
+    // H1\u2013H3 are always visible. H4 appears once the document already
+    // contains an H3, H5 once it contains an H4, and H6 once it contains
+    // an H5. This keeps the toolbar compact for typical short documents
+    // while letting deeply nested documents reach every level.
+    const maxHeadingLevelInDoc = useMemo(() => {
+        if (!markdownSource)
+            return 0;
+        let max = 0;
+        let inFence = false;
+        for (const rawLine of markdownSource.split('\n')) {
+            const line = rawLine.trimEnd();
+            if (/^\s*```/.test(line)) {
+                inFence = !inFence;
+                continue;
+            }
+            if (inFence)
+                continue;
+            const m = /^(#{1,6})\s+\S/.exec(line);
+            if (m && m[1].length > max)
+                max = m[1].length;
+        }
+        return max;
+    }, [markdownSource]);
+    // Show H(n+1) when the document already contains H(n), starting from H3.
+    const visibleHeadingMax = Math.min(6, Math.max(3, maxHeadingLevelInDoc + 1));
+    const isButtonVisible = (id) => {
+        const m = /^h([1-6])$/.exec(id);
+        if (!m)
+            return true;
+        return Number(m[1]) <= visibleHeadingMax;
+    };
     // Detect whether cursor is inside a table (WYSIWYG mode only)
     const isInTable = isWysiwyg ? tiptapEditor.isActive('table') : false;
     // Detect current heading template (WYSIWYG mode only)
-    const currentTemplate = isWysiwyg
+    const wysiwygTemplate = isWysiwyg
         ? tiptapEditor.isActive('heading')
             ? (tiptapEditor.getAttributes('heading')?.dataTemplate ?? '')
             : null
         : null;
+    // ── Monaco heading detection (Markdown view) ─────────────────────
+    // Watch the Monaco cursor and surface the template picker whenever the
+    // cursor is on a heading line. `null` hides the picker; '' shows it
+    // with no template selected; any other string is the current template.
+    const isRawView = activeView === 'raw';
+    const [rawTemplate, setRawTemplate] = useState(null);
+    const [rawHeadingLine, setRawHeadingLine] = useState(null);
+    useEffect(() => {
+        if (!isRawView || !monacoEditor) {
+            setRawTemplate(null);
+            setRawHeadingLine(null);
+            return;
+        }
+        const recompute = () => {
+            const model = monacoEditor.getModel();
+            const pos = monacoEditor.getPosition();
+            if (!model || !pos) {
+                setRawTemplate(null);
+                setRawHeadingLine(null);
+                return;
+            }
+            const line = model.getLineContent(pos.lineNumber);
+            const headingMatch = line.match(/^#{1,6}\s+(.+)$/);
+            if (!headingMatch) {
+                setRawTemplate(null);
+                setRawHeadingLine(null);
+                return;
+            }
+            setRawHeadingLine(pos.lineNumber);
+            const annotMatch = headingMatch[1].match(/\s*\{\[([^\]]+)\]\}[\s\]}]*$/);
+            if (annotMatch) {
+                // First whitespace-delimited token is the template name; the rest are params.
+                const name = annotMatch[1].trim().split(/\s+/)[0];
+                setRawTemplate(name);
+            }
+            else {
+                setRawTemplate('');
+            }
+        };
+        recompute();
+        const cursorSub = monacoEditor.onDidChangeCursorPosition(recompute);
+        const contentSub = monacoEditor.onDidChangeModelContent(recompute);
+        return () => {
+            cursorSub.dispose();
+            contentSub.dispose();
+        };
+    }, [isRawView, monacoEditor]);
+    // Track the index of the heading the WYSIWYG cursor is in among all
+    // top-level headings. Used to locate the same heading in the markdown
+    // source for content-based template recommendations.
+    const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState(null);
+    useEffect(() => {
+        if (!isWysiwyg || !tiptapEditor) {
+            setWysiwygHeadingIndex(null);
+            return;
+        }
+        const recompute = () => {
+            if (!tiptapEditor.isActive('heading')) {
+                setWysiwygHeadingIndex(null);
+                return;
+            }
+            const cursor = tiptapEditor.state.selection.from;
+            let index = -1;
+            let count = 0;
+            tiptapEditor.state.doc.descendants((node, pos) => {
+                if (node.type.name !== 'heading')
+                    return;
+                if (pos <= cursor && pos + node.nodeSize > cursor) {
+                    index = count;
+                    return false;
+                }
+                count++;
+            });
+            setWysiwygHeadingIndex(index >= 0 ? index : null);
+        };
+        recompute();
+        tiptapEditor.on('selectionUpdate', recompute);
+        tiptapEditor.on('update', recompute);
+        return () => {
+            tiptapEditor.off('selectionUpdate', recompute);
+            tiptapEditor.off('update', recompute);
+        };
+    }, [isWysiwyg, tiptapEditor]);
+    const currentTemplate = isWysiwyg ? wysiwygTemplate : isRawView ? rawTemplate : null;
+    // Compute recommended templates for the active block. Heading slice
+    // comes from markdownSource — raw view supplies the cursor line,
+    // WYSIWYG supplies the heading index.
+    const recommendedTemplates = useMemo(() => {
+        if (currentTemplate === null)
+            return undefined;
+        let slice = null;
+        if (isRawView && rawHeadingLine !== null) {
+            slice = findBlockSliceAtLine(markdownSource, rawHeadingLine);
+        }
+        else if (isWysiwyg && wysiwygHeadingIndex !== null) {
+            slice = findBlockSliceByHeadingIndex(markdownSource, wysiwygHeadingIndex);
+        }
+        if (slice === null)
+            return undefined;
+        const profile = profileBlockContents(slice);
+        return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
+    }, [currentTemplate, isRawView, isWysiwyg, rawHeadingLine, wysiwygHeadingIndex, markdownSource]);
     const handleTemplatePick = (value) => {
+        // Raw (Monaco) — rewrite the heading line's annotation suffix in place.
+        if (isRawView && monacoEditor) {
+            const model = monacoEditor.getModel();
+            const pos = monacoEditor.getPosition();
+            if (!model || !pos)
+                return;
+            const lineNumber = pos.lineNumber;
+            const lineText = model.getLineContent(lineNumber);
+            const headingMatch = lineText.match(/^(#{1,6}\s+)(.+)$/);
+            if (!headingMatch)
+                return;
+            const prefix = headingMatch[1];
+            // Strip any existing trailing annotation
+            const bareText = headingMatch[2].replace(/\s*\{\[[^\]]+\]\}[\s\]}]*$/, '').trimEnd();
+            const newLine = value === '' ? `${prefix}${bareText}` : `${prefix}${bareText} {[${value}]}`;
+            monacoEditor.executeEdits('toolbar-template-pick', [
+                {
+                    range: {
+                        startLineNumber: lineNumber,
+                        startColumn: 1,
+                        endLineNumber: lineNumber,
+                        endColumn: lineText.length + 1,
+                    },
+                    text: newLine,
+                },
+            ]);
+            monacoEditor.focus();
+            return;
+        }
+        // WYSIWYG — update the heading node attributes.
         if (!tiptapEditor)
             return;
         if (value === '') {
-            // Clear template
             tiptapEditor
                 .chain()
                 .focus()
@@ -475,21 +928,35 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
                         handleImageFile(file);
                     // Reset so the same file can be re-selected
                     e.target.value = '';
-                } }), slotLeft, showViewTabs && (_jsx("div", { className: "squisq-toolbar-view-tabs", role: "tablist", "aria-label": "Editor view", children: visibleViews.map((view) => (_jsxs("button", { role: "tab", "data-view": view.id, "aria-selected": activeView === view.id, className: `squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`, onClick: () => setActiveView(view.id), "data-tooltip": `${view.label} (${view.shortcut})`, children: [_jsx("span", { className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long", "data-label": view.label, children: view.label }), view.shortLabel && view.shortLabel !== view.label && (_jsx("span", { className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short", "data-label": view.shortLabel, children: view.shortLabel }))] }, view.id))) })), !isPreview && !isNarrow && !isCodeMode && (_jsxs("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [groups.map((group, gi) => (_jsxs("div", { className: "squisq-toolbar-group", children: [gi > 0 && _jsx("div", { className: "squisq-toolbar-separator" }), BUTTONS.filter((b) => b.group === group).map((btn) => {
-                                const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+                } }), slotLeft, showViewTabs && (_jsx("div", { className: "squisq-toolbar-view-tabs", role: "tablist", "aria-label": "Editor view", children: visibleViews.map((view) => (_jsxs("button", { role: "tab", "data-view": view.id, "aria-selected": activeView === view.id, className: `squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`, onClick: () => setActiveView(view.id), "data-tooltip": `${view.label} (${view.shortcut})`, children: [_jsx("span", { className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long", "data-label": view.label, children: view.label }), view.shortLabel && view.shortLabel !== view.label && (_jsx("span", { className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short", "data-label": view.shortLabel, children: view.shortLabel }))] }, view.id))) })), !isPreview && !isNarrow && !isCodeMode && (_jsxs("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [groups.map((group, gi) => (_jsxs("div", { className: "squisq-toolbar-group", children: [gi > 0 && _jsx("div", { className: "squisq-toolbar-separator" }), BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
+                                const active = btn.id === 'emoji'
+                                    ? emojiPickerAnchor !== null
+                                    : isWysiwyg
+                                        ? isTiptapActive(tiptapEditor, btn.id)
+                                        : false;
                                 const disabled = btn.id === 'image' && !mediaProvider;
-                                return (_jsx("button", { className: `squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`, "data-tooltip": disabled ? 'Insert image (requires media provider)' : btn.title, onClick: () => handleAction(btn.id), "aria-label": btn.title, "aria-pressed": active, disabled: disabled, style: btn.iconStyle, children: btn.id === 'table' ? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1" }), _jsx("line", { x1: "1", y1: "5", x2: "13", y2: "5" }), _jsx("line", { x1: "1", y1: "9", x2: "13", y2: "9" }), _jsx("line", { x1: "5", y1: "1", x2: "5", y2: "13" }), _jsx("line", { x1: "9", y1: "1", x2: "9", y2: "13" })] })) : (btn.icon) }, btn.id));
-                            })] }, group))), currentTemplate !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsx("div", { className: "squisq-toolbar-group squisq-template-picker", children: _jsxs("label", { className: "squisq-template-picker-label", "data-tooltip": "Block template for this heading", children: ["Template:", _jsxs("select", { className: "squisq-template-picker-select", value: currentTemplate, onChange: (e) => handleTemplatePick(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), TEMPLATE_NAMES.map((name) => (_jsx("option", { value: name, children: name }, name)))] })] }) })] })), isInTable && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsxs("div", { className: "squisq-toolbar-group squisq-table-controls", children: [_jsx("span", { className: "squisq-table-controls-label", children: "Table:" }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add column before", onClick: () => tiptapEditor.chain().focus().addColumnBefore().run(), "aria-label": "Add column before", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "7", y: "2", width: "8", height: "12", rx: "1" }), _jsx("line", { x1: "11", y1: "2", x2: "11", y2: "14" }), _jsx("line", { x1: "1", y1: "8", x2: "4.5", y2: "8" }), _jsx("line", { x1: "2.75", y1: "6.25", x2: "2.75", y2: "9.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add column after", onClick: () => tiptapEditor.chain().focus().addColumnAfter().run(), "aria-label": "Add column after", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "2", width: "8", height: "12", rx: "1" }), _jsx("line", { x1: "5", y1: "2", x2: "5", y2: "14" }), _jsx("line", { x1: "11.5", y1: "8", x2: "15", y2: "8" }), _jsx("line", { x1: "13.25", y1: "6.25", x2: "13.25", y2: "9.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Delete column", onClick: () => tiptapEditor.chain().focus().deleteColumn().run(), "aria-label": "Delete column", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "4", y: "1", width: "8", height: "14", rx: "1" }), _jsx("line", { x1: "6", y1: "5.5", x2: "10", y2: "10.5" }), _jsx("line", { x1: "10", y1: "5.5", x2: "6", y2: "10.5" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add row above", onClick: () => tiptapEditor.chain().focus().addRowBefore().run(), "aria-label": "Add row above", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "2", y: "6", width: "12", height: "9", rx: "1" }), _jsx("line", { x1: "2", y1: "10.5", x2: "14", y2: "10.5" }), _jsx("line", { x1: "8", y1: "1", x2: "8", y2: "4.5" }), _jsx("line", { x1: "6.25", y1: "2.75", x2: "9.75", y2: "2.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add row below", onClick: () => tiptapEditor.chain().focus().addRowAfter().run(), "aria-label": "Add row below", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "2", y: "1", width: "12", height: "9", rx: "1" }), _jsx("line", { x1: "2", y1: "5.5", x2: "14", y2: "5.5" }), _jsx("line", { x1: "8", y1: "11.5", x2: "8", y2: "15" }), _jsx("line", { x1: "6.25", y1: "13.25", x2: "9.75", y2: "13.25" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Delete row", onClick: () => tiptapEditor.chain().focus().deleteRow().run(), "aria-label": "Delete row", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "4", width: "14", height: "8", rx: "1" }), _jsx("line", { x1: "5.5", y1: "6", x2: "10.5", y2: "10" }), _jsx("line", { x1: "10.5", y1: "6", x2: "5.5", y2: "10" })] }) }), _jsx("button", { className: "squisq-toolbar-button squisq-toolbar-button--danger", "data-tooltip": "Delete table", onClick: () => tiptapEditor.chain().focus().deleteTable().run(), "aria-label": "Delete table", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "1", width: "14", height: "14", rx: "1" }), _jsx("line", { x1: "1", y1: "5.5", x2: "15", y2: "5.5" }), _jsx("line", { x1: "5.5", y1: "1", x2: "5.5", y2: "15" }), _jsx("line", { x1: "4.5", y1: "4.5", x2: "11.5", y2: "11.5", strokeWidth: "2" }), _jsx("line", { x1: "11.5", y1: "4.5", x2: "4.5", y2: "11.5", strokeWidth: "2" })] }) })] })] }))] })), !isPreview && !isCodeMode && overflowIndex !== null && (_jsxs("div", { className: "squisq-toolbar-overflow", ref: overflowRef, children: [_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-overflow-trigger${showOverflow ? ' squisq-toolbar-button--active' : ''}`, "data-tooltip": "More actions", onClick: () => setShowOverflow((v) => !v), "aria-label": "More actions", "aria-expanded": showOverflow, children: "\u00B7\u00B7\u00B7" }), showOverflow && (_jsxs("div", { className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`, children: [BUTTONS.slice(overflowIndex).map((btn) => {
-                                const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+                                return (_jsx("button", { ref: btn.id === 'emoji' ? emojiButtonRef : undefined, className: `squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`, "data-tooltip": disabled ? 'Insert image (requires media provider)' : btn.title, onClick: () => handleAction(btn.id), "aria-label": btn.title, "aria-pressed": active, disabled: disabled, style: btn.iconStyle, children: buttonIconSvg(btn.id) ?? btn.icon }, btn.id));
+                            })] }, group))), currentTemplate !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsx("div", { className: "squisq-toolbar-group squisq-template-picker", children: _jsx(TemplatePicker, { value: currentTemplate, onChange: handleTemplatePick, recommended: recommendedTemplates }) })] })), isInTable && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsxs("div", { className: "squisq-toolbar-group squisq-table-controls", children: [_jsx("span", { className: "squisq-table-controls-label", children: "Table:" }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add column before", onClick: () => tiptapEditor.chain().focus().addColumnBefore().run(), "aria-label": "Add column before", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "7", y: "2", width: "8", height: "12", rx: "1" }), _jsx("line", { x1: "11", y1: "2", x2: "11", y2: "14" }), _jsx("line", { x1: "1", y1: "8", x2: "4.5", y2: "8" }), _jsx("line", { x1: "2.75", y1: "6.25", x2: "2.75", y2: "9.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add column after", onClick: () => tiptapEditor.chain().focus().addColumnAfter().run(), "aria-label": "Add column after", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "2", width: "8", height: "12", rx: "1" }), _jsx("line", { x1: "5", y1: "2", x2: "5", y2: "14" }), _jsx("line", { x1: "11.5", y1: "8", x2: "15", y2: "8" }), _jsx("line", { x1: "13.25", y1: "6.25", x2: "13.25", y2: "9.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Delete column", onClick: () => tiptapEditor.chain().focus().deleteColumn().run(), "aria-label": "Delete column", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "4", y: "1", width: "8", height: "14", rx: "1" }), _jsx("line", { x1: "6", y1: "5.5", x2: "10", y2: "10.5" }), _jsx("line", { x1: "10", y1: "5.5", x2: "6", y2: "10.5" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add row above", onClick: () => tiptapEditor.chain().focus().addRowBefore().run(), "aria-label": "Add row above", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "2", y: "6", width: "12", height: "9", rx: "1" }), _jsx("line", { x1: "2", y1: "10.5", x2: "14", y2: "10.5" }), _jsx("line", { x1: "8", y1: "1", x2: "8", y2: "4.5" }), _jsx("line", { x1: "6.25", y1: "2.75", x2: "9.75", y2: "2.75" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Add row below", onClick: () => tiptapEditor.chain().focus().addRowAfter().run(), "aria-label": "Add row below", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "2", y: "1", width: "12", height: "9", rx: "1" }), _jsx("line", { x1: "2", y1: "5.5", x2: "14", y2: "5.5" }), _jsx("line", { x1: "8", y1: "11.5", x2: "8", y2: "15" }), _jsx("line", { x1: "6.25", y1: "13.25", x2: "9.75", y2: "13.25" })] }) }), _jsx("button", { className: "squisq-toolbar-button", "data-tooltip": "Delete row", onClick: () => tiptapEditor.chain().focus().deleteRow().run(), "aria-label": "Delete row", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "4", width: "14", height: "8", rx: "1" }), _jsx("line", { x1: "5.5", y1: "6", x2: "10.5", y2: "10" }), _jsx("line", { x1: "10.5", y1: "6", x2: "5.5", y2: "10" })] }) }), _jsx("button", { className: "squisq-toolbar-button squisq-toolbar-button--danger", "data-tooltip": "Delete table", onClick: () => tiptapEditor.chain().focus().deleteTable().run(), "aria-label": "Delete table", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "1", width: "14", height: "14", rx: "1" }), _jsx("line", { x1: "1", y1: "5.5", x2: "15", y2: "5.5" }), _jsx("line", { x1: "5.5", y1: "1", x2: "5.5", y2: "15" }), _jsx("line", { x1: "4.5", y1: "4.5", x2: "11.5", y2: "11.5", strokeWidth: "2" }), _jsx("line", { x1: "11.5", y1: "4.5", x2: "4.5", y2: "11.5", strokeWidth: "2" })] }) })] })] }))] })), !isPreview && !isCodeMode && overflowIndex !== null && (_jsxs("div", { className: "squisq-toolbar-overflow", ref: overflowRef, children: [_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-overflow-trigger${showOverflow ? ' squisq-toolbar-button--active' : ''}`, "data-tooltip": "More actions", onClick: () => setShowOverflow((v) => !v), "aria-label": "More actions", "aria-expanded": showOverflow, children: "\u00B7\u00B7\u00B7" }), showOverflow && (_jsxs("div", { className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`, children: [BUTTONS.slice(overflowIndex)
+                                .filter((b) => isButtonVisible(b.id))
+                                .map((btn) => {
+                                const active = btn.id === 'emoji'
+                                    ? emojiPickerAnchor !== null
+                                    : isWysiwyg
+                                        ? isTiptapActive(tiptapEditor, btn.id)
+                                        : false;
                                 const disabled = btn.id === 'image' && !mediaProvider;
-                                return (_jsxs("button", { className: `squisq-toolbar-overflow-item${active ? ' squisq-toolbar-overflow-item--active' : ''}`, onClick: () => {
+                                return (_jsxs("button", { ref: btn.id === 'emoji' ? emojiButtonRef : undefined, className: `squisq-toolbar-overflow-item${active ? ' squisq-toolbar-overflow-item--active' : ''}`, onClick: () => {
                                         handleAction(btn.id);
-                                        setShowOverflow(false);
-                                    }, disabled: disabled, children: [btn.id === 'table' ? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", children: [_jsx("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1" }), _jsx("line", { x1: "1", y1: "5", x2: "13", y2: "5" }), _jsx("line", { x1: "1", y1: "9", x2: "13", y2: "9" }), _jsx("line", { x1: "5", y1: "1", x2: "5", y2: "13" }), _jsx("line", { x1: "9", y1: "1", x2: "9", y2: "13" })] })) : (_jsx("span", { className: "squisq-toolbar-overflow-icon", style: btn.iconStyle, children: btn.icon })), _jsx("span", { children: btn.title })] }, btn.id));
-                            }), currentTemplate !== null && (_jsxs("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: [_jsx("span", { children: "Template:" }), _jsxs("select", { className: "squisq-template-picker-select", value: currentTemplate, onChange: (e) => {
-                                            handleTemplatePick(e.target.value);
+                                        // Keep the overflow open when opening the emoji
+                                        // picker — otherwise its anchor (the overflow
+                                        // item) unmounts and the popover loses its ref.
+                                        if (btn.id !== 'emoji')
+                                            setShowOverflow(false);
+                                    }, disabled: disabled, children: [buttonIconSvg(btn.id) ?? (_jsx("span", { className: "squisq-toolbar-overflow-icon", style: btn.iconStyle, children: btn.icon })), _jsx("span", { children: btn.title })] }, btn.id));
+                            }), currentTemplate !== null && (_jsxs("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: [_jsx("span", { children: "Template:" }), _jsx(TemplatePicker, { value: currentTemplate, onChange: (v) => {
+                                            handleTemplatePick(v);
                                             setShowOverflow(false);
-                                        }, children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), TEMPLATE_NAMES.map((name) => (_jsx("option", { value: name, children: name }, name)))] })] })), isInTable && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator", style: { margin: '4px 0', width: '100%', height: 1 } }), [
+                                        }, recommended: recommendedTemplates })] })), isInTable && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator", style: { margin: '4px 0', width: '100%', height: 1 } }), [
                                         {
                                             label: 'Add column before',
                                             action: () => tiptapEditor.chain().focus().addColumnBefore().run(),
@@ -521,6 +988,14 @@ export function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAft
                                     ].map((item) => (_jsx("button", { className: `squisq-toolbar-overflow-item${item.label.startsWith('Delete') ? ' squisq-toolbar-overflow-item--danger' : ''}`, onClick: () => {
                                             item.action();
                                             setShowOverflow(false);
-                                        }, children: _jsx("span", { children: item.label }) }, item.label)))] }))] }))] })), slotAfterActions, (isPreview || isNarrow || isCodeMode) && _jsx("div", { style: { flex: 1 } }), onToggleFiles && (_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`, onClick: onToggleFiles, "data-tooltip": showFiles ? 'Hide Files panel' : 'Show Files panel', "aria-pressed": showFiles, "aria-label": "Toggle Files panel", children: '\u{1F4CE}' })), slotRight] }));
+                                        }, children: _jsx("span", { children: item.label }) }, item.label)))] }))] }))] })), slotAfterActions, (isPreview || isNarrow || isCodeMode) && _jsx("div", { style: { flex: 1 } }), versioning && !isCodeMode && _jsx(VersionHistoryPanel, {}), allowRecording && !isCodeMode && mediaProvider && _jsx(RecorderEntry, {}), !isCodeMode && (_jsx("button", { type: "button", className: "squisq-toolbar-button", onClick: () => setShowDocSettings(true), "data-tooltip": "Document settings", "aria-label": "Document settings", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M3 2.5h7l3 3v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }), _jsx("path", { d: "M10 2.5v3h3", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }), _jsx("path", { d: "M5 8.5h6M5 11h4", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })] }) })), !isCodeMode && _jsx(ViewMenuPanel, {}), onToggleFiles && (_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`, onClick: onToggleFiles, "data-tooltip": showFiles ? 'Hide Files panel' : 'Show Files panel', "aria-pressed": showFiles, "aria-label": "Toggle Files panel", children: PAPERCLIP_ICON })), slotRight, showDocSettings && (_jsx(DocumentSettingsDialog, { markdownSource: markdownSource, onSave: (next) => {
+                    setMarkdownSource(next);
+                    setShowDocSettings(false);
+                }, onClose: () => setShowDocSettings(false) })), linkDialog && (_jsx(LinkDialog, { mode: linkDialog.mode, initialText: linkDialog.initialText, initialUrl: linkDialog.initialUrl, onConfirm: handleLinkConfirm, onClose: () => setLinkDialog(null), documentLinkProvider: documentLinkProvider })), emojiPickerAnchor &&
+                createPortal(_jsx(EmojiPicker, { open: true, onSelect: handleEmojiSelect, onClose: closeEmojiPicker, anchorRef: emojiButtonRef, theme: theme === 'dark' ? 'dark' : 'light', style: {
+                        position: 'fixed',
+                        top: emojiPickerAnchor.top,
+                        left: emojiPickerAnchor.left,
+                    } }), document.body)] }));
 }
 //# sourceMappingURL=Toolbar.js.map