@ssml-builder-js/ssml-editor-react 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ssml-builder-js/ssml-editor-react
 
+## 2.12.0
+
+### Minor Changes
+
+- Add Visual Editor forms for the supported SSML and Azure extension elements and preserve parent context during selection preview.
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/index.js

@@ -4730,6 +4730,141 @@ function updateOptionalElementProperty(document2, path, property, value) {
     return next;
   });
 }
+var VISUAL_ELEMENT_FIELDS = {
+  voice: [
+    { key: "name", label: "Voice name" },
+    { key: "effect", label: "Effect" }
+  ],
+  prosody: [
+    { key: "rate", label: "Rate" },
+    { key: "pitch", label: "Pitch" },
+    { key: "volume", label: "Volume" },
+    { key: "contour", label: "Contour" },
+    { key: "range", label: "Range" }
+  ],
+  "express-as": [
+    { key: "style", label: "Style" },
+    { key: "styleDegree", label: "Style degree" },
+    { key: "role", label: "Role" }
+  ],
+  expressAs: [
+    { key: "style", label: "Style" },
+    { key: "styleDegree", label: "Style degree" },
+    { key: "role", label: "Role" }
+  ],
+  "mstts:express-as": [
+    { key: "style", label: "Style" },
+    { key: "styleDegree", label: "Style degree" },
+    { key: "role", label: "Role" }
+  ],
+  "say-as": [
+    { key: "interpretAs", label: "Interpret as" },
+    { key: "format", label: "Format" },
+    { key: "detail", label: "Detail" }
+  ],
+  sayAs: [
+    { key: "interpretAs", label: "Interpret as" },
+    { key: "format", label: "Format" },
+    { key: "detail", label: "Detail" }
+  ],
+  phoneme: [
+    { key: "alphabet", label: "Alphabet" },
+    { key: "ph", label: "Pronunciation" }
+  ],
+  emphasis: [{ key: "level", label: "Level" }],
+  audio: [
+    { key: "src", label: "Source URL" },
+    { key: "desc", label: "Description" },
+    { key: "clipBegin", label: "Clip begin" },
+    { key: "clipEnd", label: "Clip end" },
+    { key: "speed", label: "Speed" },
+    { key: "repeatCount", label: "Repeat count" },
+    { key: "repeatDuration", label: "Repeat duration" },
+    { key: "soundLevel", label: "Sound level" }
+  ],
+  mark: [{ key: "name", label: "Mark name" }],
+  bookmark: [{ key: "mark", label: "Bookmark name" }],
+  sub: [{ key: "alias", label: "Alias" }],
+  lang: [{ key: "lang", label: "Language" }],
+  lexicon: [{ key: "uri", label: "Lexicon URI" }],
+  "mstts:silence": [
+    { key: "typeValue", label: "Silence type" },
+    { key: "value", label: "Value" }
+  ],
+  silence: [
+    { key: "typeValue", label: "Silence type" },
+    { key: "value", label: "Value" }
+  ],
+  "mstts:audioduration": [{ key: "value", label: "Duration" }],
+  "mstts:ttsembedding": [{ key: "speakerProfileId", label: "Speaker profile ID" }],
+  "mstts:embedding": [
+    { key: "id", label: "Embedding ID" },
+    { key: "speakerProfileId", label: "Speaker profile ID" }
+  ],
+  "mstts:voiceconversion": [
+    { key: "url", label: "Source URL" },
+    { key: "profile", label: "Profile" },
+    { key: "speakerProfileId", label: "Speaker profile ID" }
+  ]
+};
+function getElementFields(element) {
+  return VISUAL_ELEMENT_FIELDS[elementLabel(element)] ?? [];
+}
+function VisualElementInspector({
+  document: document2,
+  element,
+  path,
+  readOnly,
+  commit
+}) {
+  const fields = getElementFields(element);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: `<${elementLabel(element)}>` }),
+    fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "This element is preserved in the visual tree. Edit its attributes in Code mode." }) : fields.map((field) => {
+      const value = element[field.key];
+      const inputValue = value === void 0 ? "" : String(value);
+      const inputId = `ssml-visual-${field.key}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, children: [
+        field.label,
+        field.multiline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "textarea",
+          {
+            id: inputId,
+            value: inputValue,
+            readOnly,
+            onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            id: inputId,
+            value: inputValue,
+            readOnly,
+            onChange: (event) => commit(updateOptionalElementProperty(document2, path, field.key, event.target.value))
+          }
+        )
+      ] }, field.key);
+    })
+  ] });
+}
+function getElementAncestors(nodes, path, ancestors = []) {
+  const [index, ...rest] = path;
+  const node = nodes[index];
+  if (!node || !isElement(node)) return ancestors;
+  if (rest.length === 0) return ancestors;
+  return getElementAncestors(node.children ?? [], rest, [...ancestors, node]);
+}
+function buildVisualPreview(document2, leaf, selection) {
+  const start = Math.max(0, Math.min(selection.start, leaf.value.length));
+  const end = Math.max(start, Math.min(selection.end, leaf.value.length));
+  const value = start === end ? leaf.value : leaf.value.slice(start, end);
+  const ancestors = getElementAncestors(document2.children ?? [], leaf.path);
+  const children = ancestors.reduceRight(
+    (current, ancestor) => [{ ...ancestor, children: current }],
+    [value]
+  );
+  return (0, import_ssml_core4.buildSsml)({ ...document2, children });
+}
 function addDialogTurn(document2, path) {
   return updateElementAtPath(document2, path, (element) => ({
     ...element,
@@ -4927,7 +5062,16 @@ function VisualSsmlEditor({
             }
           )
         ] })
-      ] }) : selectedLeaf ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      ] }) : selectedElement && isElement(selectedElement) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        VisualElementInspector,
+        {
+          document: document2,
+          element: selectedElement,
+          path: selectedPath ?? [],
+          readOnly,
+          commit
+        }
+      ) : selectedLeaf ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
           "Text",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -4967,7 +5111,7 @@ function VisualSsmlEditor({
             "button",
             {
               type: "button",
-              onClick: () => onPreviewSelection((0, import_ssml_core4.buildSsml)({ ...document2, children: [selectedLeaf.value] })),
+              onClick: () => onPreviewSelection(buildVisualPreview(document2, selectedLeaf, selection)),
               children: "Preview selection"
             }
           )