@atlaskit/editor-plugin-grid 11.0.0 → 11.0.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 (5) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/gridPlugin.js +41 -11
  3. package/dist/es2019/gridPlugin.js +32 -3
  4. package/dist/esm/gridPlugin.js +42 -12
  5. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-grid
2
2
 
3
+ ## 11.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`4c44277d90774`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c44277d90774) -
8
+ depreciate theme in editor
9
+
10
+ ## 11.0.1
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 11.0.0
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/gridPlugin.js CHANGED
@@ -15,6 +15,8 @@ var _hooks = require("@atlaskit/editor-common/hooks");
15
15
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
16
16
  var _state = require("@atlaskit/editor-prosemirror/state");
17
17
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
+ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
19
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
18
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
19
21
 
20
22
  var GRID_SIZE = exports.GRID_SIZE = 12;
@@ -94,7 +96,7 @@ var lineLengthGridLines = function lineLengthGridLines(highlights) {
94
96
  }
95
97
  return gridLines;
96
98
  };
97
- var Grid = function Grid(_ref3) {
99
+ var GridLegacy = function GridLegacy(_ref3) {
98
100
  var highlight = _ref3.highlight,
99
101
  shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
100
102
  theme = _ref3.theme,
@@ -120,7 +122,35 @@ var Grid = function Grid(_ref3) {
120
122
  }, gridLines))
121
123
  );
122
124
  };
