@formulaxjs/tinymce 0.2.1 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # @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.
 
@@ -58,18 +58,35 @@ Register the FormulaX TinyMCE plugin before calling `tinymce.init`:
 import tinymce from 'tinymce';
 import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
 
-registerFormulaXTinyMcePlugin(tinymce, {
-  toolbarText: 'FormulaX',
-  tooltip: 'Insert or edit formula',
-  modal: {
-    title: 'FormulaX Editor',
-  },
-  editor: {
-    height: '100%',
-    autofocus: true,
-    render: { fontsize: 40 },
-  },
-});
+registerFormulaXTinyMcePlugin(tinymce, {
+  pluginName: 'formulax', // TinyMCE plugin id used in the plugins list
+  buttonName: 'formulax', // toolbar button id used in the toolbar string
+  menuItemName: 'formulax', // menu item id if you also expose the action in menus
+  toolbarText: 'FormulaX',
+  tooltip: 'Insert or edit formula',
+  cursorStyle: 'pointer', // cursor applied to generated formula nodes
+  formulaClassName: 'formulax-math', // DOM class written on formula wrappers
+  formulaAttributeName: 'data-formulax-latex', // attribute that stores source LaTeX
+  initialLatex: '\\sqrt{x}', // default LaTeX for newly inserted formulas
+  preload: 'idle', // 'idle' | 'hover' | false
+  modal: {
+    title: 'FormulaX Editor',
+    insertText: 'Insert',
+    updateText: 'Update',
+    cancelText: 'Cancel',
+    width: '1100px',
+    height: 'auto',
+    closeOnBackdrop: true,
+  },
+  editor: {
+    // forwarded to the embedded FormulaX editor instance
+    locale: 'zh_CN', // optional, defaults to en_US
+    height: 320,
+    autofocus: true,
+    assets: {},
+    render: { fontsize: 40 },
+  },
+});
 
 await tinymce.init({
   selector: '#editor',
@@ -81,9 +98,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:
 
@@ -167,7 +184,7 @@ registerFormulaXTinyMcePlugin(tinymce, {
 ## Options
 
 ```ts
-interface FormulaXTinyMceOptions {
+interface FormulaXTinyMceOptions {
   pluginName?: string;
   buttonName?: string;
   menuItemName?: string;
@@ -176,13 +193,13 @@ interface FormulaXTinyMceOptions {
   cursorStyle?: string;
   formulaClassName?: string;
   formulaAttributeName?: string;
-  renderer?: FormulaRenderer;
-  preload?: FormulaXEditorPreloadMode;
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
-```
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: Omit<FormulaXEditorOptions, 'initialLatex'>;
+}
+```
 
 | Option | Default | Description |
 | --- | --- | --- |
@@ -204,7 +221,7 @@ interface FormulaXTinyMceOptions {
 
 | 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. |
@@ -216,10 +233,11 @@ interface FormulaXTinyMceOptions {
 
 | Option | Default | Description |
 | --- | --- | --- |
-| `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. |
+| `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. |
 
 ## Exported API
 

package/README.zh-CN.md

@@ -1,6 +1,6 @@
 # @formulaxjs/tinymce
 
-[English](./README.md) | 简体中文
+[English](https://github.com/vndmea/formulaX/blob/main/packages/tinymce/README.md) | 简体中文
 
 FormulaX 的 TinyMCE 集成适配器。
 
@@ -58,18 +58,35 @@ pnpm dev:tinymce
 import tinymce from 'tinymce';
 import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
 
-registerFormulaXTinyMcePlugin(tinymce, {
-  toolbarText: 'FormulaX',
-  tooltip: '插入或编辑公式',
-  modal: {
-    title: 'FormulaX 公式编辑器',
-  },
-  editor: {
-    height: '100%',
-    autofocus: true,
-    render: { fontsize: 40 },
-  },
-});
+registerFormulaXTinyMcePlugin(tinymce, {
+  pluginName: 'formulax', // TinyMCE 插件名，需要和 plugins 配置一致
+  buttonName: 'formulax', // 工具栏按钮名，需要和 toolbar 配置一致
+  menuItemName: 'formulax', // 如果菜单里也要出现该操作，可复用这个标识
+  toolbarText: 'FormulaX',
+  tooltip: '插入或编辑公式',
+  cursorStyle: 'pointer', // 应用于公式节点的鼠标样式
+  formulaClassName: 'formulax-math', // 公式外层 DOM class
+  formulaAttributeName: 'data-formulax-latex', // 保存源 LaTeX 的属性名
+  initialLatex: '\\sqrt{x}', // 新插入公式的默认内容
+  preload: 'idle', // 'idle' | 'hover' | false
+  modal: {
+    title: 'FormulaX 公式编辑器',
+    insertText: 'Insert',
+    updateText: 'Update',
+    cancelText: 'Cancel',
+    width: '1100px',
+    height: 'auto',
+    closeOnBackdrop: true,
+  },
+  editor: {
+    // 这些配置会透传给内嵌的 FormulaX 编辑器
+    locale: 'zh_CN', // 可选，默认 en_US
+    height: 320,
+    autofocus: true,
+    assets: {},
+    render: { fontsize: 40 },
+  },
+});
 
 await tinymce.init({
   selector: '#editor',
@@ -81,9 +98,9 @@ await tinymce.init({
 });
 ```
 
-之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击编辑，也可以选中后按 Enter 或 Space 编辑。
-
-## 代码中主动打开
+之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击编辑，也可以选中后按 Enter 或 Space 编辑。
+
+## 代码中主动打开
 
 插件会注册 `FormulaXOpen` 命令：
 
@@ -167,7 +184,7 @@ registerFormulaXTinyMcePlugin(tinymce, {
 ## 配置项
 
 ```ts
-interface FormulaXTinyMceOptions {
+interface FormulaXTinyMceOptions {
   pluginName?: string;
   buttonName?: string;
   menuItemName?: string;
@@ -176,13 +193,13 @@ interface FormulaXTinyMceOptions {
   cursorStyle?: string;
   formulaClassName?: string;
   formulaAttributeName?: string;
-  renderer?: FormulaRenderer;
-  preload?: FormulaXEditorPreloadMode;
-  initialLatex?: string;
-  modal?: FormulaXModalOptions;
-  editor?: FormulaXEditorOptions;
-}
-```
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  initialLatex?: string;
+  modal?: FormulaXModalOptions;
+  editor?: Omit<FormulaXEditorOptions, 'initialLatex'>;
+}
+```
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
@@ -204,7 +221,7 @@ interface FormulaXTinyMceOptions {
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `title` | `FormulaX` | 弹窗标题。 |
+| `title` | `FormulaX Editor` | 弹窗标题。 |
 | `insertText` | `Insert` | 插入公式时的提交按钮文本。 |
 | `updateText` | `Update` | 更新公式时的提交按钮文本。 |
 | `cancelText` | `Cancel` | 取消按钮文本。 |
@@ -216,10 +233,11 @@ interface FormulaXTinyMceOptions {
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `height` | `100%` | 内嵌编辑器高度。 |
-| `autofocus` | `true` | 内嵌编辑器是否自动聚焦。 |
-| `assets` | `{}` | 可选的 Kity runtime 资源覆盖配置。 |
-| `render.fontsize` | `40` | 公式渲染字号。 |
+| `height` | `100%` | 内嵌编辑器高度。 |
+| `autofocus` | `true` | 内嵌编辑器是否自动聚焦。 |
+| `locale` | `en_US` | 同时切换弹窗默认文案和内嵌 Kity runtime UI。 |
+| `assets` | `{}` | 可选的 Kity runtime 资源覆盖配置。 |
+| `render.fontsize` | `40` | 公式渲染字号。 |
 
 ## 导出 API
 

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;
+}