ssml-builder-js 2.1.0 → 2.2.0

package/dist/react.js

@@ -58,7 +58,7 @@ __export(ssmlPresets_exports, {
   EMPHASIS_LEVEL_DESCRIPTIONS: () => EMPHASIS_LEVEL_DESCRIPTIONS,
   EMPHASIS_LEVEL_PRESETS: () => EMPHASIS_LEVEL_PRESETS,
   EXPRESS_AS_ROLE_PRESETS: () => EXPRESS_AS_ROLE_PRESETS,
-  EXPRESS_AS_STYLES_BY_VOICE: () => EXPRESS_AS_STYLES_BY_VOICE,
+  EXPRESS_AS_STYLE_CATEGORIES: () => EXPRESS_AS_STYLE_CATEGORIES,
   EXPRESS_AS_STYLE_DESCRIPTIONS: () => EXPRESS_AS_STYLE_DESCRIPTIONS,
   EXPRESS_AS_STYLE_PRESETS: () => EXPRESS_AS_STYLE_PRESETS,
   LANGUAGE_DESCRIPTIONS: () => LANGUAGE_DESCRIPTIONS,
@@ -80,6 +80,8 @@ __export(ssmlPresets_exports, {
   SSML_PRESETS: () => SSML_PRESETS,
   SSML_PRESET_EXAMPLES: () => SSML_PRESET_EXAMPLES,
   VISEME_TYPE_PRESETS: () => VISEME_TYPE_PRESETS,
+  VOICE_STYLE_MAP: () => VOICE_STYLE_MAP,
+  getExpressAsStyleCategory: () => getExpressAsStyleCategory,
   resolveExpressAsStyles: () => resolveExpressAsStyles
 });
 var SSML_PRESETS = [
@@ -124,21 +126,90 @@ var EXPRESS_AS_STYLE_PRESETS = [
   "shouting",
   "terrified",
   "unfriendly",
-  "whispering"
+  "whispering",
+  "empathetic",
+  "relieved",
+  "fearful",
+  "depressed",
+  "disgruntled",
+  "embarrassed",
+  "narration-relaxed",
+  "poetry-reading",
+  "sports_commentary",
+  "sports_commentary_excited",
+  "story"
 ];
-var EXPRESS_AS_STYLES_BY_VOICE = {
-  "ja-JP-NanamiNeural": ["chat", "cheerful", "customerservice"],
-  "ja-JP-KeitaNeural": [],
-  "en-US-JennyNeural": [
+var EXPRESS_AS_STYLE_CATEGORIES = {
+  emotions: [
+    "cheerful",
+    "sad",
     "angry",
+    "calm",
+    "fearful",
+    "depressed",
+    "disgruntled",
+    "embarrassed",
+    "empathetic",
+    "envious",
+    "excited",
+    "friendly",
+    "gentle",
+    "hopeful",
+    "relieved",
+    "serious",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering"
+  ],
+  scenarios: ["chat", "customerservice", "assistant", "livecommercial", "poetry-reading", "story"],
+  media: [
+    "newscast",
+    "newscast-casual",
+    "newscast-formal",
+    "narration-professional",
+    "narration-relaxed",
+    "documentary-narration",
+    "advertisement_upbeat",
+    "sports_commentary",
+    "sports_commentary_excited"
+  ]
+};
+function getExpressAsStyleCategory(style) {
+  for (const [category, styles] of Object.entries(EXPRESS_AS_STYLE_CATEGORIES)) {
+    if (styles.includes(style)) {
+      return category;
+    }
+  }
+  return "other";
+}
+var VOICE_STYLE_MAP = {
+  "ja-JP-MayuNeural": ["calm", "cheerful", "sad"],
+  "ja-JP-KeitaNeural": ["chat"],
+  "ja-JP-NanamiNeural": ["chat", "customerservice", "cheerful", "whispering", "sad"],
+  "en-US-JennyMultilingualNeural": [
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering"
+  ],
+  "en-US-AndrewNeural": ["empathetic", "relieved"],
+  "en-US-JennyNeural": [
     "assistant",
     "chat",
-    "cheerful",
     "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
     "excited",
     "friendly",
     "hopeful",
-    "newscast",
     "sad",
     "shouting",
     "terrified",
@@ -157,18 +228,58 @@ var EXPRESS_AS_STYLES_BY_VOICE = {
     "terrified",
     "unfriendly",
     "whispering"
-  ]
+  ],
+  "ko-KR-SunHiNeural": ["cheerful", "sad"],
+  "zh-CN-XiaoxiaoNeural": [
+    "assistant",
+    "chat",
+    "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "terrified",
+    "whispering",
+    "poetry-reading",
+    "sports_commentary",
+    "sports_commentary_excited",
+    "story"
+  ],
+  "zh-CN-YunxiNeural": [
+    "narration-relaxed",
+    "embarrassed",
+    "fearful",
+    "sad",
+    "disgruntled",
+    "serious",
+    "angry",
+    "depressed",
+    "chat",
+    "cheerful",
+    "assistant"
+  ],
+  "fr-FR-DeniseNeural": ["cheerful", "sad"],
+  "fr-FR-HenriNeural": ["cheerful", "sad"],
+  "pt-BR-FranciscaNeural": ["calm"],
+  "it-IT-ElsaNeural": ["cheerful", "sad"],
+  "de-DE-KatjaNeural": ["cheerful", "sad"],
+  "de-DE-ConradNeural": ["cheerful", "sad"],
+  "ru-RU-SvetlanaNeural": ["cheerful", "sad", "angry", "disgruntled", "embarrassed", "fearful"]
 };
-var EXPRESS_AS_STYLES_BY_NORMALIZED_VOICE = new Map(
-  Object.entries(EXPRESS_AS_STYLES_BY_VOICE).map(([voiceName, styles]) => [voiceName.toLowerCase(), styles])
+var VOICE_STYLE_MAP_BY_NORMALIZED_NAME = new Map(
+  Object.entries(VOICE_STYLE_MAP).map(([voiceName, styles]) => [voiceName.toLowerCase(), styles])
 );
 function resolveExpressAsStyles(voiceName, candidates = EXPRESS_AS_STYLE_PRESETS) {
-  if (voiceName === void 0) {
+  const normalizedVoiceName = voiceName?.trim().toLowerCase();
+  if (!normalizedVoiceName) {
     return candidates;
   }
-  const supportedStyles = EXPRESS_AS_STYLES_BY_NORMALIZED_VOICE.get(voiceName.trim().toLowerCase());
+  const supportedStyles = VOICE_STYLE_MAP_BY_NORMALIZED_NAME.get(normalizedVoiceName);
   if (supportedStyles === void 0) {
-    return candidates;
+    return [];
   }
   const supportedStyleSet = new Set(supportedStyles);
   return candidates.filter((style) => supportedStyleSet.has(style));
@@ -418,6 +529,30 @@ var EXPRESS_AS_STYLE_DESCRIPTIONS = {
     ja: "\u8208\u596E\u3057\u305F\u30B9\u30BF\u30A4\u30EB",
     en: "Uses an excited style."
   },
+  empathetic: {
+    ja: "\u5171\u611F\u3092\u793A\u3059\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses an empathetic style."
+  },
+  relieved: {
+    ja: "\u5B89\u5FC3\u3057\u305F\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a relieved style."
+  },
+  fearful: {
+    ja: "\u6050\u308C\u3092\u611F\u3058\u3055\u305B\u308B\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a fearful style."
+  },
+  depressed: {
+    ja: "\u843D\u3061\u8FBC\u3093\u3060\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a depressed style."
+  },
+  disgruntled: {
+    ja: "\u4E0D\u6E80\u3092\u611F\u3058\u3055\u305B\u308B\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a disgruntled style."
+  },
+  embarrassed: {
+    ja: "\u6065\u305A\u304B\u3057\u305D\u3046\u306A\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses an embarrassed style."
+  },
   serious: {
     ja: "\u771F\u5263\u306A\u30B9\u30BF\u30A4\u30EB",
     en: "Uses a serious style."
@@ -457,6 +592,26 @@ var EXPRESS_AS_STYLE_DESCRIPTIONS = {
   whispering: {
     ja: "\u3055\u3055\u3084\u304F\u3088\u3046\u306A\u30B9\u30BF\u30A4\u30EB",
     en: "Uses a whispering style."
+  },
+  "narration-relaxed": {
+    ja: "\u30EA\u30E9\u30C3\u30AF\u30B9\u3057\u305F\u30CA\u30EC\u30FC\u30B7\u30E7\u30F3\u5411\u3051\u306E\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a relaxed narration style."
+  },
+  "poetry-reading": {
+    ja: "\u8A69\u306E\u6717\u8AAD\u5411\u3051\u306E\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a poetry-reading style."
+  },
+  sports_commentary: {
+    ja: "\u30B9\u30DD\u30FC\u30C4\u5B9F\u6CC1\u5411\u3051\u306E\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a sports commentary style."
+  },
+  sports_commentary_excited: {
+    ja: "\u8208\u596E\u3057\u305F\u30B9\u30DD\u30FC\u30C4\u5B9F\u6CC1\u5411\u3051\u306E\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses an excited sports commentary style."
+  },
+  story: {
+    ja: "\u7269\u8A9E\u306E\u6717\u8AAD\u5411\u3051\u306E\u30B9\u30BF\u30A4\u30EB",
+    en: "Uses a storytelling style."
   }
 };
 var SAY_AS_DESCRIPTIONS = {
@@ -568,7 +723,12 @@ var EDITOR_COPY = {
     selectionCountSuffix: "\u6587\u5B57",
     previewSelection: "\u9078\u629E\u90E8\u5206\u3092\u8A66\u8074",
     previewSelectionTitle: "\u9078\u629E\u90E8\u5206\u306ESSML\u3092\u8A66\u8074",
-    noAvailableOptions: "\u5229\u7528\u53EF\u80FD\u306A\u9078\u629E\u80A2\u304C\u3042\u308A\u307E\u305B\u3093\u3002"
+    noAvailableOptions: "\u5229\u7528\u53EF\u80FD\u306A\u9078\u629E\u80A2\u304C\u3042\u308A\u307E\u305B\u3093\u3002",
+    styleNotSupported: "\u3053\u306E\u97F3\u58F0\u306F\u30B9\u30BF\u30A4\u30EB\u6307\u5B9A\u306B\u5BFE\u5FDC\u3057\u3066\u3044\u307E\u305B\u3093",
+    categoryEmotions: "\u611F\u60C5\u30FB\u30C8\u30FC\u30F3",
+    categoryScenarios: "\u4F1A\u8A71\u30FB\u30B7\u30CA\u30EA\u30AA",
+    categoryMedia: "\u30E1\u30C7\u30A3\u30A2\u30FB\u30CA\u30EC\u30FC\u30B7\u30E7\u30F3",
+    categoryOther: "\u305D\u306E\u4ED6"
   },
   en: {
     editorAriaLabel: "SSML editor",
@@ -594,7 +754,12 @@ var EDITOR_COPY = {
     selectionCountSuffix: " characters",
     previewSelection: "Preview selection",
     previewSelectionTitle: "Preview the selected SSML",
-    noAvailableOptions: "No options are available."
+    noAvailableOptions: "No options are available.",
+    styleNotSupported: "This voice does not support style selection.",
+    categoryEmotions: "Emotions / Tone",
+    categoryScenarios: "Conversations / Scenarios",
+    categoryMedia: "Media / Broadcast",
+    categoryOther: "Other"
   }
 };
 var INLINE_BADGE_COPY = {
@@ -991,6 +1156,10 @@ var editorStyles = {
     font: "inherit",
     cursor: "pointer"
   },
+  toolbarButtonActive: {
+    border: "1px solid var(--ssml-editor-active-border)",
+    backgroundColor: "var(--ssml-editor-active-bg)"
+  },
   display: {
     display: "grid",
     gap: "0.5rem"
@@ -1036,12 +1205,35 @@ var editorStyles = {
     whiteSpace: "nowrap",
     cursor: "pointer"
   },
+  toolbarOptionGroup: {
+    display: "grid",
+    gap: "0.125rem",
+    margin: 0,
+    padding: 0,
+    border: 0
+  },
+  toolbarOptionGroupLabel: {
+    padding: "0.375rem 0.5rem 0.125rem",
+    color: "var(--ssml-editor-color)",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    whiteSpace: "nowrap"
+  },
   toolbarEmpty: {
     margin: 0,
     padding: "0.375rem 0.5rem",
     color: "var(--ssml-editor-color)",
     whiteSpace: "nowrap"
   },
+  toolbarEmptySelect: {
+    padding: "0.375rem 0.5rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.125rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+    font: "inherit",
+    textAlign: "left"
+  },
   helpPanel: {
     display: "grid",
     gap: "0.5rem",
@@ -1193,8 +1385,29 @@ function InsertionPopover({
   menuRef,
   onToggle,
   onClose,
-  onApply
+  onApply,
+  optionGroups
 }) {
+  const hasOptions = optionGroups ? optionGroups.some((group) => group.options.length > 0) : insertion.options.length > 0;
+  const renderOption = (option) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: option.value,
+      type: "button",
+      role: "menuitem",
+      style: editorStyles.toolbarOption,
+      title: option.descriptions?.[language] ?? insertion.descriptions[language],
+      disabled: isReadOnly,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => {
+        if (!isReadOnly) {
+          onApply(insertion, option);
+        }
+        onClose();
+      }
+    },
+    option.labels[language]
+  );
   const menu = isOpen && menuPosition && typeof document !== "undefined" ? /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1206,25 +1419,7 @@ function InsertionPopover({
       role: "menu",
       "aria-label": insertion.labels[language]
     },
-    insertion.options.length === 0 ? /* @__PURE__ */ React.createElement("p", { role: "status", style: editorStyles.toolbarEmpty }, emptyOptionsMessage) : insertion.options.map((option) => /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: option.value,
-        type: "button",
-        role: "menuitem",
-        style: editorStyles.toolbarOption,
-        title: option.descriptions?.[language] ?? insertion.descriptions[language],
-        disabled: isReadOnly,
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => {
-          if (!isReadOnly) {
-            onApply(insertion, option);
-          }
-          onClose();
-        }
-      },
-      option.labels[language]
-    ))
+    !hasOptions ? /* @__PURE__ */ React.createElement("div", { role: "presentation" }, /* @__PURE__ */ React.createElement("select", { disabled: true, value: "", style: editorStyles.toolbarEmptySelect }, /* @__PURE__ */ React.createElement("option", { value: "", disabled: true }, emptyOptionsMessage))) : optionGroups ? optionGroups.map((group) => /* @__PURE__ */ React.createElement("fieldset", { key: group.label, style: editorStyles.toolbarOptionGroup }, /* @__PURE__ */ React.createElement("legend", { style: editorStyles.toolbarOptionGroupLabel }, group.label), group.options.map(renderOption))) : insertion.options.map(renderOption)
   ) : null;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: editorStyles.toolbarDropdown }, /* @__PURE__ */ React.createElement(
     "button",
@@ -1249,6 +1444,8 @@ function InsertionPopovers({
   insertions,
   openPopoverId,
   onToggle,
+  emptyOptionsMessages,
+  optionGroups,
   ...props
 }) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, insertions.map((insertion) => /* @__PURE__ */ React.createElement(
@@ -1257,6 +1454,8 @@ function InsertionPopovers({
       key: insertion.id,
       ...props,
       insertion,
+      emptyOptionsMessage: emptyOptionsMessages?.[insertion.id] ?? props.emptyOptionsMessage,
+      optionGroups: optionGroups?.[insertion.id],
       isOpen: openPopoverId === insertion.id,
       onToggle: (trigger) => onToggle(insertion.id, trigger)
     }
@@ -1264,23 +1463,57 @@ function InsertionPopovers({
 }
 
 // packages/ssml-editor-react/src/components/popovers/ProsodyPopovers.tsx
-function ProsodyPopovers({ insertions, voiceName, ...props }) {
+var CATEGORY_LABEL_KEYS = {
+  emotions: "categoryEmotions",
+  scenarios: "categoryScenarios",
+  media: "categoryMedia",
+  other: "categoryOther"
+};
+var CATEGORY_ORDER = ["emotions", "scenarios", "media", "other"];
+function isExpressAsInsertion(insertion) {
+  return insertion.id === "emotion" && insertion.tagName?.toLowerCase() === "mstts:express-as";
+}
+function createOptionGroups(options, language) {
+  const t = (key) => EDITOR_COPY[language][key];
+  return CATEGORY_ORDER.map((category) => ({
+    label: t(CATEGORY_LABEL_KEYS[category]),
+    options: options.filter((option) => getExpressAsStyleCategory(option.value) === category)
+  })).filter((group) => group.options.length > 0);
+}
+function ProsodyPopovers({ insertions, voiceName, language, ...props }) {
+  const emptyOptionsMessages = {};
   const filteredInsertions = insertions.map((insertion) => {
-    if (insertion.id !== "emotion" || insertion.tagName?.toLowerCase() !== "mstts:express-as") {
+    if (!isExpressAsInsertion(insertion)) {
       return insertion;
     }
-    const styles = new Set(
+    const availableStyles = new Set(
       resolveExpressAsStyles(
         voiceName,
         insertion.options.map((option) => option.value)
       )
     );
+    if (availableStyles.size === 0) {
+      emptyOptionsMessages[insertion.id] = EDITOR_COPY[language].styleNotSupported;
+    }
+    const availableOptions = insertion.options.filter((option) => availableStyles.has(option.value));
     return {
       ...insertion,
-      options: insertion.options.filter((option) => styles.has(option.value))
+      options: availableOptions
     };
   });
-  return /* @__PURE__ */ React.createElement(InsertionPopovers, { ...props, insertions: filteredInsertions });
+  const optionGroups = Object.fromEntries(
+    filteredInsertions.filter(isExpressAsInsertion).map((insertion) => [insertion.id, createOptionGroups(insertion.options, language)])
+  );
+  return /* @__PURE__ */ React.createElement(
+    InsertionPopovers,
+    {
+      ...props,
+      emptyOptionsMessages,
+      language,
+      insertions: filteredInsertions,
+      optionGroups
+    }
+  );
 }
 
 // packages/ssml-editor-react/src/components/popovers/TextPopovers.tsx
@@ -2648,148 +2881,7 @@ function formatXmlFragment(xml) {
   return preserveTrailingLineBreak(unwrapFormattedFragment(formatted) ?? xml, trailingLineBreaks);
 }
 
-// packages/ssml-editor-react/src/ssmlInsertion.ts
-function isLineStart(value, offset) {
-  return offset === 0 || value[offset - 1] === "\n" || value[offset - 1] === "\r";
-}
-function isLineEnd(value, offset) {
-  return offset === value.length || value[offset] === "\n" || value[offset] === "\r";
-}
-function getLineBreakAt(value, offset) {
-  if (value.startsWith("\r\n", offset)) {
-    return "\r\n";
-  }
-  if (value[offset] === "\n" || value[offset] === "\r") {
-    return value[offset];
-  }
-  return "";
-}
-function startsWithLineBreak(value) {
-  return value.startsWith("\n") || value.startsWith("\r");
-}
-function endsWithLineBreak(value) {
-  return value.endsWith("\n") || value.endsWith("\r");
-}
-function createSsmlInsertionEdit(source, startOffset, endOffset, template, eol = "\n", selectedText = startOffset === endOffset ? "" : source.slice(startOffset, endOffset)) {
-  if (template.mode === SSML_INSERTION_MODES.wrap) {
-    const trailingLineBreak2 = getLineBreakAt(source, endOffset) === "" ? eol : "";
-    return {
-      replacement: `${template.prefix}${selectedText}${template.suffix}${trailingLineBreak2}`,
-      selectionOffset: template.prefix.length
-    };
-  }
-  const followingLineBreak = getLineBreakAt(source, endOffset);
-  const leadingLineBreak = !isLineStart(source, startOffset) && !startsWithLineBreak(template.prefix) ? eol : "";
-  const needsTrailingLineBreak = selectedText.length > 0 ? !selectedText.startsWith("\n") && !selectedText.startsWith("\r") : !isLineEnd(source, endOffset) || followingLineBreak === "";
-  const trailingLineBreak = needsTrailingLineBreak && !endsWithLineBreak(template.prefix) ? eol : "";
-  const insertionPrefix = `${leadingLineBreak}${template.prefix}`;
-  return {
-    replacement: `${insertionPrefix}${trailingLineBreak}${selectedText}`,
-    selectionOffset: insertionPrefix.length + trailingLineBreak.length + (selectedText.length === 0 && trailingLineBreak === "" ? followingLineBreak.length : 0)
-  };
-}
-
-// packages/ssml-editor-react/src/ssmlContext.ts
-function findTagEnd2(source, start, limit) {
-  let quote;
-  for (let index = start + 1; index < limit; index += 1) {
-    const character = source[index];
-    if (quote !== void 0) {
-      if (character === quote) {
-        quote = void 0;
-      }
-      continue;
-    }
-    if (character === '"' || character === "'") {
-      quote = character;
-      continue;
-    }
-    if (character === ">") {
-      return index;
-    }
-  }
-  return -1;
-}
-function getVoiceName(tag) {
-  return tag.match(/\bname\s*=\s*(["'])([\s\S]*?)\1/i)?.[2];
-}
-function closeElement(stack, name) {
-  for (let index = stack.length - 1; index >= 0; index -= 1) {
-    if (stack[index]?.name === name) {
-      stack.splice(index);
-      return;
-    }
-  }
-}
-function findSsmlVoiceContext(source, offset) {
-  const limit = Math.max(0, Math.min(offset, source.length));
-  const stack = [];
-  let index = 0;
-  while (index < limit) {
-    const tagStart = source.indexOf("<", index);
-    if (tagStart === -1 || tagStart >= limit) {
-      break;
-    }
-    if (source.startsWith("<!--", tagStart)) {
-      const end = source.indexOf("-->", tagStart + 4);
-      index = end === -1 || end + 3 > limit ? limit : end + 3;
-      continue;
-    }
-    if (source.startsWith("<![CDATA[", tagStart)) {
-      const end = source.indexOf("]]>", tagStart + 9);
-      index = end === -1 || end + 3 > limit ? limit : end + 3;
-      continue;
-    }
-    if (source.startsWith("<?", tagStart)) {
-      const end = source.indexOf("?>", tagStart + 2);
-      index = end === -1 || end + 2 > limit ? limit : end + 2;
-      continue;
-    }
-    const tagEnd = findTagEnd2(source, tagStart, limit);
-    if (tagEnd === -1) {
-      break;
-    }
-    const tag = source.slice(tagStart, tagEnd + 1);
-    if (tag.startsWith("<!")) {
-      index = tagEnd + 1;
-      continue;
-    }
-    const closingMatch = tag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
-    if (closingMatch?.[1]) {
-      closeElement(stack, closingMatch[1].toLowerCase());
-      index = tagEnd + 1;
-      continue;
-    }
-    const openingMatch = tag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
-    if (openingMatch?.[1] && !/\/\s*>$/.test(tag)) {
-      const name = openingMatch[1].toLowerCase();
-      stack.push({
-        name,
-        ...name === "voice" ? { voiceName: getVoiceName(tag) } : {}
-      });
-    }
-    index = tagEnd + 1;
-  }
-  for (let stackIndex = stack.length - 1; stackIndex >= 0; stackIndex -= 1) {
-    const element = stack[stackIndex];
-    if (element?.name === "voice") {
-      return element.voiceName === void 0 ? {} : { voiceName: element.voiceName };
-    }
-  }
-  return void 0;
-}
-
-// packages/ssml-editor-react/src/hooks/useSsmlEditorState.ts
-var TIMING_INSERTION_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence"]);
-var PROSODY_INSERTION_TAGS = /* @__PURE__ */ new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
-var TEXT_INSERTION_TAGS = /* @__PURE__ */ new Set(["sub", "say-as", "phoneme", "w", "lang"]);
-var EMPTY_SELECTION_OVERLAY = {
-  selectedText: "",
-  characterCount: 0,
-  hasSelection: false,
-  position: null,
-  placement: "above"
-};
+// packages/ssml-editor-react/src/editableSsml.ts
 function isSsmlElement(node) {
   return typeof node !== "string" && node.type !== "text";
 }
@@ -2884,48 +2976,6 @@ function preserveEmptyPairElements(nodes, startTags, startTagIndex) {
 function getDocumentChildren2(document2) {
   return document2.children ?? (document2.content === void 0 ? [] : [document2.content]);
 }
-function getPartialContext(document2) {
-  const children = getDocumentChildren2(document2);
-  const voice = findFirstElement(children, isVoice);
-  const prosody = findFirstElement(children, isProsody);
-  const context = {
-    version: document2.version,
-    lang: document2.lang
-  };
-  if (voice) {
-    context.voice = {
-      name: voice.name,
-      effect: voice.effect,
-      attributes: voice.attributes
-    };
-  }
-  if (prosody) {
-    context.prosody = {
-      rate: prosody.rate,
-      pitch: prosody.pitch,
-      volume: prosody.volume,
-      contour: prosody.contour,
-      range: prosody.range,
-      attributes: prosody.attributes
-    };
-  }
-  return context;
-}
-function findFirstElement(nodes, predicate) {
-  for (const node of nodes) {
-    if (!isSsmlElement(node)) {
-      continue;
-    }
-    if (predicate(node)) {
-      return node;
-    }
-    const child = findFirstElement(node.children ?? [], predicate);
-    if (child) {
-      return child;
-    }
-  }
-  return void 0;
-}
 function findFirstElementPath(nodes, predicate, ancestors = []) {
   for (const node of nodes) {
     if (!isSsmlElement(node)) {
@@ -3006,13 +3056,10 @@ function getEditableRegion(document2) {
     ...voice ? { voiceName: voice.name } : {}
   };
 }
-function getEditableChildren(document2) {
-  return getEditableRegion(document2).children;
-}
 function getEditableText(document2) {
-  return serializeEditableText(getEditableChildren(document2), document2.lang);
+  return serializeEditableText(getEditableRegion(document2).children, document2.lang);
 }
-function updateText(document2, value) {
+function updateEditableText(document2, value) {
   const nextChildren = parseEditableText(value, document2.lang);
   const editableChildren = nextChildren.length > 0 ? nextChildren : [value];
   const children = getDocumentChildren2(document2);
@@ -3032,6 +3079,241 @@ function updateText(document2, value) {
   }
   return withChildren(document2, editableChildren);
 }
+
+// packages/ssml-editor-react/src/ssmlInsertion.ts
+function isLineStart(value, offset) {
+  return offset === 0 || value[offset - 1] === "\n" || value[offset - 1] === "\r";
+}
+function isLineEnd(value, offset) {
+  return offset === value.length || value[offset] === "\n" || value[offset] === "\r";
+}
+function getLineBreakAt(value, offset) {
+  if (value.startsWith("\r\n", offset)) {
+    return "\r\n";
+  }
+  if (value[offset] === "\n" || value[offset] === "\r") {
+    return value[offset];
+  }
+  return "";
+}
+function startsWithLineBreak(value) {
+  return value.startsWith("\n") || value.startsWith("\r");
+}
+function endsWithLineBreak(value) {
+  return value.endsWith("\n") || value.endsWith("\r");
+}
+function createSsmlInsertionEdit(source, startOffset, endOffset, template, eol = "\n", selectedText = startOffset === endOffset ? "" : source.slice(startOffset, endOffset)) {
+  if (template.mode === SSML_INSERTION_MODES.wrap) {
+    const trailingLineBreak2 = getLineBreakAt(source, endOffset) === "" ? eol : "";
+    return {
+      replacement: `${template.prefix}${selectedText}${template.suffix}${trailingLineBreak2}`,
+      selectionOffset: template.prefix.length
+    };
+  }
+  const followingLineBreak = getLineBreakAt(source, endOffset);
+  const leadingLineBreak = !isLineStart(source, startOffset) && !startsWithLineBreak(template.prefix) ? eol : "";
+  const needsTrailingLineBreak = selectedText.length > 0 ? !selectedText.startsWith("\n") && !selectedText.startsWith("\r") : !isLineEnd(source, endOffset) || followingLineBreak === "";
+  const trailingLineBreak = needsTrailingLineBreak && !endsWithLineBreak(template.prefix) ? eol : "";
+  const insertionPrefix = `${leadingLineBreak}${template.prefix}`;
+  return {
+    replacement: `${insertionPrefix}${trailingLineBreak}${selectedText}`,
+    selectionOffset: insertionPrefix.length + trailingLineBreak.length + (selectedText.length === 0 && trailingLineBreak === "" ? followingLineBreak.length : 0)
+  };
+}
+
+// packages/ssml-editor-react/src/ssmlContext.ts
+function findTagEnd2(source, start, limit) {
+  let quote;
+  for (let index = start + 1; index < limit; index += 1) {
+    const character = source[index];
+    if (quote !== void 0) {
+      if (character === quote) {
+        quote = void 0;
+      }
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+      continue;
+    }
+    if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+function getVoiceName(tag) {
+  return tag.match(/\bname\s*=\s*(["'])([\s\S]*?)\1/i)?.[2];
+}
+function closeElement(stack, name) {
+  for (let index = stack.length - 1; index >= 0; index -= 1) {
+    if (stack[index]?.name === name) {
+      stack.splice(index);
+      return;
+    }
+  }
+}
+function findActiveSsmlTags(source, offset) {
+  const limit = Math.max(0, Math.min(offset, source.length));
+  const stack = [];
+  let index = 0;
+  while (index < source.length) {
+    const tagStart = source.indexOf("<", index);
+    if (tagStart === -1 || tagStart > limit) {
+      break;
+    }
+    const nonContentEnd = source.startsWith("<!--", tagStart) ? source.indexOf("-->", tagStart + 4) : source.startsWith("<![CDATA[", tagStart) ? source.indexOf("]]>", tagStart + 9) : source.startsWith("<?", tagStart) ? source.indexOf("?>", tagStart + 2) : void 0;
+    if (nonContentEnd !== void 0) {
+      const delimiterLength = source.startsWith("<?", tagStart) ? 2 : 3;
+      const end = nonContentEnd === -1 ? source.length : nonContentEnd + delimiterLength;
+      if (limit < end) {
+        break;
+      }
+      index = end;
+      continue;
+    }
+    const tagEnd = findTagEnd2(source, tagStart, source.length);
+    const tag = source.slice(tagStart, tagEnd === -1 ? source.length : tagEnd + 1);
+    const closingMatch = tag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    const openingMatch = tag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    if (tagEnd === -1 || limit <= tagEnd) {
+      if (openingMatch?.[1]) {
+        stack.push({ name: openingMatch[1].toLowerCase() });
+      }
+      break;
+    }
+    if (closingMatch?.[1]) {
+      closeElement(stack, closingMatch[1].toLowerCase());
+    } else if (openingMatch?.[1] && !/\/\s*>$/.test(tag)) {
+      stack.push({ name: openingMatch[1].toLowerCase() });
+    }
+    index = tagEnd + 1;
+  }
+  return new Set(stack.map(({ name }) => name));
+}
+function findSsmlVoiceContext(source, offset) {
+  const limit = Math.max(0, Math.min(offset, source.length));
+  const stack = [];
+  let index = 0;
+  while (index < limit) {
+    const tagStart = source.indexOf("<", index);
+    if (tagStart === -1 || tagStart >= limit) {
+      break;
+    }
+    if (source.startsWith("<!--", tagStart)) {
+      const end = source.indexOf("-->", tagStart + 4);
+      index = end === -1 || end + 3 > limit ? limit : end + 3;
+      continue;
+    }
+    if (source.startsWith("<![CDATA[", tagStart)) {
+      const end = source.indexOf("]]>", tagStart + 9);
+      index = end === -1 || end + 3 > limit ? limit : end + 3;
+      continue;
+    }
+    if (source.startsWith("<?", tagStart)) {
+      const end = source.indexOf("?>", tagStart + 2);
+      index = end === -1 || end + 2 > limit ? limit : end + 2;
+      continue;
+    }
+    const tagEnd = findTagEnd2(source, tagStart, limit);
+    if (tagEnd === -1) {
+      break;
+    }
+    const tag = source.slice(tagStart, tagEnd + 1);
+    if (tag.startsWith("<!")) {
+      index = tagEnd + 1;
+      continue;
+    }
+    const closingMatch = tag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    if (closingMatch?.[1]) {
+      closeElement(stack, closingMatch[1].toLowerCase());
+      index = tagEnd + 1;
+      continue;
+    }
+    const openingMatch = tag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    if (openingMatch?.[1] && !/\/\s*>$/.test(tag)) {
+      const name = openingMatch[1].toLowerCase();
+      stack.push({
+        name,
+        ...name === "voice" ? { voiceName: getVoiceName(tag) } : {}
+      });
+    }
+    index = tagEnd + 1;
+  }
+  for (let stackIndex = stack.length - 1; stackIndex >= 0; stackIndex -= 1) {
+    const element = stack[stackIndex];
+    if (element?.name === "voice") {
+      return element.voiceName === void 0 ? {} : { voiceName: element.voiceName };
+    }
+  }
+  return void 0;
+}
+
+// packages/ssml-editor-react/src/hooks/useSsmlEditorState.ts
+var TIMING_INSERTION_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence"]);
+var PROSODY_INSERTION_TAGS = /* @__PURE__ */ new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
+var TEXT_INSERTION_TAGS = /* @__PURE__ */ new Set(["sub", "say-as", "phoneme", "w", "lang"]);
+var EMPTY_SELECTION_OVERLAY = {
+  selectedText: "",
+  characterCount: 0,
+  hasSelection: false,
+  position: null,
+  placement: "above"
+};
+function isSsmlElement2(node) {
+  return typeof node !== "string" && node.type !== "text";
+}
+function isVoice2(element) {
+  return element.type === "voice";
+}
+function isProsody2(element) {
+  return element.type === "prosody";
+}
+function getDocumentChildren3(document2) {
+  return document2.children ?? (document2.content === void 0 ? [] : [document2.content]);
+}
+function getPartialContext(document2) {
+  const children = getDocumentChildren3(document2);
+  const voice = findFirstElement(children, isVoice2);
+  const prosody = findFirstElement(children, isProsody2);
+  const context = {
+    version: document2.version,
+    lang: document2.lang
+  };
+  if (voice) {
+    context.voice = {
+      name: voice.name,
+      effect: voice.effect,
+      attributes: voice.attributes
+    };
+  }
+  if (prosody) {
+    context.prosody = {
+      rate: prosody.rate,
+      pitch: prosody.pitch,
+      volume: prosody.volume,
+      contour: prosody.contour,
+      range: prosody.range,
+      attributes: prosody.attributes
+    };
+  }
+  return context;
+}
+function findFirstElement(nodes, predicate) {
+  for (const node of nodes) {
+    if (!isSsmlElement2(node)) {
+      continue;
+    }
+    if (predicate(node)) {
+      return node;
+    }
+    const child = findFirstElement(node.children ?? [], predicate);
+    if (child) {
+      return child;
+    }
+  }
+  return void 0;
+}
 function getSelectionInfo(editor) {
   const model = editor.getModel();
   const selection = editor.getSelection();
@@ -3167,6 +3449,7 @@ function useSsmlEditorState({
   const [decorationsVisible, setDecorationsVisible] = (0, import_react.useState)(showDecorations);
   const [isHelpOpen, setIsHelpOpen] = (0, import_react.useState)(false);
   const [syntaxError, setSyntaxError] = (0, import_react.useState)(null);
+  const [activeTags, setActiveTags] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
   const [openPopoverId, setOpenPopoverId] = (0, import_react.useState)(null);
   const [popoverVoiceName, setPopoverVoiceName] = (0, import_react.useState)(void 0);
   const [popoverPosition, setPopoverPosition] = (0, import_react.useState)(null);
@@ -3269,6 +3552,14 @@ function useSsmlEditorState({
       });
     }
   }, []);
+  const updateActiveTags = (0, import_react.useCallback)((nextTags) => {
+    setActiveTags((currentTags) => {
+      if (currentTags.size === nextTags.size && [...currentTags].every((tag) => nextTags.has(tag))) {
+        return currentTags;
+      }
+      return new Set(nextTags);
+    });
+  }, []);
   const commit = (0, import_react.useCallback)(
     (nextDocument) => {
       draftDocumentRef.current = nextDocument;
@@ -3280,7 +3571,7 @@ function useSsmlEditorState({
   );
   const handleTextChange = (0, import_react.useCallback)(
     (value) => {
-      commit(updateText(draftDocumentRef.current, value));
+      commit(updateEditableText(draftDocumentRef.current, value));
       if (editorRef.current) {
         refreshSelectionOverlay(editorRef.current, false);
       }
@@ -3324,7 +3615,7 @@ function useSsmlEditorState({
   }, [commit]);
   const handleFormat = (0, import_react.useCallback)(() => {
     const value = editorRef.current?.getValue() ?? getEditableText(draftDocumentRef.current);
-    commit(updateText(draftDocumentRef.current, formatXmlFragment(value)));
+    commit(updateEditableText(draftDocumentRef.current, formatXmlFragment(value)));
   }, [commit]);
   const handleUndo = (0, import_react.useCallback)(() => {
     editorRef.current?.trigger("toolbar", "undo", null);
@@ -3354,7 +3645,7 @@ function useSsmlEditorState({
   );
   const getFullSsml = (0, import_react.useCallback)(
     () => buildSsml(
-      editorRef.current ? updateText(draftDocumentRef.current, editorRef.current.getValue()) : draftDocumentRef.current
+      editorRef.current ? updateEditableText(draftDocumentRef.current, editorRef.current.getValue()) : draftDocumentRef.current
     ),
     []
   );
@@ -3364,6 +3655,7 @@ function useSsmlEditorState({
     draftDocument,
     text: getEditableText(draftDocument),
     selectionOverlay,
+    activeTags,
     isDarkTheme: resolvedTheme === "dark" || resolvedTheme === "system" && isDark,
     decorationsVisible,
     setDecorationsVisible,
@@ -3385,6 +3677,7 @@ function useSsmlEditorState({
     previewSelection,
     canPreviewSelection: onPreviewSelection !== void 0,
     refreshSelectionOverlay,
+    updateActiveTags,
     getSelectedSsml: getSelectedSsmlValue,
     getCurrentLineSsml: getCurrentLineSsmlValue,
     getFullSsml,
@@ -3618,7 +3911,8 @@ function registerSsmlCompletionProvider(monaco, options = {}) {
           ...attributeValues?.map((value2) => ({
             label: value2,
             kind: monaco.languages.CompletionItemKind.Value,
-            insertText: value2
+            insertText: value2,
+            range
           })) ?? []
         ]
       };
@@ -4434,6 +4728,7 @@ function useSsmlMonaco({
   decorationsVisible,
   getOuterVoiceName,
   onSelectionOverlayChange,
+  onActiveTagsChange,
   onSyntaxErrorChange
 }) {
   const internalEditorRef = (0, import_react2.useRef)(null);
@@ -4443,6 +4738,7 @@ function useSsmlMonaco({
   const codeActionProviderRef = (0, import_react2.useRef)(null);
   const releaseHoverProviderRef = (0, import_react2.useRef)(null);
   const selectionChangeRef = (0, import_react2.useRef)(null);
+  const cursorPositionChangeRef = (0, import_react2.useRef)(null);
   const diagnosticsChangeRef = (0, import_react2.useRef)(null);
   const diagnosticsTimeoutRef = (0, import_react2.useRef)(null);
   const selectionLayoutDisposablesRef = (0, import_react2.useRef)([]);
@@ -4451,11 +4747,13 @@ function useSsmlMonaco({
   const decorationsVisibleRef = (0, import_react2.useRef)(decorationsVisible);
   const getOuterVoiceNameRef = (0, import_react2.useRef)(getOuterVoiceName);
   const onSelectionOverlayChangeRef = (0, import_react2.useRef)(onSelectionOverlayChange);
+  const onActiveTagsChangeRef = (0, import_react2.useRef)(onActiveTagsChange);
   const onSyntaxErrorChangeRef = (0, import_react2.useRef)(onSyntaxErrorChange);
   languageRef.current = language;
   decorationsVisibleRef.current = decorationsVisible;
   getOuterVoiceNameRef.current = getOuterVoiceName;
   onSelectionOverlayChangeRef.current = onSelectionOverlayChange;
+  onActiveTagsChangeRef.current = onActiveTagsChange;
   onSyntaxErrorChangeRef.current = onSyntaxErrorChange;
   const runSsmlDiagnostics = (0, import_react2.useCallback)((editor, monaco) => {
     const model = editor.getModel();
@@ -4485,6 +4783,15 @@ function useSsmlMonaco({
     diagnosticsChangeRef.current?.dispose();
     diagnosticsChangeRef.current = null;
   }, []);
+  const syncActiveTags = (0, import_react2.useCallback)((editor) => {
+    const model = editor.getModel();
+    const position = editor.getPosition();
+    if (!model || !position) {
+      onActiveTagsChangeRef.current(/* @__PURE__ */ new Set());
+      return;
+    }
+    onActiveTagsChangeRef.current(findActiveSsmlTags(model.getValue(), model.getOffsetAt(position)));
+  }, []);
   const disposeMonacoResources = (0, import_react2.useCallback)(() => {
     clearSsmlDiagnosticsResources();
     const model = editorRef.current?.getModel();
@@ -4494,6 +4801,8 @@ function useSsmlMonaco({
     }
     selectionChangeRef.current?.dispose();
     selectionChangeRef.current = null;
+    cursorPositionChangeRef.current?.dispose();
+    cursorPositionChangeRef.current = null;
     completionProviderRef.current?.dispose();
     completionProviderRef.current = null;
     codeActionProviderRef.current?.dispose();
@@ -4515,6 +4824,9 @@ function useSsmlMonaco({
       selectionChangeRef.current = editor.onDidChangeCursorSelection(() => {
         onSelectionOverlayChangeRef.current(editor, true);
       });
+      cursorPositionChangeRef.current = editor.onDidChangeCursorPosition(() => {
+        syncActiveTags(editor);
+      });
       diagnosticsChangeRef.current = editor.onDidChangeModelContent(() => {
         const model2 = editor.getModel();
         if (model2) {
@@ -4526,6 +4838,7 @@ function useSsmlMonaco({
             inlineDecorationIdsRef.current
           );
         }
+        syncActiveTags(editor);
         scheduleSsmlDiagnostics(editor, monaco);
       });
       selectionLayoutDisposablesRef.current = [
@@ -4551,8 +4864,9 @@ function useSsmlMonaco({
         );
       }
       onSelectionOverlayChangeRef.current(editor, true);
+      syncActiveTags(editor);
     },
-    [disposeMonacoResources, editorRef, runSsmlDiagnostics, scheduleSsmlDiagnostics]
+    [disposeMonacoResources, editorRef, runSsmlDiagnostics, scheduleSsmlDiagnostics, syncActiveTags]
   );
   (0, import_react2.useEffect)(() => {
     const monaco = monacoRef.current;
@@ -4940,6 +5254,8 @@ var STYLE_CSS = `
   --ssml-editor-border: #d1d5db;
   --ssml-editor-control-bg: #f9fafb;
   --ssml-editor-control-border: #9ca3af;
+  --ssml-editor-active-bg: #dbeafe;
+  --ssml-editor-active-border: #2563eb;
   --ssml-editor-preview-bg: #f3f4f6;
   --ssml-editor-error: #b91c1c;
   --ssml-editor-error-bg: #fef2f2;
@@ -4957,6 +5273,8 @@ var STYLE_CSS = `
   --ssml-editor-border: #374151;
   --ssml-editor-control-bg: #111827;
   --ssml-editor-control-border: #4b5563;
+  --ssml-editor-active-bg: #1e3a8a;
+  --ssml-editor-active-border: #60a5fa;
   --ssml-editor-preview-bg: #111827;
   --ssml-editor-error: #fca5a5;
   --ssml-editor-error-bg: #450a0a;
@@ -5176,6 +5494,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     editorRef,
     text,
     selectionOverlay,
+    activeTags,
     isDarkTheme,
     decorationsVisible,
     setDecorationsVisible,
@@ -5196,6 +5515,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     previewSelection,
     canPreviewSelection,
     refreshSelectionOverlay,
+    updateActiveTags,
     getSelectedSsml: getSelectedSsml2,
     getCurrentLineSsml: getCurrentLineSsml2,
     getFullSsml,
@@ -5224,6 +5544,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     decorationsVisible,
     getOuterVoiceName,
     onSelectionOverlayChange: refreshSelectionOverlay,
+    onActiveTagsChange: updateActiveTags,
     onSyntaxErrorChange: setSyntaxError
   });
   (0, import_react3.useImperativeHandle)(
@@ -5239,12 +5560,13 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     const isTimingPopover = insertion.tagName !== void 0 && TIMING_POPOVER_TAGS.has(insertion.tagName);
     const isProsodyPopover = insertion.tagName !== void 0 && PROSODY_POPOVER_TAGS.has(insertion.tagName);
     const isTextPopover = insertion.tagName !== void 0 && TEXT_POPOVER_TAGS.has(insertion.tagName);
+    const insertionButtonStyle = insertion.tagName && activeTags.has(insertion.tagName.toLowerCase()) ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle;
     const props = {
       language,
       isDarkTheme,
       showToolbarIcons,
       showToolbarText,
-      toolbarButtonStyle,
+      toolbarButtonStyle: insertionButtonStyle,
       emptyOptionsMessage: copy.noAvailableOptions,
       isReadOnly,
       openPopoverId,