@atlaskit/editor-ssr-renderer 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-ssr-renderer
 
+## 2.0.1
+
+### Patch Changes
+
+- [`45129df3fb3bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45129df3fb3bb) -
+  [EDITOR-4211] Fix missing <br /> in empty paragraphs in SSR renderer
+- [`4741ef2efc866`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4741ef2efc866) -
+  [EDITOR-4212] Fix macros in SSR renderer
+- Updated dependencies
+
 ## 2.0.0
 
 ### Patch Changes

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

@@ -237,6 +237,25 @@ function EditorSSRRenderer(_ref) {
   }, [editorState]);
   var _useMemo = (0, _react.useMemo)(function () {
       var nodePositions = new WeakMap();
+
+      // 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
+      var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
+        if (contentDOM && node.isTextblock && !node.lastChild) {
+          var br = document.createElement('br');
+          br.classList.add('ProseMirror-trailingBreak');
+          contentDOM.appendChild(br);
+        }
+      };
       var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
         var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
           nodeName = _ref4[0],
@@ -266,41 +285,47 @@ 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);
-          }
+          addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
           return {
             dom: nodeViewInstance.dom,
-            contentDOM: nodeViewInstance.contentDOM
+            // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+            contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
           };
         }];
       }));
-      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+
+      // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+      var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
         var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
-          markName = _ref12[0],
-          markViewFactory = _ref12[1];
+          nodeName = _ref12[0],
+          nodeType = _ref12[1];
+        // Only handle textblock nodes
+        return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+      }).map(function (_ref13) {
+        var _ref14 = (0, _slicedToArray2.default)(_ref13, 2),
+          nodeName = _ref14[0],
+          nodeType = _ref14[1];
+        var toDOM = nodeType.spec.toDOM;
+        if (!toDOM) {
+          return [nodeName, undefined];
+        }
+        return [nodeName, function (node) {
+          if (!node.lastChild) {
+            var result = _model.DOMSerializer.renderSpec(document, toDOM(node));
+            addTrailingBreakIfNeeded(node, result.contentDOM);
+            return result;
+          }
+          return toDOM(node);
+        }];
+      }).filter(function (_ref15) {
+        var _ref16 = (0, _slicedToArray2.default)(_ref15, 2),
+          renderer = _ref16[1];
+        return !!renderer;
+      }));
+      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
+        var _ref18 = (0, _slicedToArray2.default)(_ref17, 2),
+          markName = _ref18[0],
+          markViewFactory = _ref18[1];
         return [markName, function (mark) {
           var markViewInstance = markViewFactory(mark, editorView, false);
           return {
@@ -309,7 +334,7 @@ function EditorSSRRenderer(_ref) {
           };
         }];
       }));
-      var serializer = new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+      var serializer = new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
         text: renderText
       }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
       return {

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

@@ -174,6 +174,25 @@ export function EditorSSRRenderer({
     nodePositions
   } = useMemo(() => {
     const nodePositions = new WeakMap();
+
+    // 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
+    const addTrailingBreakIfNeeded = (node, contentDOM) => {
+      if (contentDOM && node.isTextblock && !node.lastChild) {
+        const br = document.createElement('br');
+        br.classList.add('ProseMirror-trailingBreak');
+        contentDOM.appendChild(br);
+      }
+    };
     const toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(([nodeName, nodeType]) => {
       return [nodeName, nodeType.spec.toDOM];
     }).filter(([, toDOM]) => !!toDOM));
@@ -186,37 +205,33 @@ 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);
-        }
+        addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
         return {
           dom: nodeViewInstance.dom,
-          contentDOM: nodeViewInstance.contentDOM
+          // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+          contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
         };
       }];
     }));
+
+    // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+    const textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(([nodeName, nodeType]) => {
+      // Only handle textblock nodes
+      return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+    }).map(([nodeName, nodeType]) => {
+      const toDOM = nodeType.spec.toDOM;
+      if (!toDOM) {
+        return [nodeName, undefined];
+      }
+      return [nodeName, node => {
+        if (!node.lastChild) {
+          const result = DOMSerializer.renderSpec(document, toDOM(node));
+          addTrailingBreakIfNeeded(node, result.contentDOM);
+          return result;
+        }
+        return toDOM(node);
+      }];
+    }).filter(([, renderer]) => !!renderer));
     const markViewRenderers = Object.fromEntries(Object.entries(markViews).map(([markName, markViewFactory]) => {
       return [markName, mark => {
         const markViewInstance = markViewFactory(mark, editorView, false);
@@ -228,6 +243,7 @@ export function EditorSSRRenderer({
     }));
     const serializer = new DOMSerializer({
       ...toDomNodeRenderers,
+      ...textblockRenderers,
       ...nodeViewRenderers,
       text: renderText
     }, {

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

@@ -229,6 +229,25 @@ export function EditorSSRRenderer(_ref) {
   }, [editorState]);
   var _useMemo = useMemo(function () {
       var nodePositions = new WeakMap();
+
+      // 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
+      var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
+        if (contentDOM && node.isTextblock && !node.lastChild) {
+          var br = document.createElement('br');
+          br.classList.add('ProseMirror-trailingBreak');
+          contentDOM.appendChild(br);
+        }
+      };
       var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),
           nodeName = _ref4[0],
@@ -258,41 +277,47 @@ 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);
-          }
+          addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
           return {
             dom: nodeViewInstance.dom,
-            contentDOM: nodeViewInstance.contentDOM
+            // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+            contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
           };
         }];
       }));
-      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref11) {
+
+      // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+      var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
         var _ref12 = _slicedToArray(_ref11, 2),
-          markName = _ref12[0],
-          markViewFactory = _ref12[1];
+          nodeName = _ref12[0],
+          nodeType = _ref12[1];
+        // Only handle textblock nodes
+        return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+      }).map(function (_ref13) {
+        var _ref14 = _slicedToArray(_ref13, 2),
+          nodeName = _ref14[0],
+          nodeType = _ref14[1];
+        var toDOM = nodeType.spec.toDOM;
+        if (!toDOM) {
+          return [nodeName, undefined];
+        }
+        return [nodeName, function (node) {
+          if (!node.lastChild) {
+            var result = DOMSerializer.renderSpec(document, toDOM(node));
+            addTrailingBreakIfNeeded(node, result.contentDOM);
+            return result;
+          }
+          return toDOM(node);
+        }];
+      }).filter(function (_ref15) {
+        var _ref16 = _slicedToArray(_ref15, 2),
+          renderer = _ref16[1];
+        return !!renderer;
+      }));
+      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
+        var _ref18 = _slicedToArray(_ref17, 2),
+          markName = _ref18[0],
+          markViewFactory = _ref18[1];
         return [markName, function (mark) {
           var markViewInstance = markViewFactory(mark, editorView, false);
           return {
@@ -301,7 +326,7 @@ export function EditorSSRRenderer(_ref) {
           };
         }];
       }));
-      var serializer = new DOMSerializer(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), nodeViewRenderers), {}, {
+      var serializer = new DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
         text: renderText
       }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"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": "^111.0.0",
+		"@atlaskit/editor-common": "^111.3.0",
 		"react": "^18.2.0"
 	}
 }