@atlaskit/renderer 109.19.0 → 109.19.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 109.19.1
+
+### Patch Changes
+
+- [#91808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91808) [`00e5dcfdf240`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00e5dcfdf240) - [ux] Does not add comment button on hover on media that is inside comment or inline comment rendereres
+
 ## 109.19.0
 
 ### Minor Changes

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

@@ -35,7 +35,7 @@ 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"];
+var _excluded = ["marks", "mediaElement", "isDrafting"];
 /** @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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -121,6 +121,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     mediaElement = _ref5.mediaElement,
+    _ref5$isDrafting = _ref5.isDrafting,
+    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
   var _useState = (0, _react.useState)('default'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -160,7 +162,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   var onClick = function onClick(e) {
@@ -201,7 +203,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         ssr = _this$props.ssr,
         width = _this$props.width,
         height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement;
+        mediaSingleElement = _this$props.mediaSingleElement,
+        _this$props$isDraftin = _this$props.isDrafting,
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
@@ -223,7 +227,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -311,7 +316,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     }) : dataAttributes;
   }, [applyDraftAnnotation, dataAttributes]);
   return (0, _react2.jsx)(Media, (0, _extends2.default)({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 var _default = exports.default = MediaWithDraftAnnotation;

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

@@ -114,8 +114,9 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
 
   // TODO: put appearance-based padding into theme instead
 
-  var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
+  var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
+  var padding = isFullPage ? _style.FullPagePadding * 2 : 0;
   var calcDimensions = (0, _react.useCallback)(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
@@ -152,6 +153,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
     initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
     setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  var isFullPageRenderer = isFullPage || isFullWidth;
   (0, _react.useEffect)(function () {
     var mediaSingleElement = ref.current;
     var handleMouseEnter = function handleMouseEnter(event) {
@@ -164,17 +166,17 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     var handleMouseLeave = function handleMouseLeave() {
       initiateTimeout();
     };
-    if (mediaSingleElement) {
+    if (mediaSingleElement && isFullPageRenderer) {
       mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
       mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
-      if (mediaSingleElement) {
+      if (mediaSingleElement && isFullPageRenderer) {
         mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
         mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

@@ -55,7 +55,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.19.0";
+var packageVersion = "109.19.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -101,6 +101,7 @@ const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
   mediaElement,
+  isDrafting = false,
   ...rest
 }) => {
   var _marks$map;
@@ -134,7 +135,7 @@ const CommentBadgeWrapper = ({
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   const onClick = e => {
@@ -168,7 +169,8 @@ class Media extends PureComponent {
         ssr,
         width,
         height,
-        mediaSingleElement
+        mediaSingleElement,
+        isDrafting = false
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -193,7 +195,8 @@ class Media extends PureComponent {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -274,7 +277,8 @@ const MediaWithDraftAnnotation = props => {
     'data-renderer-mark': true
   } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 export default MediaWithDraftAnnotation;

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

@@ -101,8 +101,9 @@ const MediaSingleWithChildren = props => {
 
   // TODO: put appearance-based padding into theme instead
 
-  const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  const isFullPage = rendererAppearance === 'full-page';
   const isFullWidth = rendererAppearance === 'full-width';
+  const padding = isFullPage ? FullPagePadding * 2 : 0;
   const calcDimensions = useCallback(mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     const maxWidth = containerWidth;
@@ -139,6 +140,7 @@ const MediaSingleWithChildren = props => {
     initiateTimeout,
     setIsWithinRange
   } = useAnnotationHoverDispatch();
+  const isFullPageRenderer = isFullPage || isFullWidth;
   useEffect(() => {
     const mediaSingleElement = ref.current;
     const handleMouseEnter = event => {
@@ -151,17 +153,17 @@ const MediaSingleWithChildren = props => {
     const handleMouseLeave = () => {
       initiateTimeout();
     };
-    if (mediaSingleElement) {
+    if (mediaSingleElement && isFullPageRenderer) {
       mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
       mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return () => {
-      if (mediaSingleElement) {
+      if (mediaSingleElement && isFullPageRenderer) {
         mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
         mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.19.0";
+const packageVersion = "109.19.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["marks", "mediaElement"];
+var _excluded = ["marks", "mediaElement", "isDrafting"];
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -112,6 +112,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     mediaElement = _ref5.mediaElement,
+    _ref5$isDrafting = _ref5.isDrafting,
+    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = _objectWithoutProperties(_ref5, _excluded);
   var _useState = useState('default'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -151,7 +153,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       observer.disconnect();
     };
   }, [mediaElement, setStatus]);
-  if (!activeParentIds.length) {
+  if (!isDrafting && !activeParentIds.length) {
     return null;
   }
   var onClick = function onClick(e) {
@@ -192,7 +194,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         ssr = _this$props.ssr,
         width = _this$props.width,
         height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement;
+        mediaSingleElement = _this$props.mediaSingleElement,
+        _this$props$isDraftin = _this$props.isDrafting,
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
@@ -214,7 +218,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
-        height: height
+        height: height,
+        isDrafting: isDrafting
       }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -302,7 +307,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     }) : dataAttributes;
   }, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
-    dataAttributes: dataAttributesWithDraftAnnotation
+    dataAttributes: dataAttributesWithDraftAnnotation,
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 export default MediaWithDraftAnnotation;

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

@@ -104,8 +104,9 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
 
   // TODO: put appearance-based padding into theme instead
 
-  var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
+  var padding = isFullPage ? FullPagePadding * 2 : 0;
   var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
@@ -142,6 +143,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
     initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
     setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  var isFullPageRenderer = isFullPage || isFullWidth;
   useEffect(function () {
     var mediaSingleElement = ref.current;
     var handleMouseEnter = function handleMouseEnter(event) {
@@ -154,17 +156,17 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     var handleMouseLeave = function handleMouseLeave() {
       initiateTimeout();
     };
-    if (mediaSingleElement) {
+    if (mediaSingleElement && isFullPageRenderer) {
       mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
       mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
-      if (mediaSingleElement) {
+      if (mediaSingleElement && isFullPageRenderer) {
         mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
         mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
+  }, [setHoverTarget, isFullPageRenderer, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

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

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.19.0";
+var packageVersion = "109.19.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/nodes/media/index.d.ts

@@ -25,6 +25,7 @@ export type MediaProps = MediaCardProps & {
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
+    isDrafting: boolean;
 };
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -25,6 +25,7 @@ export type MediaProps = MediaCardProps & {
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
+    isDrafting: boolean;
 };
 declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
 export default MediaWithDraftAnnotation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.19.0",
+  "version": "109.19.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"