domma-cms 1.8.32 → 1.8.34

package/plugins/docs/admin/lib/pdf-view.js

@@ -0,0 +1,126 @@
+/**
+ * A PDF document on its screen (2.13): the file in the browser's own viewer,
+ * what the document knows about it, and the actions a PDF has instead of a
+ * body - replace the file, download it.
+ *
+ * The frame's address is the document's view route with a short-lived ticket
+ * (GET /documents/:id answers `fileTicket`, fresh with every poll): a frame
+ * carries no bearer header, and the admin's CSP frames 'self' only - a blob:
+ * address is refused, which is how the first version of this failed. The frame
+ * carries no `sandbox` attribute on purpose: Chrome's PDF viewer will not open
+ * in a sandboxed frame (chrome-error instead). The response itself is sent
+ * with `Content-Security-Policy: sandbox`, which the viewer accepts, and a PDF
+ * with scripts in it was refused at upload.
+ *
+ * @module docs/admin/lib/pdf-view
+ */
+
+import {docsApi, esc, icon, fetchBlob, downloadBlob, readBase64, isPdfFile} from '/plugins/docs/admin/lib/api.js';
+import {fileName} from '/plugins/docs/admin/lib/convert.js';
+
+/** "3 pages · 1.2 MB". */
+export function pdfFacts(file) {
+    const pages = Number(file?.pages) || 0;
+    const size = Number(file?.size) || 0;
+    const parts = [pages ? `${pages} page${pages === 1 ? '' : 's'}` : '', size ? sizeText(size) : ''];
+    return parts.filter(Boolean).join(' · ');
+}
+
+export function sizeText(bytes) {
+    const n = Number(bytes) || 0;
+    if (n >= 1024 * 1024) return `${(n / 1024 / 1024).toFixed(n >= 10 * 1024 * 1024 ? 0 : 1)} MB`;
+    if (n >= 1024) return `${Math.round(n / 1024)} KB`;
+    return `${n} B`;
+}
+
+/**
+ * Show a PDF document's file in `host`. Returns a handle: `reload()` after
+ * the file changed, `dispose()` when the screen goes.
+ *
+ * @param {HTMLElement} host   the page element (.docs-page)
+ * @param {{id: string, title: () => string}} doc
+ */
+export function mountPdfViewer(host, doc) {
+    host.classList.add('docs-pdf');
+    host.innerHTML = `
+        <div class="docs-pdf__state" aria-live="polite">${icon('file-text', 28)}<p>Loading the PDF…</p></div>
+        <iframe class="docs-pdf__frame" title="" hidden></iframe>`;
+    const state = host.querySelector('.docs-pdf__state');
+    const frame = host.querySelector('.docs-pdf__frame');
+    let gone = false;
+
+    function reload() {
+        if (gone) return;
+        const ticket = doc.ticket();
+        if (!ticket) {
+            state.hidden = false;
+            frame.hidden = true;
+            state.innerHTML = `${icon('alert-circle', 28)}<p>The PDF could not be shown.</p><p class="docs-pdf__hint">You can still download it from the menu.</p>`;
+            return;
+        }
+        frame.title = doc.title();
+        // A fresh address each time, so the browser never shows the file it had.
+        frame.src = `${docsApi.viewUrl(doc.id, ticket)}&v=${Date.now().toString(36)}`;
+        frame.hidden = false;
+        state.hidden = true;
+    }
+    reload();
+    return {
+        reload,
+        dispose() { gone = true; frame.src = 'about:blank'; host.classList.remove('docs-pdf'); host.replaceChildren(); }
+    };
+}
+
+/** Save the document's PDF with its title as the file name. */
+export async function downloadPdf(doc) {
+    try {
+        const blob = await fetchBlob(docsApi.fileUrl(doc.id, {download: true}));
+        downloadBlob(fileName(doc.title || 'Untitled', 'pdf'), blob);
+    } catch (err) {
+        E.toast(err.message || 'Could not download the PDF', {type: 'error'});
+    }
+}
+
+/**
+ * Ask for a PDF and upload it as the document's new file (the old one becomes a
+ * version). Resolves with the updated document, or null when nothing was chosen.
+ */
+export function pickPdf() {
+    return new Promise((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.pdf,application/pdf';
+        input.hidden = true;
+        document.body.appendChild(input);
+        const done = (file) => { input.remove(); resolve(file || null); };
+        input.addEventListener('change', () => done(input.files?.[0]));
+        // A cancelled picker fires no change; the input is dropped when focus comes back without one.
+        window.addEventListener('focus', () => setTimeout(() => { if (input.isConnected && !input.files?.length) done(null); }, 400), {once: true});
+        input.click();
+    });
+}
+
+/** The downloads a PDF document offers (where an HTML one offers Markdown, HTML, text and print). */
+export function pdfExportItems(get) {
+    return [{label: 'PDF (.pdf)', icon: 'download', action: async () => { try { await downloadPdf(await get()); } catch (err) { E.toast(err.message || 'Could not download', {type: 'error'}); } }}];
+}
+
+export async function replacePdf(doc, {session, host = null, maxBytes = 20 * 1024 * 1024} = {}) {
+    const file = await pickPdf();
+    if (!file) return null;
+    if (!isPdfFile(file)) { E.toast('Choose a PDF file.', {type: 'warning'}); return null; }
+    if (file.size > maxBytes) { E.toast(`${esc(file.name)} is over ${Math.round(maxBytes / 1024 / 1024)} MB.`, {type: 'warning'}); return null; }
+    const ok = await E.confirm(`Replace the file with <strong>${esc(file.name)}</strong>? The file it has now is kept in Version history.`, {title: 'Replace the PDF', confirmText: 'Replace'});
+    if (!ok) return null;
+    const loader = host && E.loader ? E.loader(host, {type: 'dots'}) : null;
+    try {
+        const updated = await docsApi.replaceFile(doc.id, {name: file.name, data: await readBase64(file)}, session);
+        E.toast('PDF replaced', {type: 'success'});
+        return updated;
+    } catch (err) {
+        E.toast(err.message || 'Could not replace the PDF', {type: 'error'});
+        return null;
+    } finally {
+        try { loader?.destroy?.(); } catch { /* gone */ }
+    }
+}

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

