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

package/package.json

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

package/src/components/VisualSsmlEditor.tsx

@@ -60,6 +60,222 @@ 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: string,
+  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;
+  });
+}
+
+interface VisualElementField {
+  key: string;
+  label: string;
+  multiline?: boolean;
+}
+
+const VISUAL_ELEMENT_FIELDS: Readonly<Record<string, readonly VisualElementField[]>> = {
+  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: SsmlElement): readonly VisualElementField[] {
+  return VISUAL_ELEMENT_FIELDS[elementLabel(element)] ?? [];
+}
+
+function VisualElementInspector({
+  document,
+  element,
+  path,
+  readOnly,
+  commit,
+}: {
+  document: SsmlDocument;
+  element: SsmlElement;
+  path: number[];
+  readOnly: boolean;
+  commit: (document: SsmlDocument) => void;
+}): ReactElement {
+  const fields = getElementFields(element);
+  return (
+    <fieldset>
+      <legend>{`<${elementLabel(element)}>`}</legend>
+      {fields.length === 0 ? (
+        <p>This element is preserved in the visual tree. Edit its attributes in Code mode.</p>
+      ) : (
+        fields.map((field) => {
+          const value = (element as SsmlElement & Record<string, unknown>)[field.key];
+          const inputValue = value === undefined ? "" : String(value);
+          const inputId = `ssml-visual-${field.key}`;
+          return (
+            <label key={field.key} htmlFor={inputId}>
+              {field.label}
+              {field.multiline ? (
+                <textarea
+                  id={inputId}
+                  value={inputValue}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, path, field.key, event.target.value))
+                  }
+                />
+              ) : (
+                <input
+                  id={inputId}
+                  value={inputValue}
+                  readOnly={readOnly}
+                  onChange={(event) =>
+                    commit(updateOptionalElementProperty(document, path, field.key, event.target.value))
+                  }
+                />
+              )}
+            </label>
+          );
+        })
+      )}
+    </fieldset>
+  );
+}
+
+function getElementAncestors(nodes: SsmlNode[], path: number[], ancestors: SsmlElement[] = []): SsmlElement[] {
+  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(document: SsmlDocument, leaf: TextLeaf, selection: { start: number; end: number }): string {
+  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(document.children ?? [], leaf.path);
+  const children = ancestors.reduceRight<SsmlNode[]>(
+    (current, ancestor) => [{ ...ancestor, children: current }],
+    [value],
+  );
+  return buildSsml({ ...document, children });
+}
+
+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 +351,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 +399,112 @@ 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>
+          ) : selectedElement && isElement(selectedElement) ? (
+            <VisualElementInspector
+              document={document}
+              element={selectedElement}
+              path={selectedPath ?? []}
+              readOnly={readOnly}
+              commit={commit}
+            />
+          ) : selectedLeaf ? (
             <>
               <label>
                 Text
@@ -223,7 +545,7 @@ export function VisualSsmlEditor({
                 {onPreviewSelection && (
                   <button
                     type="button"
-                    onClick={() => onPreviewSelection(buildSsml({ ...document, children: [selectedLeaf.value] }))}
+                    onClick={() => onPreviewSelection(buildVisualPreview(document, selectedLeaf, selection))}
                   >
                     Preview selection
                   </button>

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,146 @@ 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("provides forms for every supported Azure element", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderEditor({
+      editMode: "visual",
+      onChange,
+      document: {
+        ...editorDocument,
+        children: [
+          { type: "voice", name: "en-US-JennyNeural", children: ["Hello"] },
+          { type: "prosody", rate: "slow", children: ["Hello"] },
+          { type: "say-as", interpretAs: "cardinal", children: ["1"] },
+          { type: "phoneme", alphabet: "ipa", ph: "həˈloʊ", children: ["Hello"] },
+          { type: "audio", src: "https://allowed.test/a.mp3" },
+          { type: "mark", name: "chapter-1" },
+          { type: "bookmark", mark: "chapter-1" },
+          { type: "mstts:silence", typeValue: "Comma", value: "100ms" },
+          { type: "mstts:audioduration", value: "10s" },
+          { type: "mstts:embedding", id: "speaker-1" },
+          { type: "mstts:voiceconversion", url: "https://allowed.test/profile" },
+        ],
+      },
+    });
+
+    const tree = screen.getByRole("navigation", { name: "SSML structure tree" });
+    const expectedFields = [
+      ["<voice>", "Voice name"],
+      ["<prosody>", "Rate"],
+      ["<say-as>", "Interpret as"],
+      ["<phoneme>", "Alphabet"],
+      ["<audio>", "Source URL"],
+      ["<mark>", "Mark name"],
+      ["<bookmark>", "Bookmark name"],
+      ["<mstts:silence>", "Silence type"],
+      ["<mstts:audioduration>", "Duration"],
+      ["<mstts:embedding>", "Embedding ID"],
+      ["<mstts:voiceconversion>", "Source URL"],
+    ];
+
+    for (const [element, field] of expectedFields) {
+      await user.click(within(tree).getByRole("button", { name: element }));
+      expect(screen.getByLabelText(field)).toBeTruthy();
+    }
+
+    await user.click(within(tree).getByRole("button", { name: "<mstts:embedding>" }));
+    await user.clear(screen.getByLabelText("Embedding ID"));
+    await user.type(screen.getByLabelText("Embedding ID"), "speaker-2");
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        children: expect.arrayContaining([expect.objectContaining({ type: "mstts:embedding", id: "speaker-2" })]),
+      }),
+    );
+  });
+
+  it("retains voice and prosody context for visual selection preview", async () => {
+    const user = userEvent.setup();
+    const onPreviewSelection = vi.fn();
+    renderEditor({
+      editMode: "visual",
+      onPreviewSelection,
+      document: {
+        ...editorDocument,
+        children: [
+          {
+            type: "voice",
+            name: "en-US-JennyNeural",
+            children: [{ type: "prosody", rate: "slow", children: ["Hello world"] }],
+          },
+        ],
+      },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Preview selection" }));
+    expect(onPreviewSelection).toHaveBeenCalledWith(
+      '<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="en-US"><voice name="en-US-JennyNeural"><prosody rate="slow">Hello world</prosody></voice></speak>',
+    );
+  });
+
+  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 });