Refactoring package to work with the latest React version by hophiphip · Pull Request #88 · flw0/equation-editor-react

hophiphip · 2025-08-03T16:05:55Z

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 abb8f26 as it might break user production build.

…in favor of `vite`

…dow global

…tch dependency & refactored imports

Copilot

Pull Request Overview

This PR modernizes the equation editor package to support React 18/19 by refactoring core components and updating the build system. The changes replace the legacy class-based EquationEditor with a functional component implementation while maintaining backward compatibility.

Refactored EquationEditor from ClassComponent to FunctionComponent with hooks
Added comprehensive TypeScript definitions for MathQuill library
Updated build system from react-scripts to Vite and upgraded Rollup configuration

Reviewed Changes

Copilot reviewed 19 out of 24 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/types.ts	Added comprehensive TypeScript definitions for MathQuill v1 and v3 APIs
src/mathquill.ts	Created module for importing MathQuill build with TypeScript ignore
src/jquery.ts	Extracted jQuery setup into separate module
src/index.tsx	Refactored EquationEditor from class to functional component with hooks
rollup.config.js	Updated build configuration with modern plugins and TypeScript support
package.json	Upgraded dependencies to support React 18/19 and modern tooling
demo/*	Migrated demo app from react-scripts to Vite with updated dependencies

Copilot · 2025-08-12T10:53:44Z

src/mathquill.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore


The @typescript-eslint/ban-ts-ignore rule is deprecated. Use @typescript-eslint/ban-ts-comment instead.

Suggested change

// eslint-disable-next-line @typescript-eslint/ban-ts-ignore

// eslint-disable-next-line @typescript-eslint/ban-ts-comment

Fixed in: 3d07bd7

Copilot · 2025-08-12T10:53:45Z

src/jquery.ts

+// Import JQuery, required for the functioning of the equation editor
+import jQuery from "jquery";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore


The @typescript-eslint/ban-ts-ignore rule is deprecated. Use @typescript-eslint/ban-ts-comment instead.

Suggested change

// eslint-disable-next-line @typescript-eslint/ban-ts-ignore

// eslint-disable-next-line @typescript-eslint/ban-ts-comment

Fixed in: e0309a3

Copilot · 2025-08-12T10:53:45Z

src/index.tsx

  }
 }

+function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {


[nitpick] Using 'any' type reduces type safety. Consider using a more specific type or 'unknown' if the type is truly dynamic.

Suggested change

function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {

function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {

Fixed in: aa1f0c2

hophiphip · 2025-08-12T12:13:28Z

@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 · 2025-08-12T14:41:56Z

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 · 2025-08-12T15:17:48Z

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..

Well.. just in case I can try to test if GitHub workflow runs locally (with act);
Also, as I mentioned in this comment: Refactoring package to work with the latest React version #88 (comment). I have removed the default style, so for now EquationEditor has this border (should we keep it?):

hophiphip · 2025-08-12T15:24:24Z

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 · 2025-08-12T15:41:29Z

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

The issue is in this line:

equation-editor-react/.github/workflows/deploy-and-publish.yml

Line 13 in 7dd7254

node-version: [12.x]

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 · 2025-08-12T17:31:50Z

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

hophiphip added 12 commits August 3, 2025 16:56

chore: bump library dependencies versions

cafae3f

chore: bump demo app dependencies versions & removed react-scripts …

73670c9

…in favor of `vite`

chore: setting up project structure for vite to work properly

3a6c7b0

feat: added mathquill types deifinition

83f8298

build: updated rollup config to properly bundle ts definitions and react

2d1c628

refactor: updated EqationEditor component implementation

d9a92bf

chore: updated EquatinEditor demo usage

11d5549

fix: added external packages

54c3581

chore: added props from prev implementation for backward compatibility

d552c1c

chore: changes peer deps to support prev react versions

d80736f

fix: updated mathquill import, removed require & expose jQuery in win…

abb8f26

…dow global

chore: updated demo app tsconfig, added preview command, added minima…

8e199b8

…tch dependency & refactored imports

V0XNIHILI requested a review from Copilot August 12, 2025 10:52

Copilot AI reviewed Aug 12, 2025

View reviewed changes

hophiphip added 3 commits August 12, 2025 15:16

chore: applied more complex typing for useCallbackRef to remove any

aa1f0c2

chore: extended window with jQuery property

e0309a3

chore: removed unnecessary ts-ignore

3d07bd7

		@@ -0,0 +1,5 @@
		// eslint-disable-next-line @typescript-eslint/ban-ts-ignore

	function useCallbackRef<T extends (...args: any[]) => any>(callback: T \| undefined): T {
	function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T \| undefined): T {

Conversation

hophiphip commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

hophiphip Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

hophiphip Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

hophiphip Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

hophiphip commented Aug 12, 2025

Uh oh!

V0XNIHILI commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hophiphip commented Aug 12, 2025

Uh oh!

hophiphip commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hophiphip commented Aug 12, 2025

Uh oh!

hophiphip commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hophiphip commented Aug 3, 2025 •

edited

Loading

V0XNIHILI commented Aug 12, 2025 •

edited

Loading

hophiphip commented Aug 12, 2025 •

edited

Loading

hophiphip commented Aug 12, 2025 •

edited

Loading