@@ -0,0 +1,156 @@
+/**
+ * Send to: email, a new Page, a new Blog post; and the downloads (Markdown,
+ * HTML, text, print / PDF).
+ *
+ * Pages and Blog posts are made through the CMS's own APIs with the user's
+ * own token, so the CMS decides whether they may - Docs grants nothing.
+ * Both are made as drafts, in Markdown, and open in their own editors.
+ *
+ * @module docs/admin/lib/send
+ */
+
+import {docsApi, esc, download, printHtml, outgoing} from '/plugins/docs/admin/lib/api.js';
+import {guardClose, claimPanel, tieToScreen} from '/plugins/docs/admin/lib/panel-guard.js';
+import {htmlToMarkdown, htmlToText, standaloneHtml, fileName, startsWithTitle} from '/plugins/docs/admin/lib/convert.js';
+
+/** Slug from a title: "Q3 plan - draft" -> "q3-plan-draft". */
+export function slugify(title) {
+    return String(title || '').toLowerCase().normalize('NFKD').replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 80) || 'document';
+}
+
+/** The four downloads, as menu items. `get` answers {title, content} (fetched for a list row). */
+export function exportItems(get) {
+    const run = (fn) => async () => {
+        try { const d = await get(); fn({...d, content: outgoing(d.content)}); } catch (err) { E.toast(err.message || 'Could not export', {type: 'error'}); }
+    };
+    return [
+        {label: 'Markdown (.md)', icon: 'file-text', action: run(d => download(fileName(d.title, 'md'), startsWithTitle(d.title, d.content) ? htmlToMarkdown(d.content) : `# ${d.title}\n\n${htmlToMarkdown(d.content)}`, 'text/markdown;charset=utf-8'))},
+        {label: 'Web page (.html)', icon: 'globe', action: run(d => download(fileName(d.title, 'html'), standaloneHtml(d.title, d.content), 'text/html;charset=utf-8'))},
+        {label: 'Plain text (.txt)', icon: 'type', action: run(d => download(fileName(d.title, 'txt'), `${d.title}\n\n${htmlToText(d.content)}\n`, 'text/plain;charset=utf-8'))},
+        {type: 'divider'},
+        {label: 'Print or save as PDF…', icon: 'printer', action: run(d => printHtml(standaloneHtml(d.title, d.content)))}
+    ];
+}
+
+/**
+ * Email the document: its body, or a link. A slideover; the owner and
+ * editors only (the server says so too). One at a time; it closes with the
+ * screen that opened it (`life`, 2.10); locked while it sends, because it
+ * closes when the send lands.
+ */
+export function openSendEmail({doc, kit, publicLinksAllowed = true, life = null}) {
+    // A PDF document (2.13) goes as an attachment, and the choice says so.
+    if (life && !life.alive()) return null;
+    const release = claimPanel('email');
+    if (!release) return null;
+    try {
+        return buildSendEmail({doc, kit, publicLinksAllowed, life}, release);
+    } catch (err) {
+        release();
+        throw err;
+    }
+}
+
+function buildSendEmail({doc, kit, publicLinksAllowed, life}, release) {
+    const so = E.slideover({title: 'Email this document', size: 'sm', position: 'right'});
+    const panel = document.createElement('div');
+    panel.className = 'docs-form';
+    const to = M.observable('');
+    const message = M.observable('');
+    const mode = M.observable('inline');
+    const sending = M.observable(false);
+    panel.innerHTML = `
+        <label class="form-label" for="docs-send-to">To
+            <span data-help="Up to 10 email addresses, separated by commas. They do not need an account."></span>
+        </label>
+        <input id="docs-send-to" type="text" class="form-input" placeholder="name@example.com, other@example.com" data-model="to.value">
+        <label class="form-label" for="docs-send-msg">Message</label>
+        <textarea id="docs-send-msg" class="form-input" rows="3" placeholder="Optional" data-model="message.value"></textarea>
+        <fieldset class="docs-form__choice">
+            <legend class="form-label">Send
+                <span data-help-title="Inline or link" data-help="In the email puts the whole document in the message - a copy of it as it is now (a PDF is attached as a file). As a link turns on the document's public link (if it is not on already) and sends that, so they always see the latest version. Turn the link off under Share to stop it working."></span>
+            </legend>
+            <label class="docs-check"><input type="radio" name="docs-send-mode" value="inline" data-model="mode.value"> ${doc.format === 'pdf' ? 'The PDF, attached to the email' : 'The document, in the email'}</label>
+            <label class="docs-check" data-bind-hidden="!linksAllowed"><input type="radio" name="docs-send-mode" value="link" data-model="mode.value"> A link to read it online</label>
+        </fieldset>
+        <div class="docs-form__actions">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+            <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="sending.value || !to.value">Send</button>
+        </div>`;
+    const disposeHelp = kit.helpPopovers(panel);
+    so.element.appendChild(panel);
+    const handle = M.applyBindings({to, message, mode, sending, linksAllowed: publicLinksAllowed}, panel, {
+        methods: {
+            cancel: () => so.close(),
+            async send() {
+                if (sending.peek()) return;
+                sending.value = true;
+                // The panel closes once this lands: nothing typed meanwhile may be lost, so it is locked.
+                panel.inert = true;
+                try {
+                    const r = await docsApi.send(doc.id, {to: to.peek(), message: message.peek(), mode: mode.peek()});
+                    E.toast(r.failed?.length ? `Sent to ${r.sent}; not sent to ${r.failed.join(', ')}` : `Sent to ${r.sent} ${r.sent === 1 ? 'person' : 'people'}`, {type: r.failed?.length ? 'warning' : 'success'});
+                    guard.done();
+                    so.close();
+                } catch (err) {
+                    E.toast(err.message || 'Could not send', {type: 'error'});
+                } finally {
+                    sending.value = false;
+                    panel.inert = false;
+                }
+            }
+        }
+    });
+    let untie = () => {};
+    kit.onceClosed(so, () => { handle.dispose(); disposeHelp?.(); untie(); release(); });
+    // Typed addresses or a message are worth a question before they go; while it sends, a close waits for it.
+    const guard = guardClose(so, () => Boolean(to.peek().trim() || message.peek().trim()), 'Discard this email without sending it?', () => sending.peek());
+    untie = tieToScreen(so, life);
+    so.open();
+    setTimeout(() => panel.querySelector('#docs-send-to')?.focus(), 250);
+    return so;
+}
+
+/** A new draft Page from the document, at an address the user confirms. */
+export async function sendToPage(doc) {
+    const suggested = `/${slugify(doc.title)}`;
+    const answer = await E.prompt('Address for the new page', {title: 'Send to a new page', inputValue: suggested});
+    if (answer === null || answer === undefined) return;
+    let urlPath = String(answer).trim().toLowerCase().replace(/\s+/g, '-');
+    if (!urlPath.startsWith('/')) urlPath = `/${urlPath}`;
+    if (!/^\/[a-z0-9/_-]*$/.test(urlPath) || urlPath.includes('//')) {
+        E.toast('Use lowercase letters, numbers, - and / only', {type: 'warning'});
+        return;
+    }
+    try {
+        await H.post('/api/pages', {
+            urlPath,
+            frontmatter: {title: doc.title || 'Untitled', status: 'draft', showInNav: false},
+            body: htmlToMarkdown(outgoing(doc.content))
+        }, {silent: true});
+        const ok = await E.confirm(`Draft page made at <strong>${esc(urlPath)}</strong>. Open it in the page editor?`, {title: 'Page created', confirmText: 'Open page', cancelText: 'Stay here'});
+        if (ok) location.hash = `#/pages/edit${urlPath}`;
+    } catch (err) {
+        const msg = /403|permission/i.test(err.message || '') ? 'Your role cannot create pages.' : (err.message || 'Could not create the page');
+        E.toast(msg, {type: 'error'});
+    }
+}
+
+/** A new draft Blog post from the document. */
+export async function sendToBlog(doc) {
+    try {
+        const post = await H.post('/api/plugins/blog/posts', {
+            title: doc.title || 'Untitled', slug: slugify(doc.title), status: 'draft',
+            content: htmlToMarkdown(outgoing(doc.content)), excerpt: htmlToText(outgoing(doc.content)).replace(/\s+/g, ' ').slice(0, 200)
+        }, {silent: true});
+        const id = post?.id || post?.data?.id;
+        const ok = await E.confirm('Draft blog post made. Open it in the Blog?', {title: 'Post created', confirmText: 'Open post', cancelText: 'Stay here'});
+        if (ok) location.hash = id ? `#/plugins/blog/posts/${encodeURIComponent(id)}` : '#/plugins/blog/posts';
+    } catch (err) {
+        const m = err.message || '';
+        const msg = /404|not found/i.test(m) ? 'The Blog is not switched on for this site.'
+            : /403|permission/i.test(m) ? 'Your role cannot write blog posts.' : (m || 'Could not create the post');
+        E.toast(msg, {type: 'error'});
+    }
+}

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

