Make package work with React 18

demo/package.json

@@ -5,19 +5,19 @@
  "license": "MIT",
  "private": false,
  "dependencies": {
- "@testing-library/jest-dom": "^4.2.4",
- "@testing-library/react": "^9.3.2",
- "@testing-library/user-event": "^7.1.2",
- "@types/jest": "^24.0.0",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.4.3",
+ "@types/jest": "^29.5.0",
  "@types/node": "^12.0.0",
- "@types/react": "^16.9.0",
- "@types/react-dom": "^16.9.0",
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
  "equation-editor-react": "file:./../",
- "node-sass": "^7.0.0",
- "react": "^16.12.0",
- "react-dom": "^16.12.0",
- "react-scripts": "3.4.1",
- "typescript": "~3.7.2"
+ "node-sass": "^8.0.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-scripts": "5.0.1",
+ "typescript": "^5.0.2"
  },
  "sideEffects": false,
  "scripts": {

package.json

@@ -36,33 +36,33 @@
  "src/*"
  ],
  "resolutions": {
- "jest": "24.9.0",
- "babel-jest": "^24.9.0",
- "babel-loader": "8.1.0",
- "webpack": "4.42.0",
- "webpack-dev-server": "3.10.3"
+ "jest": "29.5.0",
+ "babel-jest": "^29.5.0",
+ "babel-loader": "9.1.2",
+ "webpack": "5.76.3",
+ "webpack-dev-server": "4.13.1"
  },
  "dependencies": {
- "jquery": "^3.4.1",
+ "jquery": "^3.6.4",
  "mathquill": "^0.10.1-a"
  },
  "homepage": "https://flw0.github.io/equation-editor-react/",
  "devDependencies": {
- "@types/react": "^16.9.33",
- "react": "^16.13.1",
- "react-dom": "^16.13.1",
+ "@types/react": "^18.0.28",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
  "react-scripts-ts": "^3.1.0",
- "rollup": "^2.3.4",
- "rollup-plugin-commonjs": "^10.1.0",
- "rollup-plugin-node-resolve": "^5.2.0",
- "rollup-plugin-peer-deps-external": "^2.2.2",
- "rollup-plugin-scss": "^2.1.0",
- "rollup-plugin-typescript2": "^0.27.0",
- "typescript": "^3.8.3",
- "@types/jquery": "^3.3.34"
+ "rollup": "^3.20.1",
+ "@rollup/plugin-commonjs": "^24.0.1",
+ "@rollup/plugin-node-resolve": "^15.0.1",
+ "rollup-plugin-peer-deps-external": "^2.2.4",
+ "rollup-plugin-scss": "^4.0.0",
+ "rollup-plugin-typescript2": "^0.34.1",
+ "typescript": "^5.0.2",
+ "@types/jquery": "^3.5.16"
  },
  "peerDependencies": {
- "react": "^16.0.0",
- "react-dom": "^16.0.0"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
  }
 }

rollup.config.js → rollup.config.mjs

@@ -1,9 +1,9 @@
 import typescript from "rollup-plugin-typescript2";
-import commonjs from "rollup-plugin-commonjs";
+import commonjs from "@rollup/plugin-commonjs";
 import external from "rollup-plugin-peer-deps-external";
 import scss from "rollup-plugin-scss";
 
-import pkg from "./package.json";
+import pkg from "./package.json" assert { type: "json" };
 
 export default {
  input: "src/index.tsx",
@@ -26,21 +26,11 @@ export default {
  external(),
  scss(),
  typescript({
- rollupCommonJSResolveHack: true,
  exclude: "**/__tests__/**",
  clean: true,
  }),
  commonjs({
  include: ["node_modules/**"],
- namedExports: {
- "node_modules/react/react.js": [
- "Children",
- "Component",
- "PropTypes",
- "createElement",
- ],
- "node_modules/react-dom/index.js": ["render"],
- },
  }),
  ],
 };

src/index.tsx

@@ -1,17 +1,13 @@
-import React, { Component, createRef } from "react";
+import React, { useEffect, useRef } from "react";
 
-// Import JQuery, required for the functioning of the equation editor
 import $ from "jquery";
 
-// Import the styles from the Mathquill editor
 import "mathquill/build/mathquill.css";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 window.jQuery = $;
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
 require("mathquill/build/mathquill");
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -40,43 +36,31 @@ type EquationEditorProps = {
  * @prop {Function} onEnter Triggered when enter is pressed in the equation editor
  * @extends {Component<EquationEditorProps>}
  */
-class EquationEditor extends Component<EquationEditorProps> {
- element: any;
- mathField: any;
- ignoreEditEvents: number;
-
- // Element needs to be in the class format and thus requires a constructor. The steps that are run
- // in the constructor is to make sure that React can succesfully communicate with the equation
- // editor.
- constructor(props: EquationEditorProps) {
- super(props);
-
- this.element = createRef();
- this.mathField = null;
-
- // MathJax apparently fire 2 edit events on startup.
- this.ignoreEditEvents = 2;
- }
-
- componentDidMount() {
- const {
- onChange,
- value,
- spaceBehavesLikeTab,
- autoCommands,
- autoOperatorNames,
- onEnter,
- } = this.props;
+const EquationEditor: React.FC<EquationEditorProps> = ({
+ onChange,
+ value,
+ spaceBehavesLikeTab,
+ autoCommands,
+ autoOperatorNames,
+ onEnter,
+}) => {
+ const element = useRef(null);
+ // @ts-ignore
+ let mathField = null;
+ let ignoreEditEvents = 2; // MathJax apparently fire 2 edit events on startup.
 
+ useEffect(() => {
  const config = {
  handlers: {
  edit: () => {
- if (this.ignoreEditEvents > 0) {
- this.ignoreEditEvents -= 1;
+ if (ignoreEditEvents > 0) {
+ ignoreEditEvents -= 1;
  return;
  }
- if (this.mathField.latex() !== value) {
- onChange(this.mathField.latex());
+ // @ts-ignore
+ if (mathField.latex() !== value) {
+ // @ts-ignore
+ onChange(mathField.latex());
  }
  },
  enter: onEnter,
@@ -86,15 +70,13 @@ class EquationEditor extends Component<EquationEditorProps> {
  autoOperatorNames,
  };
 
- this.mathField = mathQuill.MathField(this.element.current, config);
- this.mathField.latex(value || "");
- }
+ mathField = mathQuill.MathField(element.current, config);
+ mathField.latex(value || "");
+ });
 
- render() {
- return (
- <span ref={this.element} style={{ border: "0px", boxShadow: "None" }} />
- );
- }
+ return (
+ <span ref={element} style={{ border: "0px", boxShadow: "None" }} />
+ );
 }
 
 export default EquationEditor;

tsconfig.json

@@ -16,7 +16,6 @@
  "noImplicitAny": true,
  "strict": true,
  "strictNullChecks": true,
- "suppressImplicitAnyIndexErrors": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true
  },