@atlaskit/editor-ssr-renderer 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-ssr-renderer
 
+## 1.6.0
+
+### Minor Changes
+
+- [`595b07a99bd65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/595b07a99bd65) -
+  [https://hello.jira.atlassian.cloud/browse/EDITOR-3995](EDITOR-3995) - add toolbar supporting to
+  `EditorSSRRenderer`
+
+## 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

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

@@ -9,18 +9,18 @@ exports.EditorSSRRenderer = EditorSSRRenderer;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 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 _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl"];
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onEditorStateChanged"];
 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; }
@@ -28,34 +28,127 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
-var SSREditorView = /*#__PURE__*/function (_EditorView) {
-  function SSREditorView() {
+/**
+ * A lightweight EditorView implementation for SSR environments.
+ *
+ * It's kind of aggressive right now, we need to test and see how it works.
+ * Probably, we will need to implement more methods/properties in the future.
+ *
+ * If it doesn't work, we can extend `EditorView` directly instead of implementing `Partial<EditorView>`,
+ * but it will perform some DOM operation during the construction.
+ */
+var SSREditorView = /*#__PURE__*/function () {
+  function SSREditorView(place, props) {
     (0, _classCallCheck2.default)(this, SSREditorView);
-    return _callSuper(this, SSREditorView, arguments);
+    this.state = props.state;
+    this.dom = document.createElement('div');
+    this.editable = true;
+    this.dragging = null;
+    this.composing = false;
+    this.props = props;
+    this.root = document;
+    this.isDestroyed = false;
   }
-  (0, _inherits2.default)(SSREditorView, _EditorView);
   return (0, _createClass2.default)(SSREditorView, [{
     key: "update",
     value: function update() {
-      // Skip any updates in SSR
+      // No-op in SSR
     }
   }, {
     key: "setProps",
     value: function setProps() {
-      // Skip any updates in SSR
+      // No-op in SSR
     }
   }, {
     key: "dispatchEvent",
     value: function dispatchEvent() {
-      // Don't notify about events in SSR
+      // No-op in SSR
     }
   }, {
     key: "dispatch",
     value: function dispatch() {
-      // Don't notify about events in SSR
+      // No-op in SSR
+    }
+  }, {
+    key: "hasFocus",
+    value: function hasFocus() {
+      return false;
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      // No-op in SSR
+    }
+  }, {
+    key: "updateRoot",
+    value: function updateRoot() {
+      // No-op in SSR
+    }
+  }, {
+    key: "posAtCoords",
+    value: function posAtCoords() {
+      return null;
+    }
+  }, {
+    key: "coordsAtPos",
+    value: function coordsAtPos() {
+      return {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      };
+    }
+  }, {
+    key: "domAtPos",
+    value: function domAtPos() {
+      return {
+        node: this.root,
+        offset: 0
+      };
+    }
+  }, {
+    key: "nodeDOM",
+    value: function nodeDOM() {
+      return null;
+    }
+  }, {
+    key: "posAtDOM",
+    value: function posAtDOM() {
+      return 0;
+    }
+  }, {
+    key: "endOfTextblock",
+    value: function endOfTextblock() {
+      return false;
+    }
+  }, {
+    key: "pasteHTML",
+    value: function pasteHTML() {
+      return false;
+    }
+  }, {
+    key: "pasteText",
+    value: function pasteText() {
+      return false;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      // No-op in SSR
+    }
+  }, {
+    key: "updateState",
+    value: function updateState() {
+      // No-op in SSR
+    }
+  }, {
+    key: "someProp",
+    value: function someProp() {
+      return undefined;
     }
   }]);
-}(_view.EditorView);
+}();
 var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
   function SSREventDispatcher() {
     (0, _classCallCheck2.default)(this, SSREventDispatcher);
@@ -75,6 +168,7 @@ function EditorSSRRenderer(_ref) {
     doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
+    onEditorStateChanged = _ref.onEditorStateChanged,
     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`.
@@ -121,15 +215,26 @@ function EditorSSRRenderer(_ref) {
       return Object.assign(acc, plugin.props.markViews);
     }, {});
   }, [pmPlugins]);
