@formulaxjs/editor 0.1.1 → 0.3.0

package/README.md

@@ -1,45 +1,66 @@
 # @formulaxjs/editor
 
-Browser editing foundation for FormulaX.
+Modal-oriented FormulaX editor UI helpers.
 
-`@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 browser-side modal styling and embedded editing helpers used by host integrations. It is no longer the shared markup layer or the read-only renderer layer.
 
 > 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
+- `ensureFormulaXModalStyles`
+- `formulaXModalStyles`
+- `mountFormulaXEditor`
+- `preloadFormulaXEditor` and `scheduleFormulaXEditorPreload`
+- `getLatex()`, `getState()`, and `getRenderHtml()` on the mounted editor handle
 
 ## Example
 
 ```ts
-import { FormulaEditor } from '@formulaxjs/editor';
+import {
+  ensureFormulaXModalStyles,
+  mountFormulaXEditor,
+} from '@formulaxjs/editor';
 
-const root = document.getElementById('editor');
+ensureFormulaXModalStyles(document);
 
-if (!root) {
-  throw new Error('Missing #editor');
-}
-
-const editor = new FormulaEditor({
-  root,
-  onChange(state) {
-    console.log(state);
-  },
+const mounted = mountFormulaXEditor(document.querySelector('#host') as HTMLElement, {
+  initialLatex: '\\sqrt{x}',
+  autofocus: true,
 });
 
-console.log(editor.getState());
+const latex = await mounted.getLatex();
+const html = await mounted.getRenderHtml();
 ```
 
+## Preloading
+
+If you want the FormulaX runtime to start loading before the user opens the modal, use the preload helpers:
+
+```ts
+import { scheduleFormulaXEditorPreload } from '@formulaxjs/editor';
+
+const cleanup = scheduleFormulaXEditorPreload('hover', document.querySelector('#open-formula'));
+
+// Call cleanup() if the host UI is torn down before preload triggers.
+```
+
+Supported preload modes:
+
+- `idle` schedules runtime loading when the browser is idle.
+- `hover` waits for `pointerenter` or `focusin` on the provided target.
+- `false` disables preloading.
+
 ## 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 for modal-based editing flows and embedded FormulaX editor UI.
+
+- If you need shared markup or base formula styles, use `@formulaxjs/renderer`.
+- If you need Kity-based read-only rendering, use `@formulaxjs/renderer-kity`.
+- If you need the low-level legacy runtime entry, use `@formulaxjs/kity-runtime`.