chore: upgrade to version 0.14.0 and update peer dependencies for React 16.8.0 to <20

feat: add shims for React 19 to support existing test code without refactoring

fix: update DraftEditorBlockNode to use ref for blockNode instead of findDOMNode

fix: modify DraftEditorDragHandler to access editor container directly due to removal of findDOMNode in React 19

test: adjust tests for getContentEditableContainer to remove ReactDOM mocks and validate editorContainer directly

refactor: simplify getContentEditableContainer to use editor.editorContainer directly without findDOMNode

style: update Draft.css version comment to reflect changes

Author: Minniehajj

examples/draft-0-10-0/playground/src/App.test.js

@@ -1,3 +1,4 @@
+import { createRoot } from "react-dom/client";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
  *
@@ -17,6 +18,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+ const div = document.createElement('div');
+ const root = createRoot(div);
+ root.render(<App />);
 });

examples/draft-0-10-0/playground/src/index.js

@@ -1,3 +1,4 @@
+import { createRoot } from "react-dom/client";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
  *
@@ -23,5 +24,6 @@ import registerServiceWorker from './registerServiceWorker';
 
 console.log("Applying feature flag overwrites: ", GkManager);
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
 registerServiceWorker();

examples/draft-0-10-0/tex/js/app.js

@@ -1,3 +1,4 @@
+import { createRoot } from "react-dom/client";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
  *
@@ -18,7 +19,5 @@ import TeXEditorExample from './components/TeXEditorExample';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-ReactDOM.render(
-  <TeXEditorExample />,
-  document.getElementById('target'),
-);
+const root = createRoot(document.getElementById('target'));
+root.render(<TeXEditorExample />);

examples/draft-0-9-1/tex/js/app.js

