@atlaskit/editor-plugin-media 2.6.1 → 2.6.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 2.6.3
+
+### Patch Changes
+
+- [#142352](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142352)
+  [`05903fde6d94d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05903fde6d94d) -
+  Internal change to use Compiled variant of `@atlaskit/primitives`.
+- Updated dependencies
+
+## 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/cjs/pm-plugins/pixel-resizing/ui/index.js

@@ -13,7 +13,7 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _commands = require("../../../ui/toolbar/commands");
 var _utils2 = require("../../../ui/toolbar/utils");
 var _mediaSingle2 = require("../../utils/media-single");
@@ -119,6 +119,6 @@ var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
       css: _styles.pixelSizingFullWidthLabelStyles
-    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
+    }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
   );
 };

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

@@ -22,7 +22,7 @@ var _strokeWeightSmall = _interopRequireDefault(require("@atlaskit/icon/core/str
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
 /**
@@ -142,7 +142,7 @@ var ImageBorder = function ImageBorder(_ref) {
           return setIsColorSubmenuOpen(!isColorSubmenuOpen);
         });
       }
-    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
+    }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
       css: borderColorSelectStyles
     })), (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -209,7 +209,7 @@ var ImageBorder = function ImageBorder(_ref) {
           return setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
         });
       }
-    }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
+    }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
       css: _styles2.contextualMenuArrow
     })), (0, _react2.jsx)("div", {
       //eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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/es2019/pm-plugins/pixel-resizing/ui/index.js

@@ -11,7 +11,7 @@ import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlask
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { updateMediaSingleWidthTr } from '../../../ui/toolbar/commands';
 import { getPixelWidthOfElement, calcNewLayout } from '../../../ui/toolbar/utils';
 import { isVideo } from '../../utils/media-single';

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

@@ -20,7 +20,7 @@ import StrokeWeightSmallIcon from '@atlaskit/icon/core/stroke-weight-small';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
 const ImageBorder = ({

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/esm/pm-plugins/pixel-resizing/ui/index.js

@@ -14,7 +14,7 @@ import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlask
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { updateMediaSingleWidthTr } from '../../../ui/toolbar/commands';
 import { getPixelWidthOfElement, calcNewLayout } from '../../../ui/toolbar/utils';
 import { isVideo } from '../../utils/media-single';

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

@@ -21,7 +21,7 @@ import StrokeWeightSmallIcon from '@atlaskit/icon/core/stroke-weight-small';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
 var ImageBorder = function ImageBorder(_ref) {

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.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
-		"@atlaskit/editor-common": "^103.11.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.7.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": {