@openpresentation/opf-editor 0.26.1 → 0.26.3

package/dist/source-syntax.js

@@ -0,0 +1,81 @@
+// The syntax problems of a JSON text, as findings (artifacts/source-editor/VALIDATOR-HINTS.md, sections 5 and 6): one per cause, each with the range
+// the squiggle covers, a plain-words message, what could come next and the quick fixes. Duplicate keys are found here too.
+import { parse as parseJsonc, parseTree, printParseErrorCode } from "jsonc-parser";
+import { analyzeJsonSyntax } from "@openpresentation/opf/source";
+import { normalizeFinding } from "./source-findings.js";
+import { lineColumn } from "./source-ranges.js";
+
+const isObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const ERRORS = { InvalidSymbol: "Invalid symbol", InvalidNumberFormat: "Invalid number", PropertyNameExpected: "Property name expected", ValueExpected: "Value expected", ColonExpected: "Colon expected", CommaExpected: "Comma expected", CloseBraceExpected: "Closing brace expected", CloseBracketExpected: "Closing bracket expected", EndOfFileExpected: "End of file expected", InvalidCommentToken: "Comments are not allowed in JSON", UnexpectedEndOfComment: "Unexpected end of comment", UnexpectedEndOfString: "Unexpected end of string", UnexpectedEndOfNumber: "Unexpected end of number", InvalidUnicode: "Invalid unicode escape", InvalidEscapeCharacter: "Invalid escape character", InvalidCharacter: "Invalid character" };
+
+/**
+ * The syntax problems of `text` (empty when it is a JSON object): one finding per root cause, `{ ruleId, message, next, range: { from, to },
+ * line, column, editFixes }`, by core's recovery analyzer (`@openpresentation/opf/source`).
+ */
+export function analyzeSyntax(text) {
+  // A valid object is the common case on every keystroke: the engine's parser answers that at once.
+  try { if (isObject(JSON.parse(text))) return []; } catch { /* Analyze. */ }
+  const found = analyzeJsonSyntax(text).map((problem) => ({
+    ruleId: "opf/json-syntax",
+    message: problem.message,
+    next: problem.next,
+    range: { from: problem.range.offset, to: problem.range.offset + problem.range.length },
+    line: problem.range.line,
+    column: problem.range.column,
+    ...(problem.path ? { problemPath: problem.path } : {}),
+    editFixes: problem.fixes.map((fix) => ({
+      id: fix.id, title: fix.title, safe: fix.safe,
+      edits: fix.edits.map((edit) => ({ from: edit.offset, to: edit.offset + edit.length, insert: edit.insert })),
+      ...(fix.caret !== undefined ? { caret: fix.caret } : {}),
+      ...(fix.action ? { action: fix.action, format: fix.format } : {}),
+    })),
+  }));
+  if (found.length) return found;
+  const errors = [];
+  parseJsonc(text, errors, { allowTrailingComma: false, disallowComments: true });
+  if (!errors.length) return [];
+  const first = errors[0];
+  return [{ ruleId: "opf/json-syntax", message: `${ERRORS[printParseErrorCode(first.error)] ?? printParseErrorCode(first.error)}.`, range: { from: first.offset, to: first.offset + Math.max(1, first.length) }, line: lineColumn(text, first.offset).line }];
+}
+
+/** The edit that removes property `property` of `object`: it and the comma that joined it to its neighbor. */
+function removeProperty(object, property) {
+  const list = object.children ?? [], at = list.indexOf(property);
+  if (at < list.length - 1) return [{ from: property.offset, to: list[at + 1].offset, insert: "" }];
+  if (at > 0) { const before = list[at - 1]; return [{ from: before.offset + before.length, to: property.offset + property.length, insert: "" }]; }
+  return [{ from: property.offset, to: property.offset + property.length, insert: "" }];
+}
+
+/** Every duplicate object key of a JSON text that parses, as findings that mark the later occurrence (`related` is the earlier one). */
+export function findDuplicateKeys(text) {
+  const root = parseTree(text);
+  const out = [];
+  const walk = (node, path) => {
+    if (node.type === "object") {
+      const seen = new Map();
+      for (const property of node.children ?? []) {
+        const key = property.children?.[0];
+        if (!key) continue;
+        if (seen.has(key.value)) {
+          const first = seen.get(key.value);
+          const firstKey = first.children[0];
+          out.push(normalizeFinding({
+            path: `/${[...path, key.value].map((part) => String(part).replaceAll("~", "~0").replaceAll("/", "~1")).join("/")}`,
+            message: `Duplicate key "${key.value}". Remove the repeated key.`,
+            ruleId: "opf/duplicate-key",
+            range: { from: key.offset, to: key.offset + key.length },
+            related: [{ from: firstKey.offset, to: firstKey.offset + firstKey.length }],
+            editFixes: [
+              { id: "remove-first", title: "Remove the first", edits: removeProperty(node, first) },
+              { id: "remove-second", title: "Remove the second", edits: removeProperty(node, property) },
+            ],
+            line: lineColumn(text, key.offset).line,
+          }, "syntax"));
+        } else seen.set(key.value, property);
+        if (property.children?.[1]) walk(property.children[1], [...path, key.value]);
+      }
+    } else if (node.type === "array") (node.children ?? []).forEach((child, index) => walk(child, [...path, index]));
+  };
+  if (root) walk(root, []);
+  return out;
+}

package/dist/styles.css

@@ -3655,6 +3655,54 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   border-radius: var(--opf-ui-radius-md);
 }
 
+/* The live region next to the code: read by screen readers, never seen. */
+.opf-source-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* The documentation cards: beside the selected suggestion and over a key or a value. */
+:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .opf-doc,
+.opf-source-code .cm-tooltip .opf-doc {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 340px;
+  padding: 2px 0;
+  font: 12px/1.45 var(--opf-ui-font);
+  white-space: normal;
+}
+.opf-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
+.opf-doc-title { font-family: var(--opf-ui-mono); font-weight: 600; }
+.opf-doc-type { color: var(--opf-ui-muted-fg); }
+.opf-doc-badge { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--opf-ui-accent) 14%, transparent); color: var(--opf-ui-accent-strong); font-size: 11px; font-weight: 500; }
+.opf-doc-text, .opf-doc-note, .opf-doc-example, .opf-doc-source { margin: 0; }
+.opf-doc-note, .opf-doc-source { color: var(--opf-ui-muted-fg); }
+.opf-doc-values { display: flex; flex-wrap: wrap; gap: 4px; }
+.opf-doc-chip { padding: 0 5px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); font-size: 11px; }
+.opf-doc-more { color: var(--opf-ui-muted-fg); font-size: 11px; }
+
+/* A problem's tooltip and the quick fix list. */
+.cm-tooltip-lint .opf-problem { display: flex; flex-direction: column; gap: 2px; max-width: 360px; white-space: normal; }
+.opf-problem-next { color: var(--opf-ui-muted-fg); }
+.cm-tooltip-lint .cm-diagnosticAction { margin: 4px 6px 0 0; padding: 1px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); color: var(--opf-ui-fg); font: 12px var(--opf-ui-font); cursor: pointer; }
+.cm-tooltip-lint .cm-diagnosticSource { color: var(--opf-ui-muted-fg); }
+.opf-problem-hint { color: var(--opf-ui-muted-fg); font-size: 11px; }
+.cm-tooltip .opf-fixes { display: flex; flex-direction: column; min-width: 180px; padding: 3px; font: 12px var(--opf-ui-font); }
+.opf-fix { padding: 3px 8px; border-radius: var(--opf-ui-radius-sm); white-space: nowrap; }
+.opf-fix[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo { white-space: normal; }
+
+/* Ctrl+Space with the list open hides the documentation panel (and shows it again). */
+.cm-editor.opf-docs-off .cm-completionInfo { display: none; }
+
 :is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-error {
   border-left-color: var(--opf-ui-danger);
 }
@@ -4169,13 +4217,17 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-findings-toggle[aria-expanded="false"] > .opf-source-icon { transform: rotate(-90deg); }
 .opf-source-findings-icon { display: inline-grid; place-items: center; }
 .opf-source-findings-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 8px 8px; list-style: none; overflow: auto; }
