Refactoring package to work with the latest React version

[hophiphip]

Hi, this PR contains some refactoring that makes package compatible with React 18/19.

Changes:

• Updated library and demo app dependencies versions;
• Removed react-scripts (outdated) in demo app in favor of vite/vitest;
• Minor changes in demo app code to make it work with the new React and vite;
• Added proper TypeScript definitions for MathQuill;
• Updated library rollup config to properly bundle type definitions;
• Refactored EquationEditor component from ClassComponent to FunctionComponent;
• Updated EquationEditor component props to support more customization (left previous props for backward compatibility).

UPDATE(1)

• Replaced require("mathquill/build/mathquill") with import in abb8f2688fb321e0c502e6ec7b8b88e6e8c3aa6a as it might break user production build.

[hophiphip]

@V0XNIHILI, I have also removed the default style that hides MathQuill border (default styles: https://github.com/flw0/equation-editor-react/blob/master/src/index.tsx#L95) so that user can have more control over styling.

Is this ok or it would be better to keep the default styles?

[V0XNIHILI]

Hey @hophiphip, thanks a ton for the extensive PR, it looks great! It's been a while since I used TS/React, hence the co-pilot review. Can you confirm that the project runs just as before (ie the Github pages deployment demo should still work)?

Then I will merge with main and push to npm!

[hophiphip]

I have tested demo application in DEV and PROD build, and it was working without any issues. And I have also been using a forked version of this library in my own project and did not encounter any issues.

However, I am not 100% sure about GitHub pages. I did not apply any significant changes to the project configuration and kept application and library scripts in package.json same as before, so it should work just as before. But, current GitHub workflow seems to use an older node version..which might prevent yarn from working properly..

1. Well.. just in case I can try to test if GitHub workflow runs locally (with act);
2. Also, as I mentioned in this comment: https://github.com/flw0/equation-editor-react/pull/88#issuecomment-3179066007. I have removed the default style, so for now EquationEditor has this border (should we keep it?):

[hophiphip]

ok..i have tested whether node 12.x will work with current setup..and it failed

I will look into a possible way of fixing this issue without changing workflow config

[hophiphip]

Ok, I failed to find an adequate way of supporting an older NodeJS version.

The issue is in this line: https://github.com/flw0/equation-editor-react/blob/7dd72547026ccfdad9d747822ca5dc91f7d4845f/.github/workflows/deploy-and-publish.yml#L13

NodeJS 12.x is EOL:

and project dependencies do not support older NodeJS version.

As much as it pains me to say, but for GitHub pages to work properly it is necessary to increment Node JS version:

-node-version: [12.x]
+node-version: [22.x]

[hophiphip]

Changes to the config for GitHub workflow to work properly: https://github.com/hophiphip/equation-editor-react/pull/1/files