@atlaskit/renderer 108.15.7 → 108.15.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/renderer
 
+## 108.15.8
+
+### Patch Changes
+
+- [#40912](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40912) [`1b1cb811d4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b1cb811d4d) - [ED-20170] Fix telepointer being duplicated when renderer telepointer feature flag is on
+- [#40912](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40912) [`050cf3ed98f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/050cf3ed98f) - [ED-19844] Fix issue where mutation observer was being created in SSR environments
+
 ## 108.15.7
 
 ### Patch Changes

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.7";
+var packageVersion = "108.15.8";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -478,50 +478,49 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   };
   var initialUpdate = _react.default.useRef(true);
   _react.default.useEffect(function () {
-    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
-      return;
-    }
-    var renderer = innerRef.current.querySelector('.ak-renderer-document');
-    if (initialUpdate.current) {
-      var lastChild = renderer.lastChild;
-      lastChild && lastChild.appendChild(createTelepointer());
-    }
-    var mutateTelepointer = function mutateTelepointer(mutations) {
-      mutations.forEach(function (mutation) {
-        if (initialUpdate.current) {
-          var oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
-          if (oldTelepointer) {
-            oldTelepointer.remove();
+    // We must check if window is defined, if it isn't we are in a SSR environment
+    // and we don't want to add the telepointer
+    if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
+      var renderer = innerRef.current.querySelector('.ak-renderer-document');
+      if (initialUpdate.current) {
+        var lastChild = renderer.lastChild;
+        lastChild && lastChild.appendChild(createTelepointer());
+      }
+      var mutateTelepointer = function mutateTelepointer(mutations) {
+        mutations.forEach(function (mutation) {
+          if (initialUpdate.current) {
+            var oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+            if (oldTelepointer) {
+              oldTelepointer.remove();
+            }
+            var _lastChild = renderer.lastChild;
+            _lastChild && _lastChild.appendChild(createTelepointer());
+            initialUpdate.current = false;
           }
-          var _lastChild = renderer.lastChild;
-          _lastChild && _lastChild.appendChild(createTelepointer());
-          initialUpdate.current = false;
-        }
-        if (mutation.type === 'characterData') {
-          var parentNode = mutation.target.parentElement;
-          if (parentNode) {
-            var _oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
-            if (_oldTelepointer) {
-              _oldTelepointer.remove();
+          if (mutation.type === 'characterData') {
+            var parentNode = mutation.target.parentElement;
+            if (parentNode) {
+              var _oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+              if (_oldTelepointer) {
+                _oldTelepointer.remove();
+              }
+              parentNode.appendChild(createTelepointer());
             }
-            // initialUpdate.current = true;
-            // Add a new telepointer
-            parentNode.appendChild(createTelepointer());
           }
-        }
+        });
+      };
+      var observer = new MutationObserver(mutateTelepointer);
+      observer.observe(innerRef.current, {
+        characterData: true,
+        attributes: false,
+        childList: true,
+        subtree: true
       });
-    };
-    var observer = new MutationObserver(mutateTelepointer);
-    observer.observe(innerRef.current, {
-      characterData: true,
-      attributes: false,
-      childList: true,
-      subtree: true
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, [innerRef, children, addTelepointer]);
+      return function () {
+        return observer.disconnect();
+      };
+    }
+  }, [innerRef, addTelepointer]);
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.15.7";
+const packageVersion = "108.15.8";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -450,48 +450,47 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   };
   const initialUpdate = React.useRef(true);
   React.useEffect(() => {
-    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
-      return;
-    }
-    const renderer = innerRef.current.querySelector('.ak-renderer-document');
-    if (initialUpdate.current) {
-      const lastChild = renderer.lastChild;
-      lastChild && lastChild.appendChild(createTelepointer());
-    }
-    const mutateTelepointer = mutations => {
-      mutations.forEach(mutation => {
-        if (initialUpdate.current) {
-          const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
-          if (oldTelepointer) {
-            oldTelepointer.remove();
-          }
-          const lastChild = renderer.lastChild;
-          lastChild && lastChild.appendChild(createTelepointer());
-          initialUpdate.current = false;
-        }
-        if (mutation.type === 'characterData') {
-          const parentNode = mutation.target.parentElement;
-          if (parentNode) {
+    // We must check if window is defined, if it isn't we are in a SSR environment
+    // and we don't want to add the telepointer
+    if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
+      const renderer = innerRef.current.querySelector('.ak-renderer-document');
+      if (initialUpdate.current) {
+        const lastChild = renderer.lastChild;
+        lastChild && lastChild.appendChild(createTelepointer());
+      }
+      const mutateTelepointer = mutations => {
+        mutations.forEach(mutation => {
+          if (initialUpdate.current) {
             const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
             if (oldTelepointer) {
               oldTelepointer.remove();
             }
-            // initialUpdate.current = true;
-            // Add a new telepointer
-            parentNode.appendChild(createTelepointer());
+            const lastChild = renderer.lastChild;
+            lastChild && lastChild.appendChild(createTelepointer());
+            initialUpdate.current = false;
           }
-        }
+          if (mutation.type === 'characterData') {
+            const parentNode = mutation.target.parentElement;
+            if (parentNode) {
+              const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
+              if (oldTelepointer) {
+                oldTelepointer.remove();
+              }
+              parentNode.appendChild(createTelepointer());
+            }
+          }
+        });
+      };
+      const observer = new MutationObserver(mutateTelepointer);
+      observer.observe(innerRef.current, {
+        characterData: true,
+        attributes: false,
+        childList: true,
+        subtree: true
       });
-    };
-    const observer = new MutationObserver(mutateTelepointer);
-    observer.observe(innerRef.current, {
-      characterData: true,
-      attributes: false,
-      childList: true,
-      subtree: true
-    });
-    return () => observer.disconnect();
-  }, [innerRef, children, addTelepointer]);
+      return () => observer.disconnect();
+    }
+  }, [innerRef, addTelepointer]);
   return jsx(WidthProvider, {
     className: `ak-renderer-wrapper is-${appearance}`,
     "data-appearance": appearance

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.7";
+var packageVersion = "108.15.8";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -467,50 +467,49 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   };
   var initialUpdate = React.useRef(true);
   React.useEffect(function () {
-    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
-      return;
-    }
-    var renderer = innerRef.current.querySelector('.ak-renderer-document');
-    if (initialUpdate.current) {
-      var lastChild = renderer.lastChild;
-      lastChild && lastChild.appendChild(createTelepointer());
-    }
-    var mutateTelepointer = function mutateTelepointer(mutations) {
-      mutations.forEach(function (mutation) {
-        if (initialUpdate.current) {
-          var oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
-          if (oldTelepointer) {
-            oldTelepointer.remove();
+    // We must check if window is defined, if it isn't we are in a SSR environment
+    // and we don't want to add the telepointer
+    if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
+      var renderer = innerRef.current.querySelector('.ak-renderer-document');
+      if (initialUpdate.current) {
+        var lastChild = renderer.lastChild;
+        lastChild && lastChild.appendChild(createTelepointer());
+      }
+      var mutateTelepointer = function mutateTelepointer(mutations) {
+        mutations.forEach(function (mutation) {
+          if (initialUpdate.current) {
+            var oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+            if (oldTelepointer) {
+              oldTelepointer.remove();
+            }
+            var _lastChild = renderer.lastChild;
+            _lastChild && _lastChild.appendChild(createTelepointer());
+            initialUpdate.current = false;
           }
-          var _lastChild = renderer.lastChild;
-          _lastChild && _lastChild.appendChild(createTelepointer());
-          initialUpdate.current = false;
-        }
-        if (mutation.type === 'characterData') {
-          var parentNode = mutation.target.parentElement;
-          if (parentNode) {
-            var _oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
-            if (_oldTelepointer) {
-              _oldTelepointer.remove();
+          if (mutation.type === 'characterData') {
+            var parentNode = mutation.target.parentElement;
+            if (parentNode) {
+              var _oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+              if (_oldTelepointer) {
+                _oldTelepointer.remove();
+              }
+              parentNode.appendChild(createTelepointer());
             }
-            // initialUpdate.current = true;
-            // Add a new telepointer
-            parentNode.appendChild(createTelepointer());
           }
-        }
+        });
+      };
+      var observer = new MutationObserver(mutateTelepointer);
+      observer.observe(innerRef.current, {
+        characterData: true,
+        attributes: false,
+        childList: true,
+        subtree: true
       });
-    };
-    var observer = new MutationObserver(mutateTelepointer);
-    observer.observe(innerRef.current, {
-      characterData: true,
-      attributes: false,
-      childList: true,
-      subtree: true
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, [innerRef, children, addTelepointer]);
+      return function () {
+        return observer.disconnect();
+      };
+    }
+  }, [innerRef, addTelepointer]);
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.15.7",
+  "version": "108.15.8",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/link-datasource": "^1.4.0",
+    "@atlaskit/link-datasource": "^1.5.0",
     "@atlaskit/media-card": "^77.0.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",