@formulaxjs/tinymce 0.3.0 → 0.3.1

package/README.md

@@ -58,16 +58,32 @@ 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',
+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: '100%',
+    height: 320,
     autofocus: true,
+    assets: {},
     render: { fontsize: 40 },
   },
 });
@@ -168,7 +184,7 @@ registerFormulaXTinyMcePlugin(tinymce, {
 ## Options
 
 ```ts
-interface FormulaXTinyMceOptions {
+interface FormulaXTinyMceOptions {
   pluginName?: string;
   buttonName?: string;
   menuItemName?: string;
@@ -177,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 |
 | --- | --- | --- |

package/README.zh-CN.md

@@ -58,16 +58,32 @@ pnpm dev:tinymce
 import tinymce from 'tinymce';
 import { registerFormulaXTinyMcePlugin } from '@formulaxjs/tinymce';
 
-registerFormulaXTinyMcePlugin(tinymce, {
-  toolbarText: 'FormulaX',
-  tooltip: '插入或编辑公式',
+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: '100%',
+    height: 320,
     autofocus: true,
+    assets: {},
     render: { fontsize: 40 },
   },
 });
@@ -168,7 +184,7 @@ registerFormulaXTinyMcePlugin(tinymce, {
 ## 配置项
 
 ```ts
-interface FormulaXTinyMceOptions {
+interface FormulaXTinyMceOptions {
   pluginName?: string;
   buttonName?: string;
   menuItemName?: string;
@@ -177,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'>;
+}
+```
 
 | 配置项 | 默认值 | 说明 |
 | --- | --- | --- |

package/dist/index.d.cts

@@ -0,0 +1,125 @@
+import { FormulaDoc } from '@formulaxjs/core';
+import { CreateFormulaMarkupOptions, FormulaRenderer } from '@formulaxjs/renderer';
+export { DEFAULT_FORMULA_ATTRIBUTE, DEFAULT_FORMULA_CLASS, FORMULA_FLAG_ATTRIBUTE, findFormulaElement, getFormulaLatexFromElement, isFormulaElement, replaceFormulaElement } from '@formulaxjs/renderer';
+import { FormulaXEditorPreloadMode, FormulaXEditorOptions } from '@formulaxjs/editor';
+
+declare function createTinyMceFormulaMarkup(latex: string, options?: CreateFormulaMarkupOptions): string;
+declare function parseTinyMceFormulaMarkup(latex: string): FormulaDoc;
+declare function serializeTinyMceFormulaMarkup(doc: FormulaDoc, options?: CreateFormulaMarkupOptions): string;
+
+interface TinyMceLike {
+    PluginManager?: {
+        add: (name: string, callback: (editor: TinyMceEditorLike, pluginUrl?: string) => unknown) => void;
+    };
+    majorVersion?: string | number;
+    minorVersion?: string | number;
+}
+interface TinyMceEditorLike {
+    id?: string;
+    insertContent: (content: string) => void;
+    addCommand: (name: string, callback: (...args: unknown[]) => void) => void;
+    execCommand: (name: string, ui?: boolean, value?: unknown) => void;
+    on: (name: string, callback: (event: any) => void) => void;
+    off?: (name: string, callback: (event: any) => void) => void;
+    ui?: {
+        registry?: {
+            addButton?: (name: string, config: Record<string, unknown>) => void;
+            addMenuItem?: (name: string, config: Record<string, unknown>) => void;
+            addIcon?: (name: string, svg: string) => void;
+        };
+    };
+    selection?: {
+        getNode?: () => HTMLElement;
+        getRng?: () => Range;
+        setRng?: (range: Range) => void;
+        select?: (node: HTMLElement) => void;
+        collapse?: (toStart?: boolean) => void;
+    };
+    undoManager?: {
+        transact?: (callback: () => void) => void;
+        add?: () => void;
+    };
+    dom?: {
+        encode?: (value: string) => string;
+        decode?: (value: string) => string;
+    };
+    schema?: {
+        addValidElements?: (validElements: string) => void;
+    };
+    getDoc?: () => Document;
+    getWin?: () => Window;
+    getBody?: () => HTMLElement;
+    focus?: () => void;
+    nodeChanged?: () => void;
+    dispatch?: (name: string, args?: Record<string, unknown>) => void;
+    fire?: (name: string, args?: Record<string, unknown>) => void;
+}
+interface FormulaXTinyMceOptions {
+    pluginName?: string;
+    buttonName?: string;
+    menuItemName?: string;
+    toolbarText?: string;
+    tooltip?: string;
+    cursorStyle?: string;
+    formulaClassName?: string;
+    formulaAttributeName?: string;
+    renderer?: FormulaRenderer;
+    preload?: FormulaXEditorPreloadMode;
+    modal?: FormulaXModalOptions;
+    initialLatex?: string;
+    editor?: Omit<FormulaXEditorOptions, 'initialLatex'>;
+}
+interface FormulaXModalOptions {
+    title?: string;
+    insertText?: string;
+    updateText?: string;
+    cancelText?: string;
+    width?: string;
+    height?: string;
+    closeOnBackdrop?: boolean;
+}
+interface RequiredFormulaXTinyMceOptions {
+    pluginName: string;
+    buttonName: string;
+    menuItemName: string;
+    toolbarText: string;
+    tooltip: string;
+    cursorStyle: string;
+    formulaClassName: string;
+    formulaAttributeName: string;
+    initialLatex: string;
+    renderer: FormulaRenderer;
+    preload: FormulaXEditorPreloadMode;
+    modal: Required<FormulaXModalOptions>;
+    editor: Required<Omit<FormulaXEditorOptions, 'initialLatex'>>;
+}
+interface FormulaXModalOpenOptions {
+    editor: TinyMceEditorLike;
+    target?: HTMLElement | null;
+    initialLatex?: string;
+    options: RequiredFormulaXTinyMceOptions;
+}
+
+interface TinyMceCompat {
+    major: number;
+    insertContent: (html: string) => void;
+    dispatchEvent: (name: string, detail?: Record<string, unknown>) => void;
+    getSelectedFormulaElement: () => HTMLElement | null;
+    getEditorDocument: () => Document;
+    getEditorWindow: () => Window;
+    getEditorBody: () => HTMLElement | null;
+    focus: () => void;
+}
+declare function getTinyMceMajorVersion(tinymce?: TinyMceLike): number;
+declare function createTinyMceCompat(editor: TinyMceEditorLike, tinymce?: TinyMceLike): TinyMceCompat;
+declare function warnUnsupportedTinyMceVersion(tinymce?: TinyMceLike): void;
+
+declare function resolveOptions(options?: FormulaXTinyMceOptions): RequiredFormulaXTinyMceOptions;
+declare function registerFormulaXTinyMcePlugin(tinymce: TinyMceLike, options?: FormulaXTinyMceOptions): void;
+
+interface OpenFormulaXModalResult {
+    close: () => void;
+}
+declare function openFormulaXOverlayModal(input: FormulaXModalOpenOptions): OpenFormulaXModalResult;
+
+export { type FormulaXModalOpenOptions, type FormulaXModalOptions, type FormulaXTinyMceOptions, type RequiredFormulaXTinyMceOptions, type TinyMceEditorLike, type TinyMceLike, createTinyMceCompat, createTinyMceFormulaMarkup, getTinyMceMajorVersion, openFormulaXOverlayModal, parseTinyMceFormulaMarkup, registerFormulaXTinyMcePlugin, resolveOptions, serializeTinyMceFormulaMarkup, warnUnsupportedTinyMceVersion };

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+import { FormulaDoc } from '@formulaxjs/core';
+import { CreateFormulaMarkupOptions, FormulaRenderer } from '@formulaxjs/renderer';
+export { DEFAULT_FORMULA_ATTRIBUTE, DEFAULT_FORMULA_CLASS, FORMULA_FLAG_ATTRIBUTE, findFormulaElement, getFormulaLatexFromElement, isFormulaElement, replaceFormulaElement } from '@formulaxjs/renderer';
+import { FormulaXEditorPreloadMode, FormulaXEditorOptions } from '@formulaxjs/editor';
+
+declare function createTinyMceFormulaMarkup(latex: string, options?: CreateFormulaMarkupOptions): string;
+declare function parseTinyMceFormulaMarkup(latex: string): FormulaDoc;
+declare function serializeTinyMceFormulaMarkup(doc: FormulaDoc, options?: CreateFormulaMarkupOptions): string;
+
+interface TinyMceLike {
+    PluginManager?: {
+        add: (name: string, callback: (editor: TinyMceEditorLike, pluginUrl?: string) => unknown) => void;
+    };
+    majorVersion?: string | number;
+    minorVersion?: string | number;
+}
+interface TinyMceEditorLike {
+    id?: string;
+    insertContent: (content: string) => void;
+    addCommand: (name: string, callback: (...args: unknown[]) => void) => void;
+    execCommand: (name: string, ui?: boolean, value?: unknown) => void;
+    on: (name: string, callback: (event: any) => void) => void;
+    off?: (name: string, callback: (event: any) => void) => void;
+    ui?: {
+        registry?: {
+            addButton?: (name: string, config: Record<string, unknown>) => void;
+            addMenuItem?: (name: string, config: Record<string, unknown>) => void;
+            addIcon?: (name: string, svg: string) => void;
+        };
+    };
+    selection?: {
+        getNode?: () => HTMLElement;
+        getRng?: () => Range;
+        setRng?: (range: Range) => void;
+        select?: (node: HTMLElement) => void;
+        collapse?: (toStart?: boolean) => void;
+    };
+    undoManager?: {
+        transact?: (callback: () => void) => void;
+        add?: () => void;
+    };
+    dom?: {
+        encode?: (value: string) => string;
+        decode?: (value: string) => string;
+    };
+    schema?: {
+        addValidElements?: (validElements: string) => void;
+    };
+    getDoc?: () => Document;
+    getWin?: () => Window;
+    getBody?: () => HTMLElement;
+    focus?: () => void;
+    nodeChanged?: () => void;
+    dispatch?: (name: string, args?: Record<string, unknown>) => void;
+    fire?: (name: string, args?: Record<string, unknown>) => void;
+}
+interface FormulaXTinyMceOptions {
+    pluginName?: string;
+    buttonName?: string;
+    menuItemName?: string;
+    toolbarText?: string;
+    tooltip?: string;
+    cursorStyle?: string;
+    formulaClassName?: string;
+    formulaAttributeName?: string;
+    renderer?: FormulaRenderer;
+    preload?: FormulaXEditorPreloadMode;
+    modal?: FormulaXModalOptions;
+    initialLatex?: string;
+    editor?: Omit<FormulaXEditorOptions, 'initialLatex'>;
+}
+interface FormulaXModalOptions {
+    title?: string;
+    insertText?: string;
+    updateText?: string;
+    cancelText?: string;
+    width?: string;
+    height?: string;
+    closeOnBackdrop?: boolean;
+}
+interface RequiredFormulaXTinyMceOptions {
+    pluginName: string;
+    buttonName: string;
+    menuItemName: string;
+    toolbarText: string;
+    tooltip: string;
+    cursorStyle: string;
+    formulaClassName: string;
+    formulaAttributeName: string;
+    initialLatex: string;
+    renderer: FormulaRenderer;
+    preload: FormulaXEditorPreloadMode;
+    modal: Required<FormulaXModalOptions>;
+    editor: Required<Omit<FormulaXEditorOptions, 'initialLatex'>>;
+}
+interface FormulaXModalOpenOptions {
+    editor: TinyMceEditorLike;
+    target?: HTMLElement | null;
+    initialLatex?: string;
+    options: RequiredFormulaXTinyMceOptions;
+}
+
+interface TinyMceCompat {
+    major: number;
+    insertContent: (html: string) => void;
+    dispatchEvent: (name: string, detail?: Record<string, unknown>) => void;
+    getSelectedFormulaElement: () => HTMLElement | null;
+    getEditorDocument: () => Document;
+    getEditorWindow: () => Window;
+    getEditorBody: () => HTMLElement | null;
+    focus: () => void;
+}
+declare function getTinyMceMajorVersion(tinymce?: TinyMceLike): number;
+declare function createTinyMceCompat(editor: TinyMceEditorLike, tinymce?: TinyMceLike): TinyMceCompat;
+declare function warnUnsupportedTinyMceVersion(tinymce?: TinyMceLike): void;
+
+declare function resolveOptions(options?: FormulaXTinyMceOptions): RequiredFormulaXTinyMceOptions;
+declare function registerFormulaXTinyMcePlugin(tinymce: TinyMceLike, options?: FormulaXTinyMceOptions): void;
+
+interface OpenFormulaXModalResult {
+    close: () => void;
+}
+declare function openFormulaXOverlayModal(input: FormulaXModalOpenOptions): OpenFormulaXModalResult;
+
+export { type FormulaXModalOpenOptions, type FormulaXModalOptions, type FormulaXTinyMceOptions, type RequiredFormulaXTinyMceOptions, type TinyMceEditorLike, type TinyMceLike, createTinyMceCompat, createTinyMceFormulaMarkup, getTinyMceMajorVersion, openFormulaXOverlayModal, parseTinyMceFormulaMarkup, registerFormulaXTinyMcePlugin, resolveOptions, serializeTinyMceFormulaMarkup, warnUnsupportedTinyMceVersion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formulaxjs/tinymce",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -27,7 +27,7 @@
       "require": "./dist/index.cjs"
     }
   },
-  "unpkg": "./dist/browser/index.global.js",
+  "unpkg": "./dist/index.global.js",
   "files": [
     "dist"
   ],
@@ -35,10 +35,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@formulaxjs/core": "0.1.0",
-    "@formulaxjs/editor": "0.4.0",
-    "@formulaxjs/renderer": "0.2.0",
-    "@formulaxjs/renderer-kity": "0.3.0"
+    "@formulaxjs/core": "0.1.1",
+    "@formulaxjs/editor": "0.4.1",
+    "@formulaxjs/renderer-kity": "0.3.1",
+    "@formulaxjs/renderer": "0.2.1"
   },
   "peerDependencies": {
     "tinymce": ">=5 <9"