ssml-builder-js 2.12.0 → 2.13.0

package/dist/react.mjs

@@ -26,9 +26,8 @@ import {
   SILENCE_VALUE_DESCRIPTIONS,
   SILENCE_VALUE_PRESETS,
   SSML_ATTRIBUTE_PRESETS,
+  SSML_ELEMENT_COPY,
   SSML_HOVER_COPY,
-  buildPartialSsml,
-  buildSsml,
   clearSsmlDocument,
   createSsmlInsertionEdit,
   findActiveSsmlTags,
@@ -42,10 +41,14 @@ import {
   registerSsmlCompletionProvider,
   resolveExpressAsStyles,
   updateEditableText,
-  updateTagAttribute,
+  updateTagAttribute
+} from "./chunk-LCTE26LS.mjs";
+import {
+  buildPartialSsml,
+  buildSsml,
   validateAzureSsml,
   validateSsml
-} from "./chunk-FHDFRM2F.mjs";
+} from "./chunk-CZ2F3TET.mjs";
 import "./chunk-6S5ODO6A.mjs";
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
@@ -1951,19 +1954,94 @@ var VISUAL_ELEMENT_FIELDS = {
 function getElementFields(element) {
   return VISUAL_ELEMENT_FIELDS[elementLabel(element)] ?? [];
 }
+function localizedElementLabel(element, locale) {
+  return SSML_ELEMENT_COPY[locale][elementLabel(element)]?.label ?? elementLabel(element);
+}
+function filteredVoices(voiceCatalog, locale, region, style) {
+  return (voiceCatalog ?? []).filter((voice) => {
+    if (locale && voice.locale.toLowerCase() !== locale.toLowerCase()) return false;
+    if (region && voice.region && voice.region.toLowerCase() !== region.toLowerCase()) return false;
+    if (style && !voice.styles?.some((candidate) => candidate.toLowerCase() === style.toLowerCase())) return false;
+    return true;
+  });
+}
+function DefaultVoiceSelector({ value, voices, readOnly, locale, onChange }) {
+  return /* @__PURE__ */ React.createElement(
+    "select",
+    {
+      "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
+      value,
+      disabled: readOnly,
+      onChange: (event) => onChange(event.target.value)
+    },
+    /* @__PURE__ */ React.createElement("option", { value: "" }, locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice"),
+    voices.map((voice) => /* @__PURE__ */ React.createElement("option", { key: voice.name, value: voice.name }, voice.name, voice.preview || voice.status === "preview" ? " (preview)" : ""))
+  );
+}
 function VisualElementInspector({
   document: document2,
   element,
   path,
   readOnly,
-  commit
+  commit,
+  locale,
+  customInspector,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle
 }) {
+  if (customInspector) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }));
+  }
   const fields = getElementFields(element);
+  const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
+  const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
   return /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, `<${elementLabel(element)}>`), fields.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "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__ */ React.createElement("label", { key: field.key, htmlFor: inputId }, field.label, field.multiline ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("label", { key: field.key, htmlFor: inputId }, locale === "ja" ? {
+      name: "\u540D\u524D",
+      effect: "\u52B9\u679C",
+      rate: "\u901F\u5EA6",
+      pitch: "\u30D4\u30C3\u30C1",
+      volume: "\u97F3\u91CF",
+      contour: "\u30D4\u30C3\u30C1\u66F2\u7DDA",
+      range: "\u7BC4\u56F2",
+      style: "\u30B9\u30BF\u30A4\u30EB",
+      styleDegree: "\u30B9\u30BF\u30A4\u30EB\u5F37\u5EA6",
+      role: "\u5F79\u5272",
+      interpretAs: "\u89E3\u91C8",
+      alphabet: "\u30A2\u30EB\u30D5\u30A1\u30D9\u30C3\u30C8",
+      ph: "\u767A\u97F3",
+      level: "\u5F37\u8ABF\u30EC\u30D9\u30EB",
+      src: "\u97F3\u58F0 URL",
+      desc: "\u8AAC\u660E",
+      clipBegin: "\u958B\u59CB\u4F4D\u7F6E",
+      clipEnd: "\u7D42\u4E86\u4F4D\u7F6E",
+      speed: "\u901F\u5EA6",
+      repeatCount: "\u7E70\u308A\u8FD4\u3057\u56DE\u6570",
+      repeatDuration: "\u7E70\u308A\u8FD4\u3057\u6642\u9593",
+      soundLevel: "\u97F3\u91CF\u30EC\u30D9\u30EB",
+      mark: "\u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u540D",
+      alias: "\u5225\u540D",
+      lang: "\u8A00\u8A9E",
+      uri: "\u8F9E\u66F8 URI",
+      typeValue: "\u7121\u97F3\u306E\u7A2E\u985E",
+      value: "\u5024",
+      id: "\u57CB\u3081\u8FBC\u307F ID",
+      speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID",
+      url: "\u97F3\u58F0\u5909\u63DB URL",
+      profile: "\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB"
+    }[field.key] ?? field.label : field.label, field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
+      value: inputValue,
+      voices: availableVoices,
+      readOnly,
+      locale,
+      onChange: (value2) => commit(updateOptionalElementProperty(document2, path, field.key, value2))
+    }) : field.multiline ? /* @__PURE__ */ React.createElement(
       "textarea",
       {
         id: inputId,
@@ -2054,13 +2132,21 @@ function VisualSsmlEditor({
   document: document2,
   readOnly = false,
   onChange,
-  onPreviewSelection
+  onPreviewSelection,
+  locale = "en",
+  customInspectors,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle
 }) {
   const [selectedPath, setSelectedPath] = useState2(null);
   const [selection, setSelection] = useState2({ start: 0, end: 0 });
   const textLeaves = useMemo(() => collectTextLeaves(document2.children ?? []), [document2]);
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
   const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
+  const selectedCustomInspector = selectedElement && isElement(selectedElement) ? customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type] : void 0;
   const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document2)), [document2]);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
