Skip to content

Replace findDOMNode with a ref to support React 19 - #1050

Open
ntdatt812 wants to merge 1 commit into
zenoamaro:masterfrom
ntdatt812:fix/react-19-finddomnode
Open

Replace findDOMNode with a ref to support React 19#1050
ntdatt812 wants to merge 1 commit into
zenoamaro:masterfrom
ntdatt812:fix/react-19-finddomnode

Conversation

@ntdatt812

Copy link
Copy Markdown

Summary

getEditingArea() is the only place in the codebase that calls ReactDOM.findDOMNode. React 19 removed that API, so the component throws TypeError: findDOMNode is not a function on mount and the package is unusable there. This replaces it with a plain ref.

Fixes #972, #981, #1034, #1039. Also relevant to #988, #989, #1022, #1032.

What changed

The editing area used to be captured with a callback ref typed as React.ReactInstance, which may be a class instance rather than a DOM node — hence the findDOMNode call to unwrap it. Switching to React.createRef() gives the DOM node directly and the unwrapping step disappears.

  • src/index.tsx — dropped the react-dom import, replaced editingArea with editingAreaRef, read .current in getEditingArea()
  • package.json — added ^19 to the react and react-dom peer ranges
  • test/index.js — three tests covering the default editing area, a custom one passed via children, and re-resolution after the editor regenerates

The library no longer imports react-dom at all. I left it in peerDependencies since consumers still need it and removing it would change dependency resolution for no real benefit, but I'm happy to drop it if you'd rather.

Behaviour change

Worth calling out: findDOMNode used to resolve a class component down to its DOM node. Without it, if someone passes children that is a class component instead of a host element, ref.current is the component instance and not a DOM node.

The README documents children as a custom editing area element, so I expect this to be rare in practice, but it is technically a breaking change. I added an explicit instanceof Element check so anyone hitting it gets a clear message instead of a confusing Quill error. Let me know if you'd prefer this to land as a major, or if you want the old behaviour preserved behind a fallback.

Testing

npm run build:lib passes clean under the existing tsc config. The mocha suite passes 17/17 locally — note it needs --exit on modern Node, since mocha 6 plus jsdom leaves the process hanging otherwise. That's unrelated to this change and I left it alone.

I haven't touched the Quill v1 dependency. Upgrading to Quill 2 means rewriting the type layer, since QuillOptionsStatic, DeltaStatic and friends come from @types/quill and don't exist in Quill 2 — that seemed worth keeping separate from this fix. Happy to open that as a follow-up if it's useful.

React 19 removed findDOMNode, which getEditingArea() relied on to resolve
the editing area to a DOM node. Capture the element with a ref instead and
read it directly.

The library no longer imports react-dom. Adds ^19 to the react and
react-dom peer ranges, and tests covering the default editing area, a
custom one passed via children, and re-resolution after regeneration.
@saltedsword

Copy link
Copy Markdown

Same issue. Hope to get this merged soon for React 19 support

@ntdatt812

Copy link
Copy Markdown
Author

For what it's worth, the branch is still current — MERGEABLE, no conflicts, three files (src/index.tsx, a test, and the peer-dependency range). It replaces the findDOMNode call with a ref, which is the single thing that makes this package throw on React 19, since findDOMNode was removed rather than deprecated there.

Being straight about the odds, though: the last push to this repository was 2025-02-22, and there are 433 open issues. I opened #1051 offering to help with triage or maintenance if the maintainers want it, and there has been no reply. So I would not plan around this merging soon.

If you need React 19 working today rather than waiting, react-quill-new is the maintained fork and carries this fix already. I would still rather see it land here — a fix in the package 7.9M downloads a week actually point at helps more people than a fork does — which is why the PR stays open.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

React 19 will remove findDOMNode

2 participants