domma-cms 1.8.32 → 1.8.34

package/plugins/docs/admin/lib/find-replace.js

@@ -0,0 +1,426 @@
+/**
+ * Find and replace over whichever surface the editor is using.
+ *
+ * A textarea and a contenteditable have nothing in common at the DOM level,
+ * so both are reduced to the same thing first: the document's plain text plus
+ * a way to turn an offset in that text back into a position on the surface.
+ * Everything below then works in offsets and never asks which mode it is in.
+ *
+ * Searching is over TEXT, never over markup. Matching the HTML would let a
+ * search for "span" hit every tag in the document and a replace corrupt it,
+ * and a person searching a document means the words they can see.
+ *
+ * @module docs/admin/lib/find-replace
+ */
+
+/**
+ * Guards a replace-all whose replacement contains its own search term.
+ * Nothing legitimate needs more passes than this; a loop does.
+ */
+const MAX_REPLACEMENTS = 5000;
+
+export class FindReplace {
+    constructor() {
+        this.editor = null;
+        this.bar = null;
+        this.findInput = null;
+        this.replaceInput = null;
+        this.caseInput = null;
+        this.status = null;
+        // Where the next "Find next" starts looking, so repeated presses walk
+        // the document instead of landing on the same match.
+        this._cursor = 0;
+    }
+
+    /**
+     * @param   {object} editor a DocEditor
+     * @returns {this}
+     */
+    setEditor(editor) {
+        this.editor = editor;
+        return this;
+    }
+
+    /**
+     * Show the bar inside the editor pane, or focus it if it is already there.
+     *
+     * @param   {HTMLElement} editorPane
+     * @returns {void}
+     */
+    show(editorPane) {
+        if (!editorPane) return;
+
+        if (!this.bar || !this.bar.isConnected) {
+            this.bar = this._buildBar();
+            const content = editorPane.querySelector('#doc-editor-content');
+            if (content) editorPane.insertBefore(this.bar, content);
+            else editorPane.prepend(this.bar);
+            if (typeof Domma !== 'undefined' && Domma.icons) Domma.icons.scan(this.bar);
+        }
+
+        this._cursor = 0;
+        this.findInput.focus();
+        this.findInput.select();
+    }
+
+    /**
+     * @returns {void}
+     */
+    hide() {
+        this.bar?.remove();
+        this.bar = null;
+    }
+
+    // -----------------------------------------------------------------------
+    // Searching
+    // -----------------------------------------------------------------------
+
+    /**
+     * Select the next match after the cursor, wrapping once.
+     *
+     * @returns {boolean} true if something was found
+     */
+    findNext() {
+        const term = this.findInput.value;
+        if (!term) return false;
+
+        const surface = this.editor?.getSurface();
+        if (!surface) return false;
+
+        const text = this._text();
+        const index = this._indexOf(text, term, this._cursor);
+
+        if (index === -1) {
+            // One wrap, then give up - a second wrap is the same search again.
+            const wrapped = this._indexOf(text, term, 0);
+            if (wrapped === -1) {
+                this._say('No matches');
+                return false;
+            }
+            this._cursor = wrapped;
+            this._selectRange(wrapped, term.length);
+            this._say('Wrapped to the first match');
+            this._cursor = wrapped + term.length;
+            return true;
+        }
+
+        this._selectRange(index, term.length);
+        this._cursor = index + term.length;
+        this._say('');
+        return true;
+    }
+
+    /**
+     * Replace the current selection when it is a match, then move on.
+     *
+     * @returns {void}
+     */
+    replaceCurrent() {
+        const term = this.findInput.value;
+        if (!term) return;
+
+        const replacement = this.replaceInput.value;
+        const text = this._text();
+
+        // The caret sits just past the last match, so that is where the match
+        // being looked at starts.
+        const start = Math.max(0, this._cursor - term.length);
+        const candidate = text.slice(start, start + term.length);
+        const matches = this.caseInput.checked
+            ? candidate === term
+            : candidate.toLowerCase() === term.toLowerCase();
+
+        if (!matches) {
+            // Nothing selected yet: find one first, so the button always does
+            // something rather than silently doing nothing on first press.
+            this.findNext();
+            return;
+        }
+
+        if (this.editor.readOnly) { E.toast('This document is open read only.', {type: 'info'}); return; }
+        if (this.editor.suggesting) { E.toast('Replace is off while suggesting - change the words in the page instead.', {type: 'info'}); return; }
+        this._replaceRange(start, term.length, replacement);
+        this._cursor = start + replacement.length;
+        this.editor.notifyChanged();
+        this.findNext();
+    }
+
+    /**
+     * @returns {void}
+     */
+    replaceAll() {
+        if (this.editor?.readOnly) { E.toast('This document is open read only.', {type: 'info'}); return; }
+        if (this.editor?.suggesting) { E.toast('Replace is off while suggesting - change the words in the page instead.', {type: 'info'}); return; }
+        const term = this.findInput.value;
+        if (!term) return;
+
+        const replacement = this.replaceInput.value;
+        let from = 0;
+        let count = 0;
+
+        while (count < MAX_REPLACEMENTS) {
+            const index = this._indexOf(this._text(), term, from);
+            if (index === -1) break;
+            this._replaceRange(index, term.length, replacement);
+            // Resume past what was just written, or replacing "a" with "aa"
+            // never terminates.
+            from = index + replacement.length;
+            count++;
+        }
+
+        if (count) this.editor.notifyChanged();
+        this._cursor = 0;
+        this._say(count ? `Replaced ${count}` : 'No matches');
+    }
+
+    // -----------------------------------------------------------------------
+    // Surface abstraction
+    // -----------------------------------------------------------------------
+
+    /**
+     * @returns {string} the surface's plain text
+     */
+    _text() {
+        const surface = this.editor.getSurface();
+        return this.editor.isMarkdown() ? surface.value : this._collect(surface).text;
+    }
+
+    /**
+     * Walk a contenteditable's text nodes once, recording where each one
+     * starts in the concatenated string. That map is what lets an offset in
+     * the flat text become a Range in the tree.
+     *
+     * @param   {HTMLElement} root
+     * @returns {{text: string, nodes: {node: Text, start: number}[]}}
+     */
+    _collect(root) {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const nodes = [];
+        let text = '';
+
+        let node = walker.nextNode();
+        while (node) {
+            nodes.push({node, start: text.length});
+            text += node.nodeValue;
+            node = walker.nextNode();
+        }
+
+        return {text, nodes};
+    }
+
+    /**
+     * @param   {string} haystack
+     * @param   {string} needle
+     * @param   {number} from
+     * @returns {number}
+     */
+    _indexOf(haystack, needle, from) {
+        if (this.caseInput.checked) return haystack.indexOf(needle, from);
+        return haystack.toLowerCase().indexOf(needle.toLowerCase(), from);
+    }
+
+    /**
+     * Turn a flat-text offset and length into a live DOM Range.
+     *
+     * A match may begin in one text node and end in another - "hello" split
+     * by a stray <b> - which is exactly why this returns a Range rather than
+     * a single node and offset.
+     *
+     * @param   {number} start
+     * @param   {number} length
+     * @returns {Range|null}
+     */
+    _rangeFor(start, length) {
+        const {nodes} = this._collect(this.editor.getSurface());
+        const end = start + length;
+
+        let startNode = null;
+        let startOffset = 0;
+        let endNode = null;
+        let endOffset = 0;
+
+        for (const entry of nodes) {
+            const nodeEnd = entry.start + entry.node.nodeValue.length;
+            if (startNode === null && start < nodeEnd) {
+                startNode = entry.node;
+                startOffset = start - entry.start;
+            }
+            if (end <= nodeEnd) {
+                endNode = entry.node;
+                endOffset = end - entry.start;
+                break;
+            }
+        }
+
+        if (!startNode || !endNode) return null;
+
+        const range = document.createRange();
+        range.setStart(startNode, startOffset);
+        range.setEnd(endNode, endOffset);
+        return range;
+    }
+
+    /**
+     * @param   {number} start
+     * @param   {number} length
+     * @returns {void}
+     */
+    _selectRange(start, length) {
+        const surface = this.editor.getSurface();
+
+        if (this.editor.isMarkdown()) {
+            surface.focus();
+            surface.setSelectionRange(start, start + length);
+            return;
+        }
+
+        const range = this._rangeFor(start, length);
+        if (!range) return;
+
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // Bring it into view without stealing focus from the find box, so
+        // Enter keeps stepping through matches.
+        const rect = range.getBoundingClientRect();
+        const bounds = surface.getBoundingClientRect();
+        if (rect.bottom > bounds.bottom || rect.top < bounds.top) {
+            surface.scrollTop += rect.top - bounds.top - bounds.height / 2;
+        }
+    }
+
+    /**
+     * @param   {number} start
+     * @param   {number} length
+     * @param   {string} replacement
+     * @returns {void}
+     */
+    _replaceRange(start, length, replacement) {
+        const surface = this.editor.getSurface();
+        // Reading only (a viewer, or someone else is editing): find, never replace.
+        if (this.editor.readOnly) throw new Error('read only');
+
+        if (this.editor.isMarkdown()) {
+            surface.setRangeText(replacement, start, start + length, 'end');
+            return;
+        }
+
+        const range = this._rangeFor(start, length);
+        if (!range) return;
+
+        range.deleteContents();
+        // An empty replacement must not insert an empty text node: it would
+        // add an entry to the walk that shifts nothing and confuses nothing,
+        // but it accumulates one per replacement over a long document.
+        if (replacement) range.insertNode(document.createTextNode(replacement));
+        surface.normalize();
+    }
+
+    // -----------------------------------------------------------------------
+    // The bar
+    // -----------------------------------------------------------------------
+
+    /**
+     * @returns {HTMLElement}
+     */
+    _buildBar() {
+        const bar = document.createElement('div');
+        bar.className = 'docs-find';
+
+        this.findInput = document.createElement('input');
+        this.findInput.type = 'text';
+        this.findInput.className = 'form-input form-input-sm';
+        this.findInput.placeholder = 'Find';
+        this.findInput.setAttribute('aria-label', 'Find');
+        // A new search term starts from the top, not from wherever the last
+        // one left the caret.
+        this.findInput.addEventListener('input', () => {
+            this._cursor = 0;
+            this._say('');
+        });
+        this.findInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.findNext();
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.hide();
+            }
+        });
+        bar.appendChild(this.findInput);
+
+        this.replaceInput = document.createElement('input');
+        this.replaceInput.type = 'text';
+        this.replaceInput.className = 'form-input form-input-sm';
+        this.replaceInput.placeholder = 'Replace with';
+        this.replaceInput.setAttribute('aria-label', 'Replace with');
+        this.replaceInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.hide();
+            }
+        });
+        bar.appendChild(this.replaceInput);
+
+        bar.appendChild(this._button('Next', () => this.findNext(), 'btn-outline'));
+        bar.appendChild(this._button('Replace', () => this.replaceCurrent(), 'btn-outline'));
+        bar.appendChild(this._button('All', () => this.replaceAll(), 'btn-outline'));
+
+        const caseLabel = document.createElement('label');
+        caseLabel.className = 'docs-find__case';
+        this.caseInput = document.createElement('input');
+        this.caseInput.type = 'checkbox';
+        caseLabel.appendChild(this.caseInput);
+        caseLabel.appendChild(document.createTextNode('Match case'));
+        this.caseInput.addEventListener('change', () => {
+            this._cursor = 0;
+        });
+        bar.appendChild(caseLabel);
+
+        this.status = document.createElement('span');
+        this.status.className = 'docs-find__status';
+        this.status.setAttribute('role', 'status');
+        bar.appendChild(this.status);
+
+        const close = document.createElement('button');
+        close.type = 'button';
+        close.className = 'btn btn-sm btn-ghost docs-find__close';
+        close.title = 'Close find and replace';
+        close.setAttribute('aria-label', 'Close find and replace');
+        const icon = document.createElement('span');
+        icon.dataset.icon = 'x';
+        icon.dataset.iconSize = '14';
+        close.appendChild(icon);
+        close.addEventListener('click', () => this.hide());
+        bar.appendChild(close);
+
+        return bar;
+    }
+
+    /**
+     * @param   {string}   text
+     * @param   {Function} handler
+     * @param   {string}   variant
+     * @returns {HTMLElement}
+     */
+    _button(text, handler, variant) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = `btn btn-sm ${variant}`;
+        btn.textContent = text;
+        // mousedown would fire before the contenteditable selection settles;
+        // click is right here because the buttons work from offsets, not from
+        // whatever happens to be selected.
+        btn.addEventListener('click', handler);
+        return btn;
+    }
+
+    /**
+     * @param   {string} message
+     * @returns {void}
+     */
+    _say(message) {
+        if (this.status) this.status.textContent = message;
+    }
+}

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