123
- var ThemedGrid = (0, _react2.withTheme)(Grid);
125
+ var GridNext = function GridNext(_ref4) {
126
+ var highlight = _ref4.highlight,
127
+ shouldCalcBreakoutGridLines = _ref4.shouldCalcBreakoutGridLines,
128
+ containerElement = _ref4.containerElement,
129
+ editorWidth = _ref4.editorWidth,
130
+ gridType = _ref4.gridType,
131
+ visible = _ref4.visible;
132
+ var editorMaxWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
133
+ var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
134
+ return (
135
+ /*#__PURE__*/
136
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
137
+ _react.default.createElement("div", {
138
+ className: "gridParent"
139
+ }, /*#__PURE__*/_react.default.createElement("div", {
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
141
+ className: (0, _classnames.default)('gridContainer', gridType),
142
+ style: {
143
+ height: "".concat(containerElement.scrollHeight, "px"),
144
+ display: visible ? 'block' : 'none'
145
+ },
146
+ "data-testid": "gridContainer"
147
+ }, gridLines))
148
+ );
149
+ };
150
+ var ThemedGridLegacy = (0, _react2.withTheme)(GridLegacy);
151
+ var ThemedGrid = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
152
+ return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || (0, _expValEquals.expValEquals)('platform_editor_core_static_css', 'isEnabled', true);
153
+ }, GridNext, ThemedGridLegacy);
124
154
  var selector = function selector(states) {
125
155
  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
126
156
  return {
@@ -130,10 +160,10 @@ var selector = function selector(states) {
130
160
  highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
131
161
  };
132
162
  };
133
- var ContentComponent = function ContentComponent(_ref4) {
134
- var api = _ref4.api,
135
- editorView = _ref4.editorView,
136
- options = _ref4.options;
163
+ var ContentComponent = function ContentComponent(_ref5) {
164
+ var api = _ref5.api,
165
+ editorView = _ref5.editorView,
166
+ options = _ref5.options;
137
167
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['width', 'grid'], selector),
138
168
  width = _useSharedPluginState.width,
139
169
  visible = _useSharedPluginState.visible,
@@ -178,9 +208,9 @@ var gridPMPlugin = new _safePlugin.SafePlugin({
178
208
  * Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
179
209
  * from `@atlaskit/editor-core`.
180
210
  */
181
- var gridPlugin = exports.gridPlugin = function gridPlugin(_ref5) {
182
- var options = _ref5.config,
183
- api = _ref5.api;
211
+ var gridPlugin = exports.gridPlugin = function gridPlugin(_ref6) {
212
+ var options = _ref6.config,
213
+ api = _ref6.api;
184
214
  return {
185
215
  name: 'grid',
186
216
  getSharedState: function getSharedState(editorState) {
@@ -200,8 +230,8 @@ var gridPlugin = exports.gridPlugin = function gridPlugin(_ref5) {
200
230
  }
201
231
  }];
202
232
  },
203
- contentComponent: function contentComponent(_ref6) {
204
- var editorView = _ref6.editorView;
233
+ contentComponent: function contentComponent(_ref7) {
234
+ var editorView = _ref7.editorView;
205
235
  if (!editorView || (0, _coreUtils.isSSR)()) {
206
236
  return null;
207
237
  }
package/dist/es2019/gridPlugin.js CHANGED
@@ -7,7 +7,9 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
7
7
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
8
8
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
9
9
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
10
- import { akEditorBreakoutPadding, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
10
+ import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
11
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
12
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
13
  export const GRID_SIZE = 12;
12
14
  const key = new PluginKey('gridPlugin');
13
15
  const createDisplayGrid = view => props => {
@@ -86,7 +88,7 @@ const lineLengthGridLines = highlights => {
86
88
  }
87
89
  return gridLines;
88
90
  };
89
- const Grid = ({
91
+ const GridLegacy = ({
90
92
  highlight,
91
93
  shouldCalcBreakoutGridLines,
92
94
  theme,
@@ -113,7 +115,34 @@ const Grid = ({
113
115
  }, gridLines))
114
116
  );
115
117
  };
116
- const ThemedGrid = withTheme(Grid);
118
+ const GridNext = ({
119
+ highlight,
120
+ shouldCalcBreakoutGridLines,
121
+ containerElement,
122
+ editorWidth,
123
+ gridType,
124
+ visible
125
+ }) => {
126
+ const editorMaxWidth = akEditorDefaultLayoutWidth;
127
+ const gridLines = [...lineLengthGridLines(highlight), ...gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)];
128
+ return (
129
+ /*#__PURE__*/
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
131
+ React.createElement("div", {
132
+ className: "gridParent"
133
+ }, /*#__PURE__*/React.createElement("div", {
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
135
+ className: classnames('gridContainer', gridType),
136
+ style: {
137
+ height: `${containerElement.scrollHeight}px`,
138
+ display: visible ? 'block' : 'none'
139
+ },
140
+ "data-testid": "gridContainer"
141
+ }, gridLines))
142
+ );
143
+ };
144
+ const ThemedGridLegacy = withTheme(GridLegacy);
145
+ const ThemedGrid = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true), GridNext, ThemedGridLegacy);
117
146
  const selector = states => {
118
147
  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
119
148
  return {
package/dist/esm/gridPlugin.js CHANGED
@@ -9,7 +9,9 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
9
9
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
10
10
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
11
11
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
12
- import { akEditorBreakoutPadding, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
12
+ import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
13
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
15
  export var GRID_SIZE = 12;
14
16
  var key = new PluginKey('gridPlugin');
15
17
  var createDisplayGrid = function createDisplayGrid(view) {
@@ -87,7 +89,7 @@ var lineLengthGridLines = function lineLengthGridLines(highlights) {
87
89
  }
88
90
  return gridLines;
89
91
  };
90
- var Grid = function Grid(_ref3) {
92
+ var GridLegacy = function GridLegacy(_ref3) {
91
93
  var highlight = _ref3.highlight,
92
94
  shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
93
95
  theme = _ref3.theme,
@@ -113,7 +115,35 @@ var Grid = function Grid(_ref3) {
113
115
  }, gridLines))
114
116
  );
115
117
  };
116
- var ThemedGrid = withTheme(Grid);
118
+ var GridNext = function GridNext(_ref4) {
119
+ var highlight = _ref4.highlight,
120
+ shouldCalcBreakoutGridLines = _ref4.shouldCalcBreakoutGridLines,
121
+ containerElement = _ref4.containerElement,
122
+ editorWidth = _ref4.editorWidth,
123
+ gridType = _ref4.gridType,
124
+ visible = _ref4.visible;
125
+ var editorMaxWidth = akEditorDefaultLayoutWidth;
126
+ var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
127
+ return (
128
+ /*#__PURE__*/
129
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
130
+ React.createElement("div", {
131
+ className: "gridParent"
132
+ }, /*#__PURE__*/React.createElement("div", {
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
134
+ className: classnames('gridContainer', gridType),
135
+ style: {
136
+ height: "".concat(containerElement.scrollHeight, "px"),
137
+ display: visible ? 'block' : 'none'
138
+ },
139
+ "data-testid": "gridContainer"
140
+ }, gridLines))
141
+ );
142
+ };
143
+ var ThemedGridLegacy = withTheme(GridLegacy);
144
+ var ThemedGrid = componentWithCondition(function () {
145
+ return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true);
146
+ }, GridNext, ThemedGridLegacy);
117
147
  var selector = function selector(states) {
118
148
  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
119
149
  return {
@@ -123,10 +153,10 @@ var selector = function selector(states) {
123
153
  highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
124
154
  };
125
155
  };
126
- var ContentComponent = function ContentComponent(_ref4) {
127
- var api = _ref4.api,
128
- editorView = _ref4.editorView,
129
- options = _ref4.options;
156
+ var ContentComponent = function ContentComponent(_ref5) {
157
+ var api = _ref5.api,
158
+ editorView = _ref5.editorView,
159
+ options = _ref5.options;
130
160
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['width', 'grid'], selector),
131
161
  width = _useSharedPluginState.width,
132
162
  visible = _useSharedPluginState.visible,
@@ -171,9 +201,9 @@ var gridPMPlugin = new SafePlugin({
171
201
  * Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
172
202
  * from `@atlaskit/editor-core`.
173
203
  */
174
- export var gridPlugin = function gridPlugin(_ref5) {
175
- var options = _ref5.config,
176
- api = _ref5.api;
204
+ export var gridPlugin = function gridPlugin(_ref6) {
205
+ var options = _ref6.config,
206
+ api = _ref6.api;
177
207
  return {
178
208
  name: 'grid',
179
209
  getSharedState: function getSharedState(editorState) {
@@ -193,8 +223,8 @@ export var gridPlugin = function gridPlugin(_ref5) {
193
223
  }
194
224
  }];
195
225
  },
196
- contentComponent: function contentComponent(_ref6) {
197
- var editorView = _ref6.editorView;
226
+ contentComponent: function contentComponent(_ref7) {
227
+ var editorView = _ref7.editorView;
198
228
  if (!editorView || isSSR()) {
199
229
  return null;
200
230
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-grid",
3
- "version": "11.0.0",
3
+ "version": "11.0.2",
4
4
  "description": "Grid plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,13 +24,14 @@
24
24
  "@atlaskit/editor-plugin-width": "^12.0.0",
25
25
  "@atlaskit/editor-prosemirror": "^7.3.0",
26
26
  "@atlaskit/editor-shared-styles": "^3.11.0",
27
- "@atlaskit/tmp-editor-statsig": "^88.0.0",
27
+ "@atlaskit/platform-feature-flags-react": "^0.5.0",
28
+ "@atlaskit/tmp-editor-statsig": "^89.2.0",
28
29
  "@babel/runtime": "^7.0.0",
29
30
  "@emotion/react": "^11.7.1",
30
31
  "classnames": "^2.2.5"
31
32
  },
32
33
  "peerDependencies": {
33
- "@atlaskit/editor-common": "^115.0.0",
34
+ "@atlaskit/editor-common": "^115.6.0",
34
35
  "react": "^18.2.0",
35
36
  "react-dom": "^18.2.0"
36
37
  },