@formulaxjs/tinymce 0.2.0 → 0.3.0

package/README.md

@@ -1,10 +1,10 @@
 # @formulaxjs/tinymce
 
-English | [简体中文](./README.zh-CN.md)
+English | [简体中文](https://github.com/vndmea/formulaX/blob/main/packages/tinymce/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,14 +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
-- Default read-only rendering through `@formulaxjs/renderer-kity`
-- Optional runtime preload before the first modal open
-
-## 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:
 
@@ -40,8 +40,7 @@ The workspace demo can dynamically load TinyMCE 5, 6, 7, or 8 from CDN for compa
 When the package is published:
 
 ```bash
-pnpm add @formulaxjs/tinymce
-pnpm add tinymce
+npm install @formulaxjs/tinymce tinymce
 ```
 
 Inside the FormulaX workspace, use the workspace package directly:
@@ -66,11 +65,12 @@ registerFormulaXTinyMcePlugin(tinymce, {
     title: 'FormulaX Editor',
   },
   editor: {
+    locale: 'zh_CN', // optional, defaults to en_US
     height: '100%',
     autofocus: true,
     render: { fontsize: 40 },
   },
-});
+});
 
 await tinymce.init({
   selector: '#editor',
@@ -82,9 +82,9 @@ await tinymce.init({
 });
 ```
 
-Then users can click the `FormulaX` toolbar button to insert a formula. Existing formulas can be edited by double-clicking them or selecting them and pressing Enter or Space.
-
-## Programmatic opening
+Then users can click the `FormulaX` toolbar button to insert a formula. Existing formulas can be edited by double-clicking them or selecting them and pressing Enter or Space.
+
+## Programmatic opening
 
 The plugin registers the `FormulaXOpen` command:
 
@@ -135,77 +135,77 @@ if (isFormulaElement(element)) {
 
 A generated formula node stores the source LaTeX in `data-formulax-latex` and is marked with `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>
-```
-
-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,
-  }),
-});
-```
+```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>
+```
+
+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
 
 ```ts
-interface FormulaXTinyMceOptions {
-  pluginName?: string;
-  buttonName?: string;
-  menuItemName?: string;
-  toolbarText?: string;
-  tooltip?: string;
-  cursorStyle?: string;
-  formulaClassName?: string;
-  formulaAttributeName?: string;
-  renderer?: FormulaRenderer;
-  preload?: FormulaXEditorPreloadMode;
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
+interface FormulaXTinyMceOptions {
+  pluginName?: string;
+  buttonName?: string;
+  menuItemName?: string;
+  toolbarText?: string;
+  tooltip?: string;
+  cursorStyle?: string;
+  formulaClassName?: string;
+  formulaAttributeName?: string;
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: FormulaXEditorOptions;
+}
 ```
 
 | Option | Default | Description |
 | --- | --- | --- |
 | `pluginName` | `formulax` | TinyMCE plugin name registered through `tinymce.PluginManager.add`. |
 | `buttonName` | `formulax` | Toolbar button name. |
-| `menuItemName` | `formulax` | Menu item name. |
-| `toolbarText` | `FormulaX` | Toolbar and menu item label. |
-| `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. |
-| `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. |
+| `menuItemName` | `formulax` | Menu item name. |
+| `toolbarText` | `FormulaX` | Toolbar and menu item label. |
+| `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. |
+| `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
 
 | Option | Default | Description |
 | --- | --- | --- |
-| `title` | `FormulaX` | Modal title. |
+| `title` | `FormulaX Editor` | Modal title. |
 | `insertText` | `Insert` | Submit button text when inserting. |
 | `updateText` | `Update` | Submit button text when updating. |
 | `cancelText` | `Cancel` | Cancel button text. |
@@ -219,6 +219,7 @@ interface FormulaXTinyMceOptions {
 | --- | --- | --- |
 | `height` | `100%` | Embedded editor height. |
 | `autofocus` | `true` | Whether the embedded editor should autofocus. |
+| `locale` | `en_US` | Localizes the modal defaults and the embedded Kity runtime UI. |
 | `assets` | `{}` | Optional Kity runtime asset overrides. |
 | `render.fontsize` | `40` | Formula render font size. |
 

package/README.zh-CN.md

@@ -1,10 +1,10 @@
 # @formulaxjs/tinymce
 
-[English](./README.md) | 简体中文
+[English](https://github.com/vndmea/formulaX/blob/main/packages/tinymce/README.md) | 简体中文
 
 FormulaX 的 TinyMCE 集成适配器。
 
-`@formulaxjs/tinymce` 会将 FormulaX 注册为 TinyMCE 插件，并提供基于弹窗的公式编辑体验，用于在 TinyMCE 内容中插入和更新公式。
+`@formulaxjs/tinymce` 会将 FormulaX 注册为 TinyMCE 插件，并提供基于弹窗的公式编辑体验，用于在 TinyMCE 内容中插入和更新公式。
 
 > 状态：实验阶段。在首个稳定版本发布前，公共 API 仍可能调整。
 
@@ -14,12 +14,12 @@ FormulaX 的 TinyMCE 集成适配器。
 - 支持 FormulaX 工具栏按钮和菜单项
 - 提供 `FormulaXOpen` TinyMCE 命令，便于代码中主动打开公式编辑器
 - 将公式作为不可直接编辑的 inline 节点插入和更新
-- 支持双击、Enter、Space 编辑已有公式
-- 面向 TinyMCE `>=5 <9` 的兼容层
-- 通过 `data-formulax-latex` 持久化 LaTeX 源内容
-- 提供创建、解析、序列化、查找和替换公式元素的 markup 工具函数
-- 默认通过 `@formulaxjs/renderer-kity` 完成只读渲染
-- 支持在首次打开弹窗前预加载 runtime
+- 支持双击、Enter、Space 编辑已有公式
+- 面向 TinyMCE `>=5 <9` 的兼容层
+- 通过 `data-formulax-latex` 持久化 LaTeX 源内容
+- 提供创建、解析、序列化、查找和替换公式元素的 markup 工具函数
+- 默认通过 `@formulaxjs/renderer-kity` 完成只读渲染
+- 支持在首次打开弹窗前预加载 runtime
 
 ## 兼容性
 
@@ -40,8 +40,7 @@ FormulaX 的 TinyMCE 集成适配器。
 包发布后可使用：
 
 ```bash
-pnpm add @formulaxjs/tinymce
-pnpm add tinymce
+npm install @formulaxjs/tinymce tinymce
 ```
 
 在 FormulaX 工作空间内，直接使用 workspace 包：
@@ -66,11 +65,12 @@ registerFormulaXTinyMcePlugin(tinymce, {
     title: 'FormulaX 公式编辑器',
   },
   editor: {
+    locale: 'zh_CN', // 可选，默认 en_US
     height: '100%',
     autofocus: true,
     render: { fontsize: 40 },
   },
-});
+});
 
 await tinymce.init({
   selector: '#editor',
@@ -82,9 +82,9 @@ await tinymce.init({
 });
 ```
 
-之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击编辑，也可以选中后按 Enter 或 Space 编辑。
-
-## 代码中主动打开
+之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击编辑，也可以选中后按 Enter 或 Space 编辑。
+
+## 代码中主动打开
 
 插件会注册 `FormulaXOpen` 命令：
 
@@ -147,42 +147,42 @@ if (isFormulaElement(element)) {
 ></span>
 ```
 
-具体生成的 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,
-  }),
-});
-```
+具体生成的 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,
+  }),
+});
+```
 
 ## 配置项
 
 ```ts
-interface FormulaXTinyMceOptions {
-  pluginName?: string;
-  buttonName?: string;
-  menuItemName?: string;
-  toolbarText?: string;
-  tooltip?: string;
-  cursorStyle?: string;
-  formulaClassName?: string;
-  formulaAttributeName?: string;
-  renderer?: FormulaRenderer;
-  preload?: FormulaXEditorPreloadMode;
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
+interface FormulaXTinyMceOptions {
+  pluginName?: string;
+  buttonName?: string;
+  menuItemName?: string;
+  toolbarText?: string;
+  tooltip?: string;
+  cursorStyle?: string;
+  formulaClassName?: string;
+  formulaAttributeName?: string;
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: FormulaXEditorOptions;
+}
 ```
 
 | 配置项 | 默认值 | 说明 |
