@doxi/core 0.11.0

package/dist/view/default-renderer.js

@@ -0,0 +1,142 @@
+import { HOLE } from './dom-spec.js';
+import { Renderer } from './renderer.js';
+const docRenderer = () => ['div', { class: 'dx-doc' }, HOLE];
+/** Compose inline style fragments for align + lineHeight block attrs. */
+function blockStyleFromAttrs(attrs) {
+    const parts = [];
+    const align = attrs.align;
+    if (align === 'left' || align === 'center' || align === 'right' || align === 'justify') {
+        parts.push(`text-align:${align}`);
+    }
+    const lineHeight = attrs.lineHeight;
+    if (typeof lineHeight === 'number' && lineHeight > 0) {
+        parts.push(`line-height:${lineHeight}`);
+    }
+    return parts.length > 0 ? parts.join(';') : undefined;
+}
+const paragraphRenderer = (node) => {
+    const style = blockStyleFromAttrs(node.attrs);
+    return ['p', style ? { class: 'dx-paragraph', style } : { class: 'dx-paragraph' }, HOLE];
+};
+const headingRenderer = (node) => {
+    const level = Math.min(6, Math.max(1, node.attrs.level ?? 1));
+    const style = blockStyleFromAttrs(node.attrs);
+    return [
+        `h${level}`,
+        style ? { class: 'dx-heading', style } : { class: 'dx-heading' },
+        HOLE,
+    ];
+};
+const blockquoteRenderer = () => ['blockquote', { class: 'dx-blockquote' }, HOLE];
+const listRenderer = (node) => {
+    const tag = node.attrs.ordered ? 'ol' : 'ul';
+    return [tag, { class: 'dx-list' }, HOLE];
+};
+const listItemRenderer = () => ['li', { class: 'dx-list-item' }, HOLE];
+const hrRenderer = () => ['hr', { class: 'dx-hr' }];
+const pageBreakRenderer = () => ['div', { class: 'dx-page-break' }];
+const tableRenderer = () => ['table', { class: 'dx-table' }, ['tbody', {}, HOLE]];
+const tableRowRenderer = (node) => {
+    const header = node.attrs.header;
+    const cls = header ? 'dx-table-row is-header' : 'dx-table-row';
+    return ['tr', { class: cls }, HOLE];
+};
+const tableCellRenderer = (node) => {
+    const attrs = { class: 'dx-table-cell' };
+    const w = node.attrs.widthPx;
+    const bg = node.attrs.background;
+    const style = [];
+    if (typeof w === 'number')
+        style.push(`width:${w}px`);
+    if (typeof bg === 'string' && bg.length > 0)
+        style.push(`background:${bg}`);
+    if (style.length)
+        attrs.style = style.join(';');
+    // Emit colspan/rowspan ONLY when > 1 to keep the DOM clean.
+    const colspan = node.attrs.colspan;
+    const rowspan = node.attrs.rowspan;
+    if (typeof colspan === 'number' && colspan > 1)
+        attrs.colspan = String(colspan);
+    if (typeof rowspan === 'number' && rowspan > 1)
+        attrs.rowspan = String(rowspan);
+    return ['td', attrs, HOLE];
+};
+const textRenderer = (node) => node.text;
+const imageRenderer = (node) => {
+    const attrs = {
+        class: 'dx-image',
+        src: node.attrs.src ?? '',
+        alt: node.attrs.alt ?? '',
+        // tabindex=-1 keeps the image out of the natural tab order while letting
+        // selection painting target it without the browser auto-focusing the <img>.
+        tabindex: -1,
+    };
+    const widthPx = node.attrs.widthPx;
+    if (typeof widthPx === 'number') {
+        attrs.style = `width:${widthPx}px`;
+    }
+    return ['img', attrs];
+};
+const pageVarRenderer = (node) => {
+    // Default ('#') is the placeholder seen when a page_var renders OUTSIDE a
+    // header/footer slot (e.g. directly in the doc, or via standalone Renderer
+    // tests). The slot controller in `installPageSlots` overrides per-page with
+    // the actual page number / total page count.
+    const kind = node.attrs.kind ?? '';
+    return ['span', { class: 'dx-page-var', 'data-kind': kind }, '#'];
+};
+const boldRenderer = () => ['strong', { class: 'dx-bold' }, HOLE];
+const italicRenderer = () => ['em', { class: 'dx-italic' }, HOLE];
+const underlineRenderer = () => ['u', { class: 'dx-underline' }, HOLE];
+const linkRenderer = (mark) => [
+    'a',
+    {
+        class: 'dx-link',
+        href: mark.attrs.href ?? '',
+        rel: 'noopener',
+    },
+    HOLE,
+];
+const colorRenderer = (mark) => [
+    'span',
+    { class: 'dx-color', style: `color:${mark.attrs.value ?? 'inherit'}` },
+    HOLE,
+];
+const fontSizeRenderer = (mark) => [
+    'span',
+    { class: 'dx-font-size', style: `font-size:${mark.attrs.px ?? 16}px` },
+    HOLE,
+];
+const fontFamilyRenderer = (mark) => [
+    'span',
+    { class: 'dx-font-family', style: `font-family:${mark.attrs.name ?? 'inherit'}` },
+    HOLE,
+];
+export const defaultRenderer = new Renderer({
+    nodes: {
+        doc: docRenderer,
+        paragraph: paragraphRenderer,
+        heading: headingRenderer,
+        blockquote: blockquoteRenderer,
+        list: listRenderer,
+        list_item: listItemRenderer,
+        hr: hrRenderer,
+        page_break: pageBreakRenderer,
+        table: tableRenderer,
+        table_row: tableRowRenderer,
+        table_cell: tableCellRenderer,
+        text: textRenderer,
+        image: imageRenderer,
+        page_var: pageVarRenderer,
+    },
+    marks: {
+        bold: boldRenderer,
+        italic: italicRenderer,
+        underline: underlineRenderer,
+        link: linkRenderer,
+        color: colorRenderer,
+        font_size: fontSizeRenderer,
+        font_family: fontFamilyRenderer,
+    },
+});
+//# sourceMappingURL=default-renderer.js.map

