@openpresentation/opf-editor 0.1.0 → 0.1.2

package/README.md

@@ -34,7 +34,7 @@ Load the same font bytes into the browser using `loadBrowserFontRegistry` from `
 
 These APIs are included in version 0.1.0 and require core 0.4.0 and renderer 0.1.0 for the canvas. 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.
 
-The canvas retains canonical SVG glyphs while a transparent native input supplies the caret. Complete rich-text formatting, freeform drag/resize, 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.
+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
 
@@ -207,7 +207,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 select all of it. The toolbar supports character styles, point size, font family, hex color, 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. Continuous rich-text typing with a mixed-style caret remains under development.
+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, 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.
 
 Headless applications and agents can import `formatRichTextRange`, `replaceRichTextRange`, and `richTextContent` from `@openpresentation/opf-editor/rich-text`. The helpers preserve surrounding run metadata and accept UTF-16 offsets on whole grapheme boundaries. A null format value removes an override. Apply the returned value through the editor session or validate the resulting document before saving.
 

package/dist/canvas.js

@@ -17,6 +17,7 @@ import {
 } from "./canvas-fields.js";
 import { createBlockControls } from "./block-controls.js";
 import { createLayoutHandles } from "./layout-handles.js";
+import { createRichTextInput } from "./rich-text-input.js";
 import { createRichTextToolbar } from "./rich-text-toolbar.js";
 export { getEditableFields } from "./canvas-fields.js";
 
@@ -64,6 +65,7 @@ export function createCanvasEditor(container, options = {}) {
     notice.textContent = "";
   };
   const richToolbar = createRichTextToolbar(root, { editor, report, beforeChange: commit,
+    onTyping: beginEdit,
     onProperties(path) { if (commit()) openProperties(path, editor.get(path)); },
     validateChange(path, value) {
       renderSvg(createCanvasDraft(editor.document, path, value), {...renderOptions, slideIndex});
@@ -142,7 +144,7 @@ export function createCanvasEditor(container, options = {}) {
       // Prefer the containing group over its duplicate text/shape trace attributes.
       if (
         !node.matches("g,image") ||
-        (node.matches("g") && !node.querySelector("text,image,rect,path"))
+        (node.matches("g") && !node.querySelector("text,image,rect,path") && !node.hasAttribute("data-opf-rich-text"))
       )
         continue;
       seen.add(path);
@@ -154,8 +156,10 @@ export function createCanvasEditor(container, options = {}) {
         `Edit ${path.split(".").at(-1)}: ${["string", "number"].includes(typeof value) ? String(value).slice(0, 80) : "content properties"}`,
       );
       if (node.matches("g")) {
-        const bounds = node.getBBox(),
-          rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
+        let bounds = node.getBBox();
+        const lines = JSON.parse(node.getAttribute("data-opf-rich-lines") ?? "[]");
+        if (!bounds.width && !bounds.height && lines.length) bounds = {x:lines[0].x,y:lines[0].y,width:Number(node.getAttribute("data-opf-box-width"))||8,height:lines.reduce((sum,line)=>sum+line.height,0)};
+        const rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
         for (const [key, value] of Object.entries({
           x: bounds.x - 4,
           y: bounds.y - 4,
@@ -194,6 +198,7 @@ export function createCanvasEditor(container, options = {}) {
     layoutHandles.update(document, geometry);
     blockControls.update(document, geometry);
     if (active?.kind === "text") positionInput();
+    if (active?.kind === "rich-text") active.rich?.update();
     options.onRender?.({
       document,
       slideIndex,
@@ -223,7 +228,7 @@ export function createCanvasEditor(container, options = {}) {
         return;
       }
       try {
-        const value = parseCanvasValue(active.input.value, active.type);
+        const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type);
         const draft = createCanvasDraft(editor.document, active.path, value);
         clearNotice();
         active.valid = true;
@@ -376,7 +381,16 @@ export function createCanvasEditor(container, options = {}) {
       input.focus();
       input.select();
     } else if (Array.isArray(value) && target?.hasAttribute("data-opf-rich-text")) {
-      richToolbar.selectAll(path);
+      active = {kind:"rich-text",path,base:JSON.stringify(value),valid:true};
+      active.rich = createRichTextInput(root, overlay, {
+        path, value, getTarget,
+        onInput: queueDraft, onCommit: commit, onCancel: cancel, onError: report,
+        onFormat(start,end) {
+          if (!commit()) return;
+          if(start===end)richToolbar.selectAll(path);else richToolbar.selectRange(path,start,end);
+        },
+      });
+      active.input = active.rich.input;
     } else openProperties(path, value);
   }
   function propertyPatches(edit) {
@@ -565,7 +579,7 @@ export function createCanvasEditor(container, options = {}) {
     if (blockControls.editingPath) return false;
     if (!committing && layoutHandles.editingPath) return layoutHandles.commit();
     if (committing || !active) return true;
-    if (active.composing) return false;
+    if (active.composing || active.rich?.composing) return false;
     if (JSON.stringify(editor.get(active.path)) !== active.base) {
       report(
         new Error(
@@ -578,13 +592,14 @@ export function createCanvasEditor(container, options = {}) {
     const edit = active;
     try {
       let value;
-      if (edit.kind === "text")
+      if (edit.kind === "rich-text") value = edit.rich.value;
+      else if (edit.kind === "text")
         value = parseCanvasValue(edit.input.value, edit.type);
       else value = propertyDraft(edit);
-      if (edit.kind === "text")
-        createCanvasDraft(editor.document, edit.path, value);
+      if (edit.kind === "text" || edit.kind === "rich-text")
+        renderSvg(createCanvasDraft(editor.document, edit.path, value), {...renderOptions,slideIndex});
       committing = true;
-      if (edit.kind === "text" && JSON.stringify(value) !== edit.base)
+      if ((edit.kind === "text" || edit.kind === "rich-text") && JSON.stringify(value) !== edit.base)
         editor.set(edit.path, value, { source: "canvas", rejectInvalid: true });
       if (edit.kind === "properties") {
         const patches = propertyPatches(edit).filter(
@@ -600,6 +615,7 @@ export function createCanvasEditor(container, options = {}) {
       }
       committing = false;
       active = null;
+      edit.rich?.destroy();
       overlay.replaceChildren();
       options.propertiesContainer?.replaceChildren();
       clearNotice();
@@ -617,8 +633,9 @@ export function createCanvasEditor(container, options = {}) {
     if (blockControls.editingPath) { blockControls.cancel(); render(); return; }
     blockControls.cancel();
     if (layoutHandles.editingPath) { layoutHandles.cancel(clear); return; }
-    const path = active?.path;
+    const path = active?.path, rich = active?.rich;
     active = null;
+    rich?.destroy();
     if (frame) {
       win.cancelAnimationFrame(frame);
       frame = 0;
@@ -654,6 +671,7 @@ export function createCanvasEditor(container, options = {}) {
   });
   const resize = new win.ResizeObserver(() => {
     if (active?.kind === "text") positionInput();
+    active?.rich?.update();
   });
   resize.observe(root);
   root.addEventListener("keydown", (event) => {
@@ -734,6 +752,7 @@ export function createCanvasEditor(container, options = {}) {
     },
     destroy() {
       disposed = true;
+      active?.rich?.destroy();
       richToolbar.destroy();
       layoutHandles.destroy();
       blockControls.destroy();

package/dist/rich-text-input.js

@@ -0,0 +1,117 @@
+import {richTextContent, updateRichTextInput} from './rich-text.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}) {
+  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);
+  input.setAttribute('aria-label','Edit rich text inline');input.spellcheck=true;
+  input.style.cssText='position:absolute;width:1px;padding:0;border:0;opacity:0;pointer-events:none;resize:none;overflow:hidden;z-index:3';
+  marks.className='opf-rich-selection';marks.setAttribute('aria-hidden','true');marks.style.cssText='position:absolute;inset:0;pointer-events:none';
+  actions.style.cssText='position:absolute;bottom:8px;left:8px;display:flex;gap:6px;pointer-events:auto;z-index:4';
+  for(const [label,action] of [['Format selection',()=>onFormat(input.selectionStart,input.selectionEnd)],['Done',onCommit]]) {
+    const button=doc.createElement('button');button.type='button';button.textContent=label;
+    button.style.cssText='padding:6px 10px;background:#fff;color:#574774;border:1px solid #d5cce5;border-radius:5px';
+    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 history=[{value:structuredClone(current),start:0,end:input.value.length}], historyIndex=0, compositionBase=null;
+  function remember() {
+    history.splice(historyIndex+1);history.push({value:structuredClone(current),start:input.selectionStart,end:input.selectionEnd});historyIndex++;
+  }
+  function fragments() { return [...(getTarget(path)?.querySelectorAll('text[data-opf-text-start]')??[])]; }
+  function rect(node,start,end) {
+    const range=doc.createRange();range.setStart(node.firstChild,start);range.setEnd(node.firstChild,end);return range.getBoundingClientRect();
+  }
+  function boundaries() {
+    const result=[];
+    for(const node of fragments()) {
+      if(!node.firstChild)continue;
+      const start=Number(node.dataset.opfTextStart),text=node.textContent;
+      for(const part of new Intl.Segmenter(undefined,{granularity:'grapheme'}).segment(text)) {
+        const box=rect(node,part.index,part.index+part.segment.length),rtl=win.getComputedStyle(node).direction==='rtl';
+        result.push({offset:start+part.index,x:rtl?box.right:box.left,y:box.top,height:box.height,node});
+        result.push({offset:start+part.index+part.segment.length,x:rtl?box.left:box.right,y:box.top,height:box.height,node});
+      }
+    }
+    const target=getTarget(path),matrix=target?.getScreenCTM();
+    if(matrix)for(const line of JSON.parse(target.dataset.opfRichLines??'[]')) {
+      if(line.start!==line.end)continue;
+      const point=new win.DOMPoint(line.x,line.y).matrixTransform(matrix);
+      result.push({offset:line.start,x:point.x,y:point.y,height:line.height*Math.hypot(matrix.c,matrix.d)});
+    }
+    return result;
+  }
+  function update() {
+    if(disposed)return;marks.replaceChildren();
+    const origin=root.getBoundingClientRect(),start=input.selectionStart,end=input.selectionEnd;
+    const append=(box,caret=false)=>{
+      const mark=doc.createElement('div');mark.className=caret?'opf-rich-caret':'opf-rich-range';
+      mark.style.cssText=`position:absolute;left:${box.left-origin.left}px;top:${box.top-origin.top}px;width:${caret?1.5:box.width}px;height:${Math.max(12,box.height)}px;background:${caret?(box.color??'#6551ba'):'#8975d955'}`;
+      marks.append(mark);
+    };
+    if(start!==end)for(const node of fragments()) {
+      const a=Math.max(0,start-Number(node.dataset.opfTextStart)),b=Math.min(node.textContent.length,end-Number(node.dataset.opfTextStart));
+      if(a<b&&node.firstChild)append(rect(node,a,b));
+    }
+    const points=boundaries();
+    if(points.length)emptyAnchor=points[0];
+    const offset=input.selectionDirection==='backward'?start:end;
+    // Prefer the beginning of the next fragment at wrapped line boundaries.
+    const point=points.findLast(p=>p.offset===offset)??points.reduce((best,p)=>!best||Math.abs(p.offset-offset)<Math.abs(best.offset-offset)?p:best,null);
+    const target=emptyAnchor?{left:emptyAnchor.x,top:emptyAnchor.y,width:1,height:emptyAnchor.height}:getTarget(path)?.getBoundingClientRect();
+    const box=point?{left:point.x,top:point.y,width:1,height:point.height,color:point.node?win.getComputedStyle(point.node).fill:undefined}:target;
+    if(box) {
+      if(start===end)append(box,true);
+      input.style.left=`${box.left-origin.left}px`;input.style.top=`${box.top-origin.top}px`;input.style.height=`${Math.max(20,box.height)}px`;
+      if(point?.node)input.style.font=win.getComputedStyle(point.node).font;
+    }
+  }
+  function nearest(event) {
+    return boundaries().reduce((best,p)=>{
+      const vertical=Math.max(p.y-event.clientY,0,event.clientY-p.y-p.height);
+      const distance=vertical*vertical*100+Math.pow(p.x-event.clientX,2);
+      return !best||distance<best.distance?{...p,distance}:best;
+    },null)?.offset??0;
+  }
+  function pointerDown(event) {
+    if(event.button!==0||!getTarget(path)?.contains(event.target))return;
+    event.preventDefault();event.stopPropagation();
+    anchor=event.shiftKey?input.selectionStart:nearest(event);input.focus({preventScroll:true});
+    const end=nearest(event);input.setSelectionRange(Math.min(anchor,end),Math.max(anchor,end),end<anchor?'backward':'forward');
+    root.setPointerCapture(event.pointerId);update();
+  }
+  function pointerMove(event) {
+    if(anchor===null)return;event.preventDefault();const end=nearest(event);
+    input.setSelectionRange(Math.min(anchor,end),Math.max(anchor,end),end<anchor?'backward':'forward');update();
+  }
+  function pointerUp(event) {if(anchor!==null){anchor=null;if(root.hasPointerCapture(event.pointerId))root.releasePointerCapture(event.pointerId);}}
+  function undo(direction) {
+    const next=historyIndex+direction;if(next<0||next>=history.length)return;
+    historyIndex=next;const saved=history[next];current=structuredClone(saved.value);input.value=richTextContent(current);
+    input.setSelectionRange(saved.start,saved.end);onInput(current);update();
+  }
+  input.addEventListener('beforeinput',event=>{
+    if(event.inputType==='historyUndo'||event.inputType==='historyRedo'){event.preventDefault();undo(event.inputType==='historyUndo'?-1:1);return;}
+    change={start:input.selectionStart,end:input.selectionEnd,inputType:event.inputType};
+    if(!composing){history[historyIndex].start=input.selectionStart;history[historyIndex].end=input.selectionEnd;}
+  });
+  input.addEventListener('input',()=>{
+    try{current=updateRichTextInput(current,input.value,change);change=null;if(!composing)remember();onInput(current);update();}
+    catch(error){input.value=richTextContent(current);change=null;onError(error);}
+  });
+  input.addEventListener('compositionstart',()=>{composing=true;compositionBase=JSON.stringify(current);});
+  input.addEventListener('compositionend',()=>{composing=false;if(JSON.stringify(current)!==compositionBase)remember();onInput(current);update();});
+  input.addEventListener('keydown',event=>{
+    if(event.isComposing||composing)return;
+    if((event.metaKey||event.ctrlKey)&&event.key.toLowerCase()==='z'){event.preventDefault();event.stopPropagation();undo(event.shiftKey?1:-1);}
+    else if(event.key==='Escape'){event.preventDefault();event.stopPropagation();onCancel();}
+    else if(event.key==='Enter'&&(event.metaKey||event.ctrlKey)){event.preventDefault();onCommit();}
+  });
+  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();}};
+}

package/dist/rich-text-toolbar.js

@@ -1,7 +1,7 @@
 import {richTextContent, formatRichTextRange, replaceRichTextRange} from './rich-text.js';
 
 /** Native SVG selection stays on the exact rendered glyphs; no HTML reflow. */
-export function createRichTextToolbar(root, {editor, report, beforeChange, onProperties, validateChange, onChange}) {
+export function createRichTextToolbar(root, {editor, report, beforeChange, onProperties, onTyping, validateChange, onChange}) {
   const doc = root.ownerDocument, win = doc.defaultView;
   const toolbar = doc.createElement('div');
   toolbar.className = 'opf-rich-toolbar';
@@ -89,6 +89,7 @@ export function createRichTextToolbar(root, {editor, report, beforeChange, onPro
   replacement.onkeydown=event=>{if(event.key==='Enter'){event.preventDefault();try{apply(null,replacement.value);}catch(error){report(error);}}};
   button('Replace text',()=>apply(null,replacement.value));
   button('Reset style',()=>apply(Object.fromEntries(['bold','italic','underline','strikethrough','superscript','subscript','color','fontSize','fontFamily','link'].map(key=>[key,null]))));
+  button('Edit text',()=>{const path=selected?.path;hide();if(path)onTyping?.(path);});
   button('Edit runs',()=>{const path=selected?.path;hide();if(path)onProperties?.(path);});
   button('Done',()=>{hide();win.getSelection()?.removeAllRanges();});
   const status=doc.createElement('span');status.style.fontSize='11px';toolbar.append(status);
@@ -115,7 +116,11 @@ export function createRichTextToolbar(root, {editor, report, beforeChange, onPro
   doc.addEventListener('selectionchange',selectionChanged);
   const unsubscribe=editor.subscribe(()=>{if(!restoring)hide();});
   hide();
-  return {hide,selectAll(path) {
+  function selectRange(path,start,end) {
+    const value=editor.get(path);if(!Array.isArray(value)||start>=end)return false;
+    selected={path,start,end,base:JSON.stringify(value)};restore();sync();return true;
+  }
+  return {hide,selectRange,selectAll(path) {
     const value=editor.get(path);if(!Array.isArray(value))return false;
     const end=richTextContent(value).length;if(!end)return false;
     selected={path,start:0,end,base:JSON.stringify(value)};restore();sync();return true;

package/dist/rich-text.d.ts

@@ -8,3 +8,5 @@ export declare function richTextContent(value:string|TextRun[]):string;
 /** Nonempty UTF-16 range on grapheme boundaries; null removes an override. */
 export declare function formatRichTextRange(value:string|TextRun[],start:number,end:number,format:TextRunFormat):TextRun[];
 export declare function replaceRichTextRange(value:string|TextRun[],start:number,end:number,replacement:string):TextRun[];
+/** Preserve run metadata across a native input change, on grapheme boundaries. */
+export declare function updateRichTextInput(value:string|TextRun[],nextText:string,change?:{start:number;end:number;inputType?:string}):TextRun[];

package/dist/rich-text.js

@@ -69,3 +69,45 @@ export function replaceRichTextRange(value, start, end, replacement) {
   if (!inserted && replacement) result.push(replacement);
   return result.length ? result : [''];
 }
+
+/** Map a native plain-text input change back onto styled runs without flattening them. */
+export function updateRichTextInput(value, nextText, change) {
+  const previous = richTextContent(value);
+  if (typeof nextText !== 'string') throw new TypeError('Input text must be a string.');
+  if (previous === nextText) return structuredClone(runs(value));
+  if (!nextText) return [piece(runs(value)[0] ?? "", "")];
+  const segments = text => [...new Intl.Segmenter(undefined, {granularity:'grapheme'}).segment(text)].map(part => part.segment);
+  const before = segments(previous), after = segments(nextText);
+  let prefix = 0, suffix = 0;
+  while (prefix < before.length && prefix < after.length && before[prefix] === after[prefix]) prefix++;
+  while (suffix < before.length-prefix && suffix < after.length-prefix && before[before.length-1-suffix] === after[after.length-1-suffix]) suffix++;
+  let start = before.slice(0,prefix).join('').length;
+  let end = previous.length-before.slice(before.length-suffix).join('').length;
+  let replacement = after.slice(prefix,after.length-suffix).join('');
+  if (change && Number.isInteger(change.start) && Number.isInteger(change.end)) {
+    let a = change.start, b = change.end;
+    const removed = previous.length-nextText.length;
+    if (a === b && removed > 0) {
+      if (/Backward$/.test(change.inputType ?? '')) a -= removed;
+      else if (/Forward$/.test(change.inputType ?? '')) b += removed;
+    }
+    const left = previous.slice(0,a), right = previous.slice(b);
+    if (a >= 0 && b >= a && b <= previous.length && nextText.length >= left.length+right.length && nextText.startsWith(left) && nextText.endsWith(right)) {
+      // Validate exact native selection boundaries before trusting their affinity.
+      try {
+        range(value,a,b,true);
+        start=a;end=b;replacement=nextText.slice(left.length,nextText.length-right.length);
+      } catch { /* Native deletion can split a cluster; use the whole-grapheme diff. */ }
+    }
+  }
+  const result = replaceRichTextRange(value,start,end,replacement), compact = [];
+  const style = run => typeof run === 'string' ? null : Object.fromEntries(Object.entries(run).filter(([key]) => key !== 'text').sort(([a],[b]) => a.localeCompare(b)));
+  for (const run of result) {
+    const last = compact.at(-1);
+    if (last !== undefined && JSON.stringify(style(last)) === JSON.stringify(style(run))) {
+      if (typeof last === 'string') compact[compact.length-1] += run;
+      else last.text += run.text;
+    } else compact.push(run);
+  }
+  return compact;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -81,14 +81,17 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.4.0"
+    "@openpresentation/opf": "^0.4.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.1.0"
+    "@openpresentation/opf-render": "^0.1.1 || ^0.2.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
       "optional": true
     }
+  },
+  "devDependencies": {
+    "@openpresentation/opf-render": "0.2.0"
   }
 }