@openpresentation/opf-editor 0.5.0 → 0.6.0

package/README.md

@@ -2,7 +2,7 @@
 
 Embeddable local editor primitives for Open Presentation Format documents. The package turns traced `@openpresentation/opf-render` SVG output into JSON-path-aware edits, validates OPF after each change, and records undo/redo as JSON Patch operations.
 
-Version 0.5.0 uses core 0.8.0 and renderer 0.6.0. `paginateSlide` records a one-page readability-policy change in undo history; repeating an unchanged result is a no-op. Quote preview uses accepted shared body/source geometry. The local example verifies source editing, pagination, export and reimport with PPTX 0.6.0; native reimport preserves quote text as editable blocks but loses its OPF quote structure, typography and readability policy.
+Version 0.6.0 uses core 0.9.0 and renderer 0.7.0. Code source/metadata edits preserve line endings, literal tabs and cancellation/undo through accepted trace targets. Committed preview uses shared quote/code geometry; the active source textarea uses native browser editing. `paginateSlide` records a one-page readability-policy change in undo history, and an unchanged repeat is a no-op. Coordinated examples use PPTX 0.7.0 for exact code source/metadata recovery. Native formatting, font theme and geometry are not restored; quotes still import as editable text blocks with structure and readability-policy loss.
 
 ## Scope
 
@@ -34,7 +34,7 @@ await canvas.ready;
 
 Load the same font bytes into the browser using `loadBrowserFontRegistry` from `@openpresentation/opf-render/fonts-browser` before mounting. The host owns font URLs, storage and collaboration. `onDraft` provides live document drafts; the session only changes on commit. Escape cancels. Concurrent edits to the selected payload cancel a stale draft.
 
-These APIs were introduced in 0.1.0. Version 0.5.0 requires core 0.8.0 and renderer 0.6.0 for the canvas, including shared quote 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.
+These APIs were introduced in 0.1.0. Version 0.6.0 requires core 0.9.0 and renderer 0.7.0 for the canvas, including shared quote/code 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.
 
 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.
 
@@ -174,7 +174,7 @@ This repo does not require an npm automation token when Trusted Publishing is co
 
 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.3.0 requires `@openpresentation/opf@^0.6.0`. The optional renderer peer requires `@openpresentation/opf-render@^0.4.0`. Clean registry installs support the new 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.6.0 requires `@openpresentation/opf@^0.9.0`. The optional renderer peer requires `@openpresentation/opf-render@^0.7.0`. 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
 

package/dist/canvas-fields.js

@@ -36,7 +36,7 @@ export function getEditableFields(value, path) {
   walk(value, root, []);
   return { fields, arrays };
 }