+  var editorState = (0, _react.useMemo)(function () {
+    return _state.EditorState.create({
+      doc: doc,
+      schema: schema,
+      plugins: pmPlugins
+    });
+  }, [doc, pmPlugins, schema]);
+
+  // In React 19 could be replaced by `useEffectEvent` hook.
+  var onEditorStateChangedRef = (0, _react.useRef)(onEditorStateChanged);
+  onEditorStateChangedRef.current = onEditorStateChanged;
+  (0, _react.useLayoutEffect)(function () {
+    var _onEditorStateChanged;
+    (_onEditorStateChanged = onEditorStateChangedRef.current) === null || _onEditorStateChanged === void 0 || _onEditorStateChanged.call(onEditorStateChangedRef, editorState);
+  }, [editorState]);
   var editorView = (0, _react.useMemo)(function () {
     return new SSREditorView(null, {
-      state: _state.EditorState.create({
-        doc: doc,
-        schema: schema,
-        plugins: pmPlugins
-      })
+      state: editorState
     });
-  }, [doc, pmPlugins, schema]);
+  }, [editorState]);
   var _useMemo = (0, _react.useMemo)(function () {
       var nodePositions = new WeakMap();
       var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
@@ -161,6 +266,31 @@ function EditorSSRRenderer(_ref) {
             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

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useLayoutEffect } from 'react';
-import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
@@ -8,18 +8,87 @@ import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
 
-class SSREditorView extends EditorView {
+/**
+ * A lightweight EditorView implementation for SSR environments.
+ *
+ * It's kind of aggressive right now, we need to test and see how it works.
+ * Probably, we will need to implement more methods/properties in the future.
+ *
+ * If it doesn't work, we can extend `EditorView` directly instead of implementing `Partial<EditorView>`,
+ * but it will perform some DOM operation during the construction.
+ */
+class SSREditorView {
   update() {
-    // Skip any updates in SSR
+    // No-op in SSR
   }
   setProps() {
-    // Skip any updates in SSR
+    // No-op in SSR
   }
   dispatchEvent() {
-    // Don't notify about events in SSR
+    // No-op in SSR
   }
   dispatch() {
-    // Don't notify about events in SSR
+    // No-op in SSR
+  }
+  hasFocus() {
+    return false;
+  }
+  focus() {
+    // No-op in SSR
+  }
+  updateRoot() {
+    // No-op in SSR
+  }
+  posAtCoords() {
+    return null;
+  }
+  coordsAtPos() {
+    return {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+  }
+  domAtPos() {
+    return {
+      node: this.root,
+      offset: 0
+    };
+  }
+  nodeDOM() {
+    return null;
+  }
+  posAtDOM() {
+    return 0;
+  }
+  endOfTextblock() {
+    return false;
+  }
+  pasteHTML() {
+    return false;
+  }
+  pasteText() {
+    return false;
+  }
+  destroy() {
+    // No-op in SSR
+  }
+  updateState() {
+    // No-op in SSR
+  }
+  someProp() {
+    return undefined;
+  }
+  constructor(place, props) {
+    this.state = props.state;
+    this.dom = document.createElement('div');
+    this.editable = true;
+    this.dragging = null;
+    this.composing = false;
+    this.props = props;
+    this.root = document;
+    this.isDestroyed = false;
   }
 }
 class SSREventDispatcher extends EventDispatcher {
@@ -33,6 +102,7 @@ export function EditorSSRRenderer({
   doc,
   portalProviderAPI,
   intl,
+  onEditorStateChanged,
   ...divProps
 }) {
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
@@ -79,15 +149,26 @@ export function EditorSSRRenderer({
       return Object.assign(acc, plugin.props.markViews);
     }, {});
   }, [pmPlugins]);
+  const editorState = useMemo(() => {
+    return EditorState.create({
+      doc,
+      schema,
+      plugins: pmPlugins
+    });
+  }, [doc, pmPlugins, schema]);
+
+  // In React 19 could be replaced by `useEffectEvent` hook.
+  const onEditorStateChangedRef = useRef(onEditorStateChanged);
+  onEditorStateChangedRef.current = onEditorStateChanged;
+  useLayoutEffect(() => {
+    var _onEditorStateChanged;
+    (_onEditorStateChanged = onEditorStateChangedRef.current) === null || _onEditorStateChanged === void 0 ? void 0 : _onEditorStateChanged.call(onEditorStateChangedRef, editorState);
+  }, [editorState]);
   const editorView = useMemo(() => {
     return new SSREditorView(null, {
-      state: EditorState.create({
-        doc,
-        schema,
-        plugins: pmPlugins
-      })
+      state: editorState
     });
-  }, [doc, pmPlugins, schema]);
+  }, [editorState]);
   const {
     serializer,
     nodePositions
@@ -105,6 +186,31 @@ export function EditorSSRRenderer({
           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

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

@@ -1,18 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-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 = ["plugins", "schema", "doc", "portalProviderAPI", "intl"];
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onEditorStateChanged"];
 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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { useMemo, useRef, useLayoutEffect } from 'react';
-import { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
@@ -20,34 +20,127 @@ import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
-var SSREditorView = /*#__PURE__*/function (_EditorView) {
-  function SSREditorView() {
+/**
+ * A lightweight EditorView implementation for SSR environments.
+ *
+ * It's kind of aggressive right now, we need to test and see how it works.
+ * Probably, we will need to implement more methods/properties in the future.
+ *
+ * If it doesn't work, we can extend `EditorView` directly instead of implementing `Partial<EditorView>`,
+ * but it will perform some DOM operation during the construction.
+ */
+var SSREditorView = /*#__PURE__*/function () {
+  function SSREditorView(place, props) {
     _classCallCheck(this, SSREditorView);
-    return _callSuper(this, SSREditorView, arguments);
+    this.state = props.state;
+    this.dom = document.createElement('div');
+    this.editable = true;
+    this.dragging = null;
+    this.composing = false;
+    this.props = props;
+    this.root = document;
+    this.isDestroyed = false;
   }
-  _inherits(SSREditorView, _EditorView);
   return _createClass(SSREditorView, [{
     key: "update",
     value: function update() {
-      // Skip any updates in SSR
+      // No-op in SSR
     }
   }, {
     key: "setProps",
     value: function setProps() {
-      // Skip any updates in SSR
+      // No-op in SSR
     }
   }, {
     key: "dispatchEvent",
     value: function dispatchEvent() {
-      // Don't notify about events in SSR
+      // No-op in SSR
     }
   }, {
     key: "dispatch",
     value: function dispatch() {
-      // Don't notify about events in SSR
+      // No-op in SSR
+    }
+  }, {
+    key: "hasFocus",
+    value: function hasFocus() {
+      return false;
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      // No-op in SSR
+    }
+  }, {
+    key: "updateRoot",
+    value: function updateRoot() {
+      // No-op in SSR
+    }
+  }, {
+    key: "posAtCoords",
+    value: function posAtCoords() {
+      return null;
+    }
+  }, {
+    key: "coordsAtPos",
+    value: function coordsAtPos() {
+      return {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      };
+    }
+  }, {
+    key: "domAtPos",
+    value: function domAtPos() {
+      return {
+        node: this.root,
+        offset: 0
+      };
+    }
+  }, {
+    key: "nodeDOM",
+    value: function nodeDOM() {
+      return null;
+    }
+  }, {
+    key: "posAtDOM",
+    value: function posAtDOM() {
+      return 0;
+    }
+  }, {
+    key: "endOfTextblock",
+    value: function endOfTextblock() {
+      return false;
+    }
+  }, {
+    key: "pasteHTML",
+    value: function pasteHTML() {
+      return false;
+    }
+  }, {
+    key: "pasteText",
+    value: function pasteText() {
+      return false;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      // No-op in SSR
+    }
+  }, {
+    key: "updateState",
+    value: function updateState() {
+      // No-op in SSR
+    }
+  }, {
+    key: "someProp",
+    value: function someProp() {
+      return undefined;
     }
   }]);
-}(EditorView);
+}();
 var SSREventDispatcher = /*#__PURE__*/function (_EventDispatcher) {
   function SSREventDispatcher() {
     _classCallCheck(this, SSREventDispatcher);
@@ -67,6 +160,7 @@ export function EditorSSRRenderer(_ref) {
     doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
+    onEditorStateChanged = _ref.onEditorStateChanged,
     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`.
@@ -113,15 +207,26 @@ export function EditorSSRRenderer(_ref) {
       return Object.assign(acc, plugin.props.markViews);
     }, {});
   }, [pmPlugins]);
+  var editorState = useMemo(function () {
+    return EditorState.create({
+      doc: doc,
+      schema: schema,
+      plugins: pmPlugins
+    });
+  }, [doc, pmPlugins, schema]);
+
+  // In React 19 could be replaced by `useEffectEvent` hook.
+  var onEditorStateChangedRef = useRef(onEditorStateChanged);
+  onEditorStateChangedRef.current = onEditorStateChanged;
+  useLayoutEffect(function () {
+    var _onEditorStateChanged;
+    (_onEditorStateChanged = onEditorStateChangedRef.current) === null || _onEditorStateChanged === void 0 || _onEditorStateChanged.call(onEditorStateChangedRef, editorState);
+  }, [editorState]);
   var editorView = useMemo(function () {
     return new SSREditorView(null, {
-      state: EditorState.create({
-        doc: doc,
-        schema: schema,
-        plugins: pmPlugins
-      })
+      state: editorState
     });
-  }, [doc, pmPlugins, schema]);
+  }, [editorState]);
   var _useMemo = useMemo(function () {
       var nodePositions = new WeakMap();
       var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
@@ -153,6 +258,31 @@ export function EditorSSRRenderer(_ref) {
             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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 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';
@@ -12,9 +13,10 @@ interface Props {
     doc: PMNode | undefined;
     id: string;
     intl: IntlShape;
+    onEditorStateChanged?: (state: EditorState) => void;
     plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
     schema: Schema;
 }
-export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 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';
@@ -12,9 +13,10 @@ interface Props {
     doc: PMNode | undefined;
     id: string;
     intl: IntlShape;
+    onEditorStateChanged?: (state: EditorState) => void;
     plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
     schema: Schema;
 }
-export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"description": "SSR Renderer based on Editor",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
@@ -33,7 +33,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.44.0",
+		"@atlaskit/editor-common": "^110.49.0",
 		"react": "^18.2.0"
 	}
 }