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

package/src/buttonVisibility.ts

@@ -0,0 +1,36 @@
+export type SsmlEditorInsertionButton =
+  | "break"
+  | "emphasis"
+  | "rate"
+  | "pitch"
+  | "volume"
+  | "emotion"
+  | "say-as"
+  | "phoneme"
+  | "audio"
+  | "sub"
+  | "lang"
+  | "mark"
+  | "bookmark"
+  | "mstts:silence"
+  | "mstts:viseme"
+  | (string & {});
+
+export type SsmlEditorButton =
+  | "help"
+  | SsmlEditorInsertionButton
+  | "undo"
+  | "redo"
+  | "clearAll"
+  | "format"
+  | "decorations"
+  | (string & {});
+
+export type SsmlEditorButtonVisibility = Readonly<Partial<Record<string, boolean>>>;
+
+export function isSsmlEditorButtonVisible(
+  buttonVisibility: SsmlEditorButtonVisibility | undefined,
+  button: SsmlEditorButton | string,
+): boolean {
+  return buttonVisibility?.[button] !== false;
+}

package/src/clearSsmlDocument.ts

@@ -0,0 +1,57 @@
+import type { SsmlDocument, SsmlNode } from "@ssml-builder-js/ssml-core";
+
+function getDocumentChildren(document: SsmlDocument): SsmlNode[] {
+  return document.children ?? (document.content === undefined ? [] : [document.content]);
+}
+
+function appendNode(nodes: SsmlNode[], node: SsmlNode): void {
+  if (typeof node === "string") {
+    const lastNode = nodes[nodes.length - 1];
+    if (typeof lastNode === "string") {
+      nodes[nodes.length - 1] = lastNode + node;
+    } else if (node !== "") {
+      nodes.push(node);
+    }
+    return;
+  }
+
+  nodes.push(node);
+}
+
+function clearNodes(nodes: SsmlNode[]): SsmlNode[] {
+  const clearedNodes: SsmlNode[] = [];
+  for (const node of nodes) {
+    if (typeof node === "string") {
+      appendNode(clearedNodes, node);
+      continue;
+    }
+
+    if (node.type === "text") {
+      appendNode(clearedNodes, node.value);
+      continue;
+    }
+
+    const children = clearNodes(node.children ?? []);
+    if (node.type === "voice") {
+      appendNode(clearedNodes, { ...node, children });
+      continue;
+    }
+
+    for (const child of children) {
+      appendNode(clearedNodes, child);
+    }
+  }
+
+  return clearedNodes;
+}
+
+export function clearSsmlDocument(document: SsmlDocument): SsmlDocument {
+  const nextDocument: SsmlDocument = {
+    ...document,
+    children: clearNodes(getDocumentChildren(document)),
+  };
+  if (nextDocument.content !== undefined) {
+    delete nextDocument.content;
+  }
+  return nextDocument;
+}

package/src/components/popovers/InsertionPopover.tsx

