@mdzip/editor 1.3.11 → 1.3.13

package/dist/view.js

@@ -2,11 +2,11 @@ import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirro
 import { markdown } from '@codemirror/lang-markdown';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, EditorState } from '@codemirror/state';
-import { EditorView, dropCursor, keymap, lineNumbers } from '@codemirror/view';
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, dropCursor, keymap, lineNumbers } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
-import { Bold, ChevronDown, Code, Columns2, Eye, File, FileBraces, FileImage, Folder, FolderOpen, Hash, Heading1, ImagePlus, Info, Italic, Link2Off, Link, List, ListOrdered, Moon, PanelLeft, Quote, Save, SquarePen, Strikethrough, Sun, ZoomIn } from 'lucide';
+import { Bold, ChevronDown, ChevronRight, ClipboardPaste, ClipboardType, Code, Columns2, Copy, Eraser, Eye, File, FileBraces, FileImage, Folder, FolderOpen, Hash, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImagePlus, Info, Italic, Link2Off, Link, List, ListOrdered, CornerDownLeft, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
-import { MdzipAssetSession, mdzipArchiveSourceId } from './asset-cache.js';
+import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset-cache.js';
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
 import { MDZIP_RUNTIME_LIBRARIES } from './library-info.js';
 import { MdzipWorkspaceService, extensionForMime, normalizeArchivePath, relativeArchivePath } from './workspace.js';
@@ -31,6 +31,7 @@ const ORPHAN_ICON_HTML = lucideIcon(Link2Off, '');
 const SOURCE_EDIT_ICON_HTML = lucideIcon(SquarePen, TOOLBAR_ICON_CLASS);
 const SOURCE_MARKDOWN_ICON_HTML = lucideIcon(Hash, TOOLBAR_ICON_CLASS);
 const NAV_TOGGLE_ICON_HTML = lucideIcon(PanelLeft, `${TOOLBAR_ICON_CLASS} nav-toggle-icon`);
+const CONVERT_TO_MDZ_ICON_HTML = lucideIcon(PackagePlus, `${TOOLBAR_ICON_CLASS} convert-mdz-icon`);
 const PREVIEW_ICON_HTML = lucideIcon(Eye, TOOLBAR_ICON_CLASS);
 const SPLIT_ICON_HTML = lucideIcon(Columns2, TOOLBAR_ICON_CLASS);
 const SAVE_ICON_HTML = lucideIcon(Save, TOOLBAR_ICON_CLASS);
@@ -46,10 +47,91 @@ const BULLET_LIST_ICON_HTML = lucideIcon(List, FORMAT_ICON_CLASS);
 const ORDERED_LIST_ICON_HTML = lucideIcon(ListOrdered, FORMAT_ICON_CLASS);
 const CODE_ICON_HTML = lucideIcon(Code, FORMAT_ICON_CLASS);
 const QUOTE_ICON_HTML = lucideIcon(Quote, FORMAT_ICON_CLASS);
+const LINE_BREAK_ICON_HTML = lucideIcon(CornerDownLeft, FORMAT_ICON_CLASS);
 const LINK_ICON_HTML = lucideIcon(Link, FORMAT_ICON_CLASS);
 const IMAGE_FORMAT_ICON_HTML = lucideIcon(ImagePlus, FORMAT_ICON_CLASS);
 const CHEVRON_ICON_HTML = lucideIcon(ChevronDown, 'format-chevron');
 const INFO_ICON_HTML = lucideIcon(Info, 'document-info-icon');
+// Leading icons for context-menu items (Obsidian-style icon column).
+const MENU_ICON_CLASS = 'nav-menu-icon';
+const MENU_CUT_ICON_HTML = lucideIcon(Scissors, MENU_ICON_CLASS);
+const MENU_COPY_ICON_HTML = lucideIcon(Copy, MENU_ICON_CLASS);
+const MENU_PASTE_ICON_HTML = lucideIcon(ClipboardPaste, MENU_ICON_CLASS);
+const MENU_PASTE_PLAIN_ICON_HTML = lucideIcon(ClipboardType, MENU_ICON_CLASS);
+const MENU_SELECT_ALL_ICON_HTML = lucideIcon(TextSelect, MENU_ICON_CLASS);
+const MENU_BOLD_ICON_HTML = lucideIcon(Bold, MENU_ICON_CLASS);
+const MENU_ITALIC_ICON_HTML = lucideIcon(Italic, MENU_ICON_CLASS);
+const MENU_STRIKE_ICON_HTML = lucideIcon(Strikethrough, MENU_ICON_CLASS);
+const MENU_CODE_ICON_HTML = lucideIcon(Code, MENU_ICON_CLASS);
+const MENU_CODE_BLOCK_ICON_HTML = lucideIcon(SquareCode, MENU_ICON_CLASS);
+const MENU_HIGHLIGHT_ICON_HTML = lucideIcon(Highlighter, MENU_ICON_CLASS);
+const MENU_BULLET_LIST_ICON_HTML = lucideIcon(List, MENU_ICON_CLASS);
+const MENU_ORDERED_LIST_ICON_HTML = lucideIcon(ListOrdered, MENU_ICON_CLASS);
+const MENU_QUOTE_ICON_HTML = lucideIcon(Quote, MENU_ICON_CLASS);
+const MENU_LINE_BREAK_ICON_HTML = lucideIcon(CornerDownLeft, MENU_ICON_CLASS);
+const MENU_IMAGE_ICON_HTML = lucideIcon(ImagePlus, MENU_ICON_CLASS);
+const MENU_LINK_ICON_HTML = lucideIcon(Link, MENU_ICON_CLASS);
+const MENU_CLEAR_FORMAT_ICON_HTML = lucideIcon(Eraser, MENU_ICON_CLASS);
+const MENU_HEADING_PARENT_ICON_HTML = lucideIcon(Heading1, MENU_ICON_CLASS);
+const MENU_PARAGRAPH_ICON_HTML = lucideIcon(Pilcrow, MENU_ICON_CLASS);
+const MENU_CHEVRON_ICON_HTML = lucideIcon(ChevronRight, 'nav-menu-chevron');
+const MENU_HEADING_ICON_HTML = {
+    1: lucideIcon(Heading1, MENU_ICON_CLASS),
+    2: lucideIcon(Heading2, MENU_ICON_CLASS),
+    3: lucideIcon(Heading3, MENU_ICON_CLASS),
+    4: lucideIcon(Heading4, MENU_ICON_CLASS),
+    5: lucideIcon(Heading5, MENU_ICON_CLASS),
+    6: lucideIcon(Heading6, MENU_ICON_CLASS)
+};
+const MENU_SEPARATOR_HTML = '<div class="nav-menu-separator" role="separator"></div>';
+// Matches the submenu `min-width` in the CSS; used to decide left/right flyout.
+const SUBMENU_ESTIMATED_WIDTH = 190;
+// Curated default for the Code Block submenu — a usable subset rather than the
+// full highlight.js language set. Hosts override via `codeBlockLanguages`.
+export const DEFAULT_CODE_BLOCK_LANGUAGES = [
+    { id: '', label: 'Plain Text' },
+    { id: 'typescript', label: 'TypeScript' },
+    { id: 'javascript', label: 'JavaScript' },
+    { id: 'tsx', label: 'TSX / JSX' },
+    { id: 'html', label: 'HTML' },
+    { id: 'css', label: 'CSS' },
+    { id: 'json', label: 'JSON' },
+    { id: 'python', label: 'Python' },
+    { id: 'csharp', label: 'C#' },
+    { id: 'java', label: 'Java' },
+    { id: 'cpp', label: 'C++' },
+    { id: 'go', label: 'Go' },
+    { id: 'rust', label: 'Rust' },
+    { id: 'sql', label: 'SQL' },
+    { id: 'bash', label: 'Shell' },
+    { id: 'yaml', label: 'YAML' },
+    { id: 'markdown', label: 'Markdown' }
+];
+// Recursively renders a context-menu item. An item carrying `submenu` becomes a
+// hover/focus flyout parent (no action of its own); everything else is an
+// actionable `[data-menu-action]` button handled by the shared click delegate.
+function renderContextMenuItem(item) {
+    const icon = item.icon ?? '';
+    const label = `<span class="nav-menu-label">${escapeHtml(item.label)}</span>`;
+    if (item.submenu) {
+        const children = item.submenu
+            .map((child) => (child === null ? MENU_SEPARATOR_HTML : renderContextMenuItem(child)))
+            .join('');
+        return '<div class="nav-menu-submenu-wrap">'
+            + '<button type="button" role="menuitem" aria-haspopup="true" class="nav-menu-parent">'
+            + `${icon}${label}${MENU_CHEVRON_ICON_HTML}</button>`
+            + `<div class="nav-context-submenu" role="menu">${children}</div></div>`;
+    }
+    const shortcut = item.shortcut
+        ? `<span class="nav-menu-shortcut">${escapeHtml(item.shortcut)}</span>`
+        : '';
+    return `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}">${icon}${label}${shortcut}</button>`;
+}
+function renderContextMenuItems(items) {
+    return items
+        .map((item) => (item === null ? MENU_SEPARATOR_HTML : renderContextMenuItem(item)))
+        .join('');
+}
 const ALL_HEADINGS = [1, 2, 3, 4, 5, 6];
 const ALL_LAYOUT_CONTROLS = {
     source: true,
@@ -66,6 +148,7 @@ const ALL_FORMATTING_CONTROLS = {
     inlineCode: true,
     codeBlock: true,
     blockquote: true,
+    lineBreak: true,
     link: true,
     image: true
 };
@@ -79,6 +162,7 @@ const NO_FORMATTING_CONTROLS = {
     inlineCode: false,
     codeBlock: false,
     blockquote: false,
+    lineBreak: false,
     link: false,
     image: false
 };
@@ -228,6 +312,12 @@ function resolveFormattingControls(base, override) {
                     : [...new Set(headings)].filter((level) => ALL_HEADINGS.includes(level)).sort()
     };
 }
+function normalizeToolbarDensity(value) {
+    return value === 'compact' || value === 'dense' ? value : 'comfortable';
+}
+function normalizeContentDensity(value) {
+    return value === 'compact' ? value : 'comfortable';
+}
 const mdzipEditorTheme = EditorView.theme({
     '&': {
         height: '100%',
@@ -242,7 +332,7 @@ const mdzipEditorTheme = EditorView.theme({
         overflow: 'auto',
     },
     '.cm-content': {
-        padding: '36px 48px',
+        padding: 'var(--mdzip-editor-content-padding, var(--mdzip-density-editor-content-padding, 36px 48px))',
         caretColor: 'var(--mdzip-editor-cursor-color)',
         overflowWrap: 'anywhere',
         wordBreak: 'normal',
@@ -273,6 +363,10 @@ const mdzipEditorTheme = EditorView.theme({
     '.cm-activeLineGutter': {
         background: 'transparent',
     },
+    '.mdzip-hard-break-marker': {
+        color: 'var(--mdzip-muted-foreground-color)',
+        opacity: '0.65',
+    },
 });
 const mdzipMarkdownHighlight = HighlightStyle.define([
     { tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
@@ -288,6 +382,22 @@ const mdzipMarkdownHighlight = HighlightStyle.define([
     { tag: tags.contentSeparator, color: '#6a9955' },
     { tag: tags.atom, color: '#d100d1' },
 ]);
+const hardBreakMarkerMatcher = new MatchDecorator({
+    regexp: /<br\s*\/?>/gi,
+    decoration: Decoration.mark({ class: 'mdzip-hard-break-marker' })
+});
+const hardBreakMarkerHighlight = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.decorations = hardBreakMarkerMatcher.createDeco(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged) {
+            this.decorations = hardBreakMarkerMatcher.updateDeco(update, this.decorations);
+        }
+    }
+}, {
+    decorations: value => value.decorations
+});
 function injectStyles(doc) {
     const existing = doc.querySelector(`style[${STYLE_ATTR}]`);
     if (existing) {
@@ -312,7 +422,27 @@ function attributesToHtml(attrs) {
         .map(([key, value]) => ` ${key}="${escapeHtml(String(value))}"`)
         .join('');
 }
-function renderNavNode(node, state, options) {
+// Renders the per-row indent/guide cells: one fixed-width cell per ancestor
+// depth. An ancestor column draws a continuous vertical rail when that folder
+// still has siblings below it (so the spine keeps going), otherwise it is
+// blank. The final cell connects to this row with an elbow (└, last child) or a
+// tee (├). Painting per row at the row's own height means the guides never
+// overshoot an expanded last subfolder the way a single container rail did.
+function renderNavGuides(trail, isLast) {
+    const cells = trail.map((continues) => `<span class="nav-indent${continues ? ' nav-indent-rail' : ''}"></span>`);
+    cells.push(`<span class="nav-indent nav-indent-connector${isLast ? '' : ' nav-indent-continues'}"></span>`);
+    return cells.join('');
+}
+function renderNavNode(node, state, options, 
+// Per-ancestor flags: whether each ancestor column still has a sibling below
+// it (so its rail continues through this row). One entry per guide column
+// above the immediate connector.
+trail = [], 
+// Whether this node is the last among its siblings (elbow vs tee connector).
+isLast = true, 
+// Nesting depth; depth 0 (root entries) draws no guides.
+depth = 0) {
+    const guides = depth === 0 ? '' : renderNavGuides(trail, isLast);
     if (node.entry) {
         const isCurrent = node.entry.path === state.currentPath;
         const isOrphaned = isOrphanedMdzipAsset(node.entry, state);
@@ -348,17 +478,20 @@ function renderNavNode(node, state, options) {
         const draggable = options.allowDrag && !isManifest;
         return `<button type="button" class="${classes}" title="${title}"
       data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
-      <span class="nav-caret"></span>
+      ${guides}<span class="nav-caret"></span>
       <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
       ${orphanBtnHtml}
       <span class="nav-label">${safeName}</span>
     </button>`;
     }
-    const children = node.children.map(c => renderNavNode(c, state, options)).join('');
+    const childTrail = depth === 0 ? [] : [...trail, !isLast];
+    const children = node.children
+        .map((child, index) => renderNavNode(child, state, options, childTrail, index === node.children.length - 1, depth + 1))
+        .join('');
     const pending = options.pendingFolders.has(node.path.toLowerCase());
     return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
     <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
-      <span class="nav-caret" aria-hidden="true"></span>
+      ${guides}<span class="nav-caret" aria-hidden="true"></span>
       <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
       <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
       <span class="nav-label">${escapeHtml(node.name)}</span>
@@ -412,10 +545,16 @@ export class MdzipWorkspaceView {
         this.metadataDialogOpen = false;
         this.titleDraft = '';
         this.conversionAction = null;
+        this.imageInsertDialogState = null;
         this.navPaneWidth = 280;
         this.splitRatio = 0.5;
         this.resizing = false;
-        this.navMenuState = null;
+        // Shared overlay menu state. One menu is open at a time, so a single field
+        // drives both the nav-pane file menu and the editor selection menu; `kind`
+        // selects which item-builder and action-handler run. The editor variant
+        // captures the selection range at open time because clicking a menu item can
+        // move focus/selection before the action reads it.
+        this.contextMenuState = null;
         this.nameDialogState = null;
         this.deleteDialogState = null;
         this.pendingNewFolders = new Set();
@@ -434,6 +573,7 @@ export class MdzipWorkspaceView {
         this.tooltipHideTimer = null;
         this.cmEditor = null;
         this.readOnlyCompartment = new Compartment();
+        this.lineNumbersCompartment = new Compartment();
         this.updatingCm = false;
         this.syncing = false;
         this.markdownExtensions = [];
@@ -458,6 +598,9 @@ export class MdzipWorkspaceView {
         this.options = options;
         this.controlPolicy = resolveMdzipControlPolicy(options.controls);
         this.navigationMode = options.navigationMode ?? 'editor';
+        this.imageHydrationAnimation = options.imageHydrationAnimation ?? 'auto';
+        this.toolbarDensity = options.toolbarDensity ?? 'comfortable';
+        this.contentDensity = options.contentDensity ?? 'comfortable';
         this.layout = options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy);
         this.colorScheme = options.initialColorScheme
             ?? (container.ownerDocument.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
@@ -473,6 +616,7 @@ export class MdzipWorkspaceView {
         container.innerHTML = SHELL_HTML;
         const q = (sel) => container.querySelector(sel);
         this.elRoot = q('.mdzip-root');
+        this.applyDensityClasses();
         this.elDocumentStrip = q('[data-ref="document-strip"]');
         this.elToolbar = q('[data-ref="toolbar"]');
         this.elToolbarLeft = q('.toolbar-left');
@@ -515,6 +659,14 @@ export class MdzipWorkspaceView {
         this.elLibraryList = q('[data-ref="library-list"]');
         this.elConversionDialog = q('[data-ref="conversion-dialog"]');
         this.elConversionConfirmBtn = q('[data-ref="conversion-confirm-btn"]');
+        this.elImageInsertDialog = q('[data-ref="image-insert-dialog"]');
+        this.elImageInsertModeMarkdown = q('[data-ref="image-insert-mode-markdown"]');
+        this.elImageInsertModeHtml = q('[data-ref="image-insert-mode-html"]');
+        this.elImageInsertAltInput = q('[data-ref="image-insert-alt"]');
+        this.elImageInsertSizeModeSelect = q('[data-ref="image-insert-size-mode"]');
+        this.elImageInsertSizeValueInput = q('[data-ref="image-insert-size-value"]');
+        this.elImageInsertPositionSelect = q('[data-ref="image-insert-position"]');
+        this.elImageInsertConfirmBtn = q('[data-ref="image-insert-confirm-btn"]');
         this.elNavMenu = q('[data-ref="nav-menu"]');
         this.elNameDialog = q('[data-ref="name-dialog"]');
         this.elNameDialogHeading = q('[data-ref="name-dialog-heading"]');
@@ -731,12 +883,12 @@ export class MdzipWorkspaceView {
         if (command === 'insert-image') {
             if (this.workspace?.sourceFormat === 'markdown') {
                 this.requestMdzConversion(file
-                    ? { kind: 'image-file', file }
+                    ? { kind: 'image-file', file, source: 'picker' }
                     : { kind: 'image-picker' });
                 return true;
             }
             if (file) {
-                await this.insertImageFile(file);
+                await this.insertImageFile(file, 'picker');
             }
             else {
                 this.elImageInput.click();
@@ -746,6 +898,15 @@ export class MdzipWorkspaceView {
         this.applyMarkdownFormat(command);
         return true;
     }
+    // Backs the editor's formatting keybindings (Mod-b/i/k/e). Returns false when
+    // the command can't run (read-only, non-markdown) so the key passes through.
+    runFormatShortcut(command) {
+        if (!this.canExecuteCommand(command)) {
+            return false;
+        }
+        this.applyMarkdownFormat(command);
+        return true;
+    }
     async convertToMdz() {
         if (!this.workspace || this.workspace.mode === 'read-only') {
             return false;
@@ -765,6 +926,7 @@ export class MdzipWorkspaceView {
     }
     destroy() {
         this.conversionDocumentGeneration += 1;
+        this.resolveImageInsertDialog(null);
         try {
             this.unsub?.();
         }
@@ -811,6 +973,55 @@ export class MdzipWorkspaceView {
         this.entryMatchMissKey = null;
         this.render();
     }
+    /**
+     * Replaces the view control policy without recreating the workspace or
+     * CodeMirror editor. In particular, `lineNumbers` is reconfigured through a
+     * CodeMirror compartment so text, selection, focus, scroll, and undo history
+     * stay intact.
+     */
+    setControls(controls) {
+        const next = resolveMdzipControlPolicy(controls);
+        const lineNumbersChanged = next.lineNumbers !== this.controlPolicy.lineNumbers;
+        this.controlPolicy = next;
+        if (lineNumbersChanged && this.cmEditor) {
+            this.cmEditor.dispatch({
+                effects: this.lineNumbersCompartment.reconfigure(next.lineNumbers ? lineNumbers() : [])
+            });
+        }
+        const snapshot = this.workspace?.snapshot();
+        if (snapshot) {
+            this.layout = this.validLayoutForSnapshot(this.layout, snapshot);
+        }
+        this.render();
+    }
+    setImageHydrationAnimation(animation) {
+        const next = animation ?? 'auto';
+        if (next === this.imageHydrationAnimation) {
+            return;
+        }
+        this.imageHydrationAnimation = next;
+        this.resetPreviewState();
+        this.render();
+    }
+    setDensityOptions(options) {
+        const nextToolbarDensity = normalizeToolbarDensity(options.toolbarDensity);
+        const nextContentDensity = normalizeContentDensity(options.contentDensity);
+        if (nextToolbarDensity === this.toolbarDensity && nextContentDensity === this.contentDensity) {
+            return;
+        }
+        this.toolbarDensity = nextToolbarDensity;
+        this.contentDensity = nextContentDensity;
+        this.applyDensityClasses();
+    }
+    setImageInsertOptions(options) {
+        this.options.imageInsertMode = options.imageInsertMode;
+        this.options.imageInsertHandler = options.imageInsertHandler;
+    }
+    applyDensityClasses() {
+        this.elRoot.classList.remove('toolbar-density-comfortable', 'toolbar-density-compact', 'toolbar-density-dense', 'content-density-comfortable', 'content-density-compact');
+        this.elRoot.classList.add(`toolbar-density-${this.toolbarDensity}`);
+        this.elRoot.classList.add(`content-density-${this.contentDensity}`);
+    }
     /**
      * Tears down all custom rendering state: aborts in-flight renders, destroys
      * mounted extension and entry renderer handles, and clears memo caches.
@@ -868,6 +1079,7 @@ export class MdzipWorkspaceView {
             // mounted extension handles.
             return;
         }
+        const animateImageHydration = this.shouldAnimateImageHydration(memo, snapshot);
         this.previewAbort?.abort();
         this.previewAbort = null;
         this.destroyPreviewHandles();
@@ -916,14 +1128,14 @@ export class MdzipWorkspaceView {
         }
         if (typeof result === 'string') {
             // Sync fast path: no microtask hop when every pipeline stage is sync.
-            this.applyPreviewHtml(result, snapshot, context, generation);
+            this.applyPreviewHtml(result, snapshot, context, generation, animateImageHydration);
             return;
         }
         void result.then((html) => {
             if (generation !== this.previewGeneration || abort.signal.aborted) {
                 return; // Stale: the selection or content moved on while rendering.
             }
-            this.applyPreviewHtml(html, snapshot, context, generation);
+            this.applyPreviewHtml(html, snapshot, context, generation, animateImageHydration);
         }).catch((error) => {
             if (generation !== this.previewGeneration || abort.signal.aborted) {
                 return;
@@ -933,17 +1145,28 @@ export class MdzipWorkspaceView {
             }
         });
     }
-    applyPreviewHtml(html, snapshot, context, generation) {
+    applyPreviewHtml(html, snapshot, context, generation, animateImageHydration) {
         // When the preview references archive images, mount the text immediately
         // and hydrate each image progressively (reserving layout space from its
         // sniffed intrinsic size), rather than blocking the whole preview on image
         // resolution. Other markdown mounts synchronously.
         if (this.assetSession && /<img\b/i.test(html)) {
-            this.mountProgressivePreview(html, snapshot, context, generation);
+            this.mountProgressivePreview(html, snapshot, context, generation, animateImageHydration);
             return;
         }
         this.mountPreviewHtml(html, snapshot, context, generation);
     }
+    shouldAnimateImageHydration(previousMemo, snapshot) {
+        if (this.imageHydrationAnimation === 'off') {
+            return false;
+        }
+        if (this.imageHydrationAnimation === 'auto') {
+            return true;
+        }
+        return !previousMemo
+            || previousMemo.path !== snapshot.currentPath
+            || previousMemo.pathType !== snapshot.currentPathType;
+    }
     mountPreviewHtml(html, snapshot, context, generation) {
         this.elPreviewContent.innerHTML = html;
         this.mountPreviewExtensions(context, generation);
@@ -957,7 +1180,7 @@ export class MdzipWorkspaceView {
      * text is in the DOM; `onAssetsHydrated` fires once every referenced image
      * has resolved and had its final `src` assigned (or there are none).
      */
-    mountProgressivePreview(html, snapshot, context, generation) {
+    mountProgressivePreview(html, snapshot, context, generation, animateImageHydration) {
         this.elPreviewContent.innerHTML = html;
         const session = this.assetSession;
         const document = this.elPreviewContent.ownerDocument;
@@ -973,9 +1196,20 @@ export class MdzipWorkspaceView {
             // immediately readable; the slot eases open to the reserved height once
             // the image resolves.
             image.removeAttribute('src');
-            image.classList.add('mdzip-image-loading');
+            if (animateImageHydration) {
+                image.classList.add('mdzip-image-loading');
+            }
             const slot = document.createElement('span');
-            slot.className = 'mdzip-image-slot';
+            slot.className = animateImageHydration
+                ? 'mdzip-image-slot'
+                : 'mdzip-image-slot mdzip-image-open mdzip-image-animation-off';
+            const align = image.getAttribute('align')?.toLowerCase();
+            if (align === 'left' || image.classList.contains('mdzip-image-wrap-left')) {
+                slot.classList.add('mdzip-image-align-left');
+            }
+            else if (align === 'right' || image.classList.contains('mdzip-image-wrap-right')) {
+                slot.classList.add('mdzip-image-align-right');
+            }
             image.parentNode?.insertBefore(slot, image);
             slot.appendChild(image);
             pending.push({ image, slot, source });
@@ -1008,7 +1242,8 @@ export class MdzipWorkspaceView {
                 // Size the reserved box from the sniffed dimensions so the slot eases
                 // open to the image's exact height in a single slide — and the pixels
                 // drop into an already-correct box with no further reflow.
-                if (resolved.width && resolved.height) {
+                if (resolved.width && resolved.height
+                    && !image.hasAttribute('width') && !image.hasAttribute('height')) {
                     image.setAttribute('width', String(resolved.width));
                     image.setAttribute('height', String(resolved.height));
                 }
@@ -1033,6 +1268,10 @@ export class MdzipWorkspaceView {
      * under `prefers-reduced-motion`.
      */
     openImageSlot(slot) {
+        if (this.imageHydrationAnimation === 'off' || slot.classList.contains('mdzip-image-animation-off')) {
+            slot.classList.add('mdzip-image-open');
+            return;
+        }
         void slot.offsetHeight;
         slot.classList.add('mdzip-image-open');
     }
@@ -1339,11 +1578,17 @@ export class MdzipWorkspaceView {
         const state = EditorState.create({
             doc: initialText,
             extensions: [
-                ...(this.controlPolicy.lineNumbers ? [lineNumbers()] : []),
+                this.lineNumbersCompartment.of(this.controlPolicy.lineNumbers ? lineNumbers() : []),
                 history(),
+                keymap.of([
+                    { key: 'Mod-b', run: () => self.runFormatShortcut('bold') },
+                    { key: 'Mod-i', run: () => self.runFormatShortcut('italic') },
+                    { key: 'Mod-k', run: () => self.runFormatShortcut('link') }
+                ]),
                 keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
                 markdown(),
                 syntaxHighlighting(mdzipMarkdownHighlight),
+                hardBreakMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
                 mdzipEditorTheme,
@@ -1499,8 +1744,24 @@ export class MdzipWorkspaceView {
         this.elPreviewBtn.setAttribute('aria-pressed', String(this.layout === 'preview'));
         this.elSplitBtn.setAttribute('aria-pressed', String(this.layout === 'split'));
         this.elSourceBtn.setAttribute('aria-pressed', String(this.layout === 'source'));
-        this.elNavBtn.classList.toggle('active', this.navVisible);
-        this.elNavBtn.setAttribute('aria-pressed', String(this.navVisible));
+        if (snapshot.sourceFormat === 'markdown') {
+            this.elNavBtn.innerHTML = CONVERT_TO_MDZ_ICON_HTML;
+            this.elNavBtn.classList.remove('active');
+            this.elNavBtn.classList.add('convert-mdz-toggle');
+            this.elNavBtn.setAttribute('title', 'Convert to MDZ');
+            this.elNavBtn.setAttribute('aria-label', 'Convert to MDZ');
+            this.elNavBtn.dataset['tooltip'] = 'Convert to MDZ';
+            this.elNavBtn.removeAttribute('aria-pressed');
+        }
+        else {
+            this.elNavBtn.innerHTML = NAV_TOGGLE_ICON_HTML;
+            this.elNavBtn.classList.remove('convert-mdz-toggle');
+            this.elNavBtn.classList.toggle('active', this.navVisible);
+            this.elNavBtn.setAttribute('title', 'Toggle contents');
+            this.elNavBtn.setAttribute('aria-label', 'Toggle contents');
+            this.elNavBtn.dataset['tooltip'] = 'Toggle contents';
+            this.elNavBtn.setAttribute('aria-pressed', String(this.navVisible));
+        }
         this.elZoomBtn.classList.toggle('active', this.zoomOpen);
         this.elDarkThemeBtn.classList.toggle('active', this.colorScheme === 'dark');
         this.elLightThemeBtn.classList.toggle('active', this.colorScheme === 'light');
@@ -1517,7 +1778,7 @@ export class MdzipWorkspaceView {
         this.elNavResizer.classList.toggle('hidden', !showNavigationPane);
         this.prunePendingFolders(snapshot);
         const navTree = snapshot.sourceFormat === 'mdz'
-            ? mergePendingFolders(buildMdzipNavTree(snapshot.content.paths), this.pendingNewFolders)
+            ? mergePendingFolders(buildMdzipNavTree(snapshot.content.paths, snapshot.content.entryPoint), this.pendingNewFolders)
             : [];
         const allowOrphanActions = this.controlPolicy.orphanActions && snapshot.mode !== 'read-only';
         const allowFileActions = this.allowFileActions(snapshot);
@@ -1527,7 +1788,9 @@ export class MdzipWorkspaceView {
             allowDrag: snapshot.mode !== 'read-only' && snapshot.sourceFormat === 'mdz',
             pendingFolders: new Set([...this.pendingNewFolders].map((path) => path.toLowerCase()))
         };
-        this.elNavTree.innerHTML = navTree.map(n => renderNavNode(n, snapshot, navRenderOptions)).join('');
+        this.elNavTree.innerHTML = navTree
+            .map((n, i) => renderNavNode(n, snapshot, navRenderOptions, [], i === navTree.length - 1, 0))
+            .join('');
         this.prepareTooltips();
         if (this.cmEditor) {
             this.updatingCm = true;
@@ -1564,28 +1827,38 @@ export class MdzipWorkspaceView {
             this.elTitleSaveBtn.disabled = !valid;
         }
         this.elConversionDialog.hidden = this.conversionAction === null;
+        this.elImageInsertDialog.hidden = this.imageInsertDialogState === null;
+        if (this.imageInsertDialogState) {
+            this.elImageInsertAltInput.value = this.imageInsertDialogState.request.defaultAltText;
+            this.elImageInsertModeMarkdown.checked = true;
+            this.elImageInsertModeHtml.checked = false;
+            this.elImageInsertSizeModeSelect.value = 'width';
+            this.elImageInsertSizeValueInput.value = this.imageInsertDialogState.request.intrinsicWidth
+                ? String(this.imageInsertDialogState.request.intrinsicWidth)
+                : '';
+            this.elImageInsertPositionSelect.value = 'inline';
+            this.updateImageInsertOptionControls();
+        }
         this.elMetadataDialog.hidden = !this.metadataDialogOpen;
-        if (this.navMenuState) {
-            const items = this.navMenuItems(this.navMenuState.target, snapshot);
+        if (this.contextMenuState) {
+            const items = this.contextMenuState.kind === 'nav'
+                ? this.navMenuItems(this.contextMenuState.target, snapshot)
+                : this.editorMenuItems(snapshot);
             if (items.length === 0) {
-                this.navMenuState = null;
+                this.contextMenuState = null;
             }
             else {
-                this.elNavMenu.innerHTML = items
-                    .map((item) => item === null
-                    ? '<div class="nav-menu-separator" role="separator"></div>'
-                    : `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}">${escapeHtml(item.label)}</button>`)
-                    .join('');
+                this.elNavMenu.innerHTML = renderContextMenuItems(items);
                 this.elNavMenu.hidden = false;
                 const rect = this.elNavMenu.getBoundingClientRect();
                 const win = this.elRoot.ownerDocument.defaultView ?? window;
-                const x = Math.max(4, Math.min(this.navMenuState.x, win.innerWidth - rect.width - 8));
-                const y = Math.max(4, Math.min(this.navMenuState.y, win.innerHeight - rect.height - 8));
+                const x = Math.max(4, Math.min(this.contextMenuState.x, win.innerWidth - rect.width - 8));
+                const y = Math.max(4, Math.min(this.contextMenuState.y, win.innerHeight - rect.height - 8));
                 this.elNavMenu.style.left = `${x}px`;
                 this.elNavMenu.style.top = `${y}px`;
             }
         }
-        if (!this.navMenuState) {
+        if (!this.contextMenuState) {
             this.elNavMenu.hidden = true;
         }
         this.elNameDialog.hidden = this.nameDialogState === null;
@@ -1638,9 +1911,9 @@ export class MdzipWorkspaceView {
         const doc = this.elRoot.ownerDocument;
         doc.addEventListener('click', () => {
             this.closeFormatMenus();
-            if (this.zoomOpen || this.navMenuState) {
+            if (this.zoomOpen || this.contextMenuState) {
                 this.zoomOpen = false;
-                this.navMenuState = null;
+                this.contextMenuState = null;
                 this.render();
             }
         });
@@ -1648,8 +1921,8 @@ export class MdzipWorkspaceView {
             if (e.key !== 'Escape') {
                 return;
             }
-            if (this.navMenuState || this.deleteDialogState || this.nameDialogState) {
-                this.navMenuState = null;
+            if (this.contextMenuState || this.deleteDialogState || this.nameDialogState) {
+                this.contextMenuState = null;
                 this.deleteDialogState = null;
                 this.nameDialogState = null;
                 this.render();
@@ -1758,7 +2031,7 @@ export class MdzipWorkspaceView {
             const file = this.elImageInput.files?.[0];
             this.elImageInput.value = '';
             if (file) {
-                void this.insertImageFile(file);
+                void this.insertImageFile(file, 'picker');
             }
         });
         this.elEditToolbar.addEventListener('keydown', (event) => {
@@ -1901,12 +2174,78 @@ export class MdzipWorkspaceView {
         this.elConversionConfirmBtn.addEventListener('click', () => {
             void this.confirmMdzConversion();
         });
+        this.elImageInsertDialog.querySelector('[data-action="cancel-image-insert"]')
+            .addEventListener('click', () => {
+            this.resolveImageInsertDialog(null);
+        });
+        this.elImageInsertConfirmBtn.addEventListener('click', () => {
+            this.resolveImageInsertDialog(this.readImageInsertDialogDecision());
+        });
+        this.elImageInsertModeMarkdown.addEventListener('change', () => this.updateImageInsertOptionControls());
+        this.elImageInsertModeHtml.addEventListener('change', () => this.updateImageInsertOptionControls());
+        this.elImageInsertSizeModeSelect.addEventListener('change', () => {
+            this.resetImageInsertSizeValue();
+            this.updateImageInsertOptionControls();
+        });
         this.elNavMenu.addEventListener('click', (e) => {
             e.stopPropagation();
             const item = e.target.closest('[data-menu-action]');
-            if (item) {
-                void this.handleNavMenuAction(item.dataset['menuAction'] ?? '');
+            if (!item) {
+                return;
+            }
+            const action = item.dataset['menuAction'] ?? '';
+            if (this.contextMenuState?.kind === 'editor') {
+                void this.handleEditorMenuAction(action);
+            }
+            else {
+                void this.handleNavMenuAction(action);
+            }
+        });
+        // Flyout submenus open to the right and aligned with their parent by
+        // default; nudge them within the viewport. Runs on hover (when the submenu
+        // is already displayed, so it can be measured): flips left when it would
+        // overflow the right edge, and shifts up when a tall list (e.g. the code
+        // languages) would run off the bottom.
+        this.elNavMenu.addEventListener('pointerover', (e) => {
+            const wrap = e.target.closest('.nav-menu-submenu-wrap');
+            if (!wrap) {
+                return;
+            }
+            const submenu = wrap.querySelector('.nav-context-submenu');
+            if (!submenu) {
+                return;
+            }
+            const win = this.elRoot.ownerDocument.defaultView ?? window;
+            const margin = 8;
+            const rect = wrap.getBoundingClientRect();
+            const width = submenu.offsetWidth || SUBMENU_ESTIMATED_WIDTH;
+            wrap.classList.toggle('open-left', rect.right + width > win.innerWidth - margin);
+            // Vertical: clamp the flyout's top so its full height stays on-screen.
+            // `top` is relative to the parent row (CSS default is -5px).
+            const naturalTop = rect.top - 5;
+            const clampedTop = Math.max(margin, Math.min(naturalTop, win.innerHeight - margin - submenu.offsetHeight));
+            submenu.style.top = `${clampedTop - rect.top}px`;
+        });
+        this.elEditorHost.addEventListener('contextmenu', (e) => {
+            const snapshot = this.workspace?.snapshot();
+            if (!snapshot || !this.cmEditor) {
+                return;
             }
+            const selection = this.cmEditor.state.selection.main;
+            this.contextMenuState = {
+                kind: 'editor',
+                from: selection.from,
+                to: selection.to,
+                x: e.clientX,
+                y: e.clientY
+            };
+            if (this.editorMenuItems(snapshot).length === 0) {
+                this.contextMenuState = null;
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.render();
         });
         this.elNameInput.addEventListener('input', () => {
             if (!this.nameDialogState) {
@@ -2286,7 +2625,7 @@ export class MdzipWorkspaceView {
                     editor.dispatch({ selection: { anchor: target.selectionStart } });
                 }
                 if (action.kind === 'image-file') {
-                    await this.insertImageFile(action.file);
+                    await this.insertImageFile(action.file, action.source ?? 'picker');
                     return true;
                 }
                 this.elImageInput.click();
@@ -2312,7 +2651,7 @@ export class MdzipWorkspaceView {
             return;
         }
         if (action.kind === 'image-file') {
-            await this.insertImageFile(action.file);
+            await this.insertImageFile(action.file, action.source ?? 'picker');
             return;
         }
         this.elImageInput.click();
@@ -2332,37 +2671,45 @@ export class MdzipWorkspaceView {
             if (this.workspace?.sourceFormat === 'markdown') {
                 const extension = extensionForMime(image.mimeType);
                 const pastedFile = new window.File([new Blob([image.bytes], { type: image.mimeType })], `pasted.${extension}`, { type: image.mimeType });
-                this.requestMdzConversion({ kind: 'image-file', file: pastedFile });
+                this.requestMdzConversion({ kind: 'image-file', file: pastedFile, source: 'paste' });
                 return;
             }
-            await this.insertImageBytes(image.bytes, image.mimeType);
+            await this.insertImageBytes(image.bytes, image.mimeType, {
+                fileName: `pasted.${extensionForMime(image.mimeType)}`,
+                source: 'paste'
+            });
         }
         catch (error) {
             this.options.onFailed?.(error);
         }
     }
-    async insertImageFile(file) {
+    async insertImageFile(file, source = 'picker') {
         if (!file.type.startsWith('image/') && !/\.(png|jpe?g|gif|webp|svg)$/i.test(file.name)) {
             return;
         }
         try {
-            await this.insertImageBytes(new Uint8Array(await file.arrayBuffer()), file.type || imageMimeTypeFromFileName(file.name));
+            await this.insertImageBytes(new Uint8Array(await file.arrayBuffer()), file.type || imageMimeTypeFromFileName(file.name), { fileName: file.name, source });
         }
         catch (error) {
             this.options.onFailed?.(error);
         }
     }
-    async insertImageBytes(bytes, mimeType) {
+    async insertImageBytes(bytes, mimeType, options) {
         const editor = this.cmEditor;
         if (!editor) {
             return;
         }
         const selection = editor.state.selection.main;
+        const decision = await this.resolveImageInsertDecision(bytes, mimeType, options);
+        if (!decision) {
+            return;
+        }
         const result = await this.workspace?.pasteImage({
             bytes,
             mimeType,
             selectionStart: selection.from,
-            selectionEnd: selection.to
+            selectionEnd: selection.to,
+            markdownImage: (markdownPath) => formatImageInsertMarkdown(markdownPath, decision, editor.state.doc.toString(), selection.from, selection.to)
         });
         if (result && this.cmEditor) {
             this.render();
@@ -2370,6 +2717,405 @@ export class MdzipWorkspaceView {
             this.cmEditor.focus();
         }
     }
+    async resolveImageInsertDecision(bytes, mimeType, options) {
+        const size = sniffImageSize(bytes, mimeType);
+        const request = {
+            fileName: options.fileName || `pasted.${extensionForMime(mimeType)}`,
+            mimeType,
+            intrinsicWidth: size?.width,
+            intrinsicHeight: size?.height,
+            defaultAltText: 'Pasted image',
+            source: options.source
+        };
+        const handler = this.options.imageInsertHandler;
+        if (handler) {
+            try {
+                const handled = await handler(request);
+                if (handled !== undefined) {
+                    return normalizeImageInsertDecision(handled);
+                }
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+                return null;
+            }
+        }
+        const mode = this.options.imageInsertMode ?? 'markdown';
+        if (mode === 'ask') {
+            return this.openImageInsertDialog(request);
+        }
+        return normalizeImageInsertDecision({
+            mode: mode === 'html' ? 'html' : 'markdown',
+            altText: request.defaultAltText,
+            width: mode === 'html' ? request.intrinsicWidth : undefined,
+            height: mode === 'html' ? request.intrinsicHeight : undefined,
+            position: 'inline'
+        });
+    }
+    openImageInsertDialog(request) {
+        return new Promise((resolve) => {
+            this.resolveImageInsertDialog(null);
+            this.imageInsertDialogState = { request, resolve };
+            this.render();
+            requestAnimationFrame(() => this.elImageInsertAltInput.focus());
+        });
+    }
+    resolveImageInsertDialog(decision) {
+        const state = this.imageInsertDialogState;
+        if (!state) {
+            return;
+        }
+        this.imageInsertDialogState = null;
+        this.render();
+        state.resolve(normalizeImageInsertDecision(decision));
+    }
+    readImageInsertDialogDecision() {
+        const parseDimension = (value) => {
+            const parsed = Number(value);
+            return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : undefined;
+        };
+        const request = this.imageInsertDialogState?.request;
+        const sizeMode = this.elImageInsertSizeModeSelect.value;
+        const sizeValue = parseDimension(this.elImageInsertSizeValueInput.value);
+        let width;
+        let height;
+        if (this.elImageInsertModeHtml.checked && sizeValue) {
+            if (sizeMode === 'width') {
+                width = sizeValue;
+            }
+            else if (sizeMode === 'height') {
+                height = sizeValue;
+            }
+            else if (sizeMode === 'percent' && request?.intrinsicWidth && request.intrinsicHeight) {
+                width = Math.max(1, Math.round(request.intrinsicWidth * sizeValue / 100));
+                height = Math.max(1, Math.round(request.intrinsicHeight * sizeValue / 100));
+            }
+        }
+        return {
+            mode: this.elImageInsertModeHtml.checked ? 'html' : 'markdown',
+            altText: this.elImageInsertAltInput.value,
+            width,
+            height,
+            position: this.elImageInsertPositionSelect.value
+        };
+    }
+    updateImageInsertOptionControls() {
+        const htmlMode = this.elImageInsertModeHtml.checked;
+        const sizeDisabled = !htmlMode || this.elImageInsertSizeModeSelect.value === 'original';
+        this.elImageInsertSizeModeSelect.disabled = !htmlMode;
+        this.elImageInsertSizeValueInput.disabled = sizeDisabled;
+        this.elImageInsertPositionSelect.disabled = !htmlMode;
+        this.elImageInsertSizeModeSelect.closest('.image-insert-field')?.classList.toggle('field-disabled', !htmlMode);
+        this.elImageInsertSizeValueInput.closest('.image-insert-field')?.classList.toggle('field-disabled', sizeDisabled);
+        this.elImageInsertPositionSelect.closest('.image-insert-field')?.classList.toggle('field-disabled', !htmlMode);
+    }
+    resetImageInsertSizeValue() {
+        const request = this.imageInsertDialogState?.request;
+        switch (this.elImageInsertSizeModeSelect.value) {
+            case 'width':
+                this.elImageInsertSizeValueInput.value = request?.intrinsicWidth ? String(request.intrinsicWidth) : '';
+                break;
+            case 'height':
+                this.elImageInsertSizeValueInput.value = request?.intrinsicHeight ? String(request.intrinsicHeight) : '';
+                break;
+            case 'percent':
+                this.elImageInsertSizeValueInput.value = '100';
+                break;
+            default:
+                this.elImageInsertSizeValueInput.value = '';
+                break;
+        }
+    }
+    // Items for the editor selection menu; null entries render as separators.
+    // Reads the selection range captured when the menu opened (not the live
+    // selection) so the displayed actions match what the handlers will act on.
+    editorMenuItems(snapshot) {
+        const state = this.contextMenuState;
+        if (!this.cmEditor || state?.kind !== 'editor') {
+            return [];
+        }
+        const hasSelection = state.to > state.from;
+        const editable = snapshot.mode !== 'read-only' && snapshot.currentPathType === 'markdown';
+        const formatting = this.controlPolicy.formatting;
+        const groups = [];
+        const clipboard = [];
+        if (hasSelection) {
+            if (editable) {
+                clipboard.push({ action: 'editor-cut', label: 'Cut', icon: MENU_CUT_ICON_HTML, shortcut: this.editorShortcut('X') });
+            }
+            clipboard.push({ action: 'editor-copy', label: 'Copy', icon: MENU_COPY_ICON_HTML, shortcut: this.editorShortcut('C') });
+        }
+        if (editable) {
+            clipboard.push({ action: 'editor-paste', label: 'Paste', icon: MENU_PASTE_ICON_HTML, shortcut: this.editorShortcut('V') });
+            clipboard.push({ action: 'editor-paste-plain', label: 'Paste as Plain Text', icon: MENU_PASTE_PLAIN_ICON_HTML });
+        }
+        if (clipboard.length > 0) {
+            groups.push(clipboard);
+        }
+        // Formatting mirrors the toolbar's capabilities so the menu can stand in
+        // for it. Inline marks and block commands apply to the current line when
+        // there's no selection (same as the toolbar), so only Clear Formatting —
+        // which acts on a range — is gated on a selection.
+        const anyInline = formatting.bold || formatting.italic || formatting.strikethrough || formatting.inlineCode;
+        const anyBlock = formatting.headings.length > 0 || formatting.bulletList
+            || formatting.orderedList || formatting.blockquote || formatting.codeBlock || formatting.lineBreak;
+        if (editable && anyInline) {
+            const inline = [];
+            if (formatting.bold) {
+                inline.push({ action: 'bold', label: 'Bold', icon: MENU_BOLD_ICON_HTML, shortcut: this.editorShortcut('B') });
+            }
+            if (formatting.italic) {
+                inline.push({ action: 'italic', label: 'Italic', icon: MENU_ITALIC_ICON_HTML, shortcut: this.editorShortcut('I') });
+            }
+            if (formatting.strikethrough) {
+                inline.push({ action: 'strikethrough', label: 'Strikethrough', icon: MENU_STRIKE_ICON_HTML });
+            }
+            inline.push({ action: 'highlight', label: 'Highlight', icon: MENU_HIGHLIGHT_ICON_HTML });
+            if (formatting.inlineCode) {
+                inline.push({ action: 'inline-code', label: 'Inline Code', icon: MENU_CODE_ICON_HTML });
+            }
+            groups.push(inline);
+        }
+        if (editable && anyBlock) {
+            const block = [];
+            if (formatting.headings.length > 0) {
+                block.push({
+                    action: '',
+                    label: 'Heading',
+                    icon: MENU_HEADING_PARENT_ICON_HTML,
+                    submenu: [
+                        { action: 'paragraph', label: 'Paragraph', icon: MENU_PARAGRAPH_ICON_HTML },
+                        null,
+                        ...formatting.headings.map((level) => ({
+                            action: `heading-${level}`,
+                            label: `Heading ${level}`,
+                            icon: MENU_HEADING_ICON_HTML[level]
+                        }))
+                    ]
+                });
+            }
+            if (formatting.bulletList) {
+                block.push({ action: 'bullet-list', label: 'Bullet List', icon: MENU_BULLET_LIST_ICON_HTML });
+            }
+            if (formatting.orderedList) {
+                block.push({ action: 'ordered-list', label: 'Numbered List', icon: MENU_ORDERED_LIST_ICON_HTML });
+            }
+            if (formatting.blockquote) {
+                block.push({ action: 'blockquote', label: 'Blockquote', icon: MENU_QUOTE_ICON_HTML });
+            }
+            if (formatting.codeBlock) {
+                const languages = this.options.codeBlockLanguages ?? DEFAULT_CODE_BLOCK_LANGUAGES;
+                block.push({
+                    action: '',
+                    label: 'Code Block',
+                    icon: MENU_CODE_BLOCK_ICON_HTML,
+                    submenu: languages.map((lang) => ({
+                        action: `code-block:${lang.id}`,
+                        label: lang.label
+                    }))
+                });
+            }
+            if (formatting.lineBreak) {
+                block.push({ action: 'insert-line-break', label: 'Line Break', icon: MENU_LINE_BREAK_ICON_HTML });
+            }
+            groups.push(block);
+        }
+        if (editable && (formatting.link || formatting.image)) {
+            const insert = [];
+            if (formatting.link) {
+                insert.push({ action: 'link', label: 'Link…', icon: MENU_LINK_ICON_HTML, shortcut: this.editorShortcut('K') });
+            }
+            if (formatting.image) {
+                insert.push({ action: 'insert-image', label: 'Insert Image…', icon: MENU_IMAGE_ICON_HTML });
+            }
+            groups.push(insert);
+        }
+        if (editable && hasSelection && (anyInline || anyBlock)) {
+            groups.push([{ action: 'editor-clear-format', label: 'Clear Formatting', icon: MENU_CLEAR_FORMAT_ICON_HTML }]);
+        }
+        groups.push([{ action: 'editor-select-all', label: 'Select All', icon: MENU_SELECT_ALL_ICON_HTML, shortcut: this.editorShortcut('A') }]);
+        return groups.flatMap((group, index) => (index === 0 ? group : [null, ...group]));
+    }
+    async handleEditorMenuAction(action) {
+        const state = this.contextMenuState;
+        this.contextMenuState = null;
+        this.render();
+        const editor = this.cmEditor;
+        if (!editor || state?.kind !== 'editor') {
+            return;
+        }
+        // Clicking the menu may have moved focus and collapsed the selection, so
+        // restore the range captured when the menu opened before acting on it.
+        if (action !== 'editor-select-all') {
+            editor.dispatch({ selection: { anchor: state.from, head: state.to } });
+        }
+        // Code Block submenu items carry the chosen language as a suffix.
+        if (action.startsWith('code-block:')) {
+            this.insertCodeBlock(action.slice('code-block:'.length));
+            editor.focus();
+            return;
+        }
+        switch (action) {
+            case 'editor-cut':
+                await this.cutEditorSelection();
+                break;
+            case 'editor-copy':
+                await this.copyEditorSelection();
+                break;
+            case 'editor-paste':
+            case 'editor-paste-plain':
+                await this.pasteIntoEditor();
+                break;
+            case 'editor-clear-format':
+                this.clearSelectionFormatting();
+                editor.focus();
+                break;
+            case 'editor-select-all':
+                editor.dispatch({ selection: { anchor: 0, head: editor.state.doc.length } });
+                editor.focus();
+                break;
+            case 'insert-image':
+                await this.executeCommand('insert-image');
+                break;
+            case 'bold':
+            case 'italic':
+            case 'strikethrough':
+            case 'highlight':
+            case 'inline-code':
+            case 'blockquote':
+            case 'bullet-list':
+            case 'ordered-list':
+            case 'insert-line-break':
+            case 'link':
+            case 'paragraph':
+            case 'heading-1':
+            case 'heading-2':
+            case 'heading-3':
+            case 'heading-4':
+            case 'heading-5':
+            case 'heading-6':
+                this.applyMarkdownFormat(action);
+                editor.focus();
+                break;
+        }
+    }
+    // Inserts a fenced code block, carrying the chosen language as the fence info
+    // string. An empty language produces a plain ```` ``` ```` block.
+    insertCodeBlock(language) {
+        if (!this.canExecuteCommand('code-block')) {
+            return;
+        }
+        this.wrapSelection(`\`\`\`${language}\n`, '\n```', 'code');
+    }
+    // Strips common Markdown formatting from the selection: leading block markers
+    // (headings, blockquotes, list bullets) per line, then inline emphasis,
+    // highlight, and code spans. Heuristic by nature — it targets the markers the
+    // editor itself produces rather than parsing the full grammar.
+    clearSelectionFormatting() {
+        const editor = this.cmEditor;
+        const snapshot = this.workspace?.snapshot();
+        if (!editor || !snapshot || snapshot.mode === 'read-only') {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        if (selection.empty) {
+            return;
+        }
+        const cleared = editor.state.sliceDoc(selection.from, selection.to)
+            .split('\n')
+            .map((line) => line
+            .replace(/^(\s*)#{1,6}\s+/, '$1')
+            .replace(/^(\s*)>\s?/, '$1')
+            .replace(/^(\s*)(?:[-*+]|\d+\.)\s+/, '$1'))
+            .join('\n')
+            .replace(/<\/?mark>/gi, '')
+            .replace(/(\*\*|__)(.*?)\1/g, '$2')
+            .replace(/(\*|_)(.*?)\1/g, '$2')
+            .replace(/~~(.*?)~~/g, '$1')
+            .replace(/==(.*?)==/g, '$1')
+            .replace(/`([^`]*)`/g, '$1');
+        editor.dispatch({
+            changes: { from: selection.from, to: selection.to, insert: cleared },
+            selection: { anchor: selection.from, head: selection.from + cleared.length }
+        });
+    }
+    editorClipboard() {
+        return this.elRoot.ownerDocument.defaultView?.navigator?.clipboard;
+    }
+    // Renders a single-letter shortcut for the host platform: ⌘X on macOS,
+    // Ctrl+X elsewhere. Only used for bindings that genuinely fire (the native
+    // clipboard keys and `defaultKeymap`'s select-all).
+    editorShortcut(key) {
+        const nav = this.elRoot.ownerDocument.defaultView?.navigator;
+        const platform = nav?.userAgentData?.platform
+            ?? nav?.platform
+            ?? '';
+        return /mac|iphone|ipad|ipod/i.test(platform) ? `⌘${key}` : `Ctrl+${key}`;
+    }
+    async copyEditorSelection() {
+        const editor = this.cmEditor;
+        if (!editor) {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        if (selection.empty) {
+            return;
+        }
+        try {
+            await this.editorClipboard()?.writeText(editor.state.sliceDoc(selection.from, selection.to));
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+        }
+        editor.focus();
+    }
+    async cutEditorSelection() {
+        const editor = this.cmEditor;
+        const snapshot = this.workspace?.snapshot();
+        if (!editor || !snapshot || snapshot.mode === 'read-only') {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        if (selection.empty) {
+            return;
+        }
+        try {
+            await this.editorClipboard()?.writeText(editor.state.sliceDoc(selection.from, selection.to));
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+            return;
+        }
+        editor.dispatch({
+            changes: { from: selection.from, to: selection.to, insert: '' },
+            selection: { anchor: selection.from }
+        });
+        editor.focus();
+    }
+    async pasteIntoEditor() {
+        const editor = this.cmEditor;
+        const snapshot = this.workspace?.snapshot();
+        if (!editor || !snapshot || snapshot.mode === 'read-only') {
+            return;
+        }
+        let text;
+        try {
+            text = await this.editorClipboard()?.readText();
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+            return;
+        }
+        if (!text) {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        editor.dispatch({
+            changes: { from: selection.from, to: selection.to, insert: text },
+            selection: { anchor: selection.from + text.length }
+        });
+        editor.focus();
+    }
     applyMarkdownFormat(format) {
         const editor = this.cmEditor;
         const snapshot = this.workspace?.snapshot();
@@ -2386,6 +3132,9 @@ export class MdzipWorkspaceView {
             case 'strikethrough':
                 this.wrapSelection('~~', '~~', 'strikethrough text');
                 break;
+            case 'highlight':
+                this.wrapSelection('<mark>', '</mark>', 'highlighted text');
+                break;
             case 'paragraph':
                 this.setSelectedLinePrefix('', /^(#{1,6})\s+/);
                 break;
@@ -2412,8 +3161,11 @@ export class MdzipWorkspaceView {
             case 'blockquote':
                 this.prefixSelectedLines('> ', /^(\s*)>\s?/);
                 break;
+            case 'insert-line-break':
+                this.insertLineBreak();
+                break;
             case 'link':
-                this.wrapSelection('[', '](url)', 'link text');
+                this.insertMarkdownLink();
                 break;
             default:
                 return;
@@ -2430,6 +3182,7 @@ export class MdzipWorkspaceView {
             orderedList: formatting.orderedList,
             code: formatting.inlineCode || formatting.codeBlock,
             blockquote: formatting.blockquote,
+            lineBreak: formatting.lineBreak,
             link: formatting.link,
             image: formatting.image
         };
@@ -2490,6 +3243,38 @@ export class MdzipWorkspaceView {
         });
         editor.focus();
     }
+    insertMarkdownLink() {
+        const editor = this.cmEditor;
+        if (!editor) {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        const selectedText = editor.state.sliceDoc(selection.from, selection.to);
+        const linkText = selectedText || 'link text';
+        const urlPlaceholder = 'url';
+        const insert = `[${linkText}](${urlPlaceholder})`;
+        const anchor = selection.from + linkText.length + 3;
+        editor.dispatch({
+            changes: { from: selection.from, to: selection.to, insert },
+            selection: { anchor, head: anchor + urlPlaceholder.length },
+            scrollIntoView: true
+        });
+        editor.focus();
+    }
+    insertLineBreak() {
+        const editor = this.cmEditor;
+        if (!editor) {
+            return;
+        }
+        const selection = editor.state.selection.main;
+        const insert = '<br>\n';
+        editor.dispatch({
+            changes: { from: selection.from, to: selection.to, insert },
+            selection: { anchor: selection.from + insert.length },
+            scrollIntoView: true
+        });
+        editor.focus();
+    }
     prefixSelectedLines(prefix, existingPrefix) {
         const editor = this.cmEditor;
         if (!editor) {
@@ -2688,7 +3473,7 @@ export class MdzipWorkspaceView {
         const bounds = event.target?.getBoundingClientRect();
         const clientX = event instanceof MouseEvent ? event.clientX : (bounds?.left ?? 0);
         const clientY = event instanceof MouseEvent ? event.clientY : (bounds?.bottom ?? 0);
-        this.navMenuState = { target, x: clientX, y: clientY };
+        this.contextMenuState = { kind: 'nav', target, x: clientX, y: clientY };
         this.render();
     }
     // Items for the nav context menu; null entries render as separators.
@@ -2746,10 +3531,10 @@ export class MdzipWorkspaceView {
         return groups.flatMap((group, index) => index === 0 ? group : [null, ...group]);
     }
     async handleNavMenuAction(action) {
-        const state = this.navMenuState;
-        this.navMenuState = null;
+        const state = this.contextMenuState;
+        this.contextMenuState = null;
         this.render();
-        if (!state) {
+        if (!state || state.kind !== 'nav') {
             return;
         }
         const target = state.target;
@@ -2985,7 +3770,7 @@ export class MdzipWorkspaceView {
     async handleEditorImageDrop(file, x, y) {
         try {
             if (this.workspace?.sourceFormat === 'markdown') {
-                this.requestMdzConversion({ kind: 'image-file', file });
+                this.requestMdzConversion({ kind: 'image-file', file, source: 'drop' });
                 return;
             }
             const editor = this.cmEditor;
@@ -2995,7 +3780,7 @@ export class MdzipWorkspaceView {
                     editor.dispatch({ selection: { anchor: pos } });
                 }
             }
-            await this.insertImageFile(file);
+            await this.insertImageFile(file, 'drop');
         }
         catch (error) {
             this.options.onFailed?.(error);
@@ -3209,6 +3994,7 @@ function hasFormattingControls(policy) {
         || policy.inlineCode
         || policy.codeBlock
         || policy.blockquote
+        || policy.lineBreak
         || policy.link
         || policy.image;
 }
@@ -3228,6 +4014,8 @@ function markdownCommandFromToolbarFormat(format) {
         case 'code-block':
         case 'link':
             return format;
+        case 'line-break':
+            return 'insert-line-break';
         case 'strike':
             return 'strikethrough';
         case 'code':
@@ -3255,6 +4043,70 @@ function imageMimeTypeFromFileName(fileName) {
             return 'image/png';
     }
 }
+function normalizeImageInsertDecision(decision) {
+    if (!decision) {
+        return null;
+    }
+    const normalizeDimension = (value) => value !== undefined && Number.isFinite(value) && value > 0
+        ? Math.round(value)
+        : undefined;
+    return {
+        mode: decision.mode === 'html' ? 'html' : 'markdown',
+        altText: decision.altText ?? '',
+        width: normalizeDimension(decision.width),
+        height: normalizeDimension(decision.height),
+        position: normalizeImagePosition(decision.position)
+    };
+}
+function normalizeImagePosition(position) {
+    switch (position) {
+        case 'left':
+        case 'center':
+        case 'right':
+        case 'wrap-left':
+        case 'wrap-right':
+            return position;
+        default:
+            return 'inline';
+    }
+}
+function formatImageInsertMarkdown(markdownPath, decision, currentText = '', selectionStart = 0, selectionEnd = selectionStart) {
+    if (decision.mode === 'html') {
+        const attrs = [
+            `src="${escapeHtml(markdownPath)}"`,
+            `alt="${escapeHtml(decision.altText)}"`
+        ];
+        if (decision.width) {
+            attrs.push(`width="${decision.width}"`);
+        }
+        if (decision.height) {
+            attrs.push(`height="${decision.height}"`);
+        }
+        if (decision.position === 'wrap-left' || decision.position === 'wrap-right') {
+            attrs.push(`align="${decision.position === 'wrap-left' ? 'left' : 'right'}"`);
+        }
+        const image = `<img ${attrs.join(' ')}>`;
+        if (decision.position === 'left' || decision.position === 'center' || decision.position === 'right') {
+            return padHtmlImageBlock(`<p align="${decision.position}">${image}</p>`, currentText, selectionStart, selectionEnd);
+        }
+        return padHtmlImageBlock(image, currentText, selectionStart, selectionEnd);
+    }
+    return `![${escapeMarkdownImageAlt(decision.altText)}](${markdownPath})`;
+}
+function padHtmlImageBlock(html, currentText, selectionStart, selectionEnd) {
+    const before = currentText.slice(0, Math.max(0, selectionStart));
+    const after = currentText.slice(Math.max(selectionStart, selectionEnd));
+    const prefix = before.length === 0 || before.endsWith('\n\n')
+        ? ''
+        : before.endsWith('\n') ? '\n' : '\n\n';
+    const suffix = after.startsWith('\n\n')
+        ? ''
+        : after.startsWith('\n') ? '\n' : '\n\n';
+    return `${prefix}${html}${suffix}`;
+}
+function escapeMarkdownImageAlt(value) {
+    return value.replace(/\\/g, '\\\\').replace(/]/g, '\\]');
+}
 function formatMetadataValue(value) {
     if (typeof value === 'string' && value.trim()) {
         return value;
@@ -3319,6 +4171,7 @@ const SHELL_HTML = `
             </div>
           </div>
           <button type="button" data-format="quote" data-format-control="blockquote" title="Blockquote" aria-label="Blockquote">${QUOTE_ICON_HTML}</button>
+          <button type="button" data-format="line-break" data-format-control="lineBreak" title="Line break" aria-label="Line break">${LINE_BREAK_ICON_HTML}</button>
         </div>
         <span class="edit-toolbar-divider" aria-hidden="true"></span>
         <div class="edit-toolbar-group">
@@ -3425,6 +4278,61 @@ const SHELL_HTML = `
     </div>
   </div>
 
+  <div class="title-dialog-backdrop" data-ref="image-insert-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-image-insert-dialog-heading">
+    <div class="title-dialog image-insert-dialog">
+      <h3 id="mdzip-image-insert-dialog-heading">Insert Image</h3>
+      <p>Choose the Markdown inserted for this image.</p>
+      <fieldset class="image-insert-options">
+        <legend>Output</legend>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="markdown"
+            data-ref="image-insert-mode-markdown" checked />
+          Markdown image
+        </label>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="html"
+            data-ref="image-insert-mode-html" />
+          HTML &lt;img&gt; with sizing
+        </label>
+      </fieldset>
+      <label class="image-insert-field">
+        <span>Alt text</span>
+        <input type="text" data-ref="image-insert-alt" />
+      </label>
+      <div class="image-insert-grid">
+        <label class="image-insert-field">
+          <span>Size by</span>
+          <select data-ref="image-insert-size-mode">
+            <option value="original">Original size</option>
+            <option value="width" selected>Width</option>
+            <option value="height">Height</option>
+            <option value="percent">Percent</option>
+          </select>
+        </label>
+        <label class="image-insert-field">
+          <span>Value</span>
+          <input type="number" min="1" step="1" data-ref="image-insert-size-value" />
+        </label>
+      </div>
+      <label class="image-insert-field">
+        <span>Position</span>
+        <select data-ref="image-insert-position">
+          <option value="inline">Inline/default</option>
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+          <option value="wrap-left">Wrap left</option>
+          <option value="wrap-right">Wrap right</option>
+        </select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-image-insert">Cancel</button>
+        <button type="button" class="save-title" data-ref="image-insert-confirm-btn">Insert</button>
+      </div>
+    </div>
+  </div>
+
   <div class="title-dialog-backdrop" data-ref="metadata-dialog" hidden
     role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
     <div class="title-dialog metadata-dialog">