@formulaxjs/tinymce 0.1.2 → 0.2.0

package/README.md

@@ -4,7 +4,7 @@ English | [简体中文](./README.zh-CN.md)
 
 TinyMCE integration adapter for FormulaX.
 
-`@formulaxjs/tinymce` registers FormulaX as a TinyMCE plugin and provides a modal-based formula editing experience for inserting and updating formulas inside TinyMCE content.
+`@formulaxjs/tinymce` registers FormulaX as a TinyMCE plugin and provides a modal-based formula editing experience for inserting and updating formulas inside TinyMCE content.
 
 > Status: experimental. Public APIs may change before the first stable release.
 
@@ -14,12 +14,14 @@ TinyMCE integration adapter for FormulaX.
 - FormulaX toolbar button and menu item support
 - `FormulaXOpen` TinyMCE command for programmatic opening
 - Insert and update formulas as non-editable inline nodes
-- Double-click, Enter, and Space editing interactions for existing formulas
-- TinyMCE compatibility layer for versions `>=5 <9`
-- LaTeX persistence through `data-formulax-latex`
-- Markup helpers for creating, parsing, serializing, finding, and replacing formula elements
-
-## Compatibility
+- Double-click, Enter, and Space editing interactions for existing formulas
+- TinyMCE compatibility layer for versions `>=5 <9`
+- LaTeX persistence through `data-formulax-latex`
+- Markup helpers for creating, parsing, serializing, finding, and replacing formula elements
+- Default read-only rendering through `@formulaxjs/renderer-kity`
+- Optional runtime preload before the first modal open
+
+## Compatibility
 
 The package declares TinyMCE as an optional peer dependency:
 