package/dist/view/default-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-renderer.js","sourceRoot":"","sources":["../../src/view/default-renderer.ts"],"names":[],"mappings":"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"}

package/dist/view/dom-spec.d.ts

@@ -0,0 +1,11 @@
+export type Attrs = Readonly<Record<string, string | number | boolean | null | undefined>> | null;
+export interface DOMSpecElement extends ReadonlyArray<unknown> {
+    readonly 0: string;
+    readonly 1?: Attrs;
+    readonly [index: number]: string | Attrs | DOMSpec | 0 | undefined;
+}
+export type DOMSpec = string | DOMSpecElement;
+export declare const HOLE: 0;
+export declare const HOLE_MARKER_ATTR = "data-dx-content-hole";
+export declare function renderSpec(doc: Document, spec: DOMSpec): Node;
+//# sourceMappingURL=dom-spec.d.ts.map

package/dist/view/dom-spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-spec.d.ts","sourceRoot":"","sources":["../../src/view/dom-spec.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,GAAG,IAAI,CAAA;AAKjG,MAAM,WAAW,cAAe,SAAQ,aAAa,CAAC,OAAO,CAAC;IAC5D,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,GAAG,SAAS,CAAA;CACnE;AACD,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,cAAc,CAAA;AAE7C,eAAO,MAAM,IAAI,GAAa,CAAA;AAC9B,eAAO,MAAM,gBAAgB,yBAAyB,CAAA;AAEtD,wBAAgB,UAAU,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAa7D"}

package/dist/view/dom-spec.js

