@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/src/Toolbar.tsx

@@ -59,6 +59,20 @@ import {
   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' },
@@ -228,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',
@@ -282,6 +304,8 @@ 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');
 
@@ -452,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).
@@ -637,6 +670,8 @@ export function Toolbar({
     activeSceneText,
     mediaProvider,
     editorMode,
+    findMode,
+    setFindMode,
     layoutMode,
     activeBlockStartLine,
     versioning,
@@ -744,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;
@@ -760,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 closeInsertMenu = useCallback(() => setInsertMenuAnchor(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);
+    setCodeSnippetMenuAnchor(null);
+    setMermaidTypeMenuAnchor(null);
+  }, []);
 
   // ── Overflow detection ────────────────────────────────
   const actionsRef = useRef<HTMLDivElement>(null);
@@ -781,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('|') : []);
 
@@ -874,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);
@@ -1004,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.
@@ -1175,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;
@@ -1265,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;
@@ -1286,7 +1391,76 @@ 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
@@ -1597,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;
     }
@@ -1655,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) {
@@ -1794,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+)(.+)$/);
@@ -1858,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);
@@ -1905,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
@@ -1926,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">
@@ -1989,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">
@@ -2242,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' : ''}`}
@@ -2412,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. */}
@@ -2542,23 +2727,136 @@ export function Toolbar({
               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,
         )}

package/src/WysiwygEditor.tsx

@@ -32,6 +32,8 @@ import { AsciiDiagramExtension } from './asciiDiagram/AsciiDiagramExtension';
 import { RepairableDiagramExtension } from './asciiDiagram/RepairableDiagramExtension';
 import { applyRepairCommand } from './asciiDiagram/asciiDiagramCommands';
 import { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste';
+import { MermaidDiagramExtension } from './mermaid/MermaidDiagramExtension';
+import { CodeSnippetExtension } from './codeSnippet/CodeSnippetExtension';
 import { TreeViewExtension } from './treeview/TreeViewExtension';
 import { shouldPasteAsTreeFence } from './treeview/treePaste';
 import { TimelineViewExtension } from './timeline/TimelineViewExtension';
@@ -62,6 +64,8 @@ import { looksLikeMarkdown } from './detectMarkdown';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 import { usePreviewSettingsOptional } from './PreviewControls';
 import { uploadAndInsertImages } from './wysiwygImageUpload';
+import { writeCanvasSettingsStyle, type WriteCanvasSettings } from './writeCanvasSettings';
+import { FindHighlightExtension } from './find/FindHighlightExtension';
 
 type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
 
@@ -71,16 +75,14 @@ type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
  * `placeholder` prop with a fixed string.
  */
 const EMPTY_PROMPTS = [
-  'Start typing your content, or drop images on top of me…',
-  'Write anything — paste markdown, drag in images, or just start typing…',
-  'Type away. Markdown syntax works too…',
-  'Chapter 1 begins here…',
-  'Once upon a time…',
-  'A blank page. Exciting, isn\u2019t it?',
-  'The first word is always the hardest…',
-  'Plot twist: this is where it all starts…',
-  'Write something the future you will thank you for…',
-  'Begin at the beginning…',
+  'Start typing your content, or drop images on top of me...',
+  'Write anything -- paste markdown, drag in images, or just start typing...',
+  'Type away. Markdown syntax works too...',
+  'Chapter 1 begins here...',
+  'Once upon a time...',
+  "A blank page. Exciting, isn't it?",
+  'The first word is always the hardest...',
+  'Plot twist: this is where it all starts...',
 ];
 
 const BLOCK_TAG_DATA_VALUES = {
@@ -109,6 +111,8 @@ export interface WysiwygEditorProps {
   submitOnEnter?: () => void;
   /** Disable Tiptap editing — renders content but blocks input. */
   readOnly?: boolean;
+  /** Host-controlled base text size and line spacing for the Write canvas. */
+  writeCanvasSettings?: WriteCanvasSettings;
 }
 
 /**
@@ -120,6 +124,7 @@ export function WysiwygEditor({
   className,
   submitOnEnter,
   readOnly = false,
+  writeCanvasSettings,
 }: WysiwygEditorProps) {
   const {
     editorSource,
@@ -199,6 +204,8 @@ export function WysiwygEditor({
       HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
       BlockTagActivityExtension,
       AsciiDiagramExtension.configure({ textChannel: sceneTextChannel }),
+      MermaidDiagramExtension,
+      CodeSnippetExtension,
       RepairableDiagramExtension.configure({ onRepair: applyRepairCommand }),
       TimelineViewExtension,
       TreeViewExtension,
@@ -220,6 +227,7 @@ export function WysiwygEditor({
       Placeholder.configure({ placeholder: resolvedPlaceholder }),
       buildMentionExtension(() => mentionProviderRef.current),
       InlineIcon,
+      FindHighlightExtension,
     ],
     content: markdownToTiptap(stripFrontmatter(editorSource).body),
     onUpdate: ({ editor: ed }) => {
@@ -625,7 +633,13 @@ export function WysiwygEditor({
     <CustomTemplateProvider docTemplates={docTemplates} onDocTemplatesChange={onDocTemplatesChange}>
       <div
         className={`squisq-wysiwyg-container${className ? ` ${className}` : ''}`}
-        style={{ width: '100%', height: '100%', overflow: 'auto', ...themeStyle }}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'auto',
+          ...themeStyle,
+          ...writeCanvasSettingsStyle(writeCanvasSettings),
+        }}
         data-testid="wysiwyg-container"
         data-block-tags={BLOCK_TAG_DATA_VALUES[blockTagVisibility]}
         data-theme-inheritance={themeInheritance}

package/src/__tests__/buildPreviewDocContent.test.ts

@@ -45,4 +45,21 @@ describe('buildPreviewDoc content mapping', () => {
       description: 'Pinned description',
     });
   });
+
+  it('keeps Mermaid source available to the slide materializer for every template', () => {
+    const slide = firstPreviewSlide(
+      '# Architecture\n\n```mermaid\nflowchart LR\n  client --> server\n```',
+    );
+    expect(slide.contents).toEqual([expect.objectContaining({ type: 'code', lang: 'mermaid' })]);
+
+    const { layers } = materializeBlockLayers(slide as unknown as DocBlock, {
+      persistentLayers: false,
+    });
+    expect(layers.some((layer) => layer.type === 'mermaid')).toBe(true);
+    const narrativeText = layers
+      .filter((layer): layer is TextLayer => layer.type === 'text')
+      .map((layer) => layer.content.text)
+      .join('\n');
+    expect(narrativeText).not.toContain('flowchart LR');
+  });
 });