@ssml-builder-js/ssml-editor-react 2.8.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssml-builder-js/ssml-editor-react",
-  "version": "2.8.1",
+  "version": "2.10.0",
   "description": "React-based SSML editor component",
   "license": "MIT",
   "repository": {
@@ -52,6 +52,6 @@
     }
   },
   "dependencies": {
-    "@ssml-builder-js/ssml-core": "^2.8.1"
+    "@ssml-builder-js/ssml-core": "^2.10.0"
   }
 }

package/src/SsmlEditor.tsx

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef, useImperativeHandle } from "react";
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import Editor from "@monaco-editor/react";
 import type { SsmlDocument } from "@ssml-builder-js/ssml-core";
@@ -40,6 +40,7 @@ import { InsertionPopover } from "./components/popovers/InsertionPopover";
 import { useSsmlEditorState } from "./hooks/useSsmlEditorState";
 import { useSsmlMonaco } from "./hooks/useSsmlMonaco";
 import { editorStyles as styles } from "./styles/editorStyles";
+import { VisualSsmlEditor } from "./components/VisualSsmlEditor";
 const UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
 const TIMING_POPOVER_TAGS = new Set(["break", "mstts:silence", "mstts:audioduration"]);
 const PROSODY_POPOVER_TAGS = new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
@@ -637,6 +638,60 @@ const STYLE_CSS = `
   > .ssml-editor-help-settings-summary::before {
   content: "▾";
 }
+[data-ssml-editor] .ssml-editor-visual-layout {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.35fr) minmax(16rem, 1fr);
+  gap: 1rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree,
+[data-ssml-editor] .ssml-editor-visual-form {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+}
+[data-ssml-editor] .ssml-editor-visual-tree ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button,
+[data-ssml-editor] .ssml-editor-visual-breadcrumb button,
+[data-ssml-editor] .ssml-editor-visual-actions button {
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button[aria-current] {
+  border-color: var(--ssml-editor-active-border);
+  background: var(--ssml-editor-active-bg);
+}
+[data-ssml-editor] .ssml-editor-visual-breadcrumb,
+[data-ssml-editor] .ssml-editor-visual-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+[data-ssml-editor] .ssml-editor-visual-form textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 6rem;
+  padding: 0.5rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  font: inherit;
+}
+[data-ssml-editor] .ssml-editor-visual-errors {
+  padding: 0.5rem;
+  color: var(--ssml-editor-error);
+  background: var(--ssml-editor-error-bg);
+  border: 1px solid var(--ssml-editor-error);
+  border-radius: 0.25rem;
+}
 `.trim();
 
 function injectEditorTheme(): void {
@@ -683,6 +738,8 @@ export interface SsmlEditorProps {
   minHeight?: string | number;
   /** Whether the Monaco editor is read-only. */
   readOnly?: boolean;
+  /** Selects the XML source editor or the structured visual editor. */
+  editMode?: SsmlEditorEditMode;
   /** Monaco theme mode. */
   theme?: SsmlEditorTheme;
   /** Monaco editor font size. */
@@ -723,6 +780,8 @@ export interface SsmlEditorProps {
   displayStyle?: CSSProperties;
 }
 
+export type SsmlEditorEditMode = "code" | "visual";
+
 export interface SelectionInfo {
   selectedText: string;
   characterCount: number;
@@ -814,9 +873,12 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     displayClassName,
     displayStyle,
     loadingFallback,
+    editMode: editModeProp = "code",
   }: SsmlEditorProps,
   ref,
 ): ReactElement {
+  const [editMode, setEditMode] = useState<SsmlEditorEditMode>(editModeProp);
+  useEffect(() => setEditMode(editModeProp), [editModeProp]);
   const resolvedEditorOptions: SsmlEditorOptions = {
     ...settings,
     ...editorOptions,
@@ -905,6 +967,7 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
 
   const {
     editorRef,
+    draftDocument,
     text,
     selectionOverlay,
     activeTags,
@@ -916,6 +979,7 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     syntaxError,
     setSyntaxError,
     helpPanelId,
+    commit,
     handleTextChange,
     handleInsert,
     handleInsertBreak,
@@ -1210,6 +1274,27 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
             data-ssml-editor-toolbar-actions=""
           >
             {renderToolbarItems()}
+            <span style={styles.toolbarSeparator} aria-hidden="true" />
+            <button
+              type="button"
+              style={
+                editMode === "visual" ? { ...toolbarButtonStyle, ...styles.toolbarButtonActive } : toolbarButtonStyle
+              }
+              aria-pressed={editMode === "visual"}
+              onClick={() => setEditMode("visual")}
+            >
+              Visual
+            </button>
+            <button
+              type="button"
+              style={
+                editMode === "code" ? { ...toolbarButtonStyle, ...styles.toolbarButtonActive } : toolbarButtonStyle
+              }
+              aria-pressed={editMode === "code"}
+              onClick={() => setEditMode("code")}
+            >
+              Code
+            </button>
           </div>
         </div>
       )}
@@ -1255,65 +1340,76 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
             )}
           </section>
         )}
