fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/tokenized.js

@@ -0,0 +1,622 @@
+import gsap from "gsap";
+import { Fauna } from "fauna-api";
+import { serializeParts } from "./tokenText.js";
+export { encodeToken, serializeParts, parseRichText, hasTokens, toPlainText } from "./tokenText.js";
+// ─── createTokenizedInput ────────────────────────────────────────────────────
+export function createTokenizedInput(container, options = {}) {
+    const triggers = options.triggers ?? [];
+    const triggerChars = new Set(triggers.map(t => t.char));
+    // ── DOM ──
+    const root = document.createElement('div');
+    root.className = 'tokenized-root';
+    const editor = document.createElement('div');
+    editor.className = 'tokenized-editor';
+    editor.contentEditable = 'true';
+    editor.setAttribute('role', 'textbox');
+    editor.setAttribute('aria-multiline', options.multiline ? 'true' : 'false');
+    if (options.placeholder) {
+        editor.dataset.placeholder = options.placeholder;
+    }
+    root.appendChild(editor);
+    const suggestionsEl = document.createElement('div');
+    suggestionsEl.className = 'tokenized-suggestions';
+    suggestionsEl.style.display = 'none';
+    root.appendChild(suggestionsEl);
+    container.appendChild(root);
+    // ── Suggestion state ──
+    let activeTrigger = null;
+    let triggerAnchorNode = null;
+    let triggerAnchorOffset = 0;
+    let suggestionItems = [];
+    let activeIndex = 0;
+    let suggestGeneration = 0;
+    // ── Helpers ──
+    function parseParts() {
+        const parts = [];
+        function walk(node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent ?? '';
+                if (text.length > 0) {
+                    // Merge consecutive text parts
+                    const last = parts[parts.length - 1];
+                    if (last && last.kind === 'text') {
+                        last.text += text;
+                    }
+                    else {
+                        parts.push({ kind: 'text', text });
+                    }
+                }
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.classList.contains('tokenized-token')) {
+                    parts.push({
+                        kind: 'token',
+                        token: {
+                            type: el.dataset.type ?? '',
+                            value: el.dataset.value ?? '',
+                            label: el.dataset.label ?? '',
+                            icon: el.dataset.icon || undefined
+                        }
+                    });
+                }
+                else if (el.tagName === 'BR') {
+                    const last = parts[parts.length - 1];
+                    if (last && last.kind === 'text') {
+                        last.text += '\n';
+                    }
+                    else {
+                        parts.push({ kind: 'text', text: '\n' });
+                    }
+                }
+                else {
+                    // Recurse into non-token elements (e.g. divs from contenteditable line wrapping)
+                    for (const child of node.childNodes) {
+                        walk(child);
+                    }
+                    // Contenteditable wraps lines in divs — add newline after block elements
+                    if (el.tagName === 'DIV' || el.tagName === 'P') {
+                        const last = parts[parts.length - 1];
+                        if (last && last.kind === 'text' && !last.text.endsWith('\n')) {
+                            last.text += '\n';
+                        }
+                        else if (!last || last.kind !== 'text') {
+                            parts.push({ kind: 'text', text: '\n' });
+                        }
+                    }
+                }
+            }
+        }
+        for (const child of editor.childNodes) {
+            walk(child);
+        }
+        // Trim trailing newline
+        const last = parts[parts.length - 1];
+        if (last && last.kind === 'text') {
+            last.text = last.text.replace(/\n+$/, '');
+            if (last.text.length === 0)
+                parts.pop();
+        }
+        return parts;
+    }
+    function serializeText(parts) {
+        return serializeParts(parts);
+    }
+    function buildTokenSpan(token) {
+        const span = document.createElement('span');
+        span.className = 'tokenized-token';
+        span.contentEditable = 'false';
+        span.dataset.type = token.type;
+        span.dataset.value = token.value;
+        span.dataset.label = token.label;
+        if (token.icon)
+            span.dataset.icon = token.icon;
+        if (token.icon) {
+            const iconEl = document.createElement('span');
+            iconEl.className = 'material-symbols-outlined tokenized-token-icon';
+            iconEl.textContent = token.icon;
+            span.appendChild(iconEl);
+        }
+        const labelEl = document.createElement('span');
+        labelEl.className = 'tokenized-token-label';
+        labelEl.textContent = token.label;
+        span.appendChild(labelEl);
+        const removeEl = document.createElement('span');
+        removeEl.className = 'material-symbols-outlined tokenized-token-remove';
+        removeEl.textContent = 'close';
+        removeEl.onmousedown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            gsap.to(span, {
+                duration: 0.2, opacity: 0, scale: 0.8, ease: 'power2.in',
+                onComplete: () => {
+                    // Remove the trailing zero-width space if present
+                    const next = span.nextSibling;
+                    if (next && next.nodeType === Node.TEXT_NODE && next.textContent === '\u200B') {
+                        next.remove();
+                    }
+                    span.remove();
+                    fireInput();
+                }
+            });
+        };
+        span.appendChild(removeEl);
+        return span;
+    }
+    function insertTokenAtCaret(token) {
+        const span = buildTokenSpan(token);
+        const zwsp = document.createTextNode('\u200B');
+        const sel = window.getSelection();
+        const range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+        // Only honor the caret when it actually lives inside this editor.
+        // Otherwise the token would be injected wherever the document selection
+        // happens to be (e.g. up in the page header) — so append into the editor
+        // instead and drop the caret after it.
+        if (!range || !editor.contains(range.commonAncestorContainer)) {
+            editor.appendChild(span);
+            editor.appendChild(zwsp);
+            if (sel) {
+                const end = document.createRange();
+                end.setStartAfter(zwsp);
+                end.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(end);
+            }
+        }
+        else {
+            range.deleteContents();
+            range.insertNode(zwsp);
+            range.insertNode(span);
+            // Move caret after zero-width space
+            range.setStartAfter(zwsp);
+            range.setEndAfter(zwsp);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        gsap.from(span, { duration: 0.25, opacity: 0, scale: 0.85, ease: 'power2.out' });
+        fireInput();
+    }
+    function fireInput() {
+        options.onInput?.(parseParts());
+    }
+    // ── Suggestion popup ──
+    function showSuggestions(items) {
+        suggestionItems = items;
+        activeIndex = 0;
+        suggestionsEl.innerHTML = '';
+        if (items.length === 0) {
+            hideSuggestions();
+            return;
+        }
+        for (let i = 0; i < items.length; i++) {
+            const row = document.createElement('div');
+            row.className = 'tokenized-suggestion';
+            if (i === 0)
+                row.classList.add('active');
+            if (items[i].image) {
+                const img = document.createElement('img');
+                img.className = 'tokenized-suggestion-image';
+                img.src = items[i].image;
+                row.appendChild(img);
+            }
+            else if (items[i].icon) {
+                const icon = document.createElement('span');
+                icon.className = 'material-symbols-outlined tokenized-suggestion-icon';
+                icon.textContent = items[i].icon;
+                row.appendChild(icon);
+            }
+            const text = document.createElement('div');
+            text.className = 'tokenized-suggestion-text';
+            const label = document.createElement('div');
+            label.className = 'tokenized-suggestion-label';
+            label.textContent = items[i].label;
+            text.appendChild(label);
+            if (items[i].subtitle) {
+                const sub = document.createElement('div');
+                sub.className = 'tokenized-suggestion-subtitle';
+                sub.textContent = items[i].subtitle;
+                text.appendChild(sub);
+            }
+            row.appendChild(text);
+            row.onmousedown = (e) => {
+                e.preventDefault();
+                pickSuggestion(i);
+            };
+            suggestionsEl.appendChild(row);
+        }
+        // Position popup near caret
+        positionSuggestions();
+        suggestionsEl.style.display = 'flex';
+        gsap.fromTo(suggestionsEl, { opacity: 0, y: 4 }, { opacity: 1, y: 0, duration: 0.15, ease: 'power2.out' });
+    }
+    function positionSuggestions() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0).cloneRange();
+        range.collapse(true);
+        const rect = range.getBoundingClientRect();
+        const rootRect = root.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            // Fallback — position at bottom-left of editor
+            suggestionsEl.style.left = '0px';
+            suggestionsEl.style.bottom = `${root.offsetHeight - editor.offsetTop}px`;
+            return;
+        }
+        suggestionsEl.style.left = `${rect.left - rootRect.left}px`;
+        suggestionsEl.style.bottom = `${rootRect.bottom - rect.top + 4}px`;
+    }
+    function hideSuggestions() {
+        activeTrigger = null;
+        triggerAnchorNode = null;
+        suggestionItems = [];
+        suggestGeneration++;
+        suggestionsEl.style.display = 'none';
+        suggestionsEl.innerHTML = '';
+    }
+    function updateActiveRow() {
+        const rows = suggestionsEl.querySelectorAll('.tokenized-suggestion');
+        rows.forEach((row, i) => {
+            row.classList.toggle('active', i === activeIndex);
+        });
+        // Scroll active into view
+        const activeRow = rows[activeIndex];
+        activeRow?.scrollIntoView({ block: 'nearest' });
+    }
+    function pickSuggestion(index) {
+        if (!activeTrigger || index < 0 || index >= suggestionItems.length) {
+            hideSuggestions();
+            return;
+        }
+        const token = activeTrigger.onPick(suggestionItems[index]);
+        // Delete the trigger char + query text before inserting the token
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0 && triggerAnchorNode) {
+            const range = document.createRange();
+            range.setStart(triggerAnchorNode, triggerAnchorOffset);
+            range.setEnd(sel.focusNode, sel.focusOffset);
+            range.deleteContents();
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        hideSuggestions();
+        insertTokenAtCaret(token);
+    }
+    function getTriggerQuery() {
+        if (!activeTrigger || !triggerAnchorNode)
+            return null;
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        // Build text from anchor to current caret
+        try {
+            const range = document.createRange();
+            range.setStart(triggerAnchorNode, triggerAnchorOffset);
+            range.setEnd(sel.focusNode, sel.focusOffset);
+            const text = range.toString();
+            // Should start with the trigger char
+            if (!text.startsWith(activeTrigger.char)) {
+                return null;
+            }
+            return text.slice(activeTrigger.char.length);
+        }
+        catch {
+            return null;
+        }
+    }
+    async function runSuggest(query) {
+        if (!activeTrigger)
+            return;
+        suggestGeneration++;
+        const gen = suggestGeneration;
+        const trigger = activeTrigger;
+        try {
+            const results = await trigger.suggest(query);
+            if (gen !== suggestGeneration || activeTrigger !== trigger)
+                return;
+            showSuggestions(results);
+        }
+        catch {
+            if (gen === suggestGeneration)
+                hideSuggestions();
+        }
+    }
+    // Debounce for suggest calls
+    let suggestTimer = null;
+    function debounceSuggest(query) {
+        if (suggestTimer)
+            clearTimeout(suggestTimer);
+        suggestTimer = setTimeout(() => runSuggest(query), 120);
+    }
+    // ── Input events ──
+    editor.addEventListener('input', () => {
+        fireInput();
+        if (activeTrigger) {
+            const query = getTriggerQuery();
+            if (query === null) {
+                hideSuggestions();
+            }
+            else {
+                debounceSuggest(query);
+            }
+        }
+    });
+    editor.addEventListener('keydown', (e) => {
+        // Suggestion navigation
+        if (suggestionsEl.style.display !== 'none' && suggestionItems.length > 0) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                activeIndex = (activeIndex + 1) % suggestionItems.length;
+                updateActiveRow();
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                activeIndex = (activeIndex - 1 + suggestionItems.length) % suggestionItems.length;
+                updateActiveRow();
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                pickSuggestion(activeIndex);
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                hideSuggestions();
+                return;
+            }
+        }
+        // Submit
+        if (e.key === 'Enter' && !e.shiftKey) {
+            if (options.multiline === false || !options.multiline) {
+                // Single-line or default: Enter submits
+                e.preventDefault();
+                const parts = parseParts();
+                if (parts.length > 0) {
+                    options.onSubmit?.(parts);
+                }
+                return;
+            }
+        }
+        if (e.key === 'Enter' && !e.shiftKey && options.multiline) {
+            e.preventDefault();
+            const parts = parseParts();
+            if (parts.length > 0) {
+                options.onSubmit?.(parts);
+            }
+            return;
+        }
+        // Trigger detection — check the character being typed, not e.key
+        // (e.key can differ from the actual inserted char on some layouts)
+        if (triggerChars.has(e.key) && !activeTrigger) {
+            const trigger = triggers.find(t => t.char === e.key);
+            // Use setTimeout(0) instead of rAF — rAF can fire before the
+            // input event, causing the anchor to be captured too early
+            setTimeout(() => {
+                const sel = window.getSelection();
+                if (!sel || sel.rangeCount === 0)
+                    return;
+                activeTrigger = trigger;
+                triggerAnchorNode = sel.focusNode;
+                triggerAnchorOffset = Math.max(0, sel.focusOffset - trigger.char.length);
+            }, 0);
+        }
+        // Backspace near token — handle deletion of whole token
+        if (e.key === 'Backspace') {
+            const sel = window.getSelection();
+            if (sel && sel.isCollapsed && sel.rangeCount > 0) {
+                const node = sel.focusNode;
+                const offset = sel.focusOffset;
+                // If caret is in a zero-width space right after a token
+                if (node && node.nodeType === Node.TEXT_NODE && offset === 0) {
+                    const prev = node.previousSibling;
+                    if (prev && prev instanceof HTMLElement && prev.classList.contains('tokenized-token')) {
+                        e.preventDefault();
+                        if (node.textContent === '\u200B')
+                            node.remove();
+                        prev.remove();
+                        fireInput();
+                        return;
+                    }
+                }
+                // If caret is at offset 1 in a zwsp text node (common position)
+                if (node && node.nodeType === Node.TEXT_NODE && node.textContent === '\u200B' && offset <= 1) {
+                    const prev = node.previousSibling;
+                    if (prev && prev instanceof HTMLElement && prev.classList.contains('tokenized-token')) {
+                        e.preventDefault();
+                        node.remove();
+                        prev.remove();
+                        fireInput();
+                        return;
+                    }
+                }
+            }
+        }
+    });
+    editor.addEventListener('blur', () => {
+        // Delay to allow mousedown on suggestions
+        setTimeout(() => {
+            if (!suggestionsEl.matches(':hover')) {
+                hideSuggestions();
+            }
+        }, 150);
+    });
+    // Prevent dropping content into tokens
+    editor.addEventListener('drop', (e) => {
+        const target = e.target;
+        if (target.closest?.('.tokenized-token')) {
+            e.preventDefault();
+        }
+    });
+    // Clean pasted content — strip HTML, keep plain text
+    editor.addEventListener('paste', (e) => {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text/plain') ?? '';
+        document.execCommand('insertText', false, text);
+    });
+    // ── Public API ──
+    return {
+        getParts() {
+            return parseParts();
+        },
+        getText() {
+            return serializeText(parseParts());
+        },
+        setParts(parts) {
+            editor.innerHTML = '';
+            for (const part of parts) {
+                if (part.kind === 'text') {
+                    const lines = part.text.split('\n');
+                    for (let i = 0; i < lines.length; i++) {
+                        if (lines[i].length > 0) {
+                            editor.appendChild(document.createTextNode(lines[i]));
+                        }
+                        if (i < lines.length - 1) {
+                            editor.appendChild(document.createElement('br'));
+                        }
+                    }
+                }
+                else {
+                    editor.appendChild(buildTokenSpan(part.token));
+                    editor.appendChild(document.createTextNode('\u200B'));
+                }
+            }
+        },
+        insertToken(token) {
+            insertTokenAtCaret(token);
+        },
+        clear() {
+            editor.innerHTML = '';
+            hideSuggestions();
+            fireInput();
+        },
+        focus() {
+            editor.focus();
+            // Drop the caret at the very end so subsequent typing / inserts land
+            // inside the editor.
+            const sel = window.getSelection();
+            if (!sel)
+                return;
+            const range = document.createRange();
+            range.selectNodeContents(editor);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        },
+        getElement() {
+            return root;
+        },
+        setPlaceholder(text) {
+            editor.dataset.placeholder = text;
+        }
+    };
+}
+// ─── Ready-made triggers ─────────────────────────────────────────────────────
+/**
+ * `@` mentions. By default it searches every Fauna user; pass `people` (a
+ * group's members, say) to pick only from that list, shown in full as soon as
+ * `@` is typed.
+ */
+export function createUserTrigger(credentials, options = {}) {
+    const domain = credentials.email.includes('@')
+        ? credentials.email.split('@')[1]
+        : '';
+    const suggestion = (p) => {
+        const name = p.displayName ?? p.email.split('@')[0];
+        const avatar = p.icon
+            ? p.icon
+            : `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=0B1020&color=F3F6FF&size=64`;
+        return {
+            label: name,
+            subtitle: p.email,
+            image: avatar,
+            data: { email: p.email, displayName: p.displayName, icon: p.icon }
+        };
+    };
+    return {
+        char: '@',
+        type: 'user',
+        async suggest(query) {
+            const people = options.people;
+            if (people) {
+                const needle = query.trim().toLowerCase();
+                return people
+                    .filter((p) => p.email !== credentials.email)
+                    .filter((p) => !needle
+                    || (p.displayName ?? '').toLowerCase().includes(needle)
+                    || p.email.toLowerCase().includes(needle))
+                    .slice(0, 12)
+                    .map(suggestion);
+            }
+            if (!query.trim())
+                return [];
+            try {
+                // If query has no @, append caller's domain to email search
+                // so same-domain users rank higher server-side
+                const emailQuery = query.includes('@') ? query : (query + '@' + domain);
+                const results = await Fauna.Authentification.query(credentials, {
+                    displayName: query,
+                    email: emailQuery
+                });
+                return results.slice(0, 12).map(suggestion);
+            }
+            catch {
+                return [];
+            }
+        },
+        onPick(s) {
+            return {
+                type: 'user',
+                value: s.data?.email ?? s.label,
+                label: s.label,
+                icon: 'person'
+            };
+        }
+    };
+}
+export function createDriveTrigger(credentials) {
+    return {
+        char: '@',
+        type: 'drive',
+        async suggest(query) {
+            // Normalize query path
+            const path = query.replace(/\\/g, '/');
+            try {
+                // List the parent directory
+                const parentDir = path.includes('/')
+                    ? path.slice(0, path.lastIndexOf('/') + 1)
+                    : '';
+                const prefix = path.slice(parentDir.length).toLowerCase();
+                const entries = await Fauna.Drive.list(credentials, parentDir);
+                return entries
+                    .filter(entry => {
+                    const name = entry.split('/').filter(Boolean).pop() ?? entry;
+                    return name.toLowerCase().startsWith(prefix) || prefix === '';
+                })
+                    .slice(0, 12)
+                    .map(entry => {
+                    const isDir = entry.endsWith('/');
+                    const name = entry.split('/').filter(Boolean).pop() ?? entry;
+                    return {
+                        label: name,
+                        subtitle: parentDir + entry,
+                        icon: isDir ? 'folder' : 'description',
+                        data: { path: parentDir + entry, isDir }
+                    };
+                });
+            }
+            catch {
+                return [];
+            }
+        },
+        onPick(s) {
+            return {
+                type: 'drive',
+                value: s.data?.path ?? s.label,
+                label: s.label,
+                icon: s.icon ?? 'description'
+            };
+        }
+    };
+}