@atlaskit/editor-plugin-media 1.14.4 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-media
 
+## 1.15.0
+
+### Minor Changes
+
+- [#90742](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90742) [`f893b885cc0a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f893b885cc0a) - [ux] Add comment on media badge states
+
+### Patch Changes
+
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- Updated dependencies
+
 ## 1.14.4
 
 ### Patch Changes

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

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommentBadge = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -17,6 +19,10 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     view = _ref.view,
     getPos = _ref.getPos,
     intl = _ref.intl;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    entered = _useState2[0],
+    setEntered = _useState2[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
     annotationState = _useSharedPluginState.annotationState;
   var _view$state$schema = view.state.schema,
@@ -24,6 +30,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     annotation = _view$state$schema.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
+  var status = (0, _react.useMemo)(function () {
+    if (!annotationState || !mediaNode) {
+      return 'default';
+    }
+    return annotationState.selectedAnnotations.some(function (annotation) {
+      return !!mediaNode.marks.find(function (mark) {
+        return mark.attrs.id === annotation.id;
+      });
+    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
+  }, [annotationState, mediaNode]);
   var onClick = (0, _react.useCallback)(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -43,7 +59,14 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     onClick: onClick,
     mediaElement: mediaElement,
     intl: intl,
-    isEditor: true
+    isEditor: true,
+    status: entered ? 'entered' : status,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    }
   });
 };
 var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
@@ -9,6 +9,7 @@ const CommentBadgeWrapper = ({
   getPos,
   intl
 }) => {
+  const [entered, setEntered] = useState(false);
   const {
     annotationState
   } = useSharedPluginState(api, ['annotation']);
@@ -26,6 +27,12 @@ const CommentBadgeWrapper = ({
     state,
     dispatch
   } = view;
+  const status = useMemo(() => {
+    if (!annotationState || !mediaNode) {
+      return 'default';
+    }
+    return annotationState.selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
+  }, [annotationState, mediaNode]);
   const onClick = useCallback(() => {
     if (api.annotation && mediaNode) {
       const {
@@ -45,7 +52,10 @@ const CommentBadgeWrapper = ({
     onClick: onClick,
     mediaElement: mediaElement,
     intl: intl,
-    isEditor: true
+    isEditor: true,
+    status: entered ? 'entered' : status,
+    onMouseEnter: () => setEntered(true),
+    onMouseLeave: () => setEntered(false)
   });
 };
 export const CommentBadge = injectIntl(CommentBadgeWrapper);

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
@@ -8,6 +9,10 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     view = _ref.view,
     getPos = _ref.getPos,
     intl = _ref.intl;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    entered = _useState2[0],
+    setEntered = _useState2[1];
   var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
     annotationState = _useSharedPluginState.annotationState;
   var _view$state$schema = view.state.schema,
@@ -15,6 +20,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     annotation = _view$state$schema.marks.annotation,
     state = view.state,
     dispatch = view.dispatch;
+  var status = useMemo(function () {
+    if (!annotationState || !mediaNode) {
+      return 'default';
+    }
+    return annotationState.selectedAnnotations.some(function (annotation) {
+      return !!mediaNode.marks.find(function (mark) {
+        return mark.attrs.id === annotation.id;
+      });
+    }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
+  }, [annotationState, mediaNode]);
   var onClick = useCallback(function () {
     if (api.annotation && mediaNode) {
       var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
@@ -34,7 +49,14 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
     onClick: onClick,
     mediaElement: mediaElement,
     intl: intl,
-    isEditor: true
+    isEditor: true,
+    status: entered ? 'entered' : status,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    }
   });
 };
 export var CommentBadge = injectIntl(CommentBadgeWrapper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.14.4",
+  "version": "1.15.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,14 +33,14 @@
     "./types": "./src/types.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.8.0",
+    "@atlaskit/adf-schema": "^35.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.12.0",
-    "@atlaskit/editor-common": "^78.26.0",
+    "@atlaskit/editor-common": "^78.28.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.5.8",
+    "@atlaskit/editor-plugin-annotation": "1.5.9",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",