@aseity/idocs-preview 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @aseity/idocs-preview
 
+## 0.5.0
+
+### Minor Changes
+
+- Match the caret to the text being edited and move it to the next line after Shift+Enter. Keep edits and undo history when changing paragraph formatting, handle shorthand table rows, and focus newly inserted paragraphs, headings, and callouts. Improve excerpt selection, the narrow toolbar, and page thumbnails.
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -69,8 +69,21 @@ const workspace = mountEditorWorkspace(container, session, { railOpen: true });
 
 `source` is an iDocs YAML string or a `Uint8Array`. Use `readResource` in
 `openEditor` to resolve referenced images. The workspace includes page thumbnails,
-an outline, formatting controls, and an insert dock. It supports text selection,
-Chinese IME input, undo and redo, paragraph styles, tables, and images.
+an outline, formatting controls, and an icon-only insert dock. It supports text
+selection, Chinese IME input, undo and redo, paragraph styles, tables, and images.
+Table cells are editable in both array rows and rows written with `cells:`.
+Edits preserve the source form of each row.
+Inserting a paragraph, heading, or callout from the dock focuses the new text.
+A new callout uses the document's `theme.boxStyles.callout` when present.
+The default text is left-aligned, with no paragraph indents and compact paragraph spacing.
+For callout colors, the editor uses the box style, then `theme.colors.calloutBg`
+and `theme.colors.accent`. The host can supply fallback `calloutColors`
+as hex values. The selected style or colors are stored in the document.
+When the formatting controls overflow, use the toolbar arrows to scroll.
+In the narrowest panels, the arrows scroll the entire toolbar.
+The caret and IME composition use the font size and color at the insertion point.
+Press Shift+Enter for a line break within the paragraph. The caret moves to the start of the new line.
+The page rail updates its contents while open.
 Use `mountEditor(container, session)` for the page editor without workspace controls.
 
 Save the source snapshot through your host, then mark that revision as saved:
@@ -85,7 +98,14 @@ const docx = await session.exportDocx();
 `saveSource` is your application's persistence function. Subscribe to
 `session.subscribe(listener)` to observe revisions, unsaved changes, and layout
 state. Supply `onPickImage` to the workspace to enable image insertion.
-`onQuoteSelection` receives selected text for a host assistant integration.
+Supply `mountInsertButtons` to render the insert dock buttons using your host's
+tooltips. Render each button in its provided container, use its label and class
+name, call `bind` with the mounted button, and call `activate` on click.
+Return a cleanup function to unmount the buttons when the workspace is destroyed.
+Supply `onQuoteSelection` to enable **询问 AI**. The callback receives
+`{ text, path, page }` from the current layout, including unsaved edits. The
+page index starts at zero. An excerpt includes TeX for formulas in the selection.
+Clicking a read-only line or formula offers a quote when it has text or TeX.
 
 When closing the editor, call `workspace.destroy()` and `session.dispose()`.
 The workspace does not own the session. Existing preview APIs remain available.

package/dist/core/display.d.ts

@@ -215,6 +215,23 @@ export type LineOccurrence = {
 } | {
     readonly kind: 'readOnlyStory';
 };
