@atlaskit/editor-plugin-grid 11.0.1 → 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.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/gridPlugin.js +41 -11
- package/dist/es2019/gridPlugin.js +32 -3
- package/dist/esm/gridPlugin.js +42 -12
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
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
|
|
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
|
|
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(
|
|
134
|
-
var api =
|
|
135
|
-
editorView =
|
|
136
|
-
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(
|
|
182
|
-
var options =
|
|
183
|
-
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(
|
|
204
|
-
var editorView =
|
|
233
|
+
contentComponent: function contentComponent(_ref7) {
|
|
234
|
+
var editorView = _ref7.editorView;
|
|
205
235
|
if (!editorView || (0, _coreUtils.isSSR)()) {
|
|
206
236
|
return null;
|
|
207
237
|
}
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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(
|
|
127
|
-
var api =
|
|
128
|
-
editorView =
|
|
129
|
-
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(
|
|
175
|
-
var options =
|
|
176
|
-
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(
|
|
197
|
-
var 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.
|
|
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/
|
|
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.
|
|
34
|
+
"@atlaskit/editor-common": "^115.6.0",
|
|
34
35
|
"react": "^18.2.0",
|
|
35
36
|
"react-dom": "^18.2.0"
|
|
36
37
|
},
|