@atlaskit/editor-plugin-media 1.28.5 → 1.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/nodeviews/mediaSingle.js +72 -24
  3. package/dist/cjs/ui/CommentBadge/index.js +67 -2
  4. package/dist/es2019/nodeviews/mediaSingle.js +51 -5
  5. package/dist/es2019/ui/CommentBadge/index.js +68 -3
  6. package/dist/esm/nodeviews/mediaSingle.js +74 -25
  7. package/dist/esm/ui/CommentBadge/index.js +68 -3
  8. package/dist/types/nodeviews/mediaSingle.d.ts +1 -0
  9. package/dist/types/ui/CommentBadge/index.d.ts +1 -0
  10. package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts +1 -0
  11. package/dist/types-ts4.5/ui/CommentBadge/index.d.ts +1 -0
  12. package/package.json +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.29.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#130065](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130065)
8
+ [`e71a357ea40dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e71a357ea40dd) -
9
+ [ux] [ED-24323] Add external image badge for externally hosted images
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.28.5
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/nodeviews/mediaSingle.js CHANGED
@@ -72,6 +72,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
72
72
  });
73
73
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
74
74
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
75
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
75
76
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
76
77
  var node = _this.props.node.firstChild;
77
78
  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -331,7 +332,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
331
332
  }, {
332
333
  key: "render",
333
334
  value: function render() {
334
- var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
335
+ var _mediaOptions$getEdit,
336
+ _pluginInjectionApi$m,
337
+ _node$firstChild,
338
+ _this2 = this,
339
+ _mediaOptions$getEdit3,
340
+ _mediaOptions$getEdit4;
335
341
  var _this$props2 = this.props,
336
342
  selected = _this$props2.selected,
337
343
  getPos = _this$props2.getPos,
@@ -448,6 +454,34 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
448
454
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
449
455
  }
450
456
  var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
457
+ var insertMediaPluginPhaseOneFeatureFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
458
+ var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
459
+ var commentBadgeOffset = function commentBadgeOffset() {
460
+ if (_this2.commentBadgeRef.current) {
461
+ var _mediaOptions$getEdit2;
462
+ var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
463
+ var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
464
+ var isMediaInsideTable = function isMediaInsideTable() {
465
+ var pos = getPos();
466
+ if (pos !== undefined) {
467
+ var _$pos2 = view.state.doc.resolve(pos);
468
+ var _table2 = view.state.schema.nodes.table;
469
+ var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)(_$pos2, [_table2]);
470
+ return Boolean(foundTableNode);
471
+ }
472
+ return false;
473
+ };
474
+ if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
475
+ return commentBadgeWidth + 2;
476
+ }
477
+ return commentBadgeWidth + 14;
478
+ }
479
+ return 0;
480
+ };
481
+ var currentMediaElement = function currentMediaElement() {
482
+ var pos = getPos();
483
+ return view.domAtPos(pos + 1).node;
484
+ };
451
485
  var MediaChildren = (0, _react2.jsx)("figure", {
452
486
  ref: this.mediaSingleWrapperRef,
453
487
  css: figureWrapperStyles
@@ -455,15 +489,29 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
455
489
  ,
456
490
  className: _styles.MediaSingleNodeSelector,
457
491
  onClick: this.onMediaSingleClicked
458
- }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
459
- commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
492
+ }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
493
+ commentBadgeRightOffset: commentBadgeOffset(),
494
+ mediaElement: currentMediaElement(),
495
+ mediaHeight: height,
496
+ mediaWidth: width
497
+ }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? (0, _react2.jsx)(_CommentBadge.CommentBadgeWithRef, {
498
+ ref: this.commentBadgeRef,
499
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
460
500
  view: view,
461
501
  api: pluginInjectionApi,
462
502
  mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
463
503
  badgeOffsetRight: badgeOffsetRight,
464
504
  getPos: getPos,
465
505
  isDrafting: isCurrentNodeDrafting
466
- }), (0, _react2.jsx)("div", {
506
+ }) : (0, _react2.jsx)(_CommentBadge.CommentBadge, {
507
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
508
+ view: view,
509
+ api: pluginInjectionApi,
510
+ mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
511
+ badgeOffsetRight: badgeOffsetRight,
512
+ getPos: getPos,
513
+ isDrafting: isCurrentNodeDrafting
514
+ })), (0, _react2.jsx)("div", {
467
515
  ref: this.props.forwardRef
468
516
  }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
469
517
  ref: this.captionPlaceHolderRef,
@@ -538,18 +586,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
538
586
  (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
539
587
  var _super2 = _createSuper(MediaSingleNodeView);
540
588
  function MediaSingleNodeView() {
541
- var _this2;
589
+ var _this3;
542
590
  (0, _classCallCheck2.default)(this, MediaSingleNodeView);
543
591
  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
544
592
  args[_key2] = arguments[_key2];
545
593
  }
546
- _this2 = _super2.call.apply(_super2, [this].concat(args));
547
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "lastOffsetLeft", 0);
548
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "forceViewUpdate", false);
549
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "selectionType", null);
550
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkAndUpdateSelectionType", function () {
551
- var getPos = _this2.getPos;
552
- var selection = _this2.view.state.selection;
594
+ _this3 = _super2.call.apply(_super2, [this].concat(args));
595
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "lastOffsetLeft", 0);
596
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "forceViewUpdate", false);
597
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "selectionType", null);
598
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "checkAndUpdateSelectionType", function () {
599
+ var getPos = _this3.getPos;
600
+ var selection = _this3.view.state.selection;
553
601
 
554
602
  /**
555
603
  * ED-19831
@@ -562,15 +610,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
562
610
  } catch (e) {
563
611
  pos = undefined;
564
612
  }
565
- var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
566
- _this2.selectionType = isNodeSelected;
613
+ var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
614
+ _this3.selectionType = isNodeSelected;
567
615
  return isNodeSelected;
568
616
  });
569
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "isNodeSelected", function () {
570
- _this2.checkAndUpdateSelectionType();
571
- return _this2.selectionType !== null;
617
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "isNodeSelected", function () {
618
+ _this3.checkAndUpdateSelectionType();
619
+ return _this3.selectionType !== null;
572
620
  });
573
- return _this2;
621
+ return _this3;
574
622
  }
575
623
  (0, _createClass2.default)(MediaSingleNodeView, [{
576
624
  key: "createDomRef",
@@ -635,10 +683,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
635
683
  }, {
636
684
  key: "update",
637
685
  value: function update(node, decorations, _innerDecorations, isValidUpdate) {
638
- var _this3 = this;
686
+ var _this4 = this;
639
687
  if (!isValidUpdate) {
640
688
  isValidUpdate = function isValidUpdate(currentNode, newNode) {
641
- return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
689
+ return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
642
690
  };
643
691
  }
644
692
  return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -646,7 +694,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
646
694
  }, {
647
695
  key: "render",
648
696
  value: function render(props, forwardRef) {
649
- var _this4 = this;
697
+ var _this5 = this;
650
698
  var _this$reactComponentP = this.reactComponentProps,
651
699
  eventDispatcher = _this$reactComponentP.eventDispatcher,
652
700
  fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -671,12 +719,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
671
719
  pluginInjectionApi: pluginInjectionApi,
672
720
  mediaProvider: mediaProvider,
673
721
  contextIdentifierProvider: contextIdentifierProvider,
674
- node: _this4.node,
722
+ node: _this5.node,
675
723
  getPos: getPos,
676
724
  mediaOptions: mediaOptions,
677
- view: _this4.view,
725
+ view: _this5.view,
678
726
  fullWidthMode: fullWidthMode,
679
- selected: _this4.isNodeSelected,
727
+ selected: _this5.isNodeSelected,
680
728
  eventDispatcher: eventDispatcher,
681
729
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
682
730
  forwardRef: forwardRef,
package/dist/cjs/ui/CommentBadge/index.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.CommentBadge = void 0;
8
+ exports.CommentBadgeWithRef = exports.CommentBadge = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactIntlNext = require("react-intl-next");
@@ -75,4 +75,69 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
75
75
  }
76
76
  });
77
77
  };
78
- var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
78
+ var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
79
+
80
+ // This is a copy of above component with adding forwardRef.
81
+ // Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
82
+ var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
83
+ var api = _ref2.api,
84
+ mediaNode = _ref2.mediaNode,
85
+ view = _ref2.view,
86
+ getPos = _ref2.getPos,
87
+ isDrafting = _ref2.isDrafting,
88
+ badgeOffsetRight = _ref2.badgeOffsetRight,
89
+ commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
90
+ var intl = (0, _reactIntlNext.useIntl)();
91
+ var _useState3 = (0, _react.useState)(false),
92
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
93
+ entered = _useState4[0],
94
+ setEntered = _useState4[1];
95
+ var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['annotation']),
96
+ annotationState = _useSharedPluginState2.annotationState;
97
+ var _view$state$schema2 = view.state.schema,
98
+ media = _view$state$schema2.nodes.media,
99
+ annotation = _view$state$schema2.marks.annotation,
100
+ state = view.state,
101
+ dispatch = view.dispatch;
102
+ var status = (0, _react.useMemo)(function () {
103
+ if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
104
+ return 'default';
105
+ }
106
+ return annotationState.selectedAnnotations.some(function (annotation) {
107
+ return !!mediaNode.marks.find(function (mark) {
108
+ return mark.attrs.id === annotation.id;
109
+ });
110
+ }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
111
+ }, [annotationState, mediaNode]);
112
+ var onClick = (0, _react.useCallback)(function () {
113
+ if (api.annotation && mediaNode) {
114
+ var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
115
+ showCommentForBlockNode(mediaNode, _analytics.VIEW_METHOD.BADGE)(state, dispatch);
116
+ }
117
+ }, [api.annotation, dispatch, mediaNode, state]);
118
+ var pos = getPos();
119
+ var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
120
+ return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
121
+ });
122
+ if (!isDrafting && hasNoComments || !mediaNode) {
123
+ return null;
124
+ }
125
+ var mediaSingleElement = view.domAtPos(pos + 1).node;
126
+ return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
127
+ ref: ref,
128
+ commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
129
+ badgeOffsetRight: badgeOffsetRight,
130
+ width: mediaNode.attrs.width,
131
+ height: mediaNode.attrs.height,
132
+ onClick: onClick,
133
+ mediaSingleElement: mediaSingleElement,
134
+ intl: intl,
135
+ status: entered ? 'entered' : status,
136
+ onMouseEnter: function onMouseEnter() {
137
+ return setEntered(true);
138
+ },
139
+ onMouseLeave: function onMouseLeave() {
140
+ return setEntered(false);
141
+ }
142
+ });
143
+ });
package/dist/es2019/nodeviews/mediaSingle.js CHANGED
@@ -11,6 +11,7 @@ import React, { Component, Fragment, useMemo } from 'react';
11
11
  import { css, jsx } from '@emotion/react';
12
12
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
13
13
  import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
14
+ import { ExternalImageBadge } from '@atlaskit/editor-common/media-single';
14
15
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
15
16
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
16
17
  import { MediaSingle } from '@atlaskit/editor-common/ui';
@@ -23,7 +24,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
23
24
  import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
24
25
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
25
26
  import CaptionPlaceholder from '../ui/CaptionPlaceholder';
26
- import { CommentBadge } from '../ui/CommentBadge';
27
+ import { CommentBadge, CommentBadgeWithRef } from '../ui/CommentBadge';
27
28
  import ResizableMediaSingle from '../ui/ResizableMediaSingle';
28
29
  import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
29
30
  import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -46,6 +47,7 @@ export default class MediaSingleNode extends Component {
46
47
  });
47
48
  _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
48
49
  _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
50
+ _defineProperty(this, "commentBadgeRef", /*#__PURE__*/React.createRef());
49
51
  _defineProperty(this, "createOrUpdateMediaNodeUpdater", props => {
50
52
  const node = this.props.node.firstChild;
51
53
  const updaterProps = {
@@ -234,7 +236,7 @@ export default class MediaSingleNode extends Component {
234
236
  });
235
237
  }
236
238
  render() {
237
- var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit2, _mediaOptions$getEdit3;
239
+ var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit4, _mediaOptions$getEdit5, _mediaOptions$getEdit6, _mediaOptions$getEdit7;
238
240
  const {
239
241
  selected,
240
242
  getPos,
@@ -365,6 +367,36 @@ export default class MediaSingleNode extends Component {
365
367
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
366
368
  }
367
369
  const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
370
+ const insertMediaPluginPhaseOneFeatureFlag = fg('platform_editor_insert_media_plugin_phase_one');
371
+ const shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
372
+ const commentBadgeOffset = () => {
373
+ if (this.commentBadgeRef.current) {
374
+ var _mediaOptions$getEdit2, _mediaOptions$getEdit3;
375
+ const commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix;
376
+ const commentBadgeWidth = this.commentBadgeRef.current.offsetWidth;
377
+ const isMediaInsideTable = () => {
378
+ const pos = getPos();
379
+ if (pos !== undefined) {
380
+ const $pos = view.state.doc.resolve(pos);
381
+ const {
382
+ table
383
+ } = view.state.schema.nodes;
384
+ const foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
385
+ return Boolean(foundTableNode);
386
+ }
387
+ return false;
388
+ };
389
+ if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
390
+ return commentBadgeWidth + 2;
391
+ }
392
+ return commentBadgeWidth + 14;
393
+ }
394
+ return 0;
395
+ };
396
+ const currentMediaElement = () => {
397
+ const pos = getPos();
398
+ return view.domAtPos(pos + 1).node;
399
+ };
368
400
  const MediaChildren = jsx("figure", {
369
401
  ref: this.mediaSingleWrapperRef,
370
402
  css: figureWrapperStyles
@@ -372,15 +404,29 @@ export default class MediaSingleNode extends Component {
372
404
  ,
373
405
  className: MediaSingleNodeSelector,
374
406
  onClick: this.onMediaSingleClicked
375
- }, commentsOnMedia && jsx(CommentBadge, {
376
- commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
407
+ }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
408
+ commentBadgeRightOffset: commentBadgeOffset(),
409
+ mediaElement: currentMediaElement(),
410
+ mediaHeight: height,
411
+ mediaWidth: width
412
+ }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? jsx(CommentBadgeWithRef, {
413
+ ref: this.commentBadgeRef,
414
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : (_mediaOptions$getEdit5 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit5 === void 0 ? void 0 : _mediaOptions$getEdit5.commentsOnMediaBugFix,
415
+ view: view,
416
+ api: pluginInjectionApi,
417
+ mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
418
+ badgeOffsetRight: badgeOffsetRight,
419
+ getPos: getPos,
420
+ isDrafting: isCurrentNodeDrafting
421
+ }) : jsx(CommentBadge, {
422
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit6 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit6 === void 0 ? void 0 : (_mediaOptions$getEdit7 = _mediaOptions$getEdit6.call(mediaOptions)) === null || _mediaOptions$getEdit7 === void 0 ? void 0 : _mediaOptions$getEdit7.commentsOnMediaBugFix,
377
423
  view: view,
378
424
  api: pluginInjectionApi,
379
425
  mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
380
426
  badgeOffsetRight: badgeOffsetRight,
381
427
  getPos: getPos,
382
428
  isDrafting: isCurrentNodeDrafting
383
- }), jsx("div", {
429
+ })), jsx("div", {
384
430
  ref: this.props.forwardRef
385
431
  }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
386
432
  ref: this.captionPlaceHolderRef,
package/dist/es2019/ui/CommentBadge/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useCallback, useMemo, useState } from 'react';
2
- import { injectIntl } from 'react-intl-next';
1
+ import React, { forwardRef, useCallback, useMemo, useState } from 'react';
2
+ import { injectIntl, useIntl } from 'react-intl-next';
3
3
  import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
5
  import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
@@ -64,4 +64,69 @@ const CommentBadgeWrapper = ({
64
64
  onMouseLeave: () => setEntered(false)
65
65
  });
66
66
  };
67
- export const CommentBadge = injectIntl(CommentBadgeWrapper);
67
+ export const CommentBadge = injectIntl(CommentBadgeWrapper);
68
+
69
+ // This is a copy of above component with adding forwardRef.
70
+ // Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
71
+ export const CommentBadgeWithRef = /*#__PURE__*/forwardRef(({
72
+ api,
73
+ mediaNode,
74
+ view,
75
+ getPos,
76
+ isDrafting,
77
+ badgeOffsetRight,
78
+ commentsOnMediaBugFixEnabled
79
+ }, ref) => {
80
+ const intl = useIntl();
81
+ const [entered, setEntered] = useState(false);
82
+ const {
83
+ annotationState
84
+ } = useSharedPluginState(api, ['annotation']);
85
+ const {
86
+ state: {
87
+ schema: {
88
+ nodes: {
89
+ media
90
+ },
91
+ marks: {
92
+ annotation
93
+ }
94
+ }
95
+ },
96
+ state,
97
+ dispatch
98
+ } = view;
99
+ const status = useMemo(() => {
100
+ if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
101
+ return 'default';
102
+ }
103
+ return annotationState.selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
104
+ }, [annotationState, mediaNode]);
105
+ const onClick = useCallback(() => {
106
+ if (api.annotation && mediaNode) {
107
+ const {
108
+ showCommentForBlockNode
109
+ } = api.annotation.actions;
110
+ showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
111
+ }
112
+ }, [api.annotation, dispatch, mediaNode, state]);
113
+ const pos = getPos();
114
+ const hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id]);
115
+ if (!isDrafting && hasNoComments || !mediaNode) {
116
+ return null;
117
+ }
118
+ const mediaSingleElement = view.domAtPos(pos + 1).node;
119
+ return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
120
+ ref: ref,
121
+ commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
122
+ badgeOffsetRight: badgeOffsetRight,
123
+ width: mediaNode.attrs.width,
124
+ height: mediaNode.attrs.height,
125
+ onClick: onClick,
126
+ mediaSingleElement: mediaSingleElement,
127
+ intl: intl,
128
+ status: entered ? 'entered' : status,
129
+ onMouseEnter: () => setEntered(true),
130
+ onMouseLeave: () => setEntered(false)
131
+ });
132
+ });
package/dist/esm/nodeviews/mediaSingle.js CHANGED
@@ -24,6 +24,7 @@ import React, { Component, Fragment, useMemo } from 'react';
24
24
  import { css, jsx } from '@emotion/react';
25
25
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
26
26
  import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
27
+ import { ExternalImageBadge } from '@atlaskit/editor-common/media-single';
27
28
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
28
29
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
29
30
  import { MediaSingle } from '@atlaskit/editor-common/ui';
@@ -36,7 +37,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
36
37
  import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
37
38
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
38
39
  import CaptionPlaceholder from '../ui/CaptionPlaceholder';
39
- import { CommentBadge } from '../ui/CommentBadge';
40
+ import { CommentBadge, CommentBadgeWithRef } from '../ui/CommentBadge';
40
41
  import ResizableMediaSingle from '../ui/ResizableMediaSingle';
41
42
  import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
42
43
  import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -66,6 +67,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
66
67
  });
67
68
  _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
68
69
  _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
70
+ _defineProperty(_assertThisInitialized(_this), "commentBadgeRef", /*#__PURE__*/React.createRef());
69
71
  _defineProperty(_assertThisInitialized(_this), "createOrUpdateMediaNodeUpdater", function (props) {
70
72
  var node = _this.props.node.firstChild;
71
73
  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -325,7 +327,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
325
327
  }, {
326
328
  key: "render",
327
329
  value: function render() {
328
- var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
330
+ var _mediaOptions$getEdit,
331
+ _pluginInjectionApi$m,
332
+ _node$firstChild,
333
+ _this2 = this,
334
+ _mediaOptions$getEdit3,
335
+ _mediaOptions$getEdit4;
329
336
  var _this$props2 = this.props,
330
337
  selected = _this$props2.selected,
331
338
  getPos = _this$props2.getPos,
@@ -442,6 +449,34 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
442
449
  shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
443
450
  }
444
451
  var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
452
+ var insertMediaPluginPhaseOneFeatureFlag = fg('platform_editor_insert_media_plugin_phase_one');
453
+ var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
454
+ var commentBadgeOffset = function commentBadgeOffset() {
455
+ if (_this2.commentBadgeRef.current) {
456
+ var _mediaOptions$getEdit2;
457
+ var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
458
+ var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
459
+ var isMediaInsideTable = function isMediaInsideTable() {
460
+ var pos = getPos();
461
+ if (pos !== undefined) {
462
+ var _$pos2 = view.state.doc.resolve(pos);
463
+ var _table2 = view.state.schema.nodes.table;
464
+ var foundTableNode = findParentNodeOfTypeClosestToPos(_$pos2, [_table2]);
465
+ return Boolean(foundTableNode);
466
+ }
467
+ return false;
468
+ };
469
+ if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
470
+ return commentBadgeWidth + 2;
471
+ }
472
+ return commentBadgeWidth + 14;
473
+ }
474
+ return 0;
475
+ };
476
+ var currentMediaElement = function currentMediaElement() {
477
+ var pos = getPos();
478
+ return view.domAtPos(pos + 1).node;
479
+ };
445
480
  var MediaChildren = jsx("figure", {
446
481
  ref: this.mediaSingleWrapperRef,
447
482
  css: figureWrapperStyles
@@ -449,15 +484,29 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
449
484
  ,
450
485
  className: MediaSingleNodeSelector,
451
486
  onClick: this.onMediaSingleClicked
452
- }, commentsOnMedia && jsx(CommentBadge, {
453
- commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
487
+ }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
488
+ commentBadgeRightOffset: commentBadgeOffset(),
489
+ mediaElement: currentMediaElement(),
490
+ mediaHeight: height,
491
+ mediaWidth: width
492
+ }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? jsx(CommentBadgeWithRef, {
493
+ ref: this.commentBadgeRef,
494
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
454
495
  view: view,
455
496
  api: pluginInjectionApi,
456
497
  mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
457
498
  badgeOffsetRight: badgeOffsetRight,
458
499
  getPos: getPos,
459
500
  isDrafting: isCurrentNodeDrafting
460
- }), jsx("div", {
501
+ }) : jsx(CommentBadge, {
502
+ commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
503
+ view: view,
504
+ api: pluginInjectionApi,
505
+ mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
506
+ badgeOffsetRight: badgeOffsetRight,
507
+ getPos: getPos,
508
+ isDrafting: isCurrentNodeDrafting
509
+ })), jsx("div", {
461
510
  ref: this.props.forwardRef
462
511
  }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
463
512
  ref: this.captionPlaceHolderRef,
@@ -533,18 +582,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
533
582
  _inherits(MediaSingleNodeView, _ReactNodeView);
534
583
  var _super2 = _createSuper(MediaSingleNodeView);
535
584
  function MediaSingleNodeView() {
536
- var _this2;
585
+ var _this3;
537
586
  _classCallCheck(this, MediaSingleNodeView);
538
587
  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
539
588
  args[_key2] = arguments[_key2];
540
589
  }
541
- _this2 = _super2.call.apply(_super2, [this].concat(args));
542
- _defineProperty(_assertThisInitialized(_this2), "lastOffsetLeft", 0);
543
- _defineProperty(_assertThisInitialized(_this2), "forceViewUpdate", false);
544
- _defineProperty(_assertThisInitialized(_this2), "selectionType", null);
545
- _defineProperty(_assertThisInitialized(_this2), "checkAndUpdateSelectionType", function () {
546
- var getPos = _this2.getPos;
547
- var selection = _this2.view.state.selection;
590
+ _this3 = _super2.call.apply(_super2, [this].concat(args));
591
+ _defineProperty(_assertThisInitialized(_this3), "lastOffsetLeft", 0);
592
+ _defineProperty(_assertThisInitialized(_this3), "forceViewUpdate", false);
593
+ _defineProperty(_assertThisInitialized(_this3), "selectionType", null);
594
+ _defineProperty(_assertThisInitialized(_this3), "checkAndUpdateSelectionType", function () {
595
+ var getPos = _this3.getPos;
596
+ var selection = _this3.view.state.selection;
548
597
 
549
598
  /**
550
599
  * ED-19831
@@ -557,15 +606,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
557
606
  } catch (e) {
558
607
  pos = undefined;
559
608
  }
560
- var isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
561
- _this2.selectionType = isNodeSelected;
609
+ var isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
610
+ _this3.selectionType = isNodeSelected;
562
611
  return isNodeSelected;
563
612
  });
564
- _defineProperty(_assertThisInitialized(_this2), "isNodeSelected", function () {
565
- _this2.checkAndUpdateSelectionType();
566
- return _this2.selectionType !== null;
613
+ _defineProperty(_assertThisInitialized(_this3), "isNodeSelected", function () {
614
+ _this3.checkAndUpdateSelectionType();
615
+ return _this3.selectionType !== null;
567
616
  });
568
- return _this2;
617
+ return _this3;
569
618
  }
570
619
  _createClass(MediaSingleNodeView, [{
571
620
  key: "createDomRef",
@@ -630,10 +679,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
630
679
  }, {
631
680
  key: "update",
632
681
  value: function update(node, decorations, _innerDecorations, isValidUpdate) {
633
- var _this3 = this;
682
+ var _this4 = this;
634
683
  if (!isValidUpdate) {
635
684
  isValidUpdate = function isValidUpdate(currentNode, newNode) {
636
- return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
685
+ return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
637
686
  };
638
687
  }
639
688
  return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -641,7 +690,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
641
690
  }, {
642
691
  key: "render",
643
692
  value: function render(props, forwardRef) {
644
- var _this4 = this;
693
+ var _this5 = this;
645
694
  var _this$reactComponentP = this.reactComponentProps,
646
695
  eventDispatcher = _this$reactComponentP.eventDispatcher,
647
696
  fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -666,12 +715,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
666
715
  pluginInjectionApi: pluginInjectionApi,
667
716
  mediaProvider: mediaProvider,
668
717
  contextIdentifierProvider: contextIdentifierProvider,
669
- node: _this4.node,
718
+ node: _this5.node,
670
719
  getPos: getPos,
671
720
  mediaOptions: mediaOptions,
672
- view: _this4.view,
721
+ view: _this5.view,
673
722
  fullWidthMode: fullWidthMode,
674
- selected: _this4.isNodeSelected,
723
+ selected: _this5.isNodeSelected,
675
724
  eventDispatcher: eventDispatcher,
676
725
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
677
726
  forwardRef: forwardRef,
package/dist/esm/ui/CommentBadge/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import React, { useCallback, useMemo, useState } from 'react';
3
- import { injectIntl } from 'react-intl-next';
2
+ import React, { forwardRef, useCallback, useMemo, useState } from 'react';
3
+ import { injectIntl, useIntl } from 'react-intl-next';
4
4
  import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
5
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
6
  import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
@@ -65,4 +65,69 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
65
65
  }
66
66
  });
67
67
  };
68
- export var CommentBadge = injectIntl(CommentBadgeWrapper);
68
+ export var CommentBadge = injectIntl(CommentBadgeWrapper);
69
+
70
+ // This is a copy of above component with adding forwardRef.
71
+ // Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
72
+ export var CommentBadgeWithRef = /*#__PURE__*/forwardRef(function (_ref2, ref) {
73
+ var api = _ref2.api,
74
+ mediaNode = _ref2.mediaNode,
75
+ view = _ref2.view,
76
+ getPos = _ref2.getPos,
77
+ isDrafting = _ref2.isDrafting,
78
+ badgeOffsetRight = _ref2.badgeOffsetRight,
79
+ commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
80
+ var intl = useIntl();
81
+ var _useState3 = useState(false),
82
+ _useState4 = _slicedToArray(_useState3, 2),
83
+ entered = _useState4[0],
84
+ setEntered = _useState4[1];
85
+ var _useSharedPluginState2 = useSharedPluginState(api, ['annotation']),
86
+ annotationState = _useSharedPluginState2.annotationState;
87
+ var _view$state$schema2 = view.state.schema,
88
+ media = _view$state$schema2.nodes.media,
89
+ annotation = _view$state$schema2.marks.annotation,
90
+ state = view.state,
91
+ dispatch = view.dispatch;
92
+ var status = useMemo(function () {
93
+ if (!(annotationState !== null && annotationState !== void 0 && annotationState.selectedAnnotations) || !mediaNode) {
94
+ return 'default';
95
+ }
96
+ return annotationState.selectedAnnotations.some(function (annotation) {
97
+ return !!mediaNode.marks.find(function (mark) {
98
+ return mark.attrs.id === annotation.id;
99
+ });
100
+ }) && !annotationState.isInlineCommentViewClosed ? 'active' : 'default';
101
+ }, [annotationState, mediaNode]);
102
+ var onClick = useCallback(function () {
103
+ if (api.annotation && mediaNode) {
104
+ var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
105
+ showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
106
+ }
107
+ }, [api.annotation, dispatch, mediaNode, state]);
108
+ var pos = getPos();
109
+ var hasNoComments = !Number.isFinite(pos) || !(annotationState !== null && annotationState !== void 0 && annotationState.annotations) || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
110
+ return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
111
+ });
112
+ if (!isDrafting && hasNoComments || !mediaNode) {
113
+ return null;
114
+ }
115
+ var mediaSingleElement = view.domAtPos(pos + 1).node;
116
+ return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
117
+ ref: ref,
118
+ commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
119
+ badgeOffsetRight: badgeOffsetRight,
120
+ width: mediaNode.attrs.width,
121
+ height: mediaNode.attrs.height,
122
+ onClick: onClick,
123
+ mediaSingleElement: mediaSingleElement,
124
+ intl: intl,
125
+ status: entered ? 'entered' : status,
126
+ onMouseEnter: function onMouseEnter() {
127
+ return setEntered(true);
128
+ },
129
+ onMouseLeave: function onMouseLeave() {
130
+ return setEntered(false);
131
+ }
132
+ });
133
+ });
package/dist/types/nodeviews/mediaSingle.d.ts CHANGED
@@ -34,6 +34,7 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
34
34
  state: MediaSingleNodeState;
35
35
  mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
36
36
  captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
37
+ commentBadgeRef: React.RefObject<HTMLDivElement>;
37
38
  createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
38
39
  UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
39
40
  setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;
package/dist/types/ui/CommentBadge/index.d.ts CHANGED
@@ -18,4 +18,5 @@ type CommentBadgeProps = {
18
18
  export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
19
19
  WrappedComponent: React.ComponentType<CommentBadgeProps>;
20
20
  };
21
+ export declare const CommentBadgeWithRef: React.ForwardRefExoticComponent<Omit<CommentBadgeProps, "intl"> & React.RefAttributes<HTMLDivElement>>;
21
22
  export {};
package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts CHANGED
@@ -34,6 +34,7 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
34
34
  state: MediaSingleNodeState;
35
35
  mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
36
36
  captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
37
+ commentBadgeRef: React.RefObject<HTMLDivElement>;
37
38
  createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
38
39
  UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
39
40
  setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;
package/dist/types-ts4.5/ui/CommentBadge/index.d.ts CHANGED
@@ -18,4 +18,5 @@ type CommentBadgeProps = {
18
18
  export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
19
19
  WrappedComponent: React.ComponentType<CommentBadgeProps>;
20
20
  };
21
+ export declare const CommentBadgeWithRef: React.ForwardRefExoticComponent<Omit<CommentBadgeProps, "intl"> & React.RefAttributes<HTMLDivElement>>;
21
22
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.28.5",
3
+ "version": "1.29.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-namespaced-context": "^6.11.0",
38
38
  "@atlaskit/analytics-next": "^10.1.0",
39
39
  "@atlaskit/button": "^20.0.0",
40
- "@atlaskit/editor-common": "^87.11.0",
40
+ "@atlaskit/editor-common": "^87.12.0",
41
41
  "@atlaskit/editor-palette": "1.6.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.7.0",
43
43
  "@atlaskit/editor-plugin-annotation": "1.19.0",
@@ -57,8 +57,8 @@
57
57
  "@atlaskit/icon": "^22.13.0",
58
58
  "@atlaskit/media-card": "^78.0.0",
59
59
  "@atlaskit/media-client": "^27.3.0",
60
- "@atlaskit/media-client-react": "^2.0.0",
61
- "@atlaskit/media-common": "^11.3.0",
60
+ "@atlaskit/media-client-react": "^2.1.0",
61
+ "@atlaskit/media-common": "^11.4.0",
62
62
  "@atlaskit/media-filmstrip": "^47.2.0",
63
63
  "@atlaskit/media-picker": "^66.5.0",
64
64
  "@atlaskit/media-ui": "^25.11.0",
@@ -82,7 +82,7 @@
82
82
  "typescript": "~5.4.2"
83
83
  },
84
84
  "peerDependencies": {
85
- "@atlaskit/media-core": "^34.2.0",
85
+ "@atlaskit/media-core": "^34.3.0",
86
86
  "react": "^16.8.0",
87
87
  "react-dom": "^16.8.0",
88
88
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -152,6 +152,9 @@
152
152
  },
153
153
  "platform_editor_lazy-node-views": {
154
154
  "type": "boolean"
155
+ },
156
+ "platform_editor_insert_media_plugin_phase_one": {
157
+ "type": "boolean"
155
158
  }
156
159
  },
157
160
  "stricter": {