domma-cms 1.8.32 → 1.8.34

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

@@ -0,0 +1,323 @@
+/**
+ * The Share panel: people with access (Viewer / Editor), adding people with
+ * an optional email, and the public link. A slideover bound with
+ * domma-reactive; add-ons (Docs Pro) add their own section below the link
+ * through `sections` - expiry dates, passwords.
+ *
+ * @module docs/admin/lib/share
+ */
+
+import {docsApi, esc, icon} from '/plugins/docs/admin/lib/api.js';
+import {guardClose, claimPanel, tieToScreen} from '/plugins/docs/admin/lib/panel-guard.js';
+
+const KEBAB = icon('more-vertical', 16);
+const PERSON_ROW = `
+<div class="docs-share__person" data-user="{{userId}}">
+    <span class="docs-avatar" aria-hidden="true">{{initial}}</span>
+    <span class="docs-share__name">{{name}}</span>
+    <select class="form-input form-input-sm docs-share__role" aria-label="Access for {{name}}" data-role-for="{{userId}}">
+        <option value="viewer">Viewer</option>
+        <!--suggester-->
+        <option value="editor">Editor</option>
+    </select>
+    <button type="button" class="docs-kebab docs-share__kebab" aria-label="Actions for {{name}}" title="Actions">${KEBAB}</button>
+    <button type="button" class="btn btn-xs btn-ghost docs-share__remove" data-remove="{{userId}}" aria-label="Remove {{name}}" title="Remove">×</button>
+</div>`;
+
+const PICK_ROW = `<button type="button" class="docs-share__pick" data-pick="{{id}}"><span class="docs-avatar" aria-hidden="true">{{initial}}</span><span>{{label}}</span></button>`;
+
+const initial = (name) => (String(name || '?').trim()[0] || '?').toUpperCase();
+
+/**
+ * @param {object}   opts
+ * @param {object}   opts.doc       the document as GET /documents/:id answers
+ * @param {object}   opts.kit       loadKit()
+ * @param {Function} opts.onChange  (doc) => void, after any change is saved
+ * @param {Array}    [opts.sections] add-on sections: ({doc, container, refresh}) => dispose|void
+ * @param {boolean}  [opts.suggestions] an add-on (Docs Pro) lets people suggest changes (2.5)
+ * @param {object}   [opts.life]   the opening screen's {alive(), add(fn)}: the panel closes with it (2.10)
+ * @returns {Promise<object|null>} the slideover; null when one is already open or the screen went while it opened
+ */
+export async function openShare(opts) {
+    // One Share panel at a time - a second click while the first is still fetching people opened two.
+    const release = claimPanel('share');
+    if (!release) return null;
+    try {
+        const so = await buildShare(opts, release);
+        if (!so) release();
+        return so;
+    } catch (err) {
+        release();
+        throw err;
+    }
+}
+
+async function buildShare({doc, kit, onChange, sections = [], suggestions = false, life = null}, release) {
+    let people = [];
+    try { people = await docsApi.people(); } catch { people = []; }
+    if (life && !life.alive()) return null;
+
+    const current = M.observable(doc);
+    const shares = M.observable((doc.shares || []).map(s => ({userId: s.userId, name: s.name, role: s.role})));
+    const saved = M.observable(JSON.stringify(shares.peek()));
+    const query = M.observable('');
+    const notify = M.observable(true);
+    const message = M.observable('');
+    const saving = M.observable(false);
+    const linkBusy = M.observable(false);
+
+    const rows = M.observable([]);
+    let panelRef = null;
+    const matches = M.observable([]);
+    const disposers = [];
+    disposers.push(M.effect(() => {
+        const list = shares.value;
+        rows.value = list.map(s => ({key: s.userId, userId: s.userId, name: s.name || 'Unknown', initial: initial(s.name)}));
+        // A select's value is a property, and the row template cannot set it:
+        // put each one right once the rows are drawn.
+        requestAnimationFrame(() => {
+            for (const s of list) {
+                const sel = panelRef?.querySelector(`[data-role-for="${CSS.escape(s.userId)}"]`);
+                if (sel && sel.value !== s.role) sel.value = s.role;
+            }
+        });
+    }));
+    disposers.push(M.effect(() => {
+        const q = query.value.trim().toLowerCase();
+        const taken = new Set(shares.value.map(s => s.userId));
+        matches.value = !q ? [] : people
+            .filter(p => !taken.has(p.id) && (p.name.toLowerCase().includes(q) || (p.email || '').toLowerCase().includes(q)))
+            .slice(0, 8)
+            .map(p => ({key: p.id, id: p.id, initial: initial(p.name), label: p.email ? `${p.name} - ${p.email}` : p.name}));
+    }));
+
+    const linkUrl = () => {
+        const t = current.peek().publicLink?.token;
+        return t ? `${location.origin}/docs/s/${t}` : '';
+    };
+    const link = M.observable(linkUrl());
+
+    const data = {
+        rows, matches, query, notify, message, saving, linkBusy, link,
+        ownerName: doc.ownerName || 'Owner',
+        ownerInitial: initial(doc.ownerName),
+        isOwner: doc.access === 'owner',
+        // 2.11: a document that may not leave Docs now has no public link either.
+        linksAllowed: doc.publicLinksAllowed !== false && !doc.outwardRefusal,
+        linksNote: doc.outwardRefusal || 'An administrator has switched public links off for this site.',
+        // 2.11: restricted (a members-only wiki page) - people already here stay and can be removed; nobody new.
+        canAdd: !doc.restricted,
+        addNote: doc.restricted ? `${doc.restricted} No one new can be given access - people listed above keep theirs, and you can remove them.` : '',
+        hasMatches: M.computed(() => matches.value.length > 0),
+        noMatches: M.computed(() => query.value.trim().length > 0 && matches.value.length === 0),
+        dirty: M.computed(() => JSON.stringify(shares.value) !== saved.value),
+        hasAdded: M.computed(() => {
+            const before = new Set((current.value.shares || []).map(s => s.userId));
+            return shares.value.some(s => !before.has(s.userId));
+        }),
+        linkOn: M.computed(() => Boolean(link.value)),
+        noShares: M.computed(() => shares.value.length === 0)
+    };
+
+    const so = E.slideover({title: `Share "${esc(doc.title || 'Untitled')}"`, size: 'md', position: 'right'});
+    const panel = document.createElement('div');
+    panel.className = 'docs-share';
+    panelRef = panel;
+    panel.innerHTML = `
+        <section class="docs-share__group">
+            <h3 class="docs-share__heading">People with access
+                <span data-help-title="People with access" data-help="Viewers can read, copy and export. Suggesters (with Docs Pro) can also suggest changes for an editor to accept or reject. Editors can also change the document and share it. Only the owner can move it, remove editors, or put it in Trash. Only one person edits at a time - everyone else sees who is editing."></span>
+            </h3>
+            <div class="docs-share__person docs-share__person--owner">
+                <span class="docs-avatar" aria-hidden="true" data-bind-text="ownerInitial"></span>
+                <span class="docs-share__name" data-bind-text="ownerName"></span>
+                <span class="docs-chip">Owner</span>
+            </div>
+            <div class="docs-share__people" data-each="rows.value key=key"></div>
+            <p class="docs-share__note" data-bind-hidden="!noShares.value">Only the owner can open this document.</p>
+        </section>
+        <section class="docs-share__group">
+            <p class="docs-share__note" data-bind-hidden="canAdd" data-bind-text="addNote"></p>
+            <div data-bind-hidden="!canAdd">
+            <label class="form-label" for="docs-share-find">Add people
+                <span data-help="Type a name. Only people whose role includes Docs are listed. They are added as Viewers; change that before you save."></span>
+            </label>
+            <input id="docs-share-find" type="search" class="form-input" placeholder="Name or email" autocomplete="off" data-model="query.value">
+            <div class="docs-share__matches" data-bind-hidden="!hasMatches.value" data-each="matches.value key=key"></div>
+            <p class="docs-share__note" data-bind-hidden="!noMatches.value">Nobody by that name has Docs.</p>
+            <div class="docs-share__notify" data-bind-hidden="!hasAdded.value">
+                <label class="docs-check"><input type="checkbox" data-model="notify.value"> Email the people I've added</label>
+                <textarea class="form-input" rows="2" placeholder="Message (optional)" data-model="message.value" data-bind-hidden="!notify.value"></textarea>
+            </div>
+            </div>
+            <div class="docs-share__actions">
+                <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="!dirty.value || saving.value">Save access</button>
+            </div>
+        </section>
+        <section class="docs-share__group">
+            <h3 class="docs-share__heading">General access
+                <span data-help-title="Anyone with the link" data-help="Turns on a read-only web page for this document at a long, unguessable address. Anyone who has the address can read it and download it - no sign-in. It is never listed or indexed by search engines. Turn it off and the address stops working at once."></span>
+            </h3>
+            <div data-bind-hidden="!linksAllowed">
+                <label class="docs-check"><input type="checkbox" data-bind-checked="linkOn.value" data-on-change="toggleLink" data-bind-disabled="linkBusy.value"> Anyone with the link can view</label>
+                <div class="docs-share__link" data-bind-hidden="!linkOn.value">
+                    <input type="text" class="form-input form-input-sm" readonly aria-label="Public link" data-bind-value="link.value">
+                    <button type="button" class="btn btn-sm btn-outline" data-on-click="copy">${icon('copy', 14)} Copy</button>
+                    <a class="btn btn-sm btn-ghost" target="_blank" rel="noopener" data-bind-href="link.value" title="Open the public page">${icon('external-link', 14)}</a>
+                </div>
+            </div>
+            <p class="docs-share__note" data-bind-hidden="linksAllowed" data-bind-text="linksNote"></p>
+            <div class="docs-share__ext"></div>
+        </section>
+        <div class="docs-share__actions">
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="done">Done</button>
+        </div>`;
+    // "Suggester" while an add-on offers suggestions - or while someone already has it (a lapsed licence keeps the choice).
+    const offerSuggest = suggestions || (doc.shares || []).some(s => s.role === 'suggester');
+    panel.querySelector('.docs-share__people').innerHTML = PERSON_ROW.replace('<!--suggester-->', offerSuggest ? '<option value="suggester">Suggester</option>' : '');
+    panel.querySelector('.docs-share__matches').innerHTML = PICK_ROW;
+
+    const disposeHelp = kit.helpPopovers(panel);
+    so.element.appendChild(panel);
+
+    const setRole = (userId, role) => { shares.value = shares.peek().map(s => (s.userId === userId ? {...s, role} : s)); };
+    const remove = (userId) => { shares.value = shares.peek().filter(s => s.userId !== userId); };
+    const add = (id) => {
+        const p = people.find(x => x.id === id);
+        if (!p) return;
+        shares.value = [...shares.peek(), {userId: p.id, name: p.name, role: 'viewer'}];
+        query.value = '';
+        panel.querySelector('#docs-share-find')?.focus();
+    };
+    panel.addEventListener('change', (e) => {
+        const sel = e.target.closest('[data-role-for]');
+        if (sel) setRole(sel.dataset.roleFor, sel.value);
+    });
+    panel.addEventListener('click', (e) => {
+        const rm = e.target.closest('[data-remove]');
+        if (rm) return remove(rm.dataset.remove);
+        const pick = e.target.closest('[data-pick]');
+        if (pick) add(pick.dataset.pick);
+    });
+    panel.querySelector('#docs-share-find').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && matches.peek().length) { e.preventDefault(); add(matches.peek()[0].id); }
+    });
+
+    const apply = (next) => {
+        current.value = next;
+        link.value = linkUrl();
+        onChange?.(next);
+    };
+
+    const handle = M.applyBindings(data, panel, {
+        methods: {
+            done: () => so.close(),
+            async save() {
+                saving.value = true;
+                // The panel stays open: changes made while this saves stay on screen, still unsaved (2.10).
+                const sent = JSON.stringify(shares.peek());
+                const sentMessage = message.peek();
+                try {
+                    const next = await docsApi.shares(doc.id, {
+                        shares: shares.peek().map(s => ({userId: s.userId, role: s.role})),
+                        notify: notify.peek(), message: sentMessage
+                    });
+                    const stored = (next.shares || []).map(s => ({userId: s.userId, name: s.name, role: s.role}));
+                    saved.value = JSON.stringify(stored);
+                    if (JSON.stringify(shares.peek()) === sent) shares.value = stored;
+                    if (message.peek() === sentMessage) message.value = '';
+                    apply(next);
+                    E.toast(next.notified ? `Access saved - ${next.notified} ${next.notified === 1 ? 'person' : 'people'} emailed` : 'Access saved', {type: 'success'});
+                } catch (err) {
+                    E.toast(err.message || 'Could not save access', {type: 'error'});
+                } finally {
+                    saving.value = false;
+                }
+            },
+            async toggleLink(e) {
+                const on = e?.target?.checked;
+                linkBusy.value = true;
+                try {
+                    const next = on ? await docsApi.linkOn(doc.id) : await docsApi.linkOff(doc.id);
+                    apply(next);
+                    if (on) E.toast('Public link on - anyone with it can read this document', {type: 'success'});
+                    else E.toast('Public link off - the old address no longer works', {type: 'info'});
+                } catch (err) {
+                    if (e?.target) e.target.checked = !on;
+                    E.toast(err.message || 'Could not change the link', {type: 'error'});
+                } finally {
+                    linkBusy.value = false;
+                }
+            },
+            async copy() {
+                try {
+                    await navigator.clipboard.writeText(link.peek());
+                    E.toast('Link copied', {type: 'success'});
+                } catch {
+                    panel.querySelector('.docs-share__link input')?.select();
+                    E.toast('Press Ctrl+C to copy the selected link', {type: 'info'});
+                }
+            }
+        }
+    });
+
+    // Draw the role selects once the first rows are in.
+    requestAnimationFrame(() => { shares.value = shares.peek().slice(); });
+
+    // Add-on sections, each given a container of its own.
+    const extHost = panel.querySelector('.docs-share__ext');
+    const extDispose = [];
+    for (const section of sections) {
+        const box = document.createElement('div');
+        box.className = 'docs-share__ext-section';
+        extHost.appendChild(box);
+        try {
+            const d = await section({doc: current.peek(), container: box, refresh: apply, current});
+            if (typeof d === 'function') extDispose.push(d);
+        } catch (err) { console.warn('[docs] share section failed', err); }
+    }
+
+    // Each person's menu: right-click a row, its ⋮, or Shift+F10 on it. The role select keeps the browser's own menu.
+    const peopleList = panel.querySelector('.docs-share__people');
+    peopleList.addEventListener('contextmenu', (e) => { if (e.target.closest('input, select, textarea')) e.stopPropagation(); });
+    peopleList.addEventListener('click', (e) => { const k = e.target.closest('.docs-share__kebab'); if (k) kit.openMenuAt(k); });
+    const ROLES = [['viewer', 'Viewer', 'eye'], ...(offerSuggest ? [['suggester', 'Suggester', 'message-square']] : []), ['editor', 'Editor', 'edit-3']];
+    const personMenu = E.contextMenu(peopleList, {
+        cursor: 'glyph', match: '.docs-share__person', inherit: false, density: 'compact',
+        items: (el) => {
+            const s = shares.peek().find(x => x.userId === el.dataset.user);
+            if (!s) return [];
+            return [
+                {header: s.name || 'Unknown'},
+                ...ROLES.map(([role, label, ic]) => ({label: s.role === role ? `${label} - now` : label, icon: ic, disabled: s.role === role, action: () => setRole(s.userId, role)})),
+                {type: 'divider'},
+                {label: 'Remove', icon: 'x', danger: true, action: () => remove(s.userId)}
+            ];
+        }
+    });
+
+    // The screen went while add-on sections were drawn: nothing to show.
+    const teardown = () => {
+        handle.dispose();
+        personMenu?.destroy?.();
+        disposers.forEach(d => d?.());
+        extDispose.forEach(d => { try { d(); } catch { /* gone */ } });
+        disposeHelp?.();
+    };
+    if (life && !life.alive()) {
+        teardown();
+        try { so.destroy?.(); } catch { /* gone */ }
+        so.element?.remove();
+        return null;
+    }
+
+    if (typeof Domma !== 'undefined') Domma.icons?.scan(panel);
+    let untie = () => {};
+    kit.onceClosed(so, () => { teardown(); untie(); release(); });
+    // People added or roles changed but not saved: ask before they are thrown away.
+    guardClose(so, () => data.dirty.peek(), 'Discard the access changes you have not saved?');
+    untie = tieToScreen(so, life);
+    so.open();
+    setTimeout(() => panel.querySelector('#docs-share-find')?.focus(), 250);
+    return so;
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Markdown shortcuts while typing: what a line typed so far turns into when
+ * the space (or Enter) that follows it is pressed. Pure, so it is tested.
+ *
+ *   #  ##  ###  ####   headings        -  *  +   bulleted list
+ *   1.  1)             numbered list   [] [ ]    checklist
+ *   >                  quote           ```       code block
+ *   ---  ***  (Enter)  horizontal line
+ *
+ * @module docs/admin/lib/shortcuts
+ */
+
+const ON_SPACE = [
+    [/^#$/, {type: 'block', tag: 'h1'}],
+    [/^##$/, {type: 'block', tag: 'h2'}],
+    [/^###$/, {type: 'block', tag: 'h3'}],
+    [/^####$/, {type: 'block', tag: 'h4'}],
+    [/^[-*+]$/, {type: 'ul'}],
+    [/^1[.)]$/, {type: 'ol'}],
+    [/^\[ ?\]$/, {type: 'checklist'}],
+    [/^>$/, {type: 'block', tag: 'blockquote'}],
+    [/^```$/, {type: 'block', tag: 'pre'}]
+];
+
+const ON_ENTER = [
+    [/^(-{3,}|\*{3,}|_{3,})$/, {type: 'hr'}],
+    [/^```$/, {type: 'block', tag: 'pre'}]
+];
+
+/**
+ * @param   {string} before the text from the start of the block to the caret
+ * @param   {string} key    ' ' or 'Enter'
+ * @returns {{length:number, action:object}|null} how many characters to remove, and what to do
+ */
+export function markdownTrigger(before, key) {
+    const text = String(before ?? '').replace(/ /g, ' ');
+    if (!text || text.length > 5) return null;
+    const table = key === 'Enter' ? ON_ENTER : key === ' ' ? ON_SPACE : null;
+    if (!table) return null;
+    for (const [re, action] of table) {
+        if (re.test(text)) return {length: text.length, action};
+    }
+    return null;
+}

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

@@ -0,0 +1,194 @@
+/**
+ * Document templates.
+ *
+ * A template is a saved body with a name. The picker hands its content back
+ * to the caller rather than creating anything itself - the screen already
+ * knows which folder a new document belongs in, and this does not.
+ *
+ * Same light-DOM rule as the version panel: the list is appended to the modal
+ * element, because a sanitised `content` string would arrive with its buttons
+ * removed.
+ *
+ * @module docs/admin/lib/templates
+ */
+
+import {api, esc} from './api.js';
+
+export class DocumentTemplates {
+    constructor() {
+        this.templates = [];
+    }
+
+    /**
+     * @returns {Promise<object[]>}
+     */
+    async load() {
+        try {
+            const templates = await api('/templates');
+            this.templates = Array.isArray(templates) ? templates : [];
+        } catch (err) {
+            E.toast(err.message || 'Failed to load templates', {type: 'error'});
+        }
+        return this.templates;
+    }
+
+    /**
+     * Open the picker.
+     *
+     * @param   {Function} onPick called with the chosen template's content
+     * @returns {Promise<object|null>} the Domma modal, or null when there is nothing to pick
+     */
+    async showPicker(onPick) {
+        await this.load();
+
+        if (!this.templates.length) {
+            E.toast('No templates saved yet. Open a document and use Save as template.', {type: 'info'});
+            return null;
+        }
+
+        const modal = E.modal({
+            title: 'New from template',
+            size: 'medium',
+            scrollable: true,
+            buttons: [{id: 'close', text: 'Cancel', variant: 'secondary'}]
+        });
+
+        modal.element.appendChild(this._buildList(modal, onPick));
+        modal.open();
+        return modal;
+    }
+
+    /**
+     * Save some content as a named template.
+     *
+     * @param   {string} content
+     * @returns {Promise<object|null>} the new template, or null if cancelled
+     */
+    async saveAsTemplate(content) {
+        const name = await E.prompt('Template name', {
+            title: 'Save as template',
+            inputPlaceholder: 'e.g. Weekly report'
+        });
+        if (!name || !name.trim()) return null;
+
+        try {
+            const template = await api('/templates', 'POST', {name: name.trim(), content});
+            this.templates.push(template);
+            E.toast('Template saved', {type: 'success'});
+            return template;
+        } catch (err) {
+            E.toast(err.message || 'Failed to save template', {type: 'error'});
+            return null;
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // Internals
+    // -----------------------------------------------------------------------
+
+    /**
+     * @param   {object}   modal
+     * @param   {Function} onPick
+     * @returns {HTMLElement}
+     */
+    _buildList(modal, onPick) {
+        const wrap = document.createElement('div');
+        wrap.className = 'docs-templates';
+
+        this.templates.forEach(template => {
+            const row = document.createElement('div');
+            row.className = 'docs-template';
+
+            const name = document.createElement('strong');
+            name.className = 'docs-template__name';
+            name.textContent = template.name || 'Untitled template';
+            row.appendChild(name);
+
+            const preview = document.createElement('p');
+            preview.className = 'docs-template__preview';
+            preview.textContent = this._excerpt(template.content);
+            row.appendChild(preview);
+
+            const actions = document.createElement('div');
+            actions.className = 'docs-template__actions';
+
+            const use = document.createElement('button');
+            use.type = 'button';
+            use.className = 'btn btn-sm btn-primary';
+            use.textContent = 'Use';
+            use.addEventListener('click', () => {
+                modal.close();
+                onPick(template.content || '');
+            });
+            actions.appendChild(use);
+
+            // Ready-made templates (from an add-on, 2.6) are read only.
+            if (template.builtIn) {
+                const tag = document.createElement('small');
+                tag.className = 'docs-template__source';
+                tag.textContent = ` · ${[template.category, template.source].filter(Boolean).join(' · ')}`;
+                name.appendChild(tag);
+                row.appendChild(actions);
+                wrap.appendChild(row);
+                return;
+            }
+            const remove = document.createElement('button');
+            remove.type = 'button';
+            remove.className = 'btn btn-sm btn-ghost';
+            remove.title = 'Delete template';
+            remove.setAttribute('aria-label', `Delete template ${template.name || ''}`);
+            const icon = document.createElement('span');
+            icon.dataset.icon = 'trash';
+            icon.dataset.iconSize = '14';
+            remove.appendChild(icon);
+            remove.addEventListener('click', () => this._delete(template, row, modal));
+            actions.appendChild(remove);
+
+            row.appendChild(actions);
+            wrap.appendChild(row);
+        });
+
+        if (typeof Domma !== 'undefined' && Domma.icons) {
+            // The rows are not in the document yet, so scan the fragment.
+            queueMicrotask(() => Domma.icons.scan(wrap));
+        }
+
+        return wrap;
+    }
+
+    /**
+     * @param   {object}      template
+     * @param   {HTMLElement} row
+     * @param   {object}      modal
+     * @returns {Promise<void>}
+     */
+    async _delete(template, row, modal) {
+        const confirmed = await E.confirm(`Delete the template "${esc(template.name)}"?`, {
+            title: 'Delete template',
+            confirmText: 'Delete'
+        });
+        if (!confirmed) return;
+
+        try {
+            await api(`/templates/${encodeURIComponent(template.id)}`, 'DELETE');
+            this.templates = this.templates.filter(t => t.id !== template.id);
+            row.remove();
+            // An empty picker has nothing left to pick, so it closes rather
+            // than sitting there as a blank panel.
+            if (!this.templates.length) modal.close();
+            E.toast('Template deleted', {type: 'success'});
+        } catch (err) {
+            E.toast(err.message || 'Failed to delete template', {type: 'error'});
+        }
+    }
+
+    /**
+     * @param   {string} content
+     * @returns {string}
+     */
+    _excerpt(content) {
+        const text = String(content || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+        if (!text) return 'Empty template';
+        return text.length > 140 ? `${text.slice(0, 140)}...` : text;
+    }
+}