ssml-builder-js 2.1.0 → 2.3.0

package/dist/react.js

@@ -36,7 +36,9 @@ __export(react_exports, {
   SSML_HOVER_COPY: () => SSML_HOVER_COPY,
   SSML_INSERTIONS: () => SSML_INSERTIONS,
   SsmlEditor: () => SsmlEditor,
-  createSsmlEditorInsertionDefinition: () => createSsmlEditorInsertionDefinition
+  createSsmlEditorInsertionDefinition: () => createSsmlEditorInsertionDefinition,
+  registerSsmlCodeLens: () => registerSsmlCodeLens,
+  updateTagAttribute: () => updateTagAttribute
 });
 module.exports = __toCommonJS(react_exports);
 
@@ -58,7 +60,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 +82,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 +128,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 +230,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 +531,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 +594,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 +725,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 +756,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 +1158,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 +1207,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 +1387,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 +1421,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 +1446,8 @@ function InsertionPopovers({
   insertions,
   openPopoverId,
   onToggle,
+  emptyOptionsMessages,
+  optionGroups,
   ...props
 }) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, insertions.map((insertion) => /* @__PURE__ */ React.createElement(
@@ -1257,6 +1456,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 +1465,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
@@ -1355,6 +1590,7 @@ var SSML_ATTRS = {
   STYLE: "style",
   STYLE_DEGREE: "styledegree",
   STYLE_DEGREE_CAMEL: "styleDegree",
+  STYLE_DEGREE_HYPHEN: "style-degree",
   ROLE: "role",
   INTERPRET_AS: "interpret-as",
   FORMAT: "format",
@@ -1898,7 +2134,12 @@ function convertElement(node) {
     case SSML_TAGS.MSTTS_EXPRESS_AS: {
       const element = { type: node.name };
       const style = readAttribute(attributes, SSML_ATTRS.STYLE);
-      const styleDegree = readAttribute(attributes, SSML_ATTRS.STYLE_DEGREE, SSML_ATTRS.STYLE_DEGREE_CAMEL);
+      const styleDegree = readAttribute(
+        attributes,
+        SSML_ATTRS.STYLE_DEGREE,
+        SSML_ATTRS.STYLE_DEGREE_CAMEL,
+        SSML_ATTRS.STYLE_DEGREE_HYPHEN
+      );
       const role = readAttribute(attributes, SSML_ATTRS.ROLE);
       if (style !== void 0) element.style = style;
       if (styleDegree !== void 0) element.styleDegree = styleDegree;
@@ -2648,148 +2889,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 +2984,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 +3064,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 +3087,261 @@ 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 escapeXmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;");
+}
+function updateTagAttribute(text, tagRange, attributeName, newValue) {
+  const start = Math.max(0, Math.min(tagRange.start, text.length));
+  const end = Math.max(start, Math.min(tagRange.end, text.length));
+  const tag = text.slice(start, end);
+  const escapedAttributeName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const attributePattern = new RegExp(`(\\b${escapedAttributeName}\\s*=\\s*)(["'])([\\s\\S]*?)\\2`, "i");
+  const escapedValue = escapeXmlAttribute(newValue);
+  const match = tag.match(attributePattern);
+  if (match?.index !== void 0) {
+    const valueStart = match.index + match[0].indexOf(match[2]) + 1;
+    const valueEnd = valueStart + (match[3]?.length ?? 0);
+    return `${text.slice(0, start)}${tag.slice(0, valueStart)}${escapedValue}${tag.slice(valueEnd)}${text.slice(end)}`;
+  }
+  const insertionIndex = tag.endsWith("/>") ? tag.length - 2 : tag.length - 1;
+  const attribute = ` ${attributeName}="${escapedValue}"`;
+  return `${text.slice(0, start)}${tag.slice(0, insertionIndex)}${attribute}${tag.slice(insertionIndex)}${text.slice(end)}`;
+}
+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,9 +3477,11 @@ 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);
+  const pendingCodeLensAttributeRef = (0, import_react.useRef)(null);
   const helpPanelId = (0, import_react.useId)();
   const draftDocumentRef = (0, import_react.useRef)(document2);
   const onSelectionChangeRef = (0, import_react.useRef)(onSelectionChange);
@@ -3195,6 +3507,7 @@ function useSsmlEditorState({
     setDecorationsVisible(showDecorations);
   }, [showDecorations]);
   const closePopover = (0, import_react.useCallback)((restoreFocus = false) => {
+    pendingCodeLensAttributeRef.current = null;
     setOpenPopoverId(null);
     setPopoverVoiceName(void 0);
     setPopoverPosition(null);
@@ -3203,6 +3516,7 @@ function useSsmlEditorState({
     }
   }, []);
   const togglePopover = (0, import_react.useCallback)((id, trigger) => {
+    pendingCodeLensAttributeRef.current = null;
     setOpenPopoverId((currentId) => {
       if (currentId === id) {
         setPopoverVoiceName(void 0);
@@ -3226,13 +3540,41 @@ function useSsmlEditorState({
     }
     const updatePopoverPosition = () => {
       const trigger = activePopoverTriggerRef.current;
-      if (!trigger) {
+      if (trigger) {
+        const triggerBounds = trigger.getBoundingClientRect();
+        setPopoverPosition({
+          top: triggerBounds.bottom + 4,
+          left: triggerBounds.left
+        });
+        return;
+      }
+      const pending = pendingCodeLensAttributeRef.current;
+      const editor = editorRef.current;
+      const model = editor?.getModel();
+      if (!pending || !editor || !model) {
+        return;
+      }
+      const position = model.getPositionAt(pending.tagRange.start);
+      const visiblePosition = editor.getScrolledVisiblePosition(position);
+      const editorElement = editor.getDomNode();
+      if (!visiblePosition || !editorElement) {
         return;
       }
-      const triggerBounds = trigger.getBoundingClientRect();
+      const editorBounds = editorElement.getBoundingClientRect();
+      const menu = activePopoverMenuRef.current;
+      const margin = 8;
       setPopoverPosition({
-        top: triggerBounds.bottom + 4,
-        left: triggerBounds.left
+        top: Math.max(
+          margin,
+          Math.min(
+            editorBounds.top + visiblePosition.top + visiblePosition.height + 4,
+            window.innerHeight - (menu?.offsetHeight ?? 0) - margin
+          )
+        ),
+        left: Math.max(
+          margin,
+          Math.min(editorBounds.left + visiblePosition.left, window.innerWidth - (menu?.offsetWidth ?? 0) - margin)
+        )
       });
     };
     const handlePointerDown = (event) => {
@@ -3269,6 +3611,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 +3630,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);
       }
@@ -3289,11 +3639,48 @@ function useSsmlEditorState({
   );
   const handleInsert = (0, import_react.useCallback)(
     (insertion, option) => {
-      if (editorRef.current) {
-        applySsmlInsertion(editorRef.current, insertion, option);
+      const editor = editorRef.current;
+      const pending = pendingCodeLensAttributeRef.current;
+      if (!editor) {
+        return;
       }
+      if (pending?.insertionId === insertion.id) {
+        const model = editor.getModel();
+        if (model && model.getVersionId() === pending.modelVersionId) {
+          const source = model.getValue();
+          const tagText = source.slice(pending.tagRange.start, pending.tagRange.end);
+          const updatedTag = updateTagAttribute(
+            tagText,
+            { start: 0, end: tagText.length },
+            pending.attributeName,
+            option.value
+          );
+          const start = model.getPositionAt(pending.tagRange.start);
+          const end = model.getPositionAt(pending.tagRange.end);
+          editor.pushUndoStop();
+          editor.executeEdits("ssml-code-lens", [
+            {
+              range: {
+                startLineNumber: start.lineNumber,
+                startColumn: start.column,
+                endLineNumber: end.lineNumber,
+                endColumn: end.column
+              },
+              text: updatedTag
+            }
+          ]);
+          editor.pushUndoStop();
+          editor.focus();
+        }
+        pendingCodeLensAttributeRef.current = null;
+        if (!model || model.getVersionId() !== pending.modelVersionId) {
+          closePopover();
+        }
+        return;
+      }
+      applySsmlInsertion(editor, insertion, option);
     },
-    []
+    [closePopover]
   );
   const handleInsertBreak = (0, import_react.useCallback)(
     (insertion, option) => {
@@ -3324,7 +3711,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,16 +3741,65 @@ 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
     ),
     []
   );
   const getOuterVoiceName = (0, import_react.useCallback)(() => getEditableRegion(draftDocumentRef.current).voiceName, []);
+  const handleCodeLensAction = (0, import_react.useCallback)((action) => {
+    const editor = editorRef.current;
+    const model = editor?.getModel();
+    if (!editor || !model) {
+      return;
+    }
+    if (action.type === "attribute") {
+      pendingCodeLensAttributeRef.current = {
+        insertionId: action.insertionId,
+        attributeName: action.attributeName,
+        tagRange: action.tagRange,
+        modelVersionId: model.getVersionId()
+      };
+      activePopoverTriggerRef.current = null;
+      setPopoverVoiceName(getEffectiveVoiceName(editor, draftDocumentRef.current));
+      setOpenPopoverId(action.insertionId);
+      setPopoverPosition(null);
+      return;
+    }
+    const source = model.getValue();
+    const toEditorRange = (range) => {
+      const start = model.getPositionAt(range.start);
+      const end = model.getPositionAt(range.end);
+      return {
+        startLineNumber: start.lineNumber,
+        startColumn: start.column,
+        endLineNumber: end.lineNumber,
+        endColumn: end.column
+      };
+    };
+    const edits = action.type === "delete" ? [{ range: toEditorRange(action.tagRange), text: "" }] : (() => {
+      const elementText = source.slice(action.elementRange.start, action.elementRange.end);
+      const closingOffset = elementText.search(/<\/\s*prosody\s*>/i);
+      const closingStart = closingOffset === -1 ? action.elementRange.end : action.elementRange.start + closingOffset;
+      const closingEnd = closingOffset === -1 ? action.elementRange.end : source.indexOf(">", closingStart) === -1 ? action.elementRange.end : source.indexOf(">", closingStart) + 1;
+      return [
+        { range: toEditorRange(action.tagRange), text: "" },
+        { range: toEditorRange({ start: closingStart, end: closingEnd }), text: "" }
+      ];
+    })();
+    editor.pushUndoStop();
+    editor.executeEdits("ssml-code-lens", edits);
+    editor.pushUndoStop();
+    pendingCodeLensAttributeRef.current = null;
+    setOpenPopoverId(null);
+    setPopoverPosition(null);
+    editor.focus();
+  }, []);
   return {
     editorRef,
     draftDocument,
     text: getEditableText(draftDocument),
     selectionOverlay,
+    activeTags,
     isDarkTheme: resolvedTheme === "dark" || resolvedTheme === "system" && isDark,
     decorationsVisible,
     setDecorationsVisible,
@@ -3385,10 +3821,12 @@ function useSsmlEditorState({
     previewSelection,
     canPreviewSelection: onPreviewSelection !== void 0,
     refreshSelectionOverlay,
+    updateActiveTags,
     getSelectedSsml: getSelectedSsmlValue,
     getCurrentLineSsml: getCurrentLineSsmlValue,
     getFullSsml,
     getOuterVoiceName,
+    handleCodeLensAction,
     openPopoverId,
     popoverVoiceName,
     popoverPosition,
@@ -3618,7 +4056,8 @@ function registerSsmlCompletionProvider(monaco, options = {}) {
           ...attributeValues?.map((value2) => ({
             label: value2,
             kind: monaco.languages.CompletionItemKind.Value,
-            insertText: value2
+            insertText: value2,
+            range
           })) ?? []
         ]
       };
@@ -3736,6 +4175,180 @@ function registerSsmlCodeActions(monaco) {
   });
 }
 
+// packages/ssml-editor-react/src/ssmlCodeLens.ts
+var CODE_LENS_COMMAND = "ssml-editor.codeLens";
+function findTagEnd3(source, start) {
+  let quote;
+  for (let index = start + 1; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote !== void 0) {
+      if (character === quote) {
+        quote = void 0;
+      }
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+function getAttributeValue(tag, attributeName) {
+  const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return tag.match(new RegExp(`\\b${escapedName}\\s*=\\s*(["'])([\\s\\S]*?)\\1`, "i"))?.[2];
+}
+function getTagRange(start, end) {
+  return { start, end };
+}
+function getElementEnd(source, tagName, tagEnd) {
+  const openingTag = source.slice(0, tagEnd + 1);
+  if (/\/\s*>$/.test(openingTag)) {
+    return tagEnd + 1;
+  }
+  let depth = 1;
+  let index = tagEnd + 1;
+  while (index < source.length) {
+    const nextStart = source.indexOf("<", index);
+    if (nextStart === -1) {
+      break;
+    }
+    if (source.startsWith("<!--", nextStart)) {
+      index = source.indexOf("-->", nextStart + 4);
+      index = index === -1 ? source.length : index + 3;
+      continue;
+    }
+    const nextEnd = findTagEnd3(source, nextStart);
+    if (nextEnd === -1) {
+      break;
+    }
+    const nextTag = source.slice(nextStart, nextEnd + 1);
+    const closingMatch = nextTag.match(/^<\s*\/\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    const openingMatch = nextTag.match(/^<\s*([A-Za-z_][A-Za-z0-9_.:-]*)/);
+    if (closingMatch?.[1]?.toLowerCase() === tagName) {
+      depth -= 1;
+      if (depth === 0) {
+        return nextEnd + 1;
+      }
+    } else if (openingMatch?.[1]?.toLowerCase() === tagName && !/\/\s*>$/.test(nextTag)) {
+      depth += 1;
+    }
+    index = nextEnd + 1;
+  }
+  return tagEnd + 1;
+}
+function createLens(model, start, end, title, action) {
+  const startPosition = model.getPositionAt(start);
+  const endPosition = model.getPositionAt(end);
+  return {
+    range: {
+      startLineNumber: startPosition.lineNumber,
+      startColumn: startPosition.column,
+      endLineNumber: endPosition.lineNumber,
+      endColumn: endPosition.column
+    },
+    command: {
+      id: CODE_LENS_COMMAND,
+      title,
+      arguments: [action]
+    }
+  };
+}
+function registerSsmlCodeLens(monaco, editor, onOpenPopover) {
+  const provider = {
+    provideCodeLenses(model) {
+      const source = model.getValue();
+      const lenses = [];
+      let index = 0;
+      while (index < source.length) {
+        const tagStart = source.indexOf("<", index);
+        if (tagStart === -1) {
+          break;
+        }
+        if (source.startsWith("<!--", tagStart)) {
+          index = source.indexOf("-->", tagStart + 4);
+          index = index === -1 ? source.length : index + 3;
+          continue;
+        }
+        const tagEnd = findTagEnd3(source, tagStart);
+        if (tagEnd === -1) {
+          break;
+        }
+        const tag = source.slice(tagStart, tagEnd + 1);
+        const tagName = tag.match(/^<\s*(prosody|break)\b/i)?.[1]?.toLowerCase();
+        index = tagEnd + 1;
+        if (!tagName) {
+          continue;
+        }
+        const tagRange = getTagRange(tagStart, tagEnd + 1);
+        const elementEnd = getElementEnd(source, tagName, tagEnd);
+        const elementRange = { start: tagStart, end: elementEnd };
+        if (tagName === "prosody") {
+          lenses.push(
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Rate: ${getAttributeValue(tag, "rate") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "rate", attributeName: "rate", tagRange }
+            ),
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Pitch: ${getAttributeValue(tag, "pitch") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "pitch", attributeName: "pitch", tagRange }
+            ),
+            createLens(model, tagStart, tagEnd + 1, "Unwrap", {
+              type: "unwrap",
+              tagRange,
+              elementRange
+            })
+          );
+        } else if (/\/\s*>$/.test(tag)) {
+          lenses.push(
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `\u26A1 Time: ${getAttributeValue(tag, "time") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "break", attributeName: "time", tagRange }
+            ),
+            createLens(model, tagStart, tagEnd + 1, "Delete", {
+              type: "delete",
+              tagRange,
+              elementRange
+            })
+          );
+        }
+      }
+      return { lenses, dispose: () => void 0 };
+    }
+  };
+  const disposable = monaco.languages.registerCodeLensProvider("xml", provider);
+  const commandHandler = (_accessor, ...args) => {
+    const action = args[0];
+    if (action && typeof action === "object" && "type" in action) {
+      onOpenPopover(action);
+    }
+  };
+  const commandDisposable = typeof monaco.editor?.registerCommand === "function" ? monaco.editor.registerCommand(CODE_LENS_COMMAND, commandHandler) : typeof monaco.registerCommand === "function" ? monaco.registerCommand(CODE_LENS_COMMAND, commandHandler) : editor.addAction({
+    id: CODE_LENS_COMMAND,
+    label: "SSML CodeLens",
+    run: (_editor, ...args) => {
+      const action = args[0];
+      if (action && typeof action === "object" && "type" in action) {
+        onOpenPopover(action);
+      }
+    }
+  });
+  return {
+    dispose: () => {
+      commandDisposable.dispose();
+      disposable.dispose();
+    }
+  };
+}
+
 // packages/ssml-editor-react/src/ssmlHover.ts
 var {
   BREAK_STRENGTH_PRESETS: BREAK_STRENGTH_PRESETS2,
@@ -4085,7 +4698,7 @@ function toRange(source, token) {
 function containsOffset(token, offset) {
   return offset >= token.start && offset < token.end;
 }
-function findTagEnd3(source, start) {
+function findTagEnd4(source, start) {
   let quote;
   for (let index = start; index < source.length; index += 1) {
     const character = source[index];
@@ -4216,7 +4829,7 @@ function findTagAtOffset(source, offset) {
       searchStart = tokenEnd2;
       continue;
     }
-    const tagEnd = findTagEnd3(source, start + 1);
+    const tagEnd = findTagEnd4(source, start + 1);
     const contentEnd = tagEnd ?? source.length;
     const tokenEnd = tagEnd === void 0 ? source.length : tagEnd + 1;
     if (offset < tokenEnd) {
@@ -4432,8 +5045,11 @@ function useSsmlMonaco({
   language,
   text,
   decorationsVisible,
+  enableCodeLens,
   getOuterVoiceName,
+  onOpenPopover,
   onSelectionOverlayChange,
+  onActiveTagsChange,
   onSyntaxErrorChange
 }) {
   const internalEditorRef = (0, import_react2.useRef)(null);
@@ -4441,22 +5057,30 @@ function useSsmlMonaco({
   const monacoRef = (0, import_react2.useRef)(null);
   const completionProviderRef = (0, import_react2.useRef)(null);
   const codeActionProviderRef = (0, import_react2.useRef)(null);
+  const codeLensProviderRef = (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)([]);
   const inlineDecorationIdsRef = (0, import_react2.useRef)([]);
   const languageRef = (0, import_react2.useRef)(language);
   const decorationsVisibleRef = (0, import_react2.useRef)(decorationsVisible);
+  const enableCodeLensRef = (0, import_react2.useRef)(enableCodeLens);
   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);
+  const onOpenPopoverRef = (0, import_react2.useRef)(onOpenPopover);
   languageRef.current = language;
   decorationsVisibleRef.current = decorationsVisible;
+  enableCodeLensRef.current = enableCodeLens;
   getOuterVoiceNameRef.current = getOuterVoiceName;
   onSelectionOverlayChangeRef.current = onSelectionOverlayChange;
+  onActiveTagsChangeRef.current = onActiveTagsChange;
   onSyntaxErrorChangeRef.current = onSyntaxErrorChange;
+  onOpenPopoverRef.current = onOpenPopover;
   const runSsmlDiagnostics = (0, import_react2.useCallback)((editor, monaco) => {
     const model = editor.getModel();
     if (!model) {
@@ -4485,6 +5109,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,10 +5127,14 @@ function useSsmlMonaco({
     }
     selectionChangeRef.current?.dispose();
     selectionChangeRef.current = null;
+    cursorPositionChangeRef.current?.dispose();
+    cursorPositionChangeRef.current = null;
     completionProviderRef.current?.dispose();
     completionProviderRef.current = null;
     codeActionProviderRef.current?.dispose();
     codeActionProviderRef.current = null;
+    codeLensProviderRef.current?.dispose();
+    codeLensProviderRef.current = null;
     for (const disposable of selectionLayoutDisposablesRef.current) {
       disposable.dispose();
     }
@@ -4515,6 +5152,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 +5166,7 @@ function useSsmlMonaco({
             inlineDecorationIdsRef.current
           );
         }
+        syncActiveTags(editor);
         scheduleSsmlDiagnostics(editor, monaco);
       });
       selectionLayoutDisposablesRef.current = [
@@ -4538,6 +5179,13 @@ function useSsmlMonaco({
         model: editor.getModel()
       });
       codeActionProviderRef.current = registerSsmlCodeActions(monaco);
+      if (enableCodeLensRef.current) {
+        codeLensProviderRef.current = registerSsmlCodeLens(
+          monaco,
+          editor,
+          (action) => onOpenPopoverRef.current(action)
+        );
+      }
       releaseHoverProviderRef.current = acquireSsmlHoverProvider(monaco, languageRef.current);
       runSsmlDiagnostics(editor, monaco);
       const model = editor.getModel();
@@ -4551,9 +5199,19 @@ function useSsmlMonaco({
         );
       }
       onSelectionOverlayChangeRef.current(editor, true);
+      syncActiveTags(editor);
     },
-    [disposeMonacoResources, editorRef, runSsmlDiagnostics, scheduleSsmlDiagnostics]
+    [disposeMonacoResources, editorRef, runSsmlDiagnostics, scheduleSsmlDiagnostics, syncActiveTags]
   );
+  (0, import_react2.useEffect)(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) {
+      return;
+    }
+    codeLensProviderRef.current?.dispose();
+    codeLensProviderRef.current = enableCodeLens ? registerSsmlCodeLens(monaco, editor, (action) => onOpenPopoverRef.current(action)) : null;
+  }, [editorRef, enableCodeLens]);
   (0, import_react2.useEffect)(() => {
     const monaco = monacoRef.current;
     if (!monaco) {
@@ -4594,7 +5252,7 @@ var TEXT_POPOVER_TAGS = /* @__PURE__ */ new Set(["sub", "say-as", "phoneme", "w"
 function localizedText(value) {
   return { ja: value, en: value };
 }
-function escapeXmlAttribute(value) {
+function escapeXmlAttribute2(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;");
 }
 function createSsmlEditorInsertionDefinition(definition) {
@@ -4611,7 +5269,7 @@ function createSsmlEditorInsertionDefinition(definition) {
     parameterDescription: definition.parameterDescription ?? localizedText(`Selects the value for the <${definition.tagName}> element.`),
     options: definition.options,
     createTemplate: (value) => {
-      const attributeValue = definition.attribute ? `${attribute}${escapeXmlAttribute(value)}"` : "";
+      const attributeValue = definition.attribute ? `${attribute}${escapeXmlAttribute2(value)}"` : "";
       if (mode === "wrap") {
         return {
           prefix: `<${definition.tagName}${attributeValue}>`,
@@ -4940,6 +5598,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 +5617,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;
@@ -5070,6 +5732,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   showToolbarIcons = true,
   showToolbarLabels = false,
   showDecorations = false,
+  enableCodeLens = true,
   buttonVisibility,
   editorOptions,
   settings,
@@ -5176,6 +5839,7 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     editorRef,
     text,
     selectionOverlay,
+    activeTags,
     isDarkTheme,
     decorationsVisible,
     setDecorationsVisible,
@@ -5196,10 +5860,12 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     previewSelection,
     canPreviewSelection,
     refreshSelectionOverlay,
+    updateActiveTags,
     getSelectedSsml: getSelectedSsml2,
     getCurrentLineSsml: getCurrentLineSsml2,
     getFullSsml,
     getOuterVoiceName,
+    handleCodeLensAction,
     openPopoverId,
     popoverVoiceName,
     popoverPosition,
@@ -5224,7 +5890,10 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
     decorationsVisible,
     getOuterVoiceName,
     onSelectionOverlayChange: refreshSelectionOverlay,
-    onSyntaxErrorChange: setSyntaxError
+    onActiveTagsChange: updateActiveTags,
+    onSyntaxErrorChange: setSyntaxError,
+    enableCodeLens,
+    onOpenPopover: handleCodeLensAction
   });
   (0, import_react3.useImperativeHandle)(
     ref,
@@ -5239,12 +5908,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,
@@ -5502,6 +6172,8 @@ var SsmlEditor = (0, import_react3.forwardRef)(function SsmlEditor2({
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,
-  createSsmlEditorInsertionDefinition
+  createSsmlEditorInsertionDefinition,
+  registerSsmlCodeLens,
+  updateTagAttribute
 });
 //# sourceMappingURL=react.js.map