@ketvietlab/ketsuite 0.1.25 → 0.1.30

package/dist/ui/client/live-doc-view.js

@@ -20,6 +20,7 @@
 // browser-served /_ket/view/index.js) — the same split mail_backend's own
 // chatter view uses.
 import * as Y from 'yjs';
+import { ensureTrailingParagraph } from './live-doc-tail.js';
 // The shell's markup and the document serializer, which belong to the kit and
 // not to a module — see the header of that file, and tools/ui-audit.ts for the
 // rule it answers.
@@ -217,6 +218,7 @@ export function createLiveDocView(props) {
     const doc = new Y.Doc();
     let container = null;
     let shell = null;
+    let selectedImage = -1;
     let composing = false;
     /**
      * Where a composition began, and whether a re-render is owed to it.
@@ -258,10 +260,21 @@ export function createLiveDocView(props) {
     let announcedIndex = -1;
     let heartbeat = null;
     const fragment = doc.getXmlFragment('content');
+    // Embedded drafts have one writer. Never normalize shared remote documents here:
+    // concurrent viewers must not each append their own trailing paragraph.
+    if (props.local && !props.readOnly) {
+        doc.on('beforeObserverCalls', () => {
+            if (!composing)
+                ensureTrailingParagraph(doc);
+        });
+    }
     // ---- document model -----------------------------------------------------
     const typeOf = (element) => {
         const value = element.getAttribute('type');
-        return value && BLOCK_TYPES.includes(value) ? value : 'p';
+        return value &&
+            (value === 'table' || value === 'divider' || value === 'image' || BLOCK_TYPES.includes(value))
+            ? value
+            : 'p';
     };
     /**
      * The blocks, in order.
@@ -287,6 +300,7 @@ export function createLiveDocView(props) {
     function insertBlock(index, type, checked = false) {
         const element = new Y.XmlElement('block');
         element.setAttribute('type', type);
+        element.setAttribute('id', crypto.randomUUID());
         if (checked)
             element.setAttribute('checked', 'true');
         fragment.insert(index, [element]);
@@ -298,11 +312,26 @@ export function createLiveDocView(props) {
         if (fragment.length === 0)
             doc.transact(() => void insertBlock(0, 'p'));
     };
+    const attributeOf = (block, name) => block.node instanceof Y.XmlElement ? block.node.getAttribute(name) : undefined;
+    const rowsOf = (block) => JSON.parse(attributeOf(block, 'rows') || '[]');
     const modelOf = () => blocksOf().map((block) => ({
         type: block.type,
         checked: block.checked,
         delta: block.text.toDelta(),
+        id: attributeOf(block, 'id'),
+        align: attributeOf(block, 'align'),
+        width: block.type === 'image' ? Number(attributeOf(block, 'width') || 100) : undefined,
+        src: block.type === 'image' ? attributeOf(block, 'src') : undefined,
+        alt: block.type === 'image' ? attributeOf(block, 'alt') : undefined,
+        rows: block.type === 'table' ? rowsOf(block) : undefined,
     }));
+    const currentValue = () => ({
+        snapshot: bytesToBase64(Y.encodeStateAsUpdate(doc)),
+        blocks: modelOf(),
+    });
+    /** Table cells edit on their own; block and mark commands do not reach into them. */
+    const inCell = () => typeof document !== 'undefined' &&
+        !!document.activeElement?.closest('[data-live-cell]');
     // ---- DOM <-> model positions --------------------------------------------
     const elementAt = (index) => container?.querySelector(`[data-index="${index}"]`) ?? null;
     /**
@@ -456,7 +485,14 @@ export function createLiveDocView(props) {
         if (!container)
             return;
         const span = keep === undefined ? selectionSpan() : keep;
-        container.innerHTML = documentHtml(modelOf(), props.lang, others());
+        container.innerHTML = documentHtml(modelOf(), props.lang, others(), !props.readOnly && !!props.local);
+        container
+            .querySelector(`[data-block="image"][data-index="${selectedImage}"]`)
+            ?.setAttribute('data-selected', 'true');
+        if (props.readOnly) {
+            for (const el of Array.from(container.querySelectorAll('[contenteditable]')))
+                el.setAttribute('contenteditable', 'false');
+        }
         if (span)
             restoreSelection(span);
         syncToolbar();
@@ -515,6 +551,8 @@ export function createLiveDocView(props) {
      * itself could sit in the room under somebody else's name.
      */
     async function announce(index, gone = false) {
+        if (props.local)
+            return;
         announcedAt = Date.now();
         announcedIndex = gone ? -1 : index;
         const answer = await fetch(`${base}/presence`, {
@@ -596,6 +634,8 @@ export function createLiveDocView(props) {
             block.node.removeAttribute('checked');
     }
     function applyBlockType(type) {
+        if (inCell())
+            return;
         const span = selectionSpan();
         if (!span)
             return;
@@ -633,6 +673,9 @@ export function createLiveDocView(props) {
         });
     }
     function mergeBackward(index) {
+        const around = blocksOf();
+        if (around[index]?.type === 'table' || around[index - 1]?.type === 'table')
+            return;
         if (index <= 0)
             return;
         const blocks = blocksOf();
@@ -739,6 +782,8 @@ export function createLiveDocView(props) {
         return seen && all;
     }
     function toggleMark(name) {
+        if (inCell())
+            return;
         const span = selectionSpan();
         if (!span || isCollapsed(span))
             return;
@@ -1051,6 +1096,15 @@ export function createLiveDocView(props) {
             const name = button.getAttribute('data-flow-editor-mark') ?? '';
             button.addEventListener('mousedown', (event) => event.preventDefault());
             button.addEventListener('click', () => {
+                if (name === 'image') {
+                    if (!props.readOnly && !props.imageDisabled && props.local)
+                        props.onImageRequest?.(prepareImageInsertion(), button);
+                    return;
+                }
+                if (name === 'table') {
+                    insertTable();
+                    return;
+                }
                 if (LIST_TYPES.includes(name))
                     applyBlockType(name);
                 else if (name === 'link')
@@ -1061,6 +1115,8 @@ export function createLiveDocView(props) {
         }
         const select = root.querySelector('[data-flow-editor-block]');
         select?.addEventListener('change', () => {
+            if (inCell())
+                return;
             const value = select.value;
             const span = selectionSpan();
             if (!span)
@@ -1071,6 +1127,94 @@ export function createLiveDocView(props) {
             });
         });
     }
+    /** A 2 × 2 table after the caret's block, with a paragraph after it to keep typing in. */
+    function insertTable() {
+        const at = (selectionSpan()?.end.index ?? fragment.length - 1) + 1;
+        structural(caretAt({ index: at + 1, offset: 0 }), () => {
+            insertBlock(at, 'table');
+            fragment.get(at).setAttribute('rows', JSON.stringify([
+                ['', ''],
+                ['', ''],
+            ]));
+            insertBlock(at + 1, 'p');
+        });
+    }
+    /** Seeds a local document from what its owner stored. */
+    function loadLocal() {
+        if (props.snapshot) {
+            Y.applyUpdate(doc, base64ToBytes(props.snapshot), REMOTE);
+            return;
+        }
+        doc.transact(() => {
+            for (const block of props.blocks ?? []) {
+                const text = insertBlock(fragment.length, typeOfValue(block.type), block.checked);
+                const node = fragment.get(fragment.length - 1);
+                if (block.id)
+                    node.setAttribute('id', block.id);
+                if (block.align)
+                    node.setAttribute('align', block.align);
+                if (block.width)
+                    node.setAttribute('width', String(block.width));
+                if (block.src)
+                    node.setAttribute('src', block.src);
+                if (block.alt)
+                    node.setAttribute('alt', block.alt);
+                if (block.rows)
+                    node.setAttribute('rows', JSON.stringify(block.rows));
+                if (block.delta?.length)
+                    text.applyDelta(block.delta);
+            }
+            ensureBlocks();
+        }, REMOTE);
+    }
+    const typeOfValue = (type) => type === 'table' || type === 'divider' || type === 'image' || BLOCK_TYPES.includes(type)
+        ? type
+        : 'p';
+    /**
+     * Tables keep their row/cell structure. Cell edits stay out of the editor's
+     * flat paragraph position model, so they cannot destroy adjacent blocks.
+     */
+    function wireCells(el) {
+        for (const type of ['beforeinput', 'paste', 'compositionstart', 'compositionend', 'input']) {
+            el.addEventListener(type, (event) => {
+                const cell = event.target?.closest?.('[data-live-cell]');
+                if (!cell)
+                    return;
+                event.stopImmediatePropagation();
+                if (props.readOnly) {
+                    event.preventDefault();
+                    return;
+                }
+                if (type === 'paste') {
+                    event.preventDefault();
+                    const selection = document.getSelection();
+                    if (selection?.rangeCount) {
+                        const range = selection.getRangeAt(0);
+                        range.deleteContents();
+                        const text = document.createTextNode(event.clipboardData?.getData('text/plain') ?? '');
+                        range.insertNode(text);
+                        range.setStartAfter(text);
+                        range.collapse(true);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                    }
+                }
+                if (type === 'input' || type === 'compositionend' || type === 'paste') {
+                    const holder = cell.closest('[data-index]');
+                    const block = blocksOf()[Number(holder?.dataset.index)];
+                    if (!block || !(block.node instanceof Y.XmlElement))
+                        return;
+                    const node = block.node;
+                    const rows = rowsOf(block);
+                    const row = rows[Number(cell.dataset.row)];
+                    if (!row)
+                        return;
+                    row[Number(cell.dataset.col)] = cell.innerText;
+                    doc.transact(() => node.setAttribute('rows', JSON.stringify(rows)), LOCAL_TYPING);
+                }
+            }, true);
+        }
+    }
     const linkDialog = () => shell?.querySelector('[data-flow-editor-link-dialog]');
     function openLinkDialog() {
         const span = selectionSpan();
@@ -1106,6 +1250,17 @@ export function createLiveDocView(props) {
     async function mountEditor(el) {
         container = el;
         shell = el.closest('[data-ui="flow-editor"]') ?? el.parentElement;
+        if (props.local)
+            loadLocal();
+        wireCells(el);
+        wireImages(el);
+        if (props.readOnly) {
+            el.setAttribute('contenteditable', 'false');
+            el.setAttribute('aria-readonly', 'true');
+            shell?.querySelector('[role="toolbar"]')?.setAttribute('hidden', '');
+            render(null);
+            return;
+        }
         el.addEventListener('compositionstart', () => {
             composing = true;
             composedAt = selectionSpan()?.start ?? null;
@@ -1136,6 +1291,8 @@ export function createLiveDocView(props) {
             else
                 render(owed ?? undefined);
             composedAt = null;
+            if (props.local && !props.readOnly)
+                ensureTrailingParagraph(doc);
         });
         el.addEventListener('beforeinput', (event) => onBeforeInput(event));
         el.addEventListener('input', () => {
@@ -1162,8 +1319,12 @@ export function createLiveDocView(props) {
             // formatting-loss bug: applying a full-state update on top of the
             // server's own incrementally-built state doesn't round-trip marks the
             // same way normal incremental merges do.
-            if (origin !== REMOTE)
-                void pushLocalUpdate(update);
+            if (origin !== REMOTE) {
+                if (props.local)
+                    props.onChange?.(currentValue());
+                else
+                    void pushLocalUpdate(update);
+            }
             if (origin !== LOCAL_TYPING) {
                 const keep = pending;
                 pending = null;
@@ -1175,6 +1336,10 @@ export function createLiveDocView(props) {
                     render(keep ?? undefined);
             }
         });
+        if (props.local) {
+            render(null);
+            return;
+        }
         const response = await fetch(`${base}/content`);
         const { snapshot, topic, viewerId } = (await response.json());
         if (viewerId)
@@ -1199,10 +1364,158 @@ export function createLiveDocView(props) {
             navigator.sendBeacon?.(`${base}/presence`, new Blob([JSON.stringify({ index: 0, gone: true })], { type: 'application/json' }));
         });
     }
+    function updateImage(index, patch) {
+        if (props.readOnly || !props.local || disposed)
+            return false;
+        const block = blocksOf()[index];
+        if (block?.type !== 'image' || !(block.node instanceof Y.XmlElement))
+            return false;
+        const node = block.node;
+        if (patch.width !== undefined && !Number.isFinite(patch.width))
+            return false;
+        if (patch.align !== undefined && !['left', 'center', 'right'].includes(patch.align))
+            return false;
+        selectedImage = index;
+        doc.transact(() => {
+            if (patch.width !== undefined)
+                node.setAttribute('width', String(Math.min(100, Math.max(20, patch.width))));
+            if (patch.align !== undefined)
+                node.setAttribute('align', patch.align);
+        });
+        return true;
+    }
+    function removeImage(index) {
+        if (props.readOnly || !props.local || disposed || blocksOf()[index]?.type !== 'image')
+            return false;
+        selectedImage = -1;
+        structural(caretAt({ index: Math.max(0, index - 1), offset: 0 }), () => {
+            fragment.delete(index, 1);
+            ensureBlocks();
+        });
+        return true;
+    }
+    function wireImages(el) {
+        if (props.readOnly || !props.local)
+            return;
+        const select = (figure) => {
+            selectedImage = figure ? Number(figure.dataset.index) : -1;
+            el.querySelectorAll('[data-block="image"]').forEach((item) => void item.toggleAttribute('data-selected', item === figure));
+        };
+        el.addEventListener('focusin', (event) => select(event.target.closest('[data-block="image"]')));
+        el.addEventListener('click', (event) => {
+            const target = event.target;
+            const figure = target.closest('[data-block="image"]');
+            select(figure);
+            if (!figure)
+                return;
+            const index = Number(figure.dataset.index);
+            if (target.closest('[data-live-image-remove]'))
+                removeImage(index);
+            else if (target.closest('[data-live-image-align]')) {
+                updateImage(index, {
+                    align: target.closest('[data-live-image-align]').dataset.liveImageAlign,
+                });
+                el.querySelector(`[data-block="image"][data-index="${index}"]`)?.focus();
+            }
+            else if (target.tagName === 'IMG')
+                figure.focus();
+        });
+        el.addEventListener('input', (event) => {
+            const target = event.target;
+            if (!target.matches('[data-live-image-width]'))
+                return;
+            event.stopImmediatePropagation();
+            const figure = target.closest('[data-block="image"]');
+            figure.querySelector('[data-live-image-box]').style.width = `${target.value}%`;
+        });
+        el.addEventListener('change', (event) => {
+            const target = event.target;
+            if (!target.matches('[data-live-image-width]'))
+                return;
+            const index = Number(target.closest('[data-block="image"]').dataset.index);
+            updateImage(index, { width: Number(target.value) });
+            el.querySelector(`[data-index="${index}"] [data-live-image-width]`)?.focus();
+        });
+        el.addEventListener('keydown', (event) => {
+            const target = event.target;
+            if (target.matches('[data-block="image"]') && ['Backspace', 'Delete'].includes(event.key)) {
+                event.preventDefault();
+                removeImage(Number(target.dataset.index));
+            }
+        });
+        el.addEventListener('pointerdown', (event) => {
+            const handle = event.target.closest('[data-live-image-resize]');
+            if (!handle)
+                return;
+            event.preventDefault();
+            const figure = handle.closest('[data-block="image"]');
+            const box = figure.querySelector('[data-live-image-box]');
+            const index = Number(figure.dataset.index), start = event.clientX;
+            const available = figure.getBoundingClientRect().width;
+            if (!available)
+                return;
+            const initial = (box.getBoundingClientRect().width / available) * 100;
+            const factor = figure.dataset.imageAlign === 'right' ? -1 : figure.dataset.imageAlign === 'center' ? 2 : 1;
+            let width = initial;
+            handle.setPointerCapture(event.pointerId);
+            const move = (next) => {
+                width = Math.round(Math.max(20, Math.min(100, initial + ((factor * (next.clientX - start)) / available) * 100)));
+                box.style.width = `${width}%`;
+            };
+            const finish = (next) => {
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', finish);
+                handle.removeEventListener('pointercancel', finish);
+                if (next.type === 'pointercancel')
+                    box.style.width = `${initial}%`;
+                else {
+                    updateImage(index, { width });
+                    el.querySelector(`[data-block="image"][data-index="${index}"]`)?.focus();
+                }
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', finish);
+            handle.addEventListener('pointercancel', finish);
+        });
+    }
+    let disposed = false;
+    /** Capture the insertion anchor before an asynchronous upload moves browser focus. */
+    function prepareImageInsertion() {
+        const index = selectionSpan()?.end.index ?? fragment.length - 1;
+        const anchor = blocksOf()[index]?.node;
+        return (image) => {
+            if (disposed || props.readOnly || !props.local)
+                return false;
+            if (!/^\/files\/[a-zA-Z0-9_%.-]+$/.test(image.src))
+                return false;
+            const current = blocksOf().findIndex((block) => block.node === anchor);
+            const at = current < 0 ? fragment.length : current + 1;
+            structural(caretAt({ index: at + 1, offset: 0 }), () => {
+                insertBlock(at, 'image');
+                const node = fragment.get(at);
+                node.setAttribute('src', image.src);
+                node.setAttribute('alt', image.alt);
+                insertBlock(at + 1, 'p');
+            });
+            return true;
+        };
+    }
     return {
-        view: () => liveDocShell({ containerId, lang: props.lang }),
+        prepareImageInsertion,
+        updateImage,
+        removeImage,
+        view: () => liveDocShell({
+            containerId,
+            lang: props.lang,
+            tables: props.local,
+            images: props.local && !!props.onImageRequest,
+            imageDisabled: props.readOnly || props.imageDisabled,
+        }),
+        getValue: currentValue,
         dispose() {
+            disposed = true;
             source?.close();
+            doc.destroy();
             if (heartbeat)
                 clearInterval(heartbeat);
             if (typeof document !== 'undefined')