@@ -0,0 +1,136 @@
+import type { CSSProperties, ReactElement, Ref } from "react";
+import { createPortal } from "react-dom";
+import type { SsmlEditorInsertionDefinition, SsmlEditorInsertionOption } from "../../SsmlEditor";
+import { editorStyles as styles } from "../../styles/editorStyles";
+
+export interface InsertionOptionGroup {
+  label: string;
+  options: readonly SsmlEditorInsertionOption[];
+}
+
+export interface InsertionPopoverProps {
+  insertion: SsmlEditorInsertionDefinition;
+  language: "ja" | "en";
+  isDarkTheme: boolean;
+  showToolbarIcons: boolean;
+  showToolbarText: boolean;
+  toolbarButtonStyle: CSSProperties;
+  emptyOptionsMessage: string;
+  isReadOnly: boolean;
+  isOpen: boolean;
+  menuPosition: { top: number; left: number } | null;
+  menuRef: Ref<HTMLDivElement>;
+  onToggle: (trigger: HTMLButtonElement) => void;
+  onClose: () => void;
+  onApply: (insertion: SsmlEditorInsertionDefinition, option: SsmlEditorInsertionOption) => void;
+  optionGroups?: readonly InsertionOptionGroup[];
+}
+
+function getInsertionTitle(insertion: SsmlEditorInsertionDefinition, language: "ja" | "en"): string {
+  if (insertion.titles) {
+    return insertion.titles[language];
+  }
+
+  const tag = insertion.tagName ? ` <${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}` : "";
+  return `${insertion.labels[language]}${tag} — ${insertion.descriptions[language]}`;
+}
+
+export function InsertionPopover({
+  insertion,
+  language,
+  isDarkTheme,
+  showToolbarIcons,
+  showToolbarText,
+  toolbarButtonStyle,
+  emptyOptionsMessage,
+  isReadOnly,
+  isOpen,
+  menuPosition,
+  menuRef,
+  onToggle,
+  onClose,
+  onApply,
+  optionGroups,
+}: InsertionPopoverProps): ReactElement {
+  const hasOptions = optionGroups
+    ? optionGroups.some((group) => group.options.length > 0)
+    : insertion.options.length > 0;
+  const renderOption = (option: SsmlEditorInsertionOption): ReactElement => (
+    <button
+      key={option.value}
+      type="button"
+      role="menuitem"
+      style={styles.toolbarOption}
+      title={option.descriptions?.[language] ?? insertion.descriptions[language]}
+      disabled={isReadOnly}
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() => {
+        if (!isReadOnly) {
+          onApply(insertion, option);
+        }
+        onClose();
+      }}
+    >
+      {option.labels[language]}
+    </button>
+  );
+  const menu =
+    isOpen && menuPosition && typeof document !== "undefined" ? (
+      <div
+        ref={menuRef}
+        id={`ssml-editor-popover-${insertion.id}`}
+        data-ssml-editor=""
+        data-theme={isDarkTheme ? "dark" : "light"}
+        style={{ ...styles.toolbarMenu, top: menuPosition.top, left: menuPosition.left }}
+        role="menu"
+        aria-label={insertion.labels[language]}
+      >
+        {!hasOptions ? (
+          <div role="presentation">
+            <select disabled value="" style={styles.toolbarEmptySelect}>
+              <option value="" disabled>
+                {emptyOptionsMessage}
+              </option>
+            </select>
+          </div>
+        ) : optionGroups ? (
+          optionGroups.map((group) => (
+            <fieldset key={group.label} style={styles.toolbarOptionGroup}>
+              <legend style={styles.toolbarOptionGroupLabel}>{group.label}</legend>
+              {group.options.map(renderOption)}
+            </fieldset>
+          ))
+        ) : (
+          insertion.options.map(renderOption)
+        )}
+      </div>
+    ) : null;
+
+  return (
+    <>
+      <div style={styles.toolbarDropdown}>
+        <button
+          type="button"
+          style={toolbarButtonStyle}
+          title={getInsertionTitle(insertion, language)}
+          aria-label={insertion.labels[language]}
+          aria-haspopup="menu"
+          aria-expanded={isOpen}
+          aria-controls={isOpen ? `ssml-editor-popover-${insertion.id}` : undefined}
+          onClick={(event) => onToggle(event.currentTarget)}
+        >
+          {showToolbarIcons && (
+            <span style={styles.toolbarIcon} aria-hidden="true">
+              {insertion.icon}
+            </span>
+          )}
+          {showToolbarText && <span>{insertion.labels[language]}</span>}
+          <span style={styles.toolbarChevron} aria-hidden="true">
+            ▾
+          </span>
+        </button>
+      </div>
+      {menu && createPortal(menu, document.body)}
+    </>
+  );
+}

