@formulaxjs/editor 0.1.0 → 0.2.0

package/README.md

@@ -1,45 +1,34 @@
 # @formulaxjs/editor
 
-Browser editing foundation for FormulaX.
+Public editor entry and integration helpers for FormulaX.
 
-`@formulaxjs/editor` adapts `@formulaxjs/core` state to the DOM. It provides the interactive editor shell, HTML rendering helpers, modal wiring, and browser-side styles used by richer host integrations.
+`@formulaxjs/editor` provides the public FormulaX editor entry backed by the Kity compatibility runtime, along with shared formula markup helpers and modal wiring used by richer host integrations.
 
 > Status: experimental. Public APIs may change before the first stable release.
 
 ## Install
 
 ```bash
-pnpm add @formulaxjs/editor @formulaxjs/core @formulaxjs/renderer @formulaxjs/kity-runtime
+pnpm add @formulaxjs/editor
 ```
 
 ## Highlights
 
-- `FormulaEditor` for mounting an interactive FormulaX editor into a DOM node
-- `renderInteractiveHtml` for HTML rendering of FormulaX state
-- `mountFormulaXKityEditor` for modal-based Kity editing flows
-- `formulaXModalStyles` and `editorStyles` for default browser styling
+- `FormulaXEditor` as the public runtime-backed editor entry
+- `mountFormulaXEditor` for modal-based Kity editing flows
+- `formulaXModalStyles` for shared modal styling
+- Formula node helpers for host-editor markup integration
 
 ## Example
 
 ```ts
-import { FormulaEditor } from '@formulaxjs/editor';
+import { FormulaXEditor } from '@formulaxjs/editor';
 
-const root = document.getElementById('editor');
-
-if (!root) {
-  throw new Error('Missing #editor');
-}
-
-const editor = new FormulaEditor({
-  root,
-  onChange(state) {
-    console.log(state);
-  },
+new FormulaXEditor({
+  el: '#app',
 });
-
-console.log(editor.getState());
 ```
 
 ## Package role
 
-Use this package for browser-native FormulaX editing. If you are integrating FormulaX into TinyMCE, CKEditor 5, or Tiptap, prefer the dedicated adapter packages instead.
+Use this package as the main application-facing FormulaX editor entry. If you are integrating FormulaX into TinyMCE, CKEditor 5, or Tiptap, prefer the dedicated adapter packages instead.

package/dist/editor-JT5KLVXX.css

@@ -0,0 +1,3 @@
+@import url('./base.css');
+@import url('./ui.css');
+@import url('./scrollbar.css');

package/dist/index.cjs

@@ -23,376 +23,27 @@ __export(index_exports, {
   DEFAULT_FORMULA_ATTRIBUTE: () => DEFAULT_FORMULA_ATTRIBUTE,
   DEFAULT_FORMULA_CLASS: () => DEFAULT_FORMULA_CLASS,
   FORMULA_FLAG_ATTRIBUTE: () => FORMULA_FLAG_ATTRIBUTE,
-  FormulaEditor: () => FormulaEditor,
+  FormulaXEditor: () => import_kity_runtime2.FormulaXEditor,
   createFormulaElement: () => createFormulaElement,
   createFormulaMarkup: () => createFormulaMarkup,
-  editorStyles: () => editorStyles,
+  createKityEditor: () => import_kity_runtime2.createKityEditor,
   ensureFormulaXModalStyles: () => ensureFormulaXModalStyles,
+  ensureKityRuntime: () => import_kity_runtime2.ensureKityRuntime,
   escapeAttribute: () => escapeAttribute,
   escapeHtml: () => escapeHtml,
   findFormulaElement: () => findFormulaElement,
   formulaXModalStyles: () => formulaXModalStyles,
   getFormulaLatexFromElement: () => getFormulaLatexFromElement,
   isFormulaElement: () => isFormulaElement,
-  mountFormulaXKityEditor: () => mountFormulaXKityEditor,
-  renderInteractiveHtml: () => renderInteractiveHtml,
+  mountFormulaXEditor: () => mountFormulaXEditor,
+  mountKityEditor: () => import_kity_runtime2.mountKityEditor,
   replaceFormulaElement: () => replaceFormulaElement,
-  serializeSvgForInsertion: () => serializeSvgForInsertion,
-  t: () => t,
-  translations: () => translations
+  serializeSvgForInsertion: () => serializeSvgForInsertion
 });
 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_core = require("@formulaxjs/core");
 var import_kity_runtime = require("@formulaxjs/kity-runtime");
 
 // src/formula-node.ts
@@ -722,7 +373,7 @@ function ensureFormulaXModalStyles(doc = document) {
   style.textContent = formulaXModalStyles;
   doc.head.appendChild(style);
 }
-function mountFormulaXKityEditor(root, options = {}) {
+function mountFormulaXEditor(root, options = {}) {
   let destroyed = false;
   let latestLatex = options.initialLatex ?? "";
   let handle = null;
@@ -775,11 +426,11 @@ function mountFormulaXKityEditor(root, options = {}) {
       const latex = await getCurrentLatex();
       try {
         return {
-          ...(0, import_core2.createEmptyState)(),
-          doc: (0, import_core2.parseLatex)(latex)
+          ...(0, import_core.createEmptyState)(),
+          doc: (0, import_core.parseLatex)(latex)
         };
       } catch {
-        return (0, import_core2.createEmptyState)();
+        return (0, import_core.createEmptyState)();
       }
     },
     async getRenderHtml() {
@@ -1132,103 +783,28 @@ 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];
-}
+// src/index.ts
+var import_kity_runtime2 = require("@formulaxjs/kity-runtime");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_FORMULA_ATTRIBUTE,
   DEFAULT_FORMULA_CLASS,
   FORMULA_FLAG_ATTRIBUTE,
-  FormulaEditor,
+  FormulaXEditor,
   createFormulaElement,
   createFormulaMarkup,
-  editorStyles,
+  createKityEditor,
   ensureFormulaXModalStyles,
+  ensureKityRuntime,
   escapeAttribute,
   escapeHtml,
   findFormulaElement,
   formulaXModalStyles,
   getFormulaLatexFromElement,
   isFormulaElement,
-  mountFormulaXKityEditor,
-  renderInteractiveHtml,
+  mountFormulaXEditor,
+  mountKityEditor,
   replaceFormulaElement,
-  serializeSvgForInsertion,
-  t,
-  translations
+  serializeSvgForInsertion
 });
 //# sourceMappingURL=index.cjs.map