@formulaxjs/editor 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1234 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_FORMULA_ATTRIBUTE: () => DEFAULT_FORMULA_ATTRIBUTE,
+  DEFAULT_FORMULA_CLASS: () => DEFAULT_FORMULA_CLASS,
+  FORMULA_FLAG_ATTRIBUTE: () => FORMULA_FLAG_ATTRIBUTE,
+  FormulaEditor: () => FormulaEditor,
+  createFormulaElement: () => createFormulaElement,
+  createFormulaMarkup: () => createFormulaMarkup,
+  editorStyles: () => editorStyles,
+  ensureFormulaXModalStyles: () => ensureFormulaXModalStyles,
+  escapeAttribute: () => escapeAttribute,
+  escapeHtml: () => escapeHtml,
+  findFormulaElement: () => findFormulaElement,
+  formulaXModalStyles: () => formulaXModalStyles,
+  getFormulaLatexFromElement: () => getFormulaLatexFromElement,
+  isFormulaElement: () => isFormulaElement,
+  mountFormulaXKityEditor: () => mountFormulaXKityEditor,
+  renderInteractiveHtml: () => renderInteractiveHtml,
+  replaceFormulaElement: () => replaceFormulaElement,
+  serializeSvgForInsertion: () => serializeSvgForInsertion,
+  t: () => t,
+  translations: () => translations
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/dom-renderer.ts
+var joinPath = (path) => path.join(".");
+var renderInteractiveHtml = (doc, activePath) => `
+  <div class="fx-editor-surface" data-role="surface">
+    ${renderChildren(doc.body, [], activePath)}
+  </div>
+`;
+var renderChildren = (nodes, basePath, activePath) => {
+  const html = [];
+  for (let index = 0; index <= nodes.length; index += 1) {
+    const path = joinPath([...basePath, index]);
+    const isActive = path === joinPath(activePath);
+    html.push(
+      `<button class="fx-slot${isActive ? " is-active" : ""}" data-path="${path}" type="button" title="${path}"></button>`
+    );
+    if (index < nodes.length) {
+      html.push(renderNode(nodes[index], [...basePath, index], activePath));
+    }
+  }
+  return html.join("");
+};
+var renderNode = (node, path, activePath) => {
+  const pathValue = joinPath(path);
+  const isActive = (p) => joinPath(p) === joinPath(activePath);
+  switch (node.type) {
+    case "text":
+      return `<span class="fx-node fx-text" data-node-path="${pathValue}">${node.value}</span>`;
+    case "group":
+      return `<span class="fx-node fx-group" data-node-path="${pathValue}">${renderChildren(node.body, [...path, 0], activePath)}</span>`;
+    case "frac":
+      return `<span class="fx-node fx-frac" data-node-path="${pathValue}">
+        <span class="fx-frac-num${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.numerator, [...path, 0], activePath)}</span>
+        <span class="fx-frac-line"></span>
+        <span class="fx-frac-den${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.denominator, [...path, 1], activePath)}</span>
+      </span>`;
+    case "supsub":
+      return `<span class="fx-node fx-supsub" data-node-path="${pathValue}">
+        <span class="fx-supsub-base">${renderChildren(node.base, [...path, 0], activePath)}</span>
+        <span class="fx-supsub-stack">
+          <span class="fx-sup${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.sup ?? [], [...path, 1], activePath)}</span>
+          <span class="fx-sub${isActive([...path, 2]) ? " is-active" : ""}" data-path="${joinPath([...path, 2])}">${renderChildren(node.sub ?? [], [...path, 2], activePath)}</span>
+        </span>
+      </span>`;
+    case "sqrt":
+      return `<span class="fx-node fx-sqrt" data-node-path="${pathValue}">
+        <span class="fx-sqrt-symbol">\u221A</span>
+        <span class="fx-sqrt-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.value, [...path, 0], activePath)}</span>
+      </span>`;
+    case "fenced":
+      return `<span class="fx-node fx-fenced" data-node-path="${pathValue}">
+        <span class="fx-fence">${node.left}</span>
+        <span class="fx-fenced-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.body, [...path, 0], activePath)}</span>
+        <span class="fx-fence">${node.right}</span>
+      </span>`;
+    case "doc":
+      return renderChildren(node.body, [0], activePath);
+  }
+  throw new Error(`Unsupported node type: ${String(node.type)}`);
+};
+
+// src/editor.ts
+var import_core = require("@formulaxjs/core");
+
+// src/styles.ts
+var editorStyles = `
+@keyframes fx-blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+.fx-editor {
+  border: 1px solid #d8d4c7;
+  border-radius: 2px;
+  background: #fffefb;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
+  padding: 24px 28px;
+  font-family: Cambria, 'Times New Roman', serif;
+  font-size: 25px;
+  line-height: 1.7;
+  min-height: 120px;
+  position: relative;
+}
+.fx-editor:focus-within {
+  border-color: #7bbb59;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(123, 187, 89, 0.18);
+}
+.fx-editor-surface {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 3px;
+  cursor: text;
+}
+.fx-node {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 3px;
+  border-radius: 2px;
+  transition: background 0.12s ease;
+}
+.fx-node:hover {
+  background: rgba(122, 186, 89, 0.12);
+}
+.fx-text {
+  color: #2b2925;
+}
+.fx-group {
+  background: rgba(243, 241, 230, 0.82);
+  border: 1px dashed #c8c0a8;
+}
+.fx-frac {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: middle;
+  padding: 0 5px;
+}
+.fx-frac-num, .fx-frac-den {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  min-width: 24px;
+  min-height: 28px;
+  border-radius: 2px;
+  transition: all 0.15s ease;
+}
+.fx-frac-num {
+  border-bottom: 2px solid #2e2c29;
+  padding-bottom: 6px;
+}
+.fx-frac-den {
+  border-top: 2px solid #2e2c29;
+  padding-top: 6px;
+}
+.fx-frac-num:hover, .fx-frac-den:hover {
+  background: rgba(122, 186, 89, 0.1);
+}
+.fx-frac-num.is-active, .fx-frac-den.is-active {
+  background: rgba(122, 186, 89, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
+}
+.fx-supsub {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0;
+}
+.fx-supsub-base {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 2px;
+}
+.fx-supsub-stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 0.65em;
+  margin-left: 2px;
+}
+.fx-sup, .fx-sub {
+  display: flex;
+  align-items: center;
+  min-width: 16px;
+  min-height: 20px;
+  padding: 0 4px;
+  border-radius: 2px;
+  transition: all 0.15s ease;
+}
+.fx-sup {
+  vertical-align: super;
+}
+.fx-sub {
+  vertical-align: sub;
+}
+.fx-sup:hover, .fx-sub:hover {
+  background: rgba(122, 186, 89, 0.1);
+}
+.fx-sup.is-active, .fx-sub.is-active {
+  background: rgba(122, 186, 89, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
+}
+.fx-sqrt {
+  display: inline-flex;
+  align-items: baseline;
+}
+.fx-sqrt-symbol {
+  font-size: 1.1em;
+  color: #2e2c29;
+  margin-right: 2px;
+}
+.fx-sqrt-body {
+  display: inline-flex;
+  align-items: center;
+  border-top: 2px solid #2e2c29;
+  padding: 4px 6px 0;
+  margin-left: 2px;
+}
+.fx-sqrt-body:hover {
+  background: rgba(122, 186, 89, 0.1);
+}
+.fx-sqrt-body.is-active {
+  background: rgba(122, 186, 89, 0.16);
+}
+.fx-fenced {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(243, 241, 230, 0.78);
+  border-radius: 3px;
+  padding: 0 4px;
+}
+.fx-fence {
+  color: #59554d;
+  font-size: 1.2em;
+  padding: 0 2px;
+}
+.fx-fenced-body {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+}
+.fx-fenced-body:hover {
+  background: rgba(122, 186, 89, 0.1);
+  border-radius: 2px;
+}
+.fx-fenced-body.is-active {
+  background: rgba(122, 186, 89, 0.16);
+  border-radius: 2px;
+}
+.fx-slot {
+  width: 3px;
+  height: 1.2em;
+  border: none;
+  background: #53b856;
+  padding: 0;
+  margin: 0 1px;
+  cursor: text;
+  border-radius: 1px;
+  vertical-align: middle;
+}
+.fx-slot.is-active {
+  animation: fx-blink 1s infinite;
+}
+.fx-slot:hover {
+  background: #77c75b;
+}
+`;
+
+// src/editor.ts
+var FormulaEditor = class {
+  state;
+  root;
+  onChange;
+  locale;
+  constructor(options) {
+    this.root = options.root;
+    this.state = options.initialState ?? (0, import_core.createEmptyState)();
+    this.onChange = options.onChange;
+    this.locale = options.locale ?? "en";
+    this.root.classList.add("fx-editor");
+    this.root.tabIndex = 0;
+    this.ensureStyles();
+    this.bindEvents();
+    this.render();
+  }
+  getState() {
+    return structuredClone(this.state);
+  }
+  getLocale() {
+    return this.locale;
+  }
+  setState(state) {
+    this.state = structuredClone(state);
+    this.render();
+  }
+  dispatch(command) {
+    this.state = (0, import_core.applyCommand)(this.state, command);
+    this.render();
+    this.onChange?.(this.getState());
+  }
+  ensureStyles() {
+    if (document.getElementById("fx-editor-styles")) return;
+    const style = document.createElement("style");
+    style.id = "fx-editor-styles";
+    style.textContent = editorStyles;
+    document.head.appendChild(style);
+  }
+  bindEvents() {
+    this.root.addEventListener("click", (event) => {
+      const target = event.target;
+      const pathValue = target.dataset.path;
+      if (pathValue === void 0) return;
+      const path = pathValue === "" ? [] : pathValue.split(".").map(Number);
+      this.moveSelection(path);
+    });
+    this.root.addEventListener("keydown", (event) => {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        this.dispatch((0, import_core.backspace)());
+        return;
+      }
+      if (event.key === "/") {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertFraction)());
+        return;
+      }
+      if (event.key === "^") {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertSuperscript)());
+        return;
+      }
+      if (event.key === "_") {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertSubscript)());
+        return;
+      }
+      if (event.key === "r" && event.ctrlKey) {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertSqrt)());
+        return;
+      }
+      if (event.key === "(") {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertFenced)("(", ")"));
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        this.dispatch((0, import_core.insertText)(event.key));
+      }
+    });
+  }
+  moveSelection(path) {
+    this.state = {
+      ...this.state,
+      selection: {
+        anchor: [...path],
+        focus: [...path]
+      }
+    };
+    this.render();
+    this.onChange?.(this.getState());
+  }
+  render() {
+    this.root.innerHTML = renderInteractiveHtml(this.state.doc, this.state.selection.focus);
+  }
+};
+
+// src/formula-modal.ts
+var import_core2 = require("@formulaxjs/core");
+var import_kity_runtime = require("@formulaxjs/kity-runtime");
+
+// src/formula-node.ts
+var DEFAULT_FORMULA_ATTRIBUTE = "data-formulax-latex";
+var FORMULA_FLAG_ATTRIBUTE = "data-formulax";
+var DEFAULT_FORMULA_CLASS = "formulax-math";
+function escapeAttribute(value) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function createFormulaMarkup(latex, options = {}) {
+  const attributeName = options.attributeName ?? DEFAULT_FORMULA_ATTRIBUTE;
+  const className = options.className ?? DEFAULT_FORMULA_CLASS;
+  const displayClass = options.displayMode ? `${className} ${className}--block` : className;
+  const safeLatex = escapeAttribute(latex);
+  const cursorStyle = options.cursorStyle?.trim() || "pointer";
+  const extraAttributes = {
+    ...options.extraAttributes ?? {},
+    style: mergeInlineStyles(
+      typeof options.extraAttributes?.style === "string" ? options.extraAttributes.style : "",
+      cursorStyle ? `cursor: ${cursorStyle}` : ""
+    )
+  };
+  const serializedAttributes = Object.entries(extraAttributes).filter(([, value]) => value !== null && value !== void 0 && value !== false).map(([key, value]) => value === true ? key : `${key}="${escapeAttribute(String(value))}"`);
+  return [
+    "<span",
+    ` class="${escapeAttribute(displayClass)}"`,
+    ` ${FORMULA_FLAG_ATTRIBUTE}="true"`,
+    ` ${attributeName}="${safeLatex}"`,
+    ` data-latex="${safeLatex}"`,
+    ' contenteditable="false"',
+    ' role="button"',
+    ' tabindex="0"',
+    serializedAttributes.length ? ` ${serializedAttributes.join(" ")}` : "",
+    ">",
+    options.renderHtml ?? `<span class="${escapeAttribute(className)}__render">${escapeHtml(latex || "\\square")}</span>`,
+    "</span>"
+  ].join("");
+}
+function mergeInlineStyles(existingStyle, nextStyle) {
+  const existing = existingStyle.trim().replace(/;+\s*$/, "");
+  const next = nextStyle.trim().replace(/;+\s*$/, "");
+  if (!existing) return next;
+  if (!next) return existing;
+  return `${existing}; ${next}`;
+}
+function createFormulaElement(ownerDocument, latex, options = {}) {
+  const wrapper = ownerDocument.createElement("span");
+  wrapper.innerHTML = createFormulaMarkup(latex, options);
+  return wrapper.firstElementChild;
+}
+function replaceFormulaElement(target, latex, options = {}) {
+  const next = createFormulaElement(target.ownerDocument ?? document, latex, options);
+  if (!next) return null;
+  target.replaceWith(next);
+  return next;
+}
+function getFormulaLatexFromElement(element, attributeName = DEFAULT_FORMULA_ATTRIBUTE) {
+  return element.getAttribute(attributeName) ?? element.getAttribute("data-latex") ?? "";
+}
+function isFormulaElement(node) {
+  if (!node || typeof node !== "object") return false;
+  const element = node;
+  return typeof element.getAttribute === "function" && element.getAttribute(FORMULA_FLAG_ATTRIBUTE) === "true";
+}
+function findFormulaElement(node) {
+  if (!node) return null;
+  const element = node.nodeType === 1 ? node : node.parentElement;
+  return element?.closest?.(`[${FORMULA_FLAG_ATTRIBUTE}="true"]`);
+}
+
+// src/formula-modal.ts
+var EMPTY_FORMULA_PLACEHOLDER = "\\placeholder ";
+var STYLE_ID = "fx-formula-modal-styles";
+var formulaXModalStyles = `
+.fx-formula-modal-open {
+  overflow: hidden;
+}
+
+.fx-formula-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fx-formula-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.48);
+}
+
+.fx-formula-modal {
+  --fx-formula-editor-body-height: 264px;
+  --fx-formula-workspace-height: 168px;
+  position: relative;
+  width: min(860px, calc(100vw - 32px));
+  height: auto;
+  max-height: calc(100vh - 32px);
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.fx-formula-modal__header,
+.fx-formula-modal__footer,
+.fx-formula-modal__title,
+.fx-formula-modal__close,
+.fx-formula-modal__button,
+.fx-formula-editor-loading,
+.fx-formula-editor-error {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.fx-formula-modal__header {
+  min-height: 56px;
+  padding: 0 20px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 3;
+  background: #fff;
+  border-radius: 14px 14px 0 0;
+}
+
+.fx-formula-modal__title {
+  font-size: 16px;
+  font-weight: 650;
+  margin: 0;
+  color: #111827;
+}
+
+.fx-formula-modal__close {
+  border: 0;
+  background: transparent;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.fx-formula-modal__body {
+  flex: 0 0 auto;
+  height: var(--fx-formula-editor-body-height);
+  padding: 0;
+  overflow: visible;
+  min-height: var(--fx-formula-editor-body-height);
+  position: relative;
+  z-index: 2;
+}
+
+.fx-formula-editor-host {
+  width: 100%;
+  height: var(--fx-formula-editor-body-height);
+  min-height: var(--fx-formula-editor-body-height);
+  overflow: visible;
+  position: relative;
+}
+
+.fx-formula-kity-host {
+  width: 100%;
+  height: var(--fx-formula-editor-body-height);
+  min-height: var(--fx-formula-editor-body-height);
+  overflow: visible;
+  position: relative;
+}
+
+.fx-formula-kity-host .kf-editor {
+  height: var(--fx-formula-editor-body-height) !important;
+  overflow: visible !important;
+}
+
+.fx-formula-kity-host .kf-editor-toolbar {
+  overflow: visible;
+  position: relative;
+  z-index: 20;
+}
+
+.fx-formula-kity-host .kf-editor-ui-button-mount-point,
+.fx-formula-kity-host .kf-editor-ui-area-mount,
+.fx-formula-kity-host .kf-editor-ui-box,
+.fx-formula-kity-host .kf-editor-ui-list {
+  z-index: 1000;
+}
+
+.fx-formula-kity-host .kf-editor-edit-area,
+.fx-formula-kity-host .kf-editor-canvas-container {
+  min-height: var(--fx-formula-workspace-height);
+  height: var(--fx-formula-workspace-height);
+}
+
+.fx-formula-kity-host .kf-editor-edit-area {
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.fx-formula-kity-host .kf-editor,
+.fx-formula-kity-host .kf-editor svg text,
+.fx-formula-kity-host .kf-editor-ui-area-item-text,
+.fx-formula-kity-host .kf-editor-ui-box-item-text,
+.fx-formula-kity-host .kf-editor-ui-box-item-val,
+.formulax-math__render {
+  font-family: "KF AMS MAIN", "Cambria Math", "Latin Modern Math", "Times New Roman", serif !important;
+}
+
+.fx-formula-kity-host .kf-editor-ui-box-item-content,
+.fx-formula-kity-host .kf-editor-ui-box-item-val {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.fx-formula-kity-host .kf-editor-ui-box-item-val svg,
+.fx-formula-kity-host .kf-editor-ui-box-item-val img,
+.fx-formula-kity-host .kf-editor-ui-area-item-img,
+.fx-formula-kity-host .kf-editor-ui-area-item-text {
+  display: block;
+}
+
+.fx-formula-editor-loading {
+  height: var(--fx-formula-editor-body-height);
+  padding: 24px;
+  color: #4b5563;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fx-formula-editor-error {
+  padding: 24px;
+  color: #dc2626;
+  font-size: 14px;
+}
+
+.fx-formula-editor-error pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #991b1b;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 8px;
+}
+
+.fx-formula-modal__footer {
+  min-height: 64px;
+  padding: 12px 20px;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  border-radius: 0 0 14px 14px;
+}
+
+.fx-formula-modal__button {
+  appearance: none;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #111827;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.fx-formula-modal__button--primary {
+  border-color: #2563eb;
+  background: #2563eb;
+  color: #fff;
+}
+
+.formulax-math {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  line-height: 1;
+  padding: 0 2px;
+  margin: 0 1px;
+  border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+}
+
+.formulax-math:hover {
+  outline: 1px solid rgba(37, 99, 235, 0.35);
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.formulax-math__svg {
+  display: inline-block;
+  flex: 0 0 auto;
+  max-width: 100%;
+  vertical-align: -0.35em;
+  pointer-events: none;
+}
+
+.formulax-math__image {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  pointer-events: none;
+}
+`;
+function ensureFormulaXModalStyles(doc = document) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = formulaXModalStyles;
+  doc.head.appendChild(style);
+}
+function mountFormulaXKityEditor(root, options = {}) {
+  let destroyed = false;
+  let latestLatex = options.initialLatex ?? "";
+  let handle = null;
+  const initialLatex = latestLatex.trim() ? latestLatex : EMPTY_FORMULA_PLACEHOLDER;
+  root.classList.add("fx-formula-kity-host");
+  root.innerHTML = `
+    <div class="fx-formula-editor-loading" role="status" aria-live="polite">
+      Loading FormulaX editor...
+    </div>
+  `;
+  const readyPromise = (0, import_kity_runtime.mountKityEditor)(root, {
+    initialLatex,
+    height: options.height ?? "100%",
+    autofocus: options.autofocus ?? true,
+    assets: options.assets,
+    render: {
+      fontsize: options.render?.fontsize ?? 40
+    }
+  }).then((nextHandle) => {
+    if (destroyed) {
+      nextHandle.destroy();
+      throw new Error("FormulaX editor mount cancelled");
+    }
+    handle = nextHandle;
+    return nextHandle;
+  }).catch((error) => {
+    console.error("[FormulaX] Failed to load FormulaX editor:", error);
+    if (!destroyed) {
+      root.innerHTML = `
+          <div class="fx-formula-editor-error">
+            Failed to load FormulaX editor.
+            <pre>${escapeHtml(error instanceof Error ? error.message : String(error))}</pre>
+          </div>
+        `;
+    }
+    throw error;
+  });
+  const getCurrentLatex = async () => {
+    const readyHandle = handle ?? await readyPromise;
+    const latex = await tryReadLatexFromKityHandle(readyHandle);
+    if (latex !== null) {
+      latestLatex = latex;
+    }
+    return latestLatex;
+  };
+  return {
+    root,
+    getLatex: getCurrentLatex,
+    async getState() {
+      const latex = await getCurrentLatex();
+      try {
+        return {
+          ...(0, import_core2.createEmptyState)(),
+          doc: (0, import_core2.parseLatex)(latex)
+        };
+      } catch {
+        return (0, import_core2.createEmptyState)();
+      }
+    },
+    async getRenderHtml() {
+      await readyPromise;
+      await waitForFormulaSvgLayout(root);
+      return renderCurrentFormulaAsSvgHtml(root);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      void readyPromise.then((readyHandle) => readyHandle.destroy()).catch(() => void 0);
+      root.innerHTML = "";
+    }
+  };
+}
+async function tryReadLatexFromKityHandle(handle) {
+  try {
+    let isEmpty = false;
+    handle.ready(function ready() {
+      const result = this.execCommand("content.is.empty");
+      isEmpty = result === true;
+    });
+    if (isEmpty) {
+      return "";
+    }
+  } catch {
+  }
+  const candidates = [
+    "get.source",
+    "getSource",
+    "getLatex",
+    "get.latex",
+    "get.content",
+    "getContent"
+  ];
+  for (const command of candidates) {
+    try {
+      let value = null;
+      handle.ready(function ready() {
+        value = this.execCommand(command);
+      });
+      if (typeof value === "string" && value.trim()) {
+        return value;
+      }
+      if (value && typeof value === "object" && "latex" in value) {
+        const latex = value.latex;
+        if (typeof latex === "string" && latex.trim()) {
+          return latex;
+        }
+      }
+    } catch {
+    }
+  }
+  return null;
+}
+function renderCurrentFormulaAsSvgHtml(root) {
+  const svg = findFormulaSvg(root);
+  if (!svg) {
+    return "";
+  }
+  return serializeSvgForInsertion(svg);
+}
+async function waitForFormulaSvgLayout(root) {
+  const doc = root.ownerDocument ?? document;
+  const view = doc.defaultView ?? window;
+  await waitForDocumentFonts(doc);
+  let previous = readRenderedFormulaBox(root);
+  for (let attempt = 0; attempt < 4; attempt += 1) {
+    await waitForAnimationFrame(view);
+    const current = readRenderedFormulaBox(root);
+    if (previous && current && areSvgBoxesClose(previous, current)) {
+      return;
+    }
+    previous = current;
+  }
+}
+function findFormulaSvg(root) {
+  return root.querySelector(
+    ".kf-editor-edit-area svg, .kf-editor-canvas-container svg, svg"
+  );
+}
+function readRenderedFormulaBox(root) {
+  const svg = findFormulaSvg(root);
+  if (!svg) {
+    return null;
+  }
+  return getInlineSvgContent(svg)?.box ?? readSvgBox(svg);
+}
+function areSvgBoxesClose(left, right) {
+  return Math.abs(left.x - right.x) < 0.01 && Math.abs(left.y - right.y) < 0.01 && Math.abs(left.width - right.width) < 0.01 && Math.abs(left.height - right.height) < 0.01;
+}
+async function waitForDocumentFonts(doc) {
+  if (!doc.fonts?.ready) {
+    return;
+  }
+  try {
+    await doc.fonts.ready;
+  } catch {
+  }
+}
+function waitForAnimationFrame(view) {
+  return new Promise((resolve) => {
+    view.requestAnimationFrame(() => resolve());
+  });
+}
+function serializeSvgForInsertion(svg) {
+  const content = getInlineSvgContent(svg);
+  const inlineViewport = content ? createInlineSvgViewport(content.box) : null;
+  const clone = content && inlineViewport ? createInlineSvgClone(svg, content, inlineViewport) : svg.cloneNode(true);
+  uniquifySvgIds(clone);
+  sizeSvgForInlineDisplay(clone, svg, inlineViewport);
+  clone.removeAttribute("id");
+  clone.removeAttribute("xmlns");
+  clone.removeAttribute("xmlns:xlink");
+  clone.setAttribute("class", mergeClassNames(clone.getAttribute("class"), "formulax-math__svg"));
+  clone.setAttribute("focusable", "false");
+  clone.setAttribute("aria-hidden", "true");
+  clone.setAttribute("preserveAspectRatio", clone.getAttribute("preserveAspectRatio") || "xMinYMin meet");
+  return new XMLSerializer().serializeToString(clone);
+}
+function getInlineSvgContent(svg) {
+  const candidates = [
+    '[data-root="true"] > g[data-type="kf-editor-exp-content-box"]',
+    'g[data-type="kf-editor-exp-content-box"]',
+    'g[data-type="kf-container"]',
+    "svg > g, g"
+  ];
+  for (const selector of candidates) {
+    const content = svg.querySelector(selector);
+    const rootSpace = content ? readSvgBoxInRootSpace(content) : null;
+    if (content && rootSpace) {
+      return {
+        root: content,
+        box: rootSpace.box,
+        matrix: rootSpace.matrix
+      };
+    }
+  }
+  return null;
+}
+function readSvgBoxInRootSpace(element) {
+  const box = readSvgBox(element);
+  const matrix = getSvgRootSpaceMatrix(element);
+  if (!box || !matrix) {
+    return null;
+  }
+  const points = [
+    { x: box.x, y: box.y },
+    { x: box.x + box.width, y: box.y },
+    { x: box.x, y: box.y + box.height },
+    { x: box.x + box.width, y: box.y + box.height }
+  ].map((point) => ({
+    x: matrix.a * point.x + matrix.c * point.y + matrix.e,
+    y: matrix.b * point.x + matrix.d * point.y + matrix.f
+  }));
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  const width = Math.max(...xs) - x;
+  const height = Math.max(...ys) - y;
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return null;
+  }
+  return {
+    box: { x, y, width, height },
+    matrix
+  };
+}
+function getSvgRootSpaceMatrix(element) {
+  const elementMatrix = typeof element.getCTM === "function" ? element.getCTM() : null;
+  const rootMatrix = typeof element.ownerSVGElement?.getCTM === "function" ? element.ownerSVGElement.getCTM() : null;
+  if (!elementMatrix) {
+    return null;
+  }
+  return rootMatrix ? multiplySvgMatrices(invertSvgMatrix(rootMatrix), elementMatrix) : toSvgMatrixLike(elementMatrix);
+}
+function invertSvgMatrix(matrix) {
+  const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+  if (!Number.isFinite(determinant) || determinant === 0) {
+    return {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1,
+      e: 0,
+      f: 0
+    };
+  }
+  return {
+    a: matrix.d / determinant,
+    b: -matrix.b / determinant,
+    c: -matrix.c / determinant,
+    d: matrix.a / determinant,
+    e: (matrix.c * matrix.f - matrix.d * matrix.e) / determinant,
+    f: (matrix.b * matrix.e - matrix.a * matrix.f) / determinant
+  };
+}
+function multiplySvgMatrices(left, right) {
+  return {
+    a: left.a * right.a + left.c * right.b,
+    b: left.b * right.a + left.d * right.b,
+    c: left.a * right.c + left.c * right.d,
+    d: left.b * right.c + left.d * right.d,
+    e: left.a * right.e + left.c * right.f + left.e,
+    f: left.b * right.e + left.d * right.f + left.f
+  };
+}
+function toSvgMatrixLike(matrix) {
+  return {
+    a: matrix.a,
+    b: matrix.b,
+    c: matrix.c,
+    d: matrix.d,
+    e: matrix.e,
+    f: matrix.f
+  };
+}
+function readSvgBox(element) {
+  if (typeof element.getBBox !== "function") {
+    return null;
+  }
+  try {
+    const box = element.getBBox();
+    if (!Number.isFinite(box.width) || !Number.isFinite(box.height) || box.width <= 0 || box.height <= 0) {
+      return null;
+    }
+    return {
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height
+    };
+  } catch {
+    return null;
+  }
+}
+function createInlineSvgViewport(contentBox) {
+  const edgePadding = Math.max(0.5, Math.min(contentBox.width, contentBox.height) * 6e-3);
+  const inset = edgePadding / 2;
+  return {
+    x: contentBox.x - inset,
+    y: contentBox.y - inset,
+    width: contentBox.width + edgePadding,
+    height: contentBox.height + edgePadding
+  };
+}
+function createInlineSvgClone(source, content, viewport) {
+  const clone = source.cloneNode(false);
+  const ownerDocument = source.ownerDocument;
+  copySvgRootAttributes(source, clone);
+  clone.setAttribute(
+    "viewBox",
+    `0 0 ${roundLength(viewport.width)} ${roundLength(viewport.height)}`
+  );
+  Array.from(source.children).forEach((child) => {
+    if (child.tagName.toLowerCase() === "defs") {
+      clone.appendChild(child.cloneNode(true));
+    }
+  });
+  const wrapper = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "g");
+  wrapper.setAttribute(
+    "transform",
+    `translate(${roundLength(-viewport.x)} ${roundLength(-viewport.y)})`
+  );
+  const flattened = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "g");
+  flattened.setAttribute(
+    "transform",
+    `matrix(${roundLength(content.matrix.a)} ${roundLength(content.matrix.b)} ${roundLength(content.matrix.c)} ${roundLength(content.matrix.d)} ${roundLength(content.matrix.e)} ${roundLength(content.matrix.f)})`
+  );
+  flattened.appendChild(content.root.cloneNode(true));
+  wrapper.appendChild(flattened);
+  clone.appendChild(wrapper);
+  return clone;
+}
+function copySvgRootAttributes(source, target) {
+  const excluded = /* @__PURE__ */ new Set([
+    "id",
+    "width",
+    "height",
+    "viewBox",
+    "class",
+    "focusable",
+    "aria-hidden",
+    "xmlns",
+    "xmlns:xlink"
+  ]);
+  Array.from(source.attributes).forEach((attribute) => {
+    if (excluded.has(attribute.name)) return;
+    target.setAttribute(attribute.name, attribute.value);
+  });
+}
+function sizeSvgForInlineDisplay(clone, source, viewport) {
+  const viewBox = clone.viewBox?.baseVal;
+  const rect = source.getBoundingClientRect();
+  const width = viewport?.width || viewBox?.width || rect.width || Number(clone.getAttribute("width")) || 1;
+  const height = viewport?.height || viewBox?.height || rect.height || Number(clone.getAttribute("height")) || 1;
+  const ratio = Math.max(0.1, width / Math.max(1, height));
+  const inlineHeightEm = 0.875;
+  const inlineWidthEm = Math.min(40, Math.max(0.75, ratio * inlineHeightEm));
+  clone.setAttribute("width", roundLength(width));
+  clone.setAttribute("height", roundLength(height));
+  clone.setAttribute(
+    "style",
+    mergeInlineStyles2(
+      clone.getAttribute("style"),
+      `width:${roundLength(inlineWidthEm)}em`,
+      `height:${inlineHeightEm}em`
+    )
+  );
+}
+function roundLength(value) {
+  return String(Math.round(value * 1e3) / 1e3);
+}
+function uniquifySvgIds(svg) {
+  const idMap = /* @__PURE__ */ new Map();
+  const prefix = `fx-${randomIdPrefix()}-`;
+  const elementsWithId = svg.querySelectorAll("[id]");
+  elementsWithId.forEach((element) => {
+    const id = element.getAttribute("id");
+    if (!id) return;
+    const nextId = `${prefix}${id}`;
+    idMap.set(id, nextId);
+    element.setAttribute("id", nextId);
+  });
+  if (!idMap.size) return;
+  svg.querySelectorAll("*").forEach((element) => {
+    Array.from(element.attributes).forEach((attribute) => {
+      const nextValue = rewriteSvgReferences(attribute.value, idMap);
+      if (nextValue !== attribute.value) {
+        element.setAttribute(attribute.name, nextValue);
+      }
+    });
+  });
+}
+function randomIdPrefix() {
+  return Math.random().toString(36).slice(2, 5).padEnd(3, "0");
+}
+function rewriteSvgReferences(value, idMap) {
+  let nextValue = value;
+  idMap.forEach((nextId, id) => {
+    nextValue = nextValue.replaceAll(`#${id}`, `#${nextId}`).replaceAll(`url(${id})`, `url(${nextId})`).replaceAll(`url(#${id})`, `url(#${nextId})`);
+  });
+  return nextValue;
+}
+function mergeClassNames(...values) {
+  return values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean).filter((value, index, list) => list.indexOf(value) === index).join(" ");
+}
+function mergeInlineStyles2(...values) {
+  return values.flatMap((value) => value?.split(";") ?? []).map((value) => value.trim()).filter(Boolean).join("; ");
+}
+
+// src/i18n.ts
+var translations = {
+  en: {
+    equation: "Equation",
+    structures: "Structures",
+    symbols: "Symbols",
+    matrices: "Matrices",
+    templates: "Templates",
+    insert: "Insert",
+    greek: "Greek",
+    operators: "Operators",
+    relations: "Relations",
+    fraction: "Fraction",
+    superscript: "Superscript",
+    subscript: "Subscript",
+    squareRoot: "Square Root",
+    parentheses: "Parentheses",
+    plusMinus: "Plus Minus",
+    multiply: "Multiply",
+    divide: "Divide",
+    dot: "Dot",
+    union: "Union",
+    intersect: "Intersection",
+    lessOrEqual: "Less or Equal",
+    greaterOrEqual: "Greater or Equal",
+    notEqual: "Not Equal",
+    approximate: "Approximate",
+    infinity: "Infinity",
+    arrow: "Arrow",
+    limit: "Limit",
+    sine: "Sine",
+    logarithm: "Logarithm",
+    matrix: "Matrix",
+    summation: "Summation",
+    integral: "Integral",
+    placeholder: "WPS-inspired ribbon layout. Some tiles are placeholders for future SDK features."
+  },
+  zh: {
+    equation: "\u516C\u5F0F",
+    structures: "\u7ED3\u6784",
+    symbols: "\u7B26\u53F7",
+    matrices: "\u77E9\u9635",
+    templates: "\u6A21\u677F",
+    insert: "\u63D2\u5165",
+    greek: "\u5E0C\u814A\u5B57\u6BCD",
+    operators: "\u8FD0\u7B97\u7B26",
+    relations: "\u5173\u7CFB",
+    fraction: "\u5206\u6570",
+    superscript: "\u4E0A\u6807",
+    subscript: "\u4E0B\u6807",
+    squareRoot: "\u5E73\u65B9\u6839",
+    parentheses: "\u62EC\u53F7",
+    plusMinus: "\u52A0\u51CF",
+    multiply: "\u4E58",
+    divide: "\u9664",
+    dot: "\u70B9\u4E58",
+    union: "\u5E76\u96C6",
+    intersect: "\u4EA4\u96C6",
+    lessOrEqual: "\u5C0F\u4E8E\u7B49\u4E8E",
+    greaterOrEqual: "\u5927\u4E8E\u7B49\u4E8E",
+    notEqual: "\u4E0D\u7B49\u4E8E",
+    approximate: "\u7EA6\u7B49\u4E8E",
+    infinity: "\u65E0\u7A77",
+    arrow: "\u7BAD\u5934",
+    limit: "\u6781\u9650",
+    sine: "\u6B63\u5F26",
+    logarithm: "\u5BF9\u6570",
+    matrix: "\u77E9\u9635",
+    summation: "\u6C42\u548C",
+    integral: "\u79EF\u5206",
+    placeholder: "WPS \u98CE\u683C\u7684\u5DE5\u5177\u680F\u5E03\u5C40\u3002\u90E8\u5206\u6309\u94AE\u4ECD\u662F\u672A\u6765 SDK \u529F\u80FD\u7684\u5360\u4F4D\u9879\u3002"
+  }
+};
+function t(locale, key) {
+  return translations[locale][key] ?? translations.en[key];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_FORMULA_ATTRIBUTE,
+  DEFAULT_FORMULA_CLASS,
+  FORMULA_FLAG_ATTRIBUTE,
+  FormulaEditor,
+  createFormulaElement,
+  createFormulaMarkup,
+  editorStyles,
+  ensureFormulaXModalStyles,
+  escapeAttribute,
+  escapeHtml,
+  findFormulaElement,
+  formulaXModalStyles,
+  getFormulaLatexFromElement,
+  isFormulaElement,
+  mountFormulaXKityEditor,
+  renderInteractiveHtml,
+  replaceFormulaElement,
+  serializeSvgForInsertion,
+  t,
+  translations
+});
+//# sourceMappingURL=index.cjs.map