@mdzip/editor 1.3.12 → 1.3.15

package/dist/view.js

@@ -1,10 +1,11 @@
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import { markdown } from '@codemirror/lang-markdown';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { closeSearchPanel, openSearchPanel, search, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorState } from '@codemirror/state';
 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, CornerDownLeft, Moon, PackagePlus, 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, Search, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
 import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset-cache.js';
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
@@ -35,6 +36,7 @@ const CONVERT_TO_MDZ_ICON_HTML = lucideIcon(PackagePlus, `${TOOLBAR_ICON_CLASS}
 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);
+const SEARCH_ICON_HTML = lucideIcon(Search, TOOLBAR_ICON_CLASS);
 const ZOOM_ICON_HTML = lucideIcon(ZoomIn, TOOLBAR_ICON_CLASS);
 const DARK_THEME_ICON_HTML = lucideIcon(Moon, TOOLBAR_ICON_CLASS);
 const LIGHT_THEME_ICON_HTML = lucideIcon(Sun, TOOLBAR_ICON_CLASS);
@@ -52,6 +54,86 @@ 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,
@@ -99,7 +181,8 @@ const CONTROL_PRESETS = {
         zoom: false,
         colorScheme: false,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: false
     },
     viewer: {
         preset: 'viewer',
@@ -113,7 +196,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: true
     },
     'standalone-editor': {
         preset: 'standalone-editor',
@@ -127,7 +211,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true
     },
     'hosted-editor': {
         preset: 'hosted-editor',
@@ -141,7 +226,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true
     }
 };
 export function resolveMdzipControlPolicy(controls) {
@@ -287,6 +373,73 @@ const mdzipEditorTheme = EditorView.theme({
         color: 'var(--mdzip-muted-foreground-color)',
         opacity: '0.65',
     },
+    '.cm-panels': {
+        background: 'var(--mdzip-widget-background-color)',
+        color: 'var(--mdzip-editor-foreground-color)',
+        zIndex: '2',
+    },
+    '.cm-panels.cm-panels-top': {
+        borderBottom: '1px solid var(--mdzip-border-color)',
+    },
+    '.cm-search': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '10px 14px',
+        fontSize: '13px',
+    },
+    // CodeMirror separates the find and replace rows with a bare <br>; in a
+    // flex container that collapses to zero width instead of breaking the
+    // line, so force it to take the full row.
+    '.cm-search br': {
+        flexBasis: '100%',
+        height: '0',
+    },
+    '.cm-search label': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        color: 'var(--mdzip-muted-foreground-color)',
+    },
+    '.cm-search input[type="checkbox"]': {
+        width: '14px',
+        height: '14px',
+        accentColor: 'var(--mdzip-accent-color)',
+    },
+    '.cm-textfield': {
+        background: 'var(--mdzip-editor-background-color)',
+        color: 'var(--mdzip-editor-foreground-color)',
+        border: '1px solid var(--mdzip-border-color)',
+        borderRadius: '5px',
+        padding: '5px 9px',
+        fontSize: 'inherit',
+        width: '220px',
+    },
+    '.cm-textfield:focus-visible': {
+        outline: '1px solid var(--mdzip-focus-outline-color)',
+        outlineOffset: '-1px',
+    },
+    '.cm-button': {
+        background: 'var(--mdzip-widget-background-color)',
+        backgroundImage: 'none',
+        color: 'var(--mdzip-control-foreground-color)',
+        border: '1px solid var(--mdzip-border-color)',
+        borderRadius: '5px',
+        padding: '5px 12px',
+        fontSize: 'inherit',
+        cursor: 'pointer',
+    },
+    '.cm-button:hover': {
+        background: 'var(--mdzip-control-hover-background-color)',
+    },
+    '.cm-searchMatch': {
+        backgroundColor: 'rgba(255, 214, 0, 0.35)',
+    },
+    '.cm-searchMatch-selected': {
+        backgroundColor: 'var(--mdzip-accent-color)',
+        color: 'var(--mdzip-accent-foreground-color)',
+    },
 });
 const mdzipMarkdownHighlight = HighlightStyle.define([
     { tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
@@ -318,6 +471,27 @@ const hardBreakMarkerHighlight = ViewPlugin.fromClass(class {
 }, {
     decorations: value => value.decorations
 });
+// Matches raw HTML tags other than <br> (which hardBreakMarkerMatcher already
+// covers) so authors can visually distinguish raw HTML from Markdown prose.
+// Excludes autolinks like <https://example.com> — those have no space before
+// '>' and no closing '/', so the tag-name-only branch requires the char after
+// the name to be '>' directly, which a URL's ':' never satisfies.
+const htmlTagMarkerMatcher = new MatchDecorator({
+    regexp: /<\/?(?!br\b)[a-zA-Z][a-zA-Z0-9-]*(?:\s[^<>]*)?\/?>/gi,
+    decoration: Decoration.mark({ class: 'mdzip-hard-break-marker' })
+});
+const htmlTagMarkerHighlight = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.decorations = htmlTagMarkerMatcher.createDeco(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged) {
+            this.decorations = htmlTagMarkerMatcher.updateDeco(update, this.decorations);
+        }
+    }
+}, {
+    decorations: value => value.decorations
+});
 function injectStyles(doc) {
     const existing = doc.querySelector(`style[${STYLE_ATTR}]`);
     if (existing) {
@@ -452,6 +626,35 @@ function navNodeOrder(a, b) {
         return 1;
     return a.name.localeCompare(b.name);
 }
+// Browsers apply raw HTML width/height attributes as presentational sizing
+// hints, but the preview's `img { height: auto }` rule (for responsive
+// scaling) overrides that hint via the normal CSS cascade — so an author's
+// `<img height="300">` was silently ignored. Re-applying numeric, unitless
+// width/height attributes as inline pixel styles restores that sizing
+// without touching an author-supplied inline style.
+function applyRawHtmlImageSizeAttributes(image) {
+    const width = image.getAttribute('width');
+    if (width && /^\d+$/.test(width) && !image.style.width) {
+        image.style.width = `${width}px`;
+    }
+    const height = image.getAttribute('height');
+    if (height && /^\d+$/.test(height) && !image.style.height) {
+        image.style.height = `${height}px`;
+    }
+}
+// Maps the legacy raw HTML `align="left"|"right"` attribute (or the editor's
+// own wrap classes) to a layout direction, for images that skip archive
+// hydration — external, data, and fragment sources — and so never get a slot.
+function rawHtmlImageAlignClass(image) {
+    const align = image.getAttribute('align')?.toLowerCase();
+    if (align === 'left' || image.classList.contains('mdzip-image-wrap-left')) {
+        return 'mdzip-image-left';
+    }
+    if (align === 'right' || image.classList.contains('mdzip-image-wrap-right')) {
+        return 'mdzip-image-right';
+    }
+    return null;
+}
 export class MdzipWorkspaceView {
     constructor(container, options = {}) {
         this.workspace = null;
@@ -469,7 +672,12 @@ export class MdzipWorkspaceView {
         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();
@@ -489,6 +697,7 @@ export class MdzipWorkspaceView {
         this.cmEditor = null;
         this.readOnlyCompartment = new Compartment();
         this.lineNumbersCompartment = new Compartment();
+        this.searchCompartment = new Compartment();
         this.updatingCm = false;
         this.syncing = false;
         this.markdownExtensions = [];
@@ -545,6 +754,7 @@ export class MdzipWorkspaceView {
         this.elSourceBtn = q('[data-ref="source-btn"]');
         this.elSourceIcon = q('[data-ref="source-icon"]');
         this.elSaveBtn = q('[data-ref="save-btn"]');
+        this.elSearchBtn = q('[data-ref="search-btn"]');
         this.elZoomBtn = q('[data-ref="zoom-btn"]');
         this.elThemeControls = q('[data-ref="theme-controls"]');
         this.elDarkThemeBtn = q('[data-ref="dark-theme-btn"]');
@@ -813,6 +1023,49 @@ 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;
+    }
+    /**
+     * Opens CodeMirror's find/replace panel for the current document. Unlike
+     * {@link executeCommand}, this works in read-only (Viewer) hosts too —
+     * searching doesn't require edit access, only a visible source pane. If
+     * the current layout is preview-only, switches to split/source first so
+     * the panel has somewhere to render.
+     */
+    async openSearch() {
+        if (!this.controlPolicy.search) {
+            return false;
+        }
+        const snapshot = this.workspace?.snapshot();
+        if (!snapshot || snapshot.currentPathType !== 'markdown') {
+            return false;
+        }
+        if (this.layout === 'preview') {
+            const nextLayout = this.controlPolicy.layout.split
+                ? 'split'
+                : this.controlPolicy.layout.source ? 'source' : null;
+            if (!nextLayout) {
+                return false;
+            }
+            await this.setLayout(nextLayout);
+        }
+        const editor = await this.ensureCmEditor(true);
+        if (!editor) {
+            return false;
+        }
+        editor.focus();
+        return openSearchPanel(editor);
+    }
+    closeSearch() {
+        return this.cmEditor ? closeSearchPanel(this.cmEditor) : false;
+    }
     async convertToMdz() {
         if (!this.workspace || this.workspace.mode === 'read-only') {
             return false;
@@ -888,12 +1141,21 @@ export class MdzipWorkspaceView {
     setControls(controls) {
         const next = resolveMdzipControlPolicy(controls);
         const lineNumbersChanged = next.lineNumbers !== this.controlPolicy.lineNumbers;
+        const searchChanged = next.search !== this.controlPolicy.search;
         this.controlPolicy = next;
         if (lineNumbersChanged && this.cmEditor) {
             this.cmEditor.dispatch({
                 effects: this.lineNumbersCompartment.reconfigure(next.lineNumbers ? lineNumbers() : [])
             });
         }
+        if (searchChanged && this.cmEditor) {
+            if (!next.search) {
+                closeSearchPanel(this.cmEditor);
+            }
+            this.cmEditor.dispatch({
+                effects: this.searchCompartment.reconfigure(next.search ? [search({ top: true }), keymap.of(searchKeymap)] : [])
+            });
+        }
         const snapshot = this.workspace?.snapshot();
         if (snapshot) {
             this.layout = this.validLayoutForSnapshot(this.layout, snapshot);
@@ -1092,9 +1354,14 @@ export class MdzipWorkspaceView {
         const document = this.elPreviewContent.ownerDocument;
         const pending = [];
         for (const image of Array.from(this.elPreviewContent.querySelectorAll('img'))) {
+            applyRawHtmlImageSizeAttributes(image);
             const source = image.getAttribute('src');
             // Leave external, protocol-relative, data, and fragment URLs untouched.
             if (!source || /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(source)) {
+                const alignClass = rawHtmlImageAlignClass(image);
+                if (alignClass) {
+                    image.classList.add(alignClass);
+                }
                 continue;
             }
             // Drop the archive-relative src so the browser does not fetch the bad
@@ -1109,11 +1376,11 @@ export class MdzipWorkspaceView {
             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')) {
+            const alignClass = rawHtmlImageAlignClass(image);
+            if (alignClass === 'mdzip-image-left') {
                 slot.classList.add('mdzip-image-align-left');
             }
-            else if (align === 'right' || image.classList.contains('mdzip-image-wrap-right')) {
+            else if (alignClass === 'mdzip-image-right') {
                 slot.classList.add('mdzip-image-align-right');
             }
             image.parentNode?.insertBefore(slot, image);
@@ -1485,11 +1752,18 @@ export class MdzipWorkspaceView {
             doc: initialText,
             extensions: [
                 this.lineNumbersCompartment.of(this.controlPolicy.lineNumbers ? lineNumbers() : []),
+                this.searchCompartment.of(this.controlPolicy.search ? [search({ top: true }), keymap.of(searchKeymap)] : []),
                 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,
+                htmlTagMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
                 mdzipEditorTheme,
@@ -1583,24 +1857,28 @@ export class MdzipWorkspaceView {
         const showSaveControl = this.controlPolicy.save && snapshot.mode !== 'read-only';
         const showZoomControl = this.controlPolicy.zoom;
         const showColorSchemeControl = this.controlPolicy.colorScheme;
+        const showSearchControl = this.controlPolicy.search
+            && canShowSource && snapshot.currentPathType === 'markdown';
         const showEditControls = canEdit
             && snapshot.currentPathType === 'markdown'
             && this.layout !== 'preview'
             && hasFormattingControls(this.controlPolicy.formatting);
         const showToolbar = this.controlPolicy.toolbar
-            && (showNavigationControl || showLayoutControls
-                || showSaveControl || showZoomControl || showColorSchemeControl || showEditControls);
+            && (showNavigationControl || showLayoutControls || showSaveControl
+                || showZoomControl || showColorSchemeControl || showSearchControl || showEditControls);
         this.elDocumentStrip.hidden = !showTitleControl;
         this.elToolbar.hidden = !showToolbar;
         this.elToolbarLeft.hidden = !showNavigationControl;
         this.elEditToolbar.hidden = !showEditControls;
         this.elLayoutControls.hidden = !showLayoutControls;
-        this.elToolbarControls.hidden = !showSaveControl && !showZoomControl && !showColorSchemeControl;
+        this.elToolbarControls.hidden = !showSaveControl && !showZoomControl
+            && !showColorSchemeControl && !showSearchControl;
         this.elNavBtn.hidden = !showNavigationControl;
         this.elPreviewBtn.hidden = !this.controlPolicy.layout.preview;
         this.elSplitBtn.hidden = !this.controlPolicy.layout.split;
         this.elSourceBtn.hidden = !this.controlPolicy.layout.source;
         this.elSaveBtn.hidden = !showSaveControl;
+        this.elSearchBtn.hidden = !showSearchControl;
         this.elZoomBtn.hidden = !showZoomControl;
         this.elThemeControls.hidden = !showColorSchemeControl;
         this.elRoot.style.setProperty('--mdz-zoom', String(this.zoom));
@@ -1741,27 +2019,25 @@ export class MdzipWorkspaceView {
             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;
@@ -1814,9 +2090,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();
             }
         });
@@ -1824,8 +2100,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();
@@ -1887,6 +2163,9 @@ export class MdzipWorkspaceView {
                 void this.save();
             }
         });
+        this.elSearchBtn.addEventListener('click', () => {
+            void this.openSearch();
+        });
         this.elZoomBtn.addEventListener('click', (e) => {
             if (!this.controlPolicy.zoom) {
                 return;
@@ -2093,9 +2372,62 @@ export class MdzipWorkspaceView {
         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) {
@@ -2676,6 +3008,296 @@ export class MdzipWorkspaceView {
                 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();
@@ -2692,6 +3314,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;
@@ -3030,7 +3655,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.
@@ -3088,10 +3713,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;
@@ -3756,6 +4381,9 @@ const SHELL_HTML = `
     </div>
 
     <div class="toolbar-controls" data-ref="toolbar-controls">
+      <button type="button" class="icon-toggle" data-ref="search-btn" title="Find/replace (Mod-F)" aria-label="Find/replace">
+        ${SEARCH_ICON_HTML}
+      </button>
       <button type="button" class="icon-toggle" data-ref="save-btn" title="Save" aria-label="Save">
         ${SAVE_ICON_HTML}
       </button>