@openpresentation/opf-editor 0.4.0 → 0.6.0

package/README.md

@@ -2,6 +2,8 @@
 
 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.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
 
 - Package: `@openpresentation/opf-editor`
@@ -14,7 +16,7 @@ Embeddable local editor primitives for Open Presentation Format documents. The p
 - JSON Patch state transitions with inverse patches for undo/redo
 - Optional DOM controls plus React and Svelte bindings in separate embeddable entry points
 
-## Live browser canvas (preview)
+## Live browser canvas
 
 The new `@openpresentation/opf-editor/canvas` entry provides a framework-independent SVG canvas with inline text/table-cell editing, live validated drafts, undo/redo, cancellation, and structured property forms for charts, lists, metrics, quotes, code, timelines and images. Mount it in a DOM container:
 
@@ -32,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.4.0 requires core 0.7.0 and renderer 0.5.0 for the canvas, including 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.
 
@@ -172,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
 
@@ -193,7 +195,11 @@ The browser-safe `/transfer` export provides `parseOpfTransfer`, `serializeOpfTr
 
 The `/galleries` export provides `loadOpfGallery` and `loadOpfGalleryItem`, accepting an AbortSignal and injectable fetch. Registries use `{name, items:[{id, name, category, opf}]}` for inline documents or `opfUrl` for a relative JSON URL. Public PPTX.gallery registry descriptors are supported. Cross-origin endpoints need CORS; requests omit credentials/referrers, cap responses at 20 MB, and keep automatic item requests on the configured gallery origin. Documents should include inline catalog records; arbitrary external catalog sources are not automatically fetched.
 
-The playground includes Copy OPF and Add OPF dialogs with paste, file/drop, gallery search, and URL tabs. Preview before inserting or opening. Custom registries persist in local storage; defaults are configured in `examples/galleries.json`. Copy permissions may require using the Select all fallback. Pasting within text fields keeps normal text editing. Cmd/Ctrl+Shift+C opens copying and Cmd/Ctrl+O opens file import.
+The playground includes Copy OPF and Import dialogs with paste, file/drop, gallery search, and URL tabs. Files accept OPF JSON and PowerPoint `.pptx` up to 20 MB. PPTX conversion runs locally using `@openpresentation/opf-pptx`; review the converted preview and diagnostics before inserting slides or opening a presentation. Applying an import is one undoable edit. Custom registries persist in local storage; defaults are configured in `examples/galleries.json`. Copy permissions may require using the Select all fallback. Pasting within text fields keeps normal text editing. Cmd/Ctrl+Shift+C opens copying and Cmd/Ctrl+O opens file import.
+
+The **PowerPoint** button commits the current canvas draft and prepares an editable `.pptx` download from that snapshot, using the preview's text measurements. Conversion diagnostics remain visible in the download dialog. Missing/remote images require an explicit host resolver or embedded data; export does not silently fetch them or omit them. Save OPF separately to retain the complete original source. Native fonts must be installed in PowerPoint; the download does not embed font binaries. Arbitrary native positions and unsupported PowerPoint features can change during reimport.
+
+Run `npm ci`, `npm run build:playground`, then serve `artifacts/playground` with a local static server. This example uses the published core/render/PPTX packages and this checkout's editor source; it does not require an account, AI provider or paid service. `npm run test:playground` builds and executes a real browser flow (local Edge on Windows, installed Chromium in CI): author JSON, inline edit, export a native merged table, validate/reimport the actual downloaded file, undo/redo, save OPF and reject malformed input without changing the document. It is browser behavior evidence, not a claim of native PowerPoint raster equivalence.
 
 Slide insertion does not merge root speakers, organizations, or narrative metadata. Use Open as a presentation for the full source document. Some gallery presets contain minimal examples. The root OPF workspace's `docs/live-editor.md` documents the complete demo and npm API workflow.
 

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/index.js

@@ -244,7 +244,9 @@ export function createEditorSession(input, options = {}) {
     paginateSlide(slideIndex, options = {}, meta = {}) {
       const resolved = resolveCompositionOptions(document, slideIndex, options);
       const pagination = paginateSlide(document.slides[slideIndex], { ...resolved, reservedIds: document.slides.map(slide => slide.id).filter(Boolean) });
-      if (pagination.slides.length === 1) return { change: null, pagination };
+      // Pagination can persist a readability policy without adding a page. Commit
+      // that change too, so preview/export use the same minimum that was evaluated.
+      if (pagination.slides.length === 1 && jsonEqual(pagination.slides[0], document.slides[slideIndex])) return { change: null, pagination };
       const slides = [...document.slides];
       slides.splice(slideIndex, 1, ...pagination.slides);
       const change = editor.set('slides', slides, { ...meta, rejectInvalid: true, pagination: pagination.pages });

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.4.0",
+  "version": "0.6.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -75,16 +75,20 @@
   "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/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",
+    "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/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",
     "test": "npm run build && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs",
     "validate": "node scripts/validate-package.mjs",
-    "prepack": "npm run build"
+    "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:code-browser": "node test/code-browser.mjs"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.7.0"
+    "@openpresentation/opf": "^0.9.0"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.5.0"
+    "@openpresentation/opf-render": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -92,6 +96,9 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/opf-render": "0.5.0"
+    "@openpresentation/opf-pptx": "0.7.0",
+    "@openpresentation/opf-render": "0.7.0",
+    "esbuild": "0.28.2",
+    "playwright": "1.63.0"
   }
 }