+export interface CaretStyle {
+    readonly family: string;
+    readonly declaredFamily: string;
+    readonly role: string;
+    readonly size: number;
+    readonly bold: boolean;
+    readonly italic: boolean;
+    readonly color: string;
+    readonly ascent: number;
+    readonly descent: number;
+    readonly rise: number;
+}
+export interface CaretStyleSpan {
+    readonly start: number;
+    readonly end: number;
+    readonly style: CaretStyle;
+}
 /** One laid-out line's glyph table, for hit testing. */
 export interface TextLine {
     story: Story;
@@ -236,6 +253,12 @@ export interface TextLine {
     turn?: [number, number];
     sourceSegments?: readonly LineSourceSegment[];
     occurrence?: LineOccurrence;
+    caretStyle?: CaretStyle;
+    caretStyles?: readonly CaretStyleSpan[];
+    formulas?: readonly {
+        readonly offset: DisplayUtf16;
+        readonly tex: string;
+    }[];
 }
 export interface DisplayPage {
     number: number;

package/dist/core/editor.d.ts

@@ -12,6 +12,10 @@ export interface Selection {
     readonly reversed: boolean;
 }
 export type Mark = 'bold' | 'italic' | 'underline' | 'strike';
+export interface CalloutColors {
+    readonly fill: string;
+    readonly border: string;
+}
 export type InsertBlock = {
     kind: 'paragraph';
     text?: string;
@@ -22,6 +26,7 @@ export type InsertBlock = {
 } | {
     kind: 'callout';
     text?: string;
+    colors?: CalloutColors;
 } | {
     kind: 'table';
     rows: number;
@@ -164,9 +169,12 @@ export type LineHit = {
     role?: GeneratedRole;
     before?: Anchor;
     after?: Anchor;
+    segment?: LineSourceSegment;
 } | {
     kind: 'unmapped';
 };
+export declare function caretXForOffset(line: TextLine, target: number): number;
 export declare function locateLineSource(line: TextLine, xPt: number): LineHit;
+export declare function lineCaretStop(line: TextLine, anchor: Anchor): CaretStop | null;
 export declare function lineCaretX(line: TextLine, anchor: Anchor): number | null;
 export declare function openEditorWith(worker: Endpoint, options: OpenEditorOptions): Promise<EditorSession>;

package/dist/core/editor.js

@@ -1,27 +1,28 @@
 import {} from './display.js';
 import { copyBytes, PreviewError, } from './protocol.js';
 import { decodeCompact, glyphOffset, glyphX } from './wire.js';
-function caretXForOffset(line, target) {
+export function caretXForOffset(line, target) {
     const glyphs = line.glyphs;
-    const count = glyphs.length;
-    if (count === 0)
+    let low = 0;
+    let high = glyphs.length;
+    if (high === 0)
         return line.x;
-    for (let i = 0; i < count; i += 1) {
-        const gOff = glyphOffset(glyphs, i);
-        const gX = glyphX(glyphs, i);
-        if (gOff === target || (gOff > target && i === 0))
-            return gX;
-        if (gOff > target) {
-            const prevOff = glyphOffset(glyphs, i - 1);
-            const prevX = glyphX(glyphs, i - 1);
-            const span = Math.max(0, gOff - prevOff);
-            if (span === 0)
-                return gX;
-            const t = Math.max(0, target - prevOff) / span;
-            return prevX + (gX - prevX) * t;
-        }
+    while (low < high) {
+        const mid = Math.floor((low + high) / 2);
+        if (glyphOffset(glyphs, mid) < target)
+            low = mid + 1;
+        else
+            high = mid;
     }
-    return line.x + line.width;
+    if (low === glyphs.length)
+        return line.x + line.width;
+    const offset = glyphOffset(glyphs, low);
+    const x = glyphX(glyphs, low);
+    if (low === 0 || offset === target)
+        return x;
+    const previousOffset = glyphOffset(glyphs, low - 1);
+    const previousX = glyphX(glyphs, low - 1);
+    return previousX + (x - previousX) * (target - previousOffset) / (offset - previousOffset);
 }
 function hitFromSegment(line, seg, xPt) {
     const source = seg.source;
@@ -29,6 +30,7 @@ function hitFromSegment(line, seg, xPt) {
         return {
             kind: 'atomic',
             reason: source.reason,
+            segment: seg,
             ...(source.role !== undefined ? { role: source.role } : {}),
             ...(source.before !== undefined ? { before: source.before } : {}),
             ...(source.after !== undefined ? { after: source.after } : {}),
@@ -140,7 +142,7 @@ export function locateLineSource(line, xPt) {
     }
     return hitFromSegment(line, segments[chosenIdx], xPt);
 }
-export function lineCaretX(line, anchor) {
+export function lineCaretStop(line, anchor) {
     const segments = line.sourceSegments;
     if (!segments)
         return null;
@@ -152,7 +154,7 @@ export function lineCaretX(line, anchor) {
                 stop.anchor.flow === anchor.flow &&
                 stop.anchor.offset === anchor.offset &&
                 stop.anchor.affinity === anchor.affinity) {
-                return caretXForOffset(line, stop.displayOffset);
+                return stop;
             }
         }
     }
@@ -165,12 +167,16 @@ export function lineCaretX(line, anchor) {
                 stop.anchor.offset === anchor.offset &&
                 stop.anchor.affinity === 'downstream' &&
                 !(anchor.affinity === 'upstream' && line.index > 0 && stop.displayOffset === 0)) {
-                return caretXForOffset(line, stop.displayOffset);
+                return stop;
             }
         }
     }
     return null;
 }
+export function lineCaretX(line, anchor) {
+    const stop = lineCaretStop(line, anchor);
+    return stop ? caretXForOffset(line, stop.displayOffset) : null;
+}
 const textEncoder = new TextEncoder();
 function toSourceBytes(source) {
     return typeof source === 'string' ? textEncoder.encode(source) : copyBytes(source);

package/dist/core/index.d.ts

@@ -3,7 +3,7 @@ import { type DocumentKind, type PreviewDocument, type PreviewPage, type Read, t
 export type * from './display.js';
 export type * from './protocol.js';
 export { PreviewError, type Read, type SessionOptions, } from './protocol.js';
-export type { Commit, Edit, EditRange, EditorFrame, EditorSession, EditorState, ImageAlign, InsertBlock, LayoutState, LineHit, Mark, OpenEditorOptions, RenderStats, Selection, SourceSnapshot, TableAction, } from './editor.js';
+export type { CalloutColors, Commit, Edit, EditRange, EditorFrame, EditorSession, EditorState, ImageAlign, InsertBlock, LayoutState, LineHit, Mark, OpenEditorOptions, RenderStats, Selection, SourceSnapshot, TableAction, } from './editor.js';
 export { lineCaretX, locateLineSource };
 type Bytes = Uint8Array | ArrayBuffer;
 export interface OpenOptions {

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

@@ -1,4 +1,4 @@
-import { type Anchor, type DisplayPage, type EditRange, type FlowId, type GeneratedRole, type ReadOnlyReason } from '../core/index.js';
+import { type Anchor, type CaretStyle, type DisplayPage, type EditRange, type FlowId, type GeneratedRole, type ReadOnlyReason } from '../core/index.js';
 import { type HighlightBox, type PagePoint } from './selection.js';
 export interface CaretBox {
     readonly page: number;
@@ -7,6 +7,7 @@ export interface CaretBox {
     readonly bottom: number;
     readonly baseline: number;
     readonly height: number;
+    readonly style?: CaretStyle;
     readonly turn?: [number, number];
 }
 export interface ReadOnlyTarget {
@@ -15,6 +16,7 @@ export interface ReadOnlyTarget {
     readonly reason: ReadOnlyReason;
     readonly role?: GeneratedRole;
     readonly box: HighlightBox;
+    readonly excerpt?: string;
     readonly before?: Anchor;
     readonly after?: Anchor;
 }
@@ -56,7 +58,7 @@ export declare class EditDocumentIndex {
     } | undefined;
     caretForAnchor(anchor: Anchor): CaretBox | undefined;
     highlightsForRange(range: EditRange, page: number): HighlightBox[];
-    selectedText(range: EditRange): string;
+    selectedText(range: EditRange, format?: 'clipboard' | 'quote'): string;
     neighborStop(anchor: Anchor, direction: 'backward' | 'forward'): Anchor | undefined;
     moveHorizontal(anchor: Anchor, direction: 'backward' | 'forward', granularity?: 'character' | 'word'): Anchor;
     moveVertical(anchor: Anchor, direction: 'up' | 'down', preferredX?: number): {

package/dist/view/edit-selection.js

@@ -1,5 +1,5 @@
-import { lineCaretX, locateLineSource, } from '../core/index.js';
-import { glyphOffset, glyphX } from '../core/wire.js';
+import { locateLineSource, } from '../core/index.js';
+import { caretXForOffset as caretXForDisplayOffset, lineCaretStop } from '../core/editor.js';
 import { turnedToPage } from './selection.js';
 const wordSegmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
 function lineVerticalBounds(line) {
@@ -9,28 +9,6 @@ function lineVerticalBounds(line) {
         bottom: middle + line.height / 2,
     };
 }
-function caretXForDisplayOffset(line, target) {
-    const glyphs = line.glyphs;
-    const count = glyphs.length;
-    if (count === 0)
-        return line.x;
-    for (let i = 0; i < count; i += 1) {
-        const gOff = glyphOffset(glyphs, i);
-        const gX = glyphX(glyphs, i);
-        if (gOff === target || (gOff > target && i === 0))
-            return gX;
-        if (gOff > target) {
-            const prevOff = glyphOffset(glyphs, i - 1);
-            const prevX = glyphX(glyphs, i - 1);
-            const span = Math.max(0, gOff - prevOff);
-            if (span === 0)
-                return gX;
-            const t = Math.max(0, target - prevOff) / span;
-            return prevX + (gX - prevX) * t;
-        }
-    }
-    return line.x + line.width;
-}
 function localCoords(line, x, y) {
     if (!line.turn)
         return [x, y];
@@ -56,15 +34,22 @@ function distanceToLine(placed, x, y) {
     const dy = y < placed.pageBox.top ? placed.pageBox.top - y : y >= placed.pageBox.bottom ? y - placed.pageBox.bottom + 1e-6 : 0;
     return dy * 1e6 + dx;
 }
-function caretBoxFromX(placed, x) {
-    const { line, page, top, bottom } = placed;
+function caretBox(placed, x, offset, affinity) {
+    const { line, page } = placed;
+    const spans = line.caretStyles ?? [];
+    const preceding = spans.find((span) => span.start < offset && offset <= span.end);
+    const following = spans.find((span) => span.start <= offset && offset < span.end);
+    const style = (affinity === 'upstream' ? preceding ?? following : following ?? preceding)?.style ?? line.caretStyle;
+    const baseline = line.baseline - (style?.rise ?? 0);
+    const height = style ? style.ascent + style.descent : line.ascent + line.descent;
     return {
         page,
         x,
-        top,
-        bottom,
-        baseline: line.baseline,
-        height: line.height,
+        top: baseline - (style?.ascent ?? line.ascent),
+        bottom: baseline + (style?.descent ?? line.descent),
+        baseline,
+        height,
+        ...(style ? { style } : {}),
         ...(line.turn ? { turn: line.turn } : {}),
     };
 }
@@ -116,63 +101,16 @@ function extractLineStops(line) {
     stops.sort((a, b) => a.anchor.offset - b.anchor.offset || a.displayOffset - b.displayOffset);
     return { flow, stops };
 }
-function chooseSegmentAtX(line, xPt) {
-    const segments = line.sourceSegments;
-    if (!segments || segments.length === 0)
-        return undefined;
-    let positive = [];
-    for (let i = 0; i < segments.length; i += 1) {
-        const seg = segments[i];
-        if (seg.start >= seg.end)
+function lineExcerpt(line, start = 0, end = line.text.length) {
+    let text = '';
+    let offset = start;
+    for (const formula of line.formulas ?? []) {
+        if (formula.offset < start || formula.offset >= end)
             continue;
-        const left = caretXForDisplayOffset(line, seg.start);
-        const right = caretXForDisplayOffset(line, seg.end);
-        if (right - left > 1e-9)
-            positive.push({ idx: i, left, right });
-    }
-    if (positive.length === 0) {
-        for (let i = 0; i < segments.length; i += 1) {
-            const seg = segments[i];
-            if (seg.start < seg.end) {
-                positive.push({
-                    idx: i,
-                    left: caretXForDisplayOffset(line, seg.start),
-                    right: caretXForDisplayOffset(line, seg.end),
-                });
-            }
-        }
-    }
-    if (positive.length === 0)
-        return segments[segments.length - 1];
-    if (xPt <= positive[0].left)
-        return segments[positive[0].idx];
-    if (xPt >= positive[positive.length - 1].right) {
-        const lastSeg = segments[segments.length - 1];
-        return lastSeg.start === lastSeg.end && lastSeg.source.kind === 'editable'
-            ? lastSeg
-            : segments[positive[positive.length - 1].idx];
-    }
-    let containing;
-    for (const item of positive) {
-        if (xPt >= item.left && xPt <= item.right) {
-            if (segments[item.idx].source.kind === 'editable')
-                return segments[item.idx];
-            if (!containing)
-                containing = segments[item.idx];
-        }
-    }
-    if (containing)
-        return containing;
-    let best = segments[positive[0].idx];
-    let bestDist = Infinity;
-    for (const item of positive) {
-        const dist = xPt < item.left ? item.left - xPt : Math.max(0, xPt - item.right);
-        if (dist < bestDist) {
-            bestDist = dist;
-            best = segments[item.idx];
-        }
+        text += line.text.slice(offset, formula.offset).replaceAll('\ufffc', '') + formula.tex;
+        offset = formula.offset + 1;
     }
-    return best;
+    return text + line.text.slice(offset, end).replaceAll('\ufffc', '');
 }
 function segmentHighlightBox(placed, seg) {
     const { line, top, bottom } = placed;
@@ -338,12 +276,15 @@ export class EditDocumentIndex {
             orderedStops.sort((a, b) => a.offset - b.offset);
             const stopIndexByOffset = new Map();
             orderedStops.forEach((anchor, i) => stopIndexByOffset.set(anchor.offset, i));
+            let words;
             this.#flows.set(id, {
                 path: bucket.path,
                 lines: bucket.lines,
                 stops: orderedStops,
                 stopIndexByOffset,
-                words: buildFlowWords(bucket.lines),
+                get words() {
+                    return words ??= buildFlowWords(bucket.lines);
+                },
             });
         }
     }
@@ -376,25 +317,15 @@ export class EditDocumentIndex {
             }
         }
         const occ = best.line.occurrence;
-        if (occ?.kind === 'repeatedHeader') {
-            return {
-                kind: 'readOnly',
-                target: {
-                    page: point.page,
-                    path: occ.canonicalPath || best.line.path,
-                    reason: 'repeatedHeader',
-                    box: segmentHighlightBox(best, undefined),
-                },
-            };
-        }
-        if (occ?.kind === 'readOnlyStory') {
+        if (occ?.kind === 'repeatedHeader' || occ?.kind === 'readOnlyStory') {
             return {
                 kind: 'readOnly',
                 target: {
                     page: point.page,
-                    path: best.line.path,
-                    reason: 'unsupportedStory',
+                    path: occ.kind === 'repeatedHeader' ? occ.canonicalPath || best.line.path : best.line.path,
+                    reason: occ.kind === 'repeatedHeader' ? 'repeatedHeader' : 'unsupportedStory',
                     box: segmentHighlightBox(best, undefined),
+                    excerpt: lineExcerpt(best.line),
                 },
             };
         }
@@ -404,13 +335,13 @@ export class EditDocumentIndex {
             return {
                 kind: 'editable',
                 anchor: hit.anchor,
-                caret: caretBoxFromX(best, hit.x),
+                caret: caretBox(best, hit.x, hit.displayOffset, hit.anchor.affinity),
                 page: point.page,
                 path: best.line.path,
             };
         }
         if (hit.kind === 'atomic') {
-            const seg = chooseSegmentAtX(best.line, localX);
+            const seg = hit.segment;
             const segPath = seg?.source.kind === 'atomic' && seg.source.path ? seg.source.path : best.line.path;
             return {
                 kind: 'readOnly',
@@ -420,6 +351,7 @@ export class EditDocumentIndex {
                     reason: hit.reason,
                     ...(hit.role !== undefined ? { role: hit.role } : {}),
                     box: segmentHighlightBox(best, seg),
+                    excerpt: lineExcerpt(best.line, seg?.start, seg?.end),
                     ...(hit.before ? { before: hit.before } : {}),
                     ...(hit.after ? { after: hit.after } : {}),
                 },
@@ -546,9 +478,11 @@ export class EditDocumentIndex {
         if (!entry)
             return undefined;
         for (const placed of entry.lines) {
-            const x = lineCaretX(placed.line, anchor);
-            if (x !== null)
-                return caretBoxFromX(placed, x);
+            const stop = lineCaretStop(placed.line, anchor);
+            if (stop) {
+                const x = caretXForDisplayOffset(placed.line, stop.displayOffset);
+                return caretBox(placed, x, stop.displayOffset, anchor.affinity);
+            }
         }
         for (const placed of entry.lines) {
             for (const seg of placed.line.sourceSegments ?? []) {
@@ -558,13 +492,13 @@ export class EditDocumentIndex {
                     seg.source.before.session === anchor.session &&
                     seg.source.before.flow === anchor.flow &&
                     seg.source.before.offset === anchor.offset) {
-                    return caretBoxFromX(placed, caretXForDisplayOffset(placed.line, seg.start));
+                    return caretBox(placed, caretXForDisplayOffset(placed.line, seg.start), seg.start, anchor.affinity);
                 }
                 if (seg.source.after &&
                     seg.source.after.session === anchor.session &&
                     seg.source.after.flow === anchor.flow &&
                     seg.source.after.offset === anchor.offset) {
-                    return caretBoxFromX(placed, caretXForDisplayOffset(placed.line, seg.end));
+                    return caretBox(placed, caretXForDisplayOffset(placed.line, seg.end), seg.end, anchor.affinity);
                 }
             }
         }
@@ -601,15 +535,17 @@ export class EditDocumentIndex {
         }
         return boxes;
     }
-    selectedText(range) {
+    selectedText(range, format = 'clipboard') {
         if (range.start.flow !== range.end.flow || range.start.offset >= range.end.offset)
             return '';
         const entry = this.#flows.get(range.start.flow);
         if (!entry)
             return '';
         let text = '';
+        let lastFormulaOffset;
         for (const placed of entry.lines) {
-            for (const seg of placed.line.sourceSegments ?? []) {
+            const { line } = placed;
+            for (const seg of line.sourceSegments ?? []) {
                 if (seg.source.kind === 'editable') {
                     const stops = seg.source.stops;
                     if (stops.length === 0)
@@ -625,17 +561,26 @@ export class EditDocumentIndex {
                     const dStart = displayOffsetAtFlowOffset(stops, from, false);
                     const dEnd = displayOffsetAtFlowOffset(stops, to, true);
                     if (dStart !== undefined && dEnd !== undefined && dEnd > dStart) {
-                        text += placed.line.text.slice(dStart, dEnd);
+                        text += line.text.slice(dStart, dEnd).replaceAll('\ufffc', '');
                     }
                 }
                 else if (seg.source.before && seg.source.after) {
                     if (seg.source.before.offset >= range.start.offset && seg.source.after.offset <= range.end.offset) {
-                        text += placed.line.text.slice(seg.start, seg.end);
+                        const formula = format === 'quote' && line.formulas?.find((part) => part.offset === seg.start);
+                        if (formula) {
+                            if (lastFormulaOffset === seg.source.before.offset)
+                                continue;
+                            lastFormulaOffset = seg.source.before.offset;
+                            text += formula.tex;
+                        }
+                        else {
+                            text += line.text.slice(seg.start, seg.end).replaceAll('\ufffc', '');
+                        }
                     }
                 }
             }
         }
-        return text.replaceAll('\ufffc', '');
+        return text;
     }
     neighborStop(anchor, direction) {
         const entry = this.#flows.get(anchor.flow);
@@ -761,7 +706,7 @@ export class EditDocumentIndex {
             }
         }
         for (const placed of entry.lines) {
-            if (lineCaretX(placed.line, anchor) !== null)
+            if (lineCaretStop(placed.line, anchor))
                 return placed;
         }
         for (const placed of entry.lines) {

package/dist/view/editor.d.ts

@@ -20,6 +20,7 @@ export interface EditorViewOptions {
 export interface EditorViewSelection {
     readonly selection: Selection;
     readonly text: string;
+    readonly excerpt?: string;
     readonly path: string;
     readonly page: number;
     readonly pageBounds: {

package/dist/view/editor.js

@@ -1,3 +1,4 @@
+import { canvasFont, CANVAS_TEXT_LANGUAGE } from '../core/fonts.js';
 import { EditDocumentIndex, orderedAnchors } from './edit-selection.js';
 import { createFindBar } from './find-bar.js';
 import { Finder } from './find.js';
@@ -12,8 +13,7 @@ const MATCH_HIGHLIGHT = 'rgba(255, 200, 0, 0.4)';
 const CURRENT_MATCH_HIGHLIGHT = 'rgba(255, 130, 0, 0.55)';
 const READONLY_FILL = 'rgba(217, 119, 6, 0.16)';
 const READONLY_STROKE = '#d97706';
-const CARET_COLOR = '#1d4ed8';
-const IME_UNDERLINE_COLOR = '#2563eb';
+const DEFAULT_TEXT_COLOR = '#000';
 const DRAG_EDGE = 16;
 function clampZoom(zoom) {
     return Number.isFinite(zoom) && zoom > 0 ? Math.min(10, Math.max(0.1, zoom)) : 1;
@@ -192,22 +192,23 @@ function paintCaretBar(ctx, caret) {
     ctx.save();
     if (caret.turn)
         ctx.transform(0, 1, -1, 0, caret.turn[0], caret.turn[1]);
-    ctx.fillStyle = CARET_COLOR;
-    ctx.fillRect(caret.x - 0.75, caret.top, 1.5, Math.max(2, caret.bottom - caret.top));
+    ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+    ctx.fillRect(caret.x - 0.5, caret.top, 1, caret.height);
     ctx.restore();
 }
 function paintImePreview(ctx, caret, text) {
     ctx.save();
     if (caret.turn)
         ctx.transform(0, 1, -1, 0, caret.turn[0], caret.turn[1]);
-    const fontSize = Math.max(8, caret.height * 0.78);
-    ctx.font = `${fontSize}px system-ui, "PingFang SC", "Microsoft YaHei", sans-serif`;
+    ctx.font = caret.style ? canvasFont(caret.style) : `${caret.height}px system-ui, sans-serif`;
+    Object.assign(ctx, { lang: CANVAS_TEXT_LANGUAGE });
+    ctx.fontKerning = 'none';
     ctx.textBaseline = 'alphabetic';
     ctx.textAlign = 'left';
     const textWidth = text ? ctx.measureText(text).width : 0;
     const padX = 2;
     const boxWidth = Math.max(4, textWidth + padX * 2);
-    const boxHeight = Math.max(4, caret.bottom - caret.top);
+    const boxHeight = caret.height;
     roundedPath(ctx, caret.x, caret.top, boxWidth, boxHeight, 2);
     ctx.fillStyle = 'rgba(255, 255, 255, 0.96)';
     ctx.fill();
@@ -215,19 +216,19 @@ function paintImePreview(ctx, caret, text) {
     ctx.lineWidth = 0.75;
     ctx.stroke();
     if (text) {
-        ctx.fillStyle = '#111827';
+        ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
         ctx.fillText(text, caret.x + padX, caret.baseline);
         ctx.beginPath();
         ctx.moveTo(caret.x + padX, caret.baseline + 1.5);
         ctx.lineTo(caret.x + padX + textWidth, caret.baseline + 1.5);
-        ctx.strokeStyle = IME_UNDERLINE_COLOR;
+        ctx.strokeStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
         ctx.lineWidth = 1;
         ctx.setLineDash([2, 1.5]);
         ctx.stroke();
         ctx.setLineDash([]);
     }
-    ctx.fillStyle = CARET_COLOR;
-    ctx.fillRect(caret.x + padX + textWidth - 0.75, caret.top, 1.5, boxHeight);
+    ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+    ctx.fillRect(caret.x + padX + textWidth - 0.5, caret.top, 1, boxHeight);
     ctx.restore();
 }
 function detectMarkInRuns(doc, index, range, mark) {
@@ -350,6 +351,8 @@ export function mountEditor(container, session, options = {}) {
         if (!activeSelection || !editIndex)
             return null;
         const range = activeSelection.range;
+        const index = editIndex;
+        const canQuote = range.revision === docRevision;
         const path = editIndex.flowPath(range.start.flow) ?? '';
         let page = 0;
         let pageBounds = { left: 0, right: 0, top: 0, bottom: 0 };
@@ -397,6 +400,9 @@ export function mountEditor(container, session, options = {}) {
         return {
             selection: activeSelection,
             text: isCollapsedRange(range) ? '' : editIndex.selectedText(range),
+            get excerpt() {
+                return canQuote ? index.selectedText(range, 'quote') : '';
+            },
             path,
             page,
             pageBounds,
@@ -1155,6 +1161,8 @@ export function mountEditor(container, session, options = {}) {
         updateViewport(false);
     }
     const applyFrameDocument = (nextDoc, nextRev, nextSelection) => {
+        if (doc === nextDoc)
+            return;
         const prevDoc = doc;
         const prevCount = prevDoc?.pageCount ?? 0;
         doc = nextDoc;
@@ -1183,12 +1191,12 @@ export function mountEditor(container, session, options = {}) {
             }
         }
         let selectionChanged = false;
+        if (readOnlyTarget) {
+            readOnlyTarget = null;
+            options.onReadOnlyTarget?.(null);
+        }
         if (nextSelection && nextSelection.revision === nextRev) {
             activeSelection = nextSelection;
-            if (readOnlyTarget) {
-                readOnlyTarget = null;
-                options.onReadOnlyTarget?.(null);
-            }
             selectionChanged = true;
         }
         else if (activeSelection && activeSelection.revision !== nextRev) {