@atlaskit/editor-plugin-media 1.13.4 → 1.13.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-media
 
+## 1.13.5
+
+### Patch Changes
+
+- [#87596](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87596) [`e0b95c3a4fba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0b95c3a4fba) - Add new UI badge for media node to trigger comments
+- Updated dependencies
+
 ## 1.13.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -33,6 +33,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _captions = require("../commands/captions");
 var _main = require("../pm-plugins/main");
 var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
+var _CommentBadge = require("../ui/CommentBadge");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
@@ -328,7 +329,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _pluginInjectionApi$m;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -344,10 +345,13 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         editorViewMode = _this$props2.editorViewMode,
         mediaPluginState = _this$props2.mediaPluginState,
         editorDisabled = _this$props2.editorDisabled;
-      var _ref4 = node.attrs,
-        layout = _ref4.layout,
-        widthType = _ref4.widthType,
-        mediaSingleWidthAttribute = _ref4.width;
+      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
+        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
+        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
+      var _ref5 = node.attrs,
+        layout = _ref5.layout,
+        widthType = _ref5.widthType,
+        mediaSingleWidthAttribute = _ref5.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -431,7 +435,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         css: figureWrapperStyles,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, (0, _react2.jsx)("div", {
+      }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        view: view,
+        api: pluginInjectionApi,
+        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        getPos: getPos
+      }), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
@@ -463,19 +472,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    mediaProvider = _ref5.mediaProvider,
-    contextIdentifierProvider = _ref5.contextIdentifierProvider,
-    node = _ref5.node,
-    getPos = _ref5.getPos,
-    mediaOptions = _ref5.mediaOptions,
-    view = _ref5.view,
-    fullWidthMode = _ref5.fullWidthMode,
-    selected = _ref5.selected,
-    eventDispatcher = _ref5.eventDispatcher,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
-    forwardRef = _ref5.forwardRef;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    mediaProvider = _ref6.mediaProvider,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -618,9 +627,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref6) {
-          var mediaProvider = _ref6.mediaProvider,
-            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var mediaProvider = _ref7.mediaProvider,
+            contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentBadge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+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; }
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
+  var api = _ref.api,
+    mediaNode = _ref.mediaNode,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    intl = _ref.intl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  var _view$state$schema = view.state.schema,
+    media = _view$state$schema.nodes.media,
+    annotation = _view$state$schema.marks.annotation,
+    state = view.state,
+    dispatch = view.dispatch;
+  var onClick = (0, _react.useCallback)(function () {
+    if (api.annotation && mediaNode) {
+      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  var pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  })) {
+    return null;
+  }
+  var mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);

package/dist/es2019/nodeviews/mediaSingle.js

@@ -18,6 +18,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CommentBadge } from '../ui/CommentBadge';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -229,7 +230,7 @@ export default class MediaSingleNode extends Component {
     });
   }
   render() {
-    var _pluginInjectionApi$m, _pluginInjectionApi$m2;
+    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2;
     const {
       selected,
       getPos,
@@ -248,6 +249,9 @@ export default class MediaSingleNode extends Component {
       mediaPluginState,
       editorDisabled
     } = this.props;
+    const {
+      commentsOnMedia = false
+    } = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
     const {
       layout,
       widthType,
@@ -344,7 +348,12 @@ export default class MediaSingleNode extends Component {
       css: figureWrapperStyles,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
-    }, jsx("div", {
+    }, commentsOnMedia && jsx(CommentBadge, {
+      view: view,
+      api: pluginInjectionApi,
+      mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+      getPos: getPos
+    }), jsx("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,

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

@@ -0,0 +1,50 @@
+import React, { useCallback } 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';
+const CommentBadgeWrapper = ({
+  api,
+  mediaNode,
+  view,
+  getPos,
+  intl
+}) => {
+  const {
+    annotationState
+  } = useSharedPluginState(api, ['annotation']);
+  const {
+    state: {
+      schema: {
+        nodes: {
+          media
+        },
+        marks: {
+          annotation
+        }
+      }
+    },
+    state,
+    dispatch
+  } = view;
+  const onClick = useCallback(() => {
+    if (api.annotation && mediaNode) {
+      const {
+        showCommentForBlockNode
+      } = api.annotation.actions;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  const pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id])) {
+    return null;
+  }
+  const mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+export const CommentBadge = injectIntl(CommentBadgeWrapper);

package/dist/esm/nodeviews/mediaSingle.js

@@ -31,6 +31,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CommentBadge } from '../ui/CommentBadge';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -320,7 +321,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _pluginInjectionApi$m;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -336,10 +337,13 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         editorViewMode = _this$props2.editorViewMode,
         mediaPluginState = _this$props2.mediaPluginState,
         editorDisabled = _this$props2.editorDisabled;
-      var _ref4 = node.attrs,
-        layout = _ref4.layout,
-        widthType = _ref4.widthType,
-        mediaSingleWidthAttribute = _ref4.width;
+      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
+        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
+        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
+      var _ref5 = node.attrs,
+        layout = _ref5.layout,
+        widthType = _ref5.widthType,
+        mediaSingleWidthAttribute = _ref5.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -423,7 +427,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         css: figureWrapperStyles,
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, jsx("div", {
+      }, commentsOnMedia && jsx(CommentBadge, {
+        view: view,
+        api: pluginInjectionApi,
+        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        getPos: getPos
+      }), jsx("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
         ref: this.captionPlaceHolderRef,
@@ -456,19 +465,19 @@ _defineProperty(MediaSingleNode, "defaultProps", {
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
 export { MediaSingleNode as default };
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    mediaProvider = _ref5.mediaProvider,
-    contextIdentifierProvider = _ref5.contextIdentifierProvider,
-    node = _ref5.node,
-    getPos = _ref5.getPos,
-    mediaOptions = _ref5.mediaOptions,
-    view = _ref5.view,
-    fullWidthMode = _ref5.fullWidthMode,
-    selected = _ref5.selected,
-    eventDispatcher = _ref5.eventDispatcher,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
-    forwardRef = _ref5.forwardRef;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    mediaProvider = _ref6.mediaProvider,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -611,9 +620,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref6) {
-          var mediaProvider = _ref6.mediaProvider,
-            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var mediaProvider = _ref7.mediaProvider,
+            contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,

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

@@ -0,0 +1,39 @@
+import React, { useCallback } 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';
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
+  var api = _ref.api,
+    mediaNode = _ref.mediaNode,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    intl = _ref.intl;
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  var _view$state$schema = view.state.schema,
+    media = _view$state$schema.nodes.media,
+    annotation = _view$state$schema.marks.annotation,
+    state = view.state,
+    dispatch = view.dispatch;
+  var onClick = useCallback(function () {
+    if (api.annotation && mediaNode) {
+      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  var pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  })) {
+    return null;
+  }
+  var mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+export var CommentBadge = injectIntl(CommentBadgeWrapper);

package/dist/types/ui/CommentBadge/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+import type { getPosHandler } from '../../types';
+type CommentBadgeProps = {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+};
+export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
+    WrappedComponent: React.ComponentType<CommentBadgeProps>;
+};
+export {};

package/dist/types-ts4.5/ui/CommentBadge/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+import type { getPosHandler } from '../../types';
+type CommentBadgeProps = {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+};
+export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
+    WrappedComponent: React.ComponentType<CommentBadgeProps>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "@atlaskit/editor-common": "^78.23.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.5.6",
+    "@atlaskit/editor-plugin-annotation": "1.5.7",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",