-export function parseCanvasValue(text, type) {
+export function parseCanvasValue(text, type, original) {
   if (type === "number") {
     if (!String(text).trim() || !Number.isFinite(Number(text)))
       throw new Error("Enter a finite number.");
@@ -47,7 +47,20 @@ export function parseCanvasValue(text, type) {
     if (text === "null") return null;
     throw new Error("This field must be null.");
   }
-  return text;
+  return type === 'string' && typeof original === 'string' ? preserveTextLineEndings(original,String(text)) : text;
+}
+
+/** Textareas normalize line endings; retain unchanged source bytes around an edit. */
+export function preserveTextLineEndings(original, input) {
+  const normalized=original.replace(/\r\n|\r/g,'\n'),next=input.replace(/\r\n|\r/g,'\n');
+  if(normalized===next)return original;
+  let prefix=0,suffix=0;
+  while(prefix<normalized.length&&prefix<next.length&&normalized[prefix]===next[prefix])prefix++;
+  while(suffix<normalized.length-prefix&&suffix<next.length-prefix&&normalized[normalized.length-1-suffix]===next[next.length-1-suffix])suffix++;
+  const offsets=[0];
+  for(let i=0;i<original.length;i++){if(original[i]==='\r'&&original[i+1]==='\n')i++;offsets.push(i+1);}
+  const ending=/\r\n|\r|\n/.exec(original)?.[0]??'\n';
+  return original.slice(0,offsets[prefix])+next.slice(prefix,next.length-suffix).replaceAll('\n',ending)+original.slice(offsets[normalized.length-suffix]);
 }
 export function createCanvasDraft(document, path, value) {
   const draft = applyJsonPatch(

package/dist/canvas.js

@@ -52,7 +52,7 @@ export function createCanvasEditor(container, options = {}) {
   notice.hidden = true;
   const style = doc.createElement("style");
   style.textContent =
-    ".opf-canvas-preview>svg{display:block;width:100%;height:auto}.opf-canvas [data-canvas-target]{cursor:text}.opf-canvas .opf-inline-input::selection{background:#8975d933;color:transparent}.opf-canvas [data-canvas-target]:focus{outline:none}.opf-canvas [data-canvas-target]:hover>.opf-selection{stroke:#9c90df}.opf-canvas [data-canvas-selected]>.opf-selection,.opf-canvas [data-canvas-target]:focus-visible>.opf-selection{stroke:#7765d0}.opf-canvas button:focus-visible,.opf-canvas textarea:focus-visible,.opf-canvas input:focus-visible{outline:2px solid #8170d5;outline-offset:2px}";
+    ".opf-canvas-preview>svg{display:block;width:100%;height:auto}.opf-canvas [data-canvas-target]{cursor:text}.opf-canvas .opf-inline-input::selection{background:#8975d933;color:var(--opf-inline-selection-color,transparent)}.opf-canvas [data-canvas-target]:focus{outline:none}.opf-canvas [data-canvas-target]:hover>.opf-selection{stroke:#9c90df}.opf-canvas [data-canvas-selected]>.opf-selection,.opf-canvas [data-canvas-target]:focus-visible>.opf-selection{stroke:#7765d0}.opf-canvas button:focus-visible,.opf-canvas textarea:focus-visible,.opf-canvas input:focus-visible{outline:2px solid #8170d5;outline-offset:2px}";
   root.append(style, preview, overlay, notice);
   container.replaceChildren(root);
   const report = (error) => {
@@ -135,6 +135,8 @@ export function createCanvasEditor(container, options = {}) {
       const value = getValueAtPath(document, path);
       if (
         seen.has(path) ||
+        node.getAttribute('data-opf-generated') === 'true' ||
+        (node.hasAttribute('data-opf-code-container') && typeof value === 'string') ||
         (!item && !node.matches("g") && !node.matches("image")) ||
         value === undefined ||
         path === `slides.${slideIndex}` ||
@@ -157,6 +159,7 @@ export function createCanvasEditor(container, options = {}) {
       );
       if (node.matches("g")) {
         let bounds = node.getBBox();
+        if (!bounds.width && !bounds.height && node.hasAttribute('data-opf-code-role')) bounds={x:Number(node.dataset.opfBoxX),y:Number(node.dataset.opfBoxY),width:Number(node.dataset.opfBoxWidth),height:Number(node.dataset.opfBoxHeight)};
         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");
@@ -228,7 +231,7 @@ export function createCanvasEditor(container, options = {}) {
         return;
       }
       try {
-        const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type);
+        const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type, active.originalValue);
         const draft = createCanvasDraft(editor.document, active.path, value);
         clearNotice();
         active.valid = true;
@@ -283,7 +286,7 @@ export function createCanvasEditor(container, options = {}) {
       fontWeight: font.fontWeight,
       fontStyle: font.fontStyle,
       lineHeight: `${lineHeight * scale}px`,
-      color: active.composing ? font.fill : "transparent",
+      color: active.composing || active.isCode ? font.fill : "transparent",
       caretColor: font.fill,
       textAlign: anchor === "middle" ? "center" : anchor === "end" ? "right" : "left",
       width: `${width * scale}px`,
@@ -293,8 +296,10 @@ export function createCanvasEditor(container, options = {}) {
     });
     active.input.style.left = `${svgRect.left - rootRect.left + (left - viewBox.x) * scale}px`;
     active.input.style.top = `${svgRect.top - rootRect.top + (y - viewBox.y) * scale}px`;
-    // Keep the canonical SVG visible. The transparent input supplies native selection and caret.
-    target.style.opacity = active.composing ? "0" : "1";
+    // When the input supplies visible text, its selected text needs the same fill.
+    active.input.style.setProperty('--opf-inline-selection-color',active.composing || active.isCode ? font.fill : 'transparent');
+    // Other text keeps the canonical SVG visible beneath the transparent input.
+    target.style.opacity = active.composing || active.isCode ? "0" : "1";
   }
   function beginEdit(path) {
     if (disposed) return;
@@ -321,18 +326,22 @@ export function createCanvasEditor(container, options = {}) {
       input.className = "opf-inline-input";
       input.value = String(value);
       input.setAttribute("aria-label", `Edit ${path.split(".").at(-1)} inline`);
-      input.spellcheck = true;
+      const isCode=text.hasAttribute('data-opf-code-role');
+      input.spellcheck = !isCode;
       input.style.cssText =
         "position:absolute;pointer-events:auto;resize:none;border:0;outline:1px solid #8975d9;outline-offset:4px;margin:0;padding:0;background:transparent;overflow:hidden;min-height:0;box-shadow:none;border-radius:0;white-space:pre-wrap;overflow-wrap:break-word;box-sizing:border-box;z-index:2";
       active = {
         kind: "text",
         path,
         base: JSON.stringify(value),
+        originalValue:value,
+        isCode,
         type: typeof value,
         input,
         valid: true,
       };
       overlay.append(input);
+      if(isCode){input.style.background='#111827';input.style.tabSize='4';input.style.overflow='auto';}
       // Only offer rich text where the canonical schema accepts TextRun[].
       if (typeof value === "string") {
         try {
@@ -366,7 +375,9 @@ export function createCanvasEditor(container, options = {}) {
       });
       input.addEventListener("keydown", (event) => {
         if (event.isComposing) return;
-        if (event.key === "Escape") {
+        if (isCode && event.key === 'Tab' && !event.shiftKey) {
+          event.preventDefault();input.setRangeText('\t',input.selectionStart,input.selectionEnd,'end');input.dispatchEvent(new win.Event('input',{bubbles:true}));
+        } else if (event.key === "Escape") {
           event.preventDefault();
           event.stopPropagation();
           cancel();
@@ -400,6 +411,7 @@ export function createCanvasEditor(container, options = {}) {
       value: parseCanvasValue(
         field.type === "boolean" ? input.checked : input.value,
         field.type,
+        field.value,
       ),
     }));
   }
@@ -594,7 +606,7 @@ export function createCanvasEditor(container, options = {}) {
       let value;
       if (edit.kind === "rich-text") value = edit.rich.value;
       else if (edit.kind === "text")
-        value = parseCanvasValue(edit.input.value, edit.type);
+        value = parseCanvasValue(edit.input.value, edit.type, edit.originalValue);
       else value = propertyDraft(edit);
       if (edit.kind === "text" || edit.kind === "rich-text")
         renderSvg(createCanvasDraft(editor.document, edit.path, value), {...renderOptions,slideIndex});

package/dist/rich-text-toolbar.js

@@ -102,7 +102,7 @@ export function createRichTextToolbar(root, {editor, report, beforeChange, onPro
   function endpoint(node,offset) {
     if(node?.nodeType!==3) return null;
     const element=node.parentElement?.closest('text[data-opf-text-start]');
-    if(!element||!root.contains(element))return null;
+    if(!element||!root.contains(element)||element.hasAttribute('data-opf-code-role'))return null;
     return {path:element.closest('[data-opf-path]')?.getAttribute('data-opf-path'),offset:Number(element.dataset.opfTextStart)+offset};
   }
   function selectionChanged() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -81,13 +81,14 @@
     "test:packed": "node test/packed-install.mjs",
     "prepack": "npm run build",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && node test/playground-pptx.mjs"
+    "test:playground": "npm run build:playground && node test/playground-pptx.mjs",
+    "test:code-browser": "node test/code-browser.mjs"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.8.0"
+    "@openpresentation/opf": "^0.9.0"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.6.0"
+    "@openpresentation/opf-render": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -95,8 +96,8 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/opf-pptx": "0.6.0",
-    "@openpresentation/opf-render": "0.6.0",
+    "@openpresentation/opf-pptx": "0.7.0",
+    "@openpresentation/opf-render": "0.7.0",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }