@atlaskit/editor-plugin-layout 17.0.3 → 17.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/cjs/layoutPlugin.js +1 -1
- package/dist/cjs/pm-plugins/actions.js +4 -11
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/cjs/pm-plugins/resizing.js +3 -8
- package/dist/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js +12 -6
- package/dist/es2019/layoutPlugin.js +1 -1
- package/dist/es2019/pm-plugins/actions.js +4 -11
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/es2019/pm-plugins/resizing.js +1 -13
- package/dist/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js +11 -6
- package/dist/esm/layoutPlugin.js +1 -1
- package/dist/esm/pm-plugins/actions.js +4 -11
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/esm/pm-plugins/resizing.js +3 -8
- package/dist/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js +11 -6
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 17.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`6f957d4e7bcb8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f957d4e7bcb8) -
|
|
8
|
+
Make layout column resizing generally available
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 17.0.4
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`d82ea790b5c1c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82ea790b5c1c) -
|
|
19
|
+
Update registered slash-command menu icons, including the Jira datasource WorkItems icon, when the
|
|
20
|
+
`platform_editor_slash_command` experiment is enabled.
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 17.0.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -127,7 +127,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
127
127
|
}
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
|
-
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max'
|
|
130
|
+
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max') && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
131
131
|
plugins.push({
|
|
132
132
|
name: 'layoutResizing',
|
|
133
133
|
plugin: function plugin(_ref2) {
|
|
@@ -391,14 +391,8 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorA
|
|
|
391
391
|
};
|
|
392
392
|
function layoutNeedChanges(node) {
|
|
393
393
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
if (isValidLayoutWidthDistributions(node)) {
|
|
397
|
-
return false;
|
|
398
|
-
}
|
|
399
|
-
return true;
|
|
400
|
-
}
|
|
401
|
-
return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
|
|
394
|
+
// Custom widths that sum to 100% are valid and should not be forced back to presets.
|
|
395
|
+
return !isValidLayoutWidthDistributions(node);
|
|
402
396
|
}
|
|
403
397
|
return !getPresetLayout(node);
|
|
404
398
|
}
|
|
@@ -478,9 +472,8 @@ var fixColumnStructure = exports.fixColumnStructure = function fixColumnStructur
|
|
|
478
472
|
var node = state.doc.nodeAt(pos);
|
|
479
473
|
if (node) {
|
|
480
474
|
if (node.childCount !== getWidthsForPreset(selectedLayout).length) {
|
|
481
|
-
//
|
|
482
|
-
|
|
483
|
-
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && isValidLayoutWidthDistributions(node)) {
|
|
475
|
+
// Valid custom widths may use a different column count from the selected preset.
|
|
476
|
+
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && isValidLayoutWidthDistributions(node)) {
|
|
484
477
|
return;
|
|
485
478
|
}
|
|
486
479
|
return forceSectionToPresetLayout(state, node, pos, selectedLayout);
|
|
@@ -276,7 +276,7 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
|
|
|
276
276
|
decorations: function decorations(state) {
|
|
277
277
|
var layoutState = _pluginKey.pluginKey.getState(state);
|
|
278
278
|
var isLayoutResizingPluginAvailable = _resizing.pluginKey.get(state) !== undefined;
|
|
279
|
-
if ((0, _experiments.editorExperiment)('advanced_layouts', true) &&
|
|
279
|
+
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutResizingPluginAvailable) {
|
|
280
280
|
var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef, editorAnalyticsAPI);
|
|
281
281
|
var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
282
282
|
var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
|
|
@@ -365,7 +365,7 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
|
|
|
365
365
|
}
|
|
366
366
|
|
|
367
367
|
// Skip fixing column sizes for column resize drag transactions
|
|
368
|
-
if (
|
|
368
|
+
if (prevTr.getMeta('layoutColumnResize')) {
|
|
369
369
|
return;
|
|
370
370
|
}
|
|
371
371
|
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.pluginKey = exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
10
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
@@ -15,11 +14,8 @@ var _model = require("@atlaskit/editor-prosemirror/model");
|
|
|
15
14
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
16
15
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
17
16
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
18
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
17
|
var _nodeviews = require("../nodeviews");
|
|
20
18
|
var _layoutSectionView = require("../nodeviews/layoutSectionView");
|
|
21
|
-
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; }
|
|
22
|
-
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; }
|
|
23
19
|
var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin');
|
|
24
20
|
|
|
25
21
|
/**
|
|
@@ -101,7 +97,7 @@ var _default = exports.default = function _default(options, pluginInjectionApi,
|
|
|
101
97
|
return new _safePlugin.SafePlugin({
|
|
102
98
|
key: pluginKey,
|
|
103
99
|
props: {
|
|
104
|
-
nodeViews:
|
|
100
|
+
nodeViews: {
|
|
105
101
|
layoutSection: function layoutSection(node, view, getPos) {
|
|
106
102
|
// Both experiments are required: the vanilla view renders no React, so it
|
|
107
103
|
// cannot mount the <LayoutBreakoutResizer> that LayoutSectionView.render()
|
|
@@ -123,12 +119,11 @@ var _default = exports.default = function _default(options, pluginInjectionApi,
|
|
|
123
119
|
options: options,
|
|
124
120
|
intl: intl
|
|
125
121
|
}).init();
|
|
126
|
-
}
|
|
127
|
-
}, (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) || (0, _coreUtils.isSSR)() ? {
|
|
122
|
+
},
|
|
128
123
|
layoutColumn: function layoutColumn(node, view, getPos) {
|
|
129
124
|
return new LayoutColumnView(node, view, getPos);
|
|
130
125
|
}
|
|
131
|
-
}
|
|
126
|
+
}
|
|
132
127
|
}
|
|
133
128
|
});
|
|
134
129
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
@@ -8,16 +9,19 @@ exports.LayoutQuickInsertMenuItem = void 0;
|
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
10
|
var _reactIntl = require("react-intl");
|
|
10
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
|
-
var _assets = require("@atlaskit/editor-common/assets");
|
|
12
12
|
var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
|
|
13
|
+
var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
|
|
14
|
+
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
|
|
15
|
+
var _layoutFiveColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-five-columns"));
|
|
16
|
+
var _layoutFourColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-four-columns"));
|
|
13
17
|
var _layoutPlugin = require("../../layoutPlugin");
|
|
14
18
|
var _actions = require("../../pm-plugins/actions");
|
|
15
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
20
|
var icons = {
|
|
17
|
-
2:
|
|
18
|
-
3:
|
|
19
|
-
4:
|
|
20
|
-
5:
|
|
21
|
+
2: _layoutTwoColumns.default,
|
|
22
|
+
3: _layoutThreeColumns.default,
|
|
23
|
+
4: _layoutFourColumns.default,
|
|
24
|
+
5: _layoutFiveColumns.default
|
|
21
25
|
};
|
|
22
26
|
var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
|
|
23
27
|
var api = _ref.api,
|
|
@@ -46,7 +50,9 @@ var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function Lay
|
|
|
46
50
|
return tr;
|
|
47
51
|
}, [api, columnCount]);
|
|
48
52
|
return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
|
|
49
|
-
iconBefore: /*#__PURE__*/_react.default.createElement(Icon,
|
|
53
|
+
iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
|
|
54
|
+
label: ""
|
|
55
|
+
}),
|
|
50
56
|
onSelect: onSelect,
|
|
51
57
|
title: formatMessage(title)
|
|
52
58
|
});
|
|
@@ -117,7 +117,7 @@ export const layoutPlugin = ({
|
|
|
117
117
|
})
|
|
118
118
|
});
|
|
119
119
|
}
|
|
120
|
-
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max'
|
|
120
|
+
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max') && api && editorExperiment('advanced_layouts', true)) {
|
|
121
121
|
plugins.push({
|
|
122
122
|
name: 'layoutResizing',
|
|
123
123
|
plugin: ({
|
|
@@ -365,14 +365,8 @@ export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch)
|
|
|
365
365
|
};
|
|
366
366
|
function layoutNeedChanges(node) {
|
|
367
367
|
if (editorExperiment('advanced_layouts', true)) {
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
if (isValidLayoutWidthDistributions(node)) {
|
|
371
|
-
return false;
|
|
372
|
-
}
|
|
373
|
-
return true;
|
|
374
|
-
}
|
|
375
|
-
return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
|
|
368
|
+
// Custom widths that sum to 100% are valid and should not be forced back to presets.
|
|
369
|
+
return !isValidLayoutWidthDistributions(node);
|
|
376
370
|
}
|
|
377
371
|
return !getPresetLayout(node);
|
|
378
372
|
}
|
|
@@ -455,9 +449,8 @@ export const fixColumnStructure = state => {
|
|
|
455
449
|
const node = state.doc.nodeAt(pos);
|
|
456
450
|
if (node) {
|
|
457
451
|
if (node.childCount !== getWidthsForPreset(selectedLayout).length) {
|
|
458
|
-
//
|
|
459
|
-
|
|
460
|
-
if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isValidLayoutWidthDistributions(node)) {
|
|
452
|
+
// Valid custom widths may use a different column count from the selected preset.
|
|
453
|
+
if (editorExperiment('advanced_layouts', true) && isValidLayoutWidthDistributions(node)) {
|
|
461
454
|
return;
|
|
462
455
|
}
|
|
463
456
|
return forceSectionToPresetLayout(state, node, pos, selectedLayout);
|
|
@@ -276,7 +276,7 @@ export default ((options, editorAnalyticsAPI) => {
|
|
|
276
276
|
decorations(state) {
|
|
277
277
|
const layoutState = pluginKey.getState(state);
|
|
278
278
|
const isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
|
|
279
|
-
if (editorExperiment('advanced_layouts', true) &&
|
|
279
|
+
if (editorExperiment('advanced_layouts', true) && isLayoutResizingPluginAvailable) {
|
|
280
280
|
const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
|
|
281
281
|
const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
282
282
|
const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
|
|
@@ -361,7 +361,7 @@ export default ((options, editorAnalyticsAPI) => {
|
|
|
361
361
|
}
|
|
362
362
|
|
|
363
363
|
// Skip fixing column sizes for column resize drag transactions
|
|
364
|
-
if (
|
|
364
|
+
if (prevTr.getMeta('layoutColumnResize')) {
|
|
365
365
|
return;
|
|
366
366
|
}
|
|
367
367
|
|
|
@@ -4,7 +4,6 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
6
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
7
|
import { LayoutSectionView } from '../nodeviews';
|
|
9
8
|
import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
|
|
10
9
|
export const pluginKey = new PluginKey('layoutResizingPlugin');
|
|
@@ -107,18 +106,7 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
|
|
|
107
106
|
intl
|
|
108
107
|
}).init();
|
|
109
108
|
},
|
|
110
|
-
|
|
111
|
-
// 1. The resize handle experiment is on (its original purpose:
|
|
112
|
-
// suppress style-attribute MutationObserver callbacks during
|
|
113
|
-
// drag, allowing direct flex-basis writes without PM
|
|
114
|
-
// interference).
|
|
115
|
-
// 2. Rendering on the server — the column node view stamps
|
|
116
|
-
// `container-type: inline-size` inline on each column dom so
|
|
117
|
-
// that the SSR-rendered table inside the column constrains
|
|
118
|
-
// its width to the column (see comment in the constructor).
|
|
119
|
-
...(editorExperiment('platform_editor_layout_column_resize_handle', true) || isSSR() ? {
|
|
120
|
-
layoutColumn: (node, view, getPos) => new LayoutColumnView(node, view, getPos)
|
|
121
|
-
} : {})
|
|
109
|
+
layoutColumn: (node, view, getPos) => new LayoutColumnView(node, view, getPos)
|
|
122
110
|
}
|
|
123
111
|
}
|
|
124
112
|
}));
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
|
|
5
4
|
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
5
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
6
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
7
|
+
import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
|
|
8
|
+
import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
|
|
6
9
|
import { selectIntoLayoutSection } from '../../layoutPlugin';
|
|
7
10
|
import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
|
|
8
11
|
const icons = {
|
|
9
|
-
2:
|
|
10
|
-
3:
|
|
11
|
-
4:
|
|
12
|
-
5:
|
|
12
|
+
2: LayoutTwoColumnsIcon,
|
|
13
|
+
3: LayoutThreeColumnsIcon,
|
|
14
|
+
4: LayoutFourColumnsIcon,
|
|
15
|
+
5: LayoutFiveColumnsIcon
|
|
13
16
|
};
|
|
14
17
|
export const LayoutQuickInsertMenuItem = ({
|
|
15
18
|
api,
|
|
@@ -41,7 +44,9 @@ export const LayoutQuickInsertMenuItem = ({
|
|
|
41
44
|
return tr;
|
|
42
45
|
}, [api, columnCount]);
|
|
43
46
|
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
|
|
44
|
-
iconBefore: /*#__PURE__*/React.createElement(Icon,
|
|
47
|
+
iconBefore: /*#__PURE__*/React.createElement(Icon, {
|
|
48
|
+
label: ""
|
|
49
|
+
}),
|
|
45
50
|
onSelect: onSelect,
|
|
46
51
|
title: formatMessage(title)
|
|
47
52
|
});
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -120,7 +120,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
120
120
|
}
|
|
121
121
|
});
|
|
122
122
|
}
|
|
123
|
-
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max'
|
|
123
|
+
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max') && api && editorExperiment('advanced_layouts', true)) {
|
|
124
124
|
plugins.push({
|
|
125
125
|
name: 'layoutResizing',
|
|
126
126
|
plugin: function plugin(_ref2) {
|
|
@@ -381,14 +381,8 @@ export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
|
|
|
381
381
|
};
|
|
382
382
|
function layoutNeedChanges(node) {
|
|
383
383
|
if (editorExperiment('advanced_layouts', true)) {
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
if (isValidLayoutWidthDistributions(node)) {
|
|
387
|
-
return false;
|
|
388
|
-
}
|
|
389
|
-
return true;
|
|
390
|
-
}
|
|
391
|
-
return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
|
|
384
|
+
// Custom widths that sum to 100% are valid and should not be forced back to presets.
|
|
385
|
+
return !isValidLayoutWidthDistributions(node);
|
|
392
386
|
}
|
|
393
387
|
return !getPresetLayout(node);
|
|
394
388
|
}
|
|
@@ -468,9 +462,8 @@ export var fixColumnStructure = function fixColumnStructure(state) {
|
|
|
468
462
|
var node = state.doc.nodeAt(pos);
|
|
469
463
|
if (node) {
|
|
470
464
|
if (node.childCount !== getWidthsForPreset(selectedLayout).length) {
|
|
471
|
-
//
|
|
472
|
-
|
|
473
|
-
if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && isValidLayoutWidthDistributions(node)) {
|
|
465
|
+
// Valid custom widths may use a different column count from the selected preset.
|
|
466
|
+
if (editorExperiment('advanced_layouts', true) && isValidLayoutWidthDistributions(node)) {
|
|
474
467
|
return;
|
|
475
468
|
}
|
|
476
469
|
return forceSectionToPresetLayout(state, node, pos, selectedLayout);
|
|
@@ -269,7 +269,7 @@ export default (function (options, editorAnalyticsAPI) {
|
|
|
269
269
|
decorations: function decorations(state) {
|
|
270
270
|
var layoutState = pluginKey.getState(state);
|
|
271
271
|
var isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
|
|
272
|
-
if (editorExperiment('advanced_layouts', true) &&
|
|
272
|
+
if (editorExperiment('advanced_layouts', true) && isLayoutResizingPluginAvailable) {
|
|
273
273
|
var dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
|
|
274
274
|
var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
|
|
275
275
|
var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
|
|
@@ -358,7 +358,7 @@ export default (function (options, editorAnalyticsAPI) {
|
|
|
358
358
|
}
|
|
359
359
|
|
|
360
360
|
// Skip fixing column sizes for column resize drag transactions
|
|
361
|
-
if (
|
|
361
|
+
if (prevTr.getMeta('layoutColumnResize')) {
|
|
362
362
|
return;
|
|
363
363
|
}
|
|
364
364
|
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
3
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
5
|
-
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; }
|
|
6
|
-
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; }
|
|
7
4
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
8
5
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
9
6
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
10
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
11
8
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
12
9
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
10
|
import { LayoutSectionView } from '../nodeviews';
|
|
15
11
|
import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
|
|
16
12
|
export var pluginKey = new PluginKey('layoutResizingPlugin');
|
|
@@ -94,7 +90,7 @@ export default (function (options, pluginInjectionApi, portalProviderAPI, eventD
|
|
|
94
90
|
return new SafePlugin({
|
|
95
91
|
key: pluginKey,
|
|
96
92
|
props: {
|
|
97
|
-
nodeViews:
|
|
93
|
+
nodeViews: {
|
|
98
94
|
layoutSection: function layoutSection(node, view, getPos) {
|
|
99
95
|
// Both experiments are required: the vanilla view renders no React, so it
|
|
100
96
|
// cannot mount the <LayoutBreakoutResizer> that LayoutSectionView.render()
|
|
@@ -116,12 +112,11 @@ export default (function (options, pluginInjectionApi, portalProviderAPI, eventD
|
|
|
116
112
|
options: options,
|
|
117
113
|
intl: intl
|
|
118
114
|
}).init();
|
|
119
|
-
}
|
|
120
|
-
}, editorExperiment('platform_editor_layout_column_resize_handle', true) || isSSR() ? {
|
|
115
|
+
},
|
|
121
116
|
layoutColumn: function layoutColumn(node, view, getPos) {
|
|
122
117
|
return new LayoutColumnView(node, view, getPos);
|
|
123
118
|
}
|
|
124
|
-
}
|
|
119
|
+
}
|
|
125
120
|
}
|
|
126
121
|
});
|
|
127
122
|
});
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
|
|
5
4
|
import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
|
|
5
|
+
import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
|
|
6
|
+
import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
|
|
7
|
+
import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
|
|
8
|
+
import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
|
|
6
9
|
import { selectIntoLayoutSection } from '../../layoutPlugin';
|
|
7
10
|
import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
|
|
8
11
|
var icons = {
|
|
9
|
-
2:
|
|
10
|
-
3:
|
|
11
|
-
4:
|
|
12
|
-
5:
|
|
12
|
+
2: LayoutTwoColumnsIcon,
|
|
13
|
+
3: LayoutThreeColumnsIcon,
|
|
14
|
+
4: LayoutFourColumnsIcon,
|
|
15
|
+
5: LayoutFiveColumnsIcon
|
|
13
16
|
};
|
|
14
17
|
export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
|
|
15
18
|
var api = _ref.api,
|
|
@@ -38,7 +41,9 @@ export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref)
|
|
|
38
41
|
return tr;
|
|
39
42
|
}, [api, columnCount]);
|
|
40
43
|
return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
|
|
41
|
-
iconBefore: /*#__PURE__*/React.createElement(Icon,
|
|
44
|
+
iconBefore: /*#__PURE__*/React.createElement(Icon, {
|
|
45
|
+
label: ""
|
|
46
|
+
}),
|
|
42
47
|
onSelect: onSelect,
|
|
43
48
|
title: formatMessage(title)
|
|
44
49
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "17.0
|
|
3
|
+
"version": "17.1.0",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
],
|
|
22
22
|
"atlaskit:src": "src/index.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@atlaskit/adf-schema": "^57.
|
|
25
|
-
"@atlaskit/css": "^1.
|
|
24
|
+
"@atlaskit/adf-schema": "^57.2.0",
|
|
25
|
+
"@atlaskit/css": "^1.1.0",
|
|
26
26
|
"@atlaskit/editor-plugin-analytics": "^16.0.0",
|
|
27
27
|
"@atlaskit/editor-plugin-block-controls": "^17.1.0",
|
|
28
28
|
"@atlaskit/editor-plugin-block-menu": "^15.0.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@atlaskit/icon-lab": "^7.7.0",
|
|
44
44
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^163.0.0",
|
|
47
47
|
"@atlaskit/tokens": "^16.8.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@emotion/react": "^11.7.1",
|