@formulaxjs/tiptap 0.3.1 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @formulaxjs/tiptap
 
-English | [简体中文](./README.zh-CN.md)
+English | [简体中文](https://github.com/vndmea/formulaX/blob/main/packages/tiptap/README.zh-CN.md)
 
 Tiptap integration adapter for FormulaX.
 
@@ -57,23 +57,27 @@ import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { createFormulaXNode } from '@formulaxjs/tiptap';
 
-const editor = new Editor({
-  element: document.querySelector('#editor')!,
-  extensions: [
-    StarterKit,
-    createFormulaXNode(),
-  ],
-  content: '<p>Click the toolbar button to insert a formula.</p>',
-});
-```
-
-To open the FormulaX modal programmatically:
-
-```ts
-editor.commands.openFormulaX();
-```
-
-## Custom node names
+const editor = new Editor({
+  element: document.querySelector('#editor')!,
+  extensions: [
+    StarterKit,
+    createFormulaXNode(undefined, {
+      editor: {
+        locale: 'zh_CN', // optional, defaults to en_US
+      },
+    }),
+  ],
+  content: '<p>Click the toolbar button to insert a formula.</p>',
+});
+```
+
+To open the FormulaX modal programmatically:
+
+```ts
+editor.commands.openFormulaX();
+```
+
+## Custom node names
 
 The default Tiptap node name is `formulaX`.
 
@@ -116,11 +120,11 @@ The adapter accepts a `renderer` option. By default it uses `createKityFormulaRe
 import { createFormulaXNode } from '@formulaxjs/tiptap';
 import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
 
-const formulaNode = createFormulaXNode(undefined, {
-  renderer: createKityFormulaRenderer({
-    fontSize: 44,
-  }),
-});
+const formulaXNode = createFormulaXNode(undefined, {
+  renderer: createKityFormulaRenderer({
+    fontSize: 44,
+  }),
+});
 ```
 
 ## Options
@@ -141,12 +145,13 @@ interface FormulaXTiptapOptions {
     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;
     };
   };
 }
@@ -178,10 +183,11 @@ interface FormulaXTiptapOptions {
 
 | 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/tiptap
 
-[English](./README.md) | 简体中文
+[English](https://github.com/vndmea/formulaX/blob/main/packages/tiptap/README.md) | 简体中文
 
 FormulaX 的 Tiptap 集成适配器。
 
@@ -57,23 +57,27 @@ import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { createFormulaXNode } from '@formulaxjs/tiptap';
 
-const editor = new Editor({
-  element: document.querySelector('#editor')!,
-  extensions: [
-    StarterKit,
-    createFormulaXNode(),
-  ],
-  content: '<p>点击工具栏按钮插入公式。</p>',
-});
-```
-
-如果要在代码中主动打开 FormulaX 弹窗：
-
-```ts
-editor.commands.openFormulaX();
-```
-
-## 自定义节点名称
+const editor = new Editor({
+  element: document.querySelector('#editor')!,
+  extensions: [
+    StarterKit,
+    createFormulaXNode(undefined, {
+      editor: {
+        locale: 'zh_CN', // 可选，默认 en_US
+      },
+    }),
+  ],
+  content: '<p>点击工具栏按钮插入公式。</p>',
+});
+```
+
+如果要在代码中主动打开 FormulaX 弹窗：
+
+```ts
+editor.commands.openFormulaX();
+```
+
+## 自定义节点名称
 
 默认的 Tiptap 节点名是 `formulaX`。
 
@@ -116,11 +120,11 @@ Tiptap 节点中只保存 LaTeX 源内容：
 import { createFormulaXNode } from '@formulaxjs/tiptap';
 import { createKityFormulaRenderer } from '@formulaxjs/renderer-kity';
 
-const formulaNode = createFormulaXNode(undefined, {
-  renderer: createKityFormulaRenderer({
-    fontSize: 44,
-  }),
-});
+const formulaXNode = createFormulaXNode(undefined, {
+  renderer: createKityFormulaRenderer({
+    fontSize: 44,
+  }),
+});
 ```
 
 ## 配置项
@@ -141,12 +145,13 @@ interface FormulaXTiptapOptions {
     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;
     };
   };
 }
@@ -178,10 +183,11 @@ interface FormulaXTiptapOptions {
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |
-| `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;
+}