@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/Toolbar.tsx

@@ -52,6 +52,27 @@ import type { PickerEntry } from './emojiData';
 import { createPortal } from 'react-dom';
 import { PreviewModeMenu, displayModeLabel, usePreviewSettingsOptional } from './PreviewControls';
 import { filterVisibleMediaEntries } from './mediaEntries';
+import {
+  selectionToTable,
+  selectionToTableMarkdown,
+  selectionToTaskItems,
+  selectionToTaskListMarkdown,
+  type SelectionTaskItem,
+} from './selectionConversions';
+import { isMarkdownFencedCodeLine, markdownFencedCodeLineMask } from './markdownCodeFence';
+import {
+  CODE_SNIPPET_LANGUAGES,
+  codeSnippetMarkdown,
+  type CodeSnippetLanguage,
+} from './codeSnippet/codeSnippetLanguages';
+import {
+  DEFAULT_MERMAID_DIAGRAM_TYPE,
+  MERMAID_DIAGRAM_TYPES,
+  mermaidDiagramMarkdown,
+  type MermaidDiagramType,
+} from './mermaid/mermaidDiagramTypes';
+import { MermaidDiagramTypeThumbnail } from './mermaid/MermaidDiagramTypeThumbnail';
+import { FindToolbar } from './find/FindToolbar';
 
 const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
   { id: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
@@ -221,6 +242,14 @@ const BUTTONS: ToolbarButton[] = [
     group: 'media',
     faIcon: 'fa-solid fa-diagram-project',
   },
+  {
+    id: 'complexdiagram',
+    label: 'complex diagram',
+    icon: '',
+    title: 'Insert Complex Diagram (Mermaid)',
+    group: 'media',
+    faIcon: 'fa-solid fa-code-branch',
+  },
   {
     id: 'tree',
     label: 'tree',
@@ -273,7 +302,10 @@ const BUTTONS: ToolbarButton[] = [
 
 const FIRST_MEDIA_INDEX = BUTTONS.findIndex((b) => b.group === 'media');
 const MEDIA_BUTTONS = BUTTONS.filter((b) => b.group === 'media');
+const CONVERT_BUTTONS = MEDIA_BUTTONS.filter((b) => b.id === 'table' || b.id === 'tasklist');
 const INSERT_MENU_WIDTH = 200;
+const CODE_SNIPPET_MENU_WIDTH = 220;
+const MERMAID_TYPE_MENU_WIDTH = 520;
 const TASK_LIST_ITEMS = ['Task 1', 'Task 2', 'Task 3'] as const;
 const TASK_LIST_MARKDOWN = TASK_LIST_ITEMS.map((item) => `- [ ] ${item}`).join('\n');
 
@@ -297,18 +329,35 @@ function fileCountBadge(count: number): string {
   return count > 99 ? '99+' : String(count);
 }
 
-function taskListContent(): JSONContent {
+function paragraphContent(text: string): JSONContent {
+  return text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' };
+}
+
+function tableContent(rows: string[][]): JSONContent {
+  return {
+    type: 'table',
+    content: rows.map((row, rowIndex) => ({
+      type: 'tableRow',
+      content: row.map((cell) => ({
+        type: rowIndex === 0 ? 'tableHeader' : 'tableCell',
+        content: [paragraphContent(cell)],
+      })),
+    })),
+  };
+}
+
+function taskListContent(
+  items: readonly SelectionTaskItem[] = TASK_LIST_ITEMS.map((text) => ({
+    checked: false,
+    text,
+  })),
+): JSONContent {
   return {
     type: 'taskList',
-    content: TASK_LIST_ITEMS.map((item) => ({
+    content: items.map((item) => ({
       type: 'taskItem',
-      attrs: { checked: false },
-      content: [
-        {
-          type: 'paragraph',
-          content: [{ type: 'text', text: item }],
-        },
-      ],
+      attrs: { checked: item.checked },
+      content: [paragraphContent(item.text)],
     })),
   };
 }
@@ -319,6 +368,26 @@ function insertTaskList(editor: TiptapEditor): void {
   editor.chain().focus().insertContent(content).run();
 }
 
+/**
+ * Expand a full-line Tiptap text selection to the surrounding top-level node
+ * boundaries. Inserting a list/table at an in-paragraph range makes
+ * ProseMirror preserve the emptied paragraph before or after the new block.
+ * Partial-line selections deliberately retain their exact range.
+ */
+function blockConversionRange(editor: TiptapEditor): { from: number; to: number } {
+  const { from, to, $from, $to } = editor.state.selection;
+  return {
+    from:
+      $from.depth === 1 && $from.parent.isTextblock && $from.parentOffset === 0
+        ? $from.before(1)
+        : from,
+    to:
+      $to.depth === 1 && $to.parent.isTextblock && $to.parentOffset === $to.parent.content.size
+        ? $to.after(1)
+        : to,
+  };
+}
+
 // ─── Tiptap active-state map ────────────────────────────
 
 /** Returns true if the given button id is currently active in Tiptap */
@@ -377,17 +446,23 @@ const LAYOUT_STARTER_MARKDOWN = `\n## Layout {[layout]}\n\n### {#text-1} {[text
  * fences (the fence is the source of truth; `AsciiDiagramExtension` mounts
  * the interactive canvas over it). This exact art is the codec's own
  * canonical rendering of a two-node flow, so it re-parses and re-renders
- * byte-stably.
+ * byte-stably. The leading rows/columns are deliberate: ASCII has no
+ * separate canvas-origin metadata, so this persisted gutter gives the first
+ * node real grid space to move north/west. Without it, content-fit makes the
+ * node look centered while its authored coordinate is still (0, 0), and a
+ * drag into the apparent margin clamps straight back to that corner.
  */
 const DIAGRAM_STARTER_ART = [
-  '┌─────────┐',
-  '│  Start  │',
-  '└────┬────┘',
-  '     │',
-  '     ▼',
-  '┌────┴────┐',
-  '│  Next   │',
-  '└─────────┘',
+  '',
+  '',
+  '        ┌─────────┐',
+  '        │  Start  │',
+  '        └────┬────┘',
+  '             │',
+  '             ▼',
+  '        ┌────┴────┐',
+  '        │  Next   │',
+  '        └─────────┘',
 ].join('\n');
 /**
  * Fenced form for raw / code views — tagged with the explicit `diagram`
@@ -401,6 +476,15 @@ function insertAsciiDiagramBlock(editor: TiptapEditor): void {
   insertFenceBlock(editor, DIAGRAM_STARTER_ART, 'diagram');
 }
 
+/** Default source for callers that invoke the legacy single-click action. */
+const MERMAID_STARTER_ART = DEFAULT_MERMAID_DIAGRAM_TYPE.starter;
+const MERMAID_STARTER_MARKDOWN = mermaidDiagramMarkdown(MERMAID_STARTER_ART);
+
+/** Insert a Mermaid fence that MermaidDiagramExtension turns into the complex canvas. */
+function insertMermaidDiagramBlock(editor: TiptapEditor, source = MERMAID_STARTER_ART): void {
+  insertFenceBlock(editor, source, 'mermaid');
+}
+
 /**
  * Starter art for a new file tree — an ASCII tree fence (the fence is the
  * source of truth; `TreeViewExtension` mounts the interactive outline).
@@ -586,6 +670,8 @@ export function Toolbar({
     activeSceneText,
     mediaProvider,
     editorMode,
+    findMode,
+    setFindMode,
     layoutMode,
     activeBlockStartLine,
     versioning,
@@ -693,9 +779,19 @@ export function Toolbar({
   // buttons with a single "+" button. Portaled out to avoid overflow:hidden clipping.
   const insertMenuButtonRef = useRef<HTMLButtonElement | null>(null);
   const insertMenuRef = useRef<HTMLDivElement | null>(null);
+  const codeSnippetMenuRef = useRef<HTMLDivElement | null>(null);
+  const mermaidTypeMenuRef = useRef<HTMLDivElement | null>(null);
   const [insertMenuAnchor, setInsertMenuAnchor] = useState<{ top: number; left: number } | null>(
     null,
   );
+  const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
 
   const openInsertMenu = useCallback((trigger?: HTMLElement | null) => {
     const btn = trigger ?? insertMenuButtonRef.current;
@@ -709,9 +805,47 @@ export function Toolbar({
       left = Math.max(margin, rect.right - INSERT_MENU_WIDTH);
     }
     setInsertMenuAnchor({ top: rect.bottom + gap, left });
+    setCodeSnippetMenuAnchor(null);
+    setMermaidTypeMenuAnchor(null);
+  }, []);
+
+  const openCodeSnippetMenu = useCallback((trigger: HTMLElement) => {
+    const rect = trigger.getBoundingClientRect();
+    const gap = 4;
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = rect.right + gap;
+    if (left + CODE_SNIPPET_MENU_WIDTH + margin > vw) {
+      left = Math.max(margin, rect.left - CODE_SNIPPET_MENU_WIDTH - gap);
+    }
+    const maxMenuHeight = Math.min(440, vh - margin * 2);
+    const top = Math.max(margin, Math.min(rect.top, vh - maxMenuHeight - margin));
+    setCodeSnippetMenuAnchor({ top, left });
+    setMermaidTypeMenuAnchor(null);
+  }, []);
+
+  const openMermaidTypeMenu = useCallback((trigger: HTMLElement) => {
+    const rect = trigger.getBoundingClientRect();
+    const gap = 4;
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = rect.right + gap;
+    if (left + MERMAID_TYPE_MENU_WIDTH + margin > vw) {
+      left = Math.max(margin, rect.left - MERMAID_TYPE_MENU_WIDTH - gap);
+    }
+    const maxMenuHeight = Math.min(600, vh - margin * 2);
+    const top = Math.max(margin, Math.min(rect.top, vh - maxMenuHeight - margin));
+    setMermaidTypeMenuAnchor({ top, left });
+    setCodeSnippetMenuAnchor(null);
   }, []);
 
-  const closeInsertMenu = useCallback(() => setInsertMenuAnchor(null), []);
+  const closeInsertMenu = useCallback(() => {
+    setInsertMenuAnchor(null);
+    setCodeSnippetMenuAnchor(null);
+    setMermaidTypeMenuAnchor(null);
+  }, []);
 
   // ── Overflow detection ────────────────────────────────
   const actionsRef = useRef<HTMLDivElement>(null);
@@ -730,6 +864,13 @@ export function Toolbar({
   // Custom layout manager dialog (list of doc/library layouts + designer)
   const [showLayoutManager, setShowLayoutManager] = useState(false);
 
+  useEffect(() => {
+    if (!findMode) return;
+    setShowOverflow(false);
+    closeInsertMenu();
+    closeEmojiPicker();
+  }, [closeEmojiPicker, closeInsertMenu, findMode]);
+
   const overflowIndex = measuredOverflowIndex;
   const clippedContextual = new Set(clippedContextualKey ? clippedContextualKey.split('|') : []);
 
@@ -823,6 +964,8 @@ export function Toolbar({
     const handleClick = (e: MouseEvent) => {
       if (insertMenuButtonRef.current?.contains(e.target as Node)) return;
       if (insertMenuRef.current?.contains(e.target as Node)) return;
+      if (codeSnippetMenuRef.current?.contains(e.target as Node)) return;
+      if (mermaidTypeMenuRef.current?.contains(e.target as Node)) return;
       closeInsertMenu();
     };
     document.addEventListener('mousedown', handleClick);
@@ -953,6 +1096,11 @@ export function Toolbar({
           // mounts the interactive canvas over the inserted starter.
           insertAsciiDiagramBlock(tiptapEditor);
           break;
+        case 'complexdiagram':
+          // Complex diagrams remain full Mermaid source; the Mermaid extension
+          // renders the fence without narrowing it to Squisq's graph model.
+          insertMermaidDiagramBlock(tiptapEditor);
+          break;
         case 'tree':
           // File trees are ASCII tree fences; TreeViewExtension mounts the
           // interactive outline over the inserted starter.
@@ -1124,6 +1272,11 @@ export function Toolbar({
             newCursorOffset = replacement.length;
             break;
           }
+          case 'complexdiagram': {
+            replacement = MERMAID_STARTER_MARKDOWN;
+            newCursorOffset = replacement.length;
+            break;
+          }
           case 'tree': {
             replacement = TREE_STARTER_MARKDOWN;
             newCursorOffset = replacement.length;
@@ -1214,6 +1367,9 @@ export function Toolbar({
           case 'diagram':
             insertion = DIAGRAM_STARTER_MARKDOWN;
             break;
+          case 'complexdiagram':
+            insertion = MERMAID_STARTER_MARKDOWN;
+            break;
           case 'tree':
             insertion = TREE_STARTER_MARKDOWN;
             break;
@@ -1235,6 +1391,137 @@ export function Toolbar({
     [monacoEditor, markdownSource, setMarkdownSource],
   );
 
+  const handleCodeSnippetInsert = useCallback(
+    (language: CodeSnippetLanguage) => {
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        insertFenceBlock(tiptapEditor, language.starter, language.fenceLanguage);
+        closeInsertMenu();
+        return;
+      }
+
+      if (monacoEditor) {
+        const selection = monacoEditor.getSelection();
+        const model = monacoEditor.getModel();
+        if (!selection || !model) return;
+        const selectedText = model.getValueInRange(selection);
+        const source = selectedText.length > 0 ? selectedText : language.starter;
+        const markdown = codeSnippetMarkdown(language.fenceLanguage, source);
+        monacoEditor.executeEdits('toolbar-code-snippet', [{ range: selection, text: markdown }]);
+        if (selectedText.length === 0) {
+          const sourceOffset = 5 + language.fenceLanguage.length;
+          const sourcePosition = model.getPositionAt(
+            model.getOffsetAt(selection.getStartPosition()) + sourceOffset,
+          );
+          monacoEditor.setPosition(sourcePosition);
+          monacoEditor.revealPositionInCenterIfOutsideViewport(sourcePosition);
+        }
+        monacoEditor.focus();
+        closeInsertMenu();
+        return;
+      }
+
+      setMarkdownSource(
+        markdownSource + codeSnippetMarkdown(language.fenceLanguage, language.starter),
+      );
+      closeInsertMenu();
+    },
+    [activeView, closeInsertMenu, markdownSource, monacoEditor, setMarkdownSource, tiptapEditor],
+  );
+
+  // ── Selected-text conversion handlers ─────────────────
+  const handleMermaidDiagramInsert = useCallback(
+    (diagramType: MermaidDiagramType) => {
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        insertMermaidDiagramBlock(tiptapEditor, diagramType.starter);
+        closeInsertMenu();
+        return;
+      }
+
+      const markdown = mermaidDiagramMarkdown(diagramType.starter);
+      if (monacoEditor) {
+        const selection = monacoEditor.getSelection();
+        const model = monacoEditor.getModel();
+        if (!selection || !model) return;
+        monacoEditor.executeEdits('toolbar-mermaid-diagram', [
+          { range: selection, text: markdown },
+        ]);
+        const endPosition = model.getPositionAt(
+          model.getOffsetAt(selection.getStartPosition()) + markdown.length,
+        );
+        monacoEditor.setPosition(endPosition);
+        monacoEditor.revealPositionInCenterIfOutsideViewport(endPosition);
+        monacoEditor.focus();
+        closeInsertMenu();
+        return;
+      }
+
+      setMarkdownSource(markdownSource + markdown);
+      closeInsertMenu();
+    },
+    [activeView, closeInsertMenu, markdownSource, monacoEditor, setMarkdownSource, tiptapEditor],
+  );
+
+  const readSelectedText = useCallback((): string => {
+    // Canvas text overlays intentionally have a smaller schema without tables
+    // or task lists. Ignore their selection instead of surfacing actions that
+    // cannot be represented by those layers.
+    if (activeSceneText) return '';
+
+    if (activeView === 'wysiwyg' && tiptapEditor) {
+      const { from, to, empty } = tiptapEditor.state.selection;
+      return empty ? '' : tiptapEditor.state.doc.textBetween(from, to, '\n');
+    }
+
+    if (activeView === 'raw' && monacoEditor) {
+      const selection = monacoEditor.getSelection();
+      const model = monacoEditor.getModel();
+      return selection && model ? model.getValueInRange(selection) : '';
+    }
+
+    return '';
+  }, [activeSceneText, activeView, monacoEditor, tiptapEditor]);
+
+  const handleConvertSelection = useCallback(
+    (target: 'table' | 'tasklist') => {
+      const selectedText = readSelectedText();
+      if (!selectedText.trim()) return;
+
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        const content =
+          target === 'table'
+            ? tableContent(selectionToTable(selectedText).rows)
+            : taskListContent(selectionToTaskItems(selectedText));
+        tiptapEditor
+          .chain()
+          .focus()
+          .insertContentAt(blockConversionRange(tiptapEditor), content)
+          .run();
+        return;
+      }
+
+      if (activeView === 'raw' && monacoEditor) {
+        const selection = monacoEditor.getSelection();
+        if (!selection) return;
+        const converted =
+          target === 'table'
+            ? selectionToTableMarkdown(selectedText)
+            : selectionToTaskListMarkdown(selectedText);
+        if (!converted) return;
+
+        // Monaco line selections commonly include the newline after the last
+        // selected line. Retain selected edge newlines so the replacement
+        // block never runs into the surrounding Markdown.
+        const leadingNewline = /^(?:\r?\n)/.test(selectedText) ? '\n' : '';
+        const trailingNewline = /(?:\r?\n)$/.test(selectedText) ? '\n' : '';
+        monacoEditor.executeEdits('toolbar-convert-selection', [
+          { range: selection, text: leadingNewline + converted + trailingNewline },
+        ]);
+        monacoEditor.focus();
+      }
+    },
+    [activeView, monacoEditor, readSelectedText, tiptapEditor],
+  );
+
   // ── Image upload handler ───────────────────────────────
   const handleImageFile = useCallback(
     async (file: File) => {
@@ -1471,6 +1758,10 @@ export function Toolbar({
     if (sceneTextLevel === 'block') return BLOCK_SCENE_BUTTONS.has(id);
     return INLINE_SCENE_BUTTONS.has(id);
   };
+  const showConvertActions =
+    insertMenuAnchor !== null &&
+    readSelectedText().trim().length > 0 &&
+    CONVERT_BUTTONS.some((button) => buttonAllowed(button.id));
 
   // ── Progressive heading disclosure ───────────────────
   // H1\u2013H3 are always visible. H4 appears once the document already
@@ -1480,14 +1771,12 @@ export function Toolbar({
   const maxHeadingLevelInDoc = useMemo(() => {
     if (!markdownSource) return 0;
     let max = 0;
-    let inFence = false;
-    for (const rawLine of markdownSource.split('\n')) {
+    const lines = markdownSource.split(/\r\n|\r|\n/);
+    const fencedLines = markdownFencedCodeLineMask(markdownSource);
+    for (let index = 0; index < lines.length; index++) {
+      if (fencedLines[index]) continue;
+      const rawLine = lines[index];
       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;
     }
@@ -1538,6 +1827,12 @@ export function Toolbar({
         setRawTransition(EMPTY_TRANSITION);
         return;
       }
+      if (isMarkdownFencedCodeLine(model.getValue(), pos.lineNumber)) {
+        setRawTemplate(null);
+        setRawHeadingLine(null);
+        setRawTransition(EMPTY_TRANSITION);
+        return;
+      }
       const line = model.getLineContent(pos.lineNumber);
       const headingMatch = line.match(/^#{1,6}\s+(.+)$/);
       if (!headingMatch) {
@@ -1677,6 +1972,7 @@ export function Toolbar({
       const model = monacoEditor.getModel();
       const pos = monacoEditor.getPosition();
       if (!model || !pos) return;
+      if (isMarkdownFencedCodeLine(model.getValue(), pos.lineNumber)) return;
       const lineNumber = pos.lineNumber;
       const lineText = model.getLineContent(lineNumber);
       const headingMatch = lineText.match(/^(#{1,6}\s+)(.+)$/);
@@ -1741,6 +2037,7 @@ export function Toolbar({
       const model = monacoEditor.getModel();
       const pos = monacoEditor.getPosition();
       if (!model || !pos) return;
+      if (isMarkdownFencedCodeLine(model.getValue(), pos.lineNumber)) return;
       const lineNumber = pos.lineNumber;
       const lineText = model.getLineContent(lineNumber);
       const newLine = setHeadingLineTransition(lineText, next);
@@ -1788,12 +2085,17 @@ export function Toolbar({
     currentTransition !== null && clippedContextual.has('transition');
   const showBlockSectionInOverflow = showTemplateInOverflow || showTransitionInOverflow;
   const overflowBlockLabel = currentTemplate ? templateLabel(currentTemplate) : 'Heading';
+  const showToolbarOverflow =
+    !findMode &&
+    !isPreview &&
+    !isCodeMode &&
+    (overflowIndex !== null || clippedContextual.size > 0);
 
   return (
     <div
-      className={`squisq-toolbar ${className || ''}`}
+      className={`squisq-toolbar${findMode ? ' squisq-toolbar--find' : ''} ${className || ''}`}
       role="toolbar"
-      aria-label="Formatting toolbar"
+      aria-label={findMode ? 'Find toolbar' : 'Formatting toolbar'}
     >
       {/* Hidden file input for image picker */}
       <input
@@ -1809,7 +2111,7 @@ export function Toolbar({
         }}
       />
       {/* Left slot — before view tabs */}
-      {slotLeft}
+      {!findMode && slotLeft}
       {/* View tabs — hidden when only one view is available (e.g. code mode). */}
       {showViewTabs && (
         <div className="squisq-toolbar-view-tabs" role="tablist" aria-label="Editor view">
@@ -1872,9 +2174,9 @@ export function Toolbar({
         </div>
       )}
       {/* After-tabs slot — left side, before formatting or preview controls. */}
-      {slotAfterTabs}
+      {findMode ? <FindToolbar onClose={() => setFindMode(false)} /> : slotAfterTabs}
       {/* Formatting buttons — hidden in preview mode and code mode */}
-      {!isPreview && !isCodeMode && (
+      {!findMode && !isPreview && !isCodeMode && (
         <div className="squisq-toolbar-actions" ref={actionsRef}>
           {groups.map((group, gi) => (
             <div key={group} className="squisq-toolbar-group">
@@ -2125,7 +2427,7 @@ export function Toolbar({
       {/* Overflow menu — outside the overflow:hidden actions container.
           Also appears when a contextual group (template/transition picker,
           table controls) is clipped, even if every plain button fits. */}
-      {!isPreview && !isCodeMode && (overflowIndex !== null || clippedContextual.size > 0) && (
+      {showToolbarOverflow && (
         <div className="squisq-toolbar-overflow" ref={overflowRef}>
           <button
             className={`squisq-toolbar-button squisq-toolbar-overflow-trigger${showOverflow ? ' squisq-toolbar-button--active' : ''}`}
@@ -2295,13 +2597,13 @@ export function Toolbar({
       )}
 
       {/* After-actions slot — after formatting controls */}
-      {slotAfterActions}
+      {!findMode && slotAfterActions}
       {/* Spacer — pushes right-side items to the end when the flex:1 actions
           container isn't rendered. In preview mode PreviewToolbarControls
           supplies its own flex:1 filler (and measures that leftover width to
           decide whether to collapse), so a second spacer here would split the
           slack and make the controls collapse too early. */}
-      {isCodeMode && <div style={{ flex: 1 }} />}
+      {isCodeMode && !findMode && <div style={{ flex: 1 }} />}
       {/* Version history — renders only when the host enabled versioning
           and a container is wired up. The component owns its own button
           and popover; we just give it a slot in the toolbar. */}
@@ -2392,28 +2694,169 @@ export function Toolbar({
             style={{ position: 'fixed', top: insertMenuAnchor.top, left: insertMenuAnchor.left }}
             role="menu"
           >
-            <div className="squisq-insert-menu-header">Insert</div>
+            {showConvertActions && (
+              <>
+                <div className="squisq-insert-menu-header">Convert</div>
+                {CONVERT_BUTTONS.map((btn) => {
+                  const label = btn.id === 'table' ? 'Table' : 'Task List';
+                  return (
+                    <button
+                      key={`convert-${btn.id}`}
+                      className="squisq-toolbar-overflow-item"
+                      disabled={!buttonAllowed(btn.id)}
+                      onClick={() => {
+                        handleConvertSelection(btn.id as 'table' | 'tasklist');
+                        closeInsertMenu();
+                      }}
+                      role="menuitem"
+                      aria-label={`Convert selection to ${label}`}
+                    >
+                      <span className="squisq-toolbar-overflow-icon">{buttonIcon(btn)}</span>
+                      <span>{label}</span>
+                    </button>
+                  );
+                })}
+              </>
+            )}
+            <div
+              className={`squisq-insert-menu-header${showConvertActions ? ' squisq-insert-menu-header--separated' : ''}`}
+            >
+              Insert
+            </div>
             {MEDIA_BUTTONS.filter((b) => isButtonVisible(b.id)).map((btn) => {
               const disabled = (btn.id === 'image' && !mediaProvider) || !buttonAllowed(btn.id);
               const stripped = btn.title.replace(/^Insert\s+/i, '');
               const label = stripped.charAt(0).toUpperCase() + stripped.slice(1);
+              const hasMermaidTypeMenu = btn.id === 'complexdiagram';
               return (
                 <button
                   key={btn.id}
                   ref={btn.id === 'emoji' ? emojiButtonRef : undefined}
                   className="squisq-toolbar-overflow-item"
                   disabled={disabled}
-                  onClick={() => {
+                  onClick={(event) => {
+                    if (hasMermaidTypeMenu) {
+                      if (mermaidTypeMenuAnchor) setMermaidTypeMenuAnchor(null);
+                      else openMermaidTypeMenu(event.currentTarget);
+                      return;
+                    }
                     handleAction(btn.id);
                     if (btn.id !== 'emoji') closeInsertMenu();
                   }}
                   role="menuitem"
+                  aria-haspopup={hasMermaidTypeMenu ? 'menu' : undefined}
+                  aria-expanded={hasMermaidTypeMenu ? mermaidTypeMenuAnchor !== null : undefined}
                 >
                   <span className="squisq-toolbar-overflow-icon">{buttonIcon(btn)}</span>
                   <span>{label}</span>
+                  {hasMermaidTypeMenu && <Icon icon="fa-solid fa-chevron-right" />}
                 </button>
               );
             })}
+            <button
+              className="squisq-toolbar-overflow-item"
+              onClick={(event) => {
+                if (codeSnippetMenuAnchor) setCodeSnippetMenuAnchor(null);
+                else openCodeSnippetMenu(event.currentTarget);
+              }}
+              role="menuitem"
+              aria-label="Insert Code Snippet"
+              aria-haspopup="menu"
+              aria-expanded={codeSnippetMenuAnchor !== null}
+            >
+              <span className="squisq-toolbar-overflow-icon">
+                <Icon icon="fa-solid fa-file-code" />
+              </span>
+              <span>Code Snippet</span>
+              <Icon icon="fa-solid fa-chevron-right" />
+            </button>
+          </div>,
+          document.body,
+        )}
+
+      {mermaidTypeMenuAnchor &&
+        createPortal(
+          <div
+            ref={mermaidTypeMenuRef}
+            className="squisq-insert-menu squisq-mermaid-type-menu"
+            data-theme={colorScheme}
+            style={{
+              position: 'fixed',
+              top: mermaidTypeMenuAnchor.top,
+              left: mermaidTypeMenuAnchor.left,
+            }}
+            role="menu"
+            aria-label="Mermaid diagram type"
+          >
+            <div className="squisq-mermaid-type-menu-heading">
+              <strong>Complex Diagram</strong>
+              <span>Choose a Mermaid diagram type. Flow direction remains a separate edit.</span>
+            </div>
+            {(['Structure', 'Planning', 'Data'] as const).map((category) => (
+              <section key={category} className="squisq-mermaid-type-section">
+                <div className="squisq-insert-menu-header">{category}</div>
+                <div className="squisq-mermaid-type-grid">
+                  {MERMAID_DIAGRAM_TYPES.filter((entry) => entry.category === category).map(
+                    (entry) => (
+                      <button
+                        key={entry.id}
+                        type="button"
+                        className="squisq-mermaid-type-card"
+                        onClick={() => handleMermaidDiagramInsert(entry)}
+                        role="menuitem"
+                        aria-label={`Insert ${entry.label} Mermaid diagram`}
+                      >
+                        <span className="squisq-mermaid-type-thumbnail">
+                          <MermaidDiagramTypeThumbnail preview={entry.preview} />
+                        </span>
+                        <span className="squisq-mermaid-type-copy">
+                          <span className="squisq-mermaid-type-title">
+                            {entry.label}
+                            {entry.badge && (
+                              <span className="squisq-mermaid-type-badge">{entry.badge}</span>
+                            )}
+                          </span>
+                          <span className="squisq-mermaid-type-description">
+                            {entry.description}
+                          </span>
+                        </span>
+                      </button>
+                    ),
+                  )}
+                </div>
+              </section>
+            ))}
+          </div>,
+          document.body,
+        )}
+
+      {codeSnippetMenuAnchor &&
+        createPortal(
+          <div
+            ref={codeSnippetMenuRef}
+            className="squisq-insert-menu squisq-code-snippet-menu"
+            data-theme={colorScheme}
+            style={{
+              position: 'fixed',
+              top: codeSnippetMenuAnchor.top,
+              left: codeSnippetMenuAnchor.left,
+            }}
+            role="menu"
+            aria-label="Code snippet language"
+          >
+            <div className="squisq-insert-menu-header">Code Snippet</div>
+            {CODE_SNIPPET_LANGUAGES.map((language) => (
+              <button
+                key={language.fenceLanguage}
+                className="squisq-toolbar-overflow-item squisq-code-snippet-language"
+                onClick={() => handleCodeSnippetInsert(language)}
+                role="menuitem"
+                aria-label={`Insert ${language.label} code snippet`}
+              >
+                <span>{language.label}</span>
+                <code>{language.fenceLanguage}</code>
+              </button>
+            ))}
           </div>,
           document.body,
         )}