ssml-builder-js 2.2.0 → 2.3.0

package/README.md

@@ -137,7 +137,7 @@ const parsed = parseSsml(ssml);
 
 ## `ssml-editor-react` の利用方法
 
-`SsmlEditor` は `SsmlDocument` を受け取り、ツールバーと本文の表示エリアだけを表示するシンプルなコンポーネントです。ツールバーから選択範囲の速度、音量、ピッチなどの設定、元に戻す・やり直す操作ができます。音声の選択と表示はアプリ側で行います。本文の編集には Monaco Editor を使用し、変更時に SSML の構文を検証します。構文エラーはエディター上のマーカーとエラーメッセージで表示されます。XML のタグ名やパラメータへホバーすると SSML の説明を確認できます。テキストを選択すると、選択文字数と試聴を行うフローティングアクションが表示されます。`showDecorations` が有効な場合、`break` と `prosody` のタグに間やピッチ変化を示すインラインバッジが表示され、Monaco のインライン装飾も有効になります。生成された SSML は `onSsmlChange` で受け取り、アプリ側で自由に表示できます。`SsmlEditorRef` を `ref` に渡すと、全体、選択範囲、または現在行の SSML を取得できます。画面表示は日本語（デフォルト）と英語に対応しています。
+`SsmlEditor` は `SsmlDocument` を受け取り、ツールバーと本文の表示エリアだけを表示するシンプルなコンポーネントです。ツールバーから選択範囲の速度、音量、ピッチなどの設定、元に戻す・やり直す操作ができます。音声の選択と表示はアプリ側で行います。本文の編集には Monaco Editor を使用し、変更時に SSML の構文を検証します。構文エラーはエディター上のマーカーとエラーメッセージで表示されます。XML のタグ名やパラメータへホバーすると SSML の説明を確認できます。テキストを選択すると、選択文字数と試聴を行うフローティングアクションが表示されます。`enableCodeLens`（デフォルトは `true`）が有効な場合、`prosody` と `break` タグの上に属性編集やタグ操作の CodeLens が表示されます。`showDecorations` が有効な場合、`break` と `prosody` のタグに間やピッチ変化を示すインラインバッジが表示され、Monaco のインライン装飾も有効になります。生成された SSML は `onSsmlChange` で受け取り、アプリ側で自由に表示できます。`SsmlEditorRef` を `ref` に渡すと、全体、選択範囲、または現在行の SSML を取得できます。画面表示は日本語（デフォルト）と英語に対応しています。
 
 `<mstts:express-as>` の `style` 属性補完と標準の感情メニューは、カーソルまたは選択範囲を囲む最内の `<voice name="...">` が対応するスタイルだけを表示します。音声名が未指定の場合は全候補を表示し、登録済みでスタイル非対応の音声や未登録の音声では候補がないことを表示します。`emotionStyles` を指定した場合、感情メニューではその値と登録済み音声の対応スタイルの共通部分を使用します。
 