@@ -2078,29 +2164,43 @@ function VisualSsmlEditor({
       selectedPath,
       onSelect: setSelectedPath
     }
-  )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, "Dialog"), /* @__PURE__ */ React.createElement("p", null, "Add and edit speaker turns in this dialog."), /* @__PURE__ */ React.createElement(
+  )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedCustomInspector && selectedElement && isElement(selectedElement) ? selectedCustomInspector({
+    document: document2,
+    element: selectedElement,
+    path: selectedPath ?? [],
+    readOnly,
+    onChange: commit,
+    locale
+  }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("p", null, SSML_ELEMENT_COPY[locale][elementLabel(selectedElement)]?.description), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
       disabled: readOnly,
       onClick: () => commit(addDialogTurn(document2, selectedPath ?? []))
     },
-    "Add turn"
-  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, "Dialog turn"), /* @__PURE__ */ React.createElement("label", null, "Voice", /* @__PURE__ */ React.createElement(
+    locale === "ja" ? "\u30BF\u30FC\u30F3\u3092\u8FFD\u52A0" : "Add turn"
+  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", { htmlFor: "ssml-visual-turn-voice" }, locale === "ja" ? "\u97F3\u58F0" : "Voice", voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
+    value: selectedElement.voice ?? "",
+    voices: filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle),
+    readOnly,
+    locale,
+    onChange: (value) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", value))
+  }) : /* @__PURE__ */ React.createElement(
     "input",
     {
+      id: "ssml-visual-turn-voice",
       value: selectedElement.voice ?? "",
       readOnly,
       onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", event.target.value))
     }
-  )), /* @__PURE__ */ React.createElement("label", null, "Speaker", /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u8A71\u8005" : "Speaker", /* @__PURE__ */ React.createElement(
     "input",
     {
       value: selectedElement.speaker ?? "",
       readOnly,
       onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "speaker", event.target.value))
     }
-  )), /* @__PURE__ */ React.createElement("label", null, "Turn text", /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u767A\u8A71\u30C6\u30AD\u30B9\u30C8" : "Turn text", /* @__PURE__ */ React.createElement(
     "textarea",
     {
       value: selectedElement.children?.filter((child) => typeof child === "string").join("") ?? "",
@@ -2113,28 +2213,28 @@ function VisualSsmlEditor({
         )
       )
     }
-  ))) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, "Background audio"), /* @__PURE__ */ React.createElement("label", null, "Source URL", /* @__PURE__ */ React.createElement(
+  ))) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u97F3\u58F0 URL" : "Source URL", /* @__PURE__ */ React.createElement(
     "input",
     {
       value: selectedElement.src ?? "",
       readOnly,
       onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "src", event.target.value))
     }
-  )), /* @__PURE__ */ React.createElement("label", null, "Volume", /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u97F3\u91CF" : "Volume", /* @__PURE__ */ React.createElement(
     "input",
     {
       value: selectedElement.volume === void 0 ? "" : String(selectedElement.volume),
       readOnly,
       onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "volume", event.target.value))
     }
-  )), /* @__PURE__ */ React.createElement("label", null, "Fade in", /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u30D5\u30A7\u30FC\u30C9\u30A4\u30F3" : "Fade in", /* @__PURE__ */ React.createElement(
     "input",
     {
       value: selectedElement.fadeIn === void 0 ? "" : String(selectedElement.fadeIn),
       readOnly,
       onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "fadeIn", event.target.value))
     }
-  )), /* @__PURE__ */ React.createElement("label", null, "Fade out", /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", null, locale === "ja" ? "\u30D5\u30A7\u30FC\u30C9\u30A2\u30A6\u30C8" : "Fade out", /* @__PURE__ */ React.createElement(
     "input",
     {
       value: selectedElement.fadeOut === void 0 ? "" : String(selectedElement.fadeOut),
@@ -2148,7 +2248,14 @@ function VisualSsmlEditor({
       element: selectedElement,
       path: selectedPath ?? [],
       readOnly,
-      commit
+      commit,
+      locale,
+      customInspector: customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type],
+      renderVoiceSelector,
+      voiceCatalog,
+      voiceLocale,
+      voiceRegion,
+      voiceStyle
     }
   ) : selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
     "textarea",
@@ -2766,6 +2873,12 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   insertionGroups,
   customInsertions,
   additionalInsertions,
+  customInspectors,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle,
   emotionStyles,
   className,
   style,
@@ -3157,7 +3270,14 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
         document: draftDocument,
         readOnly: isReadOnly,
         onChange: commit,
-        onPreviewSelection
+        onPreviewSelection,
+        locale: localeProp ?? languageProp,
+        customInspectors,
+        renderVoiceSelector,
+        voiceCatalog,
+        voiceLocale,
+        voiceRegion,
+        voiceStyle
       }
     )) : /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
       Editor,
@@ -3217,6 +3337,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
 export {
   EDITOR_COPY,
   INLINE_BADGE_COPY,
+  SSML_ELEMENT_COPY,
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,