{
57 | private insertElement: HTMLElement | null = null;
58 | private readonly combinedConfiguration = combineConfig(this.props);
59 | private mathfield: Mathlive.Mathfield | undefined;
60 |
61 | componentDidUpdate(prevProps: Props) {
62 | if (!this.mathfield) {
63 | throw new Error("Component was not correctly initialized.");
64 | }
65 | if (prevProps.latex !== undefined) {
66 | if (this.props.latex === undefined) {
67 | throw new Error(
68 | "Cannot change from controlled to uncontrolled state!"
69 | );
70 | }
71 | if (this.props.latex !== prevProps.latex) {
72 | if (this.props.latex === "") {
73 | this.mathfield.$perform("deleteAll");
74 | } else {
75 | this.mathfield.$latex(this.props.latex, {
76 | suppressChangeNotifications: true,
77 | });
78 | }
79 | }
80 | }
81 | }
82 |
83 | render() {
84 | return (this.insertElement = instance)} />;
85 | }
86 |
87 | componentDidMount() {
88 | if (!this.insertElement) {
89 | throw new Error(
90 | "React did apparently not mount the insert point correctly."
91 | );
92 | }
93 |
94 | const initialValue = this.props.initialLatex ?? this.props.latex;
95 |
96 | this.mathfield = Mathlive.makeMathField(
97 | this.insertElement,
98 | this.combinedConfiguration
99 | );
100 | this.mathfield.$latex(initialValue, {
101 | suppressChangeNotifications: true,
102 | });
103 |
104 | if (this.props.mathfieldRef) {
105 | this.props.mathfieldRef(this.mathfield);
106 | }
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { MathfieldComponent, Props as MathfieldComponentProps } from './MathfieldComponent';
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist",
4 | "target": "es5",
5 | "lib": [ "dom", "dom.iterable", "esnext" ],
6 | "module": "commonjs",
7 | "allowJs": false,
8 | "noImplicitAny": true,
9 | "strict": true,
10 | "declaration": true,
11 | "sourceMap": true,
12 | "esModuleInterop": true,
13 | "jsx": "react",
14 | "typeRoots": [
15 | "index.d.ts",
16 | "node_modules/@types"
17 | ]
18 | },
19 | "include": [
20 | "src/**/*.tsx",
21 | "src/**/*.ts"
22 | ],
23 | "exclude": [
24 | "node_modules",
25 | "dist",
26 | "examples",
27 | "**/*.test.ts",
28 | "**/*.test.tsx"
29 | ]
30 | }
--------------------------------------------------------------------------------