@atlaskit/editor-plugin-media 1.13.3 → 1.13.5
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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/nodeviews/mediaSingle.js +31 -22
- package/dist/cjs/ui/CommentBadge/index.js +48 -0
- package/dist/es2019/nodeviews/mediaSingle.js +11 -2
- package/dist/es2019/ui/CommentBadge/index.js +50 -0
- package/dist/esm/nodeviews/mediaSingle.js +31 -22
- package/dist/esm/ui/CommentBadge/index.js +39 -0
- package/dist/types/ui/CommentBadge/index.d.ts +18 -0
- package/dist/types-ts4.5/ui/CommentBadge/index.d.ts +18 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 1.13.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#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
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 1.13.4
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#83266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83266) [`2ccef5c67079`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ccef5c67079) - fix editor comment disabled state regression issue
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 1.13.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -33,6 +33,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
33
33
|
var _captions = require("../commands/captions");
|
|
34
34
|
var _main = require("../pm-plugins/main");
|
|
35
35
|
var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
|
|
36
|
+
var _CommentBadge = require("../ui/CommentBadge");
|
|
36
37
|
var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
|
|
37
38
|
var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
|
|
38
39
|
var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
|
|
@@ -328,7 +329,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
328
329
|
}, {
|
|
329
330
|
key: "render",
|
|
330
331
|
value: function render() {
|
|
331
|
-
var _pluginInjectionApi$m;
|
|
332
|
+
var _mediaOptions$getEdit, _pluginInjectionApi$m;
|
|
332
333
|
var _this$props2 = this.props,
|
|
333
334
|
selected = _this$props2.selected,
|
|
334
335
|
getPos = _this$props2.getPos,
|
|
@@ -344,10 +345,13 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
344
345
|
editorViewMode = _this$props2.editorViewMode,
|
|
345
346
|
mediaPluginState = _this$props2.mediaPluginState,
|
|
346
347
|
editorDisabled = _this$props2.editorDisabled;
|
|
347
|
-
var _ref4 =
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
348
|
+
var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
|
|
349
|
+
_ref4$commentsOnMedia = _ref4.commentsOnMedia,
|
|
350
|
+
commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
|
|
351
|
+
var _ref5 = node.attrs,
|
|
352
|
+
layout = _ref5.layout,
|
|
353
|
+
widthType = _ref5.widthType,
|
|
354
|
+
mediaSingleWidthAttribute = _ref5.width;
|
|
351
355
|
var childNode = node.firstChild;
|
|
352
356
|
var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
|
|
353
357
|
|
|
@@ -431,7 +435,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
431
435
|
css: figureWrapperStyles,
|
|
432
436
|
className: _styles.MediaSingleNodeSelector,
|
|
433
437
|
onClick: this.onMediaSingleClicked
|
|
434
|
-
}, (0, _react2.jsx)(
|
|
438
|
+
}, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
|
|
439
|
+
view: view,
|
|
440
|
+
api: pluginInjectionApi,
|
|
441
|
+
mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
|
|
442
|
+
getPos: getPos
|
|
443
|
+
}), (0, _react2.jsx)("div", {
|
|
435
444
|
ref: this.props.forwardRef
|
|
436
445
|
}), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
|
|
437
446
|
ref: this.captionPlaceHolderRef,
|
|
@@ -463,19 +472,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
463
472
|
mediaOptions: {}
|
|
464
473
|
});
|
|
465
474
|
(0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
|
|
466
|
-
var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(
|
|
467
|
-
var pluginInjectionApi =
|
|
468
|
-
mediaProvider =
|
|
469
|
-
contextIdentifierProvider =
|
|
470
|
-
node =
|
|
471
|
-
getPos =
|
|
472
|
-
mediaOptions =
|
|
473
|
-
view =
|
|
474
|
-
fullWidthMode =
|
|
475
|
-
selected =
|
|
476
|
-
eventDispatcher =
|
|
477
|
-
dispatchAnalyticsEvent =
|
|
478
|
-
forwardRef =
|
|
475
|
+
var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
|
|
476
|
+
var pluginInjectionApi = _ref6.pluginInjectionApi,
|
|
477
|
+
mediaProvider = _ref6.mediaProvider,
|
|
478
|
+
contextIdentifierProvider = _ref6.contextIdentifierProvider,
|
|
479
|
+
node = _ref6.node,
|
|
480
|
+
getPos = _ref6.getPos,
|
|
481
|
+
mediaOptions = _ref6.mediaOptions,
|
|
482
|
+
view = _ref6.view,
|
|
483
|
+
fullWidthMode = _ref6.fullWidthMode,
|
|
484
|
+
selected = _ref6.selected,
|
|
485
|
+
eventDispatcher = _ref6.eventDispatcher,
|
|
486
|
+
dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
|
|
487
|
+
forwardRef = _ref6.forwardRef;
|
|
479
488
|
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
|
|
480
489
|
widthState = _useSharedPluginState.widthState,
|
|
481
490
|
mediaState = _useSharedPluginState.mediaState,
|
|
@@ -618,9 +627,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
618
627
|
return (0, _react2.jsx)(_providerFactory.WithProviders, {
|
|
619
628
|
providers: ['mediaProvider', 'contextIdentifierProvider'],
|
|
620
629
|
providerFactory: providerFactory,
|
|
621
|
-
renderNode: function renderNode(
|
|
622
|
-
var mediaProvider =
|
|
623
|
-
contextIdentifierProvider =
|
|
630
|
+
renderNode: function renderNode(_ref7) {
|
|
631
|
+
var mediaProvider = _ref7.mediaProvider,
|
|
632
|
+
contextIdentifierProvider = _ref7.contextIdentifierProvider;
|
|
624
633
|
return (0, _react2.jsx)(MediaSingleNodeWrapper, {
|
|
625
634
|
pluginInjectionApi: pluginInjectionApi,
|
|
626
635
|
mediaProvider: mediaProvider,
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CommentBadge = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
11
|
+
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
|
|
15
|
+
var api = _ref.api,
|
|
16
|
+
mediaNode = _ref.mediaNode,
|
|
17
|
+
view = _ref.view,
|
|
18
|
+
getPos = _ref.getPos,
|
|
19
|
+
intl = _ref.intl;
|
|
20
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
|
|
21
|
+
annotationState = _useSharedPluginState.annotationState;
|
|
22
|
+
var _view$state$schema = view.state.schema,
|
|
23
|
+
media = _view$state$schema.nodes.media,
|
|
24
|
+
annotation = _view$state$schema.marks.annotation,
|
|
25
|
+
state = view.state,
|
|
26
|
+
dispatch = view.dispatch;
|
|
27
|
+
var onClick = (0, _react.useCallback)(function () {
|
|
28
|
+
if (api.annotation && mediaNode) {
|
|
29
|
+
var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
|
|
30
|
+
showCommentForBlockNode(mediaNode)(state, dispatch);
|
|
31
|
+
}
|
|
32
|
+
}, [api.annotation, dispatch, mediaNode, state]);
|
|
33
|
+
var pos = getPos();
|
|
34
|
+
if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
|
|
35
|
+
return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
|
|
36
|
+
})) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
var mediaElement = view.domAtPos(pos + 1).node;
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
|
|
41
|
+
view: view,
|
|
42
|
+
mediaNode: mediaNode,
|
|
43
|
+
onClick: onClick,
|
|
44
|
+
mediaElement: mediaElement,
|
|
45
|
+
intl: intl
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
|
|
@@ -18,6 +18,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
18
18
|
import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
|
|
19
19
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
20
20
|
import CaptionPlaceholder from '../ui/CaptionPlaceholder';
|
|
21
|
+
import { CommentBadge } from '../ui/CommentBadge';
|
|
21
22
|
import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
|
|
22
23
|
import ResizableMediaSingle from '../ui/ResizableMediaSingle';
|
|
23
24
|
import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
|
|
@@ -229,7 +230,7 @@ export default class MediaSingleNode extends Component {
|
|
|
229
230
|
});
|
|
230
231
|
}
|
|
231
232
|
render() {
|
|
232
|
-
var _pluginInjectionApi$m, _pluginInjectionApi$m2;
|
|
233
|
+
var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2;
|
|
233
234
|
const {
|
|
234
235
|
selected,
|
|
235
236
|
getPos,
|
|
@@ -248,6 +249,9 @@ export default class MediaSingleNode extends Component {
|
|
|
248
249
|
mediaPluginState,
|
|
249
250
|
editorDisabled
|
|
250
251
|
} = this.props;
|
|
252
|
+
const {
|
|
253
|
+
commentsOnMedia = false
|
|
254
|
+
} = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
|
|
251
255
|
const {
|
|
252
256
|
layout,
|
|
253
257
|
widthType,
|
|
@@ -344,7 +348,12 @@ export default class MediaSingleNode extends Component {
|
|
|
344
348
|
css: figureWrapperStyles,
|
|
345
349
|
className: MediaSingleNodeSelector,
|
|
346
350
|
onClick: this.onMediaSingleClicked
|
|
347
|
-
}, jsx(
|
|
351
|
+
}, commentsOnMedia && jsx(CommentBadge, {
|
|
352
|
+
view: view,
|
|
353
|
+
api: pluginInjectionApi,
|
|
354
|
+
mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
|
|
355
|
+
getPos: getPos
|
|
356
|
+
}), jsx("div", {
|
|
348
357
|
ref: this.props.forwardRef
|
|
349
358
|
}), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
|
|
350
359
|
ref: this.captionPlaceHolderRef,
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { injectIntl } from 'react-intl-next';
|
|
3
|
+
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
|
|
5
|
+
const CommentBadgeWrapper = ({
|
|
6
|
+
api,
|
|
7
|
+
mediaNode,
|
|
8
|
+
view,
|
|
9
|
+
getPos,
|
|
10
|
+
intl
|
|
11
|
+
}) => {
|
|
12
|
+
const {
|
|
13
|
+
annotationState
|
|
14
|
+
} = useSharedPluginState(api, ['annotation']);
|
|
15
|
+
const {
|
|
16
|
+
state: {
|
|
17
|
+
schema: {
|
|
18
|
+
nodes: {
|
|
19
|
+
media
|
|
20
|
+
},
|
|
21
|
+
marks: {
|
|
22
|
+
annotation
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
state,
|
|
27
|
+
dispatch
|
|
28
|
+
} = view;
|
|
29
|
+
const onClick = useCallback(() => {
|
|
30
|
+
if (api.annotation && mediaNode) {
|
|
31
|
+
const {
|
|
32
|
+
showCommentForBlockNode
|
|
33
|
+
} = api.annotation.actions;
|
|
34
|
+
showCommentForBlockNode(mediaNode)(state, dispatch);
|
|
35
|
+
}
|
|
36
|
+
}, [api.annotation, dispatch, mediaNode, state]);
|
|
37
|
+
const pos = getPos();
|
|
38
|
+
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])) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
const mediaElement = view.domAtPos(pos + 1).node;
|
|
42
|
+
return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
|
|
43
|
+
view: view,
|
|
44
|
+
mediaNode: mediaNode,
|
|
45
|
+
onClick: onClick,
|
|
46
|
+
mediaElement: mediaElement,
|
|
47
|
+
intl: intl
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
export const CommentBadge = injectIntl(CommentBadgeWrapper);
|
|
@@ -31,6 +31,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
31
31
|
import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
|
|
32
32
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
33
33
|
import CaptionPlaceholder from '../ui/CaptionPlaceholder';
|
|
34
|
+
import { CommentBadge } from '../ui/CommentBadge';
|
|
34
35
|
import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
|
|
35
36
|
import ResizableMediaSingle from '../ui/ResizableMediaSingle';
|
|
36
37
|
import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
|
|
@@ -320,7 +321,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
320
321
|
}, {
|
|
321
322
|
key: "render",
|
|
322
323
|
value: function render() {
|
|
323
|
-
var _pluginInjectionApi$m;
|
|
324
|
+
var _mediaOptions$getEdit, _pluginInjectionApi$m;
|
|
324
325
|
var _this$props2 = this.props,
|
|
325
326
|
selected = _this$props2.selected,
|
|
326
327
|
getPos = _this$props2.getPos,
|
|
@@ -336,10 +337,13 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
336
337
|
editorViewMode = _this$props2.editorViewMode,
|
|
337
338
|
mediaPluginState = _this$props2.mediaPluginState,
|
|
338
339
|
editorDisabled = _this$props2.editorDisabled;
|
|
339
|
-
var _ref4 =
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
340
|
+
var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
|
|
341
|
+
_ref4$commentsOnMedia = _ref4.commentsOnMedia,
|
|
342
|
+
commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
|
|
343
|
+
var _ref5 = node.attrs,
|
|
344
|
+
layout = _ref5.layout,
|
|
345
|
+
widthType = _ref5.widthType,
|
|
346
|
+
mediaSingleWidthAttribute = _ref5.width;
|
|
343
347
|
var childNode = node.firstChild;
|
|
344
348
|
var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
|
|
345
349
|
|
|
@@ -423,7 +427,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
423
427
|
css: figureWrapperStyles,
|
|
424
428
|
className: MediaSingleNodeSelector,
|
|
425
429
|
onClick: this.onMediaSingleClicked
|
|
426
|
-
}, jsx(
|
|
430
|
+
}, commentsOnMedia && jsx(CommentBadge, {
|
|
431
|
+
view: view,
|
|
432
|
+
api: pluginInjectionApi,
|
|
433
|
+
mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
|
|
434
|
+
getPos: getPos
|
|
435
|
+
}), jsx("div", {
|
|
427
436
|
ref: this.props.forwardRef
|
|
428
437
|
}), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
|
|
429
438
|
ref: this.captionPlaceHolderRef,
|
|
@@ -456,19 +465,19 @@ _defineProperty(MediaSingleNode, "defaultProps", {
|
|
|
456
465
|
});
|
|
457
466
|
_defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
|
|
458
467
|
export { MediaSingleNode as default };
|
|
459
|
-
var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(
|
|
460
|
-
var pluginInjectionApi =
|
|
461
|
-
mediaProvider =
|
|
462
|
-
contextIdentifierProvider =
|
|
463
|
-
node =
|
|
464
|
-
getPos =
|
|
465
|
-
mediaOptions =
|
|
466
|
-
view =
|
|
467
|
-
fullWidthMode =
|
|
468
|
-
selected =
|
|
469
|
-
eventDispatcher =
|
|
470
|
-
dispatchAnalyticsEvent =
|
|
471
|
-
forwardRef =
|
|
468
|
+
var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
|
|
469
|
+
var pluginInjectionApi = _ref6.pluginInjectionApi,
|
|
470
|
+
mediaProvider = _ref6.mediaProvider,
|
|
471
|
+
contextIdentifierProvider = _ref6.contextIdentifierProvider,
|
|
472
|
+
node = _ref6.node,
|
|
473
|
+
getPos = _ref6.getPos,
|
|
474
|
+
mediaOptions = _ref6.mediaOptions,
|
|
475
|
+
view = _ref6.view,
|
|
476
|
+
fullWidthMode = _ref6.fullWidthMode,
|
|
477
|
+
selected = _ref6.selected,
|
|
478
|
+
eventDispatcher = _ref6.eventDispatcher,
|
|
479
|
+
dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
|
|
480
|
+
forwardRef = _ref6.forwardRef;
|
|
472
481
|
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
|
|
473
482
|
widthState = _useSharedPluginState.widthState,
|
|
474
483
|
mediaState = _useSharedPluginState.mediaState,
|
|
@@ -611,9 +620,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
611
620
|
return jsx(WithProviders, {
|
|
612
621
|
providers: ['mediaProvider', 'contextIdentifierProvider'],
|
|
613
622
|
providerFactory: providerFactory,
|
|
614
|
-
renderNode: function renderNode(
|
|
615
|
-
var mediaProvider =
|
|
616
|
-
contextIdentifierProvider =
|
|
623
|
+
renderNode: function renderNode(_ref7) {
|
|
624
|
+
var mediaProvider = _ref7.mediaProvider,
|
|
625
|
+
contextIdentifierProvider = _ref7.contextIdentifierProvider;
|
|
617
626
|
return jsx(MediaSingleNodeWrapper, {
|
|
618
627
|
pluginInjectionApi: pluginInjectionApi,
|
|
619
628
|
mediaProvider: mediaProvider,
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { injectIntl } from 'react-intl-next';
|
|
3
|
+
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
|
|
5
|
+
var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
|
|
6
|
+
var api = _ref.api,
|
|
7
|
+
mediaNode = _ref.mediaNode,
|
|
8
|
+
view = _ref.view,
|
|
9
|
+
getPos = _ref.getPos,
|
|
10
|
+
intl = _ref.intl;
|
|
11
|
+
var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
|
|
12
|
+
annotationState = _useSharedPluginState.annotationState;
|
|
13
|
+
var _view$state$schema = view.state.schema,
|
|
14
|
+
media = _view$state$schema.nodes.media,
|
|
15
|
+
annotation = _view$state$schema.marks.annotation,
|
|
16
|
+
state = view.state,
|
|
17
|
+
dispatch = view.dispatch;
|
|
18
|
+
var onClick = useCallback(function () {
|
|
19
|
+
if (api.annotation && mediaNode) {
|
|
20
|
+
var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
|
|
21
|
+
showCommentForBlockNode(mediaNode)(state, dispatch);
|
|
22
|
+
}
|
|
23
|
+
}, [api.annotation, dispatch, mediaNode, state]);
|
|
24
|
+
var pos = getPos();
|
|
25
|
+
if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
|
|
26
|
+
return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
|
|
27
|
+
})) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
var mediaElement = view.domAtPos(pos + 1).node;
|
|
31
|
+
return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
|
|
32
|
+
view: view,
|
|
33
|
+
mediaNode: mediaNode,
|
|
34
|
+
onClick: onClick,
|
|
35
|
+
mediaElement: mediaElement,
|
|
36
|
+
intl: intl
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
export var CommentBadge = injectIntl(CommentBadgeWrapper);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { IntlShape } from 'react-intl-next';
|
|
3
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
6
|
+
import type { MediaNextEditorPluginType } from '../../next-plugin-type';
|
|
7
|
+
import type { getPosHandler } from '../../types';
|
|
8
|
+
type CommentBadgeProps = {
|
|
9
|
+
intl: IntlShape;
|
|
10
|
+
api: ExtractInjectionAPI<MediaNextEditorPluginType>;
|
|
11
|
+
mediaNode: PMNode | null;
|
|
12
|
+
view: EditorView;
|
|
13
|
+
getPos: getPosHandler;
|
|
14
|
+
};
|
|
15
|
+
export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
|
|
16
|
+
WrappedComponent: React.ComponentType<CommentBadgeProps>;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { IntlShape } from 'react-intl-next';
|
|
3
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
6
|
+
import type { MediaNextEditorPluginType } from '../../next-plugin-type';
|
|
7
|
+
import type { getPosHandler } from '../../types';
|
|
8
|
+
type CommentBadgeProps = {
|
|
9
|
+
intl: IntlShape;
|
|
10
|
+
api: ExtractInjectionAPI<MediaNextEditorPluginType>;
|
|
11
|
+
mediaNode: PMNode | null;
|
|
12
|
+
view: EditorView;
|
|
13
|
+
getPos: getPosHandler;
|
|
14
|
+
};
|
|
15
|
+
export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
|
|
16
|
+
WrappedComponent: React.ComponentType<CommentBadgeProps>;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.5",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"@atlaskit/adf-schema": "^35.8.0",
|
|
37
37
|
"@atlaskit/analytics-namespaced-context": "^6.9.0",
|
|
38
38
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
39
|
-
"@atlaskit/button": "^17.
|
|
39
|
+
"@atlaskit/button": "^17.10.0",
|
|
40
40
|
"@atlaskit/editor-common": "^78.23.0",
|
|
41
41
|
"@atlaskit/editor-palette": "1.5.3",
|
|
42
42
|
"@atlaskit/editor-plugin-analytics": "^1.0.0",
|
|
43
|
-
"@atlaskit/editor-plugin-annotation": "1.5.
|
|
43
|
+
"@atlaskit/editor-plugin-annotation": "1.5.7",
|
|
44
44
|
"@atlaskit/editor-plugin-decorations": "^1.0.0",
|
|
45
45
|
"@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
|
|
46
46
|
"@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
|