@ssml-builder-js/ssml-editor-react 2.4.0

package/src/ssmlCodeLens.ts

@@ -0,0 +1,226 @@
+import type { Monaco } from "@monaco-editor/react";
+import type { MonacoEditor } from "./ssmlDiagnostics";
+import type { SsmlTagRange } from "./ssmlContext";
+
+export type SsmlCodeLensAction =
+  | {
+      type: "attribute";
+      insertionId: "rate" | "pitch" | "break";
+      attributeName: "rate" | "pitch" | "time";
+      tagRange: SsmlTagRange;
+    }
+  | {
+      type: "unwrap" | "delete";
+      tagRange: SsmlTagRange;
+      elementRange: SsmlTagRange;
+    };
+
+export type SsmlCodeLensCallback = (action: SsmlCodeLensAction) => void;
+
+type MonacoCodeLensProvider = Parameters<Monaco["languages"]["registerCodeLensProvider"]>[1];
+type MonacoCodeLensModel = Parameters<NonNullable<MonacoCodeLensProvider["provideCodeLenses"]>>[0];
+type MonacoCodeLens = NonNullable<
+  Awaited<ReturnType<NonNullable<MonacoCodeLensProvider["provideCodeLenses"]>>>
+>["lenses"][number];
+
+const CODE_LENS_COMMAND = "ssml-editor.codeLens";
+
+function findTagEnd(source: string, start: number): number {
+  let quote: string | undefined;
+  for (let index = start + 1; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote !== undefined) {
+      if (character === quote) {
+        quote = undefined;
+      }
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+
+function getAttributeValue(tag: string, attributeName: string): string | undefined {
+  const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return tag.match(new RegExp(`\\b${escapedName}\\s*=\\s*(["'])([\\s\\S]*?)\\1`, "i"))?.[2];
+}
+
+function getTagRange(start: number, end: number): SsmlTagRange {
+  return { start, end };
+}
+
+function getElementEnd(source: string, tagName: string, tagEnd: number): number {
+  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 = findTagEnd(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: MonacoCodeLensModel,
+  start: number,
+  end: number,
+  title: string,
+  action: SsmlCodeLensAction,
+): MonacoCodeLens {
+  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],
+    },
+  };
+}
+
+export function registerSsmlCodeLens(
+  monaco: Monaco,
+  editor: MonacoEditor,
+  onOpenPopover: SsmlCodeLensCallback,
+): ReturnType<Monaco["languages"]["registerCodeLensProvider"]> {
+  const provider: MonacoCodeLensProvider = {
+    provideCodeLenses(model: MonacoCodeLensModel) {
+      const source = model.getValue();
+      const lenses: MonacoCodeLens[] = [];
+      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 = findTagEnd(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,
+              `⚡ Rate: ${getAttributeValue(tag, "rate") ?? "default"} (Click to edit)`,
+              { type: "attribute", insertionId: "rate", attributeName: "rate", tagRange },
+            ),
+            createLens(
+              model,
+              tagStart,
+              tagEnd + 1,
+              `⚡ 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,
+              `⚡ 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: () => undefined };
+    },
+  };
+
+  const disposable = monaco.languages.registerCodeLensProvider("xml", provider);
+  const commandHandler = (_accessor: unknown, ...args: unknown[]) => {
+    const action = args[0];
+    if (action && typeof action === "object" && "type" in action) {
+      onOpenPopover(action as SsmlCodeLensAction);
+    }
+  };
+
+  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: unknown[]) => {
+              const action = args[0];
+              if (action && typeof action === "object" && "type" in action) {
+                onOpenPopover(action as SsmlCodeLensAction);
+              }
+            },
+          });
+
+  return {
+    dispose: () => {
+      commandDisposable.dispose();
+      disposable.dispose();
+    },
+  };
+}

package/src/ssmlCompletion.ts

