@atlaskit/renderer 109.28.2 → 109.29.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 109.29.0
+
+### Minor Changes
+
+-   [#99230](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99230)
+    [`8b5008e65c2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b5008e65c2c) -
+    [ux] Feature Flag with fix for include page on media
+
 ## 109.28.2
 
 ### Patch Changes

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

@@ -215,13 +215,15 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props.height,
         mediaSingleElement = _this$props.mediaSingleElement,
         _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin,
+        isInPageInclude = _this$props.isInPageInclude;
       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);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -233,7 +235,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (0, _react2.jsx)(CommentBadgeWrapper, {
+      }, showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -300,6 +302,11 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  var parentElementClosest;
+  if (typeof document !== "undefined") {
+    var elementAtPos = pos && document.querySelector("[data-renderer-start-pos=\"".concat(pos, "\"]"));
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     position = _useState6[0],
@@ -321,7 +328,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = (0, _react.useMemo)(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
@@ -331,7 +338,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   }, [applyDraftAnnotation, dataAttributes]);
   return (0, _react2.jsx)(Media, (0, _extends2.default)({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 var _default = exports.default = MediaWithDraftAnnotation;

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.28.2";
+var packageVersion = "109.29.0";
 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

@@ -192,7 +192,8 @@ class Media extends PureComponent {
         width,
         height,
         mediaSingleElement,
-        isDrafting = false
+        isDrafting = false,
+        isInPageInclude
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -200,6 +201,7 @@ class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      const showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
@@ -213,7 +215,7 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && jsx(CommentBadgeWrapper, {
+      }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -280,6 +282,11 @@ const MediaWithDraftAnnotation = props => {
     dataAttributes
   } = props;
   const pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  let parentElementClosest;
+  if (typeof document !== "undefined") {
+    const elementAtPos = pos && document.querySelector(`[data-renderer-start-pos="${pos}"]`);
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   const [position, setPosition] = useState();
   const [shouldApplyDraftAnnotation, setShouldApplyDraftAnnotation] = useState(false);
   useEffect(() => {
@@ -295,7 +302,7 @@ const MediaWithDraftAnnotation = props => {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
     ...dataAttributes,
@@ -304,7 +311,8 @@ const MediaWithDraftAnnotation = props => {
   } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 export default MediaWithDraftAnnotation;

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.28.2";
+const packageVersion = "109.29.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

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

@@ -206,13 +206,15 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props.height,
         mediaSingleElement = _this$props.mediaSingleElement,
         _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin,
+        isInPageInclude = _this$props.isInPageInclude;
       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);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -224,7 +226,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && jsx(CommentBadgeWrapper, {
+      }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -291,6 +293,11 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  var parentElementClosest;
+  if (typeof document !== "undefined") {
+    var elementAtPos = pos && document.querySelector("[data-renderer-start-pos=\"".concat(pos, "\"]"));
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     position = _useState6[0],
@@ -312,7 +319,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = useMemo(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
@@ -322,7 +329,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   }, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 export default MediaWithDraftAnnotation;

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.28.2";
+var packageVersion = "109.29.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

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

@@ -26,6 +26,7 @@ export type MediaProps = MediaCardProps & {
     width?: number;
     height?: number;
     isDrafting: boolean;
+    isInPageInclude?: boolean;
 };
 export declare const linkStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

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

@@ -26,6 +26,7 @@ export type MediaProps = MediaCardProps & {
     width?: number;
     height?: number;
     isDrafting: boolean;
+    isInPageInclude?: boolean;
 };
 export declare const linkStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/package.json

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