@@ -0,0 +1,32 @@
+export const HOLE = 0;
+export const HOLE_MARKER_ATTR = 'data-dx-content-hole';
+export function renderSpec(doc, spec) {
+    if (typeof spec === 'string')
+        return doc.createTextNode(spec);
+    const [tag, attrs, ...children] = spec;
+    const el = doc.createElement(tag);
+    if (attrs)
+        applyAttrs(el, attrs);
+    for (const child of children) {
+        if (child === HOLE) {
+            el.setAttribute(HOLE_MARKER_ATTR, '');
+            continue;
+        }
+        el.appendChild(renderSpec(doc, child));
+    }
+    return el;
+}
+function applyAttrs(el, attrs) {
+    for (const name of Object.keys(attrs)) {
+        const value = attrs[name];
+        if (value === null || value === undefined || value === false)
+            continue;
+        if (value === true) {
+            el.setAttribute(name, '');
+        }
+        else {
+            el.setAttribute(name, String(value));
+        }
+    }
+}
+//# sourceMappingURL=dom-spec.js.map

package/dist/view/dom-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-spec.js","sourceRoot":"","sources":["../../src/view/dom-spec.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,IAAI,GAAG,CAAU,CAAA;AAC9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,sBAAsB,CAAA;AAEtD,MAAM,UAAU,UAAU,CAAC,GAAa,EAAE,IAAa;IACrD,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAC7D,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACjC,IAAI,KAAK;QAAE,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;IAChC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;QAC7B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;YACrC,SAAQ;QACV,CAAC;QACD,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,KAAgB,CAAC,CAAC,CAAA;IACnD,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,SAAS,UAAU,CAAC,EAAW,EAAE,KAAyB;IACxD,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;QACzB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK;YAAE,SAAQ;QACtE,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;QAC3B,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;QACtC,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/view/editor-view.d.ts

@@ -0,0 +1,55 @@
+import { type PageConfig } from '../layout/index.js';
+import type { EditorState } from '../state/editor-state.js';
+import type { Transaction } from '../transform/transaction.js';
+import { type Renderer } from './renderer.js';
+export interface EditorViewProps {
+    readonly state: EditorState;
+    readonly renderer: Renderer;
+    /** Called when the view wants to commit a Transaction. If omitted, view.dispatch throws. */
+    dispatchTransaction?(tr: Transaction): void;
+    /**
+     * Whether the editor root sets contenteditable=true. Default true.
+     */
+    readonly editable?: boolean;
+    /**
+     * When set, the view renders in paginated mode: content is broken into
+     * fixed-size `.dx-page` containers by the LayoutEngine. v0.2 Phase 8 does
+     * a full repaginate on every updateState (no incremental relayout yet).
+     * When omitted, the view renders flat (Phase 1–7 behavior, unchanged).
+     */
+    readonly paginated?: PageConfig;
+    /**
+     * Accessible name applied to the editor's contenteditable root as
+     * `aria-label`. Screen readers announce this when focus enters the
+     * editor. Defaults to "Document editor". Pass a localized string for
+     * non-English UIs.
+     */
+    readonly ariaLabel?: string;
+}
+export declare class EditorView {
+    readonly dom: HTMLElement;
+    private currentState;
+    private readonly props;
+    private mount;
+    private lastRenderedDoc;
+    private readonly layoutEngine;
+    private readonly tableResizeCleanup;
+    private readonly cellDragCleanup;
+    private readonly imageResizeCleanup;
+    private readonly pageSlots;
+    constructor(mount: HTMLElement, props: EditorViewProps);
+    /** Re-collect the current `.dx-page` elements and (re)mount slot bindings. */
+    private syncPageSlots;
+    get state(): EditorState;
+    updateState(newState: EditorState): void;
+    /**
+     * Force a full re-render of the current state, bypassing the doc-identity
+     * short-circuit in updateState. Used by the MutationObserver safety net to
+     * revert unauthorized DOM mutations.
+     */
+    forceRender(): void;
+    dispatch(tr: Transaction): void;
+    destroy(): void;
+    private initialRender;
+}
+//# sourceMappingURL=editor-view.d.ts.map

