ssml-builder-js 2.8.1 → 2.9.0

package/dist/react.mjs

@@ -43,12 +43,13 @@ import {
   resolveExpressAsStyles,
   updateEditableText,
   updateTagAttribute,
+  validateAzureSsml,
   validateSsml
-} from "./chunk-MWSDFGXW.mjs";
+} from "./chunk-JNJVTEL6.mjs";
 import "./chunk-6S5ODO6A.mjs";
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
-import { Fragment, forwardRef, useImperativeHandle } from "react";
+import { Fragment, forwardRef, useEffect as useEffect3, useImperativeHandle, useState as useState3 } from "react";
 import Editor from "@monaco-editor/react";
 
 // packages/ssml-editor-react/src/buttonVisibility.ts
@@ -141,6 +142,14 @@ var editorStyles = {
     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",
@@ -1799,6 +1808,140 @@ function useSsmlMonaco({
   return { editorRef, onMount };
 }
 
+// packages/ssml-editor-react/src/components/VisualSsmlEditor.tsx
+import { useMemo, useState as useState2 } from "react";
+function isElement(node) {
+  return typeof node !== "string" && node.type !== "text";
+}
+function elementLabel(element) {
+  return element.type === "custom" || element.type === "element" ? element.name : element.type;
+}
+function collectTextLeaves(nodes, path = [], ancestors = []) {
+  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, path, update) {
+  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(document2, path, value) {
+  return { ...document2, children: updateNodesAtPath(document2.children ?? [], path, () => value) };
+}
+function wrapTextAtPath(document2, path, start, end, tag, attributes) {
+  return {
+    ...document2,
+    children: updateNodesAtPath(document2.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: [] },
+          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] };
+      return [value.slice(0, start), wrapped, value.slice(end)].filter(
+        (part) => typeof part === "string" ? part.length > 0 : true
+      );
+    })
+  };
+}
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelect
+}) {
+  if (!isElement(node)) return null;
+  const name = elementLabel(node);
+  const isSelected = selectedPath?.join(".") === path.join(".");
+  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
+    TreeNode,
+    {
+      key: `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`,
+      node: child,
+      path: [...path, index],
+      selectedPath,
+      onSelect
+    }
+  ))));
+}
+function VisualSsmlEditor({
+  document: document2,
+  readOnly = false,
+  onChange,
+  onPreviewSelection
+}) {
+  const [selectedPath, setSelectedPath] = useState2(null);
+  const [selection, setSelection] = useState2({ start: 0, end: 0 });
+  const textLeaves = useMemo(() => collectTextLeaves(document2.children ?? []), [document2]);
+  const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
+  const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document2)), [document2]);
+  const commit = (nextDocument) => onChange?.(nextDocument);
+  const applyWrapper = (tag, attributes) => {
+    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(document2, selectedLeaf.path, start, end, tag, attributes));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual", "data-ssml-editor-visual": "" }, /* @__PURE__ */ React.createElement("fieldset", { className: "ssml-editor-visual-breadcrumb" }, /* @__PURE__ */ React.createElement("legend", null, "SSML structure breadcrumb"), /* @__PURE__ */ React.createElement("span", null, "<speak>"), selectedLeaf?.ancestors.map((ancestor, index) => /* @__PURE__ */ React.createElement("span", { key: selectedLeaf?.ancestors.slice(0, index + 1).join("/") }, " / <", ancestor, ">")), selectedPath && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setSelectedPath(null) }, "Clear parent")), diagnostics.length > 0 && /* @__PURE__ */ React.createElement("div", { role: "alert", "aria-invalid": "true", className: "ssml-editor-visual-errors" }, diagnostics.map((diagnostic) => /* @__PURE__ */ React.createElement("div", { key: `${diagnostic.code}-${diagnostic.message}` }, diagnostic.message))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-layout" }, /* @__PURE__ */ React.createElement("nav", { "aria-label": "SSML structure tree", className: "ssml-editor-visual-tree" }, /* @__PURE__ */ React.createElement("strong", null, "Structure"), /* @__PURE__ */ React.createElement("ul", null, document2.children?.map((node, index) => /* @__PURE__ */ React.createElement(
+    TreeNode,
+    {
+      key: isElement(node) ? elementLabel(node) : JSON.stringify(node),
+      node,
+      path: [index],
+      selectedPath,
+      onSelect: setSelectedPath
+    }
+  )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      value: selectedLeaf.value,
+      readOnly,
+      onSelect: (event) => setSelection({ start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd }),
+      onChange: (event) => commit(updateTextAtPath(document2, selectedLeaf.path, event.target.value))
+    }
+  )), /* @__PURE__ */ React.createElement("fieldset", { className: "ssml-editor-visual-actions" }, /* @__PURE__ */ React.createElement("legend", null, "Apply SSML formatting"), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { rate: "slow" }) }, "Rate"), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("prosody", { pitch: "high" }) }, "Pitch"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly,
+      onClick: () => applyWrapper("mstts:express-as", { style: "cheerful" })
+    },
+    "Emotion"
+  ), /* @__PURE__ */ React.createElement("button", { type: "button", disabled: readOnly, onClick: () => applyWrapper("break", { time: "500ms" }) }, "Pause"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly,
+      onClick: () => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value })
+    },
+    "Pronunciation"
+  ), onPreviewSelection && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPreviewSelection(buildSsml({ ...document2, children: [selectedLeaf.value] }))
+    },
+    "Preview selection"
+  ))) : /* @__PURE__ */ React.createElement("p", null, "Select an element or text node to edit it."))));
+}
+
 // packages/ssml-editor-react/src/SsmlEditor.tsx
 var UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
 var TIMING_POPOVER_TAGS = /* @__PURE__ */ new Set(["break", "mstts:silence", "mstts:audioduration"]);