@@ -60,15 +62,14 @@ import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
 registerFormulaXTinyMcePlugin(tinymce, {
   toolbarText: 'FormulaX',
   tooltip: 'Insert or edit formula',
-  modal: {
-    title: 'FormulaX Editor',
-  },
-  editor: {
-    mode: 'kity',
-    height: '100%',
-    autofocus: true,
-    render: { fontsize: 40 },
-  },
+  modal: {
+    title: 'FormulaX Editor',
+  },
+  editor: {
+    height: '100%',
+    autofocus: true,
+    render: { fontsize: 40 },
+  },
 });
 
 await tinymce.init({
@@ -146,7 +147,23 @@ A generated formula node stores the source LaTeX in `data-formulax-latex` and is
 ></span>
 ```
 
-The exact generated markup is internal and may evolve. Consumers should rely on the exported helper functions where possible.
+The exact generated markup is internal and may evolve. Consumers should rely on the exported helper functions where possible.
+
+## Custom renderer
+
+The adapter accepts a `renderer` option. By default it uses `createKityFormulaRenderer()` from `@formulaxjs/renderer-kity`.
+
+```ts
+import tinymce from 'tinymce';
+import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
+import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
+
+registerFormulaXTinyMcePlugin(tinymce, {
+  renderer: createKityFormulaRenderer({
+    fontSize: 44,
+  }),
+});
+```
 
 ## Options
 
@@ -160,11 +177,12 @@ interface FormulaXTinyMceOptions {
   cursorStyle?: string;
   formulaClassName?: string;
   formulaAttributeName?: string;
-  renderMode?: 'text' | 'html';
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: FormulaXEditorOptions;
+}
 ```
 
 | Option | Default | Description |
@@ -176,11 +194,12 @@ interface FormulaXTinyMceOptions {
 | `tooltip` | `Insert formula` | Toolbar button tooltip. |
 | `cursorStyle` | `pointer` | Cursor style applied to generated formula nodes. |
 | `formulaClassName` | `formulax-math` | CSS class used by generated formula nodes. |
-| `formulaAttributeName` | `data-formulax-latex` | Attribute used to persist source LaTeX. |
-| `renderMode` | `text` | Experimental render mode option. |
-| `initialLatex` | empty string | Initial LaTeX when inserting a new formula. |
-| `modal` | see below | Modal labels, dimensions, and closing behavior. |
-| `editor` | see below | Embedded FormulaX editor options. |
+| `formulaAttributeName` | `data-formulax-latex` | Attribute used to persist source LaTeX. |
+| `renderer` | `createKityFormulaRenderer()` | Renderer used when the plugin needs runtime formula HTML. |
+| `preload` | `idle` | Preloads the FormulaX runtime on browser idle, on host hover/focus, or never. |
+| `initialLatex` | empty string | Initial LaTeX when inserting a new formula. |
+| `modal` | see below | Modal labels, dimensions, and closing behavior. |
+| `editor` | see below | Embedded FormulaX editor options. |
 
 ### Modal options
 
@@ -198,11 +217,10 @@ interface FormulaXTinyMceOptions {
 
 | Option | Default | Description |
 | --- | --- | --- |
-| `mode` | `kity` | Formula editor runtime mode. |
-| `height` | `100%` | Embedded editor height. |
-| `autofocus` | `true` | Whether the embedded editor should autofocus. |
-| `assets` | `{}` | Optional Kity runtime asset overrides. |
-| `render.fontsize` | `40` | Formula render font size. |
+| `height` | `100%` | Embedded editor height. |
+| `autofocus` | `true` | Whether the embedded editor should autofocus. |
+| `assets` | `{}` | Optional Kity runtime asset overrides. |
+| `render.fontsize` | `40` | Formula render font size. |
 
 ## Exported API
 

package/README.zh-CN.md

@@ -4,7 +4,7 @@
 
 FormulaX 的 TinyMCE 集成适配器。
 
-`@formulaxjs/tinymce` 会将 FormulaX 注册为 TinyMCE 插件，并提供基于弹窗的公式编辑体验，用于在 TinyMCE 内容中插入和更新公式。
+`@formulaxjs/tinymce` 会将 FormulaX 注册为 TinyMCE 插件，并提供基于弹窗的公式编辑体验，用于在 TinyMCE 内容中插入和更新公式。
 
 > 状态：实验阶段。在首个稳定版本发布前，公共 API 仍可能调整。
 
@@ -14,10 +14,12 @@ FormulaX 的 TinyMCE 集成适配器。
 - 支持 FormulaX 工具栏按钮和菜单项
 - 提供 `FormulaXOpen` TinyMCE 命令，便于代码中主动打开公式编辑器
 - 将公式作为不可直接编辑的 inline 节点插入和更新
-- 支持双击、Enter、Space 编辑已有公式
-- 面向 TinyMCE `>=5 <9` 的兼容层
-- 通过 `data-formulax-latex` 持久化 LaTeX 源内容
-- 提供创建、解析、序列化、查找和替换公式元素的 markup 工具函数
+- 支持双击、Enter、Space 编辑已有公式
+- 面向 TinyMCE `>=5 <9` 的兼容层
+- 通过 `data-formulax-latex` 持久化 LaTeX 源内容
+- 提供创建、解析、序列化、查找和替换公式元素的 markup 工具函数
+- 默认通过 `@formulaxjs/renderer-kity` 完成只读渲染
+- 支持在首次打开弹窗前预加载 runtime
 
 ## 兼容性
 
@@ -60,15 +62,14 @@ import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
 registerFormulaXTinyMcePlugin(tinymce, {
   toolbarText: 'FormulaX',
   tooltip: '插入或编辑公式',
-  modal: {
-    title: 'FormulaX 公式编辑器',
-  },
-  editor: {
-    mode: 'kity',
-    height: '100%',
-    autofocus: true,
-    render: { fontsize: 40 },
-  },
+  modal: {
+    title: 'FormulaX 公式编辑器',
+  },
+  editor: {
+    height: '100%',
+    autofocus: true,
+    render: { fontsize: 40 },
+  },
 });
 
 await tinymce.init({
@@ -134,19 +135,35 @@ if (isFormulaElement(element)) {
 
 生成的公式节点会将 LaTeX 源内容保存在 `data-formulax-latex` 中，并通过 `data-formulax="true"` 标记：
 
-```html
-<span
-  class="formulax-math"
-  data-formulax="true"
-  data-formulax-latex="\\sqrt{x}"
-  data-latex="\\sqrt{x}"
-  contenteditable="false"
-  data-mce-contenteditable="false"
-  style="cursor: pointer"
-></span>
-```
+```html
+<span
+  class="formulax-math"
+  data-formulax="true"
+  data-formulax-latex="\\sqrt{x}"
+  data-latex="\\sqrt{x}"
+  contenteditable="false"
+  data-mce-contenteditable="false"
+  style="cursor: pointer"
+></span>
+```
 
-具体生成的 HTML 结构属于内部实现，后续可能演进。业务侧应优先依赖导出的工具函数。
+具体生成的 HTML 结构属于内部实现，后续可能演进。业务侧应优先依赖导出的工具函数。
+
+## 自定义 renderer
+
+该适配器支持 `renderer` 配置项。默认值是来自 `@formulaxjs/renderer-kity` 的 `createKityFormulaRenderer()`。
+
+```ts
+import tinymce from 'tinymce';
+import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
+import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
+
+registerFormulaXTinyMcePlugin(tinymce, {
+  renderer: createKityFormulaRenderer({
+    fontSize: 44,
+  }),
+});
+```
 
 ## 配置项
 
@@ -160,27 +177,29 @@ interface FormulaXTinyMceOptions {
   cursorStyle?: string;
   formulaClassName?: string;
   formulaAttributeName?: string;
-  renderMode?: 'text' | 'html';
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: FormulaXEditorOptions;
+}
 ```
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
 | `pluginName` | `formulax` | 通过 `tinymce.PluginManager.add` 注册的 TinyMCE 插件名。 |
 | `buttonName` | `formulax` | 工具栏按钮名。 |
-| `menuItemName` | `formulax` | 菜单项名。 |
-| `toolbarText` | `FormulaX` | 工具栏按钮和菜单项显示文本。 |
-| `tooltip` | `Insert formula` | 工具栏按钮 tooltip。 |
+| `menuItemName` | `formulax` | 菜单项名。 |
+| `toolbarText` | `FormulaX` | 工具栏按钮和菜单项显示文本。 |
+| `tooltip` | `Insert formula` | 工具栏按钮 tooltip。 |
 | `cursorStyle` | `pointer` | 应用于生成公式节点的鼠标光标样式。 |
 | `formulaClassName` | `formulax-math` | 生成的公式节点 CSS class。 |
-| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
-| `renderMode` | `text` | 实验性的渲染模式配置。 |
-| `initialLatex` | 空字符串 | 插入新公式时的初始 LaTeX。 |
-| `modal` | 见下方 | 弹窗标题、按钮文本、尺寸和关闭行为。 |
-| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
+| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
+| `renderer` | `createKityFormulaRenderer()` | 插件在需要运行时公式 HTML 时使用的 renderer。 |
+| `preload` | `idle` | 控制在浏览器空闲时、宿主 hover/focus 时，或完全不预加载 FormulaX runtime。 |
+| `initialLatex` | 空字符串 | 插入新公式时的初始 LaTeX。 |
+| `modal` | 见下方 | 弹窗标题、按钮文本、尺寸和关闭行为。 |
+| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
 
 ### Modal 配置
 
@@ -198,11 +217,10 @@ interface FormulaXTinyMceOptions {
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `mode` | `kity` | 公式编辑器运行时模式。 |
-| `height` | `100%` | 内嵌编辑器高度。 |
-| `autofocus` | `true` | 内嵌编辑器是否自动聚焦。 |
-| `assets` | `{}` | 可选的 Kity runtime 资源覆盖配置。 |
-| `render.fontsize` | `40` | 公式渲染字号。 |
+| `height` | `100%` | 内嵌编辑器高度。 |
+| `autofocus` | `true` | 内嵌编辑器是否自动聚焦。 |
+| `assets` | `{}` | 可选的 Kity runtime 资源覆盖配置。 |
+| `render.fontsize` | `40` | 公式渲染字号。 |
 
 ## 导出 API
 

package/dist/index.cjs

@@ -20,19 +20,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DEFAULT_FORMULA_ATTRIBUTE: () => import_editor.DEFAULT_FORMULA_ATTRIBUTE,
-  DEFAULT_FORMULA_CLASS: () => import_editor.DEFAULT_FORMULA_CLASS,
-  FORMULA_FLAG_ATTRIBUTE: () => import_editor.FORMULA_FLAG_ATTRIBUTE,
+  DEFAULT_FORMULA_ATTRIBUTE: () => import_renderer.DEFAULT_FORMULA_ATTRIBUTE,
+  DEFAULT_FORMULA_CLASS: () => import_renderer.DEFAULT_FORMULA_CLASS,
+  FORMULA_FLAG_ATTRIBUTE: () => import_renderer.FORMULA_FLAG_ATTRIBUTE,
   createTinyMceCompat: () => createTinyMceCompat,
   createTinyMceFormulaMarkup: () => createTinyMceFormulaMarkup,
-  findFormulaElement: () => import_editor.findFormulaElement,
-  getFormulaLatexFromElement: () => import_editor.getFormulaLatexFromElement,
+  findFormulaElement: () => import_renderer.findFormulaElement,
+  getFormulaLatexFromElement: () => import_renderer.getFormulaLatexFromElement,
   getTinyMceMajorVersion: () => getTinyMceMajorVersion,
-  isFormulaElement: () => import_editor.isFormulaElement,
+  isFormulaElement: () => import_renderer.isFormulaElement,
   openFormulaXOverlayModal: () => openFormulaXOverlayModal,
   parseTinyMceFormulaMarkup: () => parseTinyMceFormulaMarkup,
   registerFormulaXTinyMcePlugin: () => registerFormulaXTinyMcePlugin,
-  replaceFormulaElement: () => import_editor.replaceFormulaElement,
+  replaceFormulaElement: () => import_renderer.replaceFormulaElement,
   resolveOptions: () => resolveOptions,
   serializeTinyMceFormulaMarkup: () => serializeTinyMceFormulaMarkup,
   warnUnsupportedTinyMceVersion: () => warnUnsupportedTinyMceVersion
@@ -41,9 +41,9 @@ module.exports = __toCommonJS(index_exports);
 
 // src/markup.ts
 var import_core = require("@formulaxjs/core");
-var import_editor = require("@formulaxjs/editor");
+var import_renderer = require("@formulaxjs/renderer");
 function createTinyMceFormulaMarkup(latex, options = {}) {
-  return (0, import_editor.createFormulaMarkup)(latex, {
+  return (0, import_renderer.createFormulaMarkup)(latex, {
     ...options,
     extraAttributes: {
       ...options.extraAttributes,
@@ -58,7 +58,7 @@ function serializeTinyMceFormulaMarkup(doc, options = {}) {
   return createTinyMceFormulaMarkup((0, import_core.serializeLatex)(doc), options);
 }
 function createTinyMceFormulaElement(ownerDocument, latex, options = {}) {
-  return (0, import_editor.createFormulaElement)(ownerDocument, latex, {
+  return (0, import_renderer.createFormulaElement)(ownerDocument, latex, {
     ...options,
     extraAttributes: {
       ...options.extraAttributes,
@@ -91,7 +91,7 @@ function createTinyMceCompat(editor, tinymce) {
     },
     getSelectedFormulaElement() {
       const node = editor.selection?.getNode?.();
-      return (0, import_editor.findFormulaElement)(node ?? null);
+      return (0, import_renderer.findFormulaElement)(node ?? null);
     },
     getEditorDocument() {
       return editor.getDoc?.() ?? document;
@@ -114,15 +114,23 @@ function warnUnsupportedTinyMceVersion(tinymce) {
   }
 }
 
+// src/plugin.ts
+var import_editor4 = require("@formulaxjs/editor");
+var import_renderer_kity = require("@formulaxjs/renderer-kity");
+
+// src/modal.ts
+var import_editor3 = require("@formulaxjs/editor");
+
 // src/styles.ts
-var import_editor2 = require("@formulaxjs/editor");
+var import_renderer2 = require("@formulaxjs/renderer");
+var import_editor = require("@formulaxjs/editor");
 function ensureTinyMceStyles(doc = document) {
-  (0, import_editor2.ensureFormulaXModalStyles)(doc);
+  (0, import_renderer2.ensureFormulaXBaseStyles)(doc);
+  (0, import_editor.ensureFormulaXModalStyles)(doc);
 }
 
 // src/editor-host.ts
-var import_editor3 = require("@formulaxjs/editor");
-var import_renderer = require("@formulaxjs/renderer");
+var import_editor2 = require("@formulaxjs/editor");
 function mountFormulaXEditorInModal(root, input) {
   const options = {
     initialLatex: input.initialLatex,
@@ -133,14 +141,16 @@ function mountFormulaXEditorInModal(root, input) {
       fontsize: input.options.editor.render?.fontsize ?? 40
     }
   };
-  return (0, import_editor3.mountFormulaXEditor)(root, options);
+  return (0, import_editor2.mountFormulaXEditor)(root, options);
 }
 
 // src/modal.ts
 function openFormulaXOverlayModal(input) {
+  (0, import_editor3.recordFormulaXPerfPoint)("fx:modal:open:start");
+  const modalOpenStart = (0, import_editor3.markFormulaXPerf)("fx:modal:open:start:scope");
   ensureTinyMceStyles(document);
   const { editor, target, options } = input;
-  const initialLatex = target ? (0, import_editor.getFormulaLatexFromElement)(target, options.formulaAttributeName) : input.initialLatex ?? options.initialLatex ?? "";
+  const initialLatex = target ? (0, import_renderer.getFormulaLatexFromElement)(target, options.formulaAttributeName) : input.initialLatex ?? options.initialLatex ?? "";
   const root = document.createElement("div");
   root.className = "fx-formula-modal-root";
   root.setAttribute("data-formulax-modal", "true");
@@ -149,33 +159,61 @@ function openFormulaXOverlayModal(input) {
   const title = options.modal.title || (isUpdate ? "Edit Formula" : "Insert Formula");
   root.innerHTML = `
     <div class="fx-formula-modal-backdrop" data-action="backdrop"></div>
-    <div class="fx-formula-modal" role="dialog" aria-modal="true" aria-label="${(0, import_editor.escapeAttribute)(title)}">
+    <div class="fx-formula-modal" role="dialog" aria-modal="true" aria-label="${(0, import_renderer.escapeAttribute)(title)}">
       <header class="fx-formula-modal__header">
-        <h2 class="fx-formula-modal__title">${(0, import_editor.escapeHtml)(title)}</h2>
+        <h2 class="fx-formula-modal__title">${(0, import_renderer.escapeHtml)(title)}</h2>
         <button class="fx-formula-modal__close" type="button" data-action="close" aria-label="Close">\xD7</button>
       </header>
       <section class="fx-formula-modal__body">
         <div class="fx-formula-editor-host"></div>
       </section>
       <footer class="fx-formula-modal__footer">
-        <button class="fx-formula-modal__button" type="button" data-action="cancel">${(0, import_editor.escapeHtml)(options.modal.cancelText)}</button>
-        <button class="fx-formula-modal__button fx-formula-modal__button--primary" type="button" data-action="submit">${(0, import_editor.escapeHtml)(submitText)}</button>
+        <button class="fx-formula-modal__button" type="button" data-action="cancel">${(0, import_renderer.escapeHtml)(options.modal.cancelText)}</button>
+        <button class="fx-formula-modal__button fx-formula-modal__button--primary" type="button" data-action="submit">${(0, import_renderer.escapeHtml)(submitText)}</button>
       </footer>
     </div>
   `;
   document.body.appendChild(root);
   document.body.classList.add("fx-formula-modal-open");
+  const modalDomReadyMark = (0, import_editor3.markFormulaXPerf)("fx:modal:dom-ready");
+  (0, import_editor3.measureFormulaXPerf)("fx:modal:dom-ready", modalOpenStart, modalDomReadyMark);
+  (0, import_editor3.clearFormulaXPerfMarks)(modalDomReadyMark);
   const host = root.querySelector(".fx-formula-editor-host");
   if (!host) {
     root.remove();
+    (0, import_editor3.clearFormulaXPerfMarks)(modalOpenStart);
     throw new Error("[FormulaX] Modal editor host not found.");
   }
-  const mounted = mountFormulaXEditorInModal(host, { initialLatex, options });
+  (0, import_editor3.renderFormulaXEditorLoadingState)(host);
   let closed = false;
+  let mounted = null;
+  const mountedPromise = (0, import_editor3.waitForFormulaXAnimationFrame)().then(() => {
+    if (closed) {
+      (0, import_editor3.clearFormulaXPerfMarks)(modalOpenStart);
+      return null;
+    }
+    const mountStartMark = (0, import_editor3.markFormulaXPerf)("fx:modal:editor-mount-start");
+    (0, import_editor3.measureFormulaXPerf)("fx:modal:editor-mount-start", modalOpenStart, mountStartMark);
+    (0, import_editor3.clearFormulaXPerfMarks)(mountStartMark);
+    const nextMounted = mountFormulaXEditorInModal(host, { initialLatex, options });
+    mounted = nextMounted;
+    const mountedMark = (0, import_editor3.markFormulaXPerf)("fx:modal:editor-mounted");
+    (0, import_editor3.measureFormulaXPerf)("fx:modal:editor-mounted", modalOpenStart, mountedMark);
+    (0, import_editor3.clearFormulaXPerfMarks)(mountedMark, modalOpenStart);
+    queueMicrotask(() => {
+      if (!closed) {
+        nextMounted.root.focus();
+      }
+    });
+    return nextMounted;
+  }).catch((error) => {
+    (0, import_editor3.clearFormulaXPerfMarks)(modalOpenStart);
+    throw error;
+  });
   const close = () => {
     if (closed) return;
     closed = true;
-    mounted.destroy();
+    mounted?.destroy();
     root.removeEventListener("click", onClick);
     document.removeEventListener("keydown", onKeydown, true);
     root.remove();
@@ -183,11 +221,18 @@ function openFormulaXOverlayModal(input) {
     editor.focus?.();
   };
   const submit = async () => {
-    const latex = await mounted.getLatex();
-    const renderHtml = mounted.getRenderHtml ? await mounted.getRenderHtml() : void 0;
+    const activeMounted = mounted ?? await mountedPromise;
+    if (!activeMounted) {
+      return;
+    }
+    const latex = await activeMounted.getLatex();
+    const renderHtml = latex.trim() ? (await options.renderer.renderLatex(latex, {
+      fontSize: options.editor.render?.fontsize ?? 40,
+      className: options.formulaClassName
+    })).html : void 0;
     runEditorTransaction(editor, () => {
       if (target) {
-        const next = (0, import_editor.replaceFormulaElement)(target, latex, {
+        const next = (0, import_renderer.replaceFormulaElement)(target, latex, {
           attributeName: options.formulaAttributeName,
           className: options.formulaClassName,
           cursorStyle: options.cursorStyle,
@@ -233,9 +278,6 @@ function openFormulaXOverlayModal(input) {
   }
   root.addEventListener("click", onClick);
   document.addEventListener("keydown", onKeydown, true);
-  queueMicrotask(() => {
-    mounted.root.focus();
-  });
   return { close };
 }
 function runEditorTransaction(editor, mutation) {
@@ -308,7 +350,7 @@ function moveSelectionAfterNode(editor, node) {
 function insertFormulaElementWithPlaceholder(editor, latex, attributeName, className, cursorStyle, renderHtml) {
   const editorDoc = editor.getDoc?.() ?? document;
   const marker = `fx-pending-${Math.random().toString(36).slice(2, 10)}`;
-  editor.insertContent(`<span data-formulax-pending="${(0, import_editor.escapeAttribute)(marker)}">&#xfeff;</span>`);
+  editor.insertContent(`<span data-formulax-pending="${(0, import_renderer.escapeAttribute)(marker)}">&#xfeff;</span>`);
   const placeholder = editorDoc.querySelector(`[data-formulax-pending="${marker}"]`);
   if (!placeholder) {
     const html = createTinyMceFormulaMarkup(latex, {
@@ -369,8 +411,13 @@ function resolveOptions(options = {}) {
     cursorStyle: options.cursorStyle ?? "pointer",
     formulaClassName: options.formulaClassName ?? "formulax-math",
     formulaAttributeName: options.formulaAttributeName ?? "data-formulax-latex",
-    renderMode: options.renderMode ?? "text",
     initialLatex: options.initialLatex ?? "",
+    renderer: options.renderer ?? (0, import_renderer_kity.createKityFormulaRenderer)({
+      fontSize: options.editor?.render?.fontsize ?? 40,
+      height: options.editor?.height ?? "100%",
+      assets: options.editor?.assets ?? {}
+    }),
+    preload: options.preload ?? "idle",
     modal: {
       title: options.modal?.title ?? "FormulaX",
       insertText: options.modal?.insertText ?? "Insert",
@@ -381,7 +428,6 @@ function resolveOptions(options = {}) {
       closeOnBackdrop: options.modal?.closeOnBackdrop ?? true
     },
     editor: {
-      mode: "kity",
       height: options.editor?.height ?? "100%",
       autofocus: options.editor?.autofocus ?? true,
       assets: options.editor?.assets ?? {},
@@ -401,6 +447,7 @@ function registerFormulaXTinyMcePlugin(tinymce, options = {}) {
     resolved.pluginName,
     function FormulaXTinyMcePlugin(editor) {
       const compat = createTinyMceCompat(editor, tinymce);
+      let preloadCleanup = null;
       editor.schema?.addValidElements?.(FORMULAX_SVG_VALID_ELEMENTS);
       const open = (target) => {
         const resolvedTarget = target ?? compat.getSelectedFormulaElement();
@@ -429,9 +476,13 @@ function registerFormulaXTinyMcePlugin(tinymce, options = {}) {
         if (editorDoc) {
           ensureTinyMceStyles(editorDoc);
         }
+        preloadCleanup = (0, import_editor4.scheduleFormulaXEditorPreload)(
+          resolved.preload,
+          editor.getBody?.() ?? null
+        );
       });
       editor.on("dblclick", (event) => {
-        const formula = (0, import_editor.findFormulaElement)(event.target);
+        const formula = (0, import_renderer.findFormulaElement)(event.target);
         if (!formula) return;
         event.preventDefault?.();
         open(formula);
@@ -444,6 +495,10 @@ function registerFormulaXTinyMcePlugin(tinymce, options = {}) {
         e.preventDefault?.();
         open(formula);
       });
+      editor.on("remove", () => {
+        preloadCleanup?.();
+        preloadCleanup = null;
+      });
       return void 0;
     }
   );