-        <div style={{ ...styles.editor, minHeight: editorMinHeight }}>
-          <Editor
-            height={editorHeight}
-            language="xml"
-            theme={isDarkTheme ? "vs-dark" : "light"}
-            options={{
-              automaticLayout: resolvedEditorOptions.automaticLayout ?? true,
-              autoClosingBrackets: "never",
-              fontSize: resolvedEditorOptions.fontSize,
-              hover: { enabled: "on" },
-              inlayHints: { enabled: decorationsVisible ? "on" : "off" },
-              lineNumbers: resolvedEditorOptions.lineNumbers,
-              minimap: {
-                enabled: resolvedEditorOptions.minimap ?? true,
-              },
-              readOnly: isReadOnly,
-              wordWrap: resolvedEditorOptions.wordWrap,
-            }}
-            value={text}
-            loading={loadingFallback}
-            onMount={onMount}
-            onChange={(value) => handleTextChange(value ?? "")}
-          />
-          {selectionOverlay.hasSelection && selectionOverlay.position && (
-            <div
-              role="toolbar"
-              aria-label={copy.selectionActions}
-              data-ssml-editor-selection-actions=""
-              style={{
-                ...styles.selectionActions,
-                top: selectionOverlay.position.top,
-                left: selectionOverlay.position.left,
-                transform:
-                  selectionOverlay.placement === "above"
-                    ? "translateY(calc(-100% - 0.5rem))"
-                    : `translateY(calc(${selectionOverlay.position.height}px + 0.5rem))`,
+        {editMode === "visual" ? (
+          <div style={styles.visual}>
+            <VisualSsmlEditor
+              document={draftDocument}
+              readOnly={isReadOnly}
+              onChange={commit}
+              onPreviewSelection={onPreviewSelection}
+            />
+          </div>
+        ) : (
+          <div style={{ ...styles.editor, minHeight: editorMinHeight }}>
+            <Editor
+              height={editorHeight}
+              language="xml"
+              theme={isDarkTheme ? "vs-dark" : "light"}
+              options={{
+                automaticLayout: resolvedEditorOptions.automaticLayout ?? true,
+                autoClosingBrackets: "never",
+                fontSize: resolvedEditorOptions.fontSize,
+                hover: { enabled: "on" },
+                inlayHints: { enabled: decorationsVisible ? "on" : "off" },
+                lineNumbers: resolvedEditorOptions.lineNumbers,
+                minimap: {
+                  enabled: resolvedEditorOptions.minimap ?? true,
+                },
+                readOnly: isReadOnly,
+                wordWrap: resolvedEditorOptions.wordWrap,
               }}
-              onMouseDown={(event) => event.preventDefault()}
-            >
-              <span style={styles.selectionCount} aria-live="polite">
-                {selectionOverlay.characterCount}
-                {copy.selectionCountSuffix}
-              </span>
-              <span style={styles.selectionActionsDivider} aria-hidden="true" />
-              <button
-                type="button"
-                style={styles.selectionActionButton}
-                title={copy.previewSelectionTitle}
-                disabled={!canPreviewSelection}
-                onClick={previewSelection}
+              value={text}
+              loading={loadingFallback}
+              onMount={onMount}
+              onChange={(value) => handleTextChange(value ?? "")}
+            />
+            {selectionOverlay.hasSelection && selectionOverlay.position && (
+              <div
+                role="toolbar"
+                aria-label={copy.selectionActions}
+                data-ssml-editor-selection-actions=""
+                style={{
+                  ...styles.selectionActions,
+                  top: selectionOverlay.position.top,
+                  left: selectionOverlay.position.left,
+                  transform:
+                    selectionOverlay.placement === "above"
+                      ? "translateY(calc(-100% - 0.5rem))"
+                      : `translateY(calc(${selectionOverlay.position.height}px + 0.5rem))`,
+                }}
+                onMouseDown={(event) => event.preventDefault()}
               >
-                <span style={styles.selectionActionIcon} aria-hidden="true">
-                  ▶
+                <span style={styles.selectionCount} aria-live="polite">
+                  {selectionOverlay.characterCount}
+                  {copy.selectionCountSuffix}
                 </span>
-                {copy.previewSelection}
-              </button>
-            </div>
-          )}
-        </div>
+                <span style={styles.selectionActionsDivider} aria-hidden="true" />
+                <button
+                  type="button"
+                  style={styles.selectionActionButton}
+                  title={copy.previewSelectionTitle}
+                  disabled={!canPreviewSelection}
+                  onClick={previewSelection}
+                >
+                  <span style={styles.selectionActionIcon} aria-hidden="true">
+                    ▶
+                  </span>
+                  {copy.previewSelection}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
         {syntaxError && (
           <p style={styles.error} role="alert">
             {copy.syntaxError}: {syntaxError.message}

package/src/components/VisualSsmlEditor.tsx

@@ -0,0 +1,240 @@
+import { useMemo, useState } from "react";
+import type { ReactElement } from "react";
+import {
+  buildSsml,
+  validateAzureSsml,
+  type SsmlDocument,
+  type SsmlElement,
+  type SsmlNode,
+} from "@ssml-builder-js/ssml-core";
+
+export interface VisualSsmlEditorProps {
+  document: SsmlDocument;
+  readOnly?: boolean;
+  onChange?: (document: SsmlDocument) => void;
+  onPreviewSelection?: (ssml: string) => void;
+}
+
+interface TextLeaf {
+  path: number[];
+  value: string;
+  ancestors: string[];
+}
+
+function isElement(node: SsmlNode): node is SsmlElement {
+  return typeof node !== "string" && node.type !== "text";
+}
+
+function elementLabel(element: SsmlElement): string {
+  return element.type === "custom" || element.type === "element" ? element.name : element.type;
+}
+
+function collectTextLeaves(nodes: SsmlNode[], path: number[] = [], ancestors: string[] = []): TextLeaf[] {
+  return nodes.flatMap((node, index) => {
+    const currentPath = [...path, index];
+    if (typeof node === "string") return [{ ancestors, path: currentPath, value: node }];
+    if (node.type === "text") return [{ ancestors, path: currentPath, value: node.value }];
+    return collectTextLeaves(node.children ?? [], currentPath, [...ancestors, elementLabel(node)]);
+  });
+}
+
+function updateNodesAtPath(
+  nodes: SsmlNode[],
+  path: number[],
+  update: (node: SsmlNode) => SsmlNode | SsmlNode[],
+): SsmlNode[] {
+  if (path.length === 0) return nodes;
+  const [index, ...rest] = path;
+  return nodes.flatMap((node, nodeIndex) => {
+    if (nodeIndex !== index) return [node];
+    if (rest.length === 0) {
+      const next = update(node);
+      return Array.isArray(next) ? next : [next];
+    }
+    if (!isElement(node)) return [node];
+    return [{ ...node, children: updateNodesAtPath(node.children ?? [], rest, update) }];
+  });
+}
+
+function updateTextAtPath(document: SsmlDocument, path: number[], value: string): SsmlDocument {
+  return { ...document, children: updateNodesAtPath(document.children ?? [], path, () => value) };
+}
+
+function wrapTextAtPath(
+  document: SsmlDocument,
+  path: number[],
+  start: number,
+  end: number,
+  tag: SsmlElement["type"],
+  attributes: Record<string, string>,
+): SsmlDocument {
+  return {
+    ...document,
+    children: updateNodesAtPath(document.children ?? [], path, (node) => {
+      const value = typeof node === "string" ? node : node.type === "text" ? node.value : "";
+      if (!value || start === end) return node;
+      if (tag === "break") {
+        return [
+          value.slice(0, start),
+          { type: tag, attributes, children: [] } as SsmlElement,
+          value.slice(start),
+        ].filter((part) => (typeof part === "string" ? part.length > 0 : true));
+      }
+      const selected = value.slice(start, end);
+      const wrapped = { type: tag, attributes, children: [selected] } as SsmlElement;
+      return [value.slice(0, start), wrapped, value.slice(end)].filter((part) =>
+        typeof part === "string" ? part.length > 0 : true,
+      );
+    }),
+  };
+}
+
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelect,
+}: {
+  node: SsmlNode;
+  path: number[];
+  selectedPath: number[] | null;
+  onSelect: (path: number[]) => void;
+}): ReactElement | null {
+  if (!isElement(node)) return null;
+  const name = elementLabel(node);
+  const isSelected = selectedPath?.join(".") === path.join(".");
+  return (
+    <li>
+      <button type="button" aria-current={isSelected ? "true" : undefined} onClick={() => onSelect(path)}>
+        {`<${name}>`}
+      </button>
+      {(node.children ?? []).length > 0 && (
+        <ul>
+          {node.children?.map((child, index) => (
+            <TreeNode
+              key={`${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`}
+              node={child}
+              path={[...path, index]}
+              selectedPath={selectedPath}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function VisualSsmlEditor({
+  document,
+  readOnly = false,
+  onChange,
+  onPreviewSelection,
+}: VisualSsmlEditorProps): ReactElement {
+  const [selectedPath, setSelectedPath] = useState<number[] | null>(null);
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
+  const textLeaves = useMemo(() => collectTextLeaves(document.children ?? []), [document]);
+  const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
+  const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document)), [document]);
+  const commit = (nextDocument: SsmlDocument): void => onChange?.(nextDocument);
+
+  const applyWrapper = (tag: SsmlElement["type"], attributes: Record<string, string>): void => {
+    if (readOnly || !selectedLeaf) return;
+    const start = selection.start === selection.end ? 0 : selection.start;
+    const end = selection.start === selection.end ? selectedLeaf.value.length : selection.end;
+    commit(wrapTextAtPath(document, selectedLeaf.path, start, end, tag, attributes));
+  };
+
+  return (
+    <div className="ssml-editor-visual" data-ssml-editor-visual="">
+      <fieldset className="ssml-editor-visual-breadcrumb">
+        <legend>SSML structure breadcrumb</legend>
+        <span>&lt;speak&gt;</span>
+        {selectedLeaf?.ancestors.map((ancestor, index) => (
+          <span key={selectedLeaf?.ancestors.slice(0, index + 1).join("/")}> / &lt;{ancestor}&gt;</span>
+        ))}
+        {selectedPath && (
+          <button type="button" onClick={() => setSelectedPath(null)}>
+            Clear parent
+          </button>
+        )}
+      </fieldset>
+      {diagnostics.length > 0 && (
+        <div role="alert" aria-invalid="true" className="ssml-editor-visual-errors">
+          {diagnostics.map((diagnostic) => (
+            <div key={`${diagnostic.code}-${diagnostic.message}`}>{diagnostic.message}</div>
+          ))}
+        </div>
+      )}
+      <div className="ssml-editor-visual-layout">
+        <nav aria-label="SSML structure tree" className="ssml-editor-visual-tree">
+          <strong>Structure</strong>
+          <ul>
+            {document.children?.map((node, index) => (
+              <TreeNode
+                key={isElement(node) ? elementLabel(node) : JSON.stringify(node)}
+                node={node}
+                path={[index]}
+                selectedPath={selectedPath}
+                onSelect={setSelectedPath}
+              />
+            ))}
+          </ul>
+        </nav>
+        <div className="ssml-editor-visual-form">
+          {selectedLeaf ? (
+            <>
+              <label>
+                Text
+                <textarea
+                  value={selectedLeaf.value}
+                  readOnly={readOnly}
+                  onSelect={(event) =>
+                    setSelection({ start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd })
+                  }
+                  onChange={(event) => commit(updateTextAtPath(document, selectedLeaf.path, event.target.value))}
+                />
+              </label>
+              <fieldset className="ssml-editor-visual-actions">
+                <legend>Apply SSML formatting</legend>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("prosody", { rate: "slow" })}>
+                  Rate
+                </button>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("prosody", { pitch: "high" })}>
+                  Pitch
+                </button>
+                <button
+                  type="button"
+                  disabled={readOnly}
+                  onClick={() => applyWrapper("mstts:express-as", { style: "cheerful" })}
+                >
+                  Emotion
+                </button>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("break", { time: "500ms" })}>
+                  Pause
+                </button>
+                <button
+                  type="button"
+                  disabled={readOnly}
+                  onClick={() => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value })}
+                >
+                  Pronunciation
+                </button>
+                {onPreviewSelection && (
+                  <button
+                    type="button"
+                    onClick={() => onPreviewSelection(buildSsml({ ...document, children: [selectedLeaf.value] }))}
+                  >
+                    Preview selection
+                  </button>
+                )}
+              </fieldset>
+            </>
+          ) : (
+            <p>Select an element or text node to edit it.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/constants/ssmlPresets.ts

@@ -322,6 +322,11 @@ export const SSML_ATTRIBUTE_PRESETS = {
   "mstts:audioduration": {
     value: AUDIO_DURATION_PRESETS,
   },
+  "mstts:backgroundaudio": {
+    volume: PROSODY_VOLUME_PRESETS,
+    fadein: AUDIO_DURATION_PRESETS,
+    fadeout: AUDIO_DURATION_PRESETS,
+  },
   silence: {
     type: SILENCE_TYPE_PRESETS,
     value: SILENCE_VALUE_PRESETS,

package/src/index.tsx

@@ -3,6 +3,8 @@
  */
 
 export { SsmlEditor } from "./SsmlEditor";
+export { VisualSsmlEditor } from "./components/VisualSsmlEditor";
+export type { VisualSsmlEditorProps } from "./components/VisualSsmlEditor";
 export type {
   SsmlEditorButton,
   SsmlEditorButtonVisibility,
@@ -21,6 +23,7 @@ export type {
   SsmlEditorOptions,
   SsmlEditorRef,
   SsmlEditorProps,
+  SsmlEditorEditMode,
   SsmlEditorToolbarGroup,
   SelectionInfo,
   SsmlEditorTheme,

package/src/ssmlCompletion.ts

@@ -46,6 +46,22 @@ const SSML_COMPLETION_SNIPPETS = [
     label: "mstts:audioduration",
     insertText: '<mstts:audioduration value="10s" />',
   },
+  {
+    label: "mstts:dialog",
+    insertText: `<mstts:dialog>\n  <mstts:turn voice="\${1:en-US-JennyNeural}">\${2:text}</mstts:turn>\n</mstts:dialog>`,
+  },
+  {
+    label: "mstts:turn",
+    insertText: `<mstts:turn voice="\${1:en-US-JennyNeural}">\${2:text}</mstts:turn>`,
+  },
+  {
+    label: "mstts:backgroundaudio",
+    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:-3dB}" />`,
+  },
+  {
+    label: "mstts:ttsembedding",
+    insertText: `<mstts:ttsembedding>\${1:text}</mstts:ttsembedding>`,
+  },
   {
     label: "sub",
     insertText: `<sub alias="\${1:読み}">\${2:漢字}</sub>`,

package/src/ssmlHover.ts

@@ -339,6 +339,63 @@ const SSML_TAG_DEFINITIONS: readonly SsmlTagDefinition[] = [
       },
     ],
   },
+  {
+    name: "mstts:dialog",
+    description: "Groups multiple Azure dialog turns that can use different voices.",
+    parameters: [],
+  },
+  {
+    name: "mstts:turn",
+    description: "Adds one dialog turn using the required Azure voice name.",
+    parameters: [
+      {
+        name: "voice",
+        description: "The Azure voice used for this turn, such as `en-US-JennyNeural`.",
+        example: "en-US-JennyNeural",
+      },
+    ],
+  },
+  {
+    name: "mstts:backgroundaudio",
+    description: "Plays background audio while speech is synthesized.",
+    parameters: [
+      {
+        name: "src",
+        description: "An absolute HTTP(S) URL for the background audio file.",
+        example: "https://example.com/music.mp3",
+      },
+      {
+        name: "volume",
+        description: "The background audio volume, for example `-3dB` or `medium`.",
+        example: "-3dB",
+      },
+      {
+        name: "fadein",
+        description: "The fade-in duration, for example `1s`.",
+        example: "1s",
+      },
+      {
+        name: "fadeout",
+        description: "The fade-out duration, for example `500ms`.",
+        example: "500ms",
+      },
+    ],
+  },
+  {
+    name: "mstts:ttsembedding",
+    description: "Embeds custom voice or speaker profile metadata for Azure Speech.",
+    parameters: [],
+  },
+  {
+    name: "mstts:embedding",
+    description: "Specifies embedding metadata for custom voice scenarios.",
+    parameters: [],
+  },
+  {
+    name: "mstts:voiceconversion",
+    description: "Specifies voice conversion metadata for custom voice scenarios.",
+    parameters: [],
+  },
 ] as const;
 
 export { SSML_TAG_DEFINITIONS };

package/src/styles/editorStyles.ts

@@ -82,6 +82,14 @@ export const editorStyles: Record<string, CSSProperties> = {
     display: "grid",
     gap: "0.5rem",
   },
+  visual: {
+    display: "grid",
+    gap: "0.75rem",
+    minHeight: "8rem",
+    padding: "0.75rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+  },
   toolbarIconOnly: {
     justifyContent: "center",
     minWidth: "2.25rem",