@atlaskit/editor-plugin-breakout 2.2.1 → 2.2.3

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 (5) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/breakoutPlugin.js +36 -38
  3. package/dist/es2019/breakoutPlugin.js +38 -39
  4. package/dist/esm/breakoutPlugin.js +37 -39
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.2.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#150308](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150308)
14
+ [`a8c419124f349`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a8c419124f349) -
15
+ Migrate breakoutPlugin to useSharedPluginStateSelector
16
+ - Updated dependencies
17
+
3
18
  ## 2.2.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/breakoutPlugin.js CHANGED
@@ -108,6 +108,36 @@ function createPlugin(pluginInjectionApi, _ref) {
108
108
  }
109
109
  });
110
110
  }
111
+ var useOldHook = function useOldHook(api) {
112
+ // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
113
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
114
+ breakoutState = _useSharedPluginState.breakoutState,
115
+ editorViewModeState = _useSharedPluginState.editorViewModeState,
116
+ editorDisabledState = _useSharedPluginState.editorDisabledState,
117
+ blockControlsState = _useSharedPluginState.blockControlsState;
118
+ return {
119
+ breakoutNode: breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode,
120
+ isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
121
+ isPMDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging,
122
+ mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
123
+ editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
124
+ };
125
+ };
126
+ var useNewHook = function useNewHook(api) {
127
+ var breakoutNode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.breakoutNode');
128
+ var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging');
129
+ var isPMDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isPMDragging');
130
+ var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
131
+ var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorDisabled.editorDisabled');
132
+ return {
133
+ breakoutNode: breakoutNode,
134
+ isDragging: isDragging,
135
+ isPMDragging: isPMDragging,
136
+ mode: mode,
137
+ editorDisabled: editorDisabled
138
+ };
139
+ };
140
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(useNewHook, useOldHook);
111
141
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
112
142
  var _breakoutNode$node;
113
143
  var api = _ref2.api,
@@ -115,44 +145,12 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
115
145
  boundariesElement = _ref2.boundariesElement,
116
146
  scrollableElement = _ref2.scrollableElement,
117
147
  mountPoint = _ref2.mountPoint;
118
- // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
119
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
120
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
121
- }),
122
- breakoutState = _useSharedPluginState.breakoutState,
123
- editorViewModeState = _useSharedPluginState.editorViewModeState,
124
- editorDisabledState = _useSharedPluginState.editorDisabledState,
125
- blockControlsState = _useSharedPluginState.blockControlsState;
126
-
127
- // breakoutNode
128
- var breakoutNodeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.breakoutNode', {
129
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
130
- });
131
- var breakoutNode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? breakoutNodeSelector : breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode;
132
-
133
- // isDragging
134
- var isDraggingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
135
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
136
- });
137
- var isDragging = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
138
-
139
- // isPMDragging
140
- var isPMDraggingSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isPMDragging', {
141
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
142
- });
143
- var isPMDragging = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
144
-
145
- // mode
146
- var modeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
147
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
148
- });
149
- var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
150
-
151
- // editorDisabled
152
- var editorDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorDisabled.editorDisabled', {
153
- disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
154
- });
155
- var editorDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
148
+ var _useSharedState = useSharedState(api),
149
+ breakoutNode = _useSharedState.breakoutNode,
150
+ isDragging = _useSharedState.isDragging,
151
+ isPMDragging = _useSharedState.isPMDragging,
152
+ mode = _useSharedState.mode,
153
+ editorDisabled = _useSharedState.editorDisabled;
156
154
  if (isDragging || isPMDragging) {
157
155
  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
158
156
  return null;
package/dist/es2019/breakoutPlugin.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { breakout } from '@atlaskit/adf-schema';
3
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
4
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
5
5
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
6
6
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
@@ -99,6 +99,37 @@ function createPlugin(pluginInjectionApi, {
99
99
  }
100
100
  });
101
101
  }
102
+ const useOldHook = api => {
103
+ // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
104
+ const {
105
+ breakoutState,
106
+ editorViewModeState,
107
+ editorDisabledState,
108
+ blockControlsState
109
+ } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']);
110
+ return {
111
+ breakoutNode: breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode,
112
+ isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
113
+ isPMDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging,
114
+ mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
115
+ editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
116
+ };
117
+ };
118
+ const useNewHook = api => {
119
+ const breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
120
+ const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging');
121
+ const isPMDragging = useSharedPluginStateSelector(api, 'blockControls.isPMDragging');
122
+ const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
123
+ const editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
124
+ return {
125
+ breakoutNode,
126
+ isDragging,
127
+ isPMDragging,
128
+ mode,
129
+ editorDisabled
130
+ };
131
+ };
132
+ const useSharedState = sharedPluginStateHookMigratorFactory(useNewHook, useOldHook);
102
133
  const LayoutButtonWrapper = ({
103
134
  api,
104
135
  editorView,
@@ -107,45 +138,13 @@ const LayoutButtonWrapper = ({
107
138
  mountPoint
108
139
  }) => {
109
140
  var _breakoutNode$node;
110
- // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
111
141
  const {
112
- breakoutState,
113
- editorViewModeState,
114
- editorDisabledState,
115
- blockControlsState
116
- } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
117
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
118
- });
119
-
120
- // breakoutNode
121
- const breakoutNodeSelector = useSharedPluginStateSelector(api, 'breakout.breakoutNode', {
122
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
123
- });
124
- const breakoutNode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? breakoutNodeSelector : breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode;
125
-
126
- // isDragging
127
- const isDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
128
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
129
- });
130
- const isDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
131
-
132
- // isPMDragging
133
- const isPMDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isPMDragging', {
134
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
135
- });
136
- const isPMDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
137
-
138
- // mode
139
- const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
140
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
141
- });
142
- const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
143
-
144
- // editorDisabled
145
- const editorDisabledSelector = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled', {
146
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
147
- });
148
- const editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
142
+ breakoutNode,
143
+ isDragging,
144
+ isPMDragging,
145
+ mode,
146
+ editorDisabled
147
+ } = useSharedState(api);
149
148
  if (isDragging || isPMDragging) {
150
149
  if (editorExperiment('advanced_layouts', true)) {
151
150
  return null;
package/dist/esm/breakoutPlugin.js CHANGED
@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  import React from 'react';
7
7
  import { breakout } from '@atlaskit/adf-schema';
8
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
8
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
9
9
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
10
10
  import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
11
11
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
@@ -101,6 +101,36 @@ function createPlugin(pluginInjectionApi, _ref) {
101
101
  }
102
102
  });
