domma-cms 1.6.56 → 1.6.57

package/plugins/blog/admin/views/post-editor.js

@@ -4,10 +4,6 @@
  * @module blog/admin/views/post-editor
  */
 
-function escapeHtml(s) {
-    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function slugify(s) {
     return String(s ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
 }
@@ -58,14 +54,15 @@ const PREVIEW_PANEL = `
  * inserted here because the router renders the page template through _.render,
  * which eats {{…}}.
  *
+ * Its effect, bindings and an open Preview go when the editor does (`add`);
+ * Preview opens one at a time and closes when the address changes.
+ *
  * @param {HTMLElement} card
- * @param {{current: string, collect: () => object}} opts
- * @returns {Promise<{value: () => string}>}
+ * @param {{current: string, collect: () => object, catalogue: object, kit: object, add: Function}} opts
+ * @returns {{value: () => string, set: (id: string) => void, layout: object}}
  */
-async function mountLayoutCard(card, {current, collect}) {
+function mountLayoutCard(card, {current, collect, catalogue, kit, add}) {
     const BASE_URL = '/api/plugins/blog';
-    let catalogue = {postLayouts: [], postLayout: 'blog-post-classic'};
-    try { catalogue = await H.get(`${BASE_URL}/layouts`); } catch { /* the card still offers Site default */ }
     const known = catalogue.postLayouts ?? [];
     const defaultLabel = known.find(l => l.id === catalogue.postLayout)?.label ?? 'Classic';
     const thumbOf = (id) => (['blog-post-classic', 'blog-post-feature', 'blog-post-minimal', 'blog-post-sidebar', 'blog-post-split', 'blog-post-essay'].includes(id) ? id.slice(10) : 'custom');
@@ -78,16 +75,17 @@ async function mountLayoutCard(card, {current, collect}) {
 
     const layout = M.observable(current || '');
     const layoutChoices = M.observable([]);
-    M.effect(() => {
+    add(M.effect(() => {
         layoutChoices.value = choices.map(c => ({...c, id: c.id || 'default', checked: String(c.id === layout.value), cls: c.id === layout.value ? 'is-on' : ''}));
-    });
+    }));
     const data = {
         layoutChoices,
         layoutDesc: M.computed(() => choices.find(c => c.id === layout.value)?.description ?? '')
     };
 
     card.querySelector('.blog-layouts').innerHTML = LAYOUT_CHOICE;
-    M.applyBindings(data, card.querySelector('.card-body'));
+    const bound = M.applyBindings(data, card.querySelector('.card-body'));
+    add(() => bound.dispose());
     card.querySelector('.blog-layouts').addEventListener('click', (e) => {
         const b = e.target.closest('[data-layout]');
         if (b) layout.value = b.dataset.layout === 'default' ? '' : b.dataset.layout;
@@ -95,7 +93,17 @@ async function mountLayoutCard(card, {current, collect}) {
     card.querySelector('#btn-preview').addEventListener('click', () => openPreview());
 
     async function openPreview() {
-        const kit = await import('./kit.js?v=' + (new URL(import.meta.url).searchParams.get('v') ?? '1'));
+        const release = kit.claim('blog-preview');     // one at a time
+        if (!release) return;
+        try {
+            await preview(release);
+        } catch (err) {
+            release();
+            throw err;
+        }
+    }
+
+    async function preview(release) {
         const trial = M.observable(layout.peek() || catalogue.postLayout || 'blog-post-classic');
         const width = M.observable('desktop');
         const state = M.observable('');
@@ -105,11 +113,19 @@ async function mountLayoutCard(card, {current, collect}) {
             changed: M.computed(() => trial.value !== (layout.value || catalogue.postLayout))
         };
         const so = E.slideover({title: 'Preview', size: 'xl', position: 'right'});
+        let alive = true;
+        let handle = null;
+        let stop = null;
+        let disposeHelp = () => {};
+        // Leaving the editor closes it: a panel over the next screen catches its clicks.
+        const unhook = kit.closeOnLeave(so);
+        kit.onceClosed(so, () => { alive = false; release(); unhook(); stop?.(); handle?.dispose(); disposeHelp(); });
         const el = kit.fragment(PREVIEW_PANEL);
         so.element.appendChild(el);
-        const disposeHelp = await kit.scanHelp(el);
+        disposeHelp = await kit.scanHelp(el);
+        if (!alive) return;
         const frame = el.querySelector('iframe');
-        const handle = M.applyBindings(pdata, el, {
+        handle = M.applyBindings(pdata, el, {
             methods: {
                 desktop: () => { width.value = 'desktop'; },
                 tablet: () => { width.value = 'tablet'; },
@@ -123,19 +139,19 @@ async function mountLayoutCard(card, {current, collect}) {
         if (typeof I !== 'undefined' && I.scan) I.scan(el);
 
         let seq = 0;
-        const stop = M.effect(async () => {
+        stop = M.effect(async () => {
             const chosen = trial.value;
             const mine = ++seq;
             state.value = 'Rendering…';
             try {
                 const res = await H.post(`${BASE_URL}/preview`, {...collect(), layout: chosen});
-                if (mine !== seq) return;
+                if (mine !== seq || !alive) return;
                 if (res?.error) throw new Error(res.error);
                 // The page's own addresses (/dist/…, /plugins/…) resolve against the site.
                 frame.srcdoc = String(res.html).replace(/<head>/i, `<head><base href="${location.origin}/">`);
                 state.value = '';
             } catch (err) {
-                if (mine === seq) state.value = err?.message ?? 'Preview failed.';
+                if (mine === seq && alive) state.value = err?.message ?? 'Preview failed.';
             }
         });
         // Links inside the preview would navigate the frame away from the post.
@@ -149,11 +165,10 @@ async function mountLayoutCard(card, {current, collect}) {
                 }, true);
             } catch { /* not ours to reach */ }
         });
-        kit.onceClosed(so, () => { stop?.(); handle.dispose(); disposeHelp(); });
         so.open();
     }
 
-    return {value: () => layout.peek()};
+    return {value: () => layout.peek(), set: (id) => { layout.value = id || ''; }, layout};
 }
 
 const STATUS_CLASS = {published: 'badge-success', scheduled: 'badge-warning'};
@@ -260,7 +275,8 @@ function mountPills(input, {data, value, creatable = false, placeholder, empty,
 
     const wrapper = input.nextElementSibling;
     field = wrapper?.querySelector('.dm-pillbox-input');
-    if (!field) return {pending: () => '', destroy: () => box.destroy?.()};
+    const set = (v) => { box.setValue?.([...v]); selected.value = box.getValue(); };
+    if (!field) return {pending: () => '', set, destroy: () => box.destroy?.()};
 
     // Pillbox only opens once something is typed; a list you cannot see is a
     // list you cannot pick from. _filterOptions is Pillbox's own "narrow to
@@ -318,6 +334,8 @@ function mountPills(input, {data, value, creatable = false, placeholder, empty,
 
     return {
         pending: () => (creatable ? field.value.trim() : ''),
+        /** Put these values back (a picked-up draft). */
+        set,
         destroy: () => box.destroy?.()
     };
 }
@@ -326,11 +344,6 @@ export const postEditorView = {
     templateUrl: '/plugins/blog/admin/templates/post-editor.html',
 
     async onMount($container) {
-        // Help (?) popovers, loaded at run time - a plugin must not import admin/.
-        // Scanned now, before anything below reshapes the form.
-        import('/admin/js/lib/help-popover.js')
-            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
-            .catch(() => null);
         import(`./settings-cog.js?v=${ASSET_VERSION}`)
             .then(m => m.addSettingsCog($container, '.view-header-actions'))
             .catch(() => { /* no cog is better than no screen */ });
@@ -339,34 +352,87 @@ export const postEditorView = {
         // function object, so this view opened blank on every edit and Save
         // created a duplicate. Read the slug off the hash, as every core editor
         // view does.
-        const routeMatch = location.hash.match(/^#\/plugins\/blog\/posts\/([^?#]+)/);
+        const routeMatch = location.hash.match(/^#\/plugins\/blog\/posts\/([^?#/]+)/);
         const routeId = routeMatch ? decodeURIComponent(routeMatch[1]) : null;
         // `let`: a new post becomes an existing one on its first Save.
         let id = routeId && routeId !== 'new' ? routeId : null;
         let isEdit = Boolean(id);
 
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const {draftState, restoreQuestion} = kit.draftLib;
+        // Everything below is torn down when the hash leaves this editor (the
+        // router has no unmount) - or when another post's editor mounts.
+        const add = kit.viewScope('editor', /^#\/plugins\/blog\/posts\/[^/?#]+$/);
+        const here = add.here;
+        const root = $container.get(0);
+        const editorEl = root.querySelector('.blog-editor');
+        const slot = root.querySelector('.blog-loading');
+        const draftKey = (pid) => `post.${pid || 'new'}`;
+
+        // ---- Load: a skeleton until the post, the categories, tags and layouts are in ----
         let post = null;
         let categories = [];
-        let featuredImageUrl = '';
-
+        let allPosts = [];
+        let catalogue = {postLayouts: [], postLayout: 'blog-post-classic'};
+        let missing = false;
         try {
-            const catsRes = await H.get(`${BASE}/categories`).catch(() => ({ data: [] }));
-            categories = catsRes.data ?? catsRes ?? [];
+            const [catsRes, postRes, postsRes, layouts] = await kit.withSkeleton(slot, Promise.all([
+                H.get(`${BASE}/categories`).catch(() => []),
+                isEdit ? H.get(`${BASE}/posts/${encodeURIComponent(id)}`).catch((err) => {
+                    if (err?.status === 404 || /not found/i.test(err?.message ?? '')) { missing = true; return null; }
+                    throw err;
+                }) : null,
+                H.get(`${BASE}/posts`).catch(() => []),
+                H.get(`${BASE}/layouts`).catch(() => null)
+            ]));
+            categories = catsRes?.data ?? (Array.isArray(catsRes) ? catsRes : []);
+            if (isEdit && !missing && /not found/i.test(String(postRes?.error ?? ''))) missing = true;
+            if (isEdit && !missing) {
+                if (!postRes || postRes.error) throw new Error(postRes?.error ?? 'no post');
+                post = postRes.data ?? postRes;
+            }
+            allPosts = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+            if (layouts?.postLayouts) catalogue = layouts;
         } catch {
-            categories = [];
+            // No form is shown, so nothing can be saved over the post.
+            if (!here()) return;
+            E.toast('Failed to load the post.', {type: 'error'});
+            R.navigate('#/plugins/blog/posts');
+            return;
         }
+        if (!here()) return;
 
-        if (isEdit) {
-            try {
-                const res = await H.get(`${BASE}/posts/${id}`);
-                if (res.error) throw new Error(res.error);
-                post = res.data ?? res;
-            } catch {
-                E.toast('Failed to load post.', { type: 'error' });
+        // Deleted since it was opened (or since a draft of it was kept).
+        if (missing) {
+            const draft = kit.drafts.read(draftKey(id));
+            if (!draft) {
+                E.toast('That post no longer exists.', {type: 'error'});
                 R.navigate('#/plugins/blog/posts');
                 return;
             }
+            const throwAway = await kit.askThrowAway(restoreQuestion({what: 'post', name: draft.values?.title || draft.name || '', state: 'deleted'}));
+            // Left while asked: it stays for next time.
+            if (!here()) return;
+            if (!throwAway && kit.drafts.read(draftKey(null))) {
+                // There is already an unsaved NEW post: starting this one again would replace it.
+                const replace = await E.confirm('You also have an unsaved new post. Starting this one again replaces it. Replace it?',
+                    {confirmText: 'Replace it', cancelText: 'Keep both for now'});
+                if (!here()) return;
+                if (!replace) { R.navigate('#/plugins/blog/posts'); return; }   // both drafts stay
+            }
+            kit.drafts.drop(draftKey(id));
+            if (!throwAway) {
+                // Started again as new: no age, and the new editor takes it without asking again.
+                kit.drafts.keep(draftKey(null), {id: null, name: '', values: draft.values, was: ''});
+                kit.handOff('restore-new', '1');
+                R.navigate('#/plugins/blog/posts/new');
+            } else {
+                R.navigate('#/plugins/blog/posts');
+            }
+            return;
         }
+        if (slot) slot.hidden = true;
+        if (editorEl) editorEl.hidden = false;
 
         const titleEl       = $container.find('#editor-title').get(0);
         const postTitleEl   = $container.find('#post-title').get(0);
@@ -384,6 +450,7 @@ export const postEditorView = {
         const imagePreviewEl = $container.find('#featured-image-preview').get(0);
         const clearImageBtn = $container.find('#btn-clear-image').get(0);
 
+        let featuredImageUrl = '';
         if (titleEl) titleEl.textContent = isEdit ? 'Editing post' : 'New post';
 
         if (isEdit && post) {
@@ -395,8 +462,8 @@ export const postEditorView = {
             if (seoDescEl)   seoDescEl.value   = post.seo?.description ?? '';
             featuredImageUrl = post.featuredImage ?? '';
             renderImagePreview();
-        } else {
-            if (slugAutoEl) slugAutoEl.checked = true;
+        } else if (slugAutoEl) {
+            slugAutoEl.checked = true;
         }
 
         function renderImagePreview() {
@@ -409,22 +476,21 @@ export const postEditorView = {
                 img.className = 'blog-image-preview';
                 imagePreviewEl.appendChild(img);
                 if (clearImageBtn) clearImageBtn.classList.remove('blog-hidden');
-            } else {
-                if (clearImageBtn) clearImageBtn.classList.add('blog-hidden');
+            } else if (clearImageBtn) {
+                clearImageBtn.classList.add('blog-hidden');
             }
         }
 
         // ---- Status, categories and tags (domma-reactive) ----
-        const disposers = [];
         const stamps = mountStatusCard($container.find('#status-card').get(0));
         stamps.set(post);
-        disposers.push(() => stamps.dispose());
+        add(() => stamps.dispose());
 
         // A category deleted since the post was saved has no name to show; it
         // is kept as it was rather than silently dropped on the next save.
         const knownIds = new Set(categories.map(c => c.id));
         const postCats = Array.isArray(post?.categories) ? post.categories : [];
-        const unknownCats = postCats.filter(cid => !knownIds.has(cid));
+        let unknownCats = postCats.filter(cid => !knownIds.has(cid));
         const selectedCats = M.observable([]);
         const cats = catsEl ? mountPills(catsEl, {
             data: categories.map(c => ({value: c.id, label: c.name ?? c.slug ?? c.id})),
@@ -434,20 +500,15 @@ export const postEditorView = {
             selected: selectedCats
         }) : null;
         if (!categories.length) $container.find('#categories-note').get(0)?.classList.remove('blog-hidden');
-        disposers.push(() => cats?.destroy());
+        add(() => cats?.destroy());
 
         // Suggestions: every tag already on a post, most used first.
-        let tagChoices = [];
-        try {
-            const res = await H.get(`${BASE}/posts`);
-            const all = res?.data ?? (Array.isArray(res) ? res : []);
-            const counts = new Map();
-            for (const p of all) for (const t of (Array.isArray(p.tags) ? p.tags : [])) {
-                const k = String(t).trim();
-                if (k) counts.set(k, (counts.get(k) ?? 0) + 1);
-            }
-            tagChoices = [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([t]) => ({value: t, label: t}));
-        } catch { /* free text still works */ }
+        const counts = new Map();
+        for (const p of allPosts) for (const t of (Array.isArray(p.tags) ? p.tags : [])) {
+            const k = String(t).trim();
+            if (k) counts.set(k, (counts.get(k) ?? 0) + 1);
+        }
+        const tagChoices = [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([t]) => ({value: t, label: t}));
         const postTags = Array.isArray(post?.tags) ? post.tags : String(post?.tags ?? '').split(',').map(t => t.trim()).filter(Boolean);
         const selectedTags = M.observable([]);
         const tags = tagsEl ? mountPills(tagsEl, {
@@ -458,11 +519,12 @@ export const postEditorView = {
             empty: 'New tag - press Enter to add it',
             selected: selectedTags
         }) : null;
-        disposers.push(() => tags?.destroy());
+        add(() => tags?.destroy());
 
-        const layoutCard = await mountLayoutCard($container.find('#layout-card').get(0), {
+        const layoutCard = mountLayoutCard($container.find('#layout-card').get(0), {
             current: post?.template ?? '',
-            collect: () => ({...collectValues(), id})
+            collect: () => ({...collectValues(), id}),
+            catalogue, kit, add
         });
 
         function collectValues() {
@@ -483,44 +545,17 @@ export const postEditorView = {
             };
         }
 
-        async function doSave(extra = {}) {
-            const body = { ...collectValues(), ...extra };
-            if (!body.title) {
-                E.toast('Title is required.', { type: 'error' });
-                postTitleEl?.focus();
-                return null;
-            }
-            try {
-                const res = isEdit
-                    ? await H.put(`${BASE}/posts/${id}`, body)
-                    : await H.post(`${BASE}/posts`, body);
-                if (res.error) throw new Error(res.error);
-                const saved = res.data ?? res;
-                // A new post is an existing one from here on: later saves
-                // update it, and the address says which post this is (no
-                // hashchange, so the view is not re-mounted).
-                if (!isEdit && saved?.id) {
-                    id = saved.id;
-                    isEdit = true;
-                    history.replaceState(history.state, '', `#/plugins/blog/posts/${encodeURIComponent(id)}`);
-                    if (titleEl) titleEl.textContent = 'Editing post';
-                }
-                post = saved;
-                stamps.set(saved);
-                baseline = JSON.stringify(collectValues());
-                setStatus(saved.status ?? status);
-                showSaved();
-                return saved;
-            } catch (err) {
-                E.toast(err?.message ?? 'Failed to save post.', { type: 'error' });
-                return null;
-            }
-        }
-
         // ---- Status, and whether anything is unsaved ----
         let status = post?.status ?? 'draft';
         let baseline = JSON.stringify(collectValues());
         let savedAt = null;
