@atlaskit/renderer 109.32.4 → 109.32.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 109.32.5
+
+### Patch Changes
+
+- [#110948](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110948)
+  [`6567f4bf996b3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6567f4bf996b3) -
+  [ux] When we select caption comment, the comment badge should not be active (with FF) and rename
+  prop name to mediaSingleElement
+- Updated dependencies
+
 ## 109.32.4
 
 ### Patch Changes

package/dist/cjs/react/nodes/media/index.js

@@ -35,7 +35,8 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("../../../ui/annotations/hooks");
 var _types = require("@atlaskit/editor-common/types");
-var _excluded = ["marks", "mediaElement", "isDrafting"];
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -131,7 +132,7 @@ var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
-    mediaElement = _ref5.mediaElement,
+    mediaSingleElement = _ref5.mediaSingleElement,
     _ref5$isDrafting = _ref5.isDrafting,
     isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
@@ -155,15 +156,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   (0, _react.useEffect)(function () {
     var observer = new MutationObserver(function (mutationList) {
       mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
-          var _mutation$target$pare;
-          var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.getBooleanFF)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
     });
-    if (mediaElement) {
-      observer.observe(mediaElement, {
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
         attributes: true,
         subtree: true,
         attributeFilter: ['data-has-focus']
@@ -172,7 +174,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     return function () {
       observer.disconnect();
     };
-  }, [mediaElement, setStatus]);
+  }, [mediaSingleElement, setStatus]);
   if (!isDrafting && !activeParentIds.length) {
     return null;
   }
@@ -243,7 +245,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         })
       }, showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
         marks: annotationMarks,
-        mediaElement: mediaSingleElement,
+        mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting

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

@@ -56,7 +56,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.32.4";
+var packageVersion = "109.32.5";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/es2019/react/nodes/media/index.js

@@ -20,6 +20,7 @@ import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/m
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export const linkStyle = css`
 	position: absolute;
@@ -123,7 +124,7 @@ const MediaAnnotations = ({
 const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
-  mediaElement,
+  mediaSingleElement,
   isDrafting = false,
   ...rest
 }) => {
@@ -140,15 +141,16 @@ const CommentBadgeWrapper = ({
   useEffect(() => {
     const observer = new MutationObserver(mutationList => {
       mutationList.forEach(mutation => {
+        const parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
-          var _mutation$target$pare;
-          const elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
     });
-    if (mediaElement) {
-      observer.observe(mediaElement, {
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
         attributes: true,
         subtree: true,
         attributeFilter: ['data-has-focus']
@@ -157,7 +159,7 @@ const CommentBadgeWrapper = ({
     return () => {
       observer.disconnect();
     };
-  }, [mediaElement, setStatus]);
+  }, [mediaSingleElement, setStatus]);
   if (!isDrafting && !activeParentIds.length) {
     return null;
   }
@@ -223,7 +225,7 @@ class Media extends PureComponent {
         }
       }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
-        mediaElement: mediaSingleElement,
+        mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting

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

@@ -37,7 +37,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.32.4";
+const packageVersion = "109.32.5";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

package/dist/esm/react/nodes/media/index.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["marks", "mediaElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 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; }
@@ -35,6 +35,7 @@ import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/m
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
 
@@ -122,7 +123,7 @@ var CommentBadge = injectIntl(CommentBadgeComponent);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
-    mediaElement = _ref5.mediaElement,
+    mediaSingleElement = _ref5.mediaSingleElement,
     _ref5$isDrafting = _ref5.isDrafting,
     isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = _objectWithoutProperties(_ref5, _excluded);
@@ -146,15 +147,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   useEffect(function () {
     var observer = new MutationObserver(function (mutationList) {
       mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
-          var _mutation$target$pare;
-          var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
     });
-    if (mediaElement) {
-      observer.observe(mediaElement, {
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
         attributes: true,
         subtree: true,
         attributeFilter: ['data-has-focus']
@@ -163,7 +165,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     return function () {
       observer.disconnect();
     };
-  }, [mediaElement, setStatus]);
+  }, [mediaSingleElement, setStatus]);
   if (!isDrafting && !activeParentIds.length) {
     return null;
   }
@@ -234,7 +236,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         })
       }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
-        mediaElement: mediaSingleElement,
+        mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting

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

@@ -47,7 +47,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.32.4";
+var packageVersion = "109.32.5";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.32.4",
+	"version": "109.32.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/button": "^17.17.0",
 		"@atlaskit/code": "^15.2.0",
-		"@atlaskit/editor-common": "^82.6.0",
+		"@atlaskit/editor-common": "^82.8.0",
 		"@atlaskit/editor-json-transformer": "^8.13.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
@@ -107,9 +107,13 @@
 	},
 	"techstack": {
 		"@repo/internal": {
-			"design-tokens": ["color"],
+			"design-tokens": [
+				"color"
+			],
 			"deprecation": "no-deprecated-imports",
-			"styling": ["emotion"]
+			"styling": [
+				"emotion"
+			]
 		}
 	},
 	"platform-feature-flags": {
@@ -140,6 +144,9 @@
 		},
 		"platform.editor.table.allow-table-alignment": {
 			"type": "boolean"
+		},
+		"platform.comments-on-media.bug.incorrect-badge-highlight": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {