@atlaskit/editor-plugin-media 9.5.8 → 9.6.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 9.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.6.0
+
+### Minor Changes
+
+- [`88ce28af57fa3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88ce28af57fa3) -
+  Support starting createCommentExperience from editor media toolbar
+
 ## 9.5.8
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -391,7 +391,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           allowMediaInlineImages: options && options.allowMediaInlineImages,
           isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view',
           allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing,
-          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount
+          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount,
+          createCommentExperience: options === null || options === void 0 ? void 0 : options.createCommentExperience
         }, api);
       }
     }

package/dist/cjs/ui/toolbar/comments.js

@@ -15,7 +15,7 @@ var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("./utils");
-var commentButton = exports.commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
+var commentButton = exports.commentButton = function commentButton(intl, state, api, onCommentButtonMount, createCommentExperience) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
   var selectMediaNode = (_getSelectedMediaSing = (0, _utils.getSelectedMediaSingle)(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   var hasActiveComments = false;
@@ -35,6 +35,17 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
       var isOpeningMediaCommentFromToolbar = (0, _platformFeatureFlags.fg)('confluence_frontend_media_scroll_fix') ? true : false;
       if (!showCommentForBlockNode(selectMediaNode, _analytics.VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
+        if ((0, _platformFeatureFlags.fg)('confluence_fe_create_inline_comment_exp_coverage_2')) {
+          createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.start({
+            attributes: {
+              pageClass: 'editor',
+              commentType: 'block',
+              blockType: 'media',
+              entryPoint: 'highlightActionsSimple'
+            }
+          });
+          createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.initExperience.start();
+        }
         setInlineCommentDraftState(true,
         // TODO: ED-26962 - might need to update to reflect it's from media floating toolbar
         _analytics.INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);

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

@@ -287,7 +287,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowImagePreview = options.allowImagePreview,
     isViewOnly = options.isViewOnly,
     allowPixelResizing = options.allowPixelResizing,
-    onCommentButtonMount = options.onCommentButtonMount;
+    onCommentButtonMount = options.onCommentButtonMount,
+    createCommentExperience = options.createCommentExperience;
   var toolbarButtons = [];
   var _ref3 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref3.hoverDecoration;
@@ -513,7 +514,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
     if (!areAnyNewToolbarFlagsEnabled) {
       if (allowCommentsOnMedia) {
-        toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount), {
+        toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -758,7 +759,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
       (0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
-      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
+      toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience));
     }
     return toolbarButtons;
   }

package/dist/es2019/mediaPlugin.js

@@ -387,7 +387,8 @@ export const mediaPlugin = ({
           allowMediaInlineImages: options && options.allowMediaInlineImages,
           isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view',
           allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing,
-          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount
+          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount,
+          createCommentExperience: options === null || options === void 0 ? void 0 : options.createCommentExperience
         }, api);
       }
     }

package/dist/es2019/ui/toolbar/comments.js

@@ -8,7 +8,7 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getSelectedMediaSingle } from './utils';
-export const commentButton = (intl, state, api, onCommentButtonMount) => {
+export const commentButton = (intl, state, api, onCommentButtonMount, createCommentExperience) => {
   var _getSelectedMediaSing, _api$annotation, _api$annotation$share, _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
   const selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   let hasActiveComments = false;
@@ -27,6 +27,17 @@ export const commentButton = (intl, state, api, onCommentButtonMount) => {
       const isOpeningMediaCommentFromToolbar = fg('confluence_frontend_media_scroll_fix') ? true : false;
       if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
+        if (fg('confluence_fe_create_inline_comment_exp_coverage_2')) {
+          createCommentExperience === null || createCommentExperience === void 0 ? void 0 : createCommentExperience.start({
+            attributes: {
+              pageClass: 'editor',
+              commentType: 'block',
+              blockType: 'media',
+              entryPoint: 'highlightActionsSimple'
+            }
+          });
+          createCommentExperience === null || createCommentExperience === void 0 ? void 0 : createCommentExperience.initExperience.start();
+        }
         setInlineCommentDraftState(true,
         // TODO: ED-26962 - might need to update to reflect it's from media floating toolbar
         INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);

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

@@ -276,7 +276,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowImagePreview,
     isViewOnly,
     allowPixelResizing,
-    onCommentButtonMount
+    onCommentButtonMount,
+    createCommentExperience
   } = options;
   let toolbarButtons = [];
   const {
@@ -506,7 +507,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
     if (!areAnyNewToolbarFlagsEnabled) {
       if (allowCommentsOnMedia) {
-        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount), {
+        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -757,7 +758,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
       updateToFullHeightSeparator(toolbarButtons);
-      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
+      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience));
     }
     return toolbarButtons;
   }

package/dist/esm/mediaPlugin.js

@@ -382,7 +382,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           allowMediaInlineImages: options && options.allowMediaInlineImages,
           isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view',
           allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing,
-          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount
+          onCommentButtonMount: options === null || options === void 0 ? void 0 : options.onCommentButtonMount,
+          createCommentExperience: options === null || options === void 0 ? void 0 : options.createCommentExperience
         }, api);
       }
     }

package/dist/esm/ui/toolbar/comments.js

@@ -8,7 +8,7 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getSelectedMediaSingle } from './utils';
-export var commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
+export var commentButton = function commentButton(intl, state, api, onCommentButtonMount, createCommentExperience) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
   var selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
   var hasActiveComments = false;
@@ -28,6 +28,17 @@ export var commentButton = function commentButton(intl, state, api, onCommentBut
       var isOpeningMediaCommentFromToolbar = fg('confluence_frontend_media_scroll_fix') ? true : false;
       if (!showCommentForBlockNode(selectMediaNode, VIEW_METHOD.COMMENT_BUTTON, isOpeningMediaCommentFromToolbar)(state, dispatch)) {
         var _selectMediaNode$attr;
+        if (fg('confluence_fe_create_inline_comment_exp_coverage_2')) {
+          createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.start({
+            attributes: {
+              pageClass: 'editor',
+              commentType: 'block',
+              blockType: 'media',
+              entryPoint: 'highlightActionsSimple'
+            }
+          });
+          createCommentExperience === null || createCommentExperience === void 0 || createCommentExperience.initExperience.start();
+        }
         setInlineCommentDraftState(true,
         // TODO: ED-26962 - might need to update to reflect it's from media floating toolbar
         INPUT_METHOD.FLOATING_TB, 'block', (_selectMediaNode$attr = selectMediaNode.attrs) === null || _selectMediaNode$attr === void 0 ? void 0 : _selectMediaNode$attr.id, isOpeningMediaCommentFromToolbar)(state, dispatch);

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

@@ -278,7 +278,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowImagePreview = options.allowImagePreview,
     isViewOnly = options.isViewOnly,
     allowPixelResizing = options.allowPixelResizing,
-    onCommentButtonMount = options.onCommentButtonMount;
+    onCommentButtonMount = options.onCommentButtonMount,
+    createCommentExperience = options.createCommentExperience;
   var toolbarButtons = [];
   var _ref3 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref3.hoverDecoration;
@@ -504,7 +505,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
     if (!areAnyNewToolbarFlagsEnabled) {
       if (allowCommentsOnMedia) {
-        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount), {
+        toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience), {
           type: 'separator',
           supportsViewMode: true
         });
@@ -749,7 +750,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
       updateToFullHeightSeparator(toolbarButtons);
-      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
+      toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount, createCommentExperience));
     }
     return toolbarButtons;
   }

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

@@ -48,6 +48,20 @@ export interface MediaPluginOptions {
     allowResizingInTables?: boolean;
     allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
     altTextValidator?: (value: string) => string[];
+    createCommentExperience?: {
+        initExperience: {
+            start: () => void;
+        };
+        start: (_: {
+            attributes: {
+                annotationId?: undefined;
+                blockType: 'media';
+                commentType: 'block';
+                entryPoint?: 'highlightActionsSimple';
+                pageClass: 'editor';
+            };
+        }) => void;
+    };
     customDropzoneContainer?: HTMLElement;
     customMediaPicker?: CustomMediaPicker;
     disableQuickInsert?: boolean;
@@ -164,6 +178,7 @@ export type MediaFloatingToolbarOptions = {
     allowResizing?: boolean;
     allowResizingInTables?: boolean;
     altTextValidator?: (value: string) => string[];
+    createCommentExperience?: MediaPluginOptions['createCommentExperience'];
     fullWidthEnabled?: boolean;
     isViewOnly?: boolean;
     onCommentButtonMount?: () => void;

package/dist/types/ui/toolbar/comments.d.ts

@@ -2,4 +2,5 @@ import type { IntlShape } from 'react-intl-next';
 import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, onCommentButtonMount?: () => void) => FloatingToolbarButton<Command>;
+import type { MediaPluginOptions } from '../../types';
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, onCommentButtonMount?: () => void, createCommentExperience?: MediaPluginOptions["createCommentExperience"]) => FloatingToolbarButton<Command>;

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

@@ -48,6 +48,20 @@ export interface MediaPluginOptions {
     allowResizingInTables?: boolean;
     allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
     altTextValidator?: (value: string) => string[];
+    createCommentExperience?: {
+        initExperience: {
+            start: () => void;
+        };
+        start: (_: {
+            attributes: {
+                annotationId?: undefined;
+                blockType: 'media';
+                commentType: 'block';
+                entryPoint?: 'highlightActionsSimple';
+                pageClass: 'editor';
+            };
+        }) => void;
+    };
     customDropzoneContainer?: HTMLElement;
     customMediaPicker?: CustomMediaPicker;
     disableQuickInsert?: boolean;
@@ -164,6 +178,7 @@ export type MediaFloatingToolbarOptions = {
     allowResizing?: boolean;
     allowResizingInTables?: boolean;
     altTextValidator?: (value: string) => string[];
+    createCommentExperience?: MediaPluginOptions['createCommentExperience'];
     fullWidthEnabled?: boolean;
     isViewOnly?: boolean;
     onCommentButtonMount?: () => void;

package/dist/types-ts4.5/ui/toolbar/comments.d.ts

@@ -2,4 +2,5 @@ import type { IntlShape } from 'react-intl-next';
 import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, onCommentButtonMount?: () => void) => FloatingToolbarButton<Command>;
+import type { MediaPluginOptions } from '../../types';
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, onCommentButtonMount?: () => void, createCommentExperience?: MediaPluginOptions["createCommentExperience"]) => FloatingToolbarButton<Command>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "9.5.8",
+	"version": "9.6.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^30.0.0",
+		"@atlaskit/tmp-editor-statsig": "^31.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
@@ -159,6 +159,9 @@
 		},
 		"platform_editor_media_insert_check": {
 			"type": "boolean"
+		},
+		"confluence_fe_create_inline_comment_exp_coverage_2": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {