@atlaskit/editor-plugin-hyperlink 14.0.34 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 14.1.0
+
+### Minor Changes
+
+- [`85087b263ce43`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85087b263ce43) -
+  Migrate react-dom render/unmountComponentAtNode to the React 18/19 createRoot API behind the
+  nike_r19_render_unmount feature gate. The legacy react-dom path is preserved on the gate-off
+  branch for rollback.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.34
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations.js

@@ -7,8 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.ButtonWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = require("react-dom");
+var _client = require("react-dom/client");
 var _reactIntl = require("react-intl");
 var _link = require("@atlaskit/editor-common/link");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = (0, _client.createRoot)(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    (0, _reactDom.render)(element, mountPoint);
+  }
+};
 var ButtonWrapper = exports.ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
@@ -24,7 +41,7 @@ var ButtonWrapper = exports.ButtonWrapper = function ButtonWrapper(_ref) {
       isOpen: isOpen
     }));
   };
-  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+  renderToMountPoint( /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats

package/dist/es2019/pm-plugins/decorations.js

@@ -1,7 +1,24 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { IntlProvider } from 'react-intl';
 import { LinkAction, OverlayButton } from '@atlaskit/editor-common/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+const reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+const renderToMountPoint = (element, mountPoint) => {
+  if (fg('nike_r19_render_unmount')) {
+    let root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    render(element, mountPoint);
+  }
+};
 export const ButtonWrapper = ({
   editorView,
   pos,
@@ -18,7 +35,7 @@ export const ButtonWrapper = ({
       isOpen
     }));
   };
-  render( /*#__PURE__*/React.createElement(IntlProvider, {
+  renderToMountPoint( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats

package/dist/esm/pm-plugins/decorations.js

@@ -1,7 +1,24 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { IntlProvider } from 'react-intl';
 import { LinkAction, OverlayButton } from '@atlaskit/editor-common/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+var reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if (fg('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    render(element, mountPoint);
+  }
+};
 export var ButtonWrapper = function ButtonWrapper(_ref) {
   var editorView = _ref.editorView,
     pos = _ref.pos,
@@ -17,7 +34,7 @@ export var ButtonWrapper = function ButtonWrapper(_ref) {
       isOpen: isOpen
     }));
   };
-  render( /*#__PURE__*/React.createElement(IntlProvider, {
+  renderToMountPoint( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: intl.locale || 'en',
     messages: intl.messages,
     formats: intl.formats

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "14.0.34",
+	"version": "14.1.0",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,13 +37,13 @@
 		"@atlaskit/icon": "^37.2.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
-		"@atlaskit/tmp-editor-statsig": "^135.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.41.0",
+		"@atlaskit/editor-common": "^116.44.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -92,6 +92,9 @@
 	"platform-feature-flags": {
 		"platform_editor_use_preferences_plugin": {
 			"type": "boolean"
+		},
+		"nike_r19_render_unmount": {
+			"type": "boolean"
 		}
 	}
 }