@@ -182,6 +182,7 @@ export function App() {
 - `showToolbarIcons`: ツールバーのアイコン表示（デフォルトは `true`）
 - `showToolbarLabels`: ツールバーの文字による説明表示（デフォルトは `false`）。省略時はアイコンにホバーすると説明が表示されます
 - `showDecorations`: 本文中のインライン装飾（バッジや Inlay Hints）の表示（デフォルトは `false`）。ツールバーの「装飾」スイッチで表示・非表示を切り替えられます
+- `enableCodeLens`: `prosody` と `break` タグの CodeLens クイックコントローラーを表示するか（デフォルトは `true`）
 - `buttonVisibility`: ツールバーボタンごとの表示設定。`help`、`break`、`emphasis`、`rate`、`pitch`、`volume`、`emotion`、`say-as`、`lang`、`mstts:silence`、`undo`、`redo`、`clearAll`、`format`、`decorations`、カスタム挿入 ID を指定でき、未指定のボタンは表示されます
 - `editorOptions` / `settings`: Monaco の設定。`height`、`minHeight`、`readOnly`、`theme`（`system` / `light` / `dark`）、`fontSize`、`wordWrap`、`lineNumbers`、`minimap`、`automaticLayout` を指定できます。これらは同名のトップレベル props でも指定できます
 - `loadingFallback`: Monaco の読み込み中に表示する React ノード
@@ -426,7 +427,7 @@ Typed representations are available for elements such as `voice`, `prosody`, `br
 
 ## Using `ssml-editor-react`
 
-`SsmlEditor` accepts an `SsmlDocument` and renders only a toolbar and text display area. The toolbar applies rate, volume, and pitch settings to the selection and provides undo and redo actions. The application is responsible for selecting and displaying the voice. Monaco Editor is used for text editing, and SSML syntax is validated whenever the text changes. Syntax errors are shown with editor markers and an error message. Hovering over XML tag names or parameters shows SSML descriptions. Selecting text displays a floating action bar with the character count and preview action. When `showDecorations` is enabled, inline badges for pause and pitch changes are rendered next to `break` and `prosody` tags, and Monaco inline decorations are enabled. Generated SSML is provided through `onSsmlChange` so the application can display it wherever it needs. Pass an `SsmlEditorRef` through `ref` to retrieve full, selected, or current-line SSML, and use `onSelectionChange` to observe selection text and state. The UI supports Japanese (the default) and English.
+`SsmlEditor` accepts an `SsmlDocument` and renders only a toolbar and text display area. The toolbar applies rate, volume, and pitch settings to the selection and provides undo and redo actions. The application is responsible for selecting and displaying the voice. Monaco Editor is used for text editing, and SSML syntax is validated whenever the text changes. Syntax errors are shown with editor markers and an error message. Hovering over XML tag names or parameters shows SSML descriptions. Selecting text displays a floating action bar with the character count and preview action. When `enableCodeLens` is enabled (the default), CodeLens quick controls for editing and unwrapping `prosody` tags and editing or deleting `break` tags are shown above those tags. When `showDecorations` is enabled, inline badges for pause and pitch changes are rendered next to `break` and `prosody` tags, and Monaco inline decorations are enabled. Generated SSML is provided through `onSsmlChange` so the application can display it wherever it needs. Pass an `SsmlEditorRef` through `ref` to retrieve full, selected, or current-line SSML, and use `onSelectionChange` to observe selection text and state. The UI supports Japanese (the default) and English.
 
 Completion for the `<mstts:express-as>` `style` attribute and the built-in Emotion menu only show styles supported by the innermost `<voice name="...">` around the cursor or selection. When no voice name is available, all candidates are shown; a registered voice without supported styles or an explicitly unregistered voice displays an empty-state message. When `emotionStyles` is supplied, the Emotion menu uses its intersection with the registered voice's supported styles.
 
@@ -471,6 +472,7 @@ export function App() {
 - `showToolbarIcons`: Whether to show toolbar icons (defaults to `true`)
 - `showToolbarLabels`: Whether to show text labels on the toolbar (defaults to `false`); when omitted, hover over an icon to see its description
 - `showDecorations`: Whether inline decorations such as badges and inlay hints are shown in the text (defaults to `false`); use the **Decorations** toolbar switch to toggle them at runtime
+- `enableCodeLens`: Whether CodeLens quick controls for `prosody` and `break` tags are shown (defaults to `true`)
 - `buttonVisibility`: Per-toolbar-button visibility settings for `help`, `break`, `emphasis`, `rate`, `pitch`, `volume`, `emotion`, `say-as`, `lang`, `mstts:silence`, `undo`, `redo`, `clearAll`, `format`, `decorations`, and custom insertion IDs; unspecified buttons are shown
 - `editorOptions` / `settings`: Monaco settings for `height`, `minHeight`, `readOnly`, `theme` (`system` / `light` / `dark`), `fontSize`, `wordWrap`, `lineNumbers`, `minimap`, and `automaticLayout`. The same settings can also be supplied as top-level props
 - `loadingFallback`: A React node displayed while Monaco is loading

package/dist/{chunk-2XJER2BG.mjs → chunk-NPZ44CHU.mjs}

@@ -375,6 +375,154 @@ var SSML_HOVER_COPY = {
   }
 };
 
+// packages/ssml-editor-react/src/ssmlContext.ts
+function findTagEnd(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 = findTagEnd(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 = findTagEnd(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/constants/ssmlPresets.ts
 var ssmlPresets_exports = {};
 __export(ssmlPresets_exports, {
@@ -1091,6 +1239,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",
@@ -1634,7 +1783,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;
@@ -1991,7 +2145,7 @@ function validateEntityReferences(value) {
     index = semicolon + 1;
   }
 }
-function findTagEnd(source, start, hasInternalSubset = false) {
+function findTagEnd2(source, start, hasInternalSubset = false) {
   let quote;
   let subsetDepth = 0;
   for (let index = start + 1; index < source.length; index += 1) {
@@ -2164,7 +2318,7 @@ function parseXml(source) {
       continue;
     }
     if (source.startsWith("</", index)) {
-      const end2 = findTagEnd(source, index);
+      const end2 = findTagEnd2(source, index);
       const name2 = parseClosingTag(source, index, end2);
       const element = currentElement(stack);
       if (element === void 0 || element.name !== name2) {
@@ -2176,7 +2330,7 @@ function parseXml(source) {
       continue;
     }
     if (source.startsWith("<!", index)) {
-      const end2 = findTagEnd(source, index, true);
+      const end2 = findTagEnd2(source, index, true);
       parseDeclaration(source, index, end2);
       appendNode2(currentElement(stack)?.children ?? children, {
         kind: "declaration",
@@ -2185,7 +2339,7 @@ function parseXml(source) {
       index = end2 + 1;
       continue;
     }
-    const end = findTagEnd(source, index);
+    const end = findTagEnd2(source, index);
     const { name, selfClosing } = parseStartTag(source, index, end);
     if (stack.length === 0) {
       if (root !== void 0) {
@@ -2624,134 +2778,6 @@ function createSsmlInsertionEdit(source, startOffset, endOffset, template, eol =
   };
 }
 
-// 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/ssmlCompletion.ts
 var SSML_ATTRIBUTE_VALUE_PATTERN = /<([\w:-]+)\s+[^>]*?\b([\w:-]+)=["']([^"']*)$/i;
 var EXPRESS_AS_TAG_NAMES = /* @__PURE__ */ new Set(["mstts:express-as", "express-as", "expressas"]);
@@ -3477,10 +3503,11 @@ export {
   getEditableText,
   updateEditableText,
   createSsmlInsertionEdit,
+  updateTagAttribute,
   findActiveSsmlTags,
   findSsmlVoiceContext,
   registerSsmlCompletionProvider,
   findSsmlHoverTarget,
   formatSsmlHover
 };
-//# sourceMappingURL=chunk-2XJER2BG.mjs.map
+//# sourceMappingURL=chunk-NPZ44CHU.mjs.map