@@ -0,0 +1,203 @@
+/**
+ * The folder pane.
+ *
+ * Folders are a flat list on the wire, each carrying a `parentId`, so the
+ * tree is assembled here rather than on the server. A cycle in that data -
+ * two folders naming each other as parent - would otherwise recurse until the
+ * tab dies, so `buildTree` only ever visits a folder once.
+ *
+ * "All documents" is not a folder. It is the null selection, drawn as a row
+ * because a person needs somewhere to click to get back out of a folder.
+ *
+ * This module owns the data and the edits. Drawing is the screen's: it binds
+ * `rows()` with M.applyBindings, so a rename or a delete here only has to say
+ * that something changed (`onChange`) and the pane follows.
+ *
+ * @module docs/admin/lib/folders
+ */
+
+import {api, promptWith} from './api.js';
+
+export class FolderManager {
+    /**
+     * @param {object}   [options]
+     * @param {Function} [options.onFolderSelect] called with the folder id, or null for all
+     * @param {Function} [options.onChange]       called after the list is reloaded
+     */
+    constructor(options = {}) {
+        this.onFolderSelect = options.onFolderSelect || (() => {});
+        this.onChange = options.onChange || (() => {});
+        this.folders = [];
+        this.currentFolderId = null;
+    }
+
+    /**
+     * Fetch the folder list. A failure leaves the previous list in place -
+     * an empty pane would read as "you have no folders".
+     *
+     * @returns {Promise<object[]>}
+     */
+    async load() {
+        try {
+            const folders = await api('/folders');
+            this.folders = Array.isArray(folders) ? folders : [];
+        } catch (err) {
+            E.toast(err.message || 'Failed to load folders', {type: 'error'});
+        }
+        this.onChange(this.folders);
+        return this.folders;
+    }
+
+    /**
+     * @param   {string|null} id
+     * @returns {object|null}
+     */
+    byId(id) {
+        return this.folders.find(f => f.id === id) || null;
+    }
+
+    /**
+     * The tree flattened into drawing order, "All documents" first. Each row
+     * carries its depth, so the pane is one keyed list rather than a nest.
+     *
+     * @returns {{id: string|null, key: string, name: string, depth: number, icon: string}[]}
+     */
+    rows() {
+        const out = [{id: null, key: '__all', name: 'All documents', depth: 0, icon: 'folder-open'}];
+        const walk = (nodes, depth) => nodes.forEach(node => {
+            out.push({id: node.id, key: node.id, name: node.name || 'Untitled', depth, icon: 'folder'});
+            walk(node.children, depth + 1);
+        });
+        walk(this.buildTree(), 0);
+        return out;
+    }
+
+    /**
+     * Arrange the flat list into roots and children.
+     *
+     * A folder whose parent is missing - deleted, or owned by someone else
+     * under user scoping - is drawn at the root rather than dropped, because
+     * a folder you cannot see is a folder you cannot empty.
+     *
+     * @returns {object[]}
+     */
+    buildTree() {
+        const nodes = new Map();
+        this.folders.forEach(folder => nodes.set(folder.id, {...folder, children: []}));
+
+        const roots = [];
+        nodes.forEach(node => {
+            const parent = node.parentId ? nodes.get(node.parentId) : null;
+            if (parent && parent !== node && !this._isAncestor(node, parent, nodes)) {
+                parent.children.push(node);
+            } else {
+                roots.push(node);
+            }
+        });
+
+        const byName = (a, b) => (a.name || '').localeCompare(b.name || '');
+        roots.sort(byName);
+        nodes.forEach(node => node.children.sort(byName));
+        return roots;
+    }
+
+    /**
+     * Select a folder and tell the screen.
+     *
+     * @param   {string|null} id
+     * @returns {void}
+     */
+    select(id) {
+        this.currentFolderId = id;
+        this.onFolderSelect(id);
+    }
+
+    /**
+     * Ask for a name and create a folder.
+     *
+     * @param   {string|null} [parentId] defaults to the current selection
+     * @returns {Promise<object|null>} the new folder, or null if cancelled
+     */
+    async createFolder(parentId = this.currentFolderId) {
+        const name = await E.prompt('Folder name', {
+            title: parentId ? 'New subfolder' : 'New folder',
+            inputPlaceholder: 'e.g. Meeting notes'
+        });
+        if (!name || !name.trim()) return null;
+
+        try {
+            const folder = await api('/folders', 'POST', {name: name.trim(), parentId});
+            await this.load();
+            return folder;
+        } catch (err) {
+            E.toast(err.message || 'Failed to create folder', {type: 'error'});
+            return null;
+        }
+    }
+
+    /**
+     * @param   {object} folder
+     * @returns {Promise<void>}
+     */
+    async renameFolder(folder) {
+        const name = await promptWith('Folder name', {title: 'Rename folder'}, folder.name || '');
+        if (!name || !name.trim() || name.trim() === folder.name) return;
+
+        try {
+            await api(`/folders/${encodeURIComponent(folder.id)}`, 'PUT', {name: name.trim()});
+            await this.load();
+        } catch (err) {
+            E.toast(err.message || 'Failed to rename folder', {type: 'error'});
+        }
+    }
+
+    /**
+     * Delete a folder. The server moves its documents back to the root, so
+     * the confirmation says so rather than implying the documents go too.
+     *
+     * @param   {object} folder
+     * @returns {Promise<void>}
+     */
+    async deleteFolder(folder) {
+        const confirmed = await E.confirm(
+            'Delete this folder? Its documents move back to All documents.',
+            {title: 'Delete folder', confirmText: 'Delete'}
+        );
+        if (!confirmed) return;
+
+        try {
+            await api(`/folders/${encodeURIComponent(folder.id)}`, 'DELETE');
+            // Standing on a folder that no longer exists would leave the list
+            // filtered by a dead id and looking permanently empty.
+            if (this.currentFolderId === folder.id) this.currentFolderId = null;
+            await this.load();
+            this.onFolderSelect(this.currentFolderId);
+            E.toast('Folder deleted', {type: 'success'});
+        } catch (err) {
+            E.toast(err.message || 'Failed to delete folder', {type: 'error'});
+        }
+    }
+
+    // -----------------------------------------------------------------------
+    // Internals
+    // -----------------------------------------------------------------------
+
+    /**
+     * Would attaching `node` under `parent` close a loop?
+     *
+     * @param   {object} node
+     * @param   {object} parent
+     * @param   {Map}    nodes
+     * @returns {boolean}
+     */
+    _isAncestor(node, parent, nodes) {
+        const seen = new Set();
+        let cursor = parent;
+        while (cursor) {
+            if (cursor === node || seen.has(cursor.id)) return true;
+            seen.add(cursor.id);
+            cursor = cursor.parentId ? nodes.get(cursor.parentId) : null;
+        }
+        return false;
+    }
+}

