@openpresentation/opf-editor 0.7.0 → 0.7.1

package/README.md

@@ -1,5 +1,7 @@
 # OPF Editor
 
+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.7.0 and this checkout require Node 24 (`24.x`). Use `.nvmrc` for local development. Earlier published versions retain their original engine declarations. Browser entrypoints remain browser-safe; native application compatibility is verified separately.
 
 Version 0.7.0 forwards effective title alignment and shared outline placement options through composition and explicit pagination. Use the same `textMeasurement` and `textRasterPadding` in canvas rendering and export. Accepted rich-text trace origins support selection, caret placement and undo. See the [source contract and limits](https://github.com/OpenPresentation/opf/blob/f94125a1ff95bf0974a055fe1c081d348dad54f2/docs/plans/text-placement.md); native PowerPoint fidelity remains separate.
@@ -30,7 +32,9 @@ The host owns the source draft, OPF validation, slide preview, persistence and s
 
 The control provides indentation, paired quotes/brackets, folding shortcuts, search, undo/redo, JSON syntax diagnostics and explicit formatting (`Cmd/Ctrl+Shift+F`). Enter at the end of a nonempty string array item supplies indentation, quotes and commas. Other Enter positions use ordinary JSON indentation. Source offsets are UTF-16 in the original authored string. Existing CRLF, CR and LF spellings survive ordinary edits and undo; new typed lines use the first existing separator. Paste retains the text delivered by the browser clipboard event. Explicit formatting deliberately standardizes whitespace, preserving JSON values and numeric lexemes.
 
-Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Document catalog records override already-loaded records, which override built-ins; the actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs` replaces the host's loaded context and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI; the host can use the pure `/json-options` helpers, checking that `context.source` still matches before replacing its token with `control.api.replace`.
+Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Document catalog records override already-loaded records, which override built-ins; the actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs` replaces the host's loaded context and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI.
+
+In version 0.7.1, layout choices add blank payloads for missing declared placeholders, preserving existing content. Repeated slots use separate blocks; subtitle slots use `subtitle`, and metric slots use `{ "metric": { "value": "", "label": "" } }`. Charts receive the smallest valid data scaffold rather than invented numeric values. Existing positioned content stays in its regions; additional body slots append inside the last region. Non-layout options still change only their value. Custom menus must apply the full source returned by `replaceFieldOption`, or use `fieldOptionEdit(context, value)` and pass its `from`, `to`, and `insert` to `control.api.replace` as one undoable edit. Always check that `context.source` still matches the editor first. Version 0.7.0 only changed the selected token. Version 0.7.1 requires core 0.10.1 for metric, quote and timeline placeholder contracts.
 
 Run `npm run test:json` and `npm run test:json-browser` for the focused model and offline browser checks. The browser runner also accepts a report path followed by a clean installed consumer directory. These checks cover the JSON control; renderer, native PowerPoint and production adoption remain separate acceptance steps.
 
@@ -206,7 +210,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.7.0 requires `@openpresentation/opf@^0.10.0`. The optional renderer peer requires `@openpresentation/opf-render@^0.8.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.
+Version 0.7.1 requires `@openpresentation/opf@^0.10.1`. The optional renderer peer requires `@openpresentation/opf-render@^0.8.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
 

package/dist/canvas.js

@@ -136,12 +136,13 @@ export function createCanvasEditor(container, options = {}) {
       if (
         seen.has(path) ||
         node.getAttribute('data-opf-generated') === 'true' ||
+        node.closest('[data-opf-furniture-generated="true"]') ||
         (node.hasAttribute('data-opf-code-container') && typeof value === 'string') ||
         (node.hasAttribute('data-opf-metric-container') && ['string','number'].includes(typeof value)) ||
         (!item && !node.matches("g") && !node.matches("image")) ||
         value === undefined ||
         path === `slides.${slideIndex}` ||
-        path.includes(".design.")
+        (path.includes(".design.")&&!node.closest('[data-opf-furniture-editable="true"]'))
       )
         continue;
       // Prefer the containing group over its duplicate text/shape trace attributes.
@@ -265,7 +266,8 @@ export function createCanvasEditor(container, options = {}) {
     const metricLayout=geometry.items.find(item=>item.metricLayout?.parts.some(part=>part.path===active.path))?.metricLayout;
     const metricPart=metricLayout?.parts.find(part=>part.path===active.path);
     const timelinePart=geometry.items.find(item=>item.timelineLayout?.parts.some(part=>part.path===active.path))?.timelineLayout?.parts.find(part=>part.path===active.path);
-    const internalPart=metricPart??timelinePart;
+    const furniturePart=geometry.furniture?.parts.find(part=>part.type==='text'&&part.path===active.path);
+    const internalPart=metricPart??timelinePart??furniturePart;
     const allText = target.querySelectorAll("text");
     const lineHeight = internalPart?.fit?.lineHeight ?? (
       allText.length > 1
@@ -294,7 +296,7 @@ export function createCanvasEditor(container, options = {}) {
       lineHeight: `${lineHeight * scale}px`,
       color: visibleText ? font.fill : "transparent",
       caretColor: font.fill,
-      textAlign: timelinePart?.alignment ?? metricLayout?.alignment ?? (anchor === "middle" ? "center" : anchor === "end" ? "right" : "left"),
+      textAlign: furniturePart?.alignment ?? timelinePart?.alignment ?? metricLayout?.alignment ?? (anchor === "middle" ? "center" : anchor === "end" ? "right" : "left"),
       width: `${width * scale}px`,
       height: `${Math.max(lineHeight, allText.length * lineHeight) * scale + 2}px`,
       minHeight: "0",
@@ -335,6 +337,7 @@ export function createCanvasEditor(container, options = {}) {
       const isCode=text.hasAttribute('data-opf-code-role');
       const isMetric=text.hasAttribute('data-opf-metric-role');
       const isTimeline=!!text.closest('[data-opf-timeline-role]');
+      const isFurniture=!!text.closest('[data-opf-furniture-editable="true"]');
       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";
@@ -352,7 +355,7 @@ export function createCanvasEditor(container, options = {}) {
       overlay.append(input);
       if(isCode){input.style.background='#111827';input.style.tabSize='4';input.style.overflow='auto';}
       if(isMetric){input.style.tabSize='4';input.style.overflow='auto';}
-      if(isTimeline)input.style.tabSize='4';
+      if(isTimeline||isFurniture)input.style.tabSize='4';
       // Only offer rich text where the canonical schema accepts TextRun[].
       if (typeof value === "string") {
         try {

package/dist/index.js

@@ -19,7 +19,7 @@ function resolveCompositionOptions(document, slideIndex, options = {}) {
       const reference = slide.design?.fontScheme ?? document.design?.fontScheme ?? theme?.fontScheme ?? "roboto";
       const id = typeof reference === "string" ? reference : reference.id;
       const fontScheme = {...(document.catalogs?.fontSchemes?.records?.find(record=>record.id===id) ?? bundledCatalogs.fontSchemes.find(record=>record.id===id)),...(typeof reference === "object" ? reference : {})};
-      return { ...resolveCanvasDimensions(slide.design?.dimensions ?? document.design?.dimensions ?? theme?.dimensions), fonts:resolveFontFamilies(fontScheme), contentAlignment:slide.design?.contentAlignment??document.design?.contentAlignment, titleAlignment:slide.design?.titleAlignment??document.design?.titleAlignment, contentBox:slide.design?.contentBox??document.design?.contentBox, ...options, layout, slideIndex };
+      return { ...resolveCanvasDimensions(slide.design?.dimensions ?? document.design?.dimensions ?? theme?.dimensions), fonts:resolveFontFamilies(fontScheme), contentAlignment:slide.design?.contentAlignment??document.design?.contentAlignment, titleAlignment:slide.design?.titleAlignment??document.design?.titleAlignment, contentBox:slide.design?.contentBox??document.design?.contentBox, presentation:document, ...options, layout, slideIndex };
 }
 
 export const packageName = "@openpresentation/opf-editor";

package/dist/json-menu.js

@@ -1,4 +1,4 @@
-import {getJsonFieldContext,replaceFieldOption} from './json-options.js';
+import {getJsonFieldContext,fieldOptionEdit} from './json-options.js';
 let nextMenuId=0;
 
 /** Optional DOM menu; hosts may provide their own onOptions renderer instead. */
@@ -35,7 +35,7 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   function resize(){close();}
   function choose(option){
     if(api.getValue()!==source){close();return;}
-    try{replaceFieldOption(context,option.value);api.replace(context.offset,context.offset+context.length,JSON.stringify(option.value));close();api.focus();}
+    try{const edit=fieldOptionEdit(context,option.value);api.replace(edit.from,edit.to,edit.insert);close();api.focus();}
     catch(cause){error.hidden=false;error.textContent=cause.message;}
   }
   function highlight(){

package/dist/json-options.d.ts

@@ -13,6 +13,8 @@ export interface JsonFieldOption {
   layoutGroup?: 'Current layout' | 'Same placeholders' | 'Compatible placeholders' | 'Different counts' | 'Other layouts' | 'Unspecified placeholders';
   /** Declared placeholder types and counts, not a rendering guarantee. */
   placeholders?: string;
+  /** Declared kinds in layout order, used to create missing blank content. */
+  placeholderTypes?: string[];
   related?: boolean;
 }
 export interface JsonFieldContext {
@@ -29,5 +31,7 @@ export interface JsonFieldContext {
 }
 /** Null for invalid JSON or a field with no categorical choices. */
 export declare function getJsonFieldContext(source: string, position: number, loadedCatalogs?: JsonCatalogContext): JsonFieldContext | null;
-/** Replace only the token. Hosts must reject a context whose source is stale. */
+/** Replace the token and add missing layout payloads. Hosts must reject stale sources. */
 export declare function replaceFieldOption(context: JsonFieldContext, value: JsonOptionValue): string;
+/** Minimal single replacement for atomic source-editor undo. */
+export declare function fieldOptionEdit(context: JsonFieldContext, value: JsonOptionValue): {from:number;to:number;insert:string};

package/dist/json-options.js

@@ -1,7 +1,8 @@
 import { catalogKinds, catalogSchemaNames, schemas, validateCatalogRecord, validatePresentation } from "@openpresentation/opf";
 import { getCatalogOptions } from "./index.js";
 import { schemaAtPath, schemaVariants } from "./schema.js";
-import { findNodeAtOffset, getNodePath, parseTree } from "jsonc-parser";
+import { applyEdits, findNodeAtLocation, findNodeAtOffset, getNodePath, modify, parseTree } from "jsonc-parser";
+import { populateLayoutPlaceholders } from "./layout-placeholders.js";
 function catalogFor(description) {
     return catalogKinds.find(kind => description.includes(`catalogs.${kind}`)
         || new RegExp(`\\b${kind}['’]? catalog`).test(description));
@@ -18,8 +19,8 @@ function placeholderSummary(types) {
         return "Placeholders not specified";
     if (!types.length)
         return "No placeholders";
-    const labels = { title: "Title", subtitle: "Subtitle", text: "Text", list: "List", picture: "Image", chart: "Chart", table: "Table", code: "Code", media: "Media" };
-    const order = ["title", "subtitle", "text", "list", "picture", "chart", "table", "code", "media"];
+    const labels = { title: "Title", subtitle: "Subtitle", text: "Text", metric: "Metric", list: "List", picture: "Image", chart: "Chart", table: "Table", code: "Code", media: "Video", quote: "Quote", timeline: "Timeline", tag: "Tag", diagram: "Image" };
+    const order = ["title", "subtitle", "text", "metric", "list", "picture", "chart", "table", "code", "media", "quote", "timeline", "tag", "diagram"];
     return [...new Set(types)].sort((a, b) => order.indexOf(a) - order.indexOf(b)).map(type => {
         const count = types.filter(value => value === type).length;
         return `${labels[type] ?? type}${count > 1 ? ` × ${count}` : ""}`;
@@ -45,6 +46,7 @@ function describeOptions(choices, records, current, catalog) {
         if (catalog !== "layouts")
             continue;
         const types = layoutTypes(option.value === current ? currentRecord : records.get(String(option.value)));
+        option.placeholderTypes = records.get(String(option.value))?.placeholders?.map(placeholder => placeholder.type);
         option.placeholders = placeholderSummary(types);
         const same = types && currentTypes && signature(types) === signature(currentTypes);
         const equivalent = types && currentTypes && signature(compatible(types)) === signature(compatible(currentTypes));
@@ -145,12 +147,47 @@ export function getJsonFieldContext(source, position, loadedCatalogs = {}) {
 export function replaceFieldOption(context, value) {
     if (!context.options.some(option => option.value === value))
         throw new Error("This choice is no longer available.");
-    const next = context.source.slice(0, context.offset) + JSON.stringify(value) + context.source.slice(context.offset + context.length);
+    let next = context.source.slice(0, context.offset) + JSON.stringify(value) + context.source.slice(context.offset + context.length);
     const document = JSON.parse(next);
     if (context.path.reduce((current, key) => current?.[key], document) !== value)
         throw new Error("This field has a duplicate key. Resolve it in the JSON before choosing an option.");
-    const result = validatePresentation(document);
+    const types = context.options.find(option => option.value === value).placeholderTypes;
+    if (value !== context.value && types && context.catalog === 'layouts' && context.path.length === 3
+        && context.path[0] === 'slides' && context.path[2] === 'layout' && validatePresentation(document).valid) {
+        const populated = populateLayoutPlaceholders(document, context.path[1], types);
+        next = updateSource(next, document, populated);
+    }
+    const result = validatePresentation(JSON.parse(next));
     if (!result.valid && validatePresentation(JSON.parse(context.source)).valid)
         throw new Error(result.errors[0]?.message ?? "This option is not valid here.");
     return next;
 }
+
+// Keep existing scalar spellings and unrelated source bytes when adding slots.
+function updateSource(source, before, after) {
+    const indent = source.match(/^[\t ]+(?=\S)/m)?.[0] ?? '  ';
+    const formattingOptions = {insertSpaces: !indent.includes('\t'), tabSize: indent.length, eol: source.includes('\r\n') ? '\r\n' : '\n'};
+    function visit(a, b, path) {
+        if (JSON.stringify(a) === JSON.stringify(b)) return;
+        if (a && b && typeof a === 'object' && typeof b === 'object' && !Array.isArray(a) && !Array.isArray(b)) {
+            for (const key of new Set([...Object.keys(a), ...Object.keys(b)])) visit(a[key], b[key], [...path, key]);
+        } else if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+            b.forEach((value, index) => visit(a[index], value, [...path, index]));
+        } else {
+            const node = findNodeAtLocation(parseTree(source), path);
+            if (node && b !== undefined) source = source.slice(0, node.offset) + JSON.stringify(b) + source.slice(node.offset + node.length);
+            else source = applyEdits(source, modify(source, path, b, {formattingOptions}));
+        }
+    }
+    visit(before, after, []);
+    return source;
+}
+
+/** One source edit so layout changes and new slots share one undo step. */
+export function fieldOptionEdit(context, value) {
+    const next = replaceFieldOption(context, value), source = context.source;
+    let from = 0, to = source.length, end = next.length;
+    while (from < to && from < end && source[from] === next[from]) from++;
+    while (to > from && end > from && source[to - 1] === next[end - 1]) { to--; end--; }
+    return {from, to, insert: next.slice(from, end)};
+}

package/dist/layout-placeholders.js

@@ -0,0 +1,56 @@
+import {listBlockContainers,prepareBlockInsert} from './blocks.js';
+
+const payloadFields=['text','items','bullets','image','video','chart','table','code','metric','quote','timeline'];
+const headingFields=new Set(['title','subtitle','tag']);
+const fields={text:'text',list:'items',picture:'image',media:'video',diagram:'image',chart:'chart',table:'table',code:'code',metric:'metric',quote:'quote',timeline:'timeline'};
+const region=key=>/^(?:(?:top|middle|bottom)(?:\+(?:top|middle|bottom))*(?::(?:left|center|right)(?:\+(?:left|center|right))*)?|(?:left|center|right)(?:\+(?:left|center|right))*)$/.test(key);
+
+function emptyPayload(field){
+  if(field==='items')return [];
+  if(field==='chart')return {type:'bar',data:{columns:['',''],rows:[['',null]]}};
+  if(field==='table')return {rows:[]};
+  if(field==='metric')return {value:'',label:''};
+  if(field==='quote')return {text:'',attribution:''};
+  if(field==='timeline')return {events:[{when:'',what:''}]};
+  return '';
+}
+
+/** Supply authored slots without replacing content, metadata or region placement. */
+export function populateLayoutPlaceholders(document,slideIndex,types){
+  let next=structuredClone(document),slide=next.slides[slideIndex];
+  const counts=new Map();
+  function count(host){
+    if(!host||typeof host!=='object')return;
+    if(Array.isArray(host.blocks)){host.blocks.forEach(count);return;}
+    for(const field of payloadFields)if(Object.hasOwn(host,field)){
+      // Bullet text occupies a text slot; rich-text runs are one payload.
+      const key=field==='bullets'?'text':field;
+      counts.set(key,(counts.get(key)??0)+1);
+    }
+  }
+  const regions=Object.keys(slide).filter(region);
+  if(regions.length)regions.forEach(key=>count(slide[key]));else count(slide);
+  for(const type of types){
+    if(headingFields.has(type)){
+      if(!Object.hasOwn(slide,type))slide[type]='';
+      continue;
+    }
+    const field=fields[type];
+    if(!field)continue;
+    const remaining=counts.get(field)??0;
+    if(remaining){counts.set(field,remaining-1);continue;}
+    const value=emptyPayload(field);
+    // Distinct implicit root payloads can coexist. Repeated kinds need blocks.
+    if(!regions.length&&!Array.isArray(slide.blocks)&&!slide.type&&!Object.hasOwn(slide,field))slide[field]=value;
+    else {
+      // Keep positioned content in its region. Append to the last outer region,
+      // rather than creating root blocks that would hide the existing regions.
+      const path=regions.length?`/slides/${slideIndex}/${regions.at(-1)}`:`/slides/${slideIndex}`;
+      const containers=listBlockContainers(next,{slideIndex,includeImplicit:true});
+      if(!containers.some(container=>container.path===path))throw new Error('This slide has no editable content container for the new placeholder.');
+      next=prepareBlockInsert(next,path,{[field]:value}).document;
+      slide=next.slides[slideIndex];
+    }
+  }
+  return next;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -106,11 +106,11 @@
     "@codemirror/state": "6.7.4",
     "@codemirror/view": "6.43.11",
     "@lezer/highlight": "1.2.3",
-    "@openpresentation/opf": "^0.10.0",
+    "@openpresentation/opf": "^0.10.1",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.8.0"
+    "@openpresentation/opf-render": "^0.8.1"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -118,8 +118,8 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/opf-pptx": "0.8.0",
-    "@openpresentation/opf-render": "0.8.0",
+    "@openpresentation/opf-pptx": "0.8.1",
+    "@openpresentation/opf-render": "0.8.1",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }