@atlaskit/editor-plugin-media 8.3.1 → 8.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-media
 
+## 8.4.0
+
+### Minor Changes
+
+- [`641ffaa365b47`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/641ffaa365b47) -
+  [ux] add prevent auto focus after uploading support
+
 ## 8.3.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -50,6 +50,7 @@ var MEDIA_CONTENT_WRAP_CLASS_NAME = exports.MEDIA_CONTENT_WRAP_CLASS_NAME = 'med
 var MEDIA_PLUGIN_IS_RESIZING_KEY = exports.MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
 var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = exports.MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 var createDropPlaceholder = function createDropPlaceholder(intl, nodeViewPortalProviderAPI, dropPlaceholderKey, allowDropLine) {
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   var dropPlaceholder = document.createElement('div');
   var createElement = _react.default.createElement;
   if (allowDropLine) {
@@ -670,7 +671,14 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
   }, {
     key: "selectLastAddedMediaNode",
     value: function selectLastAddedMediaNode() {
-      var _this2 = this;
+      var _this$mediaOptions5,
+        _this2 = this;
+      // if preventAutoFocusOnUpload is enabled, skip auto-selection and just clear the tracking array
+      if ((_this$mediaOptions5 = this.mediaOptions) !== null && _this$mediaOptions5 !== void 0 && _this$mediaOptions5.preventAutoFocusOnUpload && (0, _platformFeatureFlags.fg)('jira_kuro-jjj_disable_auto_focus_after_img_upload')) {
+        this.lastAddedMediaSingleFileIds = [];
+        return;
+      }
+
       // if lastAddedMediaSingleFileIds is empty exit because there are no added media single nodes to be selected
       if (this.lastAddedMediaSingleFileIds.length !== 0) {
         this.waitForPendingTasks().then(function () {
@@ -969,6 +977,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
             var isVideoControl = Array.from(videoControls).some(function (videoControl) {
+              // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
             });
             if (isVideoControl) {

package/dist/es2019/pm-plugins/main.js

@@ -33,6 +33,7 @@ export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export const MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
 export const MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 const createDropPlaceholder = (intl, nodeViewPortalProviderAPI, dropPlaceholderKey, allowDropLine) => {
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   const dropPlaceholder = document.createElement('div');
   const createElement = React.createElement;
   if (allowDropLine) {
@@ -595,6 +596,13 @@ export class MediaPluginStateImplementation {
     return (_this$pluginInjection5 = this.pluginInjectionApi) === null || _this$pluginInjection5 === void 0 ? void 0 : (_this$pluginInjection6 = _this$pluginInjection5.contextIdentifier) === null || _this$pluginInjection6 === void 0 ? void 0 : (_this$pluginInjection7 = _this$pluginInjection6.sharedState.currentState()) === null || _this$pluginInjection7 === void 0 ? void 0 : _this$pluginInjection7.contextIdentifierProvider;
   }
   selectLastAddedMediaNode() {
+    var _this$mediaOptions5;
+    // if preventAutoFocusOnUpload is enabled, skip auto-selection and just clear the tracking array
+    if ((_this$mediaOptions5 = this.mediaOptions) !== null && _this$mediaOptions5 !== void 0 && _this$mediaOptions5.preventAutoFocusOnUpload && fg('jira_kuro-jjj_disable_auto_focus_after_img_upload')) {
+      this.lastAddedMediaSingleFileIds = [];
+      return;
+    }
+
     // if lastAddedMediaSingleFileIds is empty exit because there are no added media single nodes to be selected
     if (this.lastAddedMediaSingleFileIds.length !== 0) {
       this.waitForPendingTasks().then(() => {
@@ -859,6 +867,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
           const videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
             const isVideoControl = Array.from(videoControls).some(videoControl => {
+              // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
             });
             if (isVideoControl) {

package/dist/esm/pm-plugins/main.js

@@ -42,6 +42,7 @@ export var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export var MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
 export var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 var createDropPlaceholder = function createDropPlaceholder(intl, nodeViewPortalProviderAPI, dropPlaceholderKey, allowDropLine) {
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   var dropPlaceholder = document.createElement('div');
   var createElement = React.createElement;
   if (allowDropLine) {
@@ -662,7 +663,14 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "selectLastAddedMediaNode",
     value: function selectLastAddedMediaNode() {
-      var _this2 = this;
+      var _this$mediaOptions5,
+        _this2 = this;
+      // if preventAutoFocusOnUpload is enabled, skip auto-selection and just clear the tracking array
+      if ((_this$mediaOptions5 = this.mediaOptions) !== null && _this$mediaOptions5 !== void 0 && _this$mediaOptions5.preventAutoFocusOnUpload && fg('jira_kuro-jjj_disable_auto_focus_after_img_upload')) {
+        this.lastAddedMediaSingleFileIds = [];
+        return;
+      }
+
       // if lastAddedMediaSingleFileIds is empty exit because there are no added media single nodes to be selected
       if (this.lastAddedMediaSingleFileIds.length !== 0) {
         this.waitForPendingTasks().then(function () {
@@ -961,6 +969,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
           var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
             var isVideoControl = Array.from(videoControls).some(function (videoControl) {
+              // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
             });
             if (isVideoControl) {

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

@@ -40,6 +40,12 @@ export interface MediaPluginOptions {
     allowResizing?: boolean;
     allowResizingInTables?: boolean;
     allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    /**
+     * When enabled, prevents automatic focus/selection of media nodes after upload completion.
+     * The existing focus will be preserved instead of switching to the uploaded media.
+     * @default false
+     */
+    preventAutoFocusOnUpload?: boolean;
     altTextValidator?: (value: string) => string[];
     customDropzoneContainer?: HTMLElement;
     customMediaPicker?: CustomMediaPicker;

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

@@ -40,6 +40,12 @@ export interface MediaPluginOptions {
     allowResizing?: boolean;
     allowResizingInTables?: boolean;
     allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    /**
+     * When enabled, prevents automatic focus/selection of media nodes after upload completion.
+     * The existing focus will be preserved instead of switching to the uploaded media.
+     * @default false
+     */
+    preventAutoFocusOnUpload?: boolean;
     altTextValidator?: (value: string) => string[];
     customDropzoneContainer?: HTMLElement;
     customMediaPicker?: CustomMediaPicker;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.3.1",
+	"version": "8.4.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.16.0",
+		"@atlaskit/editor-common": "^110.17.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -162,6 +162,9 @@
 		},
 		"platform_editor_fix_media_card_removal": {
 			"type": "boolean"
+		},
+		"jira_kuro-jjj_disable_auto_focus_after_img_upload": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {