@openpresentation/opf-editor 0.10.1 → 0.10.2

package/README.md

@@ -2,7 +2,7 @@
 
 Unfinished prepared shaping work is preserved in the [September 15 roadmap](docs/roadmap-shaping-20260915.md); it is not part of the published runtime.
 
-Version 0.10.1 adds the opt-in font gate (`createFontGate`, FF-41) and keeps the 0.10.0 requirements; develop and test it against renderer 0.11.2 and PPTX 0.11.1. Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
+Version 0.10.2 adds pointer caret entry on the canvas (one click puts the caret where you click; new `textEntry` option; keyboard entry still selects all) and keeps the 0.10.1 and 0.10.0 requirements. Version 0.10.1 adds the opt-in font gate (`createFontGate`, FF-41) and keeps the 0.10.0 requirements; develop and test it against renderer 0.11.2 and PPTX 0.11.1. Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
 
 Version 0.8.0 required `@openpresentation/opf` ^0.11.0, renderer ^0.9.0, and PPTX ^0.9.0. Named ColorRefs (scheme slots, roles, and `var:<id>`) paint through the published renderer and hex-resolve on export. Payload ids share the slide id namespace for pagination and transfer. Native `schemeClr`, theme write, and `p:hf` remain out of scope.
 
@@ -88,6 +88,21 @@ Note that `session.composeSlide()` and `session.paginateSlide()` measure with th
 
 These APIs were introduced in 0.1.0. Version 0.7.0 requires core 0.10.0 and renderer 0.8.0 for the canvas, including shared accepted geometry, styled/merged cells, rich table values, headers and content-aware row heights. See the OPF repository’s `docs/live-editor.md` for setup, the support matrix and roadmap. `pnpm pack:ecosystem` in that repository also prepares local preview tarballs for coordinated development.
 
+### Entering text editing
+
+One click puts the caret where you click, the way PowerPoint and Google Slides do. Hover outlines a text target; a single press (mouse, pen, or a touch tap) on editable text selects the box, starts inline editing and places the caret at the nearest character boundary to the pointer (correct for wrapped, multi-line, centered and right-aligned text). Press and drag selects the range from the press point to the release point. While editing, a native double-click selects a word, a triple-click a line or paragraph, and a click elsewhere in the text moves the caret; clicking a different text target commits the current edit (an invalid edit still refuses) and enters the new one in the same click. Enter, Space or F2 on a focused target enters with **all** text selected (the keyboard replace convention); `canvas.beginEdit(path)` does the same. Escape leaves editing and keeps the box selected. Images, charts and other non-text targets are unchanged: a click selects, a double-click opens their properties. Layout handles and block controls keep their own pointer handling, and a text press never moves the box.
+
+The gesture is configurable:
+
+```js
+createCanvasEditor(container, { document, textEntry: 'click' }); // default: one click enters
+createCanvasEditor(container, { document, textEntry: 'dblclick' }); // one click selects, a double-click enters
+```
+
+`textEntry: 'dblclick'` keeps the older two-step gesture (select, then double-click) but a double-click now also places the caret at the pointer instead of selecting all text. Hosts and tests that used `dblclick()` and then relied on all text being selected should switch to keyboard entry (focus the target and press Enter) or select explicitly; `locator.dblclick()` on the default canvas now places the caret and then selects the word under it.
+
+Plain-text carets are resolved from the rendered SVG glyphs: each line carries its exact source range (`data-opf-source-start`/`-end` or `data-opf-text-start`/`-end`), so collapsed spaces at wraps, tabs, CRLF sources and bidi isolate marks map to offsets of the input value rather than to glyph indexes. A line whose text does not match its traced source range falls back to a hidden copy of the positioned textarea. Rich text uses its own pointer-to-offset mapping. Mouse and pen enter on press; a touch tap enters on the tap, so scrolling with a finger never starts editing. Right-to-left and CJK use the same per-glyph mapping; real operating-system IME and bidi caret behaviour are not verified here.
+
 The canvas retains canonical SVG glyphs while a transparent native input supplies the caret. Advanced shaping, freeform object positioning, all chart/media treatments, and cross-engine pixel identity remain work in progress. The Source dialog in the playground now provides a live JSON preview; changes are validated before committing.
 
 ## Runtime Policy
@@ -259,7 +274,7 @@ Public npm package publication is handled by `.github/workflows/release.yml` thr
 
 The current checkout uses `@openpresentation/opf/composition` for portable geometry. Slides can select `auto`, `row`, `column`, or `grid`, set weighted tracks, and request path-specific overflow diagnostics. See the sibling OPF repo's `docs/dynamic-composition.md` for the complete contract.
 
-Version 0.10.1 requires `@openpresentation/opf@^0.11.2`. The optional renderer peer requires `@openpresentation/opf-render@^0.11.0` (the font gate gates nothing on a registry without the lazy loaders). Development and coordinated playground export use renderer 0.11.2 and `@openpresentation/opf-pptx@^0.11.1`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
+Version 0.10.2 requires `@openpresentation/opf@^0.11.2` (unchanged since 0.10.0). The optional renderer peer requires `@openpresentation/opf-render@^0.11.0` (the font gate gates nothing on a registry without the lazy loaders). Development and coordinated playground export use renderer 0.11.2 and `@openpresentation/opf-pptx@^0.11.1`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
 
 ## Local interactive demo
 
@@ -298,7 +313,7 @@ Slide insertion does not merge root speakers, organizations, or narrative metada
 
 ### Rich text on the canvas
 
-Select rendered rich text to format it, or double-click a rich text block to type. The toolbar supports character styles, point size, font family, hex color, scheme slots/roles, `var:<id>` references, links, scripts, and selected-text replacement. Plain text payloads offer **Format text** during inline editing. **Edit runs** opens the structured fields; `canvas.editProperties(path)` does the same programmatically. Each action is validated and undoable. Version 0.1.1 supports direct mixed-style typing: double-click to type, drag to select, use Format selection for styles, and commit with Done or Ctrl/Cmd+Enter. Escape cancels. Native input and composition events preserve run metadata; the canonical SVG supplies glyph/caret geometry. The whole session commits as one undo step, with draft undo/redo available while typing. Empty-line caret geometry requires renderer 0.1.1 or later; cross-engine and real operating-system IME verification remain open.
+Select rendered rich text to format it, or click a rich text block to type (see *Entering text editing*). The toolbar supports character styles, point size, font family, hex color, scheme slots/roles, `var:<id>` references, links, scripts, and selected-text replacement. Plain text payloads offer **Format text** during inline editing. **Edit runs** opens the structured fields; `canvas.editProperties(path)` does the same programmatically. Each action is validated and undoable. Version 0.1.1 supports direct mixed-style typing: click to type, drag to select, double-click for a word, triple-click for a paragraph, use Format selection for styles, and commit with Done or Ctrl/Cmd+Enter. Escape cancels. Native input and composition events preserve run metadata; the canonical SVG supplies glyph/caret geometry. The whole session commits as one undo step, with draft undo/redo available while typing. Empty-line caret geometry requires renderer 0.1.1 or later; cross-engine and real operating-system IME verification remain open.
 
 Version 0.7.0: rich input maps the textarea's LF-normalized offsets back to the original source. Typing preserves untouched CRLF/CR endings and surrounding run metadata; newly inserted newlines use the first source line-ending style. The `updateRichTextInput` change offsets are native textarea offsets, while formatting and replacement helpers continue to use original source offsets.
 
