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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssml-builder-js/ssml-editor-react",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "React-based SSML editor component",
   "license": "MIT",
   "repository": {
@@ -52,6 +52,6 @@
     }
   },
   "dependencies": {
-    "@ssml-builder-js/ssml-core": "^2.9.0"
+    "@ssml-builder-js/ssml-core": "^2.11.0"
   }
 }

package/src/components/VisualSsmlEditor.tsx

@@ -60,6 +60,60 @@ function updateTextAtPath(document: SsmlDocument, path: number[], value: string)
   return { ...document, children: updateNodesAtPath(document.children ?? [], path, () => value) };
 }
 
+function getNodeAtPath(nodes: SsmlNode[], path: number[]): SsmlNode | undefined {
+  let current: SsmlNode | undefined;
+  let currentNodes = nodes;
+  for (const index of path) {
+    current = currentNodes[index];
+    if (current === undefined) return undefined;
+    if (!isElement(current)) {
+      currentNodes = [];
+    } else {
+      currentNodes = current.children ?? [];
+    }
+  }
+  return current;
+}
+
+function updateElementAtPath(
+  document: SsmlDocument,
+  path: number[],
+  update: (element: SsmlElement) => SsmlElement,
+): SsmlDocument {
+  return {
+    ...document,
+    children: updateNodesAtPath(document.children ?? [], path, (node) => (isElement(node) ? update(node) : node)),
+  };
+}
+
+function updateElementText(element: SsmlElement, value: string): SsmlElement {
+  return { ...element, children: [value] };
+}
+
+function updateOptionalElementProperty(
+  document: SsmlDocument,
+  path: number[],
+  property: "voice" | "speaker" | "src" | "volume" | "fadeIn" | "fadeOut",
+  value: string,
+): SsmlDocument {
+  return updateElementAtPath(document, path, (element) => {
+    const next = { ...element } as SsmlElement & Record<string, unknown>;
+    if (value.trim()) next[property] = value;
+    else delete next[property];
+    return next;
+  });
+}
+
+function addDialogTurn(document: SsmlDocument, path: number[]): SsmlDocument {
+  return updateElementAtPath(document, path, (element) => ({
+    ...element,
+    children: [
+      ...(element.children ?? []),
+      { type: "mstts:turn", voice: "en-US-JennyNeural", children: ["New dialog turn"] },
+    ],
+  }));
+}
+
 function wrapTextAtPath(
   document: SsmlDocument,
   path: number[],
@@ -135,6 +189,7 @@ export function VisualSsmlEditor({
   const [selection, setSelection] = useState({ start: 0, end: 0 });
   const textLeaves = useMemo(() => collectTextLeaves(document.children ?? []), [document]);
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
+  const selectedElement = selectedPath ? getNodeAtPath(document.children ?? [], selectedPath) : undefined;
   const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document)), [document]);
   const commit = (nextDocument: SsmlDocument): void => onChange?.(nextDocument);
 
