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

package/src/styles/editorStyles.ts

@@ -0,0 +1,282 @@
+import type { CSSProperties } from "react";
+import { OVERLAY_Z_INDEX } from "../constants/ui";
+
+export const editorStyles: Record<string, CSSProperties> = {
+  container: {
+    display: "grid",
+    gap: "0.75rem",
+    padding: "1rem",
+    border: "1px solid var(--ssml-editor-border)",
+    borderRadius: "0.5rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-bg)",
+  },
+  toolbarContainer: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "0.5rem",
+  },
+  toolbarActions: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "0.5rem",
+  },
+  toolbarSeparator: {
+    width: "1px",
+    height: "2.25rem",
+    margin: "0 0.25rem",
+    backgroundColor: "var(--ssml-editor-border)",
+  },
+  toolbarDropdown: {
+    position: "relative",
+    display: "inline-block",
+  },
+  toolbarSwitch: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    minHeight: "2.25rem",
+    color: "var(--ssml-editor-color)",
+    font: "inherit",
+  },
+  toolbarSwitchTrack: {
+    display: "inline-flex",
+    alignItems: "center",
+    width: "2.75rem",
+    height: "1.5rem",
+    padding: "0.1875rem",
+    border: 0,
+    borderRadius: "999px",
+    backgroundColor: "var(--ssml-editor-control-border)",
+    cursor: "pointer",
+    font: "inherit",
+    transition: "background-color 0.2s ease",
+  },
+  toolbarSwitchThumb: {
+    width: "1.125rem",
+    height: "1.125rem",
+    borderRadius: "50%",
+    backgroundColor: "var(--ssml-editor-bg)",
+    transition: "transform 0.2s ease",
+  },
+  toolbarButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    minHeight: "2.25rem",
+    padding: "0.375rem 0.625rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+    font: "inherit",
+    cursor: "pointer",
+  },
+  toolbarButtonActive: {
+    border: "1px solid var(--ssml-editor-active-border)",
+    backgroundColor: "var(--ssml-editor-active-bg)",
+  },
+  display: {
+    display: "grid",
+    gap: "0.5rem",
+  },
+  toolbarIconOnly: {
+    justifyContent: "center",
+    minWidth: "2.25rem",
+    padding: "0.375rem",
+  },
+  toolbarIcon: {
+    display: "inline-flex",
+    width: "1.25rem",
+    justifyContent: "center",
+    fontSize: "1.1rem",
+    lineHeight: 1,
+  },
+  toolbarChevron: {
+    fontSize: "0.7rem",
+    lineHeight: 1,
+  },
+  toolbarMenu: {
+    position: "fixed",
+    zIndex: OVERLAY_Z_INDEX,
+    display: "grid",
+    minWidth: "max-content",
+    maxHeight: "min(24rem, calc(100vh - 1rem))",
+    gap: "0.125rem",
+    padding: "0.25rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+    boxShadow: "0 0.25rem 0.75rem rgb(0 0 0 / 20%)",
+    overflowY: "auto",
+  },
+  toolbarOption: {
+    padding: "0.375rem 0.5rem",
+    border: 0,
+    borderRadius: "0.125rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "transparent",
+    font: "inherit",
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+  },
+  toolbarOptionGroup: {
+    display: "grid",
+    gap: "0.125rem",
+    margin: 0,
+    padding: 0,
+    border: 0,
+  },
+  toolbarOptionGroupLabel: {
+    padding: "0.375rem 0.5rem 0.125rem",
+    color: "var(--ssml-editor-color)",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+  },
+  toolbarEmpty: {
+    margin: 0,
+    padding: "0.375rem 0.5rem",
+    color: "var(--ssml-editor-color)",
+    whiteSpace: "nowrap",
+  },
+  toolbarEmptySelect: {
+    padding: "0.375rem 0.5rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.125rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+    font: "inherit",
+    textAlign: "left",
+  },
+  helpPanel: {
+    display: "grid",
+    gap: "0.5rem",
+    width: "100%",
+    padding: "0.75rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    backgroundColor: "var(--ssml-editor-preview-bg)",
+  },
+  helpHeading: {
+    margin: 0,
+    fontSize: "1rem",
+  },
+  helpDescription: {
+    margin: 0,
+    lineHeight: 1.5,
+  },
+  helpList: {
+    display: "grid",
+    gap: "0.375rem",
+    margin: 0,
+    paddingLeft: "1.25rem",
+  },
+  helpItem: {
+    listStyleType: "none",
+    lineHeight: 1.45,
+  },
+  helpIcon: {
+    display: "inline-flex",
+    width: "1.25rem",
+    justifyContent: "center",
+    fontSize: "1.1rem",
+    lineHeight: 1.45,
+  },
+  helpSettingsAccordion: {
+    marginTop: "0.375rem",
+    overflow: "hidden",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+  },
+  helpSettingsSummary: {
+    display: "grid",
+    gridTemplateColumns: "1rem 1.25rem minmax(0, 1fr)",
+    columnGap: "0.5rem",
+    alignItems: "start",
+    padding: "0.5rem 0.625rem",
+    cursor: "pointer",
+  },
+  helpSettingsSummaryContent: {
+    minWidth: 0,
+  },
+  helpSettingsDescription: {
+    margin: "0.5rem 0.75rem 0",
+    fontSize: "0.875rem",
+  },
+  helpSettingsList: {
+    display: "grid",
+    gap: "0.125rem",
+    margin: "0.25rem 0.75rem 0.75rem",
+    paddingLeft: "1.25rem",
+    fontSize: "0.875rem",
+  },
+  editor: {
+    boxSizing: "border-box",
+    position: "relative",
+    width: "100%",
+    minHeight: "8rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    overflow: "visible",
+  },
+  selectionActions: {
+    position: "absolute",
+    zIndex: OVERLAY_Z_INDEX,
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "0.25rem",
+    maxWidth: "calc(100% - 1rem)",
+    padding: "0.25rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.375rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-control-bg)",
+    boxShadow: "0 0.25rem 0.75rem rgb(0 0 0 / 20%)",
+  },
+  selectionCount: {
+    padding: "0.25rem 0.375rem",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+  },
+  selectionActionsDivider: {
+    width: "1px",
+    height: "1.5rem",
+    backgroundColor: "var(--ssml-editor-border)",
+  },
+  selectionActionButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.25rem",
+    minHeight: "1.75rem",
+    padding: "0.25rem 0.375rem",
+    border: "1px solid var(--ssml-editor-control-border)",
+    borderRadius: "0.25rem",
+    color: "var(--ssml-editor-color)",
+    backgroundColor: "var(--ssml-editor-bg)",
+    font: "inherit",
+    fontSize: "0.875rem",
+    cursor: "pointer",
+  },
+  selectionActionIcon: {
+    display: "inline-flex",
+    width: "1rem",
+    justifyContent: "center",
+    lineHeight: 1,
+  },
+  error: {
+    margin: 0,
+    padding: "0.5rem 0.75rem",
+    border: "1px solid var(--ssml-editor-error)",
+    borderRadius: "0.25rem",
+    color: "var(--ssml-editor-error)",
+    backgroundColor: "var(--ssml-editor-error-bg)",
+    lineHeight: 1.5,
+  },
+};

