@atlaskit/editor-plugin-media 2.6.1 → 2.6.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media
 
+## 2.6.2
+
+### Patch Changes
+
+- [#140969](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140969)
+  [`b4ac22e73d43c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4ac22e73d43c) -
+  [ux] [ED-27253] hide selection states until editor has been interacted with
+- Updated dependencies
+
 ## 2.6.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -24,6 +24,7 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -562,9 +563,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     annotationState = _useSharedPluginState.annotationState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
   var mediaProvider = (0, _react.useMemo)(function () {
     return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
   }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  var isSelectedAndInteracted = (0, _react.useCallback)(function () {
+    return Boolean(selected() && hasHadInteraction);
+  }, [hasHadInteraction, selected]);
   if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
     return (0, _react2.jsx)(_mediaSingleNext.MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -576,7 +581,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
       mediaOptions: mediaOptions,
       view: view,
       fullWidthMode: fullWidthMode,
-      selected: selected,
+      selected: (0, _platformFeatureFlags.fg)('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
       mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
       annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -604,7 +609,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     mediaOptions: mediaOptions,
     view: view,
     fullWidthMode: fullWidthMode,
-    selected: selected,
+    selected: (0, _platformFeatureFlags.fg)('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
     annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,

package/dist/es2019/nodeviews/mediaSingle.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxFrag
  */
 
-import React, { Component, Fragment, useMemo } from 'react';
+import React, { Component, Fragment, useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -16,6 +16,7 @@ import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, E
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { browser, isNodeSelectedOrInRange, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -479,7 +480,9 @@ const MediaSingleNodeWrapper = ({
     editorDisabledState,
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
+  const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
   const mediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  const isSelectedAndInteracted = useCallback(() => Boolean(selected() && hasHadInteraction), [hasHadInteraction, selected]);
   if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -491,7 +494,7 @@ const MediaSingleNodeWrapper = ({
       mediaOptions: mediaOptions,
       view: view,
       fullWidthMode: fullWidthMode,
-      selected: selected,
+      selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
       mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
       annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -519,7 +522,7 @@ const MediaSingleNodeWrapper = ({
     mediaOptions: mediaOptions,
     view: view,
     fullWidthMode: fullWidthMode,
-    selected: selected,
+    selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
     annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,

package/dist/esm/nodeviews/mediaSingle.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxFrag
  */
 
-import React, { Component, Fragment, useMemo } from 'react';
+import React, { Component, Fragment, useCallback, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -29,6 +29,7 @@ import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, E
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { browser, isNodeSelectedOrInRange, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -557,9 +558,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     annotationState = _useSharedPluginState.annotationState,
     editorDisabledState = _useSharedPluginState.editorDisabledState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
   var mediaProvider = useMemo(function () {
     return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
   }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  var isSelectedAndInteracted = useCallback(function () {
+    return Boolean(selected() && hasHadInteraction);
+  }, [hasHadInteraction, selected]);
   if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -571,7 +576,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
       mediaOptions: mediaOptions,
       view: view,
       fullWidthMode: fullWidthMode,
-      selected: selected,
+      selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
       eventDispatcher: eventDispatcher,
       mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
       annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -599,7 +604,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
     mediaOptions: mediaOptions,
     view: view,
     fullWidthMode: fullWidthMode,
-    selected: selected,
+    selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
     eventDispatcher: eventDispatcher,
     mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
     annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,

package/dist/types/mediaPluginType.d.ts

@@ -13,6 +13,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaPluginState } from './pm-plugins/types';
@@ -29,10 +30,12 @@ export type MediaPluginDependencies = [
     FloatingToolbarPlugin,
     EditorDisabledPlugin,
     FocusPlugin,
+    OptionalPlugin<InteractionPlugin>,
     SelectionPlugin,
     OptionalPlugin<AnnotationPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ConnectivityPlugin>
+    OptionalPlugin<ConnectivityPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;

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

@@ -13,6 +13,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { MediaPluginState } from './pm-plugins/types';
@@ -29,10 +30,12 @@ export type MediaPluginDependencies = [
     FloatingToolbarPlugin,
     EditorDisabledPlugin,
     FocusPlugin,
+    OptionalPlugin<InteractionPlugin>,
     SelectionPlugin,
     OptionalPlugin<AnnotationPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ConnectivityPlugin>
+    OptionalPlugin<ConnectivityPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.6.1",
+	"version": "2.6.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,6 +50,7 @@
 		"@atlaskit/editor-plugin-focus": "^1.5.0",
 		"@atlaskit/editor-plugin-grid": "^2.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
+		"@atlaskit/editor-plugin-interaction": "^1.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -179,6 +180,9 @@
 		},
 		"platform_editor_ssr_media": {
 			"type": "boolean"
+		},
+		"platform_editor_no_selection_until_interaction": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {