@mdzip/editor 1.3.8 → 1.3.12

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, 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 { 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,6 +47,7 @@ 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');
@@ -66,6 +68,7 @@ const ALL_FORMATTING_CONTROLS = {
     inlineCode: true,
     codeBlock: true,
     blockquote: true,
+    lineBreak: true,
     link: true,
     image: true
 };
@@ -79,6 +82,7 @@ const NO_FORMATTING_CONTROLS = {
     inlineCode: false,
     codeBlock: false,
     blockquote: false,
+    lineBreak: false,
     link: false,
     image: false
 };
@@ -228,6 +232,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 +252,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 +283,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 +302,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 +342,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 +398,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,6 +465,7 @@ export class MdzipWorkspaceView {
         this.metadataDialogOpen = false;
         this.titleDraft = '';
         this.conversionAction = null;
+        this.imageInsertDialogState = null;
         this.navPaneWidth = 280;
         this.splitRatio = 0.5;
         this.resizing = false;
@@ -422,6 +476,11 @@ export class MdzipWorkspaceView {
         this.pendingReplacePath = null;
         this.conversionHookPending = false;
         this.conversionDocumentGeneration = 0;
+        // Monotonic token bumped on every openArchive/openWorkspace call. The async
+        // parse for a superseded call must not win the race and overwrite the latest
+        // input, so each call captures its token and discards its result once a newer
+        // open has started.
+        this.openGeneration = 0;
         this.dragSourcePath = null;
         this.dragOverElement = null;
         this.tooltipState = null;
@@ -429,6 +488,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 = [];
@@ -453,6 +513,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
@@ -468,6 +531,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');
@@ -510,6 +574,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"]');
@@ -537,6 +609,7 @@ export class MdzipWorkspaceView {
         await this.openArchive(bytes, options);
     }
     async openArchive(bytes, options = {}) {
+        const generation = ++this.openGeneration;
         this.unsub?.();
         this.resetRenderingState();
         this.cmEditor?.destroy();
@@ -546,6 +619,11 @@ export class MdzipWorkspaceView {
         this.conversionDocumentGeneration += 1;
         try {
             const ws = await MdzipWorkspaceService.open(bytes, options);
+            if (generation !== this.openGeneration) {
+                // A newer open() started while this parse was in flight; discard this
+                // stale result so the latest input remains authoritative.
+                return;
+            }
             this.workspace = ws;
             this.replaceAssetSession(new MdzipAssetSession(ws, ws.snapshot().workspace.assets, this.elRoot.ownerDocument, {
                 cache: this.options.assetCache,
@@ -558,6 +636,9 @@ export class MdzipWorkspaceView {
             }
             this.layout = this.validLayoutForSnapshot(this.options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy), snap);
             await this.ensureCmEditor();
+            if (generation !== this.openGeneration) {
+                return;
+            }
             this.unsub = ws.subscribe((event) => {
                 if (event.changes.includes('asset')) {
                     this.replaceAssetSession(new MdzipAssetSession(ws, event.snapshot.workspace.assets, this.elRoot.ownerDocument, {
@@ -576,6 +657,9 @@ export class MdzipWorkspaceView {
             void this.notifyChanged(this.initialWorkspaceEvent(ws.snapshot()));
         }
         catch (error) {
+            if (generation !== this.openGeneration) {
+                return;
+            }
             this.options.onFailed?.(error);
         }
     }
@@ -606,6 +690,7 @@ export class MdzipWorkspaceView {
      * `ERR_LAZY_TEXT_UNAVAILABLE` instead of silently producing an empty file.
      */
     async openWorkspace(workspace, options = {}) {
+        const generation = ++this.openGeneration;
         this.unsub?.();
         this.resetRenderingState();
         this.cmEditor?.destroy();
@@ -615,6 +700,10 @@ export class MdzipWorkspaceView {
         this.conversionDocumentGeneration += 1;
         try {
             const ws = await MdzipWorkspaceService.openWorkspace(workspace, options);
+            if (generation !== this.openGeneration) {
+                // A newer open started while this parse was in flight; discard it.
+                return;
+            }
             this.workspace = ws;
             this.replaceAssetSession(new MdzipAssetSession(ws, ws.snapshot().workspace.assets, this.elRoot.ownerDocument, {
                 cache: this.options.assetCache,
@@ -625,6 +714,9 @@ export class MdzipWorkspaceView {
             const snap = ws.snapshot();
             this.layout = this.validLayoutForSnapshot(this.options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy), snap);
             await this.ensureCmEditor();
+            if (generation !== this.openGeneration) {
+                return;
+            }
             this.unsub = ws.subscribe((event) => {
                 if (event.changes.includes('asset')) {
                     this.replaceAssetSession(new MdzipAssetSession(ws, event.snapshot.workspace.assets, this.elRoot.ownerDocument, {
@@ -645,6 +737,9 @@ export class MdzipWorkspaceView {
             void this.notifyChanged(this.initialWorkspaceEvent(ws.snapshot()));
         }
         catch (error) {
+            if (generation !== this.openGeneration) {
+                return;
+            }
             this.options.onFailed?.(error);
         }
     }
@@ -703,12 +798,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();
@@ -737,6 +832,7 @@ export class MdzipWorkspaceView {
     }
     destroy() {
         this.conversionDocumentGeneration += 1;
+        this.resolveImageInsertDialog(null);
         try {
             this.unsub?.();
         }
@@ -783,6 +879,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.
@@ -840,6 +985,7 @@ export class MdzipWorkspaceView {
             // mounted extension handles.
             return;
         }
+        const animateImageHydration = this.shouldAnimateImageHydration(memo, snapshot);
         this.previewAbort?.abort();
         this.previewAbort = null;
         this.destroyPreviewHandles();
@@ -888,14 +1034,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;
@@ -905,17 +1051,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);
@@ -929,7 +1086,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;
@@ -945,9 +1102,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 });
@@ -980,13 +1148,12 @@ 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));
                 }
-                const clear = () => image.classList.remove('mdzip-image-loading');
-                image.addEventListener('load', clear, { once: true });
-                image.addEventListener('error', clear, { once: true });
+                this.attachImageLoadHandlers(image, source, resolved.url, context, generation);
                 image.setAttribute('src', resolved.url);
                 this.openImageSlot(slot);
                 settle();
@@ -1007,9 +1174,59 @@ 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');
     }
+    /**
+     * Wires `<img>` load/error handling for a resolved archive image.
+     *
+     * `resolveImage()` already succeeded, so an `error` here is environmental
+     * rather than a missing asset — most often a host whose CSP `img-src` blocks
+     * the `blob:` object URL. When that happens we retry once with a `data:` URL
+     * (which many such hosts still permit), and only if that also fails do we
+     * surface the failure via `onFailed` instead of leaving a silent blank box.
+     */
+    attachImageLoadHandlers(image, source, resolvedUrl, context, generation) {
+        const clear = () => image.classList.remove('mdzip-image-loading');
+        image.addEventListener('load', clear, { once: true });
+        image.addEventListener('error', () => {
+            const session = this.assetSession;
+            if (resolvedUrl.startsWith('blob:') && session) {
+                void session.resolveDataUrl(source, context.currentPath).then((dataUrl) => {
+                    if (generation !== this.previewGeneration || context.signal.aborted) {
+                        clear();
+                        return;
+                    }
+                    if (dataUrl && dataUrl !== resolvedUrl) {
+                        image.addEventListener('load', clear, { once: true });
+                        image.addEventListener('error', () => {
+                            clear();
+                            this.reportImageLoadFailure(source);
+                        }, { once: true });
+                        image.setAttribute('src', dataUrl);
+                        return;
+                    }
+                    clear();
+                    this.reportImageLoadFailure(source);
+                }).catch((error) => {
+                    clear();
+                    this.options.onFailed?.(error);
+                });
+                return;
+            }
+            clear();
+            this.reportImageLoadFailure(source);
+        }, { once: true });
+    }
+    reportImageLoadFailure(source) {
+        this.options.onFailed?.(new Error(`Failed to load archive image "${source}". When embedding the editor in a `
+            + 'CSP-restricted host (e.g. a VS Code webview), ensure img-src permits '
+            + 'blob: and data:.'));
+    }
     mountPreviewExtensions(context, generation) {
         for (const extension of this.markdownExtensions) {
             if (!extension.mount) {
@@ -1267,11 +1484,12 @@ export class MdzipWorkspaceView {
         const state = EditorState.create({
             doc: initialText,
             extensions: [
-                ...(this.controlPolicy.lineNumbers ? [lineNumbers()] : []),
+                this.lineNumbersCompartment.of(this.controlPolicy.lineNumbers ? lineNumbers() : []),
                 history(),
                 keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
                 markdown(),
                 syntaxHighlighting(mdzipMarkdownHighlight),
+                hardBreakMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
                 mdzipEditorTheme,
@@ -1427,8 +1645,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');
@@ -1445,7 +1679,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);
@@ -1455,7 +1689,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;
@@ -1492,6 +1728,18 @@ 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);
@@ -1686,7 +1934,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) => {
@@ -1829,6 +2077,19 @@ 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]');
@@ -2214,7 +2475,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();
@@ -2240,7 +2501,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();
@@ -2260,37 +2521,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();
@@ -2298,6 +2567,115 @@ 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;
+        }
+    }
     applyMarkdownFormat(format) {
         const editor = this.cmEditor;
         const snapshot = this.workspace?.snapshot();
@@ -2340,8 +2718,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;
@@ -2358,6 +2739,7 @@ export class MdzipWorkspaceView {
             orderedList: formatting.orderedList,
             code: formatting.inlineCode || formatting.codeBlock,
             blockquote: formatting.blockquote,
+            lineBreak: formatting.lineBreak,
             link: formatting.link,
             image: formatting.image
         };
@@ -2418,6 +2800,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) {
@@ -2913,7 +3327,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;
@@ -2923,7 +3337,7 @@ export class MdzipWorkspaceView {
                     editor.dispatch({ selection: { anchor: pos } });
                 }
             }
-            await this.insertImageFile(file);
+            await this.insertImageFile(file, 'drop');
         }
         catch (error) {
             this.options.onFailed?.(error);
@@ -3137,6 +3551,7 @@ function hasFormattingControls(policy) {
         || policy.inlineCode
         || policy.codeBlock
         || policy.blockquote
+        || policy.lineBreak
         || policy.link
         || policy.image;
 }
@@ -3156,6 +3571,8 @@ function markdownCommandFromToolbarFormat(format) {
         case 'code-block':
         case 'link':
             return format;
+        case 'line-break':
+            return 'insert-line-break';
         case 'strike':
             return 'strikethrough';
         case 'code':
@@ -3183,6 +3600,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;
@@ -3247,6 +3728,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">
@@ -3353,6 +3835,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">