package/dist/view/editor-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-view.d.ts","sourceRoot":"","sources":["../../src/view/editor-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAG9D,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAOzD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,4FAA4F;IAC5F,mBAAmB,CAAC,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3C;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,qBAAa,UAAU;IACrB,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAA;IACzB,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;IACvC,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,eAAe,CAAiD;IACxE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAqB;IAClD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAY;IAC/C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAY;IAC5C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAY;IAC/C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA4B;gBAE1C,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe;IA0BtD,8EAA8E;IAC9E,OAAO,CAAC,aAAa;IAMrB,IAAI,KAAK,IAAI,WAAW,CAA6B;IAErD,WAAW,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAoCxC;;;;OAIG;IACH,WAAW,IAAI,IAAI;IAKnB,QAAQ,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;IAO/B,OAAO,IAAI,IAAI;IAYf,OAAO,CAAC,aAAa;CAmBtB"}

package/dist/view/editor-view.js

@@ -0,0 +1,143 @@
+import { LayoutEngine } from '../layout/index.js';
+import { paginate } from './paginator.js';
+import { reconcile } from './reconcile.js';
+import { renderNode } from './renderer.js';
+import { renderSelection } from './selection-sync.js';
+import { installCellDrag } from './cell-drag.js';
+import { installImageResize } from './image-resize.js';
+import { installPageSlots } from './page-slots.js';
+import { installTableResize } from './table-resize.js';
+export class EditorView {
+    dom;
+    currentState;
+    props;
+    mount;
+    lastRenderedDoc = null;
+    layoutEngine;
+    tableResizeCleanup;
+    cellDragCleanup;
+    imageResizeCleanup;
+    pageSlots;
+    constructor(mount, props) {
+        this.props = props;
+        this.mount = mount;
+        this.currentState = props.state;
+        this.dom = mount.ownerDocument.createElement('div');
+        const editable = props.editable !== false;
+        this.dom.setAttribute('contenteditable', editable ? 'true' : 'false');
+        this.dom.setAttribute('spellcheck', 'true');
+        this.dom.setAttribute('role', 'textbox');
+        this.dom.setAttribute('aria-multiline', 'true');
+        this.dom.setAttribute('aria-label', props.ariaLabel ?? 'Document editor');
+        this.dom.className = 'dx-editor';
+        mount.appendChild(this.dom);
+        this.layoutEngine = props.paginated
+            ? new LayoutEngine(mount.ownerDocument, props.renderer, props.paginated)
+            : null;
+        // Page-slots controller is only meaningful in paginated mode — the
+        // flat (non-paginated) render path emits no `.dx-page` containers
+        // for headers/footers to mount into.
+        this.pageSlots = this.layoutEngine ? installPageSlots(this) : null;
+        this.initialRender();
+        this.tableResizeCleanup = installTableResize(this);
+        this.cellDragCleanup = installCellDrag(this);
+        this.imageResizeCleanup = installImageResize(this);
+    }
+    /** Re-collect the current `.dx-page` elements and (re)mount slot bindings. */
+    syncPageSlots() {
+        if (!this.pageSlots)
+            return;
+        const pages = Array.from(this.dom.querySelectorAll('.dx-page'));
+        this.pageSlots.attach(pages);
+    }
+    get state() { return this.currentState; }
+    updateState(newState) {
+        this.currentState = newState;
+        if (this.layoutEngine) {
+            // Selection-only updates (doc unchanged) must NOT repaginate — the
+            // Paginator clears and rebuilds the DOM, which destroys the live DOM
+            // selection mid-drag. Without this short-circuit, mouse-drag selection
+            // and selection-change dispatches loop-fight each other and selections
+            // visually snap back.
+            if (this.lastRenderedDoc === newState.doc) {
+                // Doc unchanged — selection-only path. Pages weren't rebuilt,
+                // so slot DOM is still there; just refresh slot contents in
+                // case pageMeta changed via a SetPageMetaStep that didn't
+                // touch the doc.
+                if (this.pageSlots)
+                    this.pageSlots.refresh();
+                renderSelection(this.dom, this.currentState.selection, this.currentState.doc);
+                return;
+            }
+            const model = this.layoutEngine.layout(newState.doc);
+            paginate(this.dom, newState.doc, model, this.props.renderer);
+            this.lastRenderedDoc = newState.doc;
+            // Paginator rebuilt page DOM — re-attach slot bindings.
+            this.syncPageSlots();
+            renderSelection(this.dom, this.currentState.selection, this.currentState.doc);
+            return;
+        }
+        const oldDoc = this.lastRenderedDoc;
+        if (oldDoc && oldDoc !== newState.doc) {
+            reconcile(this.dom, oldDoc, newState.doc, this.props.renderer);
+        }
+        else if (!oldDoc) {
+            this.initialRender();
+            return;
+        }
+        this.lastRenderedDoc = newState.doc;
+        renderSelection(this.dom, this.currentState.selection, this.currentState.doc);
+    }
+    /**
+     * Force a full re-render of the current state, bypassing the doc-identity
+     * short-circuit in updateState. Used by the MutationObserver safety net to
+     * revert unauthorized DOM mutations.
+     */
+    forceRender() {
+        this.lastRenderedDoc = null;
+        this.updateState(this.currentState);
+    }
+    dispatch(tr) {
+        if (!this.props.dispatchTransaction) {
+            throw new Error('EditorView.dispatch: no dispatchTransaction handler configured');
+        }
+        this.props.dispatchTransaction(tr);
+    }
+    destroy() {
+        if (this.pageSlots)
+            this.pageSlots.destroy();
+        this.imageResizeCleanup();
+        this.cellDragCleanup();
+        this.tableResizeCleanup();
+        if (this.layoutEngine)
+            this.layoutEngine.destroy();
+        if (this.mount) {
+            this.mount.removeChild(this.dom);
+            this.mount = null;
+        }
+    }
+    initialRender() {
+        while (this.dom.firstChild)
+            this.dom.removeChild(this.dom.firstChild);
+        if (this.layoutEngine) {
+            const model = this.layoutEngine.layout(this.currentState.doc);
+            paginate(this.dom, this.currentState.doc, model, this.props.renderer);
+        }
+        else {
+            const tree = renderNode(this.dom.ownerDocument, this.props.renderer, this.currentState.doc, -1);
+            if (tree.nodeType === 1) {
+                const el = tree;
+                while (el.firstChild)
+                    this.dom.appendChild(el.firstChild);
+            }
+            else {
+                this.dom.appendChild(tree);
+            }
+        }
+        this.lastRenderedDoc = this.currentState.doc;
+        // After the initial paginate emitted pages, mount slot bindings.
+        this.syncPageSlots();
+        renderSelection(this.dom, this.currentState.selection, this.currentState.doc);
+    }
+}
+//# sourceMappingURL=editor-view.js.map

