domma-cms 1.8.33 → 1.8.35

package/plugins/docs/admin/lib/versions.js

@@ -0,0 +1,192 @@
+/**
+ * Version history: every earlier version of a document, who saved it and
+ * when, a preview, and restore.
+ *
+ * A modal rather than a panel of the screen, because it is a detour: look,
+ * perhaps restore, go back to writing. The screen reloads the document off
+ * the modal's `close` event when something was restored.
+ *
+ * @module docs/admin/lib/versions
+ */
+
+import {docsApi, esc, sanitizeHtml, fetchBlob, downloadBlob} from '/plugins/docs/admin/lib/api.js';
+import {fileName} from '/plugins/docs/admin/lib/convert.js';
+import {pdfFacts} from '/plugins/docs/admin/lib/pdf-view.js';
+import {fmtDateTime} from '/plugins/_lib/admin/ui/dates.js';
+
+export class VersionHistory {
+    constructor() {
+        this.modal = null;
+        this.restored = false;
+    }
+
+    /**
+     * @param   {string} docId
+     * @param   {object} [opts]
+     * @param   {string} [opts.session]    this tab's edit session (restore needs the lock)
+     * @param   {boolean} [opts.canRestore] false when reading only
+     * @returns {Promise<object|null>} the modal
+     */
+    async show(docId, {session = '', canRestore = true} = {}) {
+        let versions;
+        try {
+            versions = await docsApi.versions(docId);
+        } catch (err) {
+            E.toast(err.message || 'Could not load version history', {type: 'error'});
+            return null;
+        }
+        this.restored = false;
+        const modal = E.modal({
+            title: 'Version history',
+            size: 'large',
+            scrollable: true,
+            buttons: [{id: 'close', text: 'Close', variant: 'secondary'}]
+        });
+        modal.element.appendChild(this._build(docId, versions, modal, {session, canRestore}));
+        // A closed modal is hidden, not removed: take it out once its close has run (2.10).
+        modal.element.addEventListener('close', () => setTimeout(() => {
+            try { modal.destroy?.(); } catch { /* gone */ }
+            modal.element?.remove();
+        }, 400), {once: true});
+        modal.open();
+        this.modal = modal;
+        return modal;
+    }
+
+    _build(docId, versions, modal, {session, canRestore}) {
+        const wrap = document.createElement('div');
+        wrap.className = 'docs-versions';
+        if (!versions.length) {
+            const empty = document.createElement('p');
+            empty.className = 'docs-versions__empty';
+            empty.textContent = 'No earlier versions yet. One is kept each time the content changes.';
+            wrap.appendChild(empty);
+            return wrap;
+        }
+        if (!canRestore) {
+            const note = document.createElement('p');
+            note.className = 'docs-versions__note';
+            note.textContent = 'You are reading this document, so you can look at earlier versions but not restore them.';
+            wrap.appendChild(note);
+        }
+
+        const list = document.createElement('div');
+        list.className = 'docs-versions__list';
+        const preview = document.createElement('div');
+        preview.className = 'docs-versions__preview';
+        preview.innerHTML = '<p class="docs-versions__hint">Choose a version to see it here.</p>';
+        wrap.append(list, preview);
+
+        versions.forEach((v, i) => {
+            const row = document.createElement('button');
+            row.type = 'button';
+            row.className = 'docs-version';
+            row.dataset.num = String(v.num);
+            const name = document.createElement('strong');
+            name.textContent = v.createdAt ? fmtDateTime(v.createdAt) : `Version ${v.num}`;
+            const meta = document.createElement('span');
+            meta.className = 'docs-version__when';
+            meta.textContent = [v.createdAt ? D(v.createdAt).fromNow() : '', v.savedByName ? `by ${v.savedByName}` : ''].filter(Boolean).join(' · ');
+            const excerpt = document.createElement('span');
+            excerpt.className = 'docs-version__preview';
+            // A PDF document's version is a file (2.13): say what it was, then what it said.
+            excerpt.textContent = v.format === 'pdf' ? [`PDF${pdfFacts(v.file) ? ` · ${pdfFacts(v.file)}` : ''}`, this._excerpt(v.content, 100)].filter(x => x && x !== 'Empty').join(' - ') : this._excerpt(v.content);
+            row.append(name, meta, excerpt);
+            row.addEventListener('click', () => {
+                list.querySelectorAll('.docs-version').forEach(r => r.classList.toggle('is-active', r === row));
+                this._preview(preview, docId, v, modal, {session, canRestore});
+            });
+            list.appendChild(row);
+            if (i === 0) queueMicrotask(() => row.click());
+        });
+
+        // Each version's menu (2.10): right-click a row or Shift+F10 on it. Click previews.
+        const byNum = new Map(versions.map(v => [String(v.num), v]));
+        const menu = E.contextMenu(list, {
+            cursor: 'glyph', match: '.docs-version', inherit: false, density: 'compact',
+            items: (el) => {
+                const v = byNum.get(el.dataset.num);
+                if (!v) return [];
+                const items = [
+                    {header: v.createdAt ? fmtDateTime(v.createdAt) : `Version ${v.num}`},
+                    {label: 'Preview', icon: 'eye', action: () => el.click()}
+                ];
+                if (v.format === 'pdf') items.push({label: 'Download this version', icon: 'download', action: () => this._downloadPdf(docId, v)});
+                if (canRestore) items.push({label: 'Restore this version…', icon: 'rotate-ccw', action: () => this._restore(docId, v, modal, session)});
+                return items;
+            }
+        });
+        modal.element.addEventListener('close', () => menu?.destroy?.(), {once: true});
+        return wrap;
+    }
+
+    _preview(host, docId, v, modal, {session, canRestore}) {
+        host.replaceChildren();
+        const bar = document.createElement('div');
+        bar.className = 'docs-versions__bar';
+        const label = document.createElement('span');
+        label.textContent = `Version ${v.num}${v.title ? ` - ${v.title}` : ''}`;
+        bar.appendChild(label);
+        if (canRestore) {
+            const restore = document.createElement('button');
+            restore.type = 'button';
+            restore.className = 'btn btn-sm btn-primary';
+            restore.textContent = 'Restore this version';
+            restore.addEventListener('click', () => this._restore(docId, v, modal, session));
+            bar.appendChild(restore);
+        }
+        const body = document.createElement('div');
+        if (v.format === 'pdf') {
+            // A PDF version (2.13): the file's facts, a download, and the text read out of it.
+            body.className = 'docs-versions__pdf';
+            const facts = document.createElement('div');
+            facts.className = 'docs-versions__facts';
+            facts.textContent = `PDF${pdfFacts(v.file) ? ` · ${pdfFacts(v.file)}` : ''}${v.file?.name ? ` · ${v.file.name}` : ''}`;
+            const dl = document.createElement('button');
+            dl.type = 'button';
+            dl.className = 'btn btn-sm btn-outline';
+            dl.textContent = 'Download this version';
+            dl.addEventListener('click', () => this._downloadPdf(docId, v));
+            const extract = document.createElement('div');
+            extract.className = 'docs-versions__extract';
+            extract.textContent = this._excerpt(v.content, 4000) === 'Empty' ? 'No text could be read from this file.' : this._excerpt(v.content, 4000);
+            body.append(facts, dl, extract);
+            host.append(bar, body);
+            return;
+        }
+        body.className = 'docs-versions__body docs-surface';
+        // Sanitised like any document going into the admin.
+        const html = String(v.content || '');
+        if (window.DOMPurify?.sanitize) body.innerHTML = sanitizeHtml(html);
+        else body.textContent = this._excerpt(html, 100000);
+        host.append(bar, body);
+    }
+
+    async _downloadPdf(docId, v) {
+        try {
+            downloadBlob(fileName(`${v.title || 'Untitled'} (version ${v.num})`, 'pdf'), await fetchBlob(docsApi.versionFileUrl(docId, v.num, {download: true})));
+        } catch (err) {
+            E.toast(err.message || 'Could not download that version', {type: 'error'});
+        }
+    }
+
+    async _restore(docId, version, modal, session) {
+        const ok = await E.confirm(`Restore the version from <strong>${esc(version.createdAt ? fmtDateTime(version.createdAt) : `#${version.num}`)}</strong>? What the document says now is kept as a version first.`,
+            {title: 'Restore version', confirmText: 'Restore'});
+        if (!ok) return;
+        try {
+            await docsApi.restoreVersion(docId, version.num, session);
+            this.restored = true;
+            E.toast('Version restored', {type: 'success'});
+            modal.close();
+        } catch (err) {
+            E.toast(err.message || 'Could not restore', {type: 'error'});
+        }
+    }
+
+    _excerpt(content, max = 160) {
+        const text = String(content || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+        if (!text) return 'Empty';
+        return text.length > max ? `${text.slice(0, max)}…` : text;
+    }
+}

package/plugins/docs/admin/templates/docs.html

@@ -0,0 +1,92 @@
+<!--
+  Docs - Home: a rail of places (Recent, Starred, Shared with me, My documents
+  and its folders, Templates, Trash) and the documents in the one chosen.
+
+  Bound with M.applyBindings (admin/views/docs.js). The card and folder
+  templates are inserted by the view: the router renders this file through
+  _.render before mounting it, which would replace any {{…}} here with nothing.
+-->
+<div class="docs-home" data-bind-class="railCollapsed.value && 'is-rail-collapsed'">
+
+  <aside class="docs-rail" aria-label="Docs places">
+    <button type="button" class="btn btn-primary docs-rail__new" data-on-click="openNewMenu" aria-haspopup="menu">
+      <span data-icon="plus" data-icon-size="16"></span> <span class="docs-rail__label">New</span>
+    </button>
+    <nav class="docs-rail__nav">
+      <div class="docs-rail__places">
+        <button type="button" class="docs-place" data-place="recent" data-bind-class="view.value === 'recent' && 'is-active'"><span data-icon="clock" data-icon-size="16"></span><span class="docs-rail__label">Recent</span></button>
+        <button type="button" class="docs-place" data-place="starred" data-bind-class="view.value === 'starred' && 'is-active'"><span data-icon="star" data-icon-size="16"></span><span class="docs-rail__label">Starred</span><span class="docs-place__count" data-bind-text="placeCounts.value.starred"></span></button>
+        <button type="button" class="docs-place" data-place="shared" data-bind-class="view.value === 'shared' && 'is-active'"><span data-icon="users" data-icon-size="16"></span><span class="docs-rail__label">Shared with me</span><span class="docs-place__count" data-bind-text="placeCounts.value.shared"></span></button>
+        <button type="button" class="docs-place" data-place="mine" data-bind-class="view.value === 'mine' && !folderId.value && 'is-active'"><span data-icon="folder-open" data-icon-size="16"></span><span class="docs-rail__label">My documents</span><span class="docs-place__count" data-bind-text="placeCounts.value.mine" title="Documents not in a folder"></span></button>
+        <button type="button" class="docs-place" data-place="templates" data-bind-class="view.value === 'templates' && 'is-active'"><span data-icon="layout" data-icon-size="16"></span><span class="docs-rail__label">Templates</span></button>
+        <button type="button" class="docs-place" data-place="trash" data-bind-class="view.value === 'trash' && 'is-active'"><span data-icon="trash" data-icon-size="16"></span><span class="docs-rail__label">Trash</span><span class="docs-place__count" data-bind-text="placeCounts.value.trash"></span></button>
+        <div class="docs-rail__ext"></div>
+      </div>
+      <div class="docs-rail__section">
+        <span class="docs-rail__label">Folders</span>
+        <span data-help-title="Folders" data-help="Folders are yours alone - documents shared with you appear under Shared with me instead. Right-click a folder (or use its menu) to add a subfolder, rename or delete it. Deleting a folder never deletes documents: they move up a level."></span>
+        <button type="button" class="btn btn-xs btn-ghost docs-rail__add" title="New folder" aria-label="New folder" data-on-click="newFolder">
+          <span data-icon="folder-plus" data-icon-size="14"></span>
+        </button>
+      </div>
+      <div class="docs-rail__folders" data-each="folderRows.value key=key"></div>
+    </nav>
+  </aside>
+
+  <section class="docs-main" aria-labelledby="docs-main-title">
+    <div class="docs-main__bar">
+      <button type="button" class="btn btn-sm btn-ghost docs-main__rail-toggle" data-on-click="toggleRail"
+              title="Show or hide the side panel" aria-label="Show or hide the side panel">
+        <span data-icon="sidebar" data-icon-size="16"></span>
+      </button>
+      <h2 class="docs-main__title" id="docs-main-title">
+        <span data-bind-text="viewTitle.value"></span>
+        <span class="docs-main__count" data-bind-text="countText.value"></span>
+      </h2>
+        <span class="docs-main__help" data-help-title="Places" data-help="Recent is what you opened lately; Starred what you starred (the star on a card or in a document). Shared with me holds what other people shared with you, to view, suggest in or edit. My documents and its folders are yours. Templates start new documents. Trash keeps what you threw away for a while. Right-click a document, template or folder - or its ⋮, or Shift+F10 - for everything you can do to it. New and Import are in the banner above; you can also drop files on the list. A PDF you add is kept as it is - shared, linked, filed and versioned like any document, and shown in the browser's own viewer."></span>
+      <div class="docs-main__search" data-bind-hidden="isExt.value">
+        <span data-icon="search" data-icon-size="14"></span>
+        <input type="search" class="form-input form-input-sm" placeholder="Search documents"
+               aria-label="Search documents" data-model="query.value">
+        <span data-help-title="Search" data-help="Matches titles and the text of documents in the place you are looking at. Press / to jump here."></span>
+      </div>
+      <select class="form-input form-input-sm docs-main__sort" aria-label="Sort by" data-model="sort.value" data-bind-hidden="isTemplates.value || isExt.value">
+        <option value="updated">Last modified</option>
+        <option value="opened">Last opened by me</option>
+        <option value="title">Title</option>
+        <option value="created">Created</option>
+      </select>
+      <div class="docs-main__layout" role="group" aria-label="Layout" data-bind-hidden="isExt.value">
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="gridLayout" title="Grid" aria-label="Grid"
+                data-bind-class="layout.value === 'grid' && 'is-on'"><span data-icon="grid" data-icon-size="16"></span></button>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="listLayout" title="List" aria-label="List"
+                data-bind-class="layout.value === 'list' && 'is-on'"><span data-icon="list" data-icon-size="16"></span></button>
+      </div>
+    </div>
+
+    <div class="docs-trash-note" data-bind-hidden="!isTrash.value" hidden>
+      <span data-bind-text="trashNote.value"></span>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="emptyTrash" data-bind-disabled="!rows.value.length">Empty Trash</button>
+    </div>
+
+    <div class="docs-main__body" data-bind-class="bodyClass.value">
+      <div class="docs-drop" aria-hidden="true">
+        <span data-icon="upload" data-icon-size="32"></span>
+        <span>Drop .md, .html, .txt or .pdf files to add them</span>
+      </div>
+      <div class="docs-empty" data-bind-hidden="!showEmpty.value" hidden>
+        <span data-icon="file-text" data-icon-size="40"></span>
+        <p data-bind-text="emptyText.value"></p>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="newDoc" data-bind-hidden="!canCreateHere.value">
+          <span data-icon="plus" data-icon-size="14"></span> New document
+        </button>
+      </div>
+      <!-- A skeleton while a place's list first loads (admin/js/lib/loading.js); a reload keeps the list on screen. -->
+      <div class="docs-loading dm-loading-slot" data-bind-hidden="!skeleton.value">Loading…</div>
+      <div class="docs-cards" data-bind-hidden="isTemplates.value || isExt.value" data-each="rows.value key=id"></div>
+      <div class="docs-cards docs-cards--templates" data-bind-hidden="!isTemplates.value" data-each="templateRows.value key=id"></div>
+      <div class="docs-ext-view" data-bind-hidden="!isExt.value"></div>
+    </div>
+    <input type="file" class="docs-import-input" accept=".md,.markdown,.html,.htm,.txt,.pdf,text/markdown,text/html,text/plain,application/pdf" multiple hidden>
+  </section>
+</div>

package/plugins/docs/admin/templates/editor.html

@@ -0,0 +1,86 @@
+<!--
+  Docs - one document. Top bar, formatting toolbar, the page, an Outline
+  panel and a status line. Bound with M.applyBindings (admin/views/editor.js);
+  the Outline's item template is inserted by the view (the router's _.render
+  would empty any {{…}} here).
+-->
+<div class="docs-ed" data-bind-class="edClass.value">
+
+  <header class="docs-ed__top">
+    <button type="button" class="btn btn-sm btn-ghost docs-ed__back" data-on-click="back" title="All documents" aria-label="All documents">
+      <span data-icon="arrow-left" data-icon-size="18"></span>
+    </button>
+    <div class="docs-ed__titlebox">
+      <input class="docs-ed__title" id="docs-ed-title" aria-label="Document title" placeholder="Untitled"
+             data-model="title.value" data-bind-readonly="titleLocked.value" maxlength="200" autocomplete="off">
+      <div class="docs-ed__crumbs">
+        <span data-bind-text="whereText.value"></span>
+        <span class="docs-ed__save" data-bind-class="saveClass.value" data-bind-text="saveState.value" aria-live="polite"></span>
+      </div>
+    </div>
+    <button type="button" class="btn btn-sm btn-ghost docs-ed__star" data-on-click="toggleStar"
+            data-bind-class="starred.value && 'is-on'" data-bind-title="starTitle.value" aria-label="Star">
+      <span data-icon="star" data-icon-size="18"></span>
+    </button>
+
+    <div class="docs-ed__status-chips">
+      <span class="docs-chip docs-chip--locked" data-bind-hidden="!lockedBy.value" hidden>
+        <span data-icon="lock" data-icon-size="12"></span> <span data-bind-text="lockText.value"></span>
+      </span>
+      <button type="button" class="btn btn-xs btn-outline" data-on-click="takeOver" data-bind-hidden="!canTakeOver.value" hidden data-bind-text="takeOverText.value">Take over</button>
+      <button type="button" class="btn btn-xs btn-primary" data-on-click="editNow" data-bind-hidden="!canEditNow.value" hidden>Edit now</button>
+      <span class="docs-chip" data-bind-hidden="!viewOnly.value" hidden>
+        <span data-icon="eye" data-icon-size="12"></span> View only
+      </span>
+      <span class="docs-chip docs-chip--locked" data-bind-hidden="!frozenText.value" data-bind-title="frozenText.value" hidden>
+        <span data-icon="lock" data-icon-size="12"></span> Protected
+      </span>
+      <span class="docs-chip docs-chip--pdf" data-bind-hidden="!isPdf.value" data-bind-title="pdfName.value" hidden>
+        <span data-icon="file" data-icon-size="12"></span> <span data-bind-text="pdfText.value"></span>
+      </span>
+      <span class="docs-chip docs-chip--danger" data-bind-hidden="!inTrash.value" hidden>In Trash</span>
+      <button type="button" class="btn btn-xs btn-outline" data-on-click="restoreFromTrash" data-bind-hidden="!canRestore.value" hidden>Restore</button>
+      <span data-help-title="Editing" data-help="One person edits a document at a time. While someone else has it open to edit, you see it read only, with their name here - it refreshes by itself, and Edit now appears when they close it. The owner can Take over; whatever the other person had not saved is kept for them as a copy."></span>
+    </div>
+
+    <div class="docs-ed__actions">
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="toggleOutline" title="Outline" aria-label="Outline"
+              data-bind-class="outlineOpen.value && 'is-on'"><span data-icon="list" data-icon-size="16"></span></button>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="find" title="Find and replace (Ctrl+F)" aria-label="Find and replace">
+        <span data-icon="search" data-icon-size="16"></span></button>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="history" title="Version history" aria-label="Version history">
+        <span data-icon="clock" data-icon-size="16"></span></button>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="toggleFocus" title="Focus mode (Ctrl+Shift+F)" aria-label="Focus mode"
+              data-bind-class="focus.value && 'is-on'"><span data-icon="maximize" data-icon-size="16"></span></button>
+      <button type="button" class="btn btn-sm btn-primary docs-ed__share" data-on-click="share" data-bind-hidden="!canShare.value" hidden>
+        <span data-icon="user-plus" data-icon-size="14"></span> Share
+      </button>
+      <button type="button" class="btn btn-sm btn-ghost docs-ed__more" title="More" aria-label="More actions" aria-haspopup="menu">
+        <span data-icon="more-vertical" data-icon-size="16"></span>
+      </button>
+    </div>
+  </header>
+
+  <div class="docs-ed__toolbar"></div>
+
+  <div class="docs-ed__body">
+    <aside class="docs-outline" aria-label="Outline" data-bind-hidden="!outlineOpen.value">
+      <div class="docs-outline__head">Outline
+        <span data-help="The document's headings. Click one to jump to it. Headings come from the text style menu, or type # and a space at the start of a line."></span>
+      </div>
+      <p class="docs-outline__empty" data-bind-hidden="outlineRows.value.length" hidden>Headings you add appear here.</p>
+      <div class="docs-outline__list" data-each="outlineRows.value key=key"></div>
+    </aside>
+    <div class="docs-ed__canvas">
+      <!-- Shown while the document loads (a skeleton through admin/js/lib/loading.js); the view hides it after. -->
+      <div class="docs-ed__loading dm-loading-slot">Loading…</div>
+      <div class="docs-page"></div>
+    </div>
+    <aside class="docs-ed__side" data-bind-hidden="!sideOpen.value" hidden></aside>
+  </div>
+
+  <footer class="docs-ed__foot">
+    <span data-bind-text="statsText.value"></span>
+    <span class="docs-ed__foot-right" data-bind-text="editedText.value"></span>
+  </footer>
+</div>