@mdzip/editor 1.3.19 → 1.3.21

package/dist/view.js

@@ -7,6 +7,7 @@ import { Decoration, EditorView, MatchDecorator, ViewPlugin, dropCursor, keymap,
 import { tags } from '@lezer/highlight';
 import { Bold, Check, 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, SpellCheck, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
+import { buildPackedArchiveBytes, isMarkdownArchivePath, resolveMarkdownEntryPoint } from './archive-utils.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';
@@ -146,6 +147,16 @@ function renderContextMenuItems(items) {
         .map((item) => (item === null ? MENU_SEPARATOR_HTML : renderContextMenuItem(item)))
         .join('');
 }
+const PREVIEW_MAX_WIDTH_ALIASES = {
+    narrow: 650,
+    default: 900,
+    wide: 1200,
+};
+function resolvePreviewMaxWidthPx(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? value : PREVIEW_MAX_WIDTH_ALIASES[value];
+}
 const ALL_HEADINGS = [1, 2, 3, 4, 5, 6];
 const ALL_LAYOUT_CONTROLS = {
     source: true,
@@ -379,21 +390,29 @@ const mdzipEditorTheme = EditorView.theme({
         overflow: 'auto',
     },
     '.cm-content': {
-        padding: 'var(--mdzip-editor-content-padding, var(--mdzip-density-editor-content-padding, 36px 48px))',
+        padding: 'var(--mdzip-editor-content-padding, var(--mdzip-density-editor-content-padding, 36px 48px 36px 16px))',
         caretColor: 'var(--mdzip-editor-cursor-color)',
         overflowWrap: 'anywhere',
         wordBreak: 'normal',
     },
     '.cm-gutters': {
-        background: 'var(--mdzip-widget-background-color)',
-        borderRight: '1px solid var(--mdzip-border-color)',
+        background: 'transparent',
+        border: 'none',
         color: 'var(--mdzip-line-number-foreground-color)',
         fontFamily: '"Cascadia Code", Consolas, monospace',
-        minWidth: '52px',
+        fontSize: '0.85em',
+        // CodeMirror force-sets each gutter element's height to match its
+        // content line's rendered height, but a unitless/inherited line-height
+        // resolves against the gutter's own (smaller) font-size — leaving the
+        // number shorter than its box and rendering top-aligned instead of
+        // matching the content line's baseline. Pin it to the same absolute
+        // line-height as the content (fontSize '&' * the '.cm-scroller' 1.5
+        // multiplier) so both sit centered in equal-height boxes.
+        lineHeight: 'calc(16px * var(--mdz-zoom, 1) * 1.5)',
+        opacity: '0.65',
     },
     '.cm-lineNumbers .cm-gutterElement': {
         padding: '0 8px 0 4px',
-        minWidth: '44px',
     },
     '&.cm-focused .cm-cursor': {
         borderLeftColor: 'var(--mdzip-editor-cursor-color)',
@@ -679,11 +698,11 @@ function navNodeOrder(a, b) {
 function applyRawHtmlImageSizeAttributes(image) {
     const width = image.getAttribute('width');
     if (width && /^\d+$/.test(width) && !image.style.width) {
-        image.style.width = `${width}px`;
+        image.style.width = `calc(${width}px * var(--mdz-zoom, 1))`;
     }
     const height = image.getAttribute('height');
     if (height && /^\d+$/.test(height) && !image.style.height) {
-        image.style.height = `${height}px`;
+        image.style.height = `calc(${height}px * var(--mdz-zoom, 1))`;
     }
 }
 // Maps the legacy raw HTML `align="left"|"right"` attribute (or the editor's
@@ -713,6 +732,12 @@ export class MdzipWorkspaceView {
         this.titleDraft = '';
         this.conversionAction = null;
         this.imageInsertDialogState = null;
+        // Promise-based, like imageInsertDialogState — packFilesAsWorkspace is an
+        // explicit awaited call building a brand-new archive from an
+        // already-captured file list, so (unlike conversionAction's fire-and-forget
+        // trigger) there's no "currently open document" to race against and no
+        // de-dupe/staleness guard is needed.
+        this.packFilesDialogState = null;
         this.navPaneWidth = 280;
         this.splitRatio = 0.5;
         this.resizing = false;
@@ -774,6 +799,7 @@ export class MdzipWorkspaceView {
         this.imageHydrationAnimation = options.imageHydrationAnimation ?? 'auto';
         this.toolbarDensity = options.toolbarDensity ?? 'comfortable';
         this.contentDensity = options.contentDensity ?? 'comfortable';
+        this.previewMaxWidth = options.previewMaxWidth;
         this.layout = options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy);
         this.colorScheme = options.initialColorScheme
             ?? (container.ownerDocument.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
@@ -841,6 +867,11 @@ export class MdzipWorkspaceView {
         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.elPackFilesDialog = q('[data-ref="pack-files-dialog"]');
+        this.elPackFilesModeDocument = q('[data-ref="pack-files-mode-document"]');
+        this.elPackFilesModeProject = q('[data-ref="pack-files-mode-project"]');
+        this.elPackFilesEntrySelect = q('[data-ref="pack-files-entry"]');
+        this.elPackFilesConfirmBtn = q('[data-ref="pack-files-confirm-btn"]');
         this.elNavMenu = q('[data-ref="nav-menu"]');
         this.elNameDialog = q('[data-ref="name-dialog"]');
         this.elNameDialogHeading = q('[data-ref="name-dialog-heading"]');
@@ -1135,6 +1166,7 @@ export class MdzipWorkspaceView {
     destroy() {
         this.conversionDocumentGeneration += 1;
         this.resolveImageInsertDialog(null);
+        this.resolvePackFilesDialog(null);
         try {
             this.unsub?.();
         }
@@ -1191,6 +1223,14 @@ export class MdzipWorkspaceView {
         const next = resolveMdzipControlPolicy(controls);
         const lineNumbersChanged = next.lineNumbers !== this.controlPolicy.lineNumbers;
         const searchChanged = next.search !== this.controlPolicy.search;
+        // codeBlockTools chrome is only attached when the preview HTML actually
+        // re-mounts (mountPreviewHtml/mountProgressivePreview), which updatePreview()
+        // skips via its memo when nothing document-facing changed. Unlike
+        // lineNumbers/search (live CodeMirror compartment reconfigures), there's
+        // no live DOM toggle for already-rendered code blocks, so the memo has to
+        // be busted to pick up the new policy — same reason
+        // setImageHydrationAnimation calls resetPreviewState() below.
+        const codeBlockToolsChanged = next.codeBlockTools !== this.controlPolicy.codeBlockTools;
         this.controlPolicy = next;
         if (lineNumbersChanged && this.cmEditor) {
             this.cmEditor.dispatch({
@@ -1205,6 +1245,9 @@ export class MdzipWorkspaceView {
                 effects: this.searchCompartment.reconfigure(next.search ? [search({ top: true }), keymap.of(searchKeymap)] : [])
             });
         }
+        if (codeBlockToolsChanged) {
+            this.resetPreviewState();
+        }
         const snapshot = this.workspace?.snapshot();
         if (snapshot) {
             this.layout = this.validLayoutForSnapshot(this.layout, snapshot);
@@ -1230,6 +1273,19 @@ export class MdzipWorkspaceView {
         this.contentDensity = nextContentDensity;
         this.applyDensityClasses();
     }
+    /**
+     * Sets the preview reading-column width. Developer-facing only — there is
+     * no toolbar UI for this. Pass `undefined` to return to the built-in
+     * default (which scales with zoom); any other value is used exactly as
+     * given and does not scale with zoom (see {@link MdzipPreviewMaxWidth}).
+     */
+    setPreviewMaxWidth(value) {
+        if (value === this.previewMaxWidth) {
+            return;
+        }
+        this.previewMaxWidth = value;
+        this.render();
+    }
     setImageInsertOptions(options) {
         this.options.imageInsertMode = options.imageInsertMode;
         this.options.imageInsertHandler = options.imageInsertHandler;
@@ -2068,6 +2124,13 @@ export class MdzipWorkspaceView {
         this.elRoot.style.setProperty('--mdz-zoom', String(this.zoom));
         this.elRoot.style.setProperty('--nav-pane-width', `${this.navPaneWidth}px`);
         this.elRoot.style.setProperty('--split-edit-ratio', String(this.splitRatio));
+        const previewMaxWidthPx = resolvePreviewMaxWidthPx(this.previewMaxWidth);
+        if (previewMaxWidthPx === undefined) {
+            this.elRoot.style.removeProperty('--mdzip-preview-content-max-width');
+        }
+        else {
+            this.elRoot.style.setProperty('--mdzip-preview-content-max-width', `${previewMaxWidthPx}px`);
+        }
         this.elRoot.classList.toggle('resizing', this.resizing);
         this.elRoot.classList.toggle('mdzip-theme-dark', this.colorScheme === 'dark');
         this.elRoot.classList.toggle('mdzip-theme-light', this.colorScheme === 'light');
@@ -2202,6 +2265,16 @@ export class MdzipWorkspaceView {
             this.elImageInsertPositionSelect.value = 'inline';
             this.updateImageInsertOptionControls();
         }
+        this.elPackFilesDialog.hidden = this.packFilesDialogState === null;
+        if (this.packFilesDialogState) {
+            const { request } = this.packFilesDialogState;
+            this.elPackFilesEntrySelect.innerHTML = request.markdownFiles
+                .map((p) => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`)
+                .join('');
+            this.elPackFilesEntrySelect.value = request.suggestedEntryPoint;
+            this.elPackFilesModeDocument.checked = true;
+            this.elPackFilesModeProject.checked = false;
+        }
         this.elMetadataDialog.hidden = !this.metadataDialogOpen;
         if (this.contextMenuState) {
             const items = this.contextMenuState.kind === 'nav'
@@ -2570,6 +2643,13 @@ export class MdzipWorkspaceView {
             this.resetImageInsertSizeValue();
             this.updateImageInsertOptionControls();
         });
+        this.elPackFilesDialog.querySelector('[data-action="cancel-pack-files"]')
+            .addEventListener('click', () => {
+            this.resolvePackFilesDialog(null);
+        });
+        this.elPackFilesConfirmBtn.addEventListener('click', () => {
+            this.resolvePackFilesDialog(this.readPackFilesDialogDecision());
+        });
         this.elNavMenu.addEventListener('click', (e) => {
             e.stopPropagation();
             const item = e.target.closest('[data-menu-action]');
@@ -3072,6 +3152,86 @@ export class MdzipWorkspaceView {
         }
         this.elImageInput.click();
     }
+    /**
+     * Packs an already-collected file list (e.g. from a host folder picker)
+     * into a new .mdz workspace. With 0 or 1 Markdown files among `files`,
+     * packs Document mode immediately with no prompt. With more than one,
+     * asks `onPackRequested` (if set) to decide Document vs. Project mode and
+     * the entry point; falls back to a built-in dialog if the hook is absent,
+     * declines, or throws. Document mode opens the result in memory; Project
+     * mode returns the archive bytes without opening them, since only the
+     * host knows where a project archive should be saved.
+     */
+    async packFilesAsWorkspace(files, options = {}) {
+        const markdownFiles = files.filter((f) => isMarkdownArchivePath(f.path)).map((f) => f.path);
+        if (markdownFiles.length <= 1) {
+            const entryPoint = markdownFiles[0] ?? 'index.md';
+            return this.applyPackDecision(files, { mode: 'document', entryPoint }, options);
+        }
+        const suggestedEntryPoint = resolveMarkdownEntryPoint(markdownFiles);
+        const request = { files, markdownFiles, suggestedEntryPoint };
+        const hook = this.options.onPackRequested;
+        if (hook) {
+            const context = this.createPackFilesContext(files, options);
+            let applied = null;
+            const wrappedContext = {
+                applyDecision: async (decision) => {
+                    applied = await context.applyDecision(decision);
+                    return applied;
+                }
+            };
+            let handled = false;
+            try {
+                handled = await hook(request, wrappedContext);
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+            }
+            if (handled) {
+                return applied;
+            }
+        }
+        const decision = await this.openPackFilesDialog(request);
+        return decision ? this.applyPackDecision(files, decision, options) : null;
+    }
+    createPackFilesContext(files, options) {
+        return { applyDecision: (decision) => this.applyPackDecision(files, decision, options) };
+    }
+    async applyPackDecision(files, decision, options) {
+        const archiveBytes = await buildPackedArchiveBytes(files, {
+            mode: decision.mode,
+            entryPoint: decision.entryPoint,
+            title: options.title ?? 'document'
+        });
+        if (decision.mode === 'document') {
+            await this.open(archiveBytes, { mode: 'editable', fileName: options.fileName ?? 'document.mdz' });
+            return { mode: 'document', entryPoint: decision.entryPoint, archiveBytes, opened: true };
+        }
+        return { mode: 'project', entryPoint: decision.entryPoint, archiveBytes, opened: false };
+    }
+    openPackFilesDialog(request) {
+        return new Promise((resolve) => {
+            this.resolvePackFilesDialog(null); // cancel any prior pending dialog, same as image-insert
+            this.packFilesDialogState = { request, files: request.files, resolve };
+            this.render();
+            requestAnimationFrame(() => this.elPackFilesConfirmBtn.focus());
+        });
+    }
+    resolvePackFilesDialog(decision) {
+        const state = this.packFilesDialogState;
+        if (!state) {
+            return;
+        }
+        this.packFilesDialogState = null;
+        this.render();
+        state.resolve(decision);
+    }
+    readPackFilesDialogDecision() {
+        return {
+            mode: this.elPackFilesModeProject.checked ? 'project' : 'document',
+            entryPoint: this.elPackFilesEntrySelect.value
+        };
+    }
     async handlePaste(event) {
         const snapshot = this.workspace?.snapshot();
         if (!snapshot || snapshot.mode === 'read-only' || snapshot.currentPathType !== 'markdown') {
@@ -3891,6 +4051,14 @@ export class MdzipWorkspaceView {
     setZoom(value) {
         this.zoom = Math.max(0.5, Math.min(2.5, Math.round(value * 100) / 100));
         this.render();
+        // render() only updates the --mdz-zoom CSS variable; CodeMirror caches
+        // gutter/line-block heights from its own measure pass and has no way to
+        // observe a custom-property change (font-size grows but the scroller's
+        // own outer box doesn't, so no ResizeObserver fires either). Without
+        // this, gutter row heights stay pinned to their pre-zoom pixel values
+        // while .cm-line rows reflow normally, drifting the two further apart
+        // with every line.
+        this.cmEditor?.requestMeasure();
     }
     /**
      * Sets the active color scheme after construction.
@@ -4855,6 +5023,35 @@ const SHELL_HTML = `
     </div>
   </div>
 
+  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
+    <div class="title-dialog pack-files-dialog">
+      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
+      <p>These files contain more than one Markdown document. Choose how to package them.</p>
+      <fieldset class="pack-files-options">
+        <legend>Mode</legend>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="document"
+            data-ref="pack-files-mode-document" checked />
+          Document — one primary page; the rest are attached
+        </label>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="project"
+            data-ref="pack-files-mode-project" />
+          Project — a set of related documents
+        </label>
+      </fieldset>
+      <label class="pack-files-field">
+        <span>Entry point</span>
+        <select data-ref="pack-files-entry"></select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-pack-files">Cancel</button>
+        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</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">