@atlaskit/editor-plugin-grid 23.0.0 → 24.0.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 +12 -0
  2. package/dist/cjs/gridPlugin.js +11 -48
  3. package/dist/es2019/gridPlugin.js +1 -37
  4. package/dist/esm/gridPlugin.js +11 -48
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-grid
2
2
 
3
+ ## 24.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 23.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 23.0.0
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/gridPlugin.js CHANGED
@@ -8,17 +8,12 @@ exports.gridPlugin = exports.GRID_SIZE = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _react = _interopRequireDefault(require("react"));
11
- var _react2 = require("@emotion/react");
12
11
  var _classnames = _interopRequireDefault(require("classnames"));
13
12
  var _coreUtils = require("@atlaskit/editor-common/core-utils");
14
13
  var _hooks = require("@atlaskit/editor-common/hooks");
15
14
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
16
15
  var _state = require("@atlaskit/editor-prosemirror/state");
17
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
- var _componentWithCondition = require("@atlaskit/platform-feature-flags-react/component-with-condition");
19
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
20
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
-
22
17
  var GRID_SIZE = exports.GRID_SIZE = 12;
23
18
  // Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
24
19
  var GRID_GUTTER_WIDTH = 24;
@@ -98,42 +93,14 @@ var lineLengthGridLines = function lineLengthGridLines(highlights) {
98
93
  }
99
94
  return gridLines;
100
95
  };
101
- var GridLegacy = function GridLegacy(_ref3) {
96
+ var GridNext = function GridNext(_ref3) {
102
97
  var highlight = _ref3.highlight,
103
98
  shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
104
- theme = _ref3.theme,
105
99
  containerElement = _ref3.containerElement,
106
100
  editorWidth = _ref3.editorWidth,
107
101
  gridType = _ref3.gridType,
108
102
  overlayWidth = _ref3.overlayWidth,
109
103
  visible = _ref3.visible;
110
- var editorMaxWidth = theme.layoutMaxWidth;
111
- var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
112
- return (
113
- /*#__PURE__*/
114
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
115
- _react.default.createElement("div", {
116
- className: "gridParent"
117
- }, /*#__PURE__*/_react.default.createElement("div", {
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
119
- className: (0, _classnames.default)('gridContainer', gridType),
120
- style: {
121
- height: "".concat(containerElement.scrollHeight, "px"),
122
- display: visible ? 'block' : 'none',
123
- width: "".concat(overlayWidth, "px")
124
- },
125
- "data-testid": "gridContainer"
126
- }, gridLines))
127
- );
128
- };
129
- var GridNext = function GridNext(_ref4) {
130
- var highlight = _ref4.highlight,
131
- shouldCalcBreakoutGridLines = _ref4.shouldCalcBreakoutGridLines,
132
- containerElement = _ref4.containerElement,
133
- editorWidth = _ref4.editorWidth,
134
- gridType = _ref4.gridType,
135
- overlayWidth = _ref4.overlayWidth,
136
- visible = _ref4.visible;
137
104
  var editorMaxWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
138
105
  var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
139
106
  return (
@@ -153,10 +120,6 @@ var GridNext = function GridNext(_ref4) {
153
120
  }, gridLines))
154
121
  );
155
122
  };
