@aseity/idocs-preview 0.2.0 → 0.4.0

package/dist/view/find.d.ts

@@ -22,11 +22,12 @@ export declare function findMatches(index: TextIndex, query: string): FindMatch[
  */
 export declare class Finder {
     #private;
-    readonly index: TextIndex;
+    index: TextIndex;
     matches: FindMatch[];
     /** Index of the current match in `matches`; -1 without matches. */
     current: number;
     constructor(index: TextIndex);
+    setIndex(index: TextIndex, activeQuery?: string, fromPage?: number): void;
     /**
      * Search for `query`; the current match is the first on or after page
      * `fromPage` (the first match when none is). Returns the number of matches.

package/dist/view/find.js

@@ -50,6 +50,13 @@ export class Finder {
     constructor(index) {
         this.index = index;
     }
+    setIndex(index, activeQuery, fromPage = 0) {
+        this.index = index;
+        if (activeQuery)
+            this.search(activeQuery, fromPage);
+        else
+            this.clear();
+    }
     /**
      * Search for `query`; the current match is the first on or after page
      * `fromPage` (the first match when none is). Returns the number of matches.

package/dist/view/ime.d.ts

@@ -0,0 +1,63 @@
+import type { Commit, EditRange, Mark, Revision, Selection } from '../core/index.js';
+import type { CaretBox } from './edit-selection.js';
+import { type PageLayout } from './viewport.js';
+export type InputMode = {
+    kind: 'idle';
+} | {
+    kind: 'composing';
+    baseRevision: Revision;
+    replaceRange: EditRange;
+    text: string;
+    caret: CaretBox;
+};
+export interface CompositionCommit {
+    readonly base: Revision;
+    readonly range: EditRange;
+    readonly text: string;
+}
+export declare function startComposition(baseRevision: Revision, replaceRange: EditRange, caret: CaretBox): InputMode;
+export declare function updateComposition(mode: InputMode, text: string): InputMode;
+export declare function finishComposition(mode: InputMode, committedText: string): {
+    mode: InputMode;
+    commit: CompositionCommit | null;
+};
+export interface ImeHost {
+    readonly frame: HTMLElement;
+    readonly scroller: HTMLElement;
+    readonly content: HTMLElement;
+    layout(): PageLayout;
+    zoom(): number;
+    isFindOpen(): boolean;
+    openFind(): void;
+    closeFind(): void;
+    currentRevision(): Revision;
+    currentSelection(): Selection | null;
+    currentCaret(): CaretBox | null;
+    selectedText(): string;
+    hasReadOnlyTarget(): boolean;
+    clearReadOnlyTarget(): void;
+    collapseSelection(): void;
+    selectAllInFlow(): void;
+    moveHorizontal(direction: 'backward' | 'forward', granularity: 'character' | 'word', extend: boolean): Promise<void>;
+    moveVertical(direction: 'up' | 'down', extend: boolean): Promise<void>;
+    moveLineBoundary(edge: 'start' | 'end', extend: boolean): Promise<void>;
+    replaceSelection(text: string): Promise<Commit | null>;
+    applyRangeText(base: Revision, range: EditRange, text: string): Promise<Commit | null>;
+    deleteBackward(): Promise<Commit | null>;
+    deleteForward(): Promise<Commit | null>;
+    splitBlock(): Promise<Commit | null>;
+    toggleMark(mark: Mark): Promise<Commit | null>;
+    undo(): Promise<Commit | null>;
+    redo(): Promise<Commit | null>;
+    onFocusChange(focused: boolean): void;
+    onModeChange(mode: InputMode): void;
+}
+export interface ImeBridge {
+    readonly mode: InputMode;
+    readonly focused: boolean;
+    focus(): void;
+    position(caret: CaretBox | null): void;
+    enqueue<T>(task: () => Promise<T>): Promise<T>;
+    destroy(): void;
+}
+export declare function createImeBridge(host: ImeHost): ImeBridge;

package/dist/view/ime.js

@@ -0,0 +1,352 @@
+import { turnedToPage } from './selection.js';
+import { PX_PER_PT } from './viewport.js';
+export function startComposition(baseRevision, replaceRange, caret) {
+    return {
+        kind: 'composing',
+        baseRevision,
+        replaceRange,
+        text: '',
+        caret,
+    };
+}
+export function updateComposition(mode, text) {
+    if (mode.kind !== 'composing')
+        return mode;
+    return { ...mode, text };
+}
+export function finishComposition(mode, committedText) {
+    if (mode.kind !== 'composing') {
+        return { mode, commit: null };
+    }
+    const hasRange = mode.replaceRange.start.offset !== mode.replaceRange.end.offset;
+    const commit = committedText.length > 0 || hasRange
+        ? {
+            base: mode.baseRevision,
+            range: mode.replaceRange,
+            text: committedText,
+        }
+        : null;
+    return { mode: { kind: 'idle' }, commit };
+}
+export function createImeBridge(host) {
+    const textarea = document.createElement('textarea');
+    textarea.className = 'idocs-editor-ime';
+    textarea.tabIndex = -1;
+    textarea.autocapitalize = 'off';
+    textarea.autocomplete = 'off';
+    textarea.spellcheck = false;
+    textarea.setAttribute('aria-label', 'Document editor');
+    Object.assign(textarea.style, {
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '16px',
+        padding: '0',
+        margin: '0',
+        border: '0',
+        outline: 'none',
+        resize: 'none',
+        overflow: 'hidden',
+        background: 'transparent',
+        color: 'transparent',
+        caretColor: 'transparent',
+        opacity: '0',
+        pointerEvents: 'none',
+        zIndex: '0',
+    });
+    host.frame.append(textarea);
+    let mode = { kind: 'idle' };
+    let focused = false;
+    let destroyed = false;
+    let queue = Promise.resolve();
+    const enqueue = (task) => {
+        const run = queue.then(() => {
+            if (destroyed)
+                return undefined;
+            return task();
+        });
+        queue = run.catch(() => { });
+        return run;
+    };
+    const setMode = (next) => {
+        mode = next;
+        host.onModeChange(mode);
+    };
+    const position = (caret) => {
+        if (!caret) {
+            textarea.style.left = '0px';
+            textarea.style.top = '0px';
+            textarea.style.height = '1px';
+            return;
+        }
+        const layout = host.layout();
+        const placed = layout.pages[caret.page];
+        if (!placed)
+            return;
+        const scale = PX_PER_PT * host.zoom();
+        const contentWidth = Math.max(host.scroller.clientWidth, host.content.clientWidth, layout.width);
+        const pageLeft = contentWidth / 2 - placed.width / 2;
+        const [px, py] = caret.turn ? turnedToPage(caret.turn, caret.x, caret.top) : [caret.x, caret.top];
+        const rawLeft = pageLeft + px * scale - host.scroller.scrollLeft;
+        const rawTop = placed.top + py * scale - host.scroller.scrollTop;
+        const maxLeft = Math.max(0, host.frame.clientWidth - 2);
+        const maxTop = Math.max(0, host.frame.clientHeight - 2);
+        const left = Math.min(maxLeft, Math.max(0, rawLeft));
+        const top = Math.min(maxTop, Math.max(0, rawTop));
+        const height = Math.max(1, Math.round(caret.height * scale));
+        textarea.style.left = `${left}px`;
+        textarea.style.top = `${top}px`;
+        textarea.style.height = `${height}px`;
+        textarea.style.fontSize = `${Math.max(10, Math.round(height * 0.8))}px`;
+    };
+    const onFocus = () => {
+        focused = true;
+        host.onFocusChange(true);
+    };
+    const onBlur = () => {
+        focused = false;
+        host.onFocusChange(false);
+    };
+    const onCompositionStart = () => {
+        if (destroyed)
+            return;
+        const sel = host.currentSelection();
+        const caret = host.currentCaret();
+        if (!sel || !caret)
+            return;
+        setMode(startComposition(host.currentRevision(), sel.range, caret));
+    };
+    const onCompositionUpdate = (event) => {
+        if (destroyed || mode.kind !== 'composing')
+            return;
+        setMode(updateComposition(mode, event.data ?? textarea.value));
+    };
+    const onCompositionEnd = (event) => {
+        if (destroyed || mode.kind !== 'composing')
+            return;
+        const committedText = event.data ?? textarea.value;
+        textarea.value = '';
+        const result = finishComposition(mode, committedText);
+        setMode(result.mode);
+        if (result.commit) {
+            const { base, range, text } = result.commit;
+            void enqueue(async () => {
+                const latestSel = host.currentSelection();
+                const latestRev = host.currentRevision();
+                if (latestRev === base) {
+                    return host.applyRangeText(base, range, text);
+                }
+                if (latestSel) {
+                    return host.applyRangeText(latestRev, latestSel.range, text);
+                }
+                return null;
+            });
+        }
+    };
+    const onBeforeInput = (event) => {
+        if (destroyed || event.isComposing || mode.kind !== 'idle')
+            return;
+        if ((event.inputType === 'insertText' || event.inputType === 'insertReplacementText') && event.data) {
+            event.preventDefault();
+            textarea.value = '';
+            const data = event.data;
+            void enqueue(() => host.replaceSelection(data));
+        }
+        else if (event.inputType === 'insertParagraph') {
+            event.preventDefault();
+            textarea.value = '';
+            void enqueue(() => host.splitBlock());
+        }
+    };
+    const onInput = (event) => {
+        if (destroyed)
+            return;
+        const inputEvent = event;
+        if (inputEvent.isComposing || mode.kind !== 'idle')
+            return;
+        if (inputEvent.inputType === 'insertFromComposition' ||
+            inputEvent.inputType === 'deleteCompositionText') {
+            textarea.value = '';
+            return;
+        }
+        const value = textarea.value;
+        textarea.value = '';
+        if (value.length > 0) {
+            void enqueue(() => host.replaceSelection(value));
+        }
+    };
+    const onCopy = (event) => {
+        const text = host.selectedText();
+        if (!text || !event.clipboardData)
+            return;
+        event.clipboardData.setData('text/plain', text);
+        event.preventDefault();
+    };
+    const onCut = (event) => {
+        const text = host.selectedText();
+        if (!text || !event.clipboardData)
+            return;
+        event.clipboardData.setData('text/plain', text);
+        event.preventDefault();
+        void enqueue(() => host.replaceSelection(''));
+    };
+    const onPaste = (event) => {
+        if (destroyed || mode.kind !== 'idle')
+            return;
+        const text = event.clipboardData?.getData('text/plain');
+        if (text === undefined)
+            return;
+        event.preventDefault();
+        if (text.length > 0) {
+            void enqueue(() => host.replaceSelection(text));
+        }
+    };
+    const onKeyDown = (event) => {
+        if (destroyed)
+            return;
+        if (event.isComposing || event.key === 'Process' || event.keyCode === 229 || mode.kind !== 'idle') {
+            return;
+        }
+        const mod = (event.ctrlKey || event.metaKey) && !event.altKey;
+        const key = event.key;
+        const lower = key.toLowerCase();
+        if (mod && lower === 'f') {
+            event.preventDefault();
+            host.openFind();
+            return;
+        }
+        if (mod && lower === 'a') {
+            event.preventDefault();
+            host.selectAllInFlow();
+            return;
+        }
+        if (mod && lower === 'b' && !event.shiftKey) {
+            event.preventDefault();
+            void enqueue(() => host.toggleMark('bold'));
+            return;
+        }
+        if (mod && lower === 'i' && !event.shiftKey) {
+            event.preventDefault();
+            void enqueue(() => host.toggleMark('italic'));
+            return;
+        }
+        if (mod && lower === 'u' && !event.shiftKey) {
+            event.preventDefault();
+            void enqueue(() => host.toggleMark('underline'));
+            return;
+        }
+        if (mod && lower === 'x' && event.shiftKey) {
+            event.preventDefault();
+            void enqueue(() => host.toggleMark('strike'));
+            return;
+        }
+        if (mod && lower === 'z') {
+            event.preventDefault();
+            void enqueue(() => (event.shiftKey ? host.redo() : host.undo()));
+            return;
+        }
+        if (mod && lower === 'y' && !event.shiftKey) {
+            event.preventDefault();
+            void enqueue(() => host.redo());
+            return;
+        }
+        if (key === 'Escape') {
+            if (host.isFindOpen()) {
+                event.preventDefault();
+                host.closeFind();
+                return;
+            }
+            const sel = host.currentSelection();
+            if (sel && sel.range.start.offset !== sel.range.end.offset) {
+                event.preventDefault();
+                host.collapseSelection();
+                return;
+            }
+            if (host.hasReadOnlyTarget()) {
+                event.preventDefault();
+                host.clearReadOnlyTarget();
+            }
+            return;
+        }
+        if (key === 'Backspace' && !mod) {
+            event.preventDefault();
+            void enqueue(() => host.deleteBackward());
+            return;
+        }
+        if (key === 'Delete' && !mod) {
+            event.preventDefault();
+            void enqueue(() => host.deleteForward());
+            return;
+        }
+        if (key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            void enqueue(() => host.splitBlock());
+            return;
+        }
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            event.preventDefault();
+            const word = (event.altKey || event.ctrlKey) && !event.metaKey;
+            const dir = key === 'ArrowLeft' ? 'backward' : 'forward';
+            const extend = event.shiftKey;
+            void enqueue(() => host.moveHorizontal(dir, word ? 'word' : 'character', extend));
+            return;
+        }
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            const dir = key === 'ArrowUp' ? 'up' : 'down';
+            const extend = event.shiftKey;
+            void enqueue(() => host.moveVertical(dir, extend));
+            return;
+        }
+        if ((key === 'Home' || key === 'End') && !mod) {
+            event.preventDefault();
+            const edge = key === 'Home' ? 'start' : 'end';
+            const extend = event.shiftKey;
+            void enqueue(() => host.moveLineBoundary(edge, extend));
+        }
+    };
+    textarea.addEventListener('focus', onFocus);
+    textarea.addEventListener('blur', onBlur);
+    textarea.addEventListener('compositionstart', onCompositionStart);
+    textarea.addEventListener('compositionupdate', onCompositionUpdate);
+    textarea.addEventListener('compositionend', onCompositionEnd);
+    textarea.addEventListener('beforeinput', onBeforeInput);
+    textarea.addEventListener('input', onInput);
+    textarea.addEventListener('copy', onCopy);
+    textarea.addEventListener('cut', onCut);
+    textarea.addEventListener('paste', onPaste);
+    textarea.addEventListener('keydown', onKeyDown);
+    return {
+        get mode() {
+            return mode;
+        },
+        get focused() {
+            return focused;
+        },
+        focus() {
+            if (!destroyed)
+                textarea.focus({ preventScroll: true });
+        },
+        position,
+        enqueue,
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            mode = { kind: 'idle' };
+            textarea.removeEventListener('focus', onFocus);
+            textarea.removeEventListener('blur', onBlur);
+            textarea.removeEventListener('compositionstart', onCompositionStart);
+            textarea.removeEventListener('compositionupdate', onCompositionUpdate);
+            textarea.removeEventListener('compositionend', onCompositionEnd);
+            textarea.removeEventListener('beforeinput', onBeforeInput);
+            textarea.removeEventListener('input', onInput);
+            textarea.removeEventListener('copy', onCopy);
+            textarea.removeEventListener('cut', onCut);
+            textarea.removeEventListener('paste', onPaste);
+            textarea.removeEventListener('keydown', onKeyDown);
+            textarea.remove();
+        },
+    };
+}

package/dist/view/index.d.ts

@@ -25,3 +25,7 @@ export * from './viewport.js';
 export * from './selection.js';
 export * from './find.js';
 export type { FindBar } from './find-bar.js';
+export * from './edit-selection.js';
+export * from './editor.js';
+export type { InputMode } from './ime.js';
+export { type EditorWorkspace, type EditorWorkspaceOptions, formatAskAssistantLabel, mountEditorWorkspace, type PickedImage, } from './workspace.js';

package/dist/view/index.js

@@ -272,3 +272,6 @@ export * from './viewport.js';
 export * from './selection.js';
 // The find bar (#451): the model is pure too (find.ts).
 export * from './find.js';
+export * from './edit-selection.js';
+export * from './editor.js';
+export { formatAskAssistantLabel, mountEditorWorkspace, } from './workspace.js';

package/dist/view/selection-layer.d.ts

@@ -24,4 +24,5 @@ export interface SelectionLayer {
     paint(index: number, overlay: HTMLCanvasElement, pixelsPerPoint: number): void;
     destroy(): void;
 }
+export declare function paintHighlightBoxes(ctx: CanvasRenderingContext2D, boxes: HighlightBox[], color: string): void;
 export declare function createSelectionLayer(host: SelectionHost): SelectionLayer;

package/dist/view/selection-layer.js

@@ -67,7 +67,7 @@ function rounded(ctx, points, radius) {
     }
     ctx.closePath();
 }
-function paintBoxes(ctx, boxes, color) {
+export function paintHighlightBoxes(ctx, boxes, color) {
     if (boxes.length === 0)
         return;
     ctx.beginPath();
@@ -250,11 +250,11 @@ export function createSelectionLayer(host) {
             ctx.clearRect(0, 0, overlay.width, overlay.height);
             ctx.setTransform(pixelsPerPoint, 0, 0, pixelsPerPoint, 0, 0);
             const marks = host.marks(index);
-            paintBoxes(ctx, marks.matches, MATCH);
-            paintBoxes(ctx, marks.current, CURRENT_MATCH);
+            paintHighlightBoxes(ctx, marks.matches, MATCH);
+            paintHighlightBoxes(ctx, marks.current, CURRENT_MATCH);
             const selection = selector.current;
             if (selection)
-                paintBoxes(ctx, selector.index.highlights(selection, index), HIGHLIGHT);
+                paintHighlightBoxes(ctx, selector.index.highlights(selection, index), HIGHLIGHT);
         },
         destroy() {
             if (autoscroll)

package/dist/view/workspace-styles.d.ts

@@ -0,0 +1 @@
+export declare function ensureWorkspaceStyles(): void;