package/src/components/popovers/InsertionPopovers.tsx

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactElement, Ref } from "react";
+import type { SsmlEditorInsertionDefinition, SsmlEditorInsertionOption } from "../../SsmlEditor";
+import { InsertionPopover, type InsertionOptionGroup } from "./InsertionPopover";
+
+export interface InsertionPopoversProps {
+  insertions: readonly SsmlEditorInsertionDefinition[];
+  language: "ja" | "en";
+  isDarkTheme: boolean;
+  showToolbarIcons: boolean;
+  showToolbarText: boolean;
+  toolbarButtonStyle: CSSProperties;
+  emptyOptionsMessage: string;
+  isReadOnly: boolean;
+  openPopoverId: string | null;
+  menuPosition: { top: number; left: number } | null;
+  menuRef: Ref<HTMLDivElement>;
+  onToggle: (id: string, trigger: HTMLButtonElement) => void;
+  onClose: () => void;
+  onApply: (insertion: SsmlEditorInsertionDefinition, option: SsmlEditorInsertionOption) => void;
+  emptyOptionsMessages?: Readonly<Record<string, string>>;
+  optionGroups?: Readonly<Record<string, readonly InsertionOptionGroup[]>>;
+}
+
+export function InsertionPopovers({
+  insertions,
+  openPopoverId,
+  onToggle,
+  emptyOptionsMessages,
+  optionGroups,
+  ...props
+}: InsertionPopoversProps): ReactElement {
+  return (
+    <>
+      {insertions.map((insertion) => (
+        <InsertionPopover
+          key={insertion.id}
+          {...props}
+          insertion={insertion}
+          emptyOptionsMessage={emptyOptionsMessages?.[insertion.id] ?? props.emptyOptionsMessage}
+          optionGroups={optionGroups?.[insertion.id]}
+          isOpen={openPopoverId === insertion.id}
+          onToggle={(trigger) => onToggle(insertion.id, trigger)}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/popovers/ProsodyPopovers.tsx

@@ -0,0 +1,78 @@
+import type { ReactElement } from "react";
+import {
+  getExpressAsStyleCategory,
+  resolveExpressAsStyles,
+  type ExpressAsStyleCategory,
+} from "../../constants/ssmlPresets";
+import { EDITOR_COPY, type EditorCopy } from "../../locales";
+import { InsertionPopovers, type InsertionPopoversProps } from "./InsertionPopovers";
+import type { InsertionOptionGroup } from "./InsertionPopover";
+
+export interface ProsodyPopoversProps extends InsertionPopoversProps {
+  voiceName?: string;
+}
+
+const CATEGORY_LABEL_KEYS = {
+  emotions: "categoryEmotions",
+  scenarios: "categoryScenarios",
+  media: "categoryMedia",
+  other: "categoryOther",
+} as const satisfies Record<ExpressAsStyleCategory, keyof EditorCopy>;
+
+const CATEGORY_ORDER: readonly ExpressAsStyleCategory[] = ["emotions", "scenarios", "media", "other"];
+
+function isExpressAsInsertion(insertion: ProsodyPopoversProps["insertions"][number]): boolean {
+  return insertion.id === "emotion" && insertion.tagName?.toLowerCase() === "mstts:express-as";
+}
+
+function createOptionGroups(
+  options: ProsodyPopoversProps["insertions"][number]["options"],
+  language: ProsodyPopoversProps["language"],
+): readonly InsertionOptionGroup[] {
+  const t = (key: keyof EditorCopy): string => 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);
+}
+
+export function ProsodyPopovers({ insertions, voiceName, language, ...props }: ProsodyPopoversProps): ReactElement {
+  const emptyOptionsMessages: Record<string, string> = {};
+  const filteredInsertions = insertions.map((insertion) => {
+    if (!isExpressAsInsertion(insertion)) {
+      return insertion;
+    }
+
+    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: availableOptions,
+    };
+  });
+  const optionGroups = Object.fromEntries(
+    filteredInsertions
+      .filter(isExpressAsInsertion)
+      .map((insertion) => [insertion.id, createOptionGroups(insertion.options, language)]),
+  );
+
+  return (
+    <InsertionPopovers
+      {...props}
+      emptyOptionsMessages={emptyOptionsMessages}
+      language={language}
+      insertions={filteredInsertions}
+      optionGroups={optionGroups}
+    />
+  );
+}

package/src/components/popovers/TextPopovers.tsx

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import { InsertionPopovers, type InsertionPopoversProps } from "./InsertionPopovers";
+
+export type TextPopoversProps = InsertionPopoversProps;
+
+export function TextPopovers(props: TextPopoversProps): ReactElement {
+  return <InsertionPopovers {...props} />;
+}

package/src/components/popovers/TimingPopovers.tsx

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import { InsertionPopovers, type InsertionPopoversProps } from "./InsertionPopovers";
+
+export type TimingPopoversProps = InsertionPopoversProps;
+
+export function TimingPopovers(props: TimingPopoversProps): ReactElement {
+  return <InsertionPopovers {...props} />;
+}