@@ -1,3 +1,4 @@
+import { createRoot } from "react-dom/client";
 /**
  * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
  *
@@ -18,7 +19,5 @@ import TeXEditorExample from './components/TeXEditorExample';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-ReactDOM.render(
-  <TeXEditorExample />,
-  document.getElementById('target'),
-);
+const root = createRoot(document.getElementById('target'));
+root.render(<TeXEditorExample />);

meta/bundle-size-stats/Draft.js.json

@@ -1,7 +1,7 @@
 {
   "name": "@axioscode/draft-js",
   "description": "A React framework for building text editors.",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "keywords": [
     "draftjs",
     "editor",
@@ -46,8 +46,8 @@
     "object-assign": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0"
+    "react": ">=16.8.0 <20",
+    "react-dom": ">=16.8.0 <20"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
@@ -82,9 +82,9 @@
     "gulp-util": "^3.0.6",
     "jest": "^24.9.0",
     "prettier": "1.19.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
     "semantic-release": "^22.0.5",
     "stats-webpack-plugin": "^0.6.2",
     "through2": "^3.0.1",

meta/bundle-size-stats/Draft.min.js.json

@@ -9,3 +9,33 @@
 
 // used for testing react fiber
 global.requestAnimationFrame = callback => global.setTimeout(callback, 0);
+
+// React 19 removed ReactDOM.render and ReactDOM.findDOMNode. Provide minimal test shims
+// so existing test code can continue to run without broad refactors.
+try {
+  const ReactDOM = require('ReactDOM');
+  if (ReactDOM && !ReactDOM.render && ReactDOM.createRoot) {
+    const roots = new Map();
+    ReactDOM.render = (element, container) => {
+      let root = roots.get(container);
+      if (!root) {
+        root = ReactDOM.createRoot(container);
+        roots.set(container, root);
+      }
+      root.render(element);
+      return element && element.ref && typeof element.ref === 'function'
+        ? element.ref.current || null
+        : null;
+    };
+  }
+  if (ReactDOM && !ReactDOM.findDOMNode) {
+    ReactDOM.findDOMNode = inst => {
+      if (inst && inst._node) return inst._node; // DraftEditorTextNode
+      if (inst && inst._blockNode) return inst._blockNode; // DraftEditorBlockNode
+      if (inst && inst.editorContainer) return inst.editorContainer; // DraftEditor
+      return null;
+    };
+  }
+} catch (e) {
+  // ignore if ReactDOM not resolvable
+}

package.json

@@ -122,6 +122,20 @@ const arePropsEqual = (renderedChild, leafPropSet) => {
   });
 };
 
+// Helper to render a DraftEditorBlock supporting React 16-19
+const renderBlock = (element, container) => {
+  if (ReactDOM.createRoot) {
+    if (!container._root) {
+      container._root = ReactDOM.createRoot(container);
+    }
+    container._root.render(element);
+  } else if (ReactDOM.render) {
+    ReactDOM.render(element, container);
+  } else {
+    throw new Error('No suitable ReactDOM renderer');
+  }
+};
+
 const assertLeaves = (renderedBlock, leafProps) => {
   leafProps.forEach((leafPropSet, ii) => {
     const child = renderedBlock[ii];
@@ -194,7 +208,7 @@ test('must allow update when `block` has changed', () => {
   const props = getProps(helloBlock);
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 
@@ -204,7 +218,7 @@ test('must allow update when `block` has changed', () => {
   expect(updatedHelloBlock !== helloBlock).toMatchSnapshot();
   expect(props.block !== nextProps.block).toMatchSnapshot();
 
-  ReactDOM.render(<DraftEditorBlock {...nextProps} />, container);
+  renderBlock(<DraftEditorBlock {...nextProps} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 });
@@ -214,7 +228,7 @@ test('must allow update when `tree` has changed', () => {
   const props = getProps(helloBlock);
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 
@@ -232,7 +246,7 @@ test('must allow update when `tree` has changed', () => {
 
   expect(props.tree !== nextProps.tree).toMatchSnapshot();
 
-  ReactDOM.render(<DraftEditorBlock {...nextProps} />, container);
+  renderBlock(<DraftEditorBlock {...nextProps} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 });
@@ -242,14 +256,14 @@ test('must allow update when `direction` has changed', () => {
   const props = getProps(helloBlock);
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 
   const nextProps = {...props, direction: UnicodeBidiDirection.RTL};
   expect(props.direction !== nextProps.direction).toMatchSnapshot();
 
-  ReactDOM.render(<DraftEditorBlock {...nextProps} />, container);
+  renderBlock(<DraftEditorBlock {...nextProps} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 });
@@ -259,7 +273,7 @@ test('must allow update when forcing selection', () => {
   const props = getProps(helloBlock);
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 
@@ -279,12 +293,12 @@ test('must reject update if conditions are not met', () => {
   const props = getProps(helloBlock);
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
 
   // Render again with the exact same props as before.
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   // No new leaf renders.
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
@@ -309,7 +323,7 @@ test('must reject update if selection is not on an edge', () => {
 
   // Render again with selection now moved elsewhere and the contents
   // unchanged.
-  ReactDOM.render(<DraftEditorBlock {...newProps} />, container);
+  renderBlock(<DraftEditorBlock {...newProps} />, container);
 
   // No new leaf renders.
   expect(mockLeafRender.mock.calls.length).toMatchSnapshot();
@@ -464,7 +478,7 @@ test('must scroll the window if needed', () => {
   });
 
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   const scrollCalls = window.scrollTo.mock.calls;
   expect(scrollCalls).toMatchSnapshot();
@@ -473,7 +487,7 @@ test('must scroll the window if needed', () => {
 test('must not scroll the window if unnecessary', () => {
   const props = getProps(getHelloBlock());
   const container = document.createElement('div');
-  ReactDOM.render(<DraftEditorBlock {...props} />, container);
+  renderBlock(<DraftEditorBlock {...props} />, container);
 
   const scrollCalls = window.scrollTo.mock.calls;
   expect(scrollCalls).toMatchSnapshot();

scripts/jest/shims.js

@@ -30,7 +30,19 @@ beforeEach(() => {
 });
 
 const renderIntoContainer = element => {
-  return ReactDOM.render(element, container);
+  let instance = null;
+  const withRef = React.cloneElement(element, {ref: i => (instance = i)});
+  if (ReactDOM.createRoot) {
+    if (!renderIntoContainer._root) {
+      renderIntoContainer._root = ReactDOM.createRoot(container);
+    }
+    renderIntoContainer._root.render(withRef);
+  } else if (ReactDOM.render) {
+    instance = ReactDOM.render(withRef, container);
+  } else {
+    throw new Error('No suitable ReactDOM render method found');
+  }
+  return instance;
 };
 
 const initializeAsIE = () => {
@@ -48,8 +60,11 @@ const initializeAsNonIE = () => {
 };
 
 const expectPopulatedSpan = (stub, testString) => {
-  // $FlowExpectedError node could be null
-  const node: Element = ReactDOM.findDOMNode(stub);
+  const node = stub._node;
+  expect(node).toBeTruthy();
+  if (!node) {
+    throw new Error('Expected node to exist');
+  }
   expect(node.tagName).toBe('SPAN');
   expect(node.childNodes.length).toBe(1);
   expect(node.firstChild && node.firstChild.textContent).toBe(testString);
@@ -60,8 +75,7 @@ test('must initialize correctly with an empty string, non-IE', function() {
   const stub = renderIntoContainer(
     <DraftEditorTextNode>{''}</DraftEditorTextNode>,
   );
-  // $FlowExpectedError we know node is an Element
-  expect(ReactDOM.findDOMNode(stub).tagName).toBe('BR');
+  expect(stub._node && stub._node.tagName).toBe('BR');
 });
 
 test('must initialize correctly with an empty string, IE', function() {
@@ -187,8 +201,7 @@ test('must update from non-empty to empty, non-IE', function() {
 
   renderIntoContainer(<DraftEditorTextNode>{''}</DraftEditorTextNode>);
 
-  // $FlowExpectedError we know node is an Element
-  expect(ReactDOM.findDOMNode(stub).tagName).toBe('BR');
+  expect(stub._node && stub._node.tagName).toBe('BR');
 });
 
 test('must update from non-empty to empty, IE', function() {
@@ -217,11 +230,11 @@ test('must force unchanged text back into the DOM', function() {
     <DraftEditorTextNode>{TEST_A}</DraftEditorTextNode>,
   );
 
-  // $FlowExpectedError we know node is not null
-  ReactDOM.findDOMNode(stub).textContent = TEST_B;
+  if (stub._node) {
+    stub._node.textContent = TEST_B;
+  }
 
   renderIntoContainer(<DraftEditorTextNode>{TEST_A}</DraftEditorTextNode>);
 
-  // $FlowExpectedError we know node is not null
-  expect(ReactDOM.findDOMNode(stub).textContent).toBe(TEST_A);
+  expect(stub._node && stub._node.textContent).toBe(TEST_A);
 });