@@ -192,20 +192,20 @@ interface FormulaXTinyMceOptions {
 | `menuItemName` | `formulax` | 菜单项名。 |
 | `toolbarText` | `FormulaX` | 工具栏按钮和菜单项显示文本。 |
 | `tooltip` | `Insert formula` | 工具栏按钮 tooltip。 |
-| `cursorStyle` | `pointer` | 应用于生成公式节点的鼠标光标样式。 |
-| `formulaClassName` | `formulax-math` | 生成的公式节点 CSS class。 |
-| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
-| `renderer` | `createKityFormulaRenderer()` | 插件在需要运行时公式 HTML 时使用的 renderer。 |
-| `preload` | `idle` | 控制在浏览器空闲时、宿主 hover/focus 时，或完全不预加载 FormulaX runtime。 |
-| `initialLatex` | 空字符串 | 插入新公式时的初始 LaTeX。 |
-| `modal` | 见下方 | 弹窗标题、按钮文本、尺寸和关闭行为。 |
-| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
+| `cursorStyle` | `pointer` | 应用于生成公式节点的鼠标光标样式。 |
+| `formulaClassName` | `formulax-math` | 生成的公式节点 CSS class。 |
+| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
+| `renderer` | `createKityFormulaRenderer()` | 插件在需要运行时公式 HTML 时使用的 renderer。 |
+| `preload` | `idle` | 控制在浏览器空闲时、宿主 hover/focus 时，或完全不预加载 FormulaX runtime。 |
+| `initialLatex` | 空字符串 | 插入新公式时的初始 LaTeX。 |
+| `modal` | 见下方 | 弹窗标题、按钮文本、尺寸和关闭行为。 |
+| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
 
 ### Modal 配置
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `title` | `FormulaX` | 弹窗标题。 |
+| `title` | `FormulaX Editor` | 弹窗标题。 |
 | `insertText` | `Insert` | 插入公式时的提交按钮文本。 |
 | `updateText` | `Update` | 更新公式时的提交按钮文本。 |
 | `cancelText` | `Cancel` | 取消按钮文本。 |
@@ -219,6 +219,7 @@ interface FormulaXTinyMceOptions {
 | --- | --- | --- |
 | `height` | `100%` | 内嵌编辑器高度。 |
 | `autofocus` | `true` | 内嵌编辑器是否自动聚焦。 |
+| `locale` | `en_US` | 同时切换弹窗默认文案和内嵌 Kity runtime UI。 |
 | `assets` | `{}` | 可选的 Kity runtime 资源覆盖配置。 |
 | `render.fontsize` | `40` | 公式渲染字号。 |
 

package/dist/base.css

@@ -0,0 +1,47 @@
+
+.kf-editor {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #e0e0e0;
+    position: relative;
+    top: 0;
+    left: 0;
+
+    overflow: visible;
+    z-index: 2;
+    background-color: #f6f5ee;
+}
+
+.kf-editor-edit-area {
+    width: 100%;
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    z-index: 1;
+    flex: 1 1 auto;
+    min-height: 100px;
+    height: 100px;
+    overflow: hidden;
+    background-color: white;
+    /*background-color: white;*/
+    /*background-size: 21px 21px;*/
+    /*background-position: 0 0,10px 10px;*/
+    /*background-image: -webkit-linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),-webkit-linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef);*/
+    /*background-image: linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef);*/
+}
+
+.kf-editor-canvas-container {
+    width: 100%;
+    height: 100%;
+}
+
+.kf-editor-input-box {
+    position: fixed;
+    top: 0;
+    left: -99999999px;
+    z-index: 999999;
+}