@@ -182,7 +237,104 @@ export function VisualSsmlEditor({
           </ul>
         </nav>
         <div className="ssml-editor-visual-form">
-          {selectedLeaf ? (
+          {selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? (
+            <fieldset>
+              <legend>Dialog</legend>
+              <p>Add and edit speaker turns in this dialog.</p>
+              <button
+                type="button"
+                disabled={readOnly}
+                onClick={() => commit(addDialogTurn(document, selectedPath ?? []))}
+              >
+                Add turn
+              </button>
+            </fieldset>
+          ) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? (
+            <fieldset>
+              <legend>Dialog turn</legend>
+              <label>
+                Voice
+                <input
+                  value={selectedElement.voice ?? ""}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "voice", event.target.value))
+                  }
+                />
+              </label>
+              <label>
+                Speaker
+                <input
+                  value={selectedElement.speaker ?? ""}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "speaker", event.target.value))
+                  }
+                />
+              </label>
+              <label>
+                Turn text
+                <textarea
+                  value={
+                    selectedElement.children?.filter((child): child is string => typeof child === "string").join("") ??
+                    ""
+                  }
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(
+                      updateElementAtPath(document, selectedPath ?? [], (element) =>
+                        updateElementText(element, event.target.value),
+                      ),
+                    )
+                  }
+                />
+              </label>
+            </fieldset>
+          ) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? (
+            <fieldset>
+              <legend>Background audio</legend>
+              <label>
+                Source URL
+                <input
+                  value={selectedElement.src ?? ""}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "src", event.target.value))
+                  }
+                />
+              </label>
+              <label>
+                Volume
+                <input
+                  value={selectedElement.volume === undefined ? "" : String(selectedElement.volume)}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "volume", event.target.value))
+                  }
+                />
+              </label>
+              <label>
+                Fade in
+                <input
+                  value={selectedElement.fadeIn === undefined ? "" : String(selectedElement.fadeIn)}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "fadeIn", event.target.value))
+                  }
+                />
+              </label>
+              <label>
+                Fade out
+                <input
+                  value={selectedElement.fadeOut === undefined ? "" : String(selectedElement.fadeOut)}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, selectedPath ?? [], "fadeOut", event.target.value))
+                  }
+                />
+              </label>
+            </fieldset>
+          ) : selectedLeaf ? (
             <>
               <label>
                 Text

package/src/constants/azureVoiceStyleMap.generated.ts

@@ -46,6 +46,9 @@ export const AZURE_VOICE_STYLE_MAP = {
   ],
   "es-ES-ElviraNeural": [],
   "fil-PH-AngeloNeural": [],
+  "fil-PH-Angelo:DragonHDLatestNeural": [],
+  "fil-PH-BlessicaNeural": [],
+  "fil-PH-Blessica:DragonHDLatestNeural": [],
   "fr-FR-DeniseNeural": ["cheerful", "sad"],
   "fr-FR-HenriNeural": ["cheerful", "sad"],
   "id-ID-GadisNeural": [],

package/src/constants/ssmlPresets.ts

@@ -262,6 +262,7 @@ export const SAY_AS_PRESETS = [
 export const LANGUAGE_PRESETS = ["ja-JP", "en-US", "de-DE", "fr-FR"] as const;
 export const SILENCE_VALUE_PRESETS = ["300ms", "500ms", "1s"] as const;
 export const AUDIO_DURATION_PRESETS = ["5s", "10s", "30s"] as const;
+export const BACKGROUND_AUDIO_DURATION_PRESETS = ["0", "500", "1000", "3000", "10000"] as const;
 export const SILENCE_TYPE_PRESETS = [
   "Leading",
   "Tailing",
@@ -324,8 +325,8 @@ export const SSML_ATTRIBUTE_PRESETS = {
   },
   "mstts:backgroundaudio": {
     volume: PROSODY_VOLUME_PRESETS,
-    fadein: AUDIO_DURATION_PRESETS,
-    fadeout: AUDIO_DURATION_PRESETS,
+    fadein: BACKGROUND_AUDIO_DURATION_PRESETS,
+    fadeout: BACKGROUND_AUDIO_DURATION_PRESETS,
   },
   silence: {
     type: SILENCE_TYPE_PRESETS,

package/src/ssmlCompletion.ts

@@ -56,7 +56,7 @@ const SSML_COMPLETION_SNIPPETS = [
   },
   {
     label: "mstts:backgroundaudio",
-    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:-3dB}" />`,
+    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:70}" fadein="\${3:1000}" fadeout="\${4:1000}" />`,
   },
   {
     label: "mstts:ttsembedding",

package/src/ssmlHover.ts

@@ -366,18 +366,18 @@ const SSML_TAG_DEFINITIONS: readonly SsmlTagDefinition[] = [
       },
       {
         name: "volume",
-        description: "The background audio volume, for example `-3dB` or `medium`.",
-        example: "-3dB",
+        description: "The background audio volume from 0 to 100.",
+        example: "70",
       },
       {
         name: "fadein",
-        description: "The fade-in duration, for example `1s`.",
-        example: "1s",
+        description: "The fade-in duration in milliseconds from 0 to 10000.",
+        example: "1000",
       },
       {
         name: "fadeout",
-        description: "The fade-out duration, for example `500ms`.",
-        example: "500ms",
+        description: "The fade-out duration in milliseconds from 0 to 10000.",
+        example: "1000",
       },
     ],
   },

package/test/ui-components.test.tsx

@@ -584,6 +584,68 @@ describe("SsmlEditor props", () => {
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ version: "1.0" }));
   });
 
+  it("adds and edits Azure dialog turns in the visual editor", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderEditor({
+      editMode: "visual",
+      onChange,
+      document: {
+        ...editorDocument,
+        children: [
+          {
+            type: "voice",
+            name: "en-US-MultiTalker-Ava-Andrew:DragonHDLatestNeural",
+            children: [
+              { type: "mstts:dialog", children: [{ type: "mstts:turn", speaker: "ava", children: ["Hello"] }] },
+            ],
+          },
+        ],
+      },
+    });
+
+    await user.click(screen.getByRole("button", { name: "<mstts:dialog>" }));
+    await user.click(screen.getByRole("button", { name: "Add turn" }));
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        children: [
+          expect.objectContaining({
+            children: [
+              expect.objectContaining({
+                children: expect.arrayContaining([expect.objectContaining({ type: "mstts:turn" })]),
+              }),
+            ],
+          }),
+        ],
+      }),
+    );
+  });
+
+  it("edits Azure background audio settings in the visual editor", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderEditor({
+      editMode: "visual",
+      onChange,
+      document: {
+        ...editorDocument,
+        children: [
+          { type: "mstts:backgroundaudio", src: "https://allowed.test/music.mp3", volume: "50", fadeIn: "500" },
+          { type: "voice", name: "en-US-JennyNeural", children: ["Hello"] },
+        ],
+      },
+    });
+
+    await user.click(screen.getByRole("button", { name: "<mstts:backgroundaudio>" }));
+    await user.clear(screen.getByRole("textbox", { name: "Volume" }));
+    await user.type(screen.getByRole("textbox", { name: "Volume" }), "70");
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        children: expect.arrayContaining([expect.objectContaining({ type: "mstts:backgroundaudio", volume: "70" })]),
+      }),
+    );
+  });
+
   it("updates toolbar and popover text when the locale changes", async () => {
     const user = userEvent.setup();
     const { rerender } = renderEditor({ locale: "ja", showToolbarLabels: true });