@@ -322,7 +337,7 @@ Agents can import `prepareBlockMove` and `listBlockContainers` from `@openpresen
 
 ## Styled and merged table cells
 
-Define cells with `{value, style, rowSpan, colSpan}` and place explicit `null` at covered positions. Inline editing follows the anchor's `.value` path, preserving its style and merge geometry. Double-click a value or focus it and press Enter to edit; the existing text-formatting controls support scalar promotion, rich runs and partial selection. Covered positions are not separate editable targets.
+Define cells with `{value, style, rowSpan, colSpan}` and place explicit `null` at covered positions. Inline editing follows the anchor's `.value` path, preserving its style and merge geometry. Click a value, or focus it and press Enter, to edit; the existing text-formatting controls support scalar promotion, rich runs and partial selection. Covered positions are not separate editable targets.
 
 The core schema rejects overlapping/out-of-bounds spans and hidden content. Model patches can change a span and remove a row atomically; undo restores the complete operation. Styling or restructuring a table remains available through JSON/model edits and the existing structured property forms.
 

package/dist/canvas.d.ts

@@ -43,6 +43,13 @@ export interface CanvasEditorOptions {
    * imports, dimension switches, slide changes, drafts). Without one every document renders at once.
    */
   fonts?: Pick<FontGate, "pending" | "ensure">;
+  /**
+   * How a pointer enters text editing. "click" (default): a single press on editable text starts editing with the caret at the
+   * pressed character, and a press-drag selects a range. "dblclick": a click selects, a double-click enters with the caret at the
+   * pointer. Keyboard entry (Enter, Space, F2) and `beginEdit(path)` always select all text. Non-text targets always open
+   * their properties on double-click.
+   */
+  textEntry?: "click" | "dblclick";
   /** Optional empty host for property forms; defaults to a floating canvas panel. */
   propertiesContainer?: HTMLElement;
   onSelect?: (selection: {
@@ -81,6 +88,7 @@ export interface CanvasEditor {
   /** Add starter content to a slide/group/region, converting implicit content when needed. */
   openInsertMenu(containerPath?: string,index?: number): void;
   select(path: string): void;
+  /** Start editing with all text selected (keyboard entry). Pointer entry places the caret at the pointer instead. */
   beginEdit(path: string): void;
   /** Open structured controls, including rich run fields. */
   editProperties(path: string): boolean;

package/dist/canvas.js

@@ -18,6 +18,7 @@ import {
 import { createBlockControls } from "./block-controls.js";
 import { createLayoutHandles } from "./layout-handles.js";
 import { createRichTextInput } from "./rich-text-input.js";
+import { textInputOffsetAtPoint } from "./text-pointer.js";
 import { createRichTextToolbar } from "./rich-text-toolbar.js";
 import { FONTS_PENDING, fontsPendingError, whenFontsReady } from "./font-gate.js";
 export { getEditableFields } from "./canvas-fields.js";
@@ -75,7 +76,16 @@ export function createCanvasEditor(container, options = {}) {
     selectedPath = null,
     disposed = false,
     frame = 0,
-    committing = false;
+    committing = false,
+    pointerTaken = null,
+    handledPointer = null,
+    stopDrag = null;
+  // How a pointer enters text editing: "click" (default; PowerPoint / Google Slides) puts the caret at the pressed
+  // character on a single press and lets a press-drag select a range; "dblclick" keeps the older double-click gesture
+  // but still places the caret at the pointer. Keyboard entry (Enter, Space, F2) always selects all text.
+  const textEntry = options.textEntry ?? "click";
+  if (textEntry !== "click" && textEntry !== "dblclick")
+    throw new RangeError('textEntry must be "click" or "dblclick".');
   const root = doc.createElement("div"),
     preview = doc.createElement("div"),
     overlay = doc.createElement("div"),
@@ -283,19 +293,29 @@ export function createCanvasEditor(container, options = {}) {
         rect.classList.add("opf-selection");
         node.prepend(rect);
       }
+      node.addEventListener("pointerdown", (event) => pointerDown(event, path));
+      // Some browsers still run mousedown's focus and text-selection defaults after a handled pointerdown.
+      node.addEventListener("mousedown", (event) => { if (pointerTaken === path) event.preventDefault(); });
       node.addEventListener("click", (event) => {
         event.stopPropagation();
         if (event.target.closest("a")) event.preventDefault();
+        // A mouse or pen press already entered editing on pointerdown; this click only completes that gesture.
+        if (pointerTaken === path) { pointerTaken = null; return; }
         if (active && active.path !== path && !commit()) return;
-        choose(path);
+        // A touch tap has no pointerdown entry (a touch press may start a scroll): it enters on the click itself.
+        const kind = editKind(path);
+        if (textEntry === "click" && event.detail > 0 && (kind === "text" || kind === "rich-text")) startEdit(path, { point: event });
+        else choose(path);
       });
       node.addEventListener("dblclick", (event) => {
         event.preventDefault();
         event.stopPropagation();
-        beginEdit(path);
+        const kind = editKind(path);
+        startEdit(path, kind === "text" || kind === "rich-text" ? { point: event } : undefined);
       });
       node.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
+        // Keyboard entry replaces: all text is selected.
+        if (event.key === "Enter" || event.key === " " || event.key === "F2") {
           event.preventDefault();
           event.stopPropagation();
           beginEdit(path);
@@ -434,7 +454,78 @@ export function createCanvasEditor(container, options = {}) {
     // Other text keeps the canonical SVG visible beneath the transparent input.
     target.style.opacity = visibleText ? "0" : "1";
   }
+  // What editing a target opens: inline text ("text"), the rich-text input ("rich-text"), or the properties form.
+  function editKind(path) {
+    const value = editor.get(path), target = getTarget(path);
+    if (value === undefined || !target) return null;
+    if ((typeof value === "string" || typeof value === "number") && target.querySelector("text") && !/\.(image|video)$/.test(path))
+      return "text";
+    if (Array.isArray(value) && target.hasAttribute("data-opf-rich-text")) return "rich-text";
+    return "properties";
+  }
+  // Textarea offset nearest to a client point, from the traced SVG glyphs (see text-pointer.js).
+  function textOffsetAt(edit, clientX, clientY) {
+    let source = edit.input.value;
+    try {
+      if (edit.type === "string") source = parseCanvasValue(edit.input.value, "string", edit.originalValue);
+    } catch { /* fall back to the raw input text */ }
+    return textInputOffsetAtPoint({
+      doc, win, target: getTarget(edit.path), path: edit.path, source, input: edit.input, clientX, clientY,
+    });
+  }
+  function setRange(input, anchor, focus) {
+    input.setSelectionRange(Math.min(anchor, focus), Math.max(anchor, focus), focus < anchor ? "backward" : "forward");
+  }
+  // Press-drag in plain text selects from the press point to the pointer, like PowerPoint. The textarea is not under the
+  // pointer when the press lands on the SVG glyphs, so the range is tracked here.
+  function trackDrag(edit, anchor, event) {
+    stopDrag?.();
+    const id = event.pointerId;
+    const move = (next) => {
+      if (next.pointerId !== id) return;
+      if (active !== edit || !next.buttons) return stop();
+      setRange(edit.input, anchor, textOffsetAt(edit, next.clientX, next.clientY));
+    };
+    const end = (next) => { if (next.pointerId === id) stop(); };
+    const stop = () => {
+      win.removeEventListener("pointermove", move);
+      win.removeEventListener("pointerup", end);
+      win.removeEventListener("pointercancel", end);
+      if (stopDrag === stop) stopDrag = null;
+      if (active === edit) edit.input.focus({ preventScroll: true });
+    };
+    win.addEventListener("pointermove", move);
+    win.addEventListener("pointerup", end);
+    win.addEventListener("pointercancel", end);
+    stopDrag = stop;
+  }
+  // A mouse or pen press on editable text enters editing at that character (touch enters from its click instead).
+  function pointerDown(event, path) {
+    if (handledPointer === event) return;
+    handledPointer = event;
+    if (textEntry !== "click" || disposed || event.button !== 0 || event.pointerType === "touch") return;
+    const edit = active?.path === path ? active : null;
+    if (edit ? edit.kind !== "text" : !["text", "rich-text"].includes(editKind(path))) return;
+    // Own the gesture: no native focus change, text selection or drag while the caret is placed.
+    event.preventDefault();
+    event.stopPropagation();
+    pointerTaken = path;
+    if (edit) {
+      const at = textOffsetAt(edit, event.clientX, event.clientY);
+      setRange(edit.input, at, at);
+      edit.input.focus({ preventScroll: true });
+      trackDrag(edit, at, event);
+      return;
+    }
+    if (active && !commit()) return;
+    startEdit(path, { point: event, drag: true });
+  }
   function beginEdit(path) {
+    startEdit(path);
+  }
+  // entry: undefined selects all text (keyboard and programmatic entry); {point} places the caret at a client point;
+  // {point, drag} also selects while the pressed pointer moves.
+  function startEdit(path, entry) {
     if (disposed) return;
     if (active && active.path === path) return;
     if (active && !commit()) return;
@@ -535,12 +626,16 @@ export function createCanvasEditor(container, options = {}) {
       input.addEventListener("blur", () => {
         if (active?.input === input && !active.composing) commit();
       });
-      input.focus();
-      input.select();
+      input.focus({ preventScroll: !!entry?.point });
+      if (entry?.point) {
+        const at = textOffsetAt(active, entry.point.clientX, entry.point.clientY);
+        setRange(input, at, at);
+        if (entry.drag) trackDrag(active, at, entry.point);
+      } else input.select();
     } else if (Array.isArray(value) && target?.hasAttribute("data-opf-rich-text")) {
       active = {kind:"rich-text",path,base:JSON.stringify(value),valid:true};
       active.rich = createRichTextInput(root, overlay, {
-        path, value, getTarget,
+        path, value, getTarget, selectAll: !entry?.point,
         onInput: queueDraft, onCommit: commit, onCancel: cancel, onError: report,
         onFormat(start,end) {
           if (!commit()) return;
@@ -548,6 +643,7 @@ export function createCanvasEditor(container, options = {}) {
         },
       });
       active.input = active.rich.input;
+      if (entry?.point) active.rich.pointerStart(entry.point);
     } else openProperties(path, value);
   }
   function propertyPatches(edit) {
@@ -828,6 +924,7 @@ export function createCanvasEditor(container, options = {}) {
     active?.rich?.update();
   });
   resize.observe(root);
+  root.addEventListener("pointerdown", () => { pointerTaken = null; }, true);
   root.addEventListener("keydown", (event) => {
     if (
       (event.metaKey || event.ctrlKey) &&
@@ -906,6 +1003,7 @@ export function createCanvasEditor(container, options = {}) {
     },
     destroy() {
       disposed = true;
+      stopDrag?.();
       active?.rich?.destroy();
       richToolbar.destroy();
       layoutHandles.destroy();

package/dist/rich-text-input.js

@@ -2,7 +2,7 @@ import {richTextContent, updateRichTextInput} from './rich-text.js';
 import {textInputMap} from './text-input.js';
 
 /** Native input owns keyboard/IME; caret and selection use the canonical SVG glyphs. */
-export function createRichTextInput(root, overlay, {path, value, getTarget, onInput, onCommit, onCancel, onFormat, onError}) {
+export function createRichTextInput(root, overlay, {path, value, getTarget, onInput, onCommit, onCancel, onFormat, onError, selectAll=true}) {
   const doc=root.ownerDocument, win=doc.defaultView;
   const input=doc.createElement('textarea'), marks=doc.createElement('div'), actions=doc.createElement('div');
   input.className='opf-rich-input';input.value=richTextContent(value);
@@ -16,7 +16,7 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
     button.onmousedown=event=>event.preventDefault();button.onclick=action;actions.append(button);
   }
   overlay.append(marks,input,actions);
-  let current=structuredClone(value), composing=false, change=null, anchor=null, disposed=false, emptyAnchor=null;
+  let current=structuredClone(value), composing=false, change=null, anchor=null, disposed=false, emptyAnchor=null, lastDown=null;
   let history=[{value:structuredClone(current),start:0,end:input.value.length}], historyIndex=0, compositionBase=null;
   const currentMap=()=>textInputMap(richTextContent(current));
   function remember() {
@@ -77,12 +77,29 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
       return !best||distance<best.distance?{...p,distance}:best;
     },null)?.offset??0;
   }
-  function pointerDown(event) {
-    if(event.button!==0||!getTarget(path)?.contains(event.target))return;
+  // The pointer never reaches the hidden input, so double/triple click (word/paragraph) are counted here.
+  function selectUnit(offset,count) {
+    const text=input.value,at=Math.max(0,Math.min(text.length,offset));
+    let a=at,b=at;
+    if(count>=3){a=at>0?text.lastIndexOf('\n',at-1)+1:0;b=text.indexOf('\n',at);if(b<0)b=text.length;}
+    else {
+      const parts=[...new Intl.Segmenter(undefined,{granularity:'word'}).segment(text)],hit=parts.find(p=>p.index<=at&&at<p.index+p.segment.length)??parts.at(-1);
+      if(hit){a=hit.index;b=hit.index+hit.segment.length;}
+    }
+    input.setSelectionRange(a,b,'forward');
+  }
+  function pointerDown(event,entry=false) {
+    if(!entry&&(event.button!==0||!getTarget(path)?.contains(event.target)))return;
     event.preventDefault();event.stopPropagation();
-    const map=currentMap();anchor=event.shiftKey?map.toSource(input.selectionStart):nearest(event);input.focus({preventScroll:true});
-    const end=nearest(event);input.setSelectionRange(map.toInput(Math.min(anchor,end)),map.toInput(Math.max(anchor,end)),end<anchor?'backward':'forward');
-    root.setPointerCapture(event.pointerId);update();
+    const map=currentMap(),repeat=!entry&&!event.shiftKey&&lastDown&&event.timeStamp-lastDown.time<500&&Math.hypot(event.clientX-lastDown.x,event.clientY-lastDown.y)<5;
+    const count=repeat?lastDown.count+1:1;lastDown={time:event.timeStamp,x:event.clientX,y:event.clientY,count};
+    anchor=event.shiftKey&&!entry?map.toSource(input.selectionStart):nearest(event);input.focus({preventScroll:true});
+    const end=nearest(event);
+    if(count>1){anchor=null;selectUnit(map.toInput(end),count);update();return;}
+    input.setSelectionRange(map.toInput(Math.min(anchor,end)),map.toInput(Math.max(anchor,end)),end<anchor?'backward':'forward');
+    // A press keeps extending the range while it moves; a completed click (entry from a tap or double-click) does not.
+    if(event.buttons&&Number.isInteger(event.pointerId))root.setPointerCapture(event.pointerId);else anchor=null;
+    update();
   }
   function pointerMove(event) {
     if(anchor===null)return;event.preventDefault();const end=nearest(event),map=currentMap();
@@ -114,6 +131,6 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
   input.addEventListener('select',update);input.addEventListener('keyup',update);
   input.addEventListener('blur',()=>{if(!disposed&&!composing)onCommit();});
   root.addEventListener('pointerdown',pointerDown,true);root.addEventListener('pointermove',pointerMove);root.addEventListener('pointerup',pointerUp);root.addEventListener('pointercancel',pointerUp);
-  input.focus({preventScroll:true});input.select();update();
-  return {input,update,get value(){return structuredClone(current);},get composing(){return composing;},destroy(){disposed=true;root.removeEventListener('pointerdown',pointerDown,true);root.removeEventListener('pointermove',pointerMove);root.removeEventListener('pointerup',pointerUp);root.removeEventListener('pointercancel',pointerUp);marks.remove();input.remove();actions.remove();}};
+  input.focus({preventScroll:true});if(selectAll)input.select();update();
+  return {input,update,pointerStart:event=>pointerDown(event,true),get value(){return structuredClone(current);},get composing(){return composing;},destroy(){disposed=true;root.removeEventListener('pointerdown',pointerDown,true);root.removeEventListener('pointermove',pointerMove);root.removeEventListener('pointerup',pointerUp);root.removeEventListener('pointercancel',pointerUp);marks.remove();input.remove();actions.remove();}};
 }

package/dist/text-pointer.js

@@ -0,0 +1,180 @@
+import {textInputMap} from './text-input.js';
+
+// Pointer -> caret mapping for the plain-text inline input.
+//
+// The user clicks the canonical SVG glyphs; the native textarea supplies the caret. Offsets are resolved from the SVG
+// text geometry (each rendered line carries its exact source range in `data-opf-source-start/end` or
+// `data-opf-text-start/end`) and converted to textarea offsets with `textInputMap`, so CRLF sources, tabs, collapsed
+// whitespace at wraps and bidi isolate marks all resolve to the input value's offsets, never to a glyph index. A line
+// whose text does not match its traced source range falls back to a hidden mirror of the positioned textarea.
+const SEGMENTER = typeof Intl !== 'undefined' && Intl.Segmenter ? new Intl.Segmenter(undefined, {granularity: 'grapheme'}) : null;
+const STRONG_RTL = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/u;
+const STRONG_LTR = /[\p{L}\p{N}]/u;
+const ISOLATE = /[\u2066-\u2069]/u;
+const graphemes = (text) => SEGMENTER ? [...SEGMENTER.segment(text)].map((part) => ({index: part.index, text: part.segment})) : [...text].map((char, i, all) => ({index: all.slice(0, i).join('').length, text: char}));
+
+const numeric = (node, ...names) => {
+  for (const name of names) {
+    const value = node.getAttribute(name);
+    if (value !== null && value !== '' && Number.isFinite(Number(value))) return Number(value);
+  }
+  return null;
+};
+
+const rangeOf = (node) => {
+  const start = numeric(node, 'data-opf-source-start', 'data-opf-text-start'), end = numeric(node, 'data-opf-source-end', 'data-opf-text-end');
+  return start === null || end === null || end < start ? null : {node, start, end};
+};
+
+/**
+ * Rendered text lines of a target with their source ranges, in document order. A line is a traced `text` element; its
+ * segments are the traced `tspan`s inside it (tabs, script or direction runs) or the element itself.
+ */
+function traceLines(target, path) {
+  const lines = [];
+  for (const node of target.querySelectorAll('text')) {
+    const own = node.getAttribute('data-opf-path');
+    if (own !== null && own !== path) continue;
+    const line = rangeOf(node);
+    if (!line) continue;
+    const nested = [...node.querySelectorAll('tspan')].map(rangeOf).filter(Boolean);
+    lines.push({node, start: line.start, end: line.end, segments: nested.length ? nested : [line]});
+  }
+  return lines;
+}
+
+/** Source offset of every UTF-16 index of a rendered line, or null when the line is not its traced source slice. */
+function alignLine(text, source, start, end) {
+  const slice = source.slice(start, end), positions = [];
+  let at = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (slice[at] === text[i]) { positions.push(start + at); at++; }
+    else if (ISOLATE.test(text[i])) positions.push(start + at);
+    else return null;
+  }
+  return at === slice.length ? positions : null;
+}
+
+function isRtl(win, node, segment) {
+  if (STRONG_RTL.test(segment)) return true;
+  if (STRONG_LTR.test(segment)) return false;
+  return win.getComputedStyle(node).direction === 'rtl';
+}
+
+/** Caret boundaries of one traced line: `{offset, x}` in client pixels, offsets in source coordinates. */
+function lineBoundaries(doc, win, line, source) {
+  const result = [], range = doc.createRange();
+  for (const segment of line.segments) {
+    const {node} = segment, text = node.textContent, positions = alignLine(text, source, segment.start, segment.end);
+    if (!positions) return null;
+    if (!text) {
+      const matrix = node.getScreenCTM?.();
+      if (!matrix) return null;
+      result.push({offset: segment.start, x: new win.DOMPoint(Number(node.getAttribute('x')) || 0, 0).matrixTransform(matrix).x});
+      continue;
+    }
+    const child = node.firstChild;
+    if (child?.nodeType !== 3) return null;
+    for (const part of graphemes(text)) {
+      // Directional isolate marks are zero-width and not source characters; their rects are not caret positions.
+      if (ISOLATE.test(part.text)) continue;
+      range.setStart(child, part.index);
+      range.setEnd(child, part.index + part.text.length);
+      const box = range.getBoundingClientRect(), rtl = isRtl(win, node, part.text), after = part.index + part.text.length;
+      result.push({offset: positions[part.index], x: rtl ? box.right : box.left});
+      result.push({offset: after < positions.length ? positions[after] : segment.end, x: rtl ? box.left : box.right});
+    }
+  }
+  return result.length ? result : null;
+}
+
+/** Vertical centre of a rendered line in client pixels. */
+function lineCentre(win, line) {
+  const box = line.node.getBoundingClientRect();
+  if (box.height > 0 || box.width > 0) return box.top + box.height / 2;
+  const matrix = line.node.getScreenCTM?.(), size = Number(line.node.getAttribute('font-size')) || 16;
+  if (!matrix) return Infinity;
+  const point = new win.DOMPoint(0, (Number(line.node.getAttribute('y')) || 0) - size * 0.3).matrixTransform(matrix);
+  return point.y;
+}
+
+function nearestOffset(points, clientX) {
+  let best = null, distance = Infinity;
+  for (const point of points) {
+    const gap = Math.abs(point.x - clientX);
+    if (gap < distance) { best = point; distance = gap; }
+  }
+  return best?.offset ?? null;
+}
+
+function traceOffset({doc, win, target, path, source, clientX, clientY}) {
+  const lines = traceLines(target, path);
+  if (!lines.length) return null;
+  let line = null, gap = Infinity;
+  for (const candidate of lines) {
+    const distance = Math.abs(lineCentre(win, candidate) - clientY);
+    if (distance < gap) { line = candidate; gap = distance; }
+  }
+  if (!line) return null;
+  const points = lineBoundaries(doc, win, line, source);
+  return points ? nearestOffset(points, clientX) : null;
+}
+
+/** Nearest caret offset in a hidden copy of the positioned textarea (line breaks, wrapping and alignment included). */
+function mirrorOffset({doc, win, input, clientX, clientY}) {
+  const parent = input.parentNode, host = parent?.getBoundingClientRect?.();
+  if (!parent || !host) return null;
+  const box = input.getBoundingClientRect(), style = win.getComputedStyle(input), mirror = doc.createElement('div');
+  mirror.setAttribute('aria-hidden', 'true');
+  mirror.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;margin:0;padding:0;border:0;overflow:hidden;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;left:${box.left - host.left}px;top:${box.top - host.top}px;width:${box.width}px`;
+  for (const name of ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontStretch', 'fontKerning', 'fontVariantLigatures', 'lineHeight', 'letterSpacing', 'wordSpacing', 'textAlign', 'tabSize', 'direction', 'textTransform', 'textIndent'])
+    mirror.style[name] = style[name];
+  const value = input.value;
+  mirror.textContent = value;
+  parent.append(mirror);
+  try {
+    const child = mirror.firstChild;
+    if (!child) return 0;
+    const range = doc.createRange(), flat = [], align = style.textAlign;
+    const lineStart = align === 'right' || align === 'end' ? box.right : align === 'center' ? (box.left + box.right) / 2 : box.left;
+    const pitch = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;
+    for (const part of graphemes(value)) {
+      range.setStart(child, part.index);
+      range.setEnd(child, part.index + part.text.length);
+      const rect = range.getBoundingClientRect(), rtl = isRtl(win, mirror, part.text), newline = part.text === '\n' || part.text === '\r\n';
+      if (!rect.height && !rect.width) continue;
+      const cy = rect.top + rect.height / 2;
+      flat.push({offset: part.index, x: rtl ? rect.right : rect.left, cy});
+      if (!newline) flat.push({offset: part.index + part.text.length, x: rtl ? rect.left : rect.right, cy});
+    }
+    if (value.endsWith('\n')) {
+      const last = flat.findLast((point) => point.offset === value.length - 1);
+      flat.push({offset: value.length, x: lineStart, cy: (last?.cy ?? box.top) + pitch});
+    }
+    let cy = null, gap = Infinity;
+    for (const point of flat) {
+      const distance = Math.abs(point.cy - clientY);
+      if (distance < gap - 0.5) { cy = point.cy; gap = distance; }
+    }
+    const row = flat.filter((point) => Math.abs(point.cy - cy) <= pitch / 2);
+    return nearestOffset(row, clientX);
+  } finally {
+    mirror.remove();
+  }
+}
+
+/**
+ * Textarea offset (LF-normalized, the coordinates `selectionStart` uses) nearest to a client point.
+ * `source` is the canonical string the SVG was rendered from; `target` is the traced canvas target of `path`.
+ */
+export function textInputOffsetAtPoint({doc, win, target, path, source, input, clientX, clientY}) {
+  const map = textInputMap(source);
+  const clamp = (offset) => Math.max(0, Math.min(input.value.length, offset));
+  let sourceOffset = null;
+  try {
+    if (target) sourceOffset = traceOffset({doc, win, target, path, source, clientX, clientY});
+  } catch { sourceOffset = null; }
+  if (sourceOffset !== null && sourceOffset >= 0 && sourceOffset <= source.length) return clamp(map.toInput(sourceOffset));
+  const mirrored = mirrorOffset({doc, win, input, clientX, clientY});
+  return clamp(mirrored ?? input.value.length);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -87,7 +87,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs && node --check src/font-gate.js && node --check test/font-gate.mjs && node --check test/playground-ensure-fonts.mjs && node --check test/canvas-fonts-browser.mjs",
+    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs && node --check src/font-gate.js && node --check test/font-gate.mjs && node --check test/playground-ensure-fonts.mjs && node --check test/canvas-fonts-browser.mjs && node --check src/text-pointer.js && node --check test/click-entry-browser.mjs",
     "test": "npm run build && npm run check:font-hotlinks && node test/accepted-text.mjs && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/gallery-font-roles.mjs && node test/default-font-scheme.mjs && node test/presentation-ids.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs && node test/json-source.mjs && node test/json-options.mjs && node test/switches.mjs && node test/switches-export.mjs && node test/placeholder-selection.mjs && node test/exact-source.mjs && node test/font-gate.mjs",
     "validate": "node scripts/validate-package.mjs",
     "test:packed": "node test/packed-install.mjs",
@@ -98,6 +98,7 @@
     "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-source.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
+    "test:click-entry-browser": "node test/click-entry-browser.mjs",
     "test:metric-browser": "node test/metric-browser.mjs",
     "test:rich-input-browser": "node test/rich-input-browser.mjs",
     "test:json": "npm run build && node test/json-source.mjs && node test/json-options.mjs",