package/plugins/docs/admin/lib/panel-guard.js

@@ -0,0 +1,73 @@
+/**
+ * Docs - ask before a slideover with unsaved changes closes (its button,
+ * Escape, the backdrop). The same helper as Sheets' (plugins cannot share a
+ * file): Domma's close() is wrapped once; a second close while the question is
+ * open is ignored; once the panel is really closing nothing asks again
+ * (onceClosed's later destroy() calls close() argument-less). `close(true)`
+ * closes without asking. Also: one panel of a kind at a time (claimPanel), and
+ * a panel that closes with the screen that opened it (tieToScreen).
+ *
+ * Call it AFTER kit.onceClosed(so, …): both wrap close(), and onceClosed's
+ * wrapper tears the panel down whatever an inner wrapper decided - so the
+ * question has to be the outer one.
+ *
+ * @module docs/admin/lib/panel-guard
+ */
+
+/**
+ * @param {object} so - an E.slideover
+ * @param {() => boolean} dirty
+ * @param {string} [question]
+ * @param {() => boolean} [busy] - true while the panel's work is on its way (a send): a close then is
+ *        ignored, because the panel closes itself when it lands (2.10)
+ * @returns {{done: () => void}} call done() once the work is saved or sent, so the close does not ask
+ */
+export function guardClose(so, dirty, question = 'Discard the changes you have not saved?', busy = () => false) {
+    const close = so.close.bind(so);
+    let finished = false;
+    let asking = false;
+    so.close = async (force) => {
+        if (!finished && force !== true) {
+            if (busy()) return undefined;
+            if (dirty()) {
+                if (asking) return undefined;
+                asking = true;
+                const ok = await E.confirm(question);
+                asking = false;
+                if (!ok) return undefined;
+            }
+        }
+        finished = true;
+        return close();
+    };
+    return {done: () => { finished = true; }};
+}
+
+/**
+ * One panel of a kind at a time (2.10): a second click while it is opening or
+ * open does nothing. Returns the release - call it when the panel has closed,
+ * or when opening it failed (or it can never open again until a reload) - or
+ * null when one is already claimed.
+ *
+ * @param   {string} kind
+ * @returns {(() => void)|null}
+ */
+const claimed = new Set();
+export function claimPanel(kind) {
+    if (claimed.has(kind)) return null;
+    claimed.add(kind);
+    let done = false;
+    return () => { if (!done) { done = true; claimed.delete(kind); } };
+}
+
+/**
+ * Tie a panel to the screen that opened it: it closes (without asking) when
+ * the screen goes. `life` is {alive(), add(fn) => remove}; absent = no tie.
+ *
+ * @returns {() => void} untie - call it when the panel closes by itself
+ */
+export function tieToScreen(so, life) {
+    if (!life?.add) return () => {};
+    const off = life.add(() => { try { so.close(true); } catch { /* gone */ } });
+    return typeof off === 'function' ? off : () => {};
+}