@@ -0,0 +1,142 @@
+/**
+ * The Docs settings slideover, behind the banner cog: site settings (admins
+ * change them, everyone sees them) and this browser's own preferences.
+ *
+ * @module docs/admin/lib/settings
+ */
+
+import {docsApi, esc} from '/plugins/docs/admin/lib/api.js';
+import {guardClose, claimPanel, tieToScreen} from '/plugins/docs/admin/lib/panel-guard.js';
+
+/** Autosave choices, in milliseconds. */
+const AUTOSAVE = [[0, 'Off'], [10000, '10 seconds after I stop typing'], [30000, '30 seconds after I stop typing'],
+    [60000, 'A minute after I stop typing'], [300000, 'Five minutes after I stop typing']];
+
+/**
+ * @param {object}   opts
+ * @param {object}   opts.kit
+ * @param {object}   opts.site     GET /settings (mutated on save)
+ * @param {object}   opts.prefs    {showWordCount: observable} - this browser's
+ * @param {Function} [opts.onSaved]
+ * @param {object}   [opts.life]   the opening screen's {alive(), add(fn)}: the panel closes with it (2.10)
+ */
+export function openSettings(opts) {
+    // One settings panel at a time.
+    const release = claimPanel('settings');
+    if (!release) return null;
+    try {
+        return buildSettings(opts, release);
+    } catch (err) {
+        release();
+        throw err;
+    }
+}
+
+function buildSettings({kit, site, prefs = {}, onSaved, life = null}, release) {
+    const so = E.slideover({title: 'Docs settings', size: 'sm', position: 'right'});
+    const panel = document.createElement('div');
+    panel.className = 'docs-settings';
+    const autoSave = M.observable(String(site.autoSaveInterval ?? 30000));
+    const maxVersions = M.observable(String(site.maxVersions ?? 50));
+    const trashDays = M.observable(String(site.trashDays ?? 30));
+    const publicLinks = M.observable(site.publicLinks !== false);
+    const allowSend = M.observable(site.allowSend !== false);
+    const saving = M.observable(false);
+    const snapshot = () => JSON.stringify([autoSave.value, maxVersions.value, trashDays.value, publicLinks.value, allowSend.value]);
+    const initial = M.observable(snapshot());
+
+    panel.innerHTML = `
+        <section class="docs-settings__group">
+            <h3 class="docs-settings__heading">For everyone on this site
+                <span data-help="Site settings apply to everyone who uses Docs. Only an administrator can change them."></span>
+            </h3>
+            <p class="docs-settings__note" data-bind-hidden="canEdit">Only an administrator can change these.</p>
+            <label class="form-label" for="docs-set-autosave">Autosave
+                <span data-help="How long after the last change an open document saves itself. Off means only Save or Ctrl+S saves - and unsaved work is still kept in this browser if you leave."></span>
+            </label>
+            <select id="docs-set-autosave" class="form-input" data-model="autoSave.value" data-bind-disabled="!canEdit">
+                ${AUTOSAVE.map(([ms, label]) => `<option value="${ms}">${esc(label)}</option>`).join('')}
+            </select>
+            <label class="form-label" for="docs-set-versions">Versions kept per document
+                <span data-help="Every save that changes a document keeps what it replaced, so it can be restored from Version history. Past this many, the oldest go. 5 to 500."></span>
+            </label>
+            <input id="docs-set-versions" type="number" min="5" max="500" step="5" class="form-input" data-model="maxVersions.value" data-bind-disabled="!canEdit">
+            <label class="form-label" for="docs-set-trash">Days in Trash
+                <span data-help="A document moved to Trash can be restored for this many days, then it is deleted for good with its history. 1 to 365."></span>
+            </label>
+            <input id="docs-set-trash" type="number" min="1" max="365" class="form-input" data-model="trashDays.value" data-bind-disabled="!canEdit">
+            <label class="docs-check">
+                <input type="checkbox" data-model="publicLinks.value" data-bind-disabled="!canEdit"> Allow public links
+                <span data-help-title="Public links" data-help="Lets people turn on &quot;Anyone with the link can view&quot; for their documents - a read-only page on this site at an unguessable address. Switching this off stops every existing link at once; switching it back on brings them back."></span>
+            </label>
+            <label class="docs-check">
+                <input type="checkbox" data-model="allowSend.value" data-bind-disabled="!canEdit"> Allow emailing documents
+                <span data-help-title="Emailing documents" data-help="Lets owners and editors use Send to &gt; Email, from this site's email address. Each person can email up to 50 addresses a day."></span>
+            </label>
+            <div class="docs-settings__row">
+                <span class="form-label">Who sees documents
+                    <span data-help="Private: people see their own documents and those shared with them. Everyone: every Docs user can read every document, and administrators can change them. Set in the plugin's configuration, not here, because changing it exposes or hides other people's work."></span>
+                </span>
+                <strong data-bind-text="scopeText"></strong>
+            </div>
+            <div class="docs-settings__actions" data-bind-hidden="!canEdit">
+                <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="!dirty.value || saving.value">Save site settings</button>
+            </div>
+        </section>
+        <section class="docs-settings__group">
+            <h3 class="docs-settings__heading">Just for you
+                <span data-help="Kept in this browser as you change them."></span>
+            </h3>
+            <label class="docs-check"><input type="checkbox" data-model="showWordCount.value"> Show word counts on documents</label>
+        </section>
+        <div class="docs-settings__actions">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="done">Done</button>
+        </div>`;
+
+    const disposeHelp = kit.helpPopovers(panel);
+    so.element.appendChild(panel);
+    const handle = M.applyBindings({
+        canEdit: site.canEdit === true,
+        scopeText: site.scope === 'all' ? 'Everyone with Docs' : 'Private, unless shared',
+        autoSave, maxVersions, trashDays, publicLinks, allowSend, saving,
+        showWordCount: prefs.showWordCount || M.observable(true),
+        dirty: M.computed(() => snapshot() !== initial.value)
+    }, panel, {
+        methods: {
+            done: () => so.close(),
+            async save() {
+                if (saving.peek()) return;
+                saving.value = true;
+                // The panel stays open: a field changed while this saves keeps its new value, still unsaved (2.10).
+                const sent = {autoSave: autoSave.peek(), maxVersions: maxVersions.peek(), trashDays: trashDays.peek()};
+                try {
+                    const body = {autoSaveInterval: Number(autoSave.peek()), maxVersions: Number(maxVersions.peek()),
+                        trashDays: Number(trashDays.peek()), publicLinks: Boolean(publicLinks.peek()), allowSend: Boolean(allowSend.peek())};
+                    const r = await docsApi.settings.save(body);
+                    const next = {...body, ...r};
+                    delete next.ok;
+                    Object.assign(site, next);
+                    // What the server stored (it clamps numbers), shown only where nothing was typed since.
+                    const stored = {autoSave: String(next.autoSaveInterval), maxVersions: String(next.maxVersions), trashDays: String(next.trashDays)};
+                    if (maxVersions.peek() === sent.maxVersions) maxVersions.value = stored.maxVersions;
+                    if (trashDays.peek() === sent.trashDays) trashDays.value = stored.trashDays;
+                    if (autoSave.peek() === sent.autoSave) autoSave.value = stored.autoSave;
+                    initial.value = JSON.stringify([stored.autoSave, stored.maxVersions, stored.trashDays, Boolean(next.publicLinks), Boolean(next.allowSend)]);
+                    onSaved?.(next);
+                    E.toast('Site settings saved', {type: 'success'});
+                } catch (err) {
+                    E.toast(err.message || 'Could not save settings', {type: 'error'});
+                } finally {
+                    saving.value = false;
+                }
+            }
+        }
+    });
+    let untie = () => {};
+    kit.onceClosed(so, () => { handle.dispose(); disposeHelp?.(); untie(); release(); });
+    // Site settings changed and not saved: ask before they are thrown away.
+    guardClose(so, () => snapshot() !== initial.peek(), 'Discard the settings you have not saved?');
+    untie = tieToScreen(so, life);
+    so.open();
+    return so;
+}