@@ -0,0 +1,129 @@
+import type * as monaco from "monaco-editor";
+// @ts-expect-error The Node strip-types test runner requires the explicit TypeScript extension.
+import { resolveExpressAsStyles, SSML_ATTRIBUTE_PRESETS } from "./constants/ssmlPresets.ts";
+// @ts-expect-error The Node strip-types test runner requires the explicit TypeScript extension.
+import { findSsmlVoiceContext } from "./ssmlContext.ts";
+
+type Monaco = typeof monaco;
+type MonacoLanguages = Monaco["languages"];
+type MonacoCompletionProvider = Parameters<MonacoLanguages["registerCompletionItemProvider"]>[1];
+type MonacoCompletionMethod = NonNullable<MonacoCompletionProvider["provideCompletionItems"]>;
+type MonacoCompletionModel = Parameters<MonacoCompletionMethod>[0];
+type MonacoCompletionPosition = Parameters<MonacoCompletionMethod>[1];
+
+const SSML_ATTRIBUTE_VALUE_PATTERN = /<([\w:-]+)\s+[^>]*?\b([\w:-]+)=["']([^"']*)$/i;
+const EXPRESS_AS_TAG_NAMES = new Set(["mstts:express-as", "express-as", "expressas"]);
+
+export interface SsmlCompletionProviderOptions {
+  getOuterVoiceName?: () => string | undefined;
+  model?: MonacoCompletionModel | null;
+}
+
+function findSsmlAttributePresets(tagName: string, attributeName: string): readonly string[] | undefined {
+  const tagPresets = Object.entries(SSML_ATTRIBUTE_PRESETS).find(
+    ([presetTagName]) => presetTagName.toLowerCase() === tagName.toLowerCase(),
+  )?.[1];
+
+  return Object.entries(tagPresets ?? {}).find(
+    ([presetAttributeName]) => presetAttributeName.toLowerCase() === attributeName.toLowerCase(),
+  )?.[1];
+}
+
+const SSML_COMPLETION_SNIPPETS = [
+  {
+    label: "break",
+    insertText: '<break time="500ms" />',
+  },
+  {
+    label: "prosody",
+    insertText: `<prosody rate="medium" pitch="medium">\${1:text}</prosody>`,
+  },
+  {
+    label: "mstts:express-as",
+    insertText: `<mstts:express-as style="cheerful">\${1:text}</mstts:express-as>`,
+  },
+  {
+    label: "sub",
+    insertText: `<sub alias="\${1:読み}">\${2:漢字}</sub>`,
+  },
+] as const;
+
+export function registerSsmlCompletionProvider(
+  monaco: Monaco,
+  options: SsmlCompletionProviderOptions = {},
+): ReturnType<MonacoLanguages["registerCompletionItemProvider"]> {
+  const provider: MonacoCompletionProvider = {
+    provideCompletionItems(model: MonacoCompletionModel, position: MonacoCompletionPosition) {
+      if (options.model && options.model !== model) {
+        return { suggestions: [] };
+      }
+
+      const value = model.getValue();
+      const offset = model.getOffsetAt(position);
+      const textUntilPosition = value.slice(0, offset);
+      const isClosingTag = /<\/[a-zA-Z0-9:-]*$/.test(textUntilPosition);
+      if (isClosingTag) {
+        return { suggestions: [] };
+      }
+
+      const attributeMatch = SSML_ATTRIBUTE_VALUE_PATTERN.exec(textUntilPosition);
+      let attributeValues = attributeMatch ? findSsmlAttributePresets(attributeMatch[1], attributeMatch[2]) : undefined;
+      if (
+        attributeMatch &&
+        attributeValues &&
+        EXPRESS_AS_TAG_NAMES.has(attributeMatch[1].toLowerCase()) &&
+        attributeMatch[2].toLowerCase() === "style"
+      ) {
+        const voiceContext = findSsmlVoiceContext(value, offset);
+        const voiceName = voiceContext === undefined ? options.getOuterVoiceName?.() : voiceContext.voiceName;
+        attributeValues = resolveExpressAsStyles(voiceName, attributeValues);
+      }
+      const openTagMatch = textUntilPosition.match(/<(?!\/)[a-zA-Z0-9:-]*$/);
+      const openTagLength = openTagMatch?.[0].length ?? 0;
+      const isAfterBracket =
+        model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: position.column - 1,
+          endLineNumber: position.lineNumber,
+          endColumn: position.column,
+        }) === "<";
+      const hasClosingBracket =
+        isAfterBracket &&
+        model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: position.column,
+          endLineNumber: position.lineNumber,
+          endColumn: position.column + 1,
+        }) === ">";
+      const range = {
+        startLineNumber: position.lineNumber,
+        startColumn: openTagLength > 0 ? position.column - openTagLength : position.column,
+        endLineNumber: position.lineNumber,
+        endColumn: hasClosingBracket ? position.column + 1 : position.column,
+      };
+
+      return {
+        suggestions: [
+          ...(attributeMatch
+            ? []
+            : SSML_COMPLETION_SNIPPETS.map(({ label, insertText }) => ({
+                label,
+                kind: monaco.languages.CompletionItemKind.Snippet,
+                insertText,
+                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                range,
+              }))),
+          ...(attributeValues?.map((value) => ({
+            label: value,
+            kind: monaco.languages.CompletionItemKind.Value,
+            insertText: value,
+            range,
+          })) ?? []),
+        ],
+      };
+    },
+    triggerCharacters: ["<", '"', "'"],
+  };
+
+  return monaco.languages.registerCompletionItemProvider("xml", provider);
+}

package/src/ssmlContext.ts

@@ -0,0 +1,196 @@
+export interface SsmlVoiceContext {
+  voiceName?: string;
+}
+
+export interface SsmlTagRange {
+  start: number;
+  end: number;
+}
+
+interface OpenElement {
+  name: string;
+  voiceName?: string;
+}
+
+function findTagEnd(source: string, start: number, limit: number): number {
+  let quote: string | undefined;
+  for (let index = start + 1; index < limit; index += 1) {
+    const character = source[index];
+    if (quote !== undefined) {
+      if (character === quote) {
+        quote = undefined;
+      }
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+      continue;
+    }
+    if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+
+function getVoiceName(tag: string): string | undefined {
+  return tag.match(/\bname\s*=\s*(["'])([\s\S]*?)\1/i)?.[2];
+}
+
+function escapeXmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/'/g, "&apos;");
+}
+
+export function updateTagAttribute(
+  text: string,
+  tagRange: SsmlTagRange,
+  attributeName: string,
+  newValue: string,
+): string {
+  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 !== undefined) {
+    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: OpenElement[], name: string): void {
+  for (let index = stack.length - 1; index >= 0; index -= 1) {
+    if (stack[index]?.name === name) {
+      stack.splice(index);
+      return;
+    }
+  }
+}
+
+export function findActiveSsmlTags(source: string, offset: number): Set<string> {
+  const limit = Math.max(0, Math.min(offset, source.length));
+  const stack: OpenElement[] = [];
+  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)
+          : undefined;
+    if (nonContentEnd !== undefined) {
+      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));
+}
+
+export function findSsmlVoiceContext(source: string, offset: number): SsmlVoiceContext | undefined {
+  const limit = Math.max(0, Math.min(offset, source.length));
+  const stack: OpenElement[] = [];
+  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 === undefined ? {} : { voiceName: element.voiceName };
+    }
+  }
+  return undefined;
+}