@@ -2265,6 +2408,60 @@ var STYLE_CSS = `
   > .ssml-editor-help-settings-summary::before {
   content: "\u25BE";
 }
+[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() {
   if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
@@ -2334,8 +2531,11 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   toolbarStyle,
   displayClassName,
   displayStyle,
-  loadingFallback
+  loadingFallback,
+  editMode: editModeProp = "code"
 }, ref) {
+  const [editMode, setEditMode] = useState3(editModeProp);
+  useEffect3(() => setEditMode(editModeProp), [editModeProp]);
   const resolvedEditorOptions = {
     ...settings,
     ...editorOptions,
@@ -2413,6 +2613,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   );
   const {
     editorRef,
+    draftDocument,
     text,
     selectionOverlay,
     activeTags,
@@ -2424,6 +2625,7 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
     syntaxError,
     setSyntaxError,
     helpPanelId,
+    commit,
     handleTextChange,
     handleInsert,
     handleInsertBreak,
@@ -2683,10 +2885,39 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
           "aria-label": copy.toolbarAriaLabel,
           "data-ssml-editor-toolbar-actions": ""
         },
-        renderToolbarItems()
+        renderToolbarItems(),
+        /* @__PURE__ */ React.createElement("span", { style: editorStyles.toolbarSeparator, "aria-hidden": "true" }),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            style: editMode === "visual" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+            "aria-pressed": editMode === "visual",
+            onClick: () => setEditMode("visual")
+          },
+          "Visual"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            style: editMode === "code" ? { ...toolbarButtonStyle, ...editorStyles.toolbarButtonActive } : toolbarButtonStyle,
+            "aria-pressed": editMode === "code",
+            onClick: () => setEditMode("code")
+          },
+          "Code"
+        )
       )
     ),
-    /* @__PURE__ */ React.createElement("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "" }, isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ React.createElement("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading }, /* @__PURE__ */ React.createElement("h3", { style: editorStyles.helpHeading }, copy.helpHeading), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpDescription }, copy.helpDescription), helpInsertions.length > 0 && /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpList }, helpInsertions.map((insertion) => /* @__PURE__ */ React.createElement("li", { key: insertion.id, style: editorStyles.helpItem }, /* @__PURE__ */ React.createElement("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion }, /* @__PURE__ */ React.createElement("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary }, /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpIcon, "aria-hidden": "true" }, insertion.icon), /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpSettingsSummaryContent }, /* @__PURE__ */ React.createElement("strong", null, insertion.labels[language]), " ", insertion.tagName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("code", null, `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}`), " \u2014", " "), insertion.descriptions[language])), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpSettingsDescription }, /* @__PURE__ */ React.createElement("strong", null, copy.parameters, ":"), " ", insertion.parameterDescription[language]), /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpSettingsList }, insertion.options.map((option) => /* @__PURE__ */ React.createElement("li", { key: option.value }, /* @__PURE__ */ React.createElement("strong", null, option.labels[language]), option.descriptions && /* @__PURE__ */ React.createElement(React.Fragment, null, " \u2014 ", option.descriptions[language]))))))))), /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: displayClassName, style: { ...editorStyles.display, ...displayStyle }, "data-ssml-editor-display": "" }, isHelpOpen && isSsmlEditorButtonVisible(buttonVisibility, "help") && /* @__PURE__ */ React.createElement("section", { id: helpPanelId, style: editorStyles.helpPanel, "aria-label": copy.helpHeading }, /* @__PURE__ */ React.createElement("h3", { style: editorStyles.helpHeading }, copy.helpHeading), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpDescription }, copy.helpDescription), helpInsertions.length > 0 && /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpList }, helpInsertions.map((insertion) => /* @__PURE__ */ React.createElement("li", { key: insertion.id, style: editorStyles.helpItem }, /* @__PURE__ */ React.createElement("details", { className: "ssml-editor-help-settings-accordion", style: editorStyles.helpSettingsAccordion }, /* @__PURE__ */ React.createElement("summary", { className: "ssml-editor-help-settings-summary", style: editorStyles.helpSettingsSummary }, /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpIcon, "aria-hidden": "true" }, insertion.icon), /* @__PURE__ */ React.createElement("span", { style: editorStyles.helpSettingsSummaryContent }, /* @__PURE__ */ React.createElement("strong", null, insertion.labels[language]), " ", insertion.tagName && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("code", null, `<${insertion.tagName}${insertion.selfClosing ? "/>" : ">"}`), " \u2014", " "), insertion.descriptions[language])), /* @__PURE__ */ React.createElement("p", { style: editorStyles.helpSettingsDescription }, /* @__PURE__ */ React.createElement("strong", null, copy.parameters, ":"), " ", insertion.parameterDescription[language]), /* @__PURE__ */ React.createElement("ul", { style: editorStyles.helpSettingsList }, insertion.options.map((option) => /* @__PURE__ */ React.createElement("li", { key: option.value }, /* @__PURE__ */ React.createElement("strong", null, option.labels[language]), option.descriptions && /* @__PURE__ */ React.createElement(React.Fragment, null, " \u2014 ", option.descriptions[language]))))))))), editMode === "visual" ? /* @__PURE__ */ React.createElement("div", { style: editorStyles.visual }, /* @__PURE__ */ React.createElement(
+      VisualSsmlEditor,
+      {
+        document: draftDocument,
+        readOnly: isReadOnly,
+        onChange: commit,
+        onPreviewSelection
+      }
+    )) : /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
       Editor,
       {
         height: editorHeight,
@@ -2747,6 +2978,7 @@ export {
   SSML_HOVER_COPY,
   SSML_INSERTIONS,
   SsmlEditor,
+  VisualSsmlEditor,
   createSsmlEditorInsertionDefinition,
   registerSsmlCodeLens,
   updateTagAttribute