@atlaskit/editor-plugin-breakout 2.1.7 → 2.2.0

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 +21 -0
  2. package/dist/cjs/breakoutPlugin.js +40 -7
  3. package/dist/es2019/breakoutPlugin.js +40 -7
  4. package/dist/esm/breakoutPlugin.js +40 -7
  5. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 2.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#147450](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147450)
8
+ [`38f270ecf0ed0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38f270ecf0ed0) -
9
+ Revert optimisation made to breakout
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 2.1.8
16
+
17
+ ### Patch Changes
18
+
19
+ - [#144898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144898)
20
+ [`b9a10d6716ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b9a10d6716ef4) -
21
+ Enable useSharedPluginStateSelector in block-controls, block-type and breakout plugins
22
+ - Updated dependencies
23
+
3
24
  ## 2.1.7
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/breakoutPlugin.js CHANGED
@@ -13,6 +13,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
13
13
  var _hooks = require("@atlaskit/editor-common/hooks");
14
14
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
15
15
  var _styles = require("@atlaskit/editor-common/styles");
16
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
16
17
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
17
18
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
19
  var _pluginKey = require("./pm-plugins/plugin-key");
@@ -108,31 +109,63 @@ function createPlugin(pluginInjectionApi, _ref) {
108
109
  });
109
110
  }
110
111
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
111
- var _breakoutState$breako, _breakoutState$breako2;
112
+ var _breakoutNode$node;
112
113
  var api = _ref2.api,
113
114
  editorView = _ref2.editorView,
114
115
  boundariesElement = _ref2.boundariesElement,
115
116
  scrollableElement = _ref2.scrollableElement,
116
117
  mountPoint = _ref2.mountPoint;
117
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
118
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
119
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
120
+ disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
121
+ }),
119
122
  breakoutState = _useSharedPluginState.breakoutState,
120
123
  editorViewModeState = _useSharedPluginState.editorViewModeState,
121
124
  editorDisabledState = _useSharedPluginState.editorDisabledState,
122
125
  blockControlsState = _useSharedPluginState.blockControlsState;
123
- if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
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;
156
+ if (isDragging || isPMDragging) {
124
157
  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
125
158
  return null;
126
159
  }
127
160
  }
128
- var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
129
- var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
130
- return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
161
+ var isViewMode = mode === 'view';
162
+ var isEditMode = mode === 'edit';
163
+ return !isViewMode && editorDisabled === false ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
131
164
  editorView: editorView,
132
165
  mountPoint: mountPoint,
133
166
  boundariesElement: boundariesElement,
134
167
  scrollableElement: scrollableElement,
135
- node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
168
+ node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
136
169
  isLivePage: isEditMode
137
170
  }) : null;
138
171
  };
package/dist/es2019/breakoutPlugin.js CHANGED
@@ -3,6 +3,7 @@ import { breakout } from '@atlaskit/adf-schema';
3
3
  import { useSharedPluginState } 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
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
6
7
  import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
7
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
9
  import { pluginKey } from './pm-plugins/plugin-key';
@@ -105,27 +106,59 @@ const LayoutButtonWrapper = ({
105
106
  scrollableElement,
106
107
  mountPoint
107
108
  }) => {
108
- var _breakoutState$breako, _breakoutState$breako2;
109
+ var _breakoutNode$node;
109
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
110
111
  const {
111
112
  breakoutState,
112
113
  editorViewModeState,
113
114
  editorDisabledState,
114
115
  blockControlsState
115
- } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']);
116
- if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
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;
149
+ if (isDragging || isPMDragging) {
117
150
  if (editorExperiment('advanced_layouts', true)) {
118
151
  return null;
119
152
  }
120
153
  }
121
- const isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
122
- const isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
123
- return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
154
+ const isViewMode = mode === 'view';
155
+ const isEditMode = mode === 'edit';
156
+ return !isViewMode && editorDisabled === false ? /*#__PURE__*/React.createElement(LayoutButton, {
124
157
  editorView: editorView,
125
158
  mountPoint: mountPoint,
126
159
  boundariesElement: boundariesElement,
127
160
  scrollableElement: scrollableElement,
128
- node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
161
+ node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
129
162
  isLivePage: isEditMode
130
163
  }) : null;
131
164
  };
package/dist/esm/breakoutPlugin.js CHANGED
@@ -8,6 +8,7 @@ import { breakout } from '@atlaskit/adf-schema';
8
8
  import { useSharedPluginState } 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
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
11
12
  import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
12
13
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
14
  import { pluginKey } from './pm-plugins/plugin-key';
@@ -101,31 +102,63 @@ function createPlugin(pluginInjectionApi, _ref) {
101
102
  });
102
103
  }
103
104
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
104
- var _breakoutState$breako, _breakoutState$breako2;
105
+ var _breakoutNode$node;
105
106
  var api = _ref2.api,
106
107
  editorView = _ref2.editorView,
107
108
  boundariesElement = _ref2.boundariesElement,
108
109
  scrollableElement = _ref2.scrollableElement,
109
110
  mountPoint = _ref2.mountPoint;
110
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
111
- var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls']),
112
+ var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode', 'editorDisabled', 'blockControls'], {
113
+ disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
114
+ }),
112
115
  breakoutState = _useSharedPluginState.breakoutState,
113
116
  editorViewModeState = _useSharedPluginState.editorViewModeState,
114
117
  editorDisabledState = _useSharedPluginState.editorDisabledState,
115
118
  blockControlsState = _useSharedPluginState.blockControlsState;
116
- if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging || blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isPMDragging) {
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;
149
+ if (isDragging || isPMDragging) {
117
150
  if (editorExperiment('advanced_layouts', true)) {
118
151
  return null;
119
152
  }
120
153
  }
121
- var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
122
- var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
123
- return !isViewMode && editorDisabledState !== undefined && !(editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) ? /*#__PURE__*/React.createElement(LayoutButton, {
154
+ var isViewMode = mode === 'view';
155
+ var isEditMode = mode === 'edit';
156
+ return !isViewMode && editorDisabled === false ? /*#__PURE__*/React.createElement(LayoutButton, {
124
157
  editorView: editorView,
125
158
  mountPoint: mountPoint,
126
159
  boundariesElement: boundariesElement,
127
160
  scrollableElement: scrollableElement,
128
- node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
161
+ node: (_breakoutNode$node = breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node) !== null && _breakoutNode$node !== void 0 ? _breakoutNode$node : null,
129
162
  isLivePage: isEditMode
130
163
  }) : null;
131
164
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "2.1.7",
3
+ "version": "2.2.0",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,18 +34,18 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^103.6.0",
38
- "@atlaskit/editor-plugin-block-controls": "^3.9.0",
37
+ "@atlaskit/editor-common": "^103.19.0",
38
+ "@atlaskit/editor-plugin-block-controls": "^3.11.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.5.0",
44
+ "@atlaskit/icon": "^25.6.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
46
46
  "@atlaskit/theme": "^18.0.0",
47
- "@atlaskit/tmp-editor-statsig": "^4.6.0",
48
- "@atlaskit/tokens": "^4.7.0",
47
+ "@atlaskit/tmp-editor-statsig": "^4.15.0",
48
+ "@atlaskit/tokens": "^4.8.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1"
51
51
  },
@@ -55,13 +55,13 @@
55
55
  "react-intl-next": "npm:react-intl@^5.18.1"
56
56
  },
57
57
  "devDependencies": {
58
- "@af/integration-testing": "^0.5.0",
59
- "@af/visual-regression": "^1.3.0",
60
- "@atlaskit/editor-plugin-code-block": "^4.3.0",
58
+ "@af/integration-testing": "workspace:^",
59
+ "@af/visual-regression": "workspace:^",
60
+ "@atlaskit/editor-plugin-code-block": "^4.4.0",
61
61
  "@atlaskit/editor-plugin-composition": "^1.3.0",
62
62
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
63
- "@atlaskit/ssr": "^0.4.0",
64
- "@atlaskit/visual-regression": "^0.10.0",
63
+ "@atlaskit/ssr": "workspace:^",
64
+ "@atlaskit/visual-regression": "workspace:^",
65
65
  "@testing-library/react": "^13.4.0",
66
66
  "typescript": "~5.4.2",
67
67
  "wait-for-expect": "^1.2.0"