package/dist/view/editor-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-view.js","sourceRoot":"","sources":["../../src/view/editor-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAmB,MAAM,oBAAoB,CAAA;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAiB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAA4B,MAAM,iBAAiB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AA2BtD,MAAM,OAAO,UAAU;IACZ,GAAG,CAAa;IACjB,YAAY,CAAa;IAChB,KAAK,CAAiB;IAC/B,KAAK,CAAoB;IACzB,eAAe,GAA6C,IAAI,CAAA;IACvD,YAAY,CAAqB;IACjC,kBAAkB,CAAY;IAC9B,eAAe,CAAY;IAC3B,kBAAkB,CAAY;IAC9B,SAAS,CAA4B;IAEtD,YAAY,KAAkB,EAAE,KAAsB;QACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK,CAAA;QAC/B,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACnD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAA;QACzC,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrE,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;QAC3C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QACxC,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;QAC/C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,IAAI,iBAAiB,CAAC,CAAA;QACzE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAA;QAChC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS;YACjC,CAAC,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;YACxE,CAAC,CAAC,IAAI,CAAA;QACR,mEAAmE;QACnE,kEAAkE;QAClE,qCAAqC;QACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QAClE,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;QAClD,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;QAC5C,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IACpD,CAAC;IAED,8EAA8E;IACtE,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAM;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAc,UAAU,CAAC,CAAC,CAAA;QAC5E,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC9B,CAAC;IAED,IAAI,KAAK,KAAkB,OAAO,IAAI,CAAC,YAAY,CAAA,CAAC,CAAC;IAErD,WAAW,CAAC,QAAqB;QAC/B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC5B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,mEAAmE;YACnE,qEAAqE;YACrE,uEAAuE;YACvE,uEAAuE;YACvE,sBAAsB;YACtB,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,CAAC,GAAG,EAAE,CAAC;gBAC1C,8DAA8D;gBAC9D,4DAA4D;gBAC5D,0DAA0D;gBAC1D,iBAAiB;gBACjB,IAAI,IAAI,CAAC,SAAS;oBAAE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;gBAC5C,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;gBAC7E,OAAM;YACR,CAAC;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;YACpD,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YAC5D,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAA;YACnC,wDAAwD;YACxD,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;YAC7E,OAAM;QACR,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAA;QACnC,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,CAAC,GAAG,EAAE,CAAC;YACtC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;QAChE,CAAC;aAAM,IAAI,CAAC,MAAM,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,OAAM;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAA;QACnC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC/E,CAAC;IAED;;;;OAIG;IACH,WAAW;QACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACrC,CAAC;IAED,QAAQ,CAAC,EAAe;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;YACpC,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAA;QACnF,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAA;IACpC,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;QAC5C,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,CAAC,eAAe,EAAE,CAAA;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAA;QAClD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU;YAAE,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QACrE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;YAC7D,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;QACvE,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAA;YAC/F,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;gBACxB,MAAM,EAAE,GAAG,IAAe,CAAA;gBAC1B,OAAO,EAAE,CAAC,UAAU;oBAAE,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAA;YAC3D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAA;QAC5C,iEAAiE;QACjE,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC/E,CAAC;CACF"}