+        // The post as saved when editing began - a kept draft's age.
+        let was = post?.updatedAt ? `u:${post.updatedAt}` : '';
+        let discarded = false;      // Back, "leave without saving": nothing to keep
+        // This editor's mark on the drafts it keeps: a new post's draft
+        // (post.new) is dropped or moved only while it is still this one's.
+        const owner = `${Date.now().toString(36)}.${Math.random().toString(36).slice(2, 8)}`;
+        let saving = null;          // the save in flight - a second Save waits for it
         const saveStateEl = $container.find('#save-state').get(0);
         const draftsBtn = $container.find('#btn-drafts').get(0);
         const isDirty = () => JSON.stringify(collectValues()) !== baseline;
@@ -534,7 +569,7 @@ export const postEditorView = {
             const dirty = isDirty();
             saveStateEl.classList.toggle('is-dirty', dirty);
             saveStateEl.textContent = dirty
-                ? 'Unsaved changes'
+                ? (savedAt ? `Saved ${fmtTime(savedAt)} - changed since` : 'Unsaved changes')
                 : savedAt ? `Saved ${fmtTime(savedAt)}` : '';
         }
         function setStatus(next) {
@@ -547,38 +582,127 @@ export const postEditorView = {
         }
         setStatus(status);
 
+        // ---- Drafts: kept when the editor is left with changes, offered back next time ----
+        function keepDraft() {
+            if (discarded || !isDirty()) return false;
+            if (!id) {
+                // Never over another editor's unsaved new post.
+                const other = kit.drafts.read(draftKey(null));
+                if (other && other.owner !== owner) return false;
+            }
+            kit.drafts.keep(draftKey(id), {
+                id, owner, name: postTitleEl?.value?.trim() || post?.title || '', was,
+                values: {...collectValues(), slugAuto: Boolean(slugAutoEl?.checked)}
+            });
+            return true;
+        }
+        add(() => {
+            if (discarded || !isDirty()) return;
+            const kept = 'Your unsaved changes to the post are kept - open it again to pick them up.';
+            if (saving && !isEdit) {
+                // A new post's first save is still running: its draft is kept under the
+                // post's real id once it exists (doSave), so a New post opened meanwhile
+                // is never offered these values - saving them would make it twice.
+                const run = saving;
+                run.catch(() => null).then(() => {
+                    if (isEdit) return;                       // saved: doSave kept it under the id
+                    if (!keepDraft()) E.toast('Your unsaved new post could not be kept - another unsaved new post is waiting.', {type: 'warning'});
+                });
+                E.toast(kept, {type: 'info'});
+                return;
+            }
+            if (keepDraft()) E.toast(kept, {type: 'info'});
+            else E.toast('Your unsaved new post could not be kept - another unsaved new post is waiting.', {type: 'warning'});
+        });
+
+        async function doSave(extra = {}) {
+            if (saving) await saving.catch(() => null);
+            const values = collectValues();
+            const body = {...values, ...extra};
+            if (!body.title) {
+                if (here()) {
+                    E.toast('Title is required.', {type: 'error'});
+                    postTitleEl?.focus();
+                }
+                return null;
+            }
+            // What is sent: anything typed while it saves stays unsaved (the page stays open).
+            const sent = JSON.stringify(values);
+            const wasNew = !isEdit;
+            const run = (async () => (isEdit
+                ? H.put(`${BASE}/posts/${encodeURIComponent(id)}`, body)
+                : H.post(`${BASE}/posts`, body)))();
+            saving = run;
+            try {
+                const res = await run;
+                if (res.error) throw new Error(res.error);
+                const saved = res.data ?? res;
+                kit.pokeSidebar();
+                // A new post is an existing one from here on: later saves
+                // update it, and the address says which post this is (no
+                // hashchange, so the view is not re-mounted).
+                if (wasNew && saved?.id) {
+                    // Only this editor's draft of it: another New post may have kept its own since.
+                    if (kit.drafts.read(draftKey(null))?.owner === owner) kit.drafts.drop(draftKey(null));
+                    id = saved.id;
+                    isEdit = true;
+                    if (here()) history.replaceState(history.state, '', `#/plugins/blog/posts/${encodeURIComponent(id)}`);
+                    if (titleEl) titleEl.textContent = 'Editing post';
+                }
+                post = saved;
+                if (saved?.updatedAt) was = `u:${saved.updatedAt}`;
+                baseline = sent;
+                if (!isDirty()) kit.drafts.drop(draftKey(id));
+                else if (!here()) keepDraft();     // left while it saved: later edits kept under its id, aged from this save
+                if (!here()) return saved;
+                stamps.set(saved);
+                setStatus(saved.status ?? status);
+                showSaved();
+                return saved;
+            } catch (err) {
+                if (here()) E.toast(err?.message ?? 'Failed to save post.', {type: 'error'});
+                return null;
+            } finally {
+                if (saving === run) saving = null;
+            }
+        }
+
         // Anything typed, ticked or picked may change what would be saved.
         let queued = false;
         const recheck = () => {
             if (queued) return;
             queued = true;
-            queueMicrotask(() => { queued = false; refreshState(); });
+            queueMicrotask(() => { queued = false; if (here()) refreshState(); });
         };
-        ['input', 'change', 'click'].forEach(ev => $container.get(0).addEventListener(ev, recheck));
-        // A pill made with Enter fires none of those.
-        const stopPillWatch = M.effect(() => { selectedCats.value; selectedTags.value; recheck(); });
-        disposers.push(() => stopPillWatch?.());
+        ['input', 'change', 'click'].forEach(ev => root.addEventListener(ev, recheck));
+        // A pill made with Enter fires none of those; nor does picking a layout's binding.
+        add(M.effect(() => { selectedCats.value; selectedTags.value; layoutCard.layout.value; recheck(); }));
 
         async function save() {
-            if (await doSave()) E.toast(status === 'published' ? 'Saved - the live post is updated.' : 'Saved.', { type: 'success' });
+            const saved = await doSave();
+            if (saved && here()) E.toast(status === 'published' ? 'Saved - the live post is updated.' : 'Saved.', {type: 'success'});
         }
 
         async function goBack() {
-            if (isDirty() && !(await E.confirm('Leave without saving? Your changes to this post will be lost.'))) return;
-            baseline = JSON.stringify(collectValues());   // do not ask twice (beforeunload)
+            if (isDirty()) {
+                const ok = await E.confirm('Leave without saving? Your changes to this post will be lost.',
+                    {confirmText: 'Leave without saving', cancelText: 'Keep editing'});
+                if (!ok || !here()) return;
+                discarded = true;                     // asked and answered: no draft, no second question
+                kit.drafts.drop(draftKey(id));
+            }
             R.navigate('#/plugins/blog/posts');
         }
 
         $container.find('#btn-save').get(0)?.addEventListener('click', save);
         $container.find('#btn-back').get(0)?.addEventListener('click', goBack);
         draftsBtn?.addEventListener('click', async () => {
-            const saved = await doSave({ status: 'draft' });
-            if (saved) E.toast('Moved to drafts - it is no longer on the site.', { type: 'success' });
+            const saved = await doSave({status: 'draft'});
+            if (saved && here()) E.toast('Moved to drafts - it is no longer on the site.', {type: 'success'});
         });
 
-        // Ctrl/Cmd+S saves; a closing tab with unsaved work asks first. Both
-        // come off when the hash leaves this editor (the router has no unmount).
-        // The admin's own Ctrl+S (app.js) clicks the view's primary Save and
+        // Ctrl/Cmd+S saves; a closing tab with unsaved work asks first (and keeps
+        // a draft). The admin's own Ctrl+S (app.js) clicks the view's primary Save and
         // marks the event handled; saving again here made two requests - and
         // on a new post, two posts. This one is for an admin without it.
         const onKey = (e) => {
@@ -589,18 +713,14 @@ export const postEditorView = {
             }
         };
         const onUnload = (e) => {
-            if (isDirty()) { e.preventDefault(); e.returnValue = ''; }
+            if (isDirty() && !discarded) { keepDraft(); e.preventDefault(); e.returnValue = ''; }
         };
         document.addEventListener('keydown', onKey);
         window.addEventListener('beforeunload', onUnload);
-        const onHash = () => {
-            if (/^#\/plugins\/blog\/posts\/[^/]+$/.test(location.hash)) return;
+        add(() => {
             document.removeEventListener('keydown', onKey);
             window.removeEventListener('beforeunload', onUnload);
-            window.removeEventListener('hashchange', onHash);
-            disposers.splice(0).forEach(fn => { try { fn(); } catch { /* already gone */ } });
-        };
-        window.addEventListener('hashchange', onHash);
+        });
 
         if (postTitleEl) {
             postTitleEl.addEventListener('input', () => {
@@ -614,8 +734,8 @@ export const postEditorView = {
             slugAutoEl.addEventListener('change', () => {
                 if (!slugAutoEl.checked && isEdit && post?.status === 'published') {
                     if (slugWarnEl) slugWarnEl.classList.remove('blog-hidden');
-                } else {
-                    if (slugWarnEl) slugWarnEl.classList.add('blog-hidden');
+                } else if (slugWarnEl) {
+                    slugWarnEl.classList.add('blog-hidden');
                 }
                 if (slugAutoEl.checked && postTitleEl && postSlugEl) {
                     postSlugEl.value = slugify(postTitleEl.value);
@@ -638,14 +758,17 @@ export const postEditorView = {
                 if (!saved) return;
                 const savedId = saved.id ?? id;
                 try {
-                    const res = await H.post(`${BASE}/posts/${savedId}/publish`, {});
+                    const res = await H.post(`${BASE}/posts/${encodeURIComponent(savedId)}/publish`, {});
                     if (res.error) throw new Error(res.error);
                     post = res.data ?? res;
+                    if (post?.updatedAt) was = `u:${post.updatedAt}`;
+                    kit.pokeSidebar();
+                    if (!here()) return;
                     stamps.set(post);
                     setStatus('published');
-                    E.toast('Published - the post is live.', { type: 'success' });
+                    E.toast('Published - the post is live.', {type: 'success'});
                 } catch (err) {
-                    E.toast(err?.message ?? 'Failed to publish post.', { type: 'error' });
+                    if (here()) E.toast(err?.message ?? 'Failed to publish post.', {type: 'error'});
                 }
             });
         }
@@ -659,7 +782,7 @@ export const postEditorView = {
 
                 const publishedAt = schedAtEl?.value;
                 if (!publishedAt) {
-                    E.toast('Please select a scheduled date/time.', { type: 'error' });
+                    E.toast('Please select a scheduled date/time.', {type: 'error'});
                     if (scheduleEl) scheduleEl.classList.remove('blog-hidden');
                     return;
                 }
@@ -668,49 +791,69 @@ export const postEditorView = {
                 if (!saved) return;
                 const savedId = saved.id ?? id;
                 try {
-                    const res = await H.post(`${BASE}/posts/${savedId}/schedule`, { publishedAt });
+                    const res = await H.post(`${BASE}/posts/${encodeURIComponent(savedId)}/schedule`, {publishedAt});
                     if (res.error) throw new Error(res.error);
                     post = res.data ?? res;
+                    if (post?.updatedAt) was = `u:${post.updatedAt}`;
+                    kit.pokeSidebar();
+                    if (!here()) return;
                     stamps.set(post);
                     setStatus('scheduled');
                     if (scheduleEl) scheduleEl.classList.add('blog-hidden');
-                    E.toast(`Scheduled for ${fmtDateTime(publishedAt)}.`, { type: 'success' });
+                    E.toast(`Scheduled for ${fmtDateTime(publishedAt)}.`, {type: 'success'});
                 } catch (err) {
-                    E.toast(err?.message ?? 'Failed to schedule post.', { type: 'error' });
+                    if (here()) E.toast(err?.message ?? 'Failed to schedule post.', {type: 'error'});
                 }
             });
         }
 
-        const pickImageBtn = $container.find('#btn-pick-image').get(0);
-        if (pickImageBtn) {
-            pickImageBtn.addEventListener('click', () => openMediaPicker());
-        }
-        if (clearImageBtn) {
-            clearImageBtn.addEventListener('click', () => {
-                featuredImageUrl = '';
-                renderImagePreview();
-            });
-        }
+        $container.find('#btn-pick-image').get(0)?.addEventListener('click', () => openMediaPicker());
+        clearImageBtn?.addEventListener('click', () => {
+            featuredImageUrl = '';
+            renderImagePreview();
+            recheck();
+        });
 
+        /**
+         * The Featured Image picker: one at a time, a skeleton while the media
+         * library loads, closed (choosing nothing) when the editor is left.
+         */
         async function openMediaPicker() {
-            let media = [];
+            const release = kit.claim('blog-media');
+            if (!release) return;
+            let so = null;
             try {
-                const res = await H.get('/api/media');
-                media = (res.data ?? res ?? []).filter((m) => /\.(png|jpe?g|gif|webp|svg)$/i.test(m.name || m.url || ''));
-            } catch {
-                E.toast('Could not load media library.', { type: 'error' });
-                return;
-            }
-
-            const grid = document.createElement('div');
-            grid.className = 'blog-media-grid';
-
-            if (!media.length) {
-                const p = document.createElement('p');
-                p.className = 'text-muted p-3';
-                p.textContent = 'No images uploaded yet. Use the Media admin to upload one first.';
-                grid.appendChild(p);
-            } else {
+                const grid = document.createElement('div');
+                grid.className = 'blog-media-grid';
+                const wait = document.createElement('div');
+                wait.className = 'blog-loading';
+                wait.textContent = 'Loading the media library…';
+                const box = document.createElement('div');
+                box.append(wait, grid);
+                so = E.slideover({title: 'Pick Featured Image', size: 'lg', position: 'right'});
+                so.element.appendChild(box);
+                let open = true;
+                const unhook = kit.closeOnLeave(so);
+                kit.onceClosed(so, () => { open = false; unhook(); release(); });
+                so.open();
+
+                let media = [];
+                try {
+                    const res = await kit.withSkeleton(wait, H.get('/api/media'), 'tiles');
+                    media = (res?.data ?? res ?? []).filter((m) => /\.(png|jpe?g|gif|webp|svg)$/i.test(m.name || m.url || ''));
+                } catch {
+                    if (open) { E.toast('Could not load media library.', {type: 'error'}); so.close(); }
+                    return;
+                }
+                if (!open || !here()) return;
+                wait.remove();
+                if (!media.length) {
+                    const p = document.createElement('p');
+                    p.className = 'text-muted p-3';
+                    p.textContent = 'No images uploaded yet. Use the Media admin to upload one first.';
+                    grid.appendChild(p);
+                    return;
+                }
                 media.forEach((m) => {
                     const tile = document.createElement('button');
                     tile.type = 'button';
@@ -718,43 +861,70 @@ export const postEditorView = {
                     const img = document.createElement('img');
                     img.src = m.url;
                     img.alt = m.name;
-
                     const cap = document.createElement('span');
                     cap.textContent = m.name;
-
-                    tile.appendChild(img);
-                    tile.appendChild(cap);
+                    tile.append(img, cap);
                     tile.addEventListener('click', () => {
+                        if (!here()) return;
                         featuredImageUrl = m.url;
                         renderImagePreview();
-                        slideover.close();
+                        recheck();
+                        so.close();
                     });
                     grid.appendChild(tile);
                 });
+            } catch (err) {
+                if (!so) release();
+                throw err;
             }
-
-            // close() only hides the panel and destroy() tears the component down
-            // without detaching its element, so every trip to the media library
-            // used to leave another slideover in the document.
-            const slideover = E.slideover({
-                title: 'Pick Featured Image',
-                size: 'lg',
-                position: 'right',
-                content: grid,
-                onClose: () => setTimeout(() => {
-                    slideover.destroy();
-                    slideover.element?.remove();
-                }, 350)
-            });
-            slideover.open();
         }
 
-        // Again at the end: the plugin chrome rebuilds the header after the
-        // scan at the top, so its (?) would otherwise never appear. Markers
-        // already converted are skipped.
-        import('/admin/js/lib/help-popover.js')
-            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
-            .catch(() => null);
+        // Help (?) popovers last: the plugin chrome rebuilds the header after the
+        // view's template is in, and markers already converted are skipped.
+        // Overtaken while it loaded: register nothing - the lifetime is the new mount's now.
+        const offHelp = await kit.scanHelp(root);
+        if (!here()) { offHelp(); return; }
+        add(offHelp);
         Domma.icons.scan();
+
+        /** Put a kept draft's values back into the form. */
+        function restore(v) {
+            if (postTitleEl) postTitleEl.value = v.title ?? '';
+            if (postSlugEl) postSlugEl.value = v.slug ?? '';
+            if (slugAutoEl && 'slugAuto' in v) slugAutoEl.checked = Boolean(v.slugAuto);
+            if (excerptEl) excerptEl.value = v.excerpt ?? '';
+            if (contentEl) contentEl.value = v.content ?? '';
+            if (seoTitleEl) seoTitleEl.value = v.seo?.title ?? '';
+            if (seoDescEl) seoDescEl.value = v.seo?.description ?? '';
+            featuredImageUrl = v.featuredImage ?? '';
+            renderImagePreview();
+            layoutCard.set(v.template ?? '');
+            const vc = Array.isArray(v.categories) ? v.categories : [];
+            cats?.set(vc.filter(c => knownIds.has(c)));
+            unknownCats = vc.filter(c => !knownIds.has(c));
+            tags?.set(Array.isArray(v.tags) ? v.tags : []);
+            refreshState();
+        }
+
+        // A draft from last time, for this same post: "Throw away" drops it;
+        // Keep (and Escape) put it back. Removed only once answered - leaving
+        // while asked keeps it.
+        const draft = kit.drafts.read(draftKey(id));
+        if (draft) {
+            const handedOver = !isEdit && kit.takeHandOff('restore-new') === '1';
+            let throwAway = false;
+            if (!handedOver) {
+                const state = draftState({...draft, id}, isEdit ? post : null);
+                throwAway = await kit.askThrowAway(restoreQuestion({what: 'post', name: isEdit ? (post?.title || draft.name || '') : '', state, isNew: !isEdit}));
+                if (!here()) return;
+            }
+            kit.drafts.drop(draftKey(id));
+            if (!throwAway) {
+                restore(draft.values ?? {});
+                // A picked-up draft keeps its age: its values are still the older edits.
+                if (draft.was) was = draft.was;
+            }
+        }
+        if (here() && !isEdit) postTitleEl?.focus();
     }
 };