@atlaskit/editor-ssr-renderer 3.1.12 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-ssr-renderer
 
+## 3.2.0
+
+### Minor Changes
+
+- [`e9ef7c6fc5370`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9ef7c6fc5370) -
+  EDITOR-6179: Enable SSR Streaming for Edit Page and Live Doc routes.
+  - Add `platform_editor_editor_ssr_streaming` experiment to `tmp-editor-statsig` experiments
+    config.
+  - `EditorSSRRenderer`: replace `useLayoutEffect`+`containerRef` DOM mutation with
+    `dangerouslySetInnerHTML` for rendering serialized editor HTML, enabling correct rendering in
+    `renderToPipeableStream` SSR streaming context.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.12
 
 ### Patch Changes

package/dist/cjs/editor-ssr-renderer/EditorSSRRenderer.js

@@ -379,7 +379,14 @@ function EditorSSRRenderer(_ref) {
       doc.descendants(function (node, pos) {
         nodePositions.set(node, pos);
       });
-      return serializer.serializeFragment(doc.content);
+      if ((0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        var fragment = serializer.serializeFragment(doc.content);
+        var wrapper = document.createElement('div');
+        wrapper.appendChild(fragment);
+        return wrapper.innerHTML;
+      } else {
+        return serializer.serializeFragment(doc.content);
+      }
     };
     try {
       return (0, _ssrMeasures.profileSSROperation)("".concat(SSR_TRACE_SEGMENT_NAME, "/serializeFragment"), serializeFragment, onSSRMeasure);
@@ -390,9 +397,11 @@ function EditorSSRRenderer(_ref) {
   }, [doc, serializer, nodePositions, onSSRMeasure]);
   var containerRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
-    if (containerRef.current && editorHTML) {
-      containerRef.current.innerHTML = '';
-      containerRef.current.appendChild(editorHTML);
+    if (!(0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      if (containerRef.current && editorHTML && typeof editorHTML !== 'string') {
+        containerRef.current.innerHTML = '';
+        containerRef.current.appendChild(editorHTML);
+      }
     }
   }, [editorHTML]);
   return /*#__PURE__*/_react.default.createElement(_ssrMeasures.SSRRenderMeasure, {
@@ -400,8 +409,12 @@ function EditorSSRRenderer(_ref) {
     startTimestampRef: firstRenderStartTimestampRef,
     onSSRMeasure: onSSRMeasure
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef,
     id: divProps.id
+    // eslint-disable-next-line react/no-danger -- It's intentional by design
+    ,
+    dangerouslySetInnerHTML: typeof editorHTML === 'string' && (0, _expValEquals.expValEquals)('platform_editor_editor_ssr_streaming', 'isEnabled', true) ? {
+      __html: editorHTML
+    } : undefined
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
     // because ReactEditorView produces a div with `class` without space.
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/editor-ssr-renderer/EditorSSRRenderer.js

@@ -287,7 +287,14 @@ export function EditorSSRRenderer({
       doc.descendants((node, pos) => {
         nodePositions.set(node, pos);
       });
-      return serializer.serializeFragment(doc.content);
+      if (expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        const fragment = serializer.serializeFragment(doc.content);
+        const wrapper = document.createElement('div');
+        wrapper.appendChild(fragment);
+        return wrapper.innerHTML;
+      } else {
+        return serializer.serializeFragment(doc.content);
+      }
     };
     try {
       return profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/serializeFragment`, serializeFragment, onSSRMeasure);
@@ -298,9 +305,11 @@ export function EditorSSRRenderer({
   }, [doc, serializer, nodePositions, onSSRMeasure]);
   const containerRef = useRef(null);
   useLayoutEffect(() => {
-    if (containerRef.current && editorHTML) {
-      containerRef.current.innerHTML = '';
-      containerRef.current.appendChild(editorHTML);
+    if (!expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      if (containerRef.current && editorHTML && typeof editorHTML !== 'string') {
+        containerRef.current.innerHTML = '';
+        containerRef.current.appendChild(editorHTML);
+      }
     }
   }, [editorHTML]);
   return /*#__PURE__*/React.createElement(SSRRenderMeasure, {
@@ -308,8 +317,12 @@ export function EditorSSRRenderer({
     startTimestampRef: firstRenderStartTimestampRef,
     onSSRMeasure: onSSRMeasure
   }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
     id: divProps.id
+    // eslint-disable-next-line react/no-danger -- It's intentional by design
+    ,
+    dangerouslySetInnerHTML: typeof editorHTML === 'string' && expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true) ? {
+      __html: editorHTML
+    } : undefined
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
     // because ReactEditorView produces a div with `class` without space.
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/editor-ssr-renderer/EditorSSRRenderer.js

@@ -370,7 +370,14 @@ export function EditorSSRRenderer(_ref) {
       doc.descendants(function (node, pos) {
         nodePositions.set(node, pos);
       });
-      return serializer.serializeFragment(doc.content);
+      if (expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+        var fragment = serializer.serializeFragment(doc.content);
+        var wrapper = document.createElement('div');
+        wrapper.appendChild(fragment);
+        return wrapper.innerHTML;
+      } else {
+        return serializer.serializeFragment(doc.content);
+      }
     };
     try {
       return profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/serializeFragment"), serializeFragment, onSSRMeasure);
@@ -381,9 +388,11 @@ export function EditorSSRRenderer(_ref) {
   }, [doc, serializer, nodePositions, onSSRMeasure]);
   var containerRef = useRef(null);
   useLayoutEffect(function () {
-    if (containerRef.current && editorHTML) {
-      containerRef.current.innerHTML = '';
-      containerRef.current.appendChild(editorHTML);
+    if (!expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true)) {
+      if (containerRef.current && editorHTML && typeof editorHTML !== 'string') {
+        containerRef.current.innerHTML = '';
+        containerRef.current.appendChild(editorHTML);
+      }
     }
   }, [editorHTML]);
   return /*#__PURE__*/React.createElement(SSRRenderMeasure, {
@@ -391,8 +400,12 @@ export function EditorSSRRenderer(_ref) {
     startTimestampRef: firstRenderStartTimestampRef,
     onSSRMeasure: onSSRMeasure
   }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
     id: divProps.id
+    // eslint-disable-next-line react/no-danger -- It's intentional by design
+    ,
+    dangerouslySetInnerHTML: typeof editorHTML === 'string' && expValEquals('platform_editor_editor_ssr_streaming', 'isEnabled', true) ? {
+      __html: editorHTML
+    } : undefined
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
     // because ReactEditorView produces a div with `class` without space.
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "3.1.12",
+	"version": "3.2.0",
 	"description": "SSR Renderer based on Editor",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
@@ -30,12 +30,12 @@
 		"@atlaskit/adf-schema": "^52.4.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^54.0.0",
+		"@atlaskit/tmp-editor-statsig": "^54.2.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.16.0",
+		"@atlaskit/editor-common": "^112.17.0",
 		"react": "^18.2.0"
 	}
 }