@onodocs/canvas 0.2.0 → 0.3.0

package/index.js

@@ -1578,7 +1578,7 @@ __name(fillExactSectionColumnSeparator, "fillExactSectionColumnSeparator");
 
 // packages/canvas/src/text-selection.ts
 var nextView = 0;
-function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, signal) {
+function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, signal, input, onSelectionChange) {
   const document2 = viewport.ownerDocument;
   const window = document2.defaultView;
   const svg = "http://www.w3.org/2000/svg";
@@ -1607,7 +1607,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     for (const caret of value.carets) {
       const offset = offsets[caret.scalarOffset - value.scalarStart];
       if (offset === void 0) continue;
-      const stop = { line, offset: length + offset, x: caret.x, index: stops.length };
+      const stop = { line, offset: length + offset, x: caret.x, index: stops.length, ...caret.paragraphOffset === void 0 ? {} : { position: { paragraphId: value.paragraphId, offset: caret.paragraphOffset } } };
       line.stops.push(stop);
       stops.push(stop);
     }
@@ -1639,6 +1639,10 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
   let menu;
   viewport.tabIndex = 0;
   viewport.style.userSelect = "none";
+  if (input) {
+    viewport.style.position = "relative";
+    viewport.append(input);
+  }
   for (const shell of shells) shell.style.cursor = "text";
   function paint() {
     for (const [index, layer] of layers) {
@@ -1646,7 +1650,13 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
       layer.replaceChildren();
       if (!nearby.has(index)) layers.delete(index);
     }
-    if (!anchor || !focus || document2.activeElement !== viewport && !menu?.contains(document2.activeElement)) return;
+    if (!anchor || !focus || !input && document2.activeElement !== viewport && !menu?.contains(document2.activeElement)) return;
+    if (input) {
+      const shell = shells[focus.line.item.pageIndex], bounds = shell.getBoundingClientRect(), origin = viewport.getBoundingClientRect();
+      const point = focus.line.transform.transformPoint({ x: focus.x, y: focus.line.item.selection.top });
+      const scale = bounds.width / pageBounds[focus.line.item.pageIndex].width;
+      Object.assign(input.style, { position: "absolute", left: `${bounds.left - origin.left + point.x * scale}px`, top: `${bounds.top - origin.top + point.y * scale}px`, height: `${focus.line.item.selection.height * scale}px` });
+    }
     const start = Math.min(anchor.offset, focus.offset), end = Math.max(anchor.offset, focus.offset);
     for (const index of nearby) for (const line of pages[index] ?? []) {
       let rectangle2 = function(x, width, caret = false) {
@@ -1707,7 +1717,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
   __name(paint, "paint");
   function nearest(clientX, clientY) {
     if (!logical.length) return;
-    let result, best = Infinity;
+    let result, bestY = Infinity, bestX = Infinity;
     let first = 0, last = shells.length - 1;
     while (first < last) {
       const middle = first + last >>> 1;
@@ -1732,9 +1742,9 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
         const dy = Math.max(value.top - y, 0, y - value.top - value.height) * box.height / height;
         for (const stop of line.stops) {
           const dx = Math.abs(stop.x - x) * box.width / width;
-          const distance = dy * dy * 16 + dx * dx;
-          if (distance < best) {
-            best = distance;
+          if (dy < bestY || dy === bestY && dx < bestX) {
+            bestY = dy;
+            bestX = dx;
             result = stop;
           }
         }
@@ -1748,6 +1758,8 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     focus = stop;
     if (!extend || !anchor) anchor = stop;
     paint();
+    onSelectionChange?.(currentSelection());
+    if (input && document2.activeElement === viewport) input.focus({ preventScroll: true });
     if (scroll) {
       const shell = shells[stop.line.item.pageIndex];
       const point = stop.line.transform.transformPoint({ x: stop.x, y: stop.line.item.selection.top });
@@ -1788,13 +1800,23 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     pointerPosition = { x: event.clientX, y: event.clientY };
     select(nearest(event.clientX, event.clientY), true);
   }, { signal });
+  viewport.addEventListener("dblclick", (event) => {
+    if (event.target.closest("button,input,textarea,select,a,[data-onodocs-attachment]")) return;
+    const stop = nearest(event.clientX, event.clientY);
+    if (!stop) return;
+    const segment = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text)].find((value) => stop.offset >= value.index && stop.offset < value.index + value.segment.length);
+    if (!segment) return;
+    event.preventDefault();
+    anchor = logical.find((value) => value.offset >= segment.index);
+    select(logical.find((value) => value.offset >= segment.index + segment.segment.length), true);
+  }, { signal });
   for (const type of ["pointerup", "pointercancel", "lostpointercapture"]) viewport.addEventListener(type, (event) => {
     if (event.pointerId !== pointer) return;
     pointer = void 0;
     window.cancelAnimationFrame(frame);
   }, { signal });
   viewport.addEventListener("keydown", (event) => {
-    if (event.target !== viewport || !logical.length) return;
+    if (event.target !== viewport && event.target !== input || !logical.length || event.isComposing) return;
     const command = event.ctrlKey || event.metaKey;
     if (command && event.key.toLowerCase() === "a") {
       event.preventDefault();
@@ -1813,7 +1835,11 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       const delta = event.key === "ArrowLeft" ? -1 : 1;
       if (!event.shiftKey && anchor.offset !== focus.offset) next = delta < 0 ? anchor.offset < focus.offset ? anchor : focus : anchor.offset > focus.offset ? anchor : focus;
-      else {
+      else if (command) {
+        const words = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text)].filter((value) => value.isWordLike);
+        const offset = delta < 0 ? words.filter((value) => value.index < focus.offset).at(-1)?.index ?? 0 : words.find((value) => value.index > focus.offset)?.index ?? text.length;
+        next = logical.find((value) => value.offset >= offset) ?? logical.at(-1);
+      } else {
         let index = logicalIndex.get(focus) + delta;
         while (logical[index]?.offset === focus.offset) index += delta;
         next = logical[Math.max(0, Math.min(logical.length - 1, index))];
@@ -1830,7 +1856,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     select(next, event.shiftKey, true);
   }, { signal });
   document2.addEventListener("copy", (event) => {
-    if (document2.activeElement !== viewport && !menu?.contains(document2.activeElement) || !focus || anchor.offset === focus.offset) return;
+    if (document2.activeElement !== viewport && document2.activeElement !== input && !menu?.contains(document2.activeElement) || !focus || anchor.offset === focus.offset) return;
     event.clipboardData?.setData("text/plain", selectedText());
     event.preventDefault();
   }, { signal });
@@ -1918,7 +1944,25 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     window.cancelAnimationFrame(frame);
     for (const layer of layers.values()) layer.remove();
   }, { once: true });
-  return { paint };
+  function currentSelection() {
+    if (!anchor?.position || !focus?.position) return;
+    return anchor.offset <= focus.offset ? { start: anchor.position, end: focus.position } : { start: focus.position, end: anchor.position };
+  }
+  __name(currentSelection, "currentSelection");
+  const byParagraph = /* @__PURE__ */ new Map();
+  for (const stop of logical) if (stop.position) {
+    let offsets = byParagraph.get(stop.position.paragraphId);
+    if (!offsets) byParagraph.set(stop.position.paragraphId, offsets = /* @__PURE__ */ new Map());
+    offsets.set(stop.position.offset, stop);
+  }
+  return { paint, get selection() {
+    return currentSelection();
+  }, setSelection(value) {
+    const start = byParagraph.get(value.start.paragraphId)?.get(value.start.offset), end = byParagraph.get(value.end.paragraphId)?.get(value.end.offset);
+    if (!start || !end) return;
+    anchor = start;
+    select(end, true, true);
+  } };
 }
 __name(mountTextSelection, "mountTextSelection");
 
@@ -1965,10 +2009,10 @@ function mountDocument(document2, container, options = {}, onDispose) {
   let selection;
   let selectionLifetime;
   function prepareSelection(event) {
-    if (event.target.closest("[data-onodocs-attachment]")) return;
+    if (event?.target?.closest("[data-onodocs-attachment]")) return;
     if (selection) return;
     selectionLifetime = new AbortController();
-    selection = mountTextSelection(document2.pages.flatMap((page) => page.interaction.text), element, shells.map((entry) => entry.shell), document2.pages.map((page) => page.size), nearby, AbortSignal.any([lifetime.signal, selectionLifetime.signal]));
+    selection = mountTextSelection(document2.pages.flatMap((page) => page.interaction.text), element, shells.map((entry) => entry.shell), document2.pages.map((page) => page.size), nearby, AbortSignal.any([lifetime.signal, selectionLifetime.signal]), options.input, options.onSelectionChange);
   }
   __name(prepareSelection, "prepareSelection");
   for (const type of ["pointerdown", "keydown", "contextmenu", "focus"]) element.addEventListener(type, prepareSelection, { capture: true, signal: lifetime.signal });
@@ -2041,6 +2085,14 @@ function mountDocument(document2, container, options = {}, onDispose) {
   }
   const view = {
     element,
+    get selection() {
+      return selection?.selection;
+    },
+    setSelection(value) {
+      checkOpen();
+      prepareSelection();
+      selection.setSelection(value);
+    },
     get disposed() {
       return disposed;
     },
@@ -2420,9 +2472,30 @@ function createDocument(source, options = {}) {
   __name(loadFont, "loadFont");
 }
 __name(createDocument, "createDocument");
+async function openDocument(url, options = {}) {
+  const endpoint = new URL(url, document.baseURI);
+  const manifest = await load(endpoint, options.signal);
+  return createDocument({ pages: manifest.pages.map((page) => ({
+    ...page,
+    load(signal) {
+      const url2 = new URL(endpoint);
+      url2.pathname = `${url2.pathname.replace(/\/$/, "")}/pages/${page.index}`;
+      return load(url2, signal);
+    }
+  })) }, options);
+  async function load(url2, signal) {
+    const signals = [signal, options.signal].filter((value) => value !== void 0);
+    const response = await fetch(url2, { cache: "no-store", ...options.request, method: "GET", signal: AbortSignal.any(signals) });
+    if (!response.ok) throw new Error(`Document request failed (HTTP ${response.status}).`);
+    return decode(await response.text());
+  }
+  __name(load, "load");
+}
+__name(openDocument, "openDocument");
 export {
   createDocument,
   decode,
   encode,
-  materializePageDisplayListToCanvas
+  materializePageDisplayListToCanvas,
+  openDocument
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onodocs/canvas",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "OnoDocs canvas viewer, selection and HTML attachments for prepared Word document pages.",
   "homepage": "https://onodocs.com/developers/",
@@ -15,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "onodocsReleaseDate": "2026-10-07",
+  "onodocsReleaseDate": "2026-10-08",
   "onodocsEnvironment": "live",
   "type": "module",
   "sideEffects": false,
@@ -40,5 +40,5 @@
     "type": "git",
     "url": "https://github.com/onodocs/onodocs.git"
   },
-  "gitHead": "95967333a361ecd96d5cb764a619c07a8ab2bddf"
+  "gitHead": "cf082bcfda5fc7581332b4251fa27c39a9a66ec7"
 }

package/types/canvas/index.d.ts

@@ -27,4 +27,11 @@ export declare function createDocument(source: DocumentSource, options?: Readonl
     container?: HTMLElement;
     viewOptions?: ViewOptions;
 }>): CanvasDocument;
+export interface RemoteDocumentOptions {
+    readonly container?: HTMLElement;
+    readonly viewOptions?: ViewOptions;
+    readonly signal?: AbortSignal;
+    readonly request?: Omit<RequestInit, "method" | "body" | "signal">;
+}
+export declare function openDocument(url: string | URL, options?: RemoteDocumentOptions): Promise<CanvasDocument>;
 //# sourceMappingURL=index.d.ts.map

package/types/canvas/presentation.d.ts

@@ -1,11 +1,13 @@
 /** Spec: pipeline.semantic.document-update */
 /** Spec: pipeline.sdk.presentation */
-import type { DocumentFragment, DocumentHit, DocumentPoint } from "../render-api/index.js";
+import type { DocumentFragment, DocumentHit, DocumentPoint, DocumentSelection } from "../render-api/index.js";
 import type { DocumentPage, PageSize } from "./index.js";
 export interface ViewOptions {
     readonly zoom?: number | "fit-width";
     readonly gap?: number;
     readonly title?: string;
+    readonly input?: HTMLTextAreaElement;
+    readonly onSelectionChange?: (selection: DocumentSelection | undefined) => void;
 }
 export interface DocumentAttachment {
     readonly element: HTMLElement;
@@ -42,6 +44,8 @@ export interface DocumentView {
         point: DocumentPoint;
     }> | undefined;
     hitTest(point: DocumentPoint): DocumentHit | undefined;
+    readonly selection: DocumentSelection | undefined;
+    setSelection(selection: DocumentSelection): void;
     scrollTo(anchor: ViewAnchor, options?: ScrollIntoViewOptions): boolean;
     attach(element: HTMLElement, options: AttachmentOptions): DocumentAttachment;
     dispose(): void;

package/types/canvas/text-selection.d.ts

@@ -1,7 +1,9 @@
-import type { PageTextLine } from "../render-api/index.js";
+import type { DocumentSelection, PageTextLine } from "../render-api/index.js";
 import type { DocumentPage } from "./index.js";
 /** Spec: pipeline.sdk.presentation */
-export declare function mountTextSelection(pageText: readonly PageTextLine[], viewport: HTMLElement, shells: readonly HTMLElement[], pageBounds: readonly DocumentPage["size"][], nearby: ReadonlySet<number>, signal: AbortSignal): {
+export declare function mountTextSelection(pageText: readonly PageTextLine[], viewport: HTMLElement, shells: readonly HTMLElement[], pageBounds: readonly DocumentPage["size"][], nearby: ReadonlySet<number>, signal: AbortSignal, input?: HTMLTextAreaElement, onSelectionChange?: (selection: DocumentSelection | undefined) => void): {
     paint: () => void;
+    readonly selection: DocumentSelection | undefined;
+    setSelection(value: DocumentSelection): void;
 };
 //# sourceMappingURL=text-selection.d.ts.map

package/types/foundation/page-interaction.d.ts

@@ -3,6 +3,14 @@ export interface DocumentPoint {
     readonly x: number;
     readonly y: number;
 }
+export interface ParagraphPosition {
+    readonly paragraphId: string;
+    readonly offset: number;
+}
+export interface DocumentSelection {
+    readonly start: ParagraphPosition;
+    readonly end: ParagraphPosition;
+}
 export interface PageRectangle extends DocumentPoint {
     readonly width: number;
     readonly height: number;
@@ -54,6 +62,7 @@ export interface PageTextLine {
         carets: readonly Readonly<{
             scalarOffset: number;
             x: number;
+            paragraphOffset?: number;
         }>[];
     }>;
 }

package/types/render-api/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./page-display-list.js";
 export * from "./page-source.js";
-export type { DocumentFragment, DocumentHit, DocumentPoint, PageTextLine, PageInteraction, FontFaceResource, ImageResourceData } from "../foundation/index.js";
+export type { DocumentFragment, DocumentHit, DocumentPoint, DocumentSelection, ParagraphPosition, PageTextLine, PageInteraction, FontFaceResource, ImageResourceData } from "../foundation/index.js";
 //# sourceMappingURL=index.d.ts.map