@atlaskit/editor-plugin-layout 11.0.1 → 11.0.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/layoutPlugin.js +15 -14
- package/dist/cjs/pm-plugins/column-resize-divider.js +25 -7
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/es2019/layoutPlugin.js +17 -14
- package/dist/es2019/pm-plugins/column-resize-divider.js +25 -7
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/esm/layoutPlugin.js +15 -14
- package/dist/esm/pm-plugins/column-resize-divider.js +25 -7
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/types/pm-plugins/column-resize-divider.d.ts +2 -1
- package/dist/types/pm-plugins/main.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/column-resize-divider.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -1
- package/package.json +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 11.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`795424ce08dae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/795424ce08dae) -
|
|
8
|
+
Add analytics for layout column resizing
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 11.0.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 11.0.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -57,7 +57,7 @@ var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectI
|
|
|
57
57
|
return tr;
|
|
58
58
|
};
|
|
59
59
|
var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
60
|
-
var _api$
|
|
60
|
+
var _api$analytics2, _api$analytics5;
|
|
61
61
|
var _ref$config = _ref.config,
|
|
62
62
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
63
63
|
api = _ref.api;
|
|
@@ -105,7 +105,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
105
105
|
var plugins = [{
|
|
106
106
|
name: 'layout',
|
|
107
107
|
plugin: function plugin() {
|
|
108
|
-
|
|
108
|
+
var _api$analytics;
|
|
109
|
+
return (0, _main.default)(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
|
|
109
110
|
}
|
|
110
111
|
}];
|
|
111
112
|
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true)) && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
@@ -121,7 +122,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
121
122
|
return plugins;
|
|
122
123
|
},
|
|
123
124
|
actions: {
|
|
124
|
-
insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$
|
|
125
|
+
insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
|
|
125
126
|
},
|
|
126
127
|
pluginsOptions: {
|
|
127
128
|
floatingToolbar: function floatingToolbar(state, intl) {
|
|
@@ -143,8 +144,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
143
144
|
quickInsert: function quickInsert(_ref3) {
|
|
144
145
|
var formatMessage = _ref3.formatMessage;
|
|
145
146
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
|
|
146
|
-
var _api$
|
|
147
|
-
api === null || api === void 0 || (_api$
|
|
147
|
+
var _api$analytics3;
|
|
148
|
+
api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.attachAnalyticsEvent({
|
|
148
149
|
action: _analytics.ACTION.INSERTED,
|
|
149
150
|
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
150
151
|
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -340,9 +341,9 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
340
341
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLayout, null);
|
|
341
342
|
},
|
|
342
343
|
action: function action(insert, state) {
|
|
343
|
-
var _api$
|
|
344
|
+
var _api$analytics4;
|
|
344
345
|
var tr = insert((0, _actions.createDefaultLayoutSection)(state));
|
|
345
|
-
api === null || api === void 0 || (_api$
|
|
346
|
+
api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.attachAnalyticsEvent({
|
|
346
347
|
action: _analytics.ACTION.INSERTED,
|
|
347
348
|
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
348
349
|
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -377,18 +378,18 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
377
378
|
return _pluginKey.pluginKey.getState(editorState);
|
|
378
379
|
},
|
|
379
380
|
commands: {
|
|
380
|
-
deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$
|
|
381
|
+
deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
|
|
381
382
|
distributeLayoutColumns: function distributeLayoutColumns(options) {
|
|
382
|
-
var _api$
|
|
383
|
-
return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$
|
|
383
|
+
var _api$analytics6;
|
|
384
|
+
return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
|
|
384
385
|
},
|
|
385
386
|
insertLayoutColumn: function insertLayoutColumn(side) {
|
|
386
|
-
var _api$
|
|
387
|
-
return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$
|
|
387
|
+
var _api$analytics7;
|
|
388
|
+
return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
388
389
|
},
|
|
389
390
|
setLayoutColumnValign: function setLayoutColumnValign(valign) {
|
|
390
|
-
var _api$
|
|
391
|
-
return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$
|
|
391
|
+
var _api$analytics8;
|
|
392
|
+
return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
|
|
392
393
|
},
|
|
393
394
|
toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
|
|
394
395
|
}
|
|
@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.getColumnDividerDecorations = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _bindEventListener = require("bind-event-listener");
|
|
10
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
11
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
11
12
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
14
|
var _consts = require("./consts");
|
|
13
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
16
|
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) { (0, _defineProperty2.default)(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; }
|
|
@@ -24,7 +26,7 @@ var dragState = null;
|
|
|
24
26
|
* Dispatches a single undoable ProseMirror transaction to commit the final
|
|
25
27
|
* column widths after a drag completes.
|
|
26
28
|
*/
|
|
27
|
-
var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth) {
|
|
29
|
+
var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth, editorAnalyticsAPI) {
|
|
28
30
|
var state = view.state;
|
|
29
31
|
var sectionNode = state.doc.nodeAt(sectionPos);
|
|
30
32
|
if (!sectionNode) {
|
|
@@ -51,6 +53,21 @@ var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftC
|
|
|
51
53
|
tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, _model.Fragment.from(newColumns));
|
|
52
54
|
tr.setMeta('layoutColumnResize', true);
|
|
53
55
|
tr.setMeta('scrollIntoView', false);
|
|
56
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_layout_resize_analytics')) {
|
|
57
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
58
|
+
action: _analytics.ACTION.DRAGGED,
|
|
59
|
+
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
60
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT_COLUMN,
|
|
61
|
+
attributes: {
|
|
62
|
+
columnCount: sectionNode.childCount,
|
|
63
|
+
leftColumnIndex: leftColIndex,
|
|
64
|
+
leftColumnWidth: Number(leftWidth.toFixed(2)),
|
|
65
|
+
rightColumnWidth: Number(rightWidth.toFixed(2)),
|
|
66
|
+
inputMethod: _analytics.INPUT_METHOD.DRAG
|
|
67
|
+
},
|
|
68
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
69
|
+
})(tr);
|
|
70
|
+
}
|
|
54
71
|
view.dispatch(tr);
|
|
55
72
|
};
|
|
56
73
|
|
|
@@ -152,7 +169,8 @@ var onDragEnd = function onDragEnd(clientX) {
|
|
|
152
169
|
rafId = _dragState2.rafId,
|
|
153
170
|
startLeftWidth = _dragState2.startLeftWidth,
|
|
154
171
|
startRightWidth = _dragState2.startRightWidth,
|
|
155
|
-
unbindListeners = _dragState2.unbindListeners
|
|
172
|
+
unbindListeners = _dragState2.unbindListeners,
|
|
173
|
+
editorAnalyticsAPI = _dragState2.editorAnalyticsAPI;
|
|
156
174
|
unbindListeners();
|
|
157
175
|
|
|
158
176
|
// Cancel any pending rAF so a stale frame doesn't write styles after teardown.
|
|
@@ -175,7 +193,7 @@ var onDragEnd = function onDragEnd(clientX) {
|
|
|
175
193
|
leftColEl.style.flexBasis = '';
|
|
176
194
|
rightColEl.style.flexBasis = '';
|
|
177
195
|
if (widths && (widths.leftWidth !== startLeftWidth || widths.rightWidth !== startRightWidth)) {
|
|
178
|
-
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth);
|
|
196
|
+
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth, editorAnalyticsAPI);
|
|
179
197
|
}
|
|
180
198
|
};
|
|
181
199
|
var onDragMouseUp = function onDragMouseUp(e) {
|
|
@@ -202,8 +220,7 @@ var onDragCancel = function onDragCancel() {
|
|
|
202
220
|
* column DOM elements for zero-overhead visual feedback (no PM transactions).
|
|
203
221
|
* A single undoable PM transaction is dispatched on mouseup to commit the final widths.
|
|
204
222
|
*/
|
|
205
|
-
var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex
|
|
206
|
-
) {
|
|
223
|
+
var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI) {
|
|
207
224
|
var ownerDoc = view.dom.ownerDocument;
|
|
208
225
|
|
|
209
226
|
// Outer container: wide transparent hit area for easy grabbing, zero flex footprint
|
|
@@ -298,6 +315,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
|
|
|
298
315
|
var totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
|
|
299
316
|
var columnsWidth = sectionRect.width - dividersWidth - totalGap;
|
|
300
317
|
dragState = {
|
|
318
|
+
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
301
319
|
hasDragged: false,
|
|
302
320
|
lastClientX: e.clientX,
|
|
303
321
|
rafId: null,
|
|
@@ -329,7 +347,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
|
|
|
329
347
|
* Returns ProseMirror Decoration widgets for column dividers between layout columns.
|
|
330
348
|
* Each divider supports drag-to-resize interaction for the adjacent columns.
|
|
331
349
|
*/
|
|
332
|
-
var getColumnDividerDecorations = exports.getColumnDividerDecorations = function getColumnDividerDecorations(state, view) {
|
|
350
|
+
var getColumnDividerDecorations = exports.getColumnDividerDecorations = function getColumnDividerDecorations(state, view, editorAnalyticsAPI) {
|
|
333
351
|
var decorations = [];
|
|
334
352
|
if (!view) {
|
|
335
353
|
return decorations;
|
|
@@ -345,7 +363,7 @@ var getColumnDividerDecorations = exports.getColumnDividerDecorations = function
|
|
|
345
363
|
var colIndex = index;
|
|
346
364
|
var widgetPos = pos + offset + 1; // position at the start of this column
|
|
347
365
|
decorations.push(_view.Decoration.widget(widgetPos, function () {
|
|
348
|
-
return createColumnDividerWidget(view, sectionPos, colIndex);
|
|
366
|
+
return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
|
|
349
367
|
}, {
|
|
350
368
|
side: -1,
|
|
351
369
|
// place before the position
|
|
@@ -102,7 +102,7 @@ var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch
|
|
|
102
102
|
}
|
|
103
103
|
return false;
|
|
104
104
|
};
|
|
105
|
-
var _default = exports.default = function _default(options) {
|
|
105
|
+
var _default = exports.default = function _default(options, editorAnalyticsAPI) {
|
|
106
106
|
// Store a reference to the EditorView so widget decorations can dispatch transactions
|
|
107
107
|
var editorViewRef;
|
|
108
108
|
return new _safePlugin.SafePlugin({
|
|
@@ -152,7 +152,7 @@ var _default = exports.default = function _default(options) {
|
|
|
152
152
|
var layoutState = _pluginKey.pluginKey.getState(state);
|
|
153
153
|
var isLayoutResizingPluginAvailable = _resizing.pluginKey.get(state) !== undefined;
|
|
154
154
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
|
|
155
|
-
var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef);
|
|
155
|
+
var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef, editorAnalyticsAPI);
|
|
156
156
|
var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
157
157
|
var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations));
|
|
158
158
|
if (allDecorations.length > 0) {
|
|
@@ -52,7 +52,7 @@ export const layoutPlugin = ({
|
|
|
52
52
|
config: options = {},
|
|
53
53
|
api
|
|
54
54
|
}) => {
|
|
55
|
-
var _api$
|
|
55
|
+
var _api$analytics2, _api$analytics5;
|
|
56
56
|
const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
|
|
57
57
|
exposure: true
|
|
58
58
|
});
|
|
@@ -96,7 +96,10 @@ export const layoutPlugin = ({
|
|
|
96
96
|
pmPlugins() {
|
|
97
97
|
const plugins = [{
|
|
98
98
|
name: 'layout',
|
|
99
|
-
plugin: () =>
|
|
99
|
+
plugin: () => {
|
|
100
|
+
var _api$analytics;
|
|
101
|
+
return createLayoutPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
|
|
102
|
+
}
|
|
100
103
|
}];
|
|
101
104
|
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
|
|
102
105
|
plugins.push({
|
|
@@ -110,7 +113,7 @@ export const layoutPlugin = ({
|
|
|
110
113
|
return plugins;
|
|
111
114
|
},
|
|
112
115
|
actions: {
|
|
113
|
-
insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$
|
|
116
|
+
insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
|
|
114
117
|
},
|
|
115
118
|
pluginsOptions: {
|
|
116
119
|
floatingToolbar(state, intl) {
|
|
@@ -135,8 +138,8 @@ export const layoutPlugin = ({
|
|
|
135
138
|
formatMessage
|
|
136
139
|
}) => {
|
|
137
140
|
const withInsertLayoutAnalytics = (tr, columnCount) => {
|
|
138
|
-
var _api$
|
|
139
|
-
api === null || api === void 0 ? void 0 : (_api$
|
|
141
|
+
var _api$analytics3, _api$analytics3$actio;
|
|
142
|
+
api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.attachAnalyticsEvent({
|
|
140
143
|
action: ACTION.INSERTED,
|
|
141
144
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
142
145
|
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -311,9 +314,9 @@ export const layoutPlugin = ({
|
|
|
311
314
|
priority: 1100,
|
|
312
315
|
icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
|
|
313
316
|
action(insert, state) {
|
|
314
|
-
var _api$
|
|
317
|
+
var _api$analytics4, _api$analytics4$actio;
|
|
315
318
|
const tr = insert(createDefaultLayoutSection(state));
|
|
316
|
-
api === null || api === void 0 ? void 0 : (_api$
|
|
319
|
+
api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : (_api$analytics4$actio = _api$analytics4.actions) === null || _api$analytics4$actio === void 0 ? void 0 : _api$analytics4$actio.attachAnalyticsEvent({
|
|
317
320
|
action: ACTION.INSERTED,
|
|
318
321
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
319
322
|
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -349,18 +352,18 @@ export const layoutPlugin = ({
|
|
|
349
352
|
return pluginKey.getState(editorState);
|
|
350
353
|
},
|
|
351
354
|
commands: {
|
|
352
|
-
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$
|
|
355
|
+
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
|
|
353
356
|
distributeLayoutColumns: options => {
|
|
354
|
-
var _api$
|
|
355
|
-
return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$
|
|
357
|
+
var _api$analytics6;
|
|
358
|
+
return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
|
|
356
359
|
},
|
|
357
360
|
insertLayoutColumn: side => {
|
|
358
|
-
var _api$
|
|
359
|
-
return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$
|
|
361
|
+
var _api$analytics7;
|
|
362
|
+
return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
360
363
|
},
|
|
361
364
|
setLayoutColumnValign: valign => {
|
|
362
|
-
var _api$
|
|
363
|
-
return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$
|
|
365
|
+
var _api$analytics8;
|
|
366
|
+
return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
|
|
364
367
|
},
|
|
365
368
|
toggleLayoutColumnMenu
|
|
366
369
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { bind } from 'bind-event-listener';
|
|
2
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
3
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
6
|
import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
|
|
5
7
|
|
|
6
8
|
// Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
|
|
@@ -15,7 +17,7 @@ let dragState = null;
|
|
|
15
17
|
* Dispatches a single undoable ProseMirror transaction to commit the final
|
|
16
18
|
* column widths after a drag completes.
|
|
17
19
|
*/
|
|
18
|
-
const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWidth) => {
|
|
20
|
+
const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWidth, editorAnalyticsAPI) => {
|
|
19
21
|
const {
|
|
20
22
|
state
|
|
21
23
|
} = view;
|
|
@@ -47,6 +49,21 @@ const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWi
|
|
|
47
49
|
tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
|
|
48
50
|
tr.setMeta('layoutColumnResize', true);
|
|
49
51
|
tr.setMeta('scrollIntoView', false);
|
|
52
|
+
if (fg('platform_editor_layout_resize_analytics')) {
|
|
53
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
54
|
+
action: ACTION.DRAGGED,
|
|
55
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
56
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
|
|
57
|
+
attributes: {
|
|
58
|
+
columnCount: sectionNode.childCount,
|
|
59
|
+
leftColumnIndex: leftColIndex,
|
|
60
|
+
leftColumnWidth: Number(leftWidth.toFixed(2)),
|
|
61
|
+
rightColumnWidth: Number(rightWidth.toFixed(2)),
|
|
62
|
+
inputMethod: INPUT_METHOD.DRAG
|
|
63
|
+
},
|
|
64
|
+
eventType: EVENT_TYPE.TRACK
|
|
65
|
+
})(tr);
|
|
66
|
+
}
|
|
50
67
|
view.dispatch(tr);
|
|
51
68
|
};
|
|
52
69
|
|
|
@@ -149,7 +166,8 @@ const onDragEnd = clientX => {
|
|
|
149
166
|
rafId,
|
|
150
167
|
startLeftWidth,
|
|
151
168
|
startRightWidth,
|
|
152
|
-
unbindListeners
|
|
169
|
+
unbindListeners,
|
|
170
|
+
editorAnalyticsAPI
|
|
153
171
|
} = dragState;
|
|
154
172
|
unbindListeners();
|
|
155
173
|
|
|
@@ -173,7 +191,7 @@ const onDragEnd = clientX => {
|
|
|
173
191
|
leftColEl.style.flexBasis = '';
|
|
174
192
|
rightColEl.style.flexBasis = '';
|
|
175
193
|
if (widths && (widths.leftWidth !== startLeftWidth || widths.rightWidth !== startRightWidth)) {
|
|
176
|
-
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth);
|
|
194
|
+
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth, editorAnalyticsAPI);
|
|
177
195
|
}
|
|
178
196
|
};
|
|
179
197
|
const onDragMouseUp = e => {
|
|
@@ -200,8 +218,7 @@ const onDragCancel = () => {
|
|
|
200
218
|
* column DOM elements for zero-overhead visual feedback (no PM transactions).
|
|
201
219
|
* A single undoable PM transaction is dispatched on mouseup to commit the final widths.
|
|
202
220
|
*/
|
|
203
|
-
const createColumnDividerWidget = (view, sectionPos, columnIndex
|
|
204
|
-
) => {
|
|
221
|
+
const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalyticsAPI) => {
|
|
205
222
|
const ownerDoc = view.dom.ownerDocument;
|
|
206
223
|
|
|
207
224
|
// Outer container: wide transparent hit area for easy grabbing, zero flex footprint
|
|
@@ -296,6 +313,7 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the
|
|
|
296
313
|
const totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
|
|
297
314
|
const columnsWidth = sectionRect.width - dividersWidth - totalGap;
|
|
298
315
|
dragState = {
|
|
316
|
+
editorAnalyticsAPI,
|
|
299
317
|
hasDragged: false,
|
|
300
318
|
lastClientX: e.clientX,
|
|
301
319
|
rafId: null,
|
|
@@ -327,7 +345,7 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the
|
|
|
327
345
|
* Returns ProseMirror Decoration widgets for column dividers between layout columns.
|
|
328
346
|
* Each divider supports drag-to-resize interaction for the adjacent columns.
|
|
329
347
|
*/
|
|
330
|
-
export const getColumnDividerDecorations = (state, view) => {
|
|
348
|
+
export const getColumnDividerDecorations = (state, view, editorAnalyticsAPI) => {
|
|
331
349
|
const decorations = [];
|
|
332
350
|
if (!view) {
|
|
333
351
|
return decorations;
|
|
@@ -344,7 +362,7 @@ export const getColumnDividerDecorations = (state, view) => {
|
|
|
344
362
|
const sectionPos = pos;
|
|
345
363
|
const colIndex = index;
|
|
346
364
|
const widgetPos = pos + offset + 1; // position at the start of this column
|
|
347
|
-
decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex), {
|
|
365
|
+
decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI), {
|
|
348
366
|
side: -1,
|
|
349
367
|
// place before the position
|
|
350
368
|
key: `layout-col-divider-${pos}-${index}`,
|
|
@@ -96,7 +96,7 @@ const handleDeleteLayoutColumn = (state, dispatch) => {
|
|
|
96
96
|
}
|
|
97
97
|
return false;
|
|
98
98
|
};
|
|
99
|
-
export default (options => {
|
|
99
|
+
export default ((options, editorAnalyticsAPI) => {
|
|
100
100
|
// Store a reference to the EditorView so widget decorations can dispatch transactions
|
|
101
101
|
let editorViewRef;
|
|
102
102
|
return new SafePlugin({
|
|
@@ -147,7 +147,7 @@ export default (options => {
|
|
|
147
147
|
const layoutState = pluginKey.getState(state);
|
|
148
148
|
const isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
|
|
149
149
|
if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
|
|
150
|
-
const dividerDecorations = getColumnDividerDecorations(state, editorViewRef);
|
|
150
|
+
const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
|
|
151
151
|
const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
152
152
|
const allDecorations = [...selectedDecorations, ...dividerDecorations];
|
|
153
153
|
if (allDecorations.length > 0) {
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -50,7 +50,7 @@ export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
|
|
|
50
50
|
return tr;
|
|
51
51
|
};
|
|
52
52
|
export var layoutPlugin = function layoutPlugin(_ref) {
|
|
53
|
-
var _api$
|
|
53
|
+
var _api$analytics2, _api$analytics5;
|
|
54
54
|
var _ref$config = _ref.config,
|
|
55
55
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
56
56
|
api = _ref.api;
|
|
@@ -98,7 +98,8 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
98
98
|
var plugins = [{
|
|
99
99
|
name: 'layout',
|
|
100
100
|
plugin: function plugin() {
|
|
101
|
-
|
|
101
|
+
var _api$analytics;
|
|
102
|
+
return createLayoutPlugin(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
|
|
102
103
|
}
|
|
103
104
|
}];
|
|
104
105
|
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && editorExperiment('platform_editor_layout_column_resize_handle', true)) && api && editorExperiment('advanced_layouts', true)) {
|
|
@@ -114,7 +115,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
114
115
|
return plugins;
|
|
115
116
|
},
|
|
116
117
|
actions: {
|
|
117
|
-
insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 || (_api$
|
|
118
|
+
insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
|
|
118
119
|
},
|
|
119
120
|
pluginsOptions: {
|
|
120
121
|
floatingToolbar: function floatingToolbar(state, intl) {
|
|
@@ -136,8 +137,8 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
136
137
|
quickInsert: function quickInsert(_ref3) {
|
|
137
138
|
var formatMessage = _ref3.formatMessage;
|
|
138
139
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
|
|
139
|
-
var _api$
|
|
140
|
-
api === null || api === void 0 || (_api$
|
|
140
|
+
var _api$analytics3;
|
|
141
|
+
api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.attachAnalyticsEvent({
|
|
141
142
|
action: ACTION.INSERTED,
|
|
142
143
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
143
144
|
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -333,9 +334,9 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
333
334
|
return /*#__PURE__*/React.createElement(IconLayout, null);
|
|
334
335
|
},
|
|
335
336
|
action: function action(insert, state) {
|
|
336
|
-
var _api$
|
|
337
|
+
var _api$analytics4;
|
|
337
338
|
var tr = insert(createDefaultLayoutSection(state));
|
|
338
|
-
api === null || api === void 0 || (_api$
|
|
339
|
+
api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.attachAnalyticsEvent({
|
|
339
340
|
action: ACTION.INSERTED,
|
|
340
341
|
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
341
342
|
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
@@ -370,18 +371,18 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
370
371
|
return pluginKey.getState(editorState);
|
|
371
372
|
},
|
|
372
373
|
commands: {
|
|
373
|
-
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 || (_api$
|
|
374
|
+
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api),
|
|
374
375
|
distributeLayoutColumns: function distributeLayoutColumns(options) {
|
|
375
|
-
var _api$
|
|
376
|
-
return _distributeLayoutColumns(api === null || api === void 0 || (_api$
|
|
376
|
+
var _api$analytics6;
|
|
377
|
+
return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
|
|
377
378
|
},
|
|
378
379
|
insertLayoutColumn: function insertLayoutColumn(side) {
|
|
379
|
-
var _api$
|
|
380
|
-
return _insertLayoutColumn(side, api === null || api === void 0 || (_api$
|
|
380
|
+
var _api$analytics7;
|
|
381
|
+
return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
381
382
|
},
|
|
382
383
|
setLayoutColumnValign: function setLayoutColumnValign(valign) {
|
|
383
|
-
var _api$
|
|
384
|
-
return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$
|
|
384
|
+
var _api$analytics8;
|
|
385
|
+
return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
|
|
385
386
|
},
|
|
386
387
|
toggleLayoutColumnMenu: toggleLayoutColumnMenu
|
|
387
388
|
}
|
|
@@ -2,8 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
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; }
|
|
4
4
|
import { bind } from 'bind-event-listener';
|
|
5
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
6
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
6
7
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
9
|
import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
|
|
8
10
|
|
|
9
11
|
// Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
|
|
@@ -18,7 +20,7 @@ var dragState = null;
|
|
|
18
20
|
* Dispatches a single undoable ProseMirror transaction to commit the final
|
|
19
21
|
* column widths after a drag completes.
|
|
20
22
|
*/
|
|
21
|
-
var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth) {
|
|
23
|
+
var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftColIndex, leftWidth, rightWidth, editorAnalyticsAPI) {
|
|
22
24
|
var state = view.state;
|
|
23
25
|
var sectionNode = state.doc.nodeAt(sectionPos);
|
|
24
26
|
if (!sectionNode) {
|
|
@@ -45,6 +47,21 @@ var dispatchColumnWidths = function dispatchColumnWidths(view, sectionPos, leftC
|
|
|
45
47
|
tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
|
|
46
48
|
tr.setMeta('layoutColumnResize', true);
|
|
47
49
|
tr.setMeta('scrollIntoView', false);
|
|
50
|
+
if (fg('platform_editor_layout_resize_analytics')) {
|
|
51
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
52
|
+
action: ACTION.DRAGGED,
|
|
53
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
54
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT_COLUMN,
|
|
55
|
+
attributes: {
|
|
56
|
+
columnCount: sectionNode.childCount,
|
|
57
|
+
leftColumnIndex: leftColIndex,
|
|
58
|
+
leftColumnWidth: Number(leftWidth.toFixed(2)),
|
|
59
|
+
rightColumnWidth: Number(rightWidth.toFixed(2)),
|
|
60
|
+
inputMethod: INPUT_METHOD.DRAG
|
|
61
|
+
},
|
|
62
|
+
eventType: EVENT_TYPE.TRACK
|
|
63
|
+
})(tr);
|
|
64
|
+
}
|
|
48
65
|
view.dispatch(tr);
|
|
49
66
|
};
|
|
50
67
|
|
|
@@ -146,7 +163,8 @@ var onDragEnd = function onDragEnd(clientX) {
|
|
|
146
163
|
rafId = _dragState2.rafId,
|
|
147
164
|
startLeftWidth = _dragState2.startLeftWidth,
|
|
148
165
|
startRightWidth = _dragState2.startRightWidth,
|
|
149
|
-
unbindListeners = _dragState2.unbindListeners
|
|
166
|
+
unbindListeners = _dragState2.unbindListeners,
|
|
167
|
+
editorAnalyticsAPI = _dragState2.editorAnalyticsAPI;
|
|
150
168
|
unbindListeners();
|
|
151
169
|
|
|
152
170
|
// Cancel any pending rAF so a stale frame doesn't write styles after teardown.
|
|
@@ -169,7 +187,7 @@ var onDragEnd = function onDragEnd(clientX) {
|
|
|
169
187
|
leftColEl.style.flexBasis = '';
|
|
170
188
|
rightColEl.style.flexBasis = '';
|
|
171
189
|
if (widths && (widths.leftWidth !== startLeftWidth || widths.rightWidth !== startRightWidth)) {
|
|
172
|
-
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth);
|
|
190
|
+
dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth, editorAnalyticsAPI);
|
|
173
191
|
}
|
|
174
192
|
};
|
|
175
193
|
var onDragMouseUp = function onDragMouseUp(e) {
|
|
@@ -196,8 +214,7 @@ var onDragCancel = function onDragCancel() {
|
|
|
196
214
|
* column DOM elements for zero-overhead visual feedback (no PM transactions).
|
|
197
215
|
* A single undoable PM transaction is dispatched on mouseup to commit the final widths.
|
|
198
216
|
*/
|
|
199
|
-
var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex
|
|
200
|
-
) {
|
|
217
|
+
var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI) {
|
|
201
218
|
var ownerDoc = view.dom.ownerDocument;
|
|
202
219
|
|
|
203
220
|
// Outer container: wide transparent hit area for easy grabbing, zero flex footprint
|
|
@@ -292,6 +309,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
|
|
|
292
309
|
var totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
|
|
293
310
|
var columnsWidth = sectionRect.width - dividersWidth - totalGap;
|
|
294
311
|
dragState = {
|
|
312
|
+
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
295
313
|
hasDragged: false,
|
|
296
314
|
lastClientX: e.clientX,
|
|
297
315
|
rafId: null,
|
|
@@ -323,7 +341,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
|
|
|
323
341
|
* Returns ProseMirror Decoration widgets for column dividers between layout columns.
|
|
324
342
|
* Each divider supports drag-to-resize interaction for the adjacent columns.
|
|
325
343
|
*/
|
|
326
|
-
export var getColumnDividerDecorations = function getColumnDividerDecorations(state, view) {
|
|
344
|
+
export var getColumnDividerDecorations = function getColumnDividerDecorations(state, view, editorAnalyticsAPI) {
|
|
327
345
|
var decorations = [];
|
|
328
346
|
if (!view) {
|
|
329
347
|
return decorations;
|
|
@@ -339,7 +357,7 @@ export var getColumnDividerDecorations = function getColumnDividerDecorations(st
|
|
|
339
357
|
var colIndex = index;
|
|
340
358
|
var widgetPos = pos + offset + 1; // position at the start of this column
|
|
341
359
|
decorations.push(Decoration.widget(widgetPos, function () {
|
|
342
|
-
return createColumnDividerWidget(view, sectionPos, colIndex);
|
|
360
|
+
return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
|
|
343
361
|
}, {
|
|
344
362
|
side: -1,
|
|
345
363
|
// place before the position
|
|
@@ -95,7 +95,7 @@ var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch
|
|
|
95
95
|
}
|
|
96
96
|
return false;
|
|
97
97
|
};
|
|
98
|
-
export default (function (options) {
|
|
98
|
+
export default (function (options, editorAnalyticsAPI) {
|
|
99
99
|
// Store a reference to the EditorView so widget decorations can dispatch transactions
|
|
100
100
|
var editorViewRef;
|
|
101
101
|
return new SafePlugin({
|
|
@@ -145,7 +145,7 @@ export default (function (options) {
|
|
|
145
145
|
var layoutState = pluginKey.getState(state);
|
|
146
146
|
var isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
|
|
147
147
|
if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isLayoutResizingPluginAvailable) {
|
|
148
|
-
var dividerDecorations = getColumnDividerDecorations(state, editorViewRef);
|
|
148
|
+
var dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
|
|
149
149
|
var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
150
150
|
var allDecorations = [].concat(_toConsumableArray(selectedDecorations), _toConsumableArray(dividerDecorations));
|
|
151
151
|
if (allDecorations.length > 0) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
1
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -5,4 +6,4 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
6
|
* Returns ProseMirror Decoration widgets for column dividers between layout columns.
|
|
6
7
|
* Each divider supports drag-to-resize interaction for the adjacent columns.
|
|
7
8
|
*/
|
|
8
|
-
export declare const getColumnDividerDecorations: (state: EditorState, view?: EditorView) => Decoration[];
|
|
9
|
+
export declare const getColumnDividerDecorations: (state: EditorState, view?: EditorView, editorAnalyticsAPI?: EditorAnalyticsAPI) => Decoration[];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
1
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
3
|
import type { LayoutPluginOptions } from '../types';
|
|
3
4
|
import type { LayoutState } from './types';
|
|
4
5
|
export declare const DEFAULT_LAYOUT = "two_equal";
|
|
5
|
-
declare const _default: (options: LayoutPluginOptions) => SafePlugin<LayoutState>;
|
|
6
|
+
declare const _default: (options: LayoutPluginOptions, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<LayoutState>;
|
|
6
7
|
export default _default;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
1
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -5,4 +6,4 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
6
|
* Returns ProseMirror Decoration widgets for column dividers between layout columns.
|
|
6
7
|
* Each divider supports drag-to-resize interaction for the adjacent columns.
|
|
7
8
|
*/
|
|
8
|
-
export declare const getColumnDividerDecorations: (state: EditorState, view?: EditorView) => Decoration[];
|
|
9
|
+
export declare const getColumnDividerDecorations: (state: EditorState, view?: EditorView, editorAnalyticsAPI?: EditorAnalyticsAPI) => Decoration[];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
1
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
3
|
import type { LayoutPluginOptions } from '../types';
|
|
3
4
|
import type { LayoutState } from './types';
|
|
4
5
|
export declare const DEFAULT_LAYOUT = "two_equal";
|
|
5
|
-
declare const _default: (options: LayoutPluginOptions) => SafePlugin<LayoutState>;
|
|
6
|
+
declare const _default: (options: LayoutPluginOptions, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<LayoutState>;
|
|
6
7
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.3",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@atlaskit/css": "^0.19.0",
|
|
34
34
|
"@atlaskit/editor-plugin-analytics": "^11.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-block-controls": "^12.0.0",
|
|
36
|
-
"@atlaskit/editor-plugin-block-menu": "^10.
|
|
36
|
+
"@atlaskit/editor-plugin-block-menu": "^10.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-decorations": "^11.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-disabled": "^11.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-guideline": "^11.0.0",
|
|
@@ -45,19 +45,19 @@
|
|
|
45
45
|
"@atlaskit/editor-plugin-width": "^12.0.0",
|
|
46
46
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
47
47
|
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
48
|
-
"@atlaskit/editor-toolbar": "^1.
|
|
48
|
+
"@atlaskit/editor-toolbar": "^1.10.0",
|
|
49
49
|
"@atlaskit/editor-ui-control-model": "^1.2.0",
|
|
50
50
|
"@atlaskit/icon": "^35.4.0",
|
|
51
51
|
"@atlaskit/icon-lab": "^6.13.0",
|
|
52
52
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
53
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
53
|
+
"@atlaskit/tmp-editor-statsig": "^89.0.0",
|
|
54
54
|
"@atlaskit/tokens": "^13.1.0",
|
|
55
55
|
"@babel/runtime": "^7.0.0",
|
|
56
56
|
"@emotion/react": "^11.7.1",
|
|
57
57
|
"bind-event-listener": "^3.0.0"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"@atlaskit/editor-common": "^115.
|
|
60
|
+
"@atlaskit/editor-common": "^115.3.0",
|
|
61
61
|
"react": "^18.2.0",
|
|
62
62
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
63
63
|
},
|
|
@@ -114,6 +114,9 @@
|
|
|
114
114
|
},
|
|
115
115
|
"platform_editor_block_menu_v2_patch_3": {
|
|
116
116
|
"type": "boolean"
|
|
117
|
+
},
|
|
118
|
+
"platform_editor_layout_resize_analytics": {
|
|
119
|
+
"type": "boolean"
|
|
117
120
|
}
|
|
118
121
|
},
|
|
119
122
|
"devDependencies": {
|