+.opf-source-finding-item { display: flex; flex-direction: column; }
 .opf-source-finding {
-  display: flex;
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  grid-template-areas: "icon head where" "icon next rule";
   align-items: baseline;
-  gap: 8px;
+  column-gap: 8px;
+  row-gap: 1px;
   width: 100%;
   min-height: calc(var(--_h) - 4px);
-  padding: 3px 6px;
+  padding: 4px 6px;
   border: 0;
   border-radius: var(--opf-ui-radius-sm);
   background: transparent;
@@ -4185,6 +4237,12 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   transition: background-color var(--opf-ui-ease);
 }
 .opf-source-finding:hover { background: var(--opf-ui-muted); }
+/* The severity is a shape as well as a color; the word is for screen readers. */
+.opf-source-finding::before { grid-area: icon; align-self: start; color: var(--opf-ui-danger); font-size: 11px; line-height: 1.7; content: "\2716"; }
+.opf-source-finding[data-severity="warning"]::before { color: var(--opf-ui-warn); content: "\25B2"; }
+.opf-source-finding[data-severity="info"]::before { color: var(--opf-ui-muted-fg); content: "\25CF"; }
+.opf-source-finding-severity { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.opf-source-finding-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
 .opf-source-finding-path {
   flex: none;
   padding: 1px 5px;
@@ -4195,8 +4253,21 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 }
 .opf-source-finding[data-severity="warning"] .opf-source-finding-path { background: color-mix(in srgb, var(--opf-ui-warn) 12%, transparent); color: var(--opf-ui-warn); }
 .opf-source-finding[data-severity="info"] .opf-source-finding-path { background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); }
-.opf-source-finding-message { min-width: 0; color: var(--opf-ui-muted-fg); overflow-wrap: anywhere; }
-.opf-source-finding-line { flex: none; margin-left: auto; color: var(--opf-ui-muted-fg); font: 11px var(--opf-ui-mono); }
+.opf-source-finding-message { min-width: 0; color: var(--opf-ui-fg); overflow-wrap: anywhere; }
+.opf-source-finding-next { grid-area: next; min-width: 0; color: var(--opf-ui-muted-fg); overflow-wrap: anywhere; }
+.opf-source-finding-line { grid-area: where; justify-self: end; color: var(--opf-ui-muted-fg); font: 11px var(--opf-ui-mono); white-space: nowrap; }
+.opf-source-finding-rule { grid-area: rule; justify-self: end; color: var(--opf-ui-muted-fg); font: 10.5px var(--opf-ui-mono); }
+.opf-source-finding-fixes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 4px 28px; }
+.opf-source-finding-fix {
+  min-height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-surface);
+  font-size: 12px;
+  cursor: pointer;
+}
+.opf-source-finding-fix:hover { background: var(--opf-ui-muted); }
 .opf-source-finding-more { padding: 3px 6px; color: var(--opf-ui-muted-fg); font-size: 12px; }
 
 .opf-source-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -283,10 +283,10 @@
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.26.1"
+    "@openpresentation/opf": "^0.26.3"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.1"
+    "@openpresentation/opf-render": "^0.26.3"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -345,9 +345,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/opf-render": "0.26.1",
-    "@openpresentation/opf-pptx": "0.26.1",
-    "@openpresentation/gallery": "0.26.1"
+    "@openpresentation/gallery": "0.26.3",
+    "@openpresentation/opf-pptx": "0.26.3",
+    "@openpresentation/opf-render": "0.26.3"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -385,6 +385,7 @@
     "test:review-hook-browser": "node test/review-hook-browser.mjs",
     "test:source-pane-browser": "node test/source-pane-browser.mjs",
     "test:source-keyboard-browser": "node test/source-keyboard-browser.mjs",
+    "test:source-keyboard-json-browser": "node test/source-keyboard-json-browser.mjs",
     "test:layout-editor-browser": "node test/layout-editor-browser.mjs",
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
@@ -394,5 +395,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "792e7c6d348011aa6f398989702fc8b8a80ec691"
+  "gitHead": "570ebe0c803e9613f6b9f9fcca8160b38b16a826"
 }