@atlaskit/editor-plugin-media 2.6.0 → 2.6.2

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/nodeviews/mediaSingle.js +7 -2
  3. package/dist/es2019/nodeviews/mediaSingle.js +6 -3
  4. package/dist/esm/nodeviews/mediaSingle.js +8 -3
  5. package/dist/types/mediaPluginType.d.ts +4 -1
  6. package/dist/types-ts4.5/mediaPluginType.d.ts +4 -1
  7. package/package.json +10 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 2.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#140969](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140969)
8
+ [`b4ac22e73d43c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4ac22e73d43c) -
9
+ [ux] [ED-27253] hide selection states until editor has been interacted with
10
+ - Updated dependencies
11
+
12
+ ## 2.6.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 2.6.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/nodeviews/mediaSingle.js CHANGED
@@ -24,6 +24,7 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
24
24
  var _providerFactory = require("@atlaskit/editor-common/provider-factory");
25
25
  var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
26
26
  var _ui = require("@atlaskit/editor-common/ui");
27
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
27
28
  var _utils = require("@atlaskit/editor-common/utils");
28
29
  var _state = require("@atlaskit/editor-prosemirror/state");
29
30
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -562,9 +563,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
562
563
  annotationState = _useSharedPluginState.annotationState,
563
564
  editorDisabledState = _useSharedPluginState.editorDisabledState,
564
565
  editorViewModeState = _useSharedPluginState.editorViewModeState;
566
+ var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
565
567
  var mediaProvider = (0, _react.useMemo)(function () {
566
568
  return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
567
569
  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
570
+ var isSelectedAndInteracted = (0, _react.useCallback)(function () {
571
+ return Boolean(selected() && hasHadInteraction);
572
+ }, [hasHadInteraction, selected]);
568
573
  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
569
574
  return (0, _react2.jsx)(_mediaSingleNext.MediaSingleNodeNext, {
570
575
  width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -576,7 +581,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
576
581
  mediaOptions: mediaOptions,
577
582
  view: view,
578
583
  fullWidthMode: fullWidthMode,
579
- selected: selected,
584
+ selected: (0, _platformFeatureFlags.fg)('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
580
585
  eventDispatcher: eventDispatcher,
581
586
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
582
587
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -604,7 +609,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
604
609
  mediaOptions: mediaOptions,
605
610
  view: view,
606
611
  fullWidthMode: fullWidthMode,
607
- selected: selected,
612
+ selected: (0, _platformFeatureFlags.fg)('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
608
613
  eventDispatcher: eventDispatcher,
609
614
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
610
615
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
package/dist/es2019/nodeviews/mediaSingle.js CHANGED
@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
6
  * @jsxFrag
7
7
  */
8
8
 
9
- import React, { Component, Fragment, useMemo } from 'react';
9
+ import React, { Component, Fragment, useCallback, useMemo } from 'react';
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  import { css, jsx } from '@emotion/react';
@@ -16,6 +16,7 @@ import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, E
16
16
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
17
17
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
18
18
  import { MediaSingle } from '@atlaskit/editor-common/ui';
19
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
19
20
  import { browser, isNodeSelectedOrInRange, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
20
21
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
21
22
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -479,7 +480,9 @@ const MediaSingleNodeWrapper = ({
479
480
  editorDisabledState,
480
481
  editorViewModeState
481
482
  } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
483
+ const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
482
484
  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]);
485
+ const isSelectedAndInteracted = useCallback(() => Boolean(selected() && hasHadInteraction), [hasHadInteraction, selected]);
483
486
  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
484
487
  return jsx(MediaSingleNodeNext, {
485
488
  width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -491,7 +494,7 @@ const MediaSingleNodeWrapper = ({
491
494
  mediaOptions: mediaOptions,
492
495
  view: view,
493
496
  fullWidthMode: fullWidthMode,
494
- selected: selected,
497
+ selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
495
498
  eventDispatcher: eventDispatcher,
496
499
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
497
500
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -519,7 +522,7 @@ const MediaSingleNodeWrapper = ({
519
522
  mediaOptions: mediaOptions,
520
523
  view: view,
521
524
  fullWidthMode: fullWidthMode,
522
- selected: selected,
525
+ selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
523
526
  eventDispatcher: eventDispatcher,
524
527
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
525
528
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
package/dist/esm/nodeviews/mediaSingle.js CHANGED
@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
19
19
  * @jsxFrag
20
20
  */
21
21
 
22
- import React, { Component, Fragment, useMemo } from 'react';
22
+ import React, { Component, Fragment, useCallback, useMemo } from 'react';
23
23
 
24
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
25
  import { css, jsx } from '@emotion/react';
@@ -29,6 +29,7 @@ import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, E
29
29
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
30
30
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
31
31
  import { MediaSingle } from '@atlaskit/editor-common/ui';
32
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
32
33
  import { browser, isNodeSelectedOrInRange, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
33
34
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
34
35
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -557,9 +558,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
557
558
  annotationState = _useSharedPluginState.annotationState,
558
559
  editorDisabledState = _useSharedPluginState.editorDisabledState,
559
560
  editorViewModeState = _useSharedPluginState.editorViewModeState;
561
+ var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
560
562
  var mediaProvider = useMemo(function () {
561
563
  return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
562
564
  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
565
+ var isSelectedAndInteracted = useCallback(function () {
566
+ return Boolean(selected() && hasHadInteraction);
567
+ }, [hasHadInteraction, selected]);
563
568
  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
564
569
  return jsx(MediaSingleNodeNext, {
565
570
  width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
@@ -571,7 +576,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
571
576
  mediaOptions: mediaOptions,
572
577
  view: view,
573
578
  fullWidthMode: fullWidthMode,
574
- selected: selected,
579
+ selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
575
580
  eventDispatcher: eventDispatcher,
576
581
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
577
582
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
@@ -599,7 +604,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
599
604
  mediaOptions: mediaOptions,
600
605
  view: view,
601
606
  fullWidthMode: fullWidthMode,
602
- selected: selected,
607
+ selected: fg('platform_editor_no_selection_until_interaction') ? isSelectedAndInteracted : selected,
603
608
  eventDispatcher: eventDispatcher,
604
609
  mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
605
610
  annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
package/dist/types/mediaPluginType.d.ts CHANGED
@@ -13,6 +13,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
13
13
  import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
14
14
  import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
15
15
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
16
+ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
16
17
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
17
18
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
18
19
  import type { MediaPluginState } from './pm-plugins/types';
@@ -29,10 +30,12 @@ export type MediaPluginDependencies = [
29
30
  FloatingToolbarPlugin,
30
31
  EditorDisabledPlugin,
31
32
  FocusPlugin,
33
+ OptionalPlugin<InteractionPlugin>,
32
34
  SelectionPlugin,
33
35
  OptionalPlugin<AnnotationPlugin>,
34
36
  OptionalPlugin<FeatureFlagsPlugin>,
35
- OptionalPlugin<ConnectivityPlugin>
37
+ OptionalPlugin<ConnectivityPlugin>,
38
+ OptionalPlugin<InteractionPlugin>
36
39
  ];
37
40
  export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
38
41
  pluginConfiguration: MediaOptions | undefined;
package/dist/types-ts4.5/mediaPluginType.d.ts CHANGED
@@ -13,6 +13,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
13
13
  import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
14
14
  import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
15
15
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
16
+ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
16
17
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
17
18
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
18
19
  import type { MediaPluginState } from './pm-plugins/types';
@@ -29,10 +30,12 @@ export type MediaPluginDependencies = [
29
30
  FloatingToolbarPlugin,
30
31
  EditorDisabledPlugin,
31
32
  FocusPlugin,
33
+ OptionalPlugin<InteractionPlugin>,
32
34
  SelectionPlugin,
33
35
  OptionalPlugin<AnnotationPlugin>,
34
36
  OptionalPlugin<FeatureFlagsPlugin>,
35
- OptionalPlugin<ConnectivityPlugin>
37
+ OptionalPlugin<ConnectivityPlugin>,
38
+ OptionalPlugin<InteractionPlugin>
36
39
  ];
37
40
  export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
38
41
  pluginConfiguration: MediaOptions | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "2.6.0",
3
+ "version": "2.6.2",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,18 +38,19 @@
38
38
  "@atlaskit/analytics-namespaced-context": "^7.0.0",
39
39
  "@atlaskit/analytics-next": "^11.0.0",
40
40
  "@atlaskit/button": "^23.0.0",
41
- "@atlaskit/editor-common": "^103.8.0",
41
+ "@atlaskit/editor-common": "^103.11.0",
42
42
  "@atlaskit/editor-palette": "^2.1.0",
43
43
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
44
- "@atlaskit/editor-plugin-annotation": "^2.5.0",
44
+ "@atlaskit/editor-plugin-annotation": "^2.7.0",
45
45
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
46
46
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
47
47
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
48
48
  "@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
49
- "@atlaskit/editor-plugin-floating-toolbar": "^3.6.0",
49
+ "@atlaskit/editor-plugin-floating-toolbar": "^4.0.0",
50
50
  "@atlaskit/editor-plugin-focus": "^1.5.0",
51
51
  "@atlaskit/editor-plugin-grid": "^2.0.0",
52
52
  "@atlaskit/editor-plugin-guideline": "^2.0.0",
53
+ "@atlaskit/editor-plugin-interaction": "^1.0.0",
53
54
  "@atlaskit/editor-plugin-selection": "^2.1.0",
54
55
  "@atlaskit/editor-plugin-width": "^3.0.0",
55
56
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -57,7 +58,7 @@
57
58
  "@atlaskit/editor-tables": "^2.9.0",
58
59
  "@atlaskit/form": "^12.0.0",
59
60
  "@atlaskit/icon": "^25.6.0",
60
- "@atlaskit/media-card": "^79.1.0",
61
+ "@atlaskit/media-card": "^79.2.0",
61
62
  "@atlaskit/media-client": "^32.0.0",
62
63
  "@atlaskit/media-client-react": "^4.0.0",
63
64
  "@atlaskit/media-common": "^12.0.0",
@@ -69,7 +70,7 @@
69
70
  "@atlaskit/primitives": "^14.4.0",
70
71
  "@atlaskit/textfield": "^8.0.0",
71
72
  "@atlaskit/theme": "^18.0.0",
72
- "@atlaskit/tmp-editor-statsig": "^4.9.0",
73
+ "@atlaskit/tmp-editor-statsig": "^4.12.0",
73
74
  "@atlaskit/tokens": "^4.8.0",
74
75
  "@atlaskit/tooltip": "^20.0.0",
75
76
  "@babel/runtime": "^7.0.0",
@@ -179,6 +180,9 @@
179
180
  },
180
181
  "platform_editor_ssr_media": {
181
182
  "type": "boolean"
183
+ },
184
+ "platform_editor_no_selection_until_interaction": {
185
+ "type": "boolean"
182
186
  }
183
187
  },
184
188
  "stricter": {