package/test/format-xml-edge-cases.test.ts

@@ -0,0 +1,107 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { formatXml, formatXmlFragment } from "../src/formatXml.ts";
+
+test("formatXml keeps declarations, comments, and CDATA at the current depth", () => {
+  assert.equal(
+    formatXml('<?xml version="1.0"?><speak><!-- comment --><voice>text</voice><![CDATA[raw <xml>]]></speak>'),
+    '<?xml version="1.0"?>\n<speak>\n  <!-- comment -->\n  <voice>text</voice>\n  <![CDATA[raw <xml>]]>\n</speak>',
+  );
+});
+
+test("formatXml handles inline text and self-closing siblings", () => {
+  assert.equal(
+    formatXml(" \n<root>Hello<item>world</item><empty />!</root>\n "),
+    "<root>Hello<item>world</item><empty />!</root>",
+  );
+});
+
+test("formatXml preserves attribute contents containing angle brackets", () => {
+  assert.equal(
+    formatXml('<root><item name="first > second" value="second"/></root>'),
+    '<root>\n  <item name="first > second" value="second"/>\n</root>',
+  );
+});
+
+test("formatXml preserves namespaces, entities, and mixed-content whitespace", () => {
+  const source =
+    '<speak xml:lang="en-US" xmlns:mstts="https://example.test/mstts"><voice name="first > second" data="&amp; &quot;">left <break time="500ms"/> right &amp; text</voice></speak>';
+
+  assert.equal(
+    formatXml(source),
+    '<speak xml:lang="en-US" xmlns:mstts="https://example.test/mstts">\n  <voice name="first > second" data="&amp; &quot;">left <break time="500ms"/> right &amp; text</voice>\n</speak>',
+  );
+});
+
+test("formatXml returns malformed input unchanged", () => {
+  const malformed = " \n<root><child></root> \n";
+  const incomplete = '<root attribute="unterminated>';
+
+  assert.equal(formatXml(malformed), malformed);
+  assert.equal(formatXml(incomplete), incomplete);
+  assert.equal(formatXml("<root>&unknown;</root>"), "<root>&unknown;</root>");
+  assert.equal(formatXml("<root/><second/>"), "<root/><second/>");
+});
+
+test("formatXml removes formatting whitespace and remains idempotent", () => {
+  const source =
+    ' \n<?xml version="1.0"?>\n<speak>\n  <!-- comment --> \n  <voice><![CDATA[raw <xml>]]></voice>\n  <break time="500ms"/>\n</speak>\n ';
+  const formatted = formatXml(source);
+
+  assert.equal(
+    formatted,
+    '<?xml version="1.0"?>\n<speak>\n  <!-- comment -->\n  <voice>\n    <![CDATA[raw <xml>]]>\n  </voice>\n  <break time="500ms"/>\n</speak>',
+  );
+  assert.equal(formatXml(formatted), formatted);
+});
+
+test("formatXml formats empty elements as a stable block", () => {
+  const formatted = formatXml("<root><empty></empty></root>");
+
+  assert.equal(formatted, "<root>\n  <empty>\n  </empty>\n</root>");
+  assert.equal(formatXml(formatted), formatted);
+});
+
+test("formatXml keeps empty pair elements that may contain text", () => {
+  assert.equal(
+    formatXmlFragment("<emphasis></emphasis><prosody></prosody><voice></voice>"),
+    "<emphasis>\n</emphasis>\n<prosody>\n</prosody>\n<voice>\n</voice>",
+  );
+});
+
+test("formatXml self-closes intrinsically empty elements only", () => {
+  assert.equal(
+    formatXmlFragment("<break></break><bookmark></bookmark><mark></mark><mstts:silence></mstts:silence>"),
+    "<break/>\n<bookmark/>\n<mark/>\n<mstts:silence/>",
+  );
+});
+
+test("formatXmlFragment formats sibling elements from the editor body", () => {
+  assert.equal(
+    formatXmlFragment('<break time="500ms"/><emphasis level="strong">Important</emphasis>'),
+    '<break time="500ms"/>\n<emphasis level="strong">Important</emphasis>',
+  );
+});
+
+test("formatXml preserves a trailing line ending", () => {
+  const formattedDocument = formatXml("<root><child/></root>\n");
+  const formattedFragment = formatXmlFragment('<break time="500ms"/>\r\n');
+
+  assert.equal(formattedDocument, "<root>\n  <child/>\n</root>\n");
+  assert.equal(formattedFragment, '<break time="500ms"/>\r\n');
+  assert.equal(formatXml(formattedDocument), formattedDocument);
+  assert.equal(formatXmlFragment(formattedFragment), formattedFragment);
+});
+
+test("formatXml preserves repeated trailing line endings", () => {
+  assert.equal(formatXml("<root/>\n\n"), "<root/>\n\n");
+});
+
+test("formatXmlFragment preserves mixed content and malformed input", () => {
+  const mixed = 'Hello<break time="500ms"/>world';
+  const malformed = " \n<break><emphasis></break> \n";
+
+  assert.equal(formatXmlFragment(mixed), mixed);
+  assert.equal(formatXmlFragment(` \n${mixed}\n `), mixed);
+  assert.equal(formatXmlFragment(malformed), malformed);
+});