@atlaskit/editor-ssr-renderer 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-ssr-renderer
 
+## 1.5.0
+
+### Minor Changes
+
+- [`cbf58f8500db4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cbf58f8500db4) -
+  [https://hello.jira.atlassian.cloud/browse/EDITOR-3893](EDITOR-3893) - fix mussing <br /> in empty
+  textblocks in the `EditorSSRRenderer`
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.4.0
+
+### Minor Changes
+
+- [`e4f9d3c00a126`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e4f9d3c00a126) -
+  [EDITOR-3919](https://hello.jira.atlassian.cloud/browse/EDITOR-3919) - use the real `getPos`
+  function as `nodeViweFactory` prop in `EditorSSRRenderer`
+
 ## 1.3.0
 
 ### Minor Changes

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

@@ -18,10 +18,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _model = require("@atlaskit/editor-prosemirror/model");
-var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _excluded = ["preset", "buildDoc", "portalProviderAPI", "intl", "pluginInjectionAPI"];
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl"];
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -71,22 +70,17 @@ var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
   }]);
 }(_eventDispatcher.EventDispatcher);
 function EditorSSRRenderer(_ref) {
-  var preset = _ref.preset,
-    buildDoc = _ref.buildDoc,
+  var plugins = _ref.plugins,
+    schema = _ref.schema,
+    doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
-    pluginInjectionAPI = _ref.pluginInjectionAPI,
     divProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
   // so we don't need to add `intl` as a dependency to `useMemo`.
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   var intlRef = (0, _react.useRef)(intl);
   intlRef.current = intl;
-  var plugins = (0, _react.useMemo)(function () {
-    return preset.build({
-      pluginInjectionAPI: pluginInjectionAPI
-    });
-  }, [pluginInjectionAPI, preset]);
   var pmPlugins = (0, _react.useMemo)(function () {
     var eventDispatcher = new SSREventDispatcher();
     var providerFactory = new _providerFactory.ProviderFactory();
@@ -101,7 +95,7 @@ function EditorSSRRenderer(_ref) {
       nodeViewPortalProviderAPI: portalProviderAPI,
       portalProviderAPI: portalProviderAPI,
       providerFactory: providerFactory,
-      schema: _schemaDefault.defaultSchema
+      schema: schema
     };
     return plugins.reduce(function (acc, editorPlugin) {
       var _editorPlugin$pmPlugi;
@@ -116,7 +110,7 @@ function EditorSSRRenderer(_ref) {
       });
       return acc;
     }, []);
-  }, [plugins, portalProviderAPI]);
+  }, [plugins, portalProviderAPI, schema]);
   var nodeViews = (0, _react.useMemo)(function () {
     return pmPlugins.reduce(function (acc, plugin) {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -130,73 +124,109 @@ function EditorSSRRenderer(_ref) {
   var editorView = (0, _react.useMemo)(function () {
     return new SSREditorView(null, {
       state: _state.EditorState.create({
-        schema: _schemaDefault.defaultSchema,
+        doc: doc,
+        schema: schema,
         plugins: pmPlugins
       })
     });
-  }, [pmPlugins]);
-  var serializer = (0, _react.useMemo)(function () {
-    var toDomNodeRenderers = Object.fromEntries(Object.entries(_schemaDefault.defaultSchema.nodes).map(function (_ref3) {
-      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        nodeName = _ref4[0],
-        nodeType = _ref4[1];
-      return [nodeName, nodeType.spec.toDOM];
-    }).filter(function (_ref5) {
-      var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        toDOM = _ref6[1];
-      return !!toDOM;
-    }));
-    var toDomMarkRenderers = Object.fromEntries(Object.entries(_schemaDefault.defaultSchema.marks).map(function (_ref7) {
-      var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
-        markName = _ref8[0],
-        markType = _ref8[1];
-      return [markName, markType.spec.toDOM];
-    }).filter(function (_ref9) {
-      var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
-        toDOM = _ref0[1];
-      return !!toDOM;
-    }));
-    var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
-      var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
-        nodeName = _ref10[0],
-        nodeViewFactory = _ref10[1];
-      return [nodeName, function (node) {
-        var nodeViewInstance = nodeViewFactory(node, editorView, function () {
-          return 0;
-        }, [], _view.DecorationSet.create(node, []));
-        return {
-          dom: nodeViewInstance.dom,
-          contentDOM: nodeViewInstance.contentDOM
-        };
-      }];
-    }));
-    var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
-      var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
-        markName = _ref12[0],
-        markViewFactory = _ref12[1];
-      return [markName, function (mark) {
-        var markViewInstance = markViewFactory(mark, editorView, false);
-        return {
-          dom: markViewInstance.dom,
-          contentDOM: markViewInstance.contentDOM
-        };
-      }];
-    }));
-    return new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
-      text: renderText
-    }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
-  }, [editorView, markViews, nodeViews]);
+  }, [doc, pmPlugins, schema]);
+  var _useMemo = (0, _react.useMemo)(function () {
+      var nodePositions = new WeakMap();
+      var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
+        var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+          nodeName = _ref4[0],
+          nodeType = _ref4[1];
+        return [nodeName, nodeType.spec.toDOM];
+      }).filter(function (_ref5) {
+        var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+          toDOM = _ref6[1];
+        return !!toDOM;
+      }));
+      var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
+        var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+          markName = _ref8[0],
+          markType = _ref8[1];
+        return [markName, markType.spec.toDOM];
+      }).filter(function (_ref9) {
+        var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
+          toDOM = _ref0[1];
+        return !!toDOM;
+      }));
+      var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+        var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
+          nodeName = _ref10[0],
+          nodeViewFactory = _ref10[1];
+        return [nodeName, function (node) {
+          var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+            var _nodePositions$get;
+            return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+          }, [], _view.DecorationSet.create(node, []));
+
+          // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+          // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+          //
+          // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+          // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+          // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+          // we are rendering child node.
+          //
+          // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+          // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+          // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+          if (nodeViewInstance.contentDOM &&
+          // if (this.node.isTextblock) updater.addTextblockHacks()
+          node.isTextblock &&
+          // !lastChild || // Empty textblock
+          !node.lastChild
+          // NOT IMPLEMENTED CASE !(lastChild instanceof TextViewDesc) ||
+          // NOT IMPLEMENTED CASE /\n$/.test(lastChild.node.text!) ||
+          // NOT IMPLEMENTED CASE (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text!))
+          ) {
+            var br = document.createElement('br');
+            br.classList.add('ProseMirror-trailingBreak');
+            nodeViewInstance.contentDOM.appendChild(br);
+          }
+          return {
+            dom: nodeViewInstance.dom,
+            contentDOM: nodeViewInstance.contentDOM
+          };
+        }];
+      }));
+      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+        var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+          markName = _ref12[0],
+          markViewFactory = _ref12[1];
+        return [markName, function (mark) {
+          var markViewInstance = markViewFactory(mark, editorView, false);
+          return {
+            dom: markViewInstance.dom,
+            contentDOM: markViewInstance.contentDOM
+          };
+        }];
+      }));
+      var serializer = new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+        text: renderText
+      }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+      return {
+        serializer: serializer,
+        nodePositions: nodePositions
+      };
+    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]),
+    serializer = _useMemo.serializer,
+    nodePositions = _useMemo.nodePositions;
   var editorHTML = (0, _react.useMemo)(function () {
+    if (!doc) {
+      return undefined;
+    }
     try {
-      var pmDoc = buildDoc(editorView.state.schema);
-      if (!pmDoc) {
-        return undefined;
-      }
-      return serializer.serializeFragment(pmDoc.content);
+      doc.descendants(function (node, pos) {
+        nodePositions.set(node, pos);
+      });
+      return serializer.serializeFragment(doc.content);
     } catch (_unused2) {
       return undefined;
     }
-  }, [editorView.state.schema, buildDoc, serializer]);
+  }, [doc, serializer, nodePositions]);
   var containerRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
     if (containerRef.current && editorHTML) {

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

@@ -2,7 +2,6 @@ import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 
@@ -29,11 +28,11 @@ class SSREventDispatcher extends EventDispatcher {
   }
 }
 export function EditorSSRRenderer({
-  preset,
-  buildDoc,
+  plugins,
+  schema,
+  doc,
   portalProviderAPI,
   intl,
-  pluginInjectionAPI,
   ...divProps
 }) {
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
@@ -41,9 +40,6 @@ export function EditorSSRRenderer({
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   const intlRef = useRef(intl);
   intlRef.current = intl;
-  const plugins = useMemo(() => preset.build({
-    pluginInjectionAPI
-  }), [pluginInjectionAPI, preset]);
   const pmPlugins = useMemo(() => {
     const eventDispatcher = new SSREventDispatcher();
     const providerFactory = new ProviderFactory();
@@ -56,7 +52,7 @@ export function EditorSSRRenderer({
       nodeViewPortalProviderAPI: portalProviderAPI,
       portalProviderAPI: portalProviderAPI,
       providerFactory,
-      schema: defaultSchema
+      schema
     };
     return plugins.reduce((acc, editorPlugin) => {
       var _editorPlugin$pmPlugi;
@@ -72,7 +68,7 @@ export function EditorSSRRenderer({
       });
       return acc;
     }, []);
-  }, [plugins, portalProviderAPI]);
+  }, [plugins, portalProviderAPI, schema]);
   const nodeViews = useMemo(() => {
     return pmPlugins.reduce((acc, plugin) => {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -86,21 +82,54 @@ export function EditorSSRRenderer({
   const editorView = useMemo(() => {
     return new SSREditorView(null, {
       state: EditorState.create({
-        schema: defaultSchema,
+        doc,
+        schema,
         plugins: pmPlugins
       })
     });
-  }, [pmPlugins]);
-  const serializer = useMemo(() => {
-    const toDomNodeRenderers = Object.fromEntries(Object.entries(defaultSchema.nodes).map(([nodeName, nodeType]) => {
+  }, [doc, pmPlugins, schema]);
+  const {
+    serializer,
+    nodePositions
+  } = useMemo(() => {
+    const nodePositions = new WeakMap();
+    const toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(([nodeName, nodeType]) => {
       return [nodeName, nodeType.spec.toDOM];
     }).filter(([, toDOM]) => !!toDOM));
-    const toDomMarkRenderers = Object.fromEntries(Object.entries(defaultSchema.marks).map(([markName, markType]) => {
+    const toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(([markName, markType]) => {
       return [markName, markType.spec.toDOM];
     }).filter(([, toDOM]) => !!toDOM));
     const nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(([nodeName, nodeViewFactory]) => {
       return [nodeName, node => {
-        const nodeViewInstance = nodeViewFactory(node, editorView, () => 0, [], DecorationSet.create(node, []));
+        const nodeViewInstance = nodeViewFactory(node, editorView, () => {
+          var _nodePositions$get;
+          return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+        }, [], DecorationSet.create(node, []));
+
+        // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+        // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+        //
+        // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+        // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+        // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+        // we are rendering child node.
+        //
+        // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+        if (nodeViewInstance.contentDOM &&
+        // if (this.node.isTextblock) updater.addTextblockHacks()
+        node.isTextblock &&
+        // !lastChild || // Empty textblock
+        !node.lastChild
+        // NOT IMPLEMENTED CASE !(lastChild instanceof TextViewDesc) ||
+        // NOT IMPLEMENTED CASE /\n$/.test(lastChild.node.text!) ||
+        // NOT IMPLEMENTED CASE (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text!))
+        ) {
+          const br = document.createElement('br');
+          br.classList.add('ProseMirror-trailingBreak');
+          nodeViewInstance.contentDOM.appendChild(br);
+        }
         return {
           dom: nodeViewInstance.dom,
           contentDOM: nodeViewInstance.contentDOM
@@ -116,7 +145,7 @@ export function EditorSSRRenderer({
         };
       }];
     }));
-    return new DOMSerializer({
+    const serializer = new DOMSerializer({
       ...toDomNodeRenderers,
       ...nodeViewRenderers,
       text: renderText
@@ -124,18 +153,24 @@ export function EditorSSRRenderer({
       ...toDomMarkRenderers,
       ...markViewRenderers
     });
-  }, [editorView, markViews, nodeViews]);
+    return {
+      serializer,
+      nodePositions
+    };
+  }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]);
   const editorHTML = useMemo(() => {
+    if (!doc) {
+      return undefined;
+    }
     try {
-      const pmDoc = buildDoc(editorView.state.schema);
-      if (!pmDoc) {
-        return undefined;
-      }
-      return serializer.serializeFragment(pmDoc.content);
+      doc.descendants((node, pos) => {
+        nodePositions.set(node, pos);
+      });
+      return serializer.serializeFragment(doc.content);
     } catch {
       return undefined;
     }
-  }, [editorView.state.schema, buildDoc, serializer]);
+  }, [doc, serializer, nodePositions]);
   const containerRef = useRef(null);
   useLayoutEffect(() => {
     if (containerRef.current && editorHTML) {

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

@@ -6,7 +6,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
-var _excluded = ["preset", "buildDoc", "portalProviderAPI", "intl", "pluginInjectionAPI"];
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -15,7 +15,6 @@ import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 
@@ -63,22 +62,17 @@ var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
   }]);
 }(EventDispatcher);
 export function EditorSSRRenderer(_ref) {
-  var preset = _ref.preset,
-    buildDoc = _ref.buildDoc,
+  var plugins = _ref.plugins,
+    schema = _ref.schema,
+    doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
-    pluginInjectionAPI = _ref.pluginInjectionAPI,
     divProps = _objectWithoutProperties(_ref, _excluded);
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
   // so we don't need to add `intl` as a dependency to `useMemo`.
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   var intlRef = useRef(intl);
   intlRef.current = intl;
-  var plugins = useMemo(function () {
-    return preset.build({
-      pluginInjectionAPI: pluginInjectionAPI
-    });
-  }, [pluginInjectionAPI, preset]);
   var pmPlugins = useMemo(function () {
     var eventDispatcher = new SSREventDispatcher();
     var providerFactory = new ProviderFactory();
@@ -93,7 +87,7 @@ export function EditorSSRRenderer(_ref) {
       nodeViewPortalProviderAPI: portalProviderAPI,
       portalProviderAPI: portalProviderAPI,
       providerFactory: providerFactory,
-      schema: defaultSchema
+      schema: schema
     };
     return plugins.reduce(function (acc, editorPlugin) {
       var _editorPlugin$pmPlugi;
@@ -108,7 +102,7 @@ export function EditorSSRRenderer(_ref) {
       });
       return acc;
     }, []);
-  }, [plugins, portalProviderAPI]);
+  }, [plugins, portalProviderAPI, schema]);
   var nodeViews = useMemo(function () {
     return pmPlugins.reduce(function (acc, plugin) {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -122,73 +116,109 @@ export function EditorSSRRenderer(_ref) {
   var editorView = useMemo(function () {
     return new SSREditorView(null, {
       state: EditorState.create({
-        schema: defaultSchema,
+        doc: doc,
+        schema: schema,
         plugins: pmPlugins
       })
     });
-  }, [pmPlugins]);
-  var serializer = useMemo(function () {
-    var toDomNodeRenderers = Object.fromEntries(Object.entries(defaultSchema.nodes).map(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        nodeName = _ref4[0],
-        nodeType = _ref4[1];
-      return [nodeName, nodeType.spec.toDOM];
-    }).filter(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-        toDOM = _ref6[1];
-      return !!toDOM;
-    }));
-    var toDomMarkRenderers = Object.fromEntries(Object.entries(defaultSchema.marks).map(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-        markName = _ref8[0],
-        markType = _ref8[1];
-      return [markName, markType.spec.toDOM];
-    }).filter(function (_ref9) {
-      var _ref0 = _slicedToArray(_ref9, 2),
-        toDOM = _ref0[1];
-      return !!toDOM;
-    }));
-    var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
-      var _ref10 = _slicedToArray(_ref1, 2),
-        nodeName = _ref10[0],
-        nodeViewFactory = _ref10[1];
-      return [nodeName, function (node) {
-        var nodeViewInstance = nodeViewFactory(node, editorView, function () {
-          return 0;
-        }, [], DecorationSet.create(node, []));
-        return {
-          dom: nodeViewInstance.dom,
-          contentDOM: nodeViewInstance.contentDOM
-        };
-      }];
-    }));
-    var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
-      var _ref12 = _slicedToArray(_ref11, 2),
-        markName = _ref12[0],
-        markViewFactory = _ref12[1];
-      return [markName, function (mark) {
-        var markViewInstance = markViewFactory(mark, editorView, false);
-        return {
-          dom: markViewInstance.dom,
-          contentDOM: markViewInstance.contentDOM
-        };
-      }];
-    }));
-    return new DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
-      text: renderText
-    }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
-  }, [editorView, markViews, nodeViews]);
+  }, [doc, pmPlugins, schema]);
+  var _useMemo = useMemo(function () {
+      var nodePositions = new WeakMap();
+      var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          nodeName = _ref4[0],
+          nodeType = _ref4[1];
+        return [nodeName, nodeType.spec.toDOM];
+      }).filter(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          toDOM = _ref6[1];
+        return !!toDOM;
+      }));
+      var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          markName = _ref8[0],
+          markType = _ref8[1];
+        return [markName, markType.spec.toDOM];
+      }).filter(function (_ref9) {
+        var _ref0 = _slicedToArray(_ref9, 2),
+          toDOM = _ref0[1];
+        return !!toDOM;
+      }));
+      var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+        var _ref10 = _slicedToArray(_ref1, 2),
+          nodeName = _ref10[0],
+          nodeViewFactory = _ref10[1];
+        return [nodeName, function (node) {
+          var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+            var _nodePositions$get;
+            return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+          }, [], DecorationSet.create(node, []));
+
+          // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+          // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+          //
+          // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+          // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+          // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+          // we are rendering child node.
+          //
+          // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+          // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+          // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+          if (nodeViewInstance.contentDOM &&
+          // if (this.node.isTextblock) updater.addTextblockHacks()
+          node.isTextblock &&
+          // !lastChild || // Empty textblock
+          !node.lastChild
+          // NOT IMPLEMENTED CASE !(lastChild instanceof TextViewDesc) ||
+          // NOT IMPLEMENTED CASE /\n$/.test(lastChild.node.text!) ||
+          // NOT IMPLEMENTED CASE (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text!))
+          ) {
+            var br = document.createElement('br');
+            br.classList.add('ProseMirror-trailingBreak');
+            nodeViewInstance.contentDOM.appendChild(br);
+          }
+          return {
+            dom: nodeViewInstance.dom,
+            contentDOM: nodeViewInstance.contentDOM
+          };
+        }];
+      }));
+      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+        var _ref12 = _slicedToArray(_ref11, 2),
+          markName = _ref12[0],
+          markViewFactory = _ref12[1];
+        return [markName, function (mark) {
+          var markViewInstance = markViewFactory(mark, editorView, false);
+          return {
+            dom: markViewInstance.dom,
+            contentDOM: markViewInstance.contentDOM
+          };
+        }];
+      }));
+      var serializer = new DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+        text: renderText
+      }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+      return {
+        serializer: serializer,
+        nodePositions: nodePositions
+      };
+    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]),
+    serializer = _useMemo.serializer,
+    nodePositions = _useMemo.nodePositions;
   var editorHTML = useMemo(function () {
+    if (!doc) {
+      return undefined;
+    }
     try {
-      var pmDoc = buildDoc(editorView.state.schema);
-      if (!pmDoc) {
-        return undefined;
-      }
-      return serializer.serializeFragment(pmDoc.content);
+      doc.descendants(function (node, pos) {
+        nodePositions.set(node, pos);
+      });
+      return serializer.serializeFragment(doc.content);
     } catch (_unused2) {
       return undefined;
     }
-  }, [editorView.state.schema, buildDoc, serializer]);
+  }, [doc, serializer, nodePositions]);
   var containerRef = useRef(null);
   useLayoutEffect(function () {
     if (containerRef.current && editorHTML) {

package/dist/types/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
-import type { EditorPluginInjectionAPI, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Schema } from '@atlaskit/editor-prosemirror/model';
+import type { EditorPlugin } from '@atlaskit/editor-common/types';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 interface Props {
     'aria-describedby'?: string;
     'aria-label': string;
-    buildDoc: (schema: Schema) => PMNode | undefined;
     className: string;
     'data-editor-id': string;
+    doc: PMNode | undefined;
     id: string;
     intl: IntlShape;
-    pluginInjectionAPI?: EditorPluginInjectionAPI;
+    plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
-    preset: EditorPresetBuilder<any, any>;
+    schema: Schema;
 }
-export declare function EditorSSRRenderer({ preset, buildDoc, portalProviderAPI, intl, pluginInjectionAPI, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, ...divProps }: Props): React.JSX.Element;
 export {};

package/dist/types-ts4.5/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
-import type { EditorPluginInjectionAPI, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Schema } from '@atlaskit/editor-prosemirror/model';
+import type { EditorPlugin } from '@atlaskit/editor-common/types';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 interface Props {
     'aria-describedby'?: string;
     'aria-label': string;
-    buildDoc: (schema: Schema) => PMNode | undefined;
     className: string;
     'data-editor-id': string;
+    doc: PMNode | undefined;
     id: string;
     intl: IntlShape;
-    pluginInjectionAPI?: EditorPluginInjectionAPI;
+    plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
-    preset: EditorPresetBuilder<any, any>;
+    schema: Schema;
 }
-export declare function EditorSSRRenderer({ preset, buildDoc, portalProviderAPI, intl, pluginInjectionAPI, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, ...divProps }: Props): React.JSX.Element;
 export {};

package/example-helpers/createExample.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { CardClient, SmartCardProvider } from '@atlaskit/link-provider';
@@ -29,8 +30,9 @@ function SSREditor({ adf }: { adf: DocNode }) {
 	return (
 		<EditorSSRRenderer
 			intl={intl}
-			preset={preset}
-			buildDoc={(schema) => PMNode.fromJSON(schema, adf)}
+			doc={PMNode.fromJSON(defaultSchema, adf)}
+			plugins={preset.build({})}
+			schema={defaultSchema}
 			portalProviderAPI={new SSRPortalProviderAPI()}
 			id="ak-editor-textarea"
 			data-editor-id="6f03e411-00a8-448b-bbc0-66f350895a5e"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "1.3.0",
+	"version": "1.5.0",
 	"description": "SSR Renderer based on Editor",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
@@ -27,13 +27,13 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.5.1",
-		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/adf-schema": "^51.5.0",
+		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.40.0",
+		"@atlaskit/editor-common": "^110.46.0",
 		"react": "^18.2.0"
 	}
 }