@lofcz/platejs-math 52.0.11
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.
- package/LICENSE +24 -0
- package/README.md +11 -0
- package/dist/BaseInlineEquationPlugin-1MXNHk1G.js +46 -0
- package/dist/BaseInlineEquationPlugin-1MXNHk1G.js.map +1 -0
- package/dist/index.d.ts +27 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -0
- package/dist/react/index.d.ts +43 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/index.js +95 -0
- package/dist/react/index.js.map +1 -0
- package/package.json +60 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) Ziad Beyens, Dylan Schiemann, Joe Anderson, Felix Feng
|
|
4
|
+
|
|
5
|
+
Unless otherwise specified in a LICENSE file within an individual package directory,
|
|
6
|
+
this license applies to all files in this repository outside of those package directories.
|
|
7
|
+
|
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
9
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
10
|
+
in the Software without restriction, including without limitation the rights
|
|
11
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
12
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
13
|
+
furnished to do so, subject to the following conditions:
|
|
14
|
+
|
|
15
|
+
The above copyright notice and this permission notice shall be included in
|
|
16
|
+
all copies or substantial portions of the Software.
|
|
17
|
+
|
|
18
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
19
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
20
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
21
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
22
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
23
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
24
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { KEYS, bindFirst, createSlatePlugin } from "platejs";
|
|
2
|
+
import "katex/dist/katex.min.css";
|
|
3
|
+
|
|
4
|
+
//#region src/lib/transforms/insertEquation.ts
|
|
5
|
+
const insertEquation = (editor, options) => {
|
|
6
|
+
editor.tf.insertNodes({
|
|
7
|
+
children: [{ text: "" }],
|
|
8
|
+
texExpression: "",
|
|
9
|
+
type: editor.getType(KEYS.equation)
|
|
10
|
+
}, options);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
//#endregion
|
|
14
|
+
//#region src/lib/transforms/insertInlineEquation.ts
|
|
15
|
+
const insertInlineEquation = (editor, texExpression, options) => {
|
|
16
|
+
editor.tf.insertNodes({
|
|
17
|
+
children: [{ text: "" }],
|
|
18
|
+
texExpression: texExpression ?? editor.api.string(editor.selection),
|
|
19
|
+
type: editor.getType(KEYS.inlineEquation)
|
|
20
|
+
}, options);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
//#region src/lib/BaseEquationPlugin.ts
|
|
25
|
+
const BaseEquationPlugin = createSlatePlugin({
|
|
26
|
+
key: KEYS.equation,
|
|
27
|
+
node: {
|
|
28
|
+
isElement: true,
|
|
29
|
+
isVoid: true
|
|
30
|
+
}
|
|
31
|
+
}).extendEditorTransforms(({ editor }) => ({ insert: { equation: bindFirst(insertEquation, editor) } }));
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/lib/BaseInlineEquationPlugin.ts
|
|
35
|
+
const BaseInlineEquationPlugin = createSlatePlugin({
|
|
36
|
+
key: KEYS.inlineEquation,
|
|
37
|
+
node: {
|
|
38
|
+
isElement: true,
|
|
39
|
+
isInline: true,
|
|
40
|
+
isVoid: true
|
|
41
|
+
}
|
|
42
|
+
}).extendEditorTransforms(({ editor }) => ({ insert: { inlineEquation: bindFirst(insertInlineEquation, editor) } }));
|
|
43
|
+
|
|
44
|
+
//#endregion
|
|
45
|
+
export { insertEquation as i, BaseEquationPlugin as n, insertInlineEquation as r, BaseInlineEquationPlugin as t };
|
|
46
|
+
//# sourceMappingURL=BaseInlineEquationPlugin-1MXNHk1G.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseInlineEquationPlugin-1MXNHk1G.js","names":["InsertNodesOptions","SlateEditor","TEquationElement","KEYS","insertEquation","editor","options","tf","insertNodes","children","text","texExpression","type","getType","equation","InsertNodesOptions","SlateEditor","TEquationElement","KEYS","insertInlineEquation","editor","texExpression","options","tf","insertNodes","children","text","api","string","selection","type","getType","inlineEquation","bindFirst","createSlatePlugin","KEYS","insertEquation","BaseEquationPlugin","key","equation","node","isElement","isVoid","extendEditorTransforms","editor","insert","bindFirst","createSlatePlugin","KEYS","insertInlineEquation","BaseInlineEquationPlugin","key","inlineEquation","node","isElement","isInline","isVoid","extendEditorTransforms","editor","insert"],"sources":["../src/lib/transforms/insertEquation.ts","../src/lib/transforms/insertInlineEquation.ts","../src/lib/BaseEquationPlugin.ts","../src/lib/BaseInlineEquationPlugin.ts"],"sourcesContent":["import type {\n InsertNodesOptions,\n SlateEditor,\n TEquationElement,\n} from 'platejs';\n\nimport { KEYS } from 'platejs';\n\nexport const insertEquation = (\n editor: SlateEditor,\n options?: InsertNodesOptions\n) => {\n editor.tf.insertNodes<TEquationElement>(\n {\n children: [{ text: '' }],\n texExpression: '',\n type: editor.getType(KEYS.equation),\n },\n options as any\n );\n};\n","import type {\n InsertNodesOptions,\n SlateEditor,\n TEquationElement,\n} from 'platejs';\n\nimport { KEYS } from 'platejs';\n\nexport const insertInlineEquation = (\n editor: SlateEditor,\n texExpression?: string,\n options?: InsertNodesOptions\n) => {\n editor.tf.insertNodes<TEquationElement>(\n {\n children: [{ text: '' }],\n texExpression: texExpression ?? editor.api.string(editor.selection),\n type: editor.getType(KEYS.inlineEquation),\n },\n options as any\n );\n};\n","import { bindFirst, createSlatePlugin, KEYS } from 'platejs';\n\nimport { insertEquation } from './transforms';\n\nimport 'katex/dist/katex.min.css';\n\nexport const BaseEquationPlugin = createSlatePlugin({\n key: KEYS.equation,\n node: { isElement: true, isVoid: true },\n}).extendEditorTransforms(({ editor }) => ({\n insert: {\n equation: bindFirst(insertEquation, editor),\n },\n}));\n","import { bindFirst, createSlatePlugin, KEYS } from 'platejs';\n\nimport { insertInlineEquation } from './transforms';\n\nexport const BaseInlineEquationPlugin = createSlatePlugin({\n key: KEYS.inlineEquation,\n node: { isElement: true, isInline: true, isVoid: true },\n}).extendEditorTransforms(({ editor }) => ({\n insert: {\n inlineEquation: bindFirst(insertInlineEquation, editor),\n },\n}));\n"],"mappings":";;;;AAQA,MAAaI,kBACXC,QACAC,YACG;AACHD,QAAOE,GAAGC,YACR;EACEC,UAAU,CAAC,EAAEC,MAAM,IAAI,CAAC;EACxBC,eAAe;EACfC,MAAMP,OAAOQ,QAAQV,KAAKW,SAAQ;EACnC,EACDR,QACD;;;;;ACXH,MAAaa,wBACXC,QACAC,eACAC,YACG;AACHF,QAAOG,GAAGC,YACR;EACEC,UAAU,CAAC,EAAEC,MAAM,IAAI,CAAC;EACxBL,eAAeA,iBAAiBD,OAAOO,IAAIC,OAAOR,OAAOS,UAAU;EACnEC,MAAMV,OAAOW,QAAQb,KAAKc,eAAc;EACzC,EACDV,QACD;;;;;ACdH,MAAae,qBAAqBH,kBAAkB;CAClDI,KAAKH,KAAKI;CACVC,MAAM;EAAEC,WAAW;EAAMC,QAAQ;EAAK;CACvC,CAAC,CAACC,wBAAwB,EAAEC,cAAc,EACzCC,QAAQ,EACNN,UAAUN,UAAUG,gBAAgBQ,OAAM,EAC5C,EACD,EAAE;;;;ACTH,MAAaM,2BAA2BH,kBAAkB;CACxDI,KAAKH,KAAKI;CACVC,MAAM;EAAEC,WAAW;EAAMC,UAAU;EAAMC,QAAQ;EAAK;CACvD,CAAC,CAACC,wBAAwB,EAAEC,cAAc,EACzCC,QAAQ,EACNP,gBAAgBN,UAAUG,sBAAsBS,OAAM,EACxD,EACD,EAAE"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { InsertNodesOptions, SlateEditor, TEquationElement } from "platejs";
|
|
2
|
+
import "katex/dist/katex.min.css";
|
|
3
|
+
import { KatexOptions } from "katex";
|
|
4
|
+
|
|
5
|
+
//#region src/lib/BaseEquationPlugin.d.ts
|
|
6
|
+
declare const BaseEquationPlugin: any;
|
|
7
|
+
//#endregion
|
|
8
|
+
//#region src/lib/BaseInlineEquationPlugin.d.ts
|
|
9
|
+
declare const BaseInlineEquationPlugin: any;
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/lib/transforms/insertEquation.d.ts
|
|
12
|
+
declare const insertEquation: (editor: SlateEditor, options?: InsertNodesOptions) => void;
|
|
13
|
+
//#endregion
|
|
14
|
+
//#region src/lib/transforms/insertInlineEquation.d.ts
|
|
15
|
+
declare const insertInlineEquation: (editor: SlateEditor, texExpression?: string, options?: InsertNodesOptions) => void;
|
|
16
|
+
//#endregion
|
|
17
|
+
//#region src/lib/utils/getEquationHtml.d.ts
|
|
18
|
+
declare const getEquationHtml: ({
|
|
19
|
+
element,
|
|
20
|
+
options
|
|
21
|
+
}: {
|
|
22
|
+
element: TEquationElement;
|
|
23
|
+
options?: KatexOptions;
|
|
24
|
+
}) => string;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { BaseEquationPlugin, BaseInlineEquationPlugin, getEquationHtml, insertEquation, insertInlineEquation };
|
|
27
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib/BaseEquationPlugin.ts","../src/lib/BaseInlineEquationPlugin.ts","../src/lib/transforms/insertEquation.ts","../src/lib/transforms/insertInlineEquation.ts","../src/lib/utils/getEquationHtml.ts"],"sourcesContent":[],"mappings":";;;;;cAMa;;;cCFA;;;cCIA,yBACH,uBACE;;;cCFC,+BACH,+CAEE;;;cCPC;;;AJEb;WIEW;YACC;AJHZ,CAAA,EAAA,GAAa,MAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { i as insertEquation, n as BaseEquationPlugin, r as insertInlineEquation, t as BaseInlineEquationPlugin } from "./BaseInlineEquationPlugin-1MXNHk1G.js";
|
|
2
|
+
import katex from "katex";
|
|
3
|
+
|
|
4
|
+
//#region src/lib/utils/getEquationHtml.ts
|
|
5
|
+
const getEquationHtml = ({ element, options }) => katex.renderToString(element.texExpression, options);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
export { BaseEquationPlugin, BaseInlineEquationPlugin, getEquationHtml, insertEquation, insertInlineEquation };
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["TEquationElement","katex","KatexOptions","getEquationHtml","element","options","renderToString","texExpression"],"sources":["../src/lib/utils/getEquationHtml.ts"],"sourcesContent":["import type { TEquationElement } from 'platejs';\n\nimport katex, { type KatexOptions } from 'katex';\n\nexport const getEquationHtml = ({\n element,\n options,\n}: {\n element: TEquationElement;\n options?: KatexOptions;\n}) => katex.renderToString(element.texExpression, options);\n"],"mappings":";;;;AAIA,MAAaG,mBAAmB,EAC9BC,SACAC,cAIIJ,MAAMK,eAAeF,QAAQG,eAAeF,QAAQ"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { TEquationElement } from "platejs";
|
|
2
|
+
import { KatexOptions } from "katex";
|
|
3
|
+
import React from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/react/EquationPlugin.d.ts
|
|
6
|
+
declare const EquationPlugin: any;
|
|
7
|
+
//#endregion
|
|
8
|
+
//#region src/react/InlineEquationPlugin.d.ts
|
|
9
|
+
declare const InlineEquationPlugin: any;
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/react/hooks/useEquationElement.d.ts
|
|
12
|
+
declare const useEquationElement: ({
|
|
13
|
+
element,
|
|
14
|
+
katexRef,
|
|
15
|
+
options
|
|
16
|
+
}: {
|
|
17
|
+
element: TEquationElement;
|
|
18
|
+
katexRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
19
|
+
options?: KatexOptions;
|
|
20
|
+
}) => void;
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/react/hooks/useEquationInput.d.ts
|
|
23
|
+
declare const useEquationInput: ({
|
|
24
|
+
isInline,
|
|
25
|
+
open,
|
|
26
|
+
onClose
|
|
27
|
+
}: {
|
|
28
|
+
isInline?: boolean;
|
|
29
|
+
open?: boolean;
|
|
30
|
+
onClose?: () => void;
|
|
31
|
+
}) => {
|
|
32
|
+
props: {
|
|
33
|
+
value: string;
|
|
34
|
+
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
35
|
+
onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
36
|
+
};
|
|
37
|
+
ref: React.RefObject<HTMLTextAreaElement | null>;
|
|
38
|
+
onDismiss: () => void;
|
|
39
|
+
onSubmit: () => void;
|
|
40
|
+
};
|
|
41
|
+
//#endregion
|
|
42
|
+
export { EquationPlugin, InlineEquationPlugin, useEquationElement, useEquationInput };
|
|
43
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/react/EquationPlugin.tsx","../../src/react/InlineEquationPlugin.tsx","../../src/react/hooks/useEquationElement.ts","../../src/react/hooks/useEquationInput.ts"],"sourcesContent":[],"mappings":";;;;;cAIa;;;cCAA;;;cCEA;;;;;WAKF;EFPE,QAAA,EEQD,KAAA,CAAM,gBFR6C,CEQ5B,cFR4B,GAAA,IAAA,CAAA;YESnD;;;;cCRC;;;;AHDb;;;;AAAA,CAAA,EAAA,GAAa;;;kBG6EO,KAAA,CAAM,YAAY;IF7EzB,SAAA,EAAA,CAAA,CAAA,EEgFQ,KAAA,CAAM,aFhFgD,CEgFlC,mBFhFkC,CAAA,EAAA,GAAA,IAAA;;;;ECE9D,QAAA,EAAA,GAAA,GAAA,IAAA;CAAsB"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { n as BaseEquationPlugin, t as BaseInlineEquationPlugin } from "../BaseInlineEquationPlugin-1MXNHk1G.js";
|
|
2
|
+
import { isHotkey } from "platejs";
|
|
3
|
+
import katex from "katex";
|
|
4
|
+
import { toPlatePlugin, useEditorRef, useElement } from "platejs/react";
|
|
5
|
+
import React, { useEffect, useRef } from "react";
|
|
6
|
+
|
|
7
|
+
//#region src/react/EquationPlugin.tsx
|
|
8
|
+
const EquationPlugin = toPlatePlugin(BaseEquationPlugin);
|
|
9
|
+
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/react/InlineEquationPlugin.tsx
|
|
12
|
+
const InlineEquationPlugin = toPlatePlugin(BaseInlineEquationPlugin);
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/react/hooks/useEquationElement.ts
|
|
16
|
+
const useEquationElement = ({ element, katexRef, options }) => {
|
|
17
|
+
React.useEffect(() => {
|
|
18
|
+
if (!katexRef.current) return;
|
|
19
|
+
katex.render(element.texExpression, katexRef.current, options);
|
|
20
|
+
}, [element.texExpression]);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
//#region src/react/hooks/useEquationInput.ts
|
|
25
|
+
const useEquationInput = ({ isInline, open, onClose }) => {
|
|
26
|
+
const editor = useEditorRef();
|
|
27
|
+
const element = useElement();
|
|
28
|
+
const inputRef = useRef(null);
|
|
29
|
+
const [expressionInput, setExpressionInput] = React.useState(element.texExpression);
|
|
30
|
+
const initialExpressionRef = useRef(element.texExpression);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (open) setTimeout(() => {
|
|
33
|
+
if (inputRef.current) {
|
|
34
|
+
inputRef.current.focus();
|
|
35
|
+
inputRef.current.select();
|
|
36
|
+
if (isInline) initialExpressionRef.current = element.texExpression;
|
|
37
|
+
}
|
|
38
|
+
}, 0);
|
|
39
|
+
}, [open]);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
const setExpression = () => {
|
|
42
|
+
editor.tf.setNodes({ texExpression: expressionInput || "" }, { at: element });
|
|
43
|
+
};
|
|
44
|
+
if (isInline) editor.tf.withMerging(setExpression);
|
|
45
|
+
else setExpression();
|
|
46
|
+
}, [expressionInput]);
|
|
47
|
+
const onSubmit = () => {
|
|
48
|
+
onClose?.();
|
|
49
|
+
};
|
|
50
|
+
const onDismiss = () => {
|
|
51
|
+
if (isInline) editor.tf.setNodes({ texExpression: initialExpressionRef.current }, { at: element });
|
|
52
|
+
onClose?.();
|
|
53
|
+
};
|
|
54
|
+
return {
|
|
55
|
+
props: {
|
|
56
|
+
value: expressionInput,
|
|
57
|
+
onChange: (e) => {
|
|
58
|
+
setExpressionInput(e.target.value);
|
|
59
|
+
},
|
|
60
|
+
onKeyDown: (e) => {
|
|
61
|
+
if (isHotkey("enter")(e)) {
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
onSubmit();
|
|
64
|
+
} else if (isHotkey("escape")(e)) {
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
onDismiss();
|
|
67
|
+
}
|
|
68
|
+
if (isInline) {
|
|
69
|
+
const { selectionEnd, selectionStart, value } = e.target;
|
|
70
|
+
if (selectionStart === 0 && selectionEnd === 0 && isHotkey("ArrowLeft")(e)) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
editor.tf.select(element, {
|
|
73
|
+
focus: true,
|
|
74
|
+
previous: true
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
if (selectionEnd === value.length && selectionStart === value.length && isHotkey("ArrowRight")(e)) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
editor.tf.select(element, {
|
|
80
|
+
focus: true,
|
|
81
|
+
next: true
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
ref: inputRef,
|
|
88
|
+
onDismiss,
|
|
89
|
+
onSubmit
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
//#endregion
|
|
94
|
+
export { EquationPlugin, InlineEquationPlugin, useEquationElement, useEquationInput };
|
|
95
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["toPlatePlugin","BaseEquationPlugin","EquationPlugin","toPlatePlugin","BaseInlineEquationPlugin","InlineEquationPlugin","React","TEquationElement","katex","KatexOptions","useEquationElement","element","katexRef","options","MutableRefObject","HTMLDivElement","useEffect","current","render","texExpression","React","useEffect","useRef","TEquationElement","isHotkey","useEditorRef","useElement","useEquationInput","isInline","open","onClose","editor","element","inputRef","HTMLTextAreaElement","expressionInput","setExpressionInput","useState","texExpression","initialExpressionRef","setTimeout","current","focus","select","setExpression","tf","setNodes","at","withMerging","onSubmit","onDismiss","props","value","onChange","e","ChangeEvent","target","onKeyDown","KeyboardEvent","preventDefault","selectionEnd","selectionStart","HTMLInputElement","previous","length","next","ref"],"sources":["../../src/react/EquationPlugin.tsx","../../src/react/InlineEquationPlugin.tsx","../../src/react/hooks/useEquationElement.ts","../../src/react/hooks/useEquationInput.ts"],"sourcesContent":["import { toPlatePlugin } from 'platejs/react';\n\nimport { BaseEquationPlugin } from '../lib';\n\nexport const EquationPlugin = toPlatePlugin(BaseEquationPlugin);\n","import { toPlatePlugin } from 'platejs/react';\n\nimport { BaseInlineEquationPlugin } from '../lib';\n\nexport const InlineEquationPlugin = toPlatePlugin(BaseInlineEquationPlugin);\n","import React from 'react';\n\nimport type { TEquationElement } from 'platejs';\n\nimport katex, { type KatexOptions } from 'katex';\n\nexport const useEquationElement = ({\n element,\n katexRef,\n options,\n}: {\n element: TEquationElement;\n katexRef: React.MutableRefObject<HTMLDivElement | null>;\n options?: KatexOptions;\n}) => {\n React.useEffect(() => {\n if (!katexRef.current) return;\n\n katex.render(element.texExpression, katexRef.current, options);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [element.texExpression]);\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport { type TEquationElement, isHotkey } from 'platejs';\nimport { useEditorRef, useElement } from 'platejs/react';\n\nexport const useEquationInput = ({\n isInline,\n open,\n onClose,\n}: {\n isInline?: boolean;\n open?: boolean;\n onClose?: () => void;\n}) => {\n const editor = useEditorRef();\n const element = useElement<TEquationElement>();\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const [expressionInput, setExpressionInput] = React.useState<string>(\n element.texExpression\n );\n\n const initialExpressionRef = useRef<string>(element.texExpression);\n\n useEffect(() => {\n if (open) {\n setTimeout(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n inputRef.current.select();\n\n if (isInline) {\n initialExpressionRef.current = element.texExpression;\n }\n }\n }, 0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n useEffect(() => {\n const setExpression = () => {\n editor.tf.setNodes<TEquationElement>(\n {\n texExpression: expressionInput || '',\n },\n { at: element }\n );\n };\n // When the cursor is inside an inline equation, the popover needs to open.\n // However, during an undo operation, the cursor focuses on the inline equation, triggering the popover to open, which disrupts the normal undo process.\n // So we need to remove the inline equation focus in one times undo.\n // block equation will not block the undo process because it will not open the popover by focus.\n // The disadvantage of this approach for block equation is that the popover cannot be opened using the keyboard.\n if (isInline) {\n editor.tf.withMerging(setExpression);\n } else {\n setExpression();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [expressionInput]);\n\n const onSubmit = () => {\n onClose?.();\n };\n\n const onDismiss = () => {\n if (isInline) {\n editor.tf.setNodes(\n {\n texExpression: initialExpressionRef.current,\n },\n { at: element }\n );\n }\n\n onClose?.();\n };\n\n return {\n props: {\n value: expressionInput,\n onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setExpressionInput(e.target.value);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (isHotkey('enter')(e)) {\n e.preventDefault();\n onSubmit();\n } else if (isHotkey('escape')(e)) {\n e.preventDefault();\n onDismiss();\n }\n if (isInline) {\n const { selectionEnd, selectionStart, value } =\n e.target as HTMLInputElement;\n\n // at the left edge\n if (\n selectionStart === 0 &&\n selectionEnd === 0 &&\n isHotkey('ArrowLeft')(e)\n ) {\n e.preventDefault();\n editor.tf.select(element, {\n focus: true,\n previous: true,\n });\n }\n // at the right edge\n if (\n selectionEnd === value.length &&\n selectionStart === value.length &&\n isHotkey('ArrowRight')(e)\n ) {\n e.preventDefault();\n editor.tf.select(element, {\n focus: true,\n next: true,\n });\n }\n }\n },\n },\n ref: inputRef,\n onDismiss,\n onSubmit,\n };\n};\n"],"mappings":";;;;;;;AAIA,MAAaE,iBAAiBF,cAAcC,mBAAmB;;;;ACA/D,MAAaI,uBAAuBF,cAAcC,yBAAyB;;;;ACE3E,MAAaM,sBAAsB,EACjCC,SACAC,UACAC,cAKI;AACJP,OAAMU,gBAAgB;AACpB,MAAI,CAACJ,SAASK,QAAS;AAEvBT,QAAMU,OAAOP,QAAQQ,eAAeP,SAASK,SAASJ,QAAQ;IAE7D,CAACF,QAAQQ,cAAc,CAAC;;;;;ACf7B,MAAaQ,oBAAoB,EAC/BC,UACAC,MACAC,cAKI;CACJ,MAAMC,SAASN,cAAc;CAC7B,MAAMO,UAAUN,YAA8B;CAC9C,MAAMO,WAAWX,OAA4B,KAAK;CAClD,MAAM,CAACa,iBAAiBC,sBAAsBhB,MAAMiB,SAClDL,QAAQM,cACT;CAED,MAAMC,uBAAuBjB,OAAeU,QAAQM,cAAc;AAElEjB,iBAAgB;AACd,MAAIQ,KACFW,kBAAiB;AACf,OAAIP,SAASQ,SAAS;AACpBR,aAASQ,QAAQC,OAAO;AACxBT,aAASQ,QAAQE,QAAQ;AAEzB,QAAIf,SACFW,sBAAqBE,UAAUT,QAAQM;;KAG1C,EAAE;IAGN,CAACT,KAAK,CAAC;AAEVR,iBAAgB;EACd,MAAMuB,sBAAsB;AAC1Bb,UAAOc,GAAGC,SACR,EACER,eAAeH,mBAAmB,IACnC,EACD,EAAEY,IAAIf,SACR,CAAC;;AAOH,MAAIJ,SACFG,QAAOc,GAAGG,YAAYJ,cAAc;MAEpCA,gBAAe;IAGhB,CAACT,gBAAgB,CAAC;CAErB,MAAMc,iBAAiB;AACrBnB,aAAW;;CAGb,MAAMoB,kBAAkB;AACtB,MAAItB,SACFG,QAAOc,GAAGC,SACR,EACER,eAAeC,qBAAqBE,SACrC,EACD,EAAEM,IAAIf,SACR,CAAC;AAGHF,aAAW;;AAGb,QAAO;EACLqB,OAAO;GACLC,OAAOjB;GACPkB,WAAWC,MAA8C;AACvDlB,uBAAmBkB,EAAEE,OAAOJ,MAAM;;GAEpCK,YAAYH,MAAgD;AAC1D,QAAI9B,SAAS,QAAQ,CAAC8B,EAAE,EAAE;AACxBA,OAAEK,gBAAgB;AAClBV,eAAU;eACDzB,SAAS,SAAS,CAAC8B,EAAE,EAAE;AAChCA,OAAEK,gBAAgB;AAClBT,gBAAW;;AAEb,QAAItB,UAAU;KACZ,MAAM,EAAEgC,cAAcC,gBAAgBT,UACpCE,EAAEE;AAGJ,SACEK,mBAAmB,KACnBD,iBAAiB,KACjBpC,SAAS,YAAY,CAAC8B,EAAE,EACxB;AACAA,QAAEK,gBAAgB;AAClB5B,aAAOc,GAAGF,OAAOX,SAAS;OACxBU,OAAO;OACPqB,UAAU;OACX,CAAC;;AAGJ,SACEH,iBAAiBR,MAAMY,UACvBH,mBAAmBT,MAAMY,UACzBxC,SAAS,aAAa,CAAC8B,EAAE,EACzB;AACAA,QAAEK,gBAAgB;AAClB5B,aAAOc,GAAGF,OAAOX,SAAS;OACxBU,OAAO;OACPuB,MAAM;OACP,CAAC;;;;GAIT;EACDC,KAAKjC;EACLiB;EACAD;EACD"}
|
package/package.json
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lofcz/platejs-math",
|
|
3
|
+
"version": "52.0.11",
|
|
4
|
+
"description": "Math plugin for Plate",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"plate",
|
|
7
|
+
"plugin",
|
|
8
|
+
"slate"
|
|
9
|
+
],
|
|
10
|
+
"homepage": "https://platejs.org",
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/udecode/plate/issues"
|
|
13
|
+
},
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/lofcz/plate.git",
|
|
17
|
+
"directory": "packages/math"
|
|
18
|
+
},
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"exports": {
|
|
22
|
+
".": "./dist/index.js",
|
|
23
|
+
"./react": "./dist/react/index.js",
|
|
24
|
+
"./package.json": "./package.json"
|
|
25
|
+
},
|
|
26
|
+
"main": "./dist/index.js",
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"files": [
|
|
29
|
+
"dist/**/*"
|
|
30
|
+
],
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"katex": "0.16.22",
|
|
33
|
+
"react-compiler-runtime": "^1.0.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@types/katex": "0.16.7",
|
|
37
|
+
"@plate/scripts": "1.0.0"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"platejs": ">=52.0.11",
|
|
41
|
+
"react": ">=18.0.0",
|
|
42
|
+
"react-dom": ">=18.0.0"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public"
|
|
46
|
+
},
|
|
47
|
+
"type": "module",
|
|
48
|
+
"module": "./dist/index.js",
|
|
49
|
+
"scripts": {
|
|
50
|
+
"brl": "plate-pkg p:brl",
|
|
51
|
+
"build": "plate-pkg p:build",
|
|
52
|
+
"build:watch": "plate-pkg p:build:watch",
|
|
53
|
+
"clean": "plate-pkg p:clean",
|
|
54
|
+
"lint": "plate-pkg p:lint",
|
|
55
|
+
"lint:fix": "plate-pkg p:lint:fix",
|
|
56
|
+
"test": "plate-pkg p:test",
|
|
57
|
+
"test:watch": "plate-pkg p:test:watch",
|
|
58
|
+
"typecheck": "plate-pkg p:typecheck"
|
|
59
|
+
}
|
|
60
|
+
}
|