package/dist/view/image-resize.d.ts

@@ -0,0 +1,37 @@
+import type { EditorView } from './editor-view.js';
+/**
+ * Pointer-driven width resize for images.
+ *
+ * Hot zone: within 8px of the right edge of any `.dx-image`.
+ *
+ * Strategy (mirrors `installTableResize`):
+ *   - On pointermove (no drag), set `view.dom.style.cursor = 'ew-resize'` while
+ *     the pointer hovers in the hot zone.
+ *   - On pointerdown in the hot zone, capture the starting `clientX`, the
+ *     image's bounding rect width, the image element, and the image's absolute
+ *     [open] position in the model (read from a NodeRef attached by the
+ *     renderer). Set pointer capture on the event target so subsequent
+ *     pointermoves are routed to this controller exclusively (this also
+ *     prevents `installCellDrag` from kicking in when the image lives inside a
+ *     table cell).
+ *   - During the drag, we mutate the DOM directly — writing
+ *     `img.style.width = '${newWidth}px'`. Writes are coalesced through
+ *     `requestAnimationFrame`: multiple pointermoves within one frame produce
+ *     a single DOM write per frame.
+ *   - On pointerup, the pending frame is cancelled, the final width is
+ *     written synchronously, and a single `setImageWidth(imgPos, final)`
+ *     transaction is dispatched. The post-dispatch render reconciles the DOM
+ *     to the new model attr value.
+ *   - On pointercancel, the pending frame is cancelled and the view re-renders
+ *     from current state (undoing any direct DOM mutations).
+ *
+ * Coordination with other controllers:
+ *   - `installCellDrag` (cell-selection) also listens on pointerdown. When the
+ *     pointerdown lands on an image's right-edge hot zone inside a cell, this
+ *     controller captures the pointer, so cell-drag's anchor never receives
+ *     subsequent pointermoves and never escalates to a CellSelection.
+ *   - `installTableResize` is unaffected — its hot zone is on the cell's right
+ *     edge, not on any `.dx-image` inside the cell.
+ */
+export declare function installImageResize(view: EditorView): () => void;
+//# sourceMappingURL=image-resize.d.ts.map