103
103
  }
104
+ var useOldHook = function useOldHook(api) {
105
+ // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
106
+ var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
107
+ breakoutState = _useSharedPluginState.breakoutState,
108
+ editorViewModeState = _useSharedPluginState.editorViewModeState,
109
+ editorDisabledState = _useSharedPluginState.editorDisabledState,
110
+ blockControlsState = _useSharedPluginState.blockControlsState;
111
+ return {
112
+ breakoutNode: breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode,
113
+ isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
114
+ isPMDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging,
115
+ mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
116
+ editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
117
+ };
118
+ };
119
+ var useNewHook = function useNewHook(api) {
120
+ var breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
121
+ var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging');
122
+ var isPMDragging = useSharedPluginStateSelector(api, 'blockControls.isPMDragging');
123
+ var mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
124
+ var editorDisabled = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled');
125
+ return {
126
+ breakoutNode: breakoutNode,
127
+ isDragging: isDragging,
128
+ isPMDragging: isPMDragging,
129
+ mode: mode,
130
+ editorDisabled: editorDisabled
131
+ };
132
+ };
133
+ var useSharedState = sharedPluginStateHookMigratorFactory(useNewHook, useOldHook);
104
134
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
105
135
  var _breakoutNode$node;
106
136
  var api = _ref2.api,
@@ -108,44 +138,12 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
108
138
  boundariesElement = _ref2.boundariesElement,
109
139
  scrollableElement = _ref2.scrollableElement,
110
140
  mountPoint = _ref2.mountPoint;
111
- // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
112
- var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
113
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
114
- }),
115
- breakoutState = _useSharedPluginState.breakoutState,
116
- editorViewModeState = _useSharedPluginState.editorViewModeState,
117
- editorDisabledState = _useSharedPluginState.editorDisabledState,
118
- blockControlsState = _useSharedPluginState.blockControlsState;
119
-
120
- // breakoutNode
121
- var breakoutNodeSelector = useSharedPluginStateSelector(api, 'breakout.breakoutNode', {
122
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
123
- });
124
- var breakoutNode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? breakoutNodeSelector : breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode;
125
-
126
- // isDragging
127
- var isDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
128
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
129
- });
130
- var isDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
131
-
132
- // isPMDragging
133
- var isPMDraggingSelector = useSharedPluginStateSelector(api, 'blockControls.isPMDragging', {
134
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
135
- });
136
- var isPMDragging = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isPMDraggingSelector : blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isPMDragging;
137
-
138
- // mode
139
- var modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
140
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
141
- });
142
- var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
143
-
144
- // editorDisabled
145
- var editorDisabledSelector = useSharedPluginStateSelector(api, 'editorDisabled.editorDisabled', {
146
- disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
147
- });
148
- var editorDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorDisabledSelector : editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled;
141
+ var _useSharedState = useSharedState(api),
142
+ breakoutNode = _useSharedState.breakoutNode,
143
+ isDragging = _useSharedState.isDragging,
144
+ isPMDragging = _useSharedState.isPMDragging,
145
+ mode = _useSharedState.mode,
146
+ editorDisabled = _useSharedState.editorDisabled;
149
147
  if (isDragging || isPMDragging) {
150
148
  if (editorExperiment('advanced_layouts', true)) {
151
149
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.2.1",
3
+ "version": "2.2.3",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,17 +34,17 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^104.0.0",
37
+ "@atlaskit/editor-common": "^104.1.0",
38
38
  "@atlaskit/editor-plugin-block-controls": "^3.13.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
40
40
  "@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
41
41
  "@atlaskit/editor-plugin-width": "^3.0.0",
42
42
  "@atlaskit/editor-prosemirror": "7.0.0",
43
43
  "@atlaskit/editor-shared-styles": "^3.4.0",
44
- "@atlaskit/icon": "^25.6.0",
44
+ "@atlaskit/icon": "^26.0.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
46
46
  "@atlaskit/theme": "^18.0.0",
47
- "@atlaskit/tmp-editor-statsig": "^4.16.0",
47
+ "@atlaskit/tmp-editor-statsig": "^4.19.0",
48
48
  "@atlaskit/tokens": "^4.8.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1"