@atlaskit/editor-common 114.1.0 → 114.1.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-common
 
+## 114.1.1
+
+### Patch Changes
+
+- [`2e95c42be9be9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e95c42be9be9) -
+  Fix inline node view portal rendering for SSR streaming. Add SSR branch in
+  `getInlineNodeViewProducer` that renders inline node views synchronously using `createRoot` +
+  `flushSync` directly into the `domRef`, bypassing the portal mechanism. Skip
+  `portalProviderAPI.remove()` during SSR cleanup. All changes gated behind
+  `platform_editor_editor_ssr_streaming`.
+
 ## 114.1.0
 
 ### Minor Changes

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "114.0.0";
+var packageVersion = "0.0.0-development";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/react-node-view/getInlineNodeViewProducer.js

@@ -10,9 +10,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _reactDom = require("react-dom");
+var _client = require("react-dom/client");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("../analytics");
+var _isSsr = require("../core-utils/is-ssr");
 var _ErrorBoundary = require("../ui/ErrorBoundary");
 var _utils = require("../utils");
 var _browser = require("../utils/browser");
@@ -24,7 +28,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var isSSR = Boolean(process.env.REACT_SSR);
 var inlineNodeViewClassname = exports.inlineNodeViewClassname = 'inlineNodeView';
 var canRenderFallback = function canRenderFallback(node) {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
@@ -77,13 +80,39 @@ function createNodeView(_ref) {
   // to the passed dom element (domRef) which means it is automatically
   // "cleaned up" when you do a "re render".
   function renderComponent() {
-    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      currentNode: currentNode,
-      nodeViewParams: nodeViewParams,
-      Component: Component,
-      extraComponentProps: extraComponentProps
-    }), domRef, key);
+    if ((0, _isSsr.isSSR)() && (0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      var html = '';
+
+      // We don't use direct rendering to the domRef, as this can lead to unexpected behavior,
+      // when the domRef element might have handlers from ProseMirror that will start executing
+      // in JSDom. Therefore, we simply attempt to render the element synchronously, get its HTML, and set it to the domRef,
+      // to keep the domRef as clear as possible.
+      try {
+        var PortalComponent = getPortalChildren({
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          currentNode: currentNode,
+          nodeViewParams: nodeViewParams,
+          Component: Component,
+          extraComponentProps: extraComponentProps
+        });
+        var rootElement = document.createElement('span');
+        var ssrRoot = (0, _client.createRoot)(rootElement);
+        (0, _reactDom.flushSync)(function () {
+          ssrRoot.render((0, _react2.jsx)(PortalComponent, null));
+        });
+        html = rootElement.innerHTML;
+        ssrRoot.unmount();
+      } catch (_unused) {}
+      domRef.innerHTML = html;
+    } else {
+      pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        currentNode: currentNode,
+        nodeViewParams: nodeViewParams,
+        Component: Component,
+        extraComponentProps: extraComponentProps
+      }), domRef, key);
+    }
   }
   var _getPerformanceOption = (0, _utils.getPerformanceOptions)(nodeViewParams.view),
     samplingRate = _getPerformanceOption.samplingRate,
@@ -137,10 +166,12 @@ function createNodeView(_ref) {
       return true;
     },
     destroy: function destroy() {
-      // When prosemirror destroys the node view, we need to clean up
-      // what we have previously rendered using the editor portal
-      // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(key);
+      if (!(0, _isSsr.isSSR)() || !(0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        // When prosemirror destroys the node view, we need to clean up
+        // what we have previously rendered using the editor portal
+        // provider api.
+        pmPluginFactoryParams.portalProviderAPI.remove(key);
+      }
       // @ts-expect-error Expect an error as domRef is expected to be
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
@@ -412,7 +443,7 @@ function getInlineNodeViewProducer(_ref4) {
       extraNodeViewProps: extraNodeViewProps
     };
     var isNodeTypeAllowedToBeVirtualized = virtualizedNodeAllowlist.includes((node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) || '');
-    if (!isNodeTypeAllowedToBeVirtualized || isSSR) {
+    if (!isNodeTypeAllowedToBeVirtualized || (0, _isSsr.isSSR)()) {
       return createNodeView(parameters);
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_inline_node_virt_threshold_override')) {

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.0.0";
+var packageVersion = "0.0.0-development";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "114.0.0";
+const packageVersion = "0.0.0-development";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -7,16 +7,19 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { isSSR } from '../core-utils/is-ssr';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { getBrowserInfo } from '../utils/browser';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 import { getOrCreateOnVisibleObserver } from './onVisibleObserverFactory';
-const isSSR = Boolean(process.env.REACT_SSR);
 export const inlineNodeViewClassname = 'inlineNodeView';
 const canRenderFallback = node => {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
@@ -70,13 +73,39 @@ function createNodeView({
   // to the passed dom element (domRef) which means it is automatically
   // "cleaned up" when you do a "re render".
   function renderComponent() {
-    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
-      dispatchAnalyticsEvent,
-      currentNode,
-      nodeViewParams,
-      Component,
-      extraComponentProps
-    }), domRef, key);
+    if (isSSR() && expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      let html = '';
+
+      // We don't use direct rendering to the domRef, as this can lead to unexpected behavior,
+      // when the domRef element might have handlers from ProseMirror that will start executing
+      // in JSDom. Therefore, we simply attempt to render the element synchronously, get its HTML, and set it to the domRef,
+      // to keep the domRef as clear as possible.
+      try {
+        const PortalComponent = getPortalChildren({
+          dispatchAnalyticsEvent,
+          currentNode,
+          nodeViewParams,
+          Component,
+          extraComponentProps
+        });
+        const rootElement = document.createElement('span');
+        const ssrRoot = createRoot(rootElement);
+        flushSync(() => {
+          ssrRoot.render(jsx(PortalComponent, null));
+        });
+        html = rootElement.innerHTML;
+        ssrRoot.unmount();
+      } catch {}
+      domRef.innerHTML = html;
+    } else {
+      pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+        dispatchAnalyticsEvent,
+        currentNode,
+        nodeViewParams,
+        Component,
+        extraComponentProps
+      }), domRef, key);
+    }
   }
   const {
     samplingRate,
@@ -133,10 +162,12 @@ function createNodeView({
       return true;
     },
     destroy() {
-      // When prosemirror destroys the node view, we need to clean up
-      // what we have previously rendered using the editor portal
-      // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(key);
+      if (!isSSR() || !expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        // When prosemirror destroys the node view, we need to clean up
+        // what we have previously rendered using the editor portal
+        // provider api.
+        pmPluginFactoryParams.portalProviderAPI.remove(key);
+      }
       // @ts-expect-error Expect an error as domRef is expected to be
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
@@ -414,7 +445,7 @@ export function getInlineNodeViewProducer({
       extraNodeViewProps
     };
     const isNodeTypeAllowedToBeVirtualized = virtualizedNodeAllowlist.includes((node === null || node === void 0 ? void 0 : (_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) || '');
-    if (!isNodeTypeAllowedToBeVirtualized || isSSR) {
+    if (!isNodeTypeAllowedToBeVirtualized || isSSR()) {
       return createNodeView(parameters);
     }
     if (fg('platform_editor_inline_node_virt_threshold_override')) {

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "114.0.0";
+const packageVersion = "0.0.0-development";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "114.0.0";
+var packageVersion = "0.0.0-development";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/react-node-view/getInlineNodeViewProducer.js

@@ -10,16 +10,19 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { isSSR } from '../core-utils/is-ssr';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { getBrowserInfo } from '../utils/browser';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 import { getOrCreateOnVisibleObserver } from './onVisibleObserverFactory';
-var isSSR = Boolean(process.env.REACT_SSR);
 export var inlineNodeViewClassname = 'inlineNodeView';
 var canRenderFallback = function canRenderFallback(node) {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
@@ -72,13 +75,39 @@ function createNodeView(_ref) {
   // to the passed dom element (domRef) which means it is automatically
   // "cleaned up" when you do a "re render".
   function renderComponent() {
-    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      currentNode: currentNode,
-      nodeViewParams: nodeViewParams,
-      Component: Component,
-      extraComponentProps: extraComponentProps
-    }), domRef, key);
+    if (isSSR() && expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      var html = '';
+
+      // We don't use direct rendering to the domRef, as this can lead to unexpected behavior,
+      // when the domRef element might have handlers from ProseMirror that will start executing
+      // in JSDom. Therefore, we simply attempt to render the element synchronously, get its HTML, and set it to the domRef,
+      // to keep the domRef as clear as possible.
+      try {
+        var PortalComponent = getPortalChildren({
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          currentNode: currentNode,
+          nodeViewParams: nodeViewParams,
+          Component: Component,
+          extraComponentProps: extraComponentProps
+        });
+        var rootElement = document.createElement('span');
+        var ssrRoot = createRoot(rootElement);
+        flushSync(function () {
+          ssrRoot.render(jsx(PortalComponent, null));
+        });
+        html = rootElement.innerHTML;
+        ssrRoot.unmount();
+      } catch (_unused) {}
+      domRef.innerHTML = html;
+    } else {
+      pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        currentNode: currentNode,
+        nodeViewParams: nodeViewParams,
+        Component: Component,
+        extraComponentProps: extraComponentProps
+      }), domRef, key);
+    }
   }
   var _getPerformanceOption = getPerformanceOptions(nodeViewParams.view),
     samplingRate = _getPerformanceOption.samplingRate,
@@ -132,10 +161,12 @@ function createNodeView(_ref) {
       return true;
     },
     destroy: function destroy() {
-      // When prosemirror destroys the node view, we need to clean up
-      // what we have previously rendered using the editor portal
-      // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(key);
+      if (!isSSR() || !expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        // When prosemirror destroys the node view, we need to clean up
+        // what we have previously rendered using the editor portal
+        // provider api.
+        pmPluginFactoryParams.portalProviderAPI.remove(key);
+      }
       // @ts-expect-error Expect an error as domRef is expected to be
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
@@ -407,7 +438,7 @@ export function getInlineNodeViewProducer(_ref4) {
       extraNodeViewProps: extraNodeViewProps
     };
     var isNodeTypeAllowedToBeVirtualized = virtualizedNodeAllowlist.includes((node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) || '');
-    if (!isNodeTypeAllowedToBeVirtualized || isSSR) {
+    if (!isNodeTypeAllowedToBeVirtualized || isSSR()) {
       return createNodeView(parameters);
     }
     if (fg('platform_editor_inline_node_virt_threshold_override')) {

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.0.0";
+var packageVersion = "0.0.0-development";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "114.1.0",
+	"version": "114.1.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-datasource": "^5.0.0",
 		"@atlaskit/link-picker": "^5.0.0",
-		"@atlaskit/media-card": "^80.0.0",
+		"@atlaskit/media-card": "^80.1.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
@@ -70,16 +70,16 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/profilecard": "^25.0.0",
+		"@atlaskit/profilecard": "^25.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/react-ufo": "^5.14.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/smart-card": "^44.0.0",
+		"@atlaskit/smart-card": "^44.1.0",
 		"@atlaskit/smart-user-picker": "^10.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/task-decision": "^20.0.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^62.4.0",
+		"@atlaskit/tmp-editor-statsig": "^62.8.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/width-detector": "^5.1.0",