156
- var ThemedGridLegacy = (0, _react2.withTheme)(GridLegacy);
157
- var ThemedGrid = (0, _componentWithCondition.componentWithCondition)(function () {
158
- return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || (0, _expValEquals.expValEquals)('platform_editor_core_static_css', 'isEnabled', true);
159
- }, GridNext, ThemedGridLegacy);
160
123
  var selector = function selector(states) {
161
124
  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
162
125
  return {
@@ -167,10 +130,10 @@ var selector = function selector(states) {
167
130
  highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
168
131
  };
169
132
  };
170
- var ContentComponent = function ContentComponent(_ref5) {
171
- var api = _ref5.api,
172
- editorView = _ref5.editorView,
173
- options = _ref5.options;
133
+ var ContentComponent = function ContentComponent(_ref4) {
134
+ var api = _ref4.api,
135
+ editorView = _ref4.editorView,
136
+ options = _ref4.options;
174
137
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['width', 'grid'], selector),
175
138
  lineLength = _useSharedPluginState.lineLength,
176
139
  width = _useSharedPluginState.width,
@@ -181,7 +144,7 @@ var ContentComponent = function ContentComponent(_ref5) {
181
144
  if (!visible || !highlight) {
182
145
  return null;
183
146
  }
184
- return /*#__PURE__*/_react.default.createElement(ThemedGrid, {
147
+ return /*#__PURE__*/_react.default.createElement(GridNext, {
185
148
  shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
186
149
  editorWidth: width !== null && width !== void 0 ? width : _editorSharedStyles.akEditorFullPageMaxWidth
187
150
  // Ignored via go/ees005
@@ -218,9 +181,9 @@ var gridPMPlugin = new _safePlugin.SafePlugin({
218
181
  * Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
219
182
  * from `@atlaskit/editor-core`.
220
183
  */
221
- var gridPlugin = exports.gridPlugin = function gridPlugin(_ref6) {
222
- var options = _ref6.config,
223
- api = _ref6.api;
184
+ var gridPlugin = exports.gridPlugin = function gridPlugin(_ref5) {
185
+ var options = _ref5.config,
186
+ api = _ref5.api;
224
187
  return {
225
188
  name: 'grid',
226
189
  getSharedState: function getSharedState(editorState) {
@@ -240,8 +203,8 @@ var gridPlugin = exports.gridPlugin = function gridPlugin(_ref6) {
240
203
  }
241
204
  }];
242
205
  },
243
- contentComponent: function contentComponent(_ref7) {
244
- var editorView = _ref7.editorView;
206
+ contentComponent: function contentComponent(_ref6) {
207
+ var editorView = _ref6.editorView;
245
208
  if (!editorView || (0, _coreUtils.isSSR)()) {
246
209
  return null;
247
210
  }
package/dist/es2019/gridPlugin.js CHANGED
@@ -1,15 +1,10 @@
1
1
  import React from 'react';
2
-
3
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
- import { withTheme } from '@emotion/react';
5
2
  import classnames from 'classnames';
6
3
  import { isSSR } from '@atlaskit/editor-common/core-utils';
7
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
8
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
9
6
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
10
7
  import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
11
- import { componentWithCondition } from '@atlaskit/platform-feature-flags-react/component-with-condition';
12
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
8
  export const GRID_SIZE = 12;
14
9
  // Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
15
10
  const GRID_GUTTER_WIDTH = 24;
@@ -90,35 +85,6 @@ const lineLengthGridLines = highlights => {
90
85
  }
91
86
  return gridLines;
92
87
  };
93
- const GridLegacy = ({
94
- highlight,
95
- shouldCalcBreakoutGridLines,
96
- theme,
97
- containerElement,
98
- editorWidth,
99
- gridType,
100
- overlayWidth,
101
- visible
102
- }) => {
103
- const editorMaxWidth = theme.layoutMaxWidth;
104
- const gridLines = [...lineLengthGridLines(highlight), ...gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)];
105
- return (
106
- /*#__PURE__*/
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
108
- React.createElement("div", {
109
- className: "gridParent"
110
- }, /*#__PURE__*/React.createElement("div", {
111
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
112
- className: classnames('gridContainer', gridType),
113
- style: {
114
- height: `${containerElement.scrollHeight}px`,
115
- display: visible ? 'block' : 'none',
116
- width: `${overlayWidth}px`
117
- },
118
- "data-testid": "gridContainer"
119
- }, gridLines))
120
- );
121
- };
122
88
  const GridNext = ({
123
89
  highlight,
124
90
  shouldCalcBreakoutGridLines,
@@ -147,8 +113,6 @@ const GridNext = ({
147
113
  }, gridLines))
148
114
  );
149
115
  };
150
- const ThemedGridLegacy = withTheme(GridLegacy);
151
- const ThemedGrid = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true), GridNext, ThemedGridLegacy);
152
116
  const selector = states => {
153
117
  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
154
118
  return {
@@ -175,7 +139,7 @@ const ContentComponent = ({
175
139
  if (!visible || !highlight) {
176
140
  return null;
177
141
  }
178
- return /*#__PURE__*/React.createElement(ThemedGrid, {
142
+ return /*#__PURE__*/React.createElement(GridNext, {
179
143
  shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
180
144
  editorWidth: width !== null && width !== void 0 ? width : akEditorFullPageMaxWidth
181
145
  // Ignored via go/ees005
package/dist/esm/gridPlugin.js CHANGED
@@ -1,17 +1,12 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  import React from 'react';
4
-
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { withTheme } from '@emotion/react';
7
4
  import classnames from 'classnames';
8
5
  import { isSSR } from '@atlaskit/editor-common/core-utils';
9
6
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
10
7
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
11
8
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
12
9
  import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
13
- import { componentWithCondition } from '@atlaskit/platform-feature-flags-react/component-with-condition';
14
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
10
  export var GRID_SIZE = 12;
16
11
  // Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
17
12
  var GRID_GUTTER_WIDTH = 24;
@@ -91,42 +86,14 @@ var lineLengthGridLines = function lineLengthGridLines(highlights) {
91
86
  }
92
87
  return gridLines;
93
88
  };
94
- var GridLegacy = function GridLegacy(_ref3) {
89
+ var GridNext = function GridNext(_ref3) {
95
90
  var highlight = _ref3.highlight,
96
91
  shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
97
- theme = _ref3.theme,
98
92
  containerElement = _ref3.containerElement,
99
93
  editorWidth = _ref3.editorWidth,
100
94
  gridType = _ref3.gridType,
101
95
  overlayWidth = _ref3.overlayWidth,
102
96
  visible = _ref3.visible;
103
- var editorMaxWidth = theme.layoutMaxWidth;
104
- var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
105
- return (
106
- /*#__PURE__*/
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
108
- React.createElement("div", {
109
- className: "gridParent"
110
- }, /*#__PURE__*/React.createElement("div", {
111
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
112
- className: classnames('gridContainer', gridType),
113
- style: {
114
- height: "".concat(containerElement.scrollHeight, "px"),
115
- display: visible ? 'block' : 'none',
116
- width: "".concat(overlayWidth, "px")
117
- },
118
- "data-testid": "gridContainer"
119
- }, gridLines))
120
- );
121
- };
122
- var GridNext = function GridNext(_ref4) {
123
- var highlight = _ref4.highlight,
124
- shouldCalcBreakoutGridLines = _ref4.shouldCalcBreakoutGridLines,
125
- containerElement = _ref4.containerElement,
126
- editorWidth = _ref4.editorWidth,
127
- gridType = _ref4.gridType,
128
- overlayWidth = _ref4.overlayWidth,
129
- visible = _ref4.visible;
130
97
  var editorMaxWidth = akEditorDefaultLayoutWidth;
131
98
  var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
132
99
  return (
@@ -146,10 +113,6 @@ var GridNext = function GridNext(_ref4) {
146
113
  }, gridLines))
147
114
  );
148
115
  };
149
- var ThemedGridLegacy = withTheme(GridLegacy);
150
- var ThemedGrid = componentWithCondition(function () {
151
- return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true);
152
- }, GridNext, ThemedGridLegacy);
153
116
  var selector = function selector(states) {
154
117
  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
155
118
  return {
@@ -160,10 +123,10 @@ var selector = function selector(states) {
160
123
  highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
161
124
  };
162
125
  };
163
- var ContentComponent = function ContentComponent(_ref5) {
164
- var api = _ref5.api,
165
- editorView = _ref5.editorView,
166
- options = _ref5.options;
126
+ var ContentComponent = function ContentComponent(_ref4) {
127
+ var api = _ref4.api,
128
+ editorView = _ref4.editorView,
129
+ options = _ref4.options;
167
130
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['width', 'grid'], selector),
168
131
  lineLength = _useSharedPluginState.lineLength,
169
132
  width = _useSharedPluginState.width,
@@ -174,7 +137,7 @@ var ContentComponent = function ContentComponent(_ref5) {
174
137
  if (!visible || !highlight) {
175
138
  return null;
176
139
  }
177
- return /*#__PURE__*/React.createElement(ThemedGrid, {
140
+ return /*#__PURE__*/React.createElement(GridNext, {
178
141
  shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
179
142
  editorWidth: width !== null && width !== void 0 ? width : akEditorFullPageMaxWidth
180
143
  // Ignored via go/ees005
@@ -211,9 +174,9 @@ var gridPMPlugin = new SafePlugin({
211
174
  * Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
212
175
  * from `@atlaskit/editor-core`.
213
176
  */
214
- export var gridPlugin = function gridPlugin(_ref6) {
215
- var options = _ref6.config,
216
- api = _ref6.api;
177
+ export var gridPlugin = function gridPlugin(_ref5) {
178
+ var options = _ref5.config,
179
+ api = _ref5.api;
217
180
  return {
218
181
  name: 'grid',
219
182
  getSharedState: function getSharedState(editorState) {
@@ -233,8 +196,8 @@ export var gridPlugin = function gridPlugin(_ref6) {
233
196
  }
234
197
  }];
235
198
  },
236
- contentComponent: function contentComponent(_ref7) {
237
- var editorView = _ref7.editorView;
199
+ contentComponent: function contentComponent(_ref6) {
200
+ var editorView = _ref6.editorView;
238
201
  if (!editorView || isSSR()) {
239
202
  return null;
240
203
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-grid",
3
- "version": "23.0.0",
3
+ "version": "24.0.0",
4
4
  "description": "Grid plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,17 +21,17 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/editor-plugin-width": "^24.0.0",
24
+ "@atlaskit/editor-plugin-width": "^25.0.0",
25
25
  "@atlaskit/editor-prosemirror": "^9.0.0",
26
26
  "@atlaskit/editor-shared-styles": "^4.3.0",
27
27
  "@atlaskit/platform-feature-flags-react": "^1.2.0",
28
- "@atlaskit/tmp-editor-statsig": "^219.0.0",
28
+ "@atlaskit/tmp-editor-statsig": "^220.0.0",
29
29
  "@babel/runtime": "^7.0.0",
30
30
  "@emotion/react": "^11.7.1",
31
31
  "classnames": "^2.2.5"
32
32
  },
33
33
  "peerDependencies": {
34
- "@atlaskit/editor-common": "^127.0.0",
34
+ "@atlaskit/editor-common": "^128.0.0",
35
35
  "react": "^18.2.0 || ^19.2.0",
36
36
  "react-dom": "^18.2.0 || ^19.2.0"
37
37
  },