@formulaxjs/ckeditor5 0.3.0 → 0.4.0

package/README.zh-CN.md

@@ -1,10 +1,10 @@
 # @formulaxjs/ckeditor5
 
-[English](./README.md) | 简体中文
+[English](https://github.com/vndmea/formulaX/blob/main/packages/ckeditor5/README.md) | 简体中文
 
 FormulaX 的 CKEditor 5 集成适配器。
 
-`@formulaxjs/ckeditor5` 提供了一个 CKEditor 5 插件，会以弹窗形式打开 FormulaX 编辑器，用于在 CKEditor 5 内容中插入和更新行内公式。
+`@formulaxjs/ckeditor5` 提供了一个 CKEditor 5 插件，会以弹窗形式打开 FormulaX 编辑器，用于在 CKEditor 5 内容中插入和更新行内公式。
 
 > 状态：实验阶段。在首个稳定版本发布前，公共 API 仍可能调整。
 
@@ -14,13 +14,13 @@ FormulaX 的 CKEditor 5 集成适配器。
 - 基于 CKEditor 5 `componentFactory` 注册工具栏按钮
 - 通过 `editor.execute('formulaX')` 在代码中主动打开
 - 将公式作为行内 widget object 插入和更新
-- 支持双击编辑已有公式
-- 在 CKEditor 5 model 中仅持久化 LaTeX 源内容
-- 在 editing view 中运行时渲染 SVG
-- 默认通过 `@formulaxjs/renderer-kity` 完成只读渲染
-- 支持在首次打开弹窗前预加载 runtime
-- 支持在编辑器数据中对公式 markup 进行 upcast 和 downcast
-- 直接导出弹窗工具函数 `openFormulaXModal`
+- 支持双击编辑已有公式
+- 在 CKEditor 5 model 中仅持久化 LaTeX 源内容
+- 在 editing view 中运行时渲染 SVG
+- 默认通过 `@formulaxjs/renderer-kity` 完成只读渲染
+- 支持在首次打开弹窗前预加载 runtime
+- 支持在编辑器数据中对公式 markup 进行 upcast 和 downcast
+- 直接导出弹窗工具函数 `openFormulaXModal`
 
 ## 兼容性
 
@@ -39,8 +39,7 @@ FormulaX 的 CKEditor 5 集成适配器。
 包发布后可使用：
 
 ```bash
-pnpm add @formulaxjs/ckeditor5
-pnpm add ckeditor5
+npm install @formulaxjs/ckeditor5 ckeditor5
 ```
 
 在 FormulaX 工作空间内，直接使用 workspace 包：
@@ -60,10 +59,10 @@ import {
   Essentials,
   Paragraph,
 } from 'ckeditor5';
-import 'ckeditor5/ckeditor5.css';
-
-import { FormulaX } from '@formulaxjs/ckeditor5';
-import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
+import 'ckeditor5/ckeditor5.css';
+
+import { FormulaX } from '@formulaxjs/ckeditor5';
+import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
 
 await ClassicEditor.create(document.querySelector('#editor')!, {
   licenseKey: 'GPL',
@@ -73,27 +72,28 @@ await ClassicEditor.create(document.querySelector('#editor')!, {
     FormulaX,
   ],
   toolbar: ['formulaX'],
-  formulaX: {
-    toolbarText: 'FormulaX',
-    tooltip: '插入或编辑公式',
-    modal: {
-      title: 'FormulaX 公式编辑器',
-    },
+  formulaX: {
+    toolbarText: 'FormulaX',
+    tooltip: '插入或编辑公式',
+    modal: {
+      title: 'FormulaX 公式编辑器',
+    },
     renderer: createKityFormulaRenderer({
       fontSize: 40,
     }),
     editor: {
+      locale: 'zh_CN', // 可选，默认 en_US
       render: {
         fontsize: 40,
-      },
+      },
     },
   },
 } as any);
 ```
 
-之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击更新，也可以先选中后再次执行同一个命令进行更新。
-
-## 自定义 model 名称
+之后用户可以点击 `FormulaX` 工具栏按钮插入公式。已有公式可以通过双击更新，也可以先选中后再次执行同一个命令进行更新。
+
+## 自定义 model 名称
 
 默认的 CKEditor 5 model 名称是 `formulaX`。
 
@@ -165,38 +165,39 @@ CKEditor 5 的 model 层只保存公式的 LaTeX 源内容：
 ></span>
 ```
 
-编辑态中的 SVG 由持久化的 LaTeX 在运行时生成。用于渲染公式的内部 HTML 结构属于实现细节，后续可能演进。业务侧应优先依赖插件能力和导出的配置项，而不是写死完整 markup 结构。
-
-## 自定义 renderer
-
-该适配器支持 `renderer` 配置项。默认值是来自 `@formulaxjs/renderer-kity` 的 `createKityFormulaRenderer()`。
+编辑态中的 SVG 由持久化的 LaTeX 在运行时生成。用于渲染公式的内部 HTML 结构属于实现细节，后续可能演进。业务侧应优先依赖插件能力和导出的配置项，而不是写死完整 markup 结构。
+
+## 自定义 renderer
+
+该适配器支持 `renderer` 配置项。默认值是来自 `@formulaxjs/renderer-kity` 的 `createKityFormulaRenderer()`。
 
 ## 配置项
 
 ```ts
-interface FormulaXCKEditor5Options {
-  name?: string;
-  buttonName?: string;
-  toolbarText?: string;
-  tooltip?: string;
-  cursorStyle?: string;
-  formulaClassName?: string;
-  formulaAttributeName?: string;
-  renderer?: FormulaRenderer;
-  preload?: FormulaXEditorPreloadMode;
-  modal?: {
-    title?: string;
-    insertText?: string;
+interface FormulaXCKEditor5Options {
+  name?: string;
+  buttonName?: string;
+  toolbarText?: string;
+  tooltip?: string;
+  cursorStyle?: string;
+  formulaClassName?: string;
+  formulaAttributeName?: string;
+  renderer?: FormulaRenderer;
+  preload?: FormulaXEditorPreloadMode;
+  modal?: {
+    title?: string;
+    insertText?: string;
     updateText?: string;
     cancelText?: string;
     closeOnBackdrop?: boolean;
   };
-  editor?: {
-    height?: number | string;
-    autofocus?: boolean;
-    assets?: Partial<KityEditorAssets>;
-    render?: {
-      fontsize?: number;
+  editor?: {
+    height?: number | string;
+    autofocus?: boolean;
+    locale?: FormulaXLocale;
+    assets?: Partial<KityEditorAssets>;
+    render?: {
+      fontsize?: number;
     };
   };
 }
@@ -208,13 +209,13 @@ interface FormulaXCKEditor5Options {
 | `buttonName` | `formulaX` | CKEditor 5 的工具栏按钮名，同时也是命令名。 |
 | `toolbarText` | `FormulaX` | 工具栏按钮显示文本。 |
 | `tooltip` | `Insert or edit formula` | 工具栏按钮 tooltip。 |
-| `cursorStyle` | `pointer` | 应用于生成公式节点的鼠标光标样式。 |
-| `formulaClassName` | `formulax-math` | 生成的公式节点 CSS class。 |
-| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
-| `renderer` | `createKityFormulaRenderer()` | editing view 中运行时 SVG 输出使用的 renderer。 |
-| `preload` | `idle` | 控制在浏览器空闲时、宿主 hover/focus 时，或完全不预加载 FormulaX runtime。 |
-| `modal` | 见下方 | 弹窗文案和关闭行为。 |
-| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
+| `cursorStyle` | `pointer` | 应用于生成公式节点的鼠标光标样式。 |
+| `formulaClassName` | `formulax-math` | 生成的公式节点 CSS class。 |
+| `formulaAttributeName` | `data-formulax-latex` | 用于保存 LaTeX 源内容的属性。 |
+| `renderer` | `createKityFormulaRenderer()` | editing view 中运行时 SVG 输出使用的 renderer。 |
+| `preload` | `idle` | 控制在浏览器空闲时、宿主 hover/focus 时，或完全不预加载 FormulaX runtime。 |
+| `modal` | 见下方 | 弹窗文案和关闭行为。 |
+| `editor` | 见下方 | 内嵌 FormulaX 编辑器配置。 |
 
 ### Modal 配置
 
@@ -230,10 +231,11 @@ interface FormulaXCKEditor5Options {
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `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;
+}