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

package/package.json

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

package/src/SsmlEditor.tsx

@@ -40,7 +40,12 @@ import { InsertionPopover } from "./components/popovers/InsertionPopover";
 import { useSsmlEditorState } from "./hooks/useSsmlEditorState";
 import { useSsmlMonaco } from "./hooks/useSsmlMonaco";
 import { editorStyles as styles } from "./styles/editorStyles";
-import { VisualSsmlEditor } from "./components/VisualSsmlEditor";
+import {
+  VisualSsmlEditor,
+  type VisualInspectorRenderer,
+  type VisualVoiceCatalogEntry,
+  type VoiceSelectorRenderProps,
+} from "./components/VisualSsmlEditor";
 const UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
 const TIMING_POPOVER_TAGS = new Set(["break", "mstts:silence", "mstts:audioduration"]);
 const PROSODY_POPOVER_TAGS = new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
@@ -764,6 +769,18 @@ export interface SsmlEditorProps {
   customInsertions?: SsmlEditorCustomInsertionCollection;
   /** Adds insertion definitions without replacing built-in definitions. */
   additionalInsertions?: SsmlEditorCustomInsertionCollection;
+  /** Replaces the visual inspector for an element type or serialized tag name. */
+  customInspectors?: Readonly<Record<string, VisualInspectorRenderer>>;
+  /** Replaces the built-in voice catalog selector in visual mode. */
+  renderVoiceSelector?: (props: VoiceSelectorRenderProps) => ReactNode;
+  /** Voice metadata used by the visual selector. */
+  voiceCatalog?: readonly VisualVoiceCatalogEntry[];
+  /** Optional locale filter for the visual voice selector. */
+  voiceLocale?: string;
+  /** Optional region filter for the visual voice selector. */
+  voiceRegion?: string;
+  /** Optional style filter for the visual voice selector. */
+  voiceStyle?: string;
   /** Candidate style values shown by the built-in emotion insertion. */
   emotionStyles?: readonly string[];
   /** Class name applied to the editor container. */
@@ -865,6 +882,12 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     insertionGroups,
     customInsertions,
     additionalInsertions,
+    customInspectors,
+    renderVoiceSelector,
+    voiceCatalog,
+    voiceLocale,
+    voiceRegion,
+    voiceStyle,
     emotionStyles,
     className,
     style,
@@ -1347,6 +1370,13 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
               readOnly={isReadOnly}
               onChange={commit}
               onPreviewSelection={onPreviewSelection}
+              locale={localeProp ?? languageProp}
+              customInspectors={customInspectors}
+              renderVoiceSelector={renderVoiceSelector}
+              voiceCatalog={voiceCatalog}
+              voiceLocale={voiceLocale}
+              voiceRegion={voiceRegion}
+              voiceStyle={voiceStyle}
             />
           </div>
         ) : (

package/src/components/VisualSsmlEditor.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import {
   buildSsml,
   validateAzureSsml,
@@ -7,12 +7,48 @@ import {
   type SsmlElement,
   type SsmlNode,
 } from "@ssml-builder-js/ssml-core";
+import { SSML_ELEMENT_COPY, type SsmlEditorLocale } from "../locales";
+
+export interface VisualVoiceCatalogEntry {
+  name: string;
+  locale: string;
+  region?: string;
+  styles?: readonly string[];
+  preview?: boolean;
+  status?: "ga" | "preview" | "deprecated";
+}
+
+export interface VoiceSelectorRenderProps {
+  value: string;
+  voices: readonly VisualVoiceCatalogEntry[];
+  readOnly: boolean;
+  locale: SsmlEditorLocale;
+  onChange: (voice: string) => void;
+}
+
+export interface VisualInspectorRenderProps {
+  document: SsmlDocument;
+  element: SsmlElement;
+  path: number[];
+  readOnly: boolean;
+  onChange: (document: SsmlDocument) => void;
+  locale: SsmlEditorLocale;
+}
+
+export type VisualInspectorRenderer = (props: VisualInspectorRenderProps) => ReactNode;
 
 export interface VisualSsmlEditorProps {
   document: SsmlDocument;
   readOnly?: boolean;
   onChange?: (document: SsmlDocument) => void;
   onPreviewSelection?: (ssml: string) => void;
+  locale?: SsmlEditorLocale;
+  customInspectors?: Readonly<Record<string, VisualInspectorRenderer>>;
+  renderVoiceSelector?: (props: VoiceSelectorRenderProps) => ReactNode;
+  voiceCatalog?: readonly VisualVoiceCatalogEntry[];
+  voiceLocale?: string;
+  voiceRegion?: string;
+  voiceStyle?: string;
 }
 
 interface TextLeaf {
@@ -93,7 +129,7 @@ function updateElementText(element: SsmlElement, value: string): SsmlElement {
 function updateOptionalElementProperty(
   document: SsmlDocument,
   path: number[],
-  property: "voice" | "speaker" | "src" | "volume" | "fadeIn" | "fadeOut",
+  property: string,
   value: string,
 ): SsmlDocument {
   return updateElementAtPath(document, path, (element) => {
@@ -104,6 +140,269 @@ function updateOptionalElementProperty(
   });
 }
 
+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 localizedElementLabel(element: SsmlElement, locale: SsmlEditorLocale): string {
+  return SSML_ELEMENT_COPY[locale][elementLabel(element)]?.label ?? elementLabel(element);
+}
+
+function filteredVoices(
+  voiceCatalog: readonly VisualVoiceCatalogEntry[] | undefined,
+  locale: string | undefined,
+  region: string | undefined,
+  style: string | undefined,
+): readonly VisualVoiceCatalogEntry[] {
+  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 }: VoiceSelectorRenderProps): ReactElement {
+  return (
+    <select
+      aria-label={locale === "ja" ? "音声" : "Voice"}
+      value={value}
+      disabled={readOnly}
+      onChange={(event) => onChange(event.target.value)}
+    >
+      <option value="">{locale === "ja" ? "音声を選択" : "Select a voice"}</option>
+      {voices.map((voice) => (
+        <option key={voice.name} value={voice.name}>
+          {voice.name}
+          {voice.preview || voice.status === "preview" ? " (preview)" : ""}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function VisualElementInspector({
+  document,
+  element,
+  path,
+  readOnly,
+  commit,
+  locale,
+  customInspector,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle,
+}: {
+  document: SsmlDocument;
+  element: SsmlElement;
+  path: number[];
+  readOnly: boolean;
+  commit: (document: SsmlDocument) => void;
+  locale: SsmlEditorLocale;
+  customInspector?: VisualInspectorRenderer;
+  renderVoiceSelector?: (props: VoiceSelectorRenderProps) => ReactNode;
+  voiceCatalog?: readonly VisualVoiceCatalogEntry[];
+  voiceLocale?: string;
+  voiceRegion?: string;
+  voiceStyle?: string;
+}): ReactElement {
+  if (customInspector) {
+    return <>{customInspector({ document, element, path, readOnly, onChange: commit, locale })}</>;
+  }
+  const fields = getElementFields(element);
+  const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
+  const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
+  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}>
+              {locale === "ja"
+                ? ((
+                    {
+                      name: "名前",
+                      effect: "効果",
+                      rate: "速度",
+                      pitch: "ピッチ",
+                      volume: "音量",
+                      contour: "ピッチ曲線",
+                      range: "範囲",
+                      style: "スタイル",
+                      styleDegree: "スタイル強度",
+                      role: "役割",
+                      interpretAs: "解釈",
+                      alphabet: "アルファベット",
+                      ph: "発音",
+                      level: "強調レベル",
+                      src: "音声 URL",
+                      desc: "説明",
+                      clipBegin: "開始位置",
+                      clipEnd: "終了位置",
+                      speed: "速度",
+                      repeatCount: "繰り返し回数",
+                      repeatDuration: "繰り返し時間",
+                      soundLevel: "音量レベル",
+                      mark: "ブックマーク名",
+                      alias: "別名",
+                      lang: "言語",
+                      uri: "辞書 URI",
+                      typeValue: "無音の種類",
+                      value: "値",
+                      id: "埋め込み ID",
+                      speakerProfileId: "話者プロファイル ID",
+                      url: "音声変換 URL",
+                      profile: "プロファイル",
+                    } as Record<string, string>
+                  )[field.key] ?? field.label)
+                : field.label}
+              {field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? (
+                renderSelector({
+                  value: inputValue,
+                  voices: availableVoices,
+                  readOnly,
+                  locale,
+                  onChange: (value) => commit(updateOptionalElementProperty(document, path, field.key, value)),
+                })
+              ) : 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,
@@ -184,12 +483,23 @@ export function VisualSsmlEditor({
   readOnly = false,
   onChange,
   onPreviewSelection,
+  locale = "en",
+  customInspectors,
+  renderVoiceSelector,
+  voiceCatalog,
+  voiceLocale,
+  voiceRegion,
+  voiceStyle,
 }: VisualSsmlEditorProps): ReactElement {
   const [selectedPath, setSelectedPath] = useState<number[] | null>(null);
   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 selectedCustomInspector =
+    selectedElement && isElement(selectedElement)
+      ? (customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type])
+      : undefined;
   const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document)), [document]);
   const commit = (nextDocument: SsmlDocument): void => onChange?.(nextDocument);
 
@@ -237,33 +547,54 @@ export function VisualSsmlEditor({
           </ul>
         </nav>
         <div className="ssml-editor-visual-form">
-          {selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? (
+          {selectedCustomInspector && selectedElement && isElement(selectedElement) ? (
+            selectedCustomInspector({
+              document,
+              element: selectedElement,
+              path: selectedPath ?? [],
+              readOnly,
+              onChange: commit,
+              locale,
+            })
+          ) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? (
             <fieldset>
-              <legend>Dialog</legend>
-              <p>Add and edit speaker turns in this dialog.</p>
+              <legend>{localizedElementLabel(selectedElement, locale)}</legend>
+              <p>{SSML_ELEMENT_COPY[locale][elementLabel(selectedElement)]?.description}</p>
               <button
                 type="button"
                 disabled={readOnly}
                 onClick={() => commit(addDialogTurn(document, selectedPath ?? []))}
               >
-                Add turn
+                {locale === "ja" ? "ターンを追加" : "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))
-                  }
-                />
+              <legend>{localizedElementLabel(selectedElement, locale)}</legend>
+              <label htmlFor="ssml-visual-turn-voice">
+                {locale === "ja" ? "音声" : "Voice"}
+                {voiceCatalog ? (
+                  (renderVoiceSelector ?? DefaultVoiceSelector)({
+                    value: selectedElement.voice ?? "",
+                    voices: filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle),
+                    readOnly,
+                    locale,
+                    onChange: (value) =>
+                      commit(updateOptionalElementProperty(document, selectedPath ?? [], "voice", value)),
+                  })
+                ) : (
+                  <input
+                    id="ssml-visual-turn-voice"
+                    value={selectedElement.voice ?? ""}
+                    readOnly={readOnly}
+                    onChange={(event) =>
+                      commit(updateOptionalElementProperty(document, selectedPath ?? [], "voice", event.target.value))
+                    }
+                  />
+                )}
               </label>
               <label>
-                Speaker
+                {locale === "ja" ? "話者" : "Speaker"}
                 <input
                   value={selectedElement.speaker ?? ""}
                   readOnly={readOnly}
@@ -273,7 +604,7 @@ export function VisualSsmlEditor({
                 />
               </label>
               <label>
-                Turn text
+                {locale === "ja" ? "発話テキスト" : "Turn text"}
                 <textarea
                   value={
                     selectedElement.children?.filter((child): child is string => typeof child === "string").join("") ??
@@ -292,9 +623,9 @@ export function VisualSsmlEditor({
             </fieldset>
           ) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? (
             <fieldset>
-              <legend>Background audio</legend>
+              <legend>{localizedElementLabel(selectedElement, locale)}</legend>
               <label>
-                Source URL
+                {locale === "ja" ? "音声 URL" : "Source URL"}
                 <input
                   value={selectedElement.src ?? ""}
                   readOnly={readOnly}
@@ -304,7 +635,7 @@ export function VisualSsmlEditor({
                 />
               </label>
               <label>
-                Volume
+                {locale === "ja" ? "音量" : "Volume"}
                 <input
                   value={selectedElement.volume === undefined ? "" : String(selectedElement.volume)}
                   readOnly={readOnly}
@@ -314,7 +645,7 @@ export function VisualSsmlEditor({
                 />
               </label>
               <label>
-                Fade in
+                {locale === "ja" ? "フェードイン" : "Fade in"}
                 <input
                   value={selectedElement.fadeIn === undefined ? "" : String(selectedElement.fadeIn)}
                   readOnly={readOnly}
@@ -324,7 +655,7 @@ export function VisualSsmlEditor({
                 />
               </label>
               <label>
-                Fade out
+                {locale === "ja" ? "フェードアウト" : "Fade out"}
                 <input
                   value={selectedElement.fadeOut === undefined ? "" : String(selectedElement.fadeOut)}
                   readOnly={readOnly}
@@ -334,6 +665,23 @@ export function VisualSsmlEditor({
                 />
               </label>
             </fieldset>
+          ) : selectedElement && isElement(selectedElement) ? (
+            <VisualElementInspector
+              document={document}
+              element={selectedElement}
+              path={selectedPath ?? []}
+              readOnly={readOnly}
+              commit={commit}
+              locale={locale}
+              customInspector={
+                customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type]
+              }
+              renderVoiceSelector={renderVoiceSelector}
+              voiceCatalog={voiceCatalog}
+              voiceLocale={voiceLocale}
+              voiceRegion={voiceRegion}
+              voiceStyle={voiceStyle}
+            />
           ) : selectedLeaf ? (
             <>
               <label>
@@ -375,7 +723,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/index.tsx

@@ -4,7 +4,13 @@
 
 export { SsmlEditor } from "./SsmlEditor";
 export { VisualSsmlEditor } from "./components/VisualSsmlEditor";
-export type { VisualSsmlEditorProps } from "./components/VisualSsmlEditor";
+export type {
+  VisualInspectorRenderProps,
+  VisualInspectorRenderer,
+  VisualSsmlEditorProps,
+  VisualVoiceCatalogEntry,
+  VoiceSelectorRenderProps,
+} from "./components/VisualSsmlEditor";
 export type {
   SsmlEditorButton,
   SsmlEditorButtonVisibility,
@@ -32,7 +38,7 @@ export type {
   SsmlInsertionOption,
   SsmlInsertionTemplate,
 } from "./SsmlEditor";
-export { EDITOR_COPY, INLINE_BADGE_COPY, SSML_HOVER_COPY } from "./locales";
+export { EDITOR_COPY, INLINE_BADGE_COPY, SSML_ELEMENT_COPY, SSML_HOVER_COPY } from "./locales";
 export type {
   EditorCopy,
   InlineBadgeCopy,
@@ -42,6 +48,7 @@ export type {
   SsmlHoverLocale,
   SsmlHoverParameterCopy,
   SsmlHoverTagCopy,
+  SsmlElementLocaleCopy,
 } from "./locales";
 export {
   createSsmlEditorInsertionDefinition,