@atlaskit/editor-plugin-layout 11.0.0 → 11.0.1
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 +11 -0
- package/dist/cjs/layoutPlugin.js +13 -13
- package/dist/cjs/pm-plugins/actions.js +84 -31
- package/dist/cjs/pm-plugins/main.js +6 -0
- package/dist/es2019/layoutPlugin.js +13 -13
- package/dist/es2019/pm-plugins/actions.js +58 -4
- package/dist/es2019/pm-plugins/main.js +7 -1
- package/dist/esm/layoutPlugin.js +14 -14
- package/dist/esm/pm-plugins/actions.js +83 -30
- package/dist/esm/pm-plugins/main.js +7 -1
- package/dist/types/layoutPluginType.d.ts +13 -7
- package/dist/types/pm-plugins/actions.d.ts +15 -7
- package/dist/types-ts4.5/layoutPluginType.d.ts +13 -7
- package/dist/types-ts4.5/pm-plugins/actions.d.ts +15 -7
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 11.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8bf2ab100a93d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8bf2ab100a93d) -
|
|
8
|
+
Add col to layout keywords
|
|
9
|
+
- [`91c01182107f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/91c01182107f2) -
|
|
10
|
+
Preserve layout column selection after menu actions and delay editor-ai-dev Bitbucket credential
|
|
11
|
+
checks until after CLI command validation.
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 11.0.0
|
|
4
15
|
|
|
5
16
|
### 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$analytics, _api$
|
|
60
|
+
var _api$analytics, _api$analytics4;
|
|
61
61
|
var _ref$config = _ref.config,
|
|
62
62
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
63
63
|
api = _ref.api;
|
|
@@ -161,7 +161,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
161
161
|
id: 'onecolumnlayout',
|
|
162
162
|
title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
|
|
163
163
|
description: formatMessage(_messages.toolbarInsertBlockMessages.singleColumnsDescriptionAdvancedLayout),
|
|
164
|
-
keywords: ['layout', 'column', 'section', 'single column'],
|
|
164
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'single column'] : ['layout', 'column', 'section', 'single column'],
|
|
165
165
|
priority: 1100,
|
|
166
166
|
icon: function icon() {
|
|
167
167
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconOneColumnLayout, null);
|
|
@@ -191,7 +191,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
191
191
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
192
192
|
numberOfColumns: descriptionColumnCount
|
|
193
193
|
}),
|
|
194
|
-
keywords: ['layout', 'column', 'section', keyword],
|
|
194
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', keyword] : ['layout', 'column', 'section', keyword],
|
|
195
195
|
priority: 1100,
|
|
196
196
|
icon: Icon,
|
|
197
197
|
action: function action(insert, state) {
|
|
@@ -250,7 +250,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
250
250
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
251
251
|
numberOfColumns: 'two'
|
|
252
252
|
}),
|
|
253
|
-
keywords: ['layout', 'column', 'section', 'two column'],
|
|
253
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'two column'] : ['layout', 'column', 'section', 'two column'],
|
|
254
254
|
priority: 1100,
|
|
255
255
|
icon: function icon() {
|
|
256
256
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
|
|
@@ -271,7 +271,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
271
271
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
272
272
|
numberOfColumns: 'three'
|
|
273
273
|
}),
|
|
274
|
-
keywords: ['layout', 'column', 'section', 'three column'],
|
|
274
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'three column'] : ['layout', 'column', 'section', 'three column'],
|
|
275
275
|
priority: 1100,
|
|
276
276
|
icon: function icon() {
|
|
277
277
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
|
|
@@ -292,7 +292,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
292
292
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
293
293
|
numberOfColumns: 'four'
|
|
294
294
|
}),
|
|
295
|
-
keywords: ['layout', 'column', 'section', 'four column'],
|
|
295
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'four column'] : ['layout', 'column', 'section', 'four column'],
|
|
296
296
|
priority: 1100,
|
|
297
297
|
icon: function icon() {
|
|
298
298
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
|
|
@@ -313,7 +313,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
313
313
|
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
|
|
314
314
|
numberOfColumns: 'five'
|
|
315
315
|
}),
|
|
316
|
-
keywords: ['layout', 'column', 'section', 'five column'],
|
|
316
|
+
keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'five column'] : ['layout', 'column', 'section', 'five column'],
|
|
317
317
|
priority: 1100,
|
|
318
318
|
icon: function icon() {
|
|
319
319
|
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
|
|
@@ -377,18 +377,18 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
377
377
|
return _pluginKey.pluginKey.getState(editorState);
|
|
378
378
|
},
|
|
379
379
|
commands: {
|
|
380
|
-
deleteLayoutColumn:
|
|
381
|
-
|
|
382
|
-
|
|
380
|
+
deleteLayoutColumn: (0, _actions.deleteLayoutColumn)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
|
|
381
|
+
distributeLayoutColumns: function distributeLayoutColumns(options) {
|
|
382
|
+
var _api$analytics5;
|
|
383
|
+
return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api)(options);
|
|
383
384
|
},
|
|
384
|
-
distributeLayoutColumns: (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
|
|
385
385
|
insertLayoutColumn: function insertLayoutColumn(side) {
|
|
386
386
|
var _api$analytics6;
|
|
387
|
-
return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
|
|
387
|
+
return (0, _actions.insertLayoutColumn)(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api);
|
|
388
388
|
},
|
|
389
389
|
setLayoutColumnValign: function setLayoutColumnValign(valign) {
|
|
390
390
|
var _api$analytics7;
|
|
391
|
-
return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
|
|
391
|
+
return (0, _actions.setLayoutColumnValign)(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
392
392
|
},
|
|
393
393
|
toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
|
|
394
394
|
}
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
|
|
7
|
+
exports.fixColumnStructure = exports.fixColumnSizes = exports.distributeLayoutColumns = exports.deleteLayoutColumn = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = exports.LAYOUT_COLUMN_INSERT_META = void 0;
|
|
8
8
|
exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
|
|
9
9
|
exports.getEffectiveMaxLayoutColumns = getEffectiveMaxLayoutColumns;
|
|
10
10
|
exports.toggleLayoutColumnMenu = exports.setPresetLayout = exports.setLayoutColumnValign = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.insertLayoutColumn = exports.getSelectedLayout = exports.getPresetLayout = void 0;
|
|
@@ -14,6 +14,7 @@ var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
|
|
|
14
14
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
15
15
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
16
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
17
|
+
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
17
18
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
18
19
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
@@ -552,6 +553,27 @@ var formatLayoutName = function formatLayoutName(layout) {
|
|
|
552
553
|
return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
|
|
553
554
|
}
|
|
554
555
|
};
|
|
556
|
+
var LAYOUT_COLUMN_INSERT_META = exports.LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
|
|
557
|
+
var mapLayoutColumnPreservedSelection = function mapLayoutColumnPreservedSelection(tr, api) {
|
|
558
|
+
var insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
|
|
559
|
+
if (insertMeta) {
|
|
560
|
+
var _api$blockControls;
|
|
561
|
+
var mapping = insertMeta.side === 'left' ? new _transform.Mapping([new _transform.StepMap([insertMeta.insertedColumnPos, 0, insertMeta.insertedColumnNodeSize])]) : new _transform.Mapping();
|
|
562
|
+
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.mapPreservedSelection(mapping)({
|
|
563
|
+
tr: tr
|
|
564
|
+
});
|
|
565
|
+
return;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
// Width and alignment updates should keep original layout column selection unchanged.
|
|
569
|
+
if (tr.getMeta('scrollIntoView') === false && tr.docChanged) {
|
|
570
|
+
var _api$blockControls2;
|
|
571
|
+
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.mapPreservedSelection(new _transform.Mapping())({
|
|
572
|
+
tr: tr
|
|
573
|
+
});
|
|
574
|
+
}
|
|
575
|
+
};
|
|
576
|
+
|
|
555
577
|
/**
|
|
556
578
|
* Returns the active maximum layout column count for the current advanced layouts experiment state.
|
|
557
579
|
*/
|
|
@@ -604,6 +626,18 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
|
|
|
604
626
|
updatedColumns.push(newColumn);
|
|
605
627
|
}
|
|
606
628
|
var updatedLayoutSectionNode = layoutSectionNode.copy(_model.Fragment.fromArray(updatedColumns));
|
|
629
|
+
var insertedColumnOffset = 0;
|
|
630
|
+
layoutSectionNode.forEach(function (column, _offset, index) {
|
|
631
|
+
if (index < insertIndex) {
|
|
632
|
+
insertedColumnOffset += column.nodeSize;
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
var insertedColumnPos = layoutSectionPos + 1 + insertedColumnOffset;
|
|
636
|
+
tr.setMeta(LAYOUT_COLUMN_INSERT_META, {
|
|
637
|
+
insertedColumnNodeSize: newColumn.nodeSize,
|
|
638
|
+
insertedColumnPos: insertedColumnPos,
|
|
639
|
+
side: side
|
|
640
|
+
});
|
|
607
641
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributedWidths));
|
|
608
642
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
609
643
|
action: _analytics.ACTION.INSERTED,
|
|
@@ -623,12 +657,21 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
|
|
|
623
657
|
return tr;
|
|
624
658
|
};
|
|
625
659
|
};
|
|
626
|
-
var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
|
|
627
|
-
return insertLayoutColumnAt(side, editorAnalyticsAPI);
|
|
628
|
-
};
|
|
629
|
-
var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI) {
|
|
660
|
+
var insertLayoutColumn = exports.insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
|
|
630
661
|
return function (_ref5) {
|
|
631
662
|
var tr = _ref5.tr;
|
|
663
|
+
var result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
|
|
664
|
+
tr: tr
|
|
665
|
+
});
|
|
666
|
+
if (result) {
|
|
667
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
668
|
+
}
|
|
669
|
+
return result;
|
|
670
|
+
};
|
|
671
|
+
};
|
|
672
|
+
var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI, api) {
|
|
673
|
+
return function (_ref6) {
|
|
674
|
+
var tr = _ref6.tr;
|
|
632
675
|
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
633
676
|
return null;
|
|
634
677
|
}
|
|
@@ -639,17 +682,17 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
|
|
|
639
682
|
var startIndex = selectedLayoutColumnsResult.startIndex,
|
|
640
683
|
endIndex = selectedLayoutColumnsResult.endIndex,
|
|
641
684
|
selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
|
|
642
|
-
var columnsToUpdate = selectedLayoutColumns.filter(function (
|
|
643
|
-
var node =
|
|
685
|
+
var columnsToUpdate = selectedLayoutColumns.filter(function (_ref7) {
|
|
686
|
+
var node = _ref7.node;
|
|
644
687
|
return node.attrs.valign !== valign;
|
|
645
688
|
});
|
|
646
689
|
if (columnsToUpdate.length === 0) {
|
|
647
690
|
return null;
|
|
648
691
|
}
|
|
649
692
|
var updatedColumnCount = columnsToUpdate.length;
|
|
650
|
-
columnsToUpdate.forEach(function (
|
|
651
|
-
var node =
|
|
652
|
-
pos =
|
|
693
|
+
columnsToUpdate.forEach(function (_ref8) {
|
|
694
|
+
var node = _ref8.node,
|
|
695
|
+
pos = _ref8.pos;
|
|
653
696
|
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
654
697
|
valign: valign
|
|
655
698
|
}));
|
|
@@ -669,18 +712,19 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
|
|
|
669
712
|
eventType: _analytics.EVENT_TYPE.TRACK
|
|
670
713
|
})(tr);
|
|
671
714
|
tr.setMeta('scrollIntoView', false);
|
|
715
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
672
716
|
return tr;
|
|
673
717
|
};
|
|
674
718
|
};
|
|
675
|
-
var distributeLayoutColumns = exports.distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI) {
|
|
719
|
+
var distributeLayoutColumns = exports.distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI, api) {
|
|
676
720
|
return function () {
|
|
677
|
-
var
|
|
678
|
-
|
|
679
|
-
inputMethod =
|
|
680
|
-
|
|
681
|
-
target =
|
|
682
|
-
return function (
|
|
683
|
-
var tr =
|
|
721
|
+
var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
722
|
+
_ref9$inputMethod = _ref9.inputMethod,
|
|
723
|
+
inputMethod = _ref9$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref9$inputMethod,
|
|
724
|
+
_ref9$target = _ref9.target,
|
|
725
|
+
target = _ref9$target === void 0 ? 'selectedColumns' : _ref9$target;
|
|
726
|
+
return function (_ref0) {
|
|
727
|
+
var tr = _ref0.tr;
|
|
684
728
|
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
685
729
|
return null;
|
|
686
730
|
}
|
|
@@ -695,8 +739,8 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
|
|
|
695
739
|
var existingWidths = (0, _utils.mapChildren)(layoutSectionNode, function (column) {
|
|
696
740
|
return column.attrs.width;
|
|
697
741
|
});
|
|
698
|
-
var selectedWidths = selectedLayoutColumns.map(function (
|
|
699
|
-
var node =
|
|
742
|
+
var selectedWidths = selectedLayoutColumns.map(function (_ref1) {
|
|
743
|
+
var node = _ref1.node;
|
|
700
744
|
return node.attrs.width;
|
|
701
745
|
});
|
|
702
746
|
var distribution = (0, _layoutColumnDistribution.calculateDistribution)(selectedWidths);
|
|
@@ -728,9 +772,9 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
|
|
|
728
772
|
});
|
|
729
773
|
|
|
730
774
|
// Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
|
|
731
|
-
selectedLayoutColumns.forEach(function (
|
|
732
|
-
var node =
|
|
733
|
-
pos =
|
|
775
|
+
selectedLayoutColumns.forEach(function (_ref10, i) {
|
|
776
|
+
var node = _ref10.node,
|
|
777
|
+
pos = _ref10.pos;
|
|
734
778
|
var colIdx = startIndex + i;
|
|
735
779
|
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
736
780
|
width: newWidths[colIdx]
|
|
@@ -750,15 +794,16 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
|
|
|
750
794
|
eventType: _analytics.EVENT_TYPE.TRACK
|
|
751
795
|
})(tr);
|
|
752
796
|
tr.setMeta('scrollIntoView', false);
|
|
797
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
753
798
|
return tr;
|
|
754
799
|
};
|
|
755
800
|
};
|
|
756
801
|
};
|
|
757
|
-
var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(
|
|
758
|
-
var anchorPos =
|
|
759
|
-
isOpen =
|
|
760
|
-
return function (
|
|
761
|
-
var tr =
|
|
802
|
+
var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
|
|
803
|
+
var anchorPos = _ref11.anchorPos,
|
|
804
|
+
isOpen = _ref11.isOpen;
|
|
805
|
+
return function (_ref12) {
|
|
806
|
+
var tr = _ref12.tr;
|
|
762
807
|
tr.setMeta('toggleLayoutColumnMenu', {
|
|
763
808
|
anchorPos: anchorPos,
|
|
764
809
|
isOpen: isOpen
|
|
@@ -767,9 +812,10 @@ var toggleLayoutColumnMenu = exports.toggleLayoutColumnMenu = function toggleLay
|
|
|
767
812
|
return tr;
|
|
768
813
|
};
|
|
769
814
|
};
|
|
770
|
-
var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
|
|
771
|
-
return function (
|
|
772
|
-
var
|
|
815
|
+
var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
|
|
816
|
+
return function (_ref13) {
|
|
817
|
+
var _api$blockControls4;
|
|
818
|
+
var tr = _ref13.tr;
|
|
773
819
|
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
774
820
|
return null;
|
|
775
821
|
}
|
|
@@ -800,9 +846,13 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
|
|
|
800
846
|
|
|
801
847
|
// If all columns are selected, remove the entire layoutSection
|
|
802
848
|
if (selectedLayoutColumns.length === layoutSectionNode.childCount) {
|
|
849
|
+
var _api$blockControls3;
|
|
803
850
|
tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
|
|
804
851
|
emitDeleteColumnAnalytics(0);
|
|
805
852
|
tr.setMeta('scrollIntoView', false);
|
|
853
|
+
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.stopPreservingSelection()({
|
|
854
|
+
tr: tr
|
|
855
|
+
});
|
|
806
856
|
return tr;
|
|
807
857
|
}
|
|
808
858
|
|
|
@@ -830,6 +880,9 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
|
|
|
830
880
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
|
|
831
881
|
emitDeleteColumnAnalytics(redistributed.length);
|
|
832
882
|
tr.setMeta('scrollIntoView', false);
|
|
883
|
+
api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.stopPreservingSelection()({
|
|
884
|
+
tr: tr
|
|
885
|
+
});
|
|
833
886
|
return tr;
|
|
834
887
|
};
|
|
835
888
|
};
|
|
@@ -202,6 +202,12 @@ var _default = exports.default = function _default(options) {
|
|
|
202
202
|
if ((0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && prevTr.getMeta('layoutColumnResize')) {
|
|
203
203
|
return;
|
|
204
204
|
}
|
|
205
|
+
|
|
206
|
+
// Layout column insert actions already recalculate column widths and need their own
|
|
207
|
+
// selection mapping; avoid a follow-up normalisation transaction that can remap it.
|
|
208
|
+
if (prevTr.getMeta(_actions.LAYOUT_COLUMN_INSERT_META)) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
205
211
|
var change = (0, _actions.fixColumnSizes)(prevTr, newState);
|
|
206
212
|
if (change) {
|
|
207
213
|
changes.push(change);
|
|
@@ -52,7 +52,7 @@ export const layoutPlugin = ({
|
|
|
52
52
|
config: options = {},
|
|
53
53
|
api
|
|
54
54
|
}) => {
|
|
55
|
-
var _api$analytics, _api$
|
|
55
|
+
var _api$analytics, _api$analytics4;
|
|
56
56
|
const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
|
|
57
57
|
exposure: true
|
|
58
58
|
});
|
|
@@ -153,7 +153,7 @@ export const layoutPlugin = ({
|
|
|
153
153
|
id: 'onecolumnlayout',
|
|
154
154
|
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
155
155
|
description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
|
|
156
|
-
keywords: ['layout', 'column', 'section', 'single column'],
|
|
156
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'single column'] : ['layout', 'column', 'section', 'single column'],
|
|
157
157
|
priority: 1100,
|
|
158
158
|
icon: () => /*#__PURE__*/React.createElement(IconOneColumnLayout, null),
|
|
159
159
|
action(insert, state) {
|
|
@@ -181,7 +181,7 @@ export const layoutPlugin = ({
|
|
|
181
181
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
182
182
|
numberOfColumns: descriptionColumnCount
|
|
183
183
|
}),
|
|
184
|
-
keywords: ['layout', 'column', 'section', keyword],
|
|
184
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', keyword] : ['layout', 'column', 'section', keyword],
|
|
185
185
|
priority: 1100,
|
|
186
186
|
icon: Icon,
|
|
187
187
|
action(insert, state) {
|
|
@@ -231,7 +231,7 @@ export const layoutPlugin = ({
|
|
|
231
231
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
232
232
|
numberOfColumns: 'two'
|
|
233
233
|
}),
|
|
234
|
-
keywords: ['layout', 'column', 'section', 'two column'],
|
|
234
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'two column'] : ['layout', 'column', 'section', 'two column'],
|
|
235
235
|
priority: 1100,
|
|
236
236
|
icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
|
|
237
237
|
action(insert, state) {
|
|
@@ -250,7 +250,7 @@ export const layoutPlugin = ({
|
|
|
250
250
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
251
251
|
numberOfColumns: 'three'
|
|
252
252
|
}),
|
|
253
|
-
keywords: ['layout', 'column', 'section', 'three column'],
|
|
253
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'three column'] : ['layout', 'column', 'section', 'three column'],
|
|
254
254
|
priority: 1100,
|
|
255
255
|
icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
|
|
256
256
|
action(insert, state) {
|
|
@@ -269,7 +269,7 @@ export const layoutPlugin = ({
|
|
|
269
269
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
270
270
|
numberOfColumns: 'four'
|
|
271
271
|
}),
|
|
272
|
-
keywords: ['layout', 'column', 'section', 'four column'],
|
|
272
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'four column'] : ['layout', 'column', 'section', 'four column'],
|
|
273
273
|
priority: 1100,
|
|
274
274
|
icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
|
|
275
275
|
action(insert, state) {
|
|
@@ -288,7 +288,7 @@ export const layoutPlugin = ({
|
|
|
288
288
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
289
289
|
numberOfColumns: 'five'
|
|
290
290
|
}),
|
|
291
|
-
keywords: ['layout', 'column', 'section', 'five column'],
|
|
291
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'five column'] : ['layout', 'column', 'section', 'five column'],
|
|
292
292
|
priority: 1100,
|
|
293
293
|
icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
|
|
294
294
|
action(insert, state) {
|
|
@@ -349,18 +349,18 @@ export const layoutPlugin = ({
|
|
|
349
349
|
return pluginKey.getState(editorState);
|
|
350
350
|
},
|
|
351
351
|
commands: {
|
|
352
|
-
deleteLayoutColumn:
|
|
353
|
-
|
|
354
|
-
|
|
352
|
+
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
|
|
353
|
+
distributeLayoutColumns: options => {
|
|
354
|
+
var _api$analytics5;
|
|
355
|
+
return distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api)(options);
|
|
355
356
|
},
|
|
356
|
-
distributeLayoutColumns: distributeLayoutColumns(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
|
|
357
357
|
insertLayoutColumn: side => {
|
|
358
358
|
var _api$analytics6;
|
|
359
|
-
return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
|
|
359
|
+
return insertLayoutColumn(side, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api);
|
|
360
360
|
},
|
|
361
361
|
setLayoutColumnValign: valign => {
|
|
362
362
|
var _api$analytics7;
|
|
363
|
-
return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
|
|
363
|
+
return setLayoutColumnValign(valign, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
364
364
|
},
|
|
365
365
|
toggleLayoutColumnMenu
|
|
366
366
|
}
|
|
@@ -3,6 +3,7 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
|
3
3
|
import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
5
5
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
+
import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
|
|
6
7
|
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
7
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -528,6 +529,27 @@ const formatLayoutName = layout => {
|
|
|
528
529
|
return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
|
|
529
530
|
}
|
|
530
531
|
};
|
|
532
|
+
export const LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
|
|
533
|
+
const mapLayoutColumnPreservedSelection = (tr, api) => {
|
|
534
|
+
const insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
|
|
535
|
+
if (insertMeta) {
|
|
536
|
+
var _api$blockControls;
|
|
537
|
+
const mapping = insertMeta.side === 'left' ? new Mapping([new StepMap([insertMeta.insertedColumnPos, 0, insertMeta.insertedColumnNodeSize])]) : new Mapping();
|
|
538
|
+
api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.mapPreservedSelection(mapping)({
|
|
539
|
+
tr
|
|
540
|
+
});
|
|
541
|
+
return;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
// Width and alignment updates should keep original layout column selection unchanged.
|
|
545
|
+
if (tr.getMeta('scrollIntoView') === false && tr.docChanged) {
|
|
546
|
+
var _api$blockControls2;
|
|
547
|
+
api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.mapPreservedSelection(new Mapping())({
|
|
548
|
+
tr
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
};
|
|
552
|
+
|
|
531
553
|
/**
|
|
532
554
|
* Returns the active maximum layout column count for the current advanced layouts experiment state.
|
|
533
555
|
*/
|
|
@@ -582,6 +604,18 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
|
|
|
582
604
|
updatedColumns.push(newColumn);
|
|
583
605
|
}
|
|
584
606
|
const updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(updatedColumns));
|
|
607
|
+
let insertedColumnOffset = 0;
|
|
608
|
+
layoutSectionNode.forEach((column, _offset, index) => {
|
|
609
|
+
if (index < insertIndex) {
|
|
610
|
+
insertedColumnOffset += column.nodeSize;
|
|
611
|
+
}
|
|
612
|
+
});
|
|
613
|
+
const insertedColumnPos = layoutSectionPos + 1 + insertedColumnOffset;
|
|
614
|
+
tr.setMeta(LAYOUT_COLUMN_INSERT_META, {
|
|
615
|
+
insertedColumnNodeSize: newColumn.nodeSize,
|
|
616
|
+
insertedColumnPos,
|
|
617
|
+
side
|
|
618
|
+
});
|
|
585
619
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributedWidths));
|
|
586
620
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
587
621
|
action: ACTION.INSERTED,
|
|
@@ -600,8 +634,18 @@ const insertLayoutColumnAt = (side, editorAnalyticsAPI) => ({
|
|
|
600
634
|
tr.setMeta('scrollIntoView', false);
|
|
601
635
|
return tr;
|
|
602
636
|
};
|
|
603
|
-
export const insertLayoutColumn = (side, editorAnalyticsAPI) =>
|
|
604
|
-
|
|
637
|
+
export const insertLayoutColumn = (side, editorAnalyticsAPI, api) => ({
|
|
638
|
+
tr
|
|
639
|
+
}) => {
|
|
640
|
+
const result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
|
|
641
|
+
tr
|
|
642
|
+
});
|
|
643
|
+
if (result) {
|
|
644
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
645
|
+
}
|
|
646
|
+
return result;
|
|
647
|
+
};
|
|
648
|
+
export const setLayoutColumnValign = (valign, editorAnalyticsAPI, api) => ({
|
|
605
649
|
tr
|
|
606
650
|
}) => {
|
|
607
651
|
if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
@@ -647,9 +691,10 @@ export const setLayoutColumnValign = (valign, editorAnalyticsAPI) => ({
|
|
|
647
691
|
eventType: EVENT_TYPE.TRACK
|
|
648
692
|
})(tr);
|
|
649
693
|
tr.setMeta('scrollIntoView', false);
|
|
694
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
650
695
|
return tr;
|
|
651
696
|
};
|
|
652
|
-
export const distributeLayoutColumns = editorAnalyticsAPI => ({
|
|
697
|
+
export const distributeLayoutColumns = (editorAnalyticsAPI, api) => ({
|
|
653
698
|
inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU,
|
|
654
699
|
target = 'selectedColumns'
|
|
655
700
|
} = {}) => ({
|
|
@@ -727,6 +772,7 @@ export const distributeLayoutColumns = editorAnalyticsAPI => ({
|
|
|
727
772
|
eventType: EVENT_TYPE.TRACK
|
|
728
773
|
})(tr);
|
|
729
774
|
tr.setMeta('scrollIntoView', false);
|
|
775
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
730
776
|
return tr;
|
|
731
777
|
};
|
|
732
778
|
export const toggleLayoutColumnMenu = ({
|
|
@@ -742,9 +788,10 @@ export const toggleLayoutColumnMenu = ({
|
|
|
742
788
|
tr.setMeta('scrollIntoView', false);
|
|
743
789
|
return tr;
|
|
744
790
|
};
|
|
745
|
-
export const deleteLayoutColumn = editorAnalyticsAPI => ({
|
|
791
|
+
export const deleteLayoutColumn = (editorAnalyticsAPI, api) => ({
|
|
746
792
|
tr
|
|
747
793
|
}) => {
|
|
794
|
+
var _api$blockControls4;
|
|
748
795
|
if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
749
796
|
return null;
|
|
750
797
|
}
|
|
@@ -777,9 +824,13 @@ export const deleteLayoutColumn = editorAnalyticsAPI => ({
|
|
|
777
824
|
|
|
778
825
|
// If all columns are selected, remove the entire layoutSection
|
|
779
826
|
if (selectedLayoutColumns.length === layoutSectionNode.childCount) {
|
|
827
|
+
var _api$blockControls3;
|
|
780
828
|
tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
|
|
781
829
|
emitDeleteColumnAnalytics(0);
|
|
782
830
|
tr.setMeta('scrollIntoView', false);
|
|
831
|
+
api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.stopPreservingSelection()({
|
|
832
|
+
tr
|
|
833
|
+
});
|
|
783
834
|
return tr;
|
|
784
835
|
}
|
|
785
836
|
|
|
@@ -801,5 +852,8 @@ export const deleteLayoutColumn = editorAnalyticsAPI => ({
|
|
|
801
852
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
|
|
802
853
|
emitDeleteColumnAnalytics(redistributed.length);
|
|
803
854
|
tr.setMeta('scrollIntoView', false);
|
|
855
|
+
api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.stopPreservingSelection()({
|
|
856
|
+
tr
|
|
857
|
+
});
|
|
804
858
|
return tr;
|
|
805
859
|
};
|
|
@@ -7,7 +7,7 @@ import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosem
|
|
|
7
7
|
import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
8
8
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
|
-
import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
|
|
10
|
+
import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
|
|
11
11
|
import { getColumnDividerDecorations } from './column-resize-divider';
|
|
12
12
|
import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
|
|
13
13
|
import { pluginKey } from './plugin-key';
|
|
@@ -193,6 +193,12 @@ export default (options => {
|
|
|
193
193
|
if (editorExperiment('platform_editor_layout_column_resize_handle', true) && prevTr.getMeta('layoutColumnResize')) {
|
|
194
194
|
return;
|
|
195
195
|
}
|
|
196
|
+
|
|
197
|
+
// Layout column insert actions already recalculate column widths and need their own
|
|
198
|
+
// selection mapping; avoid a follow-up normalisation transaction that can remap it.
|
|
199
|
+
if (prevTr.getMeta(LAYOUT_COLUMN_INSERT_META)) {
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
196
202
|
const change = fixColumnSizes(prevTr, newState);
|
|
197
203
|
if (change) {
|
|
198
204
|
changes.push(change);
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -11,7 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
11
11
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
12
12
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
13
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
|
-
import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as
|
|
14
|
+
import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
|
|
15
15
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
16
16
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
17
17
|
import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
|
|
@@ -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$analytics, _api$
|
|
53
|
+
var _api$analytics, _api$analytics4;
|
|
54
54
|
var _ref$config = _ref.config,
|
|
55
55
|
options = _ref$config === void 0 ? {} : _ref$config,
|
|
56
56
|
api = _ref.api;
|
|
@@ -154,7 +154,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
154
154
|
id: 'onecolumnlayout',
|
|
155
155
|
title: formatMessage(layoutMessages.singleColumnAdvancedLayout),
|
|
156
156
|
description: formatMessage(messages.singleColumnsDescriptionAdvancedLayout),
|
|
157
|
-
keywords: ['layout', 'column', 'section', 'single column'],
|
|
157
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'single column'] : ['layout', 'column', 'section', 'single column'],
|
|
158
158
|
priority: 1100,
|
|
159
159
|
icon: function icon() {
|
|
160
160
|
return /*#__PURE__*/React.createElement(IconOneColumnLayout, null);
|
|
@@ -184,7 +184,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
184
184
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
185
185
|
numberOfColumns: descriptionColumnCount
|
|
186
186
|
}),
|
|
187
|
-
keywords: ['layout', 'column', 'section', keyword],
|
|
187
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', keyword] : ['layout', 'column', 'section', keyword],
|
|
188
188
|
priority: 1100,
|
|
189
189
|
icon: Icon,
|
|
190
190
|
action: function action(insert, state) {
|
|
@@ -243,7 +243,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
243
243
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
244
244
|
numberOfColumns: 'two'
|
|
245
245
|
}),
|
|
246
|
-
keywords: ['layout', 'column', 'section', 'two column'],
|
|
246
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'two column'] : ['layout', 'column', 'section', 'two column'],
|
|
247
247
|
priority: 1100,
|
|
248
248
|
icon: function icon() {
|
|
249
249
|
return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
|
|
@@ -264,7 +264,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
264
264
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
265
265
|
numberOfColumns: 'three'
|
|
266
266
|
}),
|
|
267
|
-
keywords: ['layout', 'column', 'section', 'three column'],
|
|
267
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'three column'] : ['layout', 'column', 'section', 'three column'],
|
|
268
268
|
priority: 1100,
|
|
269
269
|
icon: function icon() {
|
|
270
270
|
return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
|
|
@@ -285,7 +285,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
285
285
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
286
286
|
numberOfColumns: 'four'
|
|
287
287
|
}),
|
|
288
|
-
keywords: ['layout', 'column', 'section', 'four column'],
|
|
288
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'four column'] : ['layout', 'column', 'section', 'four column'],
|
|
289
289
|
priority: 1100,
|
|
290
290
|
icon: function icon() {
|
|
291
291
|
return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
|
|
@@ -306,7 +306,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
306
306
|
description: formatMessage(messages.columnsDescriptionAdvancedLayout, {
|
|
307
307
|
numberOfColumns: 'five'
|
|
308
308
|
}),
|
|
309
|
-
keywords: ['layout', 'column', 'section', 'five column'],
|
|
309
|
+
keywords: expValEquals('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'five column'] : ['layout', 'column', 'section', 'five column'],
|
|
310
310
|
priority: 1100,
|
|
311
311
|
icon: function icon() {
|
|
312
312
|
return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
|
|
@@ -370,18 +370,18 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
370
370
|
return pluginKey.getState(editorState);
|
|
371
371
|
},
|
|
372
372
|
commands: {
|
|
373
|
-
deleteLayoutColumn:
|
|
374
|
-
|
|
375
|
-
|
|
373
|
+
deleteLayoutColumn: deleteLayoutColumn(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api),
|
|
374
|
+
distributeLayoutColumns: function distributeLayoutColumns(options) {
|
|
375
|
+
var _api$analytics5;
|
|
376
|
+
return _distributeLayoutColumns(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api)(options);
|
|
376
377
|
},
|
|
377
|
-
distributeLayoutColumns: distributeLayoutColumns(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions),
|
|
378
378
|
insertLayoutColumn: function insertLayoutColumn(side) {
|
|
379
379
|
var _api$analytics6;
|
|
380
|
-
return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
|
|
380
|
+
return _insertLayoutColumn(side, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api);
|
|
381
381
|
},
|
|
382
382
|
setLayoutColumnValign: function setLayoutColumnValign(valign) {
|
|
383
383
|
var _api$analytics7;
|
|
384
|
-
return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions);
|
|
384
|
+
return _setLayoutColumnValign(valign, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
|
|
385
385
|
},
|
|
386
386
|
toggleLayoutColumnMenu: toggleLayoutColumnMenu
|
|
387
387
|
}
|
|
@@ -6,6 +6,7 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
|
6
6
|
import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
|
+
import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
|
|
9
10
|
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
10
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
12
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -542,6 +543,27 @@ var formatLayoutName = function formatLayoutName(layout) {
|
|
|
542
543
|
return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
|
|
543
544
|
}
|
|
544
545
|
};
|
|
546
|
+
export var LAYOUT_COLUMN_INSERT_META = 'layoutColumnInsert';
|
|
547
|
+
var mapLayoutColumnPreservedSelection = function mapLayoutColumnPreservedSelection(tr, api) {
|
|
548
|
+
var insertMeta = tr.getMeta(LAYOUT_COLUMN_INSERT_META);
|
|
549
|
+
if (insertMeta) {
|
|
550
|
+
var _api$blockControls;
|
|
551
|
+
var mapping = insertMeta.side === 'left' ? new Mapping([new StepMap([insertMeta.insertedColumnPos, 0, insertMeta.insertedColumnNodeSize])]) : new Mapping();
|
|
552
|
+
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.mapPreservedSelection(mapping)({
|
|
553
|
+
tr: tr
|
|
554
|
+
});
|
|
555
|
+
return;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
// Width and alignment updates should keep original layout column selection unchanged.
|
|
559
|
+
if (tr.getMeta('scrollIntoView') === false && tr.docChanged) {
|
|
560
|
+
var _api$blockControls2;
|
|
561
|
+
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.mapPreservedSelection(new Mapping())({
|
|
562
|
+
tr: tr
|
|
563
|
+
});
|
|
564
|
+
}
|
|
565
|
+
};
|
|
566
|
+
|
|
545
567
|
/**
|
|
546
568
|
* Returns the active maximum layout column count for the current advanced layouts experiment state.
|
|
547
569
|
*/
|
|
@@ -594,6 +616,18 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
|
|
|
594
616
|
updatedColumns.push(newColumn);
|
|
595
617
|
}
|
|
596
618
|
var updatedLayoutSectionNode = layoutSectionNode.copy(Fragment.fromArray(updatedColumns));
|
|
619
|
+
var insertedColumnOffset = 0;
|
|
620
|
+
layoutSectionNode.forEach(function (column, _offset, index) {
|
|
621
|
+
if (index < insertIndex) {
|
|
622
|
+
insertedColumnOffset += column.nodeSize;
|
|
623
|
+
}
|
|
624
|
+
});
|
|
625
|
+
var insertedColumnPos = layoutSectionPos + 1 + insertedColumnOffset;
|
|
626
|
+
tr.setMeta(LAYOUT_COLUMN_INSERT_META, {
|
|
627
|
+
insertedColumnNodeSize: newColumn.nodeSize,
|
|
628
|
+
insertedColumnPos: insertedColumnPos,
|
|
629
|
+
side: side
|
|
630
|
+
});
|
|
597
631
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributedWidths));
|
|
598
632
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
599
633
|
action: ACTION.INSERTED,
|
|
@@ -613,12 +647,21 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
|
|
|
613
647
|
return tr;
|
|
614
648
|
};
|
|
615
649
|
};
|
|
616
|
-
export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI) {
|
|
617
|
-
return insertLayoutColumnAt(side, editorAnalyticsAPI);
|
|
618
|
-
};
|
|
619
|
-
export var setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI) {
|
|
650
|
+
export var insertLayoutColumn = function insertLayoutColumn(side, editorAnalyticsAPI, api) {
|
|
620
651
|
return function (_ref5) {
|
|
621
652
|
var tr = _ref5.tr;
|
|
653
|
+
var result = insertLayoutColumnAt(side, editorAnalyticsAPI)({
|
|
654
|
+
tr: tr
|
|
655
|
+
});
|
|
656
|
+
if (result) {
|
|
657
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
658
|
+
}
|
|
659
|
+
return result;
|
|
660
|
+
};
|
|
661
|
+
};
|
|
662
|
+
export var setLayoutColumnValign = function setLayoutColumnValign(valign, editorAnalyticsAPI, api) {
|
|
663
|
+
return function (_ref6) {
|
|
664
|
+
var tr = _ref6.tr;
|
|
622
665
|
if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
623
666
|
return null;
|
|
624
667
|
}
|
|
@@ -629,17 +672,17 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
|
|
|
629
672
|
var startIndex = selectedLayoutColumnsResult.startIndex,
|
|
630
673
|
endIndex = selectedLayoutColumnsResult.endIndex,
|
|
631
674
|
selectedLayoutColumns = selectedLayoutColumnsResult.selectedLayoutColumns;
|
|
632
|
-
var columnsToUpdate = selectedLayoutColumns.filter(function (
|
|
633
|
-
var node =
|
|
675
|
+
var columnsToUpdate = selectedLayoutColumns.filter(function (_ref7) {
|
|
676
|
+
var node = _ref7.node;
|
|
634
677
|
return node.attrs.valign !== valign;
|
|
635
678
|
});
|
|
636
679
|
if (columnsToUpdate.length === 0) {
|
|
637
680
|
return null;
|
|
638
681
|
}
|
|
639
682
|
var updatedColumnCount = columnsToUpdate.length;
|
|
640
|
-
columnsToUpdate.forEach(function (
|
|
641
|
-
var node =
|
|
642
|
-
pos =
|
|
683
|
+
columnsToUpdate.forEach(function (_ref8) {
|
|
684
|
+
var node = _ref8.node,
|
|
685
|
+
pos = _ref8.pos;
|
|
643
686
|
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
644
687
|
valign: valign
|
|
645
688
|
}));
|
|
@@ -659,18 +702,19 @@ export var setLayoutColumnValign = function setLayoutColumnValign(valign, editor
|
|
|
659
702
|
eventType: EVENT_TYPE.TRACK
|
|
660
703
|
})(tr);
|
|
661
704
|
tr.setMeta('scrollIntoView', false);
|
|
705
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
662
706
|
return tr;
|
|
663
707
|
};
|
|
664
708
|
};
|
|
665
|
-
export var distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI) {
|
|
709
|
+
export var distributeLayoutColumns = function distributeLayoutColumns(editorAnalyticsAPI, api) {
|
|
666
710
|
return function () {
|
|
667
|
-
var
|
|
668
|
-
|
|
669
|
-
inputMethod =
|
|
670
|
-
|
|
671
|
-
target =
|
|
672
|
-
return function (
|
|
673
|
-
var tr =
|
|
711
|
+
var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
712
|
+
_ref9$inputMethod = _ref9.inputMethod,
|
|
713
|
+
inputMethod = _ref9$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref9$inputMethod,
|
|
714
|
+
_ref9$target = _ref9.target,
|
|
715
|
+
target = _ref9$target === void 0 ? 'selectedColumns' : _ref9$target;
|
|
716
|
+
return function (_ref0) {
|
|
717
|
+
var tr = _ref0.tr;
|
|
674
718
|
if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
675
719
|
return null;
|
|
676
720
|
}
|
|
@@ -685,8 +729,8 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
|
|
|
685
729
|
var existingWidths = mapChildren(layoutSectionNode, function (column) {
|
|
686
730
|
return column.attrs.width;
|
|
687
731
|
});
|
|
688
|
-
var selectedWidths = selectedLayoutColumns.map(function (
|
|
689
|
-
var node =
|
|
732
|
+
var selectedWidths = selectedLayoutColumns.map(function (_ref1) {
|
|
733
|
+
var node = _ref1.node;
|
|
690
734
|
return node.attrs.width;
|
|
691
735
|
});
|
|
692
736
|
var distribution = calculateDistribution(selectedWidths);
|
|
@@ -718,9 +762,9 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
|
|
|
718
762
|
});
|
|
719
763
|
|
|
720
764
|
// Apply widths via setNodeMarkup per selected column — keeps nodes in place (preserves identity, marks, decorations)
|
|
721
|
-
selectedLayoutColumns.forEach(function (
|
|
722
|
-
var node =
|
|
723
|
-
pos =
|
|
765
|
+
selectedLayoutColumns.forEach(function (_ref10, i) {
|
|
766
|
+
var node = _ref10.node,
|
|
767
|
+
pos = _ref10.pos;
|
|
724
768
|
var colIdx = startIndex + i;
|
|
725
769
|
tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
726
770
|
width: newWidths[colIdx]
|
|
@@ -740,15 +784,16 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
|
|
|
740
784
|
eventType: EVENT_TYPE.TRACK
|
|
741
785
|
})(tr);
|
|
742
786
|
tr.setMeta('scrollIntoView', false);
|
|
787
|
+
mapLayoutColumnPreservedSelection(tr, api);
|
|
743
788
|
return tr;
|
|
744
789
|
};
|
|
745
790
|
};
|
|
746
791
|
};
|
|
747
|
-
export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(
|
|
748
|
-
var anchorPos =
|
|
749
|
-
isOpen =
|
|
750
|
-
return function (
|
|
751
|
-
var tr =
|
|
792
|
+
export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref11) {
|
|
793
|
+
var anchorPos = _ref11.anchorPos,
|
|
794
|
+
isOpen = _ref11.isOpen;
|
|
795
|
+
return function (_ref12) {
|
|
796
|
+
var tr = _ref12.tr;
|
|
752
797
|
tr.setMeta('toggleLayoutColumnMenu', {
|
|
753
798
|
anchorPos: anchorPos,
|
|
754
799
|
isOpen: isOpen
|
|
@@ -757,9 +802,10 @@ export var toggleLayoutColumnMenu = function toggleLayoutColumnMenu(_ref10) {
|
|
|
757
802
|
return tr;
|
|
758
803
|
};
|
|
759
804
|
};
|
|
760
|
-
export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI) {
|
|
761
|
-
return function (
|
|
762
|
-
var
|
|
805
|
+
export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI, api) {
|
|
806
|
+
return function (_ref13) {
|
|
807
|
+
var _api$blockControls4;
|
|
808
|
+
var tr = _ref13.tr;
|
|
763
809
|
if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
764
810
|
return null;
|
|
765
811
|
}
|
|
@@ -790,9 +836,13 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
|
|
|
790
836
|
|
|
791
837
|
// If all columns are selected, remove the entire layoutSection
|
|
792
838
|
if (selectedLayoutColumns.length === layoutSectionNode.childCount) {
|
|
839
|
+
var _api$blockControls3;
|
|
793
840
|
tr.delete(layoutSectionPos, layoutSectionPos + layoutSectionNode.nodeSize);
|
|
794
841
|
emitDeleteColumnAnalytics(0);
|
|
795
842
|
tr.setMeta('scrollIntoView', false);
|
|
843
|
+
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.stopPreservingSelection()({
|
|
844
|
+
tr: tr
|
|
845
|
+
});
|
|
796
846
|
return tr;
|
|
797
847
|
}
|
|
798
848
|
|
|
@@ -820,6 +870,9 @@ export var deleteLayoutColumn = function deleteLayoutColumn(editorAnalyticsAPI)
|
|
|
820
870
|
tr.replaceWith(layoutSectionPos + 1, layoutSectionPos + layoutSectionNode.nodeSize - 1, columnWidth(updatedLayoutSectionNode, tr.doc.type.schema, redistributed));
|
|
821
871
|
emitDeleteColumnAnalytics(redistributed.length);
|
|
822
872
|
tr.setMeta('scrollIntoView', false);
|
|
873
|
+
api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.stopPreservingSelection()({
|
|
874
|
+
tr: tr
|
|
875
|
+
});
|
|
823
876
|
return tr;
|
|
824
877
|
};
|
|
825
878
|
};
|
|
@@ -11,7 +11,7 @@ import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosem
|
|
|
11
11
|
import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
12
12
|
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
13
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
|
-
import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
|
|
14
|
+
import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
|
|
15
15
|
import { getColumnDividerDecorations } from './column-resize-divider';
|
|
16
16
|
import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
|
|
17
17
|
import { pluginKey } from './plugin-key';
|
|
@@ -195,6 +195,12 @@ export default (function (options) {
|
|
|
195
195
|
if (editorExperiment('platform_editor_layout_column_resize_handle', true) && prevTr.getMeta('layoutColumnResize')) {
|
|
196
196
|
return;
|
|
197
197
|
}
|
|
198
|
+
|
|
199
|
+
// Layout column insert actions already recalculate column widths and need their own
|
|
200
|
+
// selection mapping; avoid a follow-up normalisation transaction that can remap it.
|
|
201
|
+
if (prevTr.getMeta(LAYOUT_COLUMN_INSERT_META)) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
198
204
|
var change = fixColumnSizes(prevTr, newState);
|
|
199
205
|
if (change) {
|
|
200
206
|
changes.push(change);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Valign } from '@atlaskit/adf-schema/layout-column';
|
|
2
|
+
import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
4
|
+
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
5
|
import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
|
|
4
6
|
import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
5
7
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
@@ -10,7 +12,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
|
10
12
|
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
|
|
11
13
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
12
14
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
13
|
-
import type {
|
|
15
|
+
import type { DistributeLayoutColumnsOptions, InsertLayoutColumnsInputMethod, InsertLayoutColumnSide } from './pm-plugins/actions';
|
|
14
16
|
import type { LayoutState } from './pm-plugins/types';
|
|
15
17
|
import type { LayoutPluginOptions } from './types';
|
|
16
18
|
export type LayoutPluginDependencies = [
|
|
@@ -21,6 +23,7 @@ export type LayoutPluginDependencies = [
|
|
|
21
23
|
OptionalPlugin<EditorDisabledPlugin>,
|
|
22
24
|
OptionalPlugin<GuidelinePlugin>,
|
|
23
25
|
OptionalPlugin<InteractionPlugin>,
|
|
26
|
+
OptionalPlugin<BlockControlsPlugin>,
|
|
24
27
|
OptionalPlugin<BlockMenuPlugin>,
|
|
25
28
|
OptionalPlugin<ToolbarPlugin>,
|
|
26
29
|
OptionalPlugin<UiControlRegistryPlugin>,
|
|
@@ -28,14 +31,17 @@ export type LayoutPluginDependencies = [
|
|
|
28
31
|
];
|
|
29
32
|
export type LayoutPlugin = NextEditorPlugin<'layout', {
|
|
30
33
|
actions: {
|
|
31
|
-
insertLayoutColumns:
|
|
34
|
+
insertLayoutColumns: (inputMethod: InsertLayoutColumnsInputMethod) => Command;
|
|
32
35
|
};
|
|
33
36
|
commands: {
|
|
34
|
-
deleteLayoutColumn:
|
|
35
|
-
distributeLayoutColumns:
|
|
37
|
+
deleteLayoutColumn: EditorCommand;
|
|
38
|
+
distributeLayoutColumns: (options?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
36
39
|
insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
|
|
37
|
-
setLayoutColumnValign: (valign:
|
|
38
|
-
toggleLayoutColumnMenu:
|
|
40
|
+
setLayoutColumnValign: (valign: Valign) => EditorCommand;
|
|
41
|
+
toggleLayoutColumnMenu: (options: {
|
|
42
|
+
anchorPos?: number;
|
|
43
|
+
isOpen?: boolean;
|
|
44
|
+
}) => EditorCommand;
|
|
39
45
|
};
|
|
40
46
|
dependencies: LayoutPluginDependencies;
|
|
41
47
|
pluginConfiguration: LayoutPluginOptions | undefined;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { Valign } from '@atlaskit/adf-schema/layout-column';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { Command, EditorCommand, ExtractInjectionAPI, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
6
6
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
+
import type { LayoutPlugin } from '../layoutPluginType';
|
|
7
8
|
import type { Change, PresetLayout } from '../types';
|
|
8
9
|
export declare const ONE_COL_LAYOUTS: PresetLayout[];
|
|
9
10
|
export declare const TWO_COL_LAYOUTS: PresetLayout[];
|
|
@@ -17,7 +18,7 @@ export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, c
|
|
|
17
18
|
export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
|
|
18
19
|
export declare const createDefaultLayoutSection: (state: EditorState) => Node;
|
|
19
20
|
export declare const insertLayoutColumns: Command;
|
|
20
|
-
type InsertLayoutColumnsInputMethod = TOOLBAR_MENU_TYPE | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.ELEMENT_BROWSER;
|
|
21
|
+
export type InsertLayoutColumnsInputMethod = TOOLBAR_MENU_TYPE | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.ELEMENT_BROWSER;
|
|
21
22
|
export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: InsertLayoutColumnsInputMethod) => Command;
|
|
22
23
|
/**
|
|
23
24
|
* Forces a layout section node to match the given preset layout by adjusting
|
|
@@ -29,20 +30,27 @@ export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState
|
|
|
29
30
|
export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
|
|
30
31
|
export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, inputMethod?: INPUT_METHOD.FLOATING_TB) => Command;
|
|
31
32
|
export type InsertLayoutColumnSide = 'left' | 'right';
|
|
33
|
+
export declare const LAYOUT_COLUMN_INSERT_META = "layoutColumnInsert";
|
|
34
|
+
export type LayoutColumnInsertMeta = {
|
|
35
|
+
insertedColumnNodeSize: number;
|
|
36
|
+
insertedColumnPos: number;
|
|
37
|
+
side: InsertLayoutColumnSide;
|
|
38
|
+
};
|
|
39
|
+
type LayoutPluginAPI = ExtractInjectionAPI<LayoutPlugin> | undefined;
|
|
32
40
|
/**
|
|
33
41
|
* Returns the active maximum layout column count for the current advanced layouts experiment state.
|
|
34
42
|
*/
|
|
35
43
|
export declare function getEffectiveMaxLayoutColumns(): number;
|
|
36
|
-
export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
37
|
-
export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
38
|
-
type DistributeLayoutColumnsOptions = {
|
|
44
|
+
export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
45
|
+
export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
46
|
+
export type DistributeLayoutColumnsOptions = {
|
|
39
47
|
inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
|
|
40
48
|
target?: 'selectedColumns' | 'allColumns';
|
|
41
49
|
};
|
|
42
|
-
export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
50
|
+
export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
43
51
|
export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
|
|
44
52
|
anchorPos?: number;
|
|
45
53
|
isOpen?: boolean;
|
|
46
54
|
}) => EditorCommand;
|
|
47
|
-
export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
55
|
+
export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
48
56
|
export {};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Valign } from '@atlaskit/adf-schema/layout-column';
|
|
2
|
+
import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
3
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
4
|
+
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
5
|
import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
|
|
4
6
|
import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
5
7
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
@@ -10,7 +12,7 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
|
10
12
|
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
|
|
11
13
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
12
14
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
13
|
-
import type {
|
|
15
|
+
import type { DistributeLayoutColumnsOptions, InsertLayoutColumnsInputMethod, InsertLayoutColumnSide } from './pm-plugins/actions';
|
|
14
16
|
import type { LayoutState } from './pm-plugins/types';
|
|
15
17
|
import type { LayoutPluginOptions } from './types';
|
|
16
18
|
export type LayoutPluginDependencies = [
|
|
@@ -21,6 +23,7 @@ export type LayoutPluginDependencies = [
|
|
|
21
23
|
OptionalPlugin<EditorDisabledPlugin>,
|
|
22
24
|
OptionalPlugin<GuidelinePlugin>,
|
|
23
25
|
OptionalPlugin<InteractionPlugin>,
|
|
26
|
+
OptionalPlugin<BlockControlsPlugin>,
|
|
24
27
|
OptionalPlugin<BlockMenuPlugin>,
|
|
25
28
|
OptionalPlugin<ToolbarPlugin>,
|
|
26
29
|
OptionalPlugin<UiControlRegistryPlugin>,
|
|
@@ -28,14 +31,17 @@ export type LayoutPluginDependencies = [
|
|
|
28
31
|
];
|
|
29
32
|
export type LayoutPlugin = NextEditorPlugin<'layout', {
|
|
30
33
|
actions: {
|
|
31
|
-
insertLayoutColumns:
|
|
34
|
+
insertLayoutColumns: (inputMethod: InsertLayoutColumnsInputMethod) => Command;
|
|
32
35
|
};
|
|
33
36
|
commands: {
|
|
34
|
-
deleteLayoutColumn:
|
|
35
|
-
distributeLayoutColumns:
|
|
37
|
+
deleteLayoutColumn: EditorCommand;
|
|
38
|
+
distributeLayoutColumns: (options?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
36
39
|
insertLayoutColumn: (side: InsertLayoutColumnSide) => EditorCommand;
|
|
37
|
-
setLayoutColumnValign: (valign:
|
|
38
|
-
toggleLayoutColumnMenu:
|
|
40
|
+
setLayoutColumnValign: (valign: Valign) => EditorCommand;
|
|
41
|
+
toggleLayoutColumnMenu: (options: {
|
|
42
|
+
anchorPos?: number;
|
|
43
|
+
isOpen?: boolean;
|
|
44
|
+
}) => EditorCommand;
|
|
39
45
|
};
|
|
40
46
|
dependencies: LayoutPluginDependencies;
|
|
41
47
|
pluginConfiguration: LayoutPluginOptions | undefined;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { Valign } from '@atlaskit/adf-schema/layout-column';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { Command, EditorCommand, ExtractInjectionAPI, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
6
6
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
+
import type { LayoutPlugin } from '../layoutPluginType';
|
|
7
8
|
import type { Change, PresetLayout } from '../types';
|
|
8
9
|
export declare const ONE_COL_LAYOUTS: PresetLayout[];
|
|
9
10
|
export declare const TWO_COL_LAYOUTS: PresetLayout[];
|
|
@@ -17,7 +18,7 @@ export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, c
|
|
|
17
18
|
export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
|
|
18
19
|
export declare const createDefaultLayoutSection: (state: EditorState) => Node;
|
|
19
20
|
export declare const insertLayoutColumns: Command;
|
|
20
|
-
type InsertLayoutColumnsInputMethod = TOOLBAR_MENU_TYPE | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.ELEMENT_BROWSER;
|
|
21
|
+
export type InsertLayoutColumnsInputMethod = TOOLBAR_MENU_TYPE | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.ELEMENT_BROWSER;
|
|
21
22
|
export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: InsertLayoutColumnsInputMethod) => Command;
|
|
22
23
|
/**
|
|
23
24
|
* Forces a layout section node to match the given preset layout by adjusting
|
|
@@ -29,20 +30,27 @@ export declare const fixColumnSizes: (changedTr: Transaction, state: EditorState
|
|
|
29
30
|
export declare const fixColumnStructure: (state: EditorState) => Transaction | undefined;
|
|
30
31
|
export declare const deleteActiveLayoutNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, inputMethod?: INPUT_METHOD.FLOATING_TB) => Command;
|
|
31
32
|
export type InsertLayoutColumnSide = 'left' | 'right';
|
|
33
|
+
export declare const LAYOUT_COLUMN_INSERT_META = "layoutColumnInsert";
|
|
34
|
+
export type LayoutColumnInsertMeta = {
|
|
35
|
+
insertedColumnNodeSize: number;
|
|
36
|
+
insertedColumnPos: number;
|
|
37
|
+
side: InsertLayoutColumnSide;
|
|
38
|
+
};
|
|
39
|
+
type LayoutPluginAPI = ExtractInjectionAPI<LayoutPlugin> | undefined;
|
|
32
40
|
/**
|
|
33
41
|
* Returns the active maximum layout column count for the current advanced layouts experiment state.
|
|
34
42
|
*/
|
|
35
43
|
export declare function getEffectiveMaxLayoutColumns(): number;
|
|
36
|
-
export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
37
|
-
export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
38
|
-
type DistributeLayoutColumnsOptions = {
|
|
44
|
+
export declare const insertLayoutColumn: (side: InsertLayoutColumnSide, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
45
|
+
export declare const setLayoutColumnValign: (valign: Valign, editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
46
|
+
export type DistributeLayoutColumnsOptions = {
|
|
39
47
|
inputMethod?: INPUT_METHOD.LAYOUT_COLUMN_MENU | INPUT_METHOD.FLOATING_TB;
|
|
40
48
|
target?: 'selectedColumns' | 'allColumns';
|
|
41
49
|
};
|
|
42
|
-
export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
50
|
+
export declare const distributeLayoutColumns: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => ({ inputMethod, target, }?: DistributeLayoutColumnsOptions) => EditorCommand;
|
|
43
51
|
export declare const toggleLayoutColumnMenu: ({ anchorPos, isOpen }: {
|
|
44
52
|
anchorPos?: number;
|
|
45
53
|
isOpen?: boolean;
|
|
46
54
|
}) => EditorCommand;
|
|
47
|
-
export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI) => EditorCommand;
|
|
55
|
+
export declare const deleteLayoutColumn: (editorAnalyticsAPI?: EditorAnalyticsAPI, api?: LayoutPluginAPI) => EditorCommand;
|
|
48
56
|
export {};
|
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.1",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,9 +29,10 @@
|
|
|
29
29
|
],
|
|
30
30
|
"atlaskit:src": "src/index.ts",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@atlaskit/adf-schema": "^52.
|
|
32
|
+
"@atlaskit/adf-schema": "^52.16.0",
|
|
33
33
|
"@atlaskit/css": "^0.19.0",
|
|
34
34
|
"@atlaskit/editor-plugin-analytics": "^11.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-block-controls": "^12.0.0",
|
|
35
36
|
"@atlaskit/editor-plugin-block-menu": "^10.0.0",
|
|
36
37
|
"@atlaskit/editor-plugin-decorations": "^11.0.0",
|
|
37
38
|
"@atlaskit/editor-plugin-editor-disabled": "^11.0.0",
|
|
@@ -46,10 +47,10 @@
|
|
|
46
47
|
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
47
48
|
"@atlaskit/editor-toolbar": "^1.9.0",
|
|
48
49
|
"@atlaskit/editor-ui-control-model": "^1.2.0",
|
|
49
|
-
"@atlaskit/icon": "^35.
|
|
50
|
-
"@atlaskit/icon-lab": "^6.
|
|
50
|
+
"@atlaskit/icon": "^35.4.0",
|
|
51
|
+
"@atlaskit/icon-lab": "^6.13.0",
|
|
51
52
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^88.
|
|
53
|
+
"@atlaskit/tmp-editor-statsig": "^88.3.0",
|
|
53
54
|
"@atlaskit/tokens": "^13.1.0",
|
|
54
55
|
"@babel/runtime": "^7.0.0",
|
|
55
56
|
"@emotion/react": "^11.7.1",
|