package/dist/view/image-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-resize.d.ts","sourceRoot":"","sources":["../../src/view/image-resize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,IAAI,CAyK/D"}

package/dist/view/image-resize.js

@@ -0,0 +1,191 @@
+import { setImageWidth } from '../commands/image-commands.js';
+import { getNodeRef } from './renderer.js';
+/**
+ * Pointer-driven width resize for images.
+ *
+ * Hot zone: within 8px of the right edge of any `.dx-image`.
+ *
+ * Strategy (mirrors `installTableResize`):
+ *   - On pointermove (no drag), set `view.dom.style.cursor = 'ew-resize'` while
+ *     the pointer hovers in the hot zone.
+ *   - On pointerdown in the hot zone, capture the starting `clientX`, the
+ *     image's bounding rect width, the image element, and the image's absolute
+ *     [open] position in the model (read from a NodeRef attached by the
+ *     renderer). Set pointer capture on the event target so subsequent
+ *     pointermoves are routed to this controller exclusively (this also
+ *     prevents `installCellDrag` from kicking in when the image lives inside a
+ *     table cell).
+ *   - During the drag, we mutate the DOM directly — writing
+ *     `img.style.width = '${newWidth}px'`. Writes are coalesced through
+ *     `requestAnimationFrame`: multiple pointermoves within one frame produce
+ *     a single DOM write per frame.
+ *   - On pointerup, the pending frame is cancelled, the final width is
+ *     written synchronously, and a single `setImageWidth(imgPos, final)`
+ *     transaction is dispatched. The post-dispatch render reconciles the DOM
+ *     to the new model attr value.
+ *   - On pointercancel, the pending frame is cancelled and the view re-renders
+ *     from current state (undoing any direct DOM mutations).
+ *
+ * Coordination with other controllers:
+ *   - `installCellDrag` (cell-selection) also listens on pointerdown. When the
+ *     pointerdown lands on an image's right-edge hot zone inside a cell, this
+ *     controller captures the pointer, so cell-drag's anchor never receives
+ *     subsequent pointermoves and never escalates to a CellSelection.
+ *   - `installTableResize` is unaffected — its hot zone is on the cell's right
+ *     edge, not on any `.dx-image` inside the cell.
+ */
+export function installImageResize(view) {
+    const HOT_ZONE_PX = 8;
+    const MIN_WIDTH_PX = 32;
+    let drag = null;
+    // rAF-coalesced live DOM writes. See `installTableResize` for the matching
+    // pattern used by column-resize.
+    let pendingFrame = null;
+    let pendingWidth = null;
+    function getRaf() {
+        const win = view.dom.ownerDocument.defaultView;
+        if (win && typeof win.requestAnimationFrame === 'function') {
+            return {
+                request: win.requestAnimationFrame.bind(win),
+                cancel: win.cancelAnimationFrame.bind(win),
+            };
+        }
+        return {
+            request: (cb) => {
+                cb(0);
+                return 0;
+            },
+            cancel: () => {
+                /* no-op */
+            },
+        };
+    }
+    function flushPendingWidth() {
+        pendingFrame = null;
+        if (!drag || pendingWidth == null)
+            return;
+        drag.img.style.width = `${pendingWidth}px`;
+    }
+    function cancelPendingFrame() {
+        if (pendingFrame != null) {
+            getRaf().cancel(pendingFrame);
+            pendingFrame = null;
+        }
+        pendingWidth = null;
+    }
+    function findImageWithinHotZone(target, clientX) {
+        if (!(target instanceof Element))
+            return null;
+        const img = target.closest('.dx-image');
+        if (!img)
+            return null;
+        if (!view.dom.contains(img))
+            return null;
+        const rect = img.getBoundingClientRect();
+        if (clientX >= rect.right - HOT_ZONE_PX && clientX <= rect.right + HOT_ZONE_PX) {
+            return img;
+        }
+        return null;
+    }
+    function imagePosFromEl(img) {
+        const ref = getNodeRef(img);
+        if (!ref || ref.pos < 0)
+            return null;
+        return ref.pos;
+    }
+    function onPointerMove(event) {
+        if (drag) {
+            const delta = event.clientX - drag.startX;
+            const newWidth = Math.max(MIN_WIDTH_PX, Math.round(drag.startWidth + delta));
+            drag.finalWidth = newWidth;
+            pendingWidth = newWidth;
+            if (pendingFrame == null) {
+                pendingFrame = getRaf().request(flushPendingWidth);
+            }
+            event.preventDefault();
+            return;
+        }
+        const hit = findImageWithinHotZone(event.target, event.clientX);
+        if (hit) {
+            view.dom.style.cursor = 'ew-resize';
+        }
+        // NOTE: when not hovering an image hot zone, we don't clear the cursor —
+        // installTableResize manages its own cursor state and writes '' when its
+        // own hot zone is missed. Both controllers reset the cursor on pointerup
+        // and on teardown.
+    }
+    function onPointerDown(event) {
+        if (event.button !== 0)
+            return;
+        const hit = findImageWithinHotZone(event.target, event.clientX);
+        if (!hit)
+            return;
+        const imgPos = imagePosFromEl(hit);
+        if (imgPos == null)
+            return;
+        const startWidth = hit.getBoundingClientRect().width;
+        const captureTarget = event.target instanceof HTMLElement ? event.target : view.dom;
+        try {
+            captureTarget.setPointerCapture(event.pointerId);
+        }
+        catch {
+            /* ignore */
+        }
+        drag = {
+            img: hit,
+            imgPos,
+            startX: event.clientX,
+            startWidth,
+            pointerId: event.pointerId,
+            captureTarget,
+            finalWidth: startWidth,
+        };
+        event.preventDefault();
+    }
+    function onPointerUp(event) {
+        if (!drag)
+            return;
+        const finished = drag;
+        drag = null;
+        cancelPendingFrame();
+        finished.img.style.width = `${finished.finalWidth}px`;
+        try {
+            finished.captureTarget.releasePointerCapture(finished.pointerId);
+        }
+        catch {
+            /* ignore */
+        }
+        view.dom.style.cursor = '';
+        const cmd = setImageWidth(finished.imgPos, finished.finalWidth);
+        cmd(view.state, (tr) => view.dispatch(tr));
+        event.preventDefault();
+    }
+    function onPointerCancel(_event) {
+        if (!drag)
+            return;
+        const cancelled = drag;
+        drag = null;
+        cancelPendingFrame();
+        try {
+            cancelled.captureTarget.releasePointerCapture(cancelled.pointerId);
+        }
+        catch {
+            /* ignore */
+        }
+        view.dom.style.cursor = '';
+        view.forceRender();
+    }
+    view.dom.addEventListener('pointermove', onPointerMove);
+    view.dom.addEventListener('pointerdown', onPointerDown);
+    view.dom.addEventListener('pointerup', onPointerUp);
+    view.dom.addEventListener('pointercancel', onPointerCancel);
+    return () => {
+        cancelPendingFrame();
+        view.dom.removeEventListener('pointermove', onPointerMove);
+        view.dom.removeEventListener('pointerdown', onPointerDown);
+        view.dom.removeEventListener('pointerup', onPointerUp);
+        view.dom.removeEventListener('pointercancel', onPointerCancel);
+        view.dom.style.cursor = '';
+    };
+}
+//# sourceMappingURL=image-resize.js.map