@formulaxjs/editor 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.d.cts +38 -0
  2. package/dist/index.d.ts +38 -0
  3. package/package.json +6 -6
package/dist/index.d.cts ADDED
@@ -0,0 +1,38 @@
1
+ import { FormulaState } from '@formulaxjs/core';
2
+ import { FormulaXLocale, KityEditorAssets } from '@formulaxjs/kity-runtime';
3
+
4
+ interface FormulaXEditorOptions {
5
+ initialLatex?: string;
6
+ height?: number | string;
7
+ autofocus?: boolean;
8
+ locale?: FormulaXLocale;
9
+ assets?: Partial<KityEditorAssets>;
10
+ render?: {
11
+ fontsize?: number;
12
+ };
13
+ }
14
+ interface MountedFormulaXEditor {
15
+ root: HTMLElement;
16
+ getLatex: () => Promise<string>;
17
+ getState: () => Promise<FormulaState>;
18
+ getRenderHtml: () => Promise<string>;
19
+ destroy: () => void;
20
+ }
21
+ declare const formulaXModalStyles = "\n.fx-formula-modal-open {\n overflow: hidden;\n}\n\n.fx-formula-modal-root {\n position: fixed;\n inset: 0;\n z-index: 2147483000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 16px;\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n.fx-formula-modal-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(15, 23, 42, 0.48);\n}\n\n.fx-formula-modal {\n --fx-formula-editor-body-height: 264px;\n --fx-formula-workspace-height: 168px;\n position: relative;\n width: min(920px, calc(100vw - 32px));\n height: auto;\n max-height: none;\n margin: 0 auto;\n background: #fff;\n border-radius: 14px;\n box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);\n display: flex;\n flex-direction: column;\n overflow: visible;\n isolation: isolate;\n}\n\n.fx-formula-modal__header,\n.fx-formula-modal__footer,\n.fx-formula-modal__title,\n.fx-formula-modal__close,\n.fx-formula-modal__button,\n.fx-formula-editor-loading,\n.fx-formula-editor-error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.fx-formula-modal__header {\n min-height: 56px;\n padding: 0 20px;\n border-bottom: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n position: relative;\n z-index: 3;\n background: #fff;\n border-radius: 14px 14px 0 0;\n}\n\n.fx-formula-modal__title {\n font-size: 16px;\n font-weight: 650;\n margin: 0;\n color: #111827;\n}\n\n.fx-formula-modal__close {\n border: 0;\n background: transparent;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n color: #6b7280;\n}\n\n.fx-formula-modal__body {\n flex: 0 0 auto;\n height: var(--fx-formula-editor-body-height);\n padding: 0;\n overflow: visible;\n min-height: var(--fx-formula-editor-body-height);\n position: relative;\n z-index: 2;\n}\n\n.fx-formula-editor-host {\n width: 100%;\n height: var(--fx-formula-editor-body-height);\n min-height: var(--fx-formula-editor-body-height);\n overflow: visible;\n position: relative;\n}\n\n.fx-formula-kity-host {\n width: 100%;\n height: var(--fx-formula-editor-body-height);\n min-height: var(--fx-formula-editor-body-height);\n overflow: visible;\n position: relative;\n}\n\n.fx-formula-kity-host .kf-editor {\n box-sizing: border-box;\n width: 100%;\n height: var(--fx-formula-editor-body-height) !important;\n overflow: visible !important;\n}\n\n.fx-formula-kity-host .kf-editor-toolbar {\n overflow: visible;\n position: relative;\n z-index: 20;\n}\n\n.fx-formula-kity-host .kf-editor-ui-button-mount-point,\n.fx-formula-kity-host .kf-editor-ui-area-mount,\n.fx-formula-kity-host .kf-editor-ui-box,\n.fx-formula-kity-host .kf-editor-ui-list {\n z-index: 1000;\n}\n\n.fx-formula-kity-host .kf-editor-edit-area,\n.fx-formula-kity-host .kf-editor-canvas-container {\n min-height: var(--fx-formula-workspace-height);\n height: var(--fx-formula-workspace-height);\n}\n\n.fx-formula-kity-host .kf-editor-edit-area {\n flex: 0 0 auto;\n overflow: hidden;\n}\n\n.fx-formula-kity-host .kf-editor,\n.fx-formula-kity-host .kf-editor svg text,\n.fx-formula-kity-host .kf-editor-ui-area-item-text,\n.fx-formula-kity-host .kf-editor-ui-box-item-text,\n.fx-formula-kity-host .kf-editor-ui-box-item-val {\n font-family: \"KF AMS MAIN\", \"Cambria Math\", \"Latin Modern Math\", \"Times New Roman\", serif !important;\n}\n\n.fx-formula-kity-host .kf-editor-ui-box-item-content,\n.fx-formula-kity-host .kf-editor-ui-box-item-val {\n min-width: 32px;\n min-height: 32px;\n}\n\n.fx-formula-kity-host .kf-editor-ui-box-item-val svg,\n.fx-formula-kity-host .kf-editor-ui-box-item-val img,\n.fx-formula-kity-host .kf-editor-ui-area-item-img,\n.fx-formula-kity-host .kf-editor-ui-area-item-text {\n display: block;\n}\n\n.fx-formula-editor-loading {\n height: var(--fx-formula-editor-body-height);\n padding: 24px;\n color: #4b5563;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.fx-formula-editor-error {\n padding: 24px;\n color: #dc2626;\n font-size: 14px;\n}\n\n.fx-formula-editor-error pre {\n white-space: pre-wrap;\n word-break: break-all;\n color: #991b1b;\n background: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 12px;\n margin-top: 8px;\n}\n\n.fx-formula-modal__footer {\n min-height: 64px;\n padding: 12px 20px;\n border-top: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background: #fff;\n border-radius: 0 0 14px 14px;\n}\n\n.fx-formula-modal__button {\n appearance: none;\n border: 1px solid #d1d5db;\n background: #fff;\n color: #111827;\n border-radius: 8px;\n padding: 8px 14px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.fx-formula-modal__button--primary {\n border-color: #2563eb;\n background: #2563eb;\n color: #fff;\n}\n";
22
+ declare function ensureFormulaXModalStyles(doc?: Document): void;
23
+ declare function renderFormulaXEditorLoadingState(root: HTMLElement): void;
24
+ declare function mountFormulaXEditor(root: HTMLElement, options?: FormulaXEditorOptions): MountedFormulaXEditor;
25
+
26
+ type FormulaXEditorMessageKey = 'modal.title' | 'modal.insert' | 'modal.update' | 'modal.cancel';
27
+ declare function getFormulaXEditorMessage(key: FormulaXEditorMessageKey, locale?: FormulaXLocale): string;
28
+
29
+ type FormulaXEditorPreloadMode = 'idle' | 'hover' | false;
30
+ declare function markFormulaXPerf(name: string): string | null;
31
+ declare function measureFormulaXPerf(name: string, startMark: string | null, endMark?: string | null): string | null;
32
+ declare function recordFormulaXPerfPoint(name: string): void;
33
+ declare function clearFormulaXPerfMarks(...marks: Array<string | null | undefined>): void;
34
+ declare function preloadFormulaXEditor(): Promise<void>;
35
+ declare function scheduleFormulaXEditorPreload(mode: FormulaXEditorPreloadMode, target?: EventTarget | null): () => void;
36
+ declare function waitForFormulaXAnimationFrame(): Promise<void>;
37
+
38
+ export { type FormulaXEditorMessageKey, type FormulaXEditorOptions, type FormulaXEditorPreloadMode, type MountedFormulaXEditor, clearFormulaXPerfMarks, ensureFormulaXModalStyles, formulaXModalStyles, getFormulaXEditorMessage, markFormulaXPerf, measureFormulaXPerf, mountFormulaXEditor, preloadFormulaXEditor, recordFormulaXPerfPoint, renderFormulaXEditorLoadingState, scheduleFormulaXEditorPreload, waitForFormulaXAnimationFrame };
package/dist/index.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import { FormulaState } from '@formulaxjs/core';
2
+ import { FormulaXLocale, KityEditorAssets } from '@formulaxjs/kity-runtime';
3
+
4
+ interface FormulaXEditorOptions {
5
+ initialLatex?: string;
6
+ height?: number | string;
7
+ autofocus?: boolean;
8
+ locale?: FormulaXLocale;
9
+ assets?: Partial<KityEditorAssets>;
10
+ render?: {
11
+ fontsize?: number;
12
+ };
13
+ }
14
+ interface MountedFormulaXEditor {
15
+ root: HTMLElement;
16
+ getLatex: () => Promise<string>;
17
+ getState: () => Promise<FormulaState>;
18
+ getRenderHtml: () => Promise<string>;
19
+ destroy: () => void;
20
+ }
21
+ declare const formulaXModalStyles = "\n.fx-formula-modal-open {\n overflow: hidden;\n}\n\n.fx-formula-modal-root {\n position: fixed;\n inset: 0;\n z-index: 2147483000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 16px;\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n.fx-formula-modal-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(15, 23, 42, 0.48);\n}\n\n.fx-formula-modal {\n --fx-formula-editor-body-height: 264px;\n --fx-formula-workspace-height: 168px;\n position: relative;\n width: min(920px, calc(100vw - 32px));\n height: auto;\n max-height: none;\n margin: 0 auto;\n background: #fff;\n border-radius: 14px;\n box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);\n display: flex;\n flex-direction: column;\n overflow: visible;\n isolation: isolate;\n}\n\n.fx-formula-modal__header,\n.fx-formula-modal__footer,\n.fx-formula-modal__title,\n.fx-formula-modal__close,\n.fx-formula-modal__button,\n.fx-formula-editor-loading,\n.fx-formula-editor-error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.fx-formula-modal__header {\n min-height: 56px;\n padding: 0 20px;\n border-bottom: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n position: relative;\n z-index: 3;\n background: #fff;\n border-radius: 14px 14px 0 0;\n}\n\n.fx-formula-modal__title {\n font-size: 16px;\n font-weight: 650;\n margin: 0;\n color: #111827;\n}\n\n.fx-formula-modal__close {\n border: 0;\n background: transparent;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n color: #6b7280;\n}\n\n.fx-formula-modal__body {\n flex: 0 0 auto;\n height: var(--fx-formula-editor-body-height);\n padding: 0;\n overflow: visible;\n min-height: var(--fx-formula-editor-body-height);\n position: relative;\n z-index: 2;\n}\n\n.fx-formula-editor-host {\n width: 100%;\n height: var(--fx-formula-editor-body-height);\n min-height: var(--fx-formula-editor-body-height);\n overflow: visible;\n position: relative;\n}\n\n.fx-formula-kity-host {\n width: 100%;\n height: var(--fx-formula-editor-body-height);\n min-height: var(--fx-formula-editor-body-height);\n overflow: visible;\n position: relative;\n}\n\n.fx-formula-kity-host .kf-editor {\n box-sizing: border-box;\n width: 100%;\n height: var(--fx-formula-editor-body-height) !important;\n overflow: visible !important;\n}\n\n.fx-formula-kity-host .kf-editor-toolbar {\n overflow: visible;\n position: relative;\n z-index: 20;\n}\n\n.fx-formula-kity-host .kf-editor-ui-button-mount-point,\n.fx-formula-kity-host .kf-editor-ui-area-mount,\n.fx-formula-kity-host .kf-editor-ui-box,\n.fx-formula-kity-host .kf-editor-ui-list {\n z-index: 1000;\n}\n\n.fx-formula-kity-host .kf-editor-edit-area,\n.fx-formula-kity-host .kf-editor-canvas-container {\n min-height: var(--fx-formula-workspace-height);\n height: var(--fx-formula-workspace-height);\n}\n\n.fx-formula-kity-host .kf-editor-edit-area {\n flex: 0 0 auto;\n overflow: hidden;\n}\n\n.fx-formula-kity-host .kf-editor,\n.fx-formula-kity-host .kf-editor svg text,\n.fx-formula-kity-host .kf-editor-ui-area-item-text,\n.fx-formula-kity-host .kf-editor-ui-box-item-text,\n.fx-formula-kity-host .kf-editor-ui-box-item-val {\n font-family: \"KF AMS MAIN\", \"Cambria Math\", \"Latin Modern Math\", \"Times New Roman\", serif !important;\n}\n\n.fx-formula-kity-host .kf-editor-ui-box-item-content,\n.fx-formula-kity-host .kf-editor-ui-box-item-val {\n min-width: 32px;\n min-height: 32px;\n}\n\n.fx-formula-kity-host .kf-editor-ui-box-item-val svg,\n.fx-formula-kity-host .kf-editor-ui-box-item-val img,\n.fx-formula-kity-host .kf-editor-ui-area-item-img,\n.fx-formula-kity-host .kf-editor-ui-area-item-text {\n display: block;\n}\n\n.fx-formula-editor-loading {\n height: var(--fx-formula-editor-body-height);\n padding: 24px;\n color: #4b5563;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.fx-formula-editor-error {\n padding: 24px;\n color: #dc2626;\n font-size: 14px;\n}\n\n.fx-formula-editor-error pre {\n white-space: pre-wrap;\n word-break: break-all;\n color: #991b1b;\n background: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 8px;\n padding: 12px;\n margin-top: 8px;\n}\n\n.fx-formula-modal__footer {\n min-height: 64px;\n padding: 12px 20px;\n border-top: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background: #fff;\n border-radius: 0 0 14px 14px;\n}\n\n.fx-formula-modal__button {\n appearance: none;\n border: 1px solid #d1d5db;\n background: #fff;\n color: #111827;\n border-radius: 8px;\n padding: 8px 14px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.fx-formula-modal__button--primary {\n border-color: #2563eb;\n background: #2563eb;\n color: #fff;\n}\n";
22
+ declare function ensureFormulaXModalStyles(doc?: Document): void;
23
+ declare function renderFormulaXEditorLoadingState(root: HTMLElement): void;
24
+ declare function mountFormulaXEditor(root: HTMLElement, options?: FormulaXEditorOptions): MountedFormulaXEditor;
25
+
26
+ type FormulaXEditorMessageKey = 'modal.title' | 'modal.insert' | 'modal.update' | 'modal.cancel';
27
+ declare function getFormulaXEditorMessage(key: FormulaXEditorMessageKey, locale?: FormulaXLocale): string;
28
+
29
+ type FormulaXEditorPreloadMode = 'idle' | 'hover' | false;
30
+ declare function markFormulaXPerf(name: string): string | null;
31
+ declare function measureFormulaXPerf(name: string, startMark: string | null, endMark?: string | null): string | null;
32
+ declare function recordFormulaXPerfPoint(name: string): void;
33
+ declare function clearFormulaXPerfMarks(...marks: Array<string | null | undefined>): void;
34
+ declare function preloadFormulaXEditor(): Promise<void>;
35
+ declare function scheduleFormulaXEditorPreload(mode: FormulaXEditorPreloadMode, target?: EventTarget | null): () => void;
36
+ declare function waitForFormulaXAnimationFrame(): Promise<void>;
37
+
38
+ export { type FormulaXEditorMessageKey, type FormulaXEditorOptions, type FormulaXEditorPreloadMode, type MountedFormulaXEditor, clearFormulaXPerfMarks, ensureFormulaXModalStyles, formulaXModalStyles, getFormulaXEditorMessage, markFormulaXPerf, measureFormulaXPerf, mountFormulaXEditor, preloadFormulaXEditor, recordFormulaXPerfPoint, renderFormulaXEditorLoadingState, scheduleFormulaXEditorPreload, waitForFormulaXAnimationFrame };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formulaxjs/editor",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -27,7 +27,7 @@
27
27
  "require": "./dist/index.cjs"
28
28
  }
29
29
  },
30
- "unpkg": "./dist/browser/index.global.js",
30
+ "unpkg": "./dist/index.global.js",
31
31
  "files": [
32
32
  "dist"
33
33
  ],
@@ -35,10 +35,10 @@
35
35
  "access": "public"
36
36
  },
37
37
  "dependencies": {
38
- "@formulaxjs/core": "0.1.0",
39
- "@formulaxjs/renderer": "0.2.0",
40
- "@formulaxjs/renderer-kity": "0.3.0",
41
- "@formulaxjs/kity-runtime": "0.5.0"
38
+ "@formulaxjs/core": "0.1.1",
39
+ "@formulaxjs/renderer": "0.2.1",
40
+ "@formulaxjs/kity-runtime": "0.5.1",
41
+ "@formulaxjs/renderer-kity": "0.3.1"
42
42
  },
43
43
  "scripts": {
44
44
  "build": "tsup --config ../../tsup.config.mjs",