@mdzip/editor 1.3.13 → 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, 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 { 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);
@@ -179,7 +181,8 @@ const CONTROL_PRESETS = {
         zoom: false,
         colorScheme: false,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: false
     },
     viewer: {
         preset: 'viewer',
@@ -193,7 +196,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: true
     },
     'standalone-editor': {
         preset: 'standalone-editor',
@@ -207,7 +211,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true
     },
     'hosted-editor': {
         preset: 'hosted-editor',
@@ -221,7 +226,8 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true
     }
 };
 export function resolveMdzipControlPolicy(controls) {
@@ -367,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],
@@ -398,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) {
@@ -532,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;
@@ -574,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 = [];
@@ -630,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"]');
@@ -907,6 +1032,40 @@ export class MdzipWorkspaceView {
         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;
@@ -982,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);
@@ -1186,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
@@ -1203,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);
@@ -1579,6 +1752,7 @@ 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') },
@@ -1589,6 +1763,7 @@ export class MdzipWorkspaceView {
                 markdown(),
                 syntaxHighlighting(mdzipMarkdownHighlight),
                 hardBreakMarkerHighlight,
+                htmlTagMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
                 mdzipEditorTheme,
@@ -1682,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));
@@ -1984,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;
@@ -4199,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>