@atlaskit/editor-plugin-layout 27.0.4 → 27.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/layoutPlugin.js +34 -32
- package/dist/cjs/nodeviews/index.js +4 -4
- package/dist/cjs/nodeviews/layoutSectionView.js +8 -12
- package/dist/cjs/pm-plugins/actions.js +56 -54
- package/dist/cjs/pm-plugins/column-resize-divider.js +6 -6
- package/dist/cjs/pm-plugins/keymap.js +8 -7
- package/dist/cjs/pm-plugins/main.js +7 -6
- package/dist/cjs/pm-plugins/resizing.js +2 -2
- package/dist/cjs/pm-plugins/utils/index.js +1 -1
- package/dist/cjs/ui/LayoutBlockMenuItem.js +7 -7
- package/dist/cjs/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +10 -8
- package/dist/cjs/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +8 -7
- package/dist/cjs/ui/LayoutColumnMenu/InsertColumnDropdownItem.js +13 -10
- package/dist/cjs/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js +2 -2
- package/dist/cjs/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js +6 -5
- package/dist/cjs/ui/LayoutColumnMenu/components.js +7 -7
- package/dist/cjs/ui/LayoutColumnMenu/index.js +21 -19
- package/dist/cjs/ui/LayoutColumnMenu/useSelectedLayoutColumns.js +2 -2
- package/dist/cjs/ui/LayoutSSRReactContextsProvider.js +2 -2
- package/dist/cjs/ui/global-styles.js +2 -2
- package/dist/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js +5 -5
- package/dist/cjs/ui/quick-insert/getLayoutQuickInsertComponents.js +10 -9
- package/dist/cjs/ui/toolbar.js +28 -29
- package/dist/es2019/layoutPlugin.js +6 -4
- package/dist/es2019/nodeviews/index.js +2 -2
- package/dist/es2019/nodeviews/layoutSectionView.js +7 -11
- package/dist/es2019/pm-plugins/actions.js +5 -3
- package/dist/es2019/pm-plugins/column-resize-divider.js +1 -1
- package/dist/es2019/pm-plugins/keymap.js +3 -2
- package/dist/es2019/pm-plugins/main.js +3 -2
- package/dist/es2019/pm-plugins/resizing.js +1 -1
- package/dist/es2019/pm-plugins/utils/index.js +1 -1
- package/dist/es2019/ui/LayoutBlockMenuItem.js +3 -3
- package/dist/es2019/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +5 -3
- package/dist/es2019/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +4 -3
- package/dist/es2019/ui/LayoutColumnMenu/InsertColumnDropdownItem.js +6 -3
- package/dist/es2019/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js +1 -1
- package/dist/es2019/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js +3 -2
- package/dist/es2019/ui/LayoutColumnMenu/components.js +2 -2
- package/dist/es2019/ui/LayoutColumnMenu/index.js +10 -9
- package/dist/es2019/ui/LayoutColumnMenu/useSelectedLayoutColumns.js +1 -1
- package/dist/es2019/ui/LayoutSSRReactContextsProvider.js +1 -1
- package/dist/es2019/ui/global-styles.js +1 -1
- package/dist/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js +1 -1
- package/dist/es2019/ui/quick-insert/getLayoutQuickInsertComponents.js +2 -1
- package/dist/es2019/ui/toolbar.js +4 -3
- package/dist/esm/layoutPlugin.js +6 -4
- package/dist/esm/nodeviews/index.js +2 -2
- package/dist/esm/nodeviews/layoutSectionView.js +7 -11
- package/dist/esm/pm-plugins/actions.js +5 -3
- package/dist/esm/pm-plugins/column-resize-divider.js +1 -1
- package/dist/esm/pm-plugins/keymap.js +3 -2
- package/dist/esm/pm-plugins/main.js +3 -2
- package/dist/esm/pm-plugins/resizing.js +1 -1
- package/dist/esm/pm-plugins/utils/index.js +1 -1
- package/dist/esm/ui/LayoutBlockMenuItem.js +3 -3
- package/dist/esm/ui/LayoutColumnMenu/DeleteColumnDropdownItem.js +5 -3
- package/dist/esm/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +4 -3
- package/dist/esm/ui/LayoutColumnMenu/InsertColumnDropdownItem.js +6 -3
- package/dist/esm/ui/LayoutColumnMenu/VerticalAlignDropdownItem.js +1 -1
- package/dist/esm/ui/LayoutColumnMenu/VerticalAlignNestedMenu.js +3 -2
- package/dist/esm/ui/LayoutColumnMenu/components.js +2 -2
- package/dist/esm/ui/LayoutColumnMenu/index.js +10 -9
- package/dist/esm/ui/LayoutColumnMenu/useSelectedLayoutColumns.js +1 -1
- package/dist/esm/ui/LayoutSSRReactContextsProvider.js +1 -1
- package/dist/esm/ui/global-styles.js +1 -1
- package/dist/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js +1 -1
- package/dist/esm/ui/quick-insert/getLayoutQuickInsertComponents.js +2 -1
- package/dist/esm/ui/toolbar.js +4 -3
- package/dist/types/layoutPluginType.d.ts +15 -13
- package/dist/types/nodeviews/index.d.ts +3 -2
- package/dist/types/pm-plugins/actions.d.ts +6 -3
- package/dist/types/pm-plugins/column-resize-divider.d.ts +1 -1
- package/dist/types/pm-plugins/keymap.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +1 -1
- package/dist/types/pm-plugins/resizing.d.ts +2 -2
- package/dist/types/types/index.d.ts +2 -1
- package/dist/types/ui/LayoutBlockMenuItem.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/DeleteColumnDropdownItem.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/InsertColumnDropdownItem.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/VerticalAlignDropdownItem.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/VerticalAlignNestedMenu.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/components.d.ts +3 -2
- package/dist/types/ui/LayoutColumnMenu/index.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/keys.d.ts +1 -1
- package/dist/types/ui/LayoutColumnMenu/useSelectedLayoutColumns.d.ts +1 -1
- package/dist/types/ui/quick-insert/LayoutQuickInsertMenuItem.d.ts +1 -1
- package/dist/types/ui/quick-insert/getLayoutQuickInsertComponents.d.ts +1 -1
- package/dist/types/ui/toolbar.d.ts +2 -1
- package/package.json +1 -4
|
@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.DEFAULT_LAYOUT = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var
|
|
10
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
11
11
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
12
12
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
13
|
+
var _selection2 = require("@atlaskit/editor-common/selection/gap-cursor/selection");
|
|
13
14
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
14
15
|
var _keymap = require("@atlaskit/editor-prosemirror/keymap");
|
|
15
16
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
@@ -45,7 +46,7 @@ var applyBlankSpaceGapCursor = function applyBlankSpaceGapCursor(view, event) {
|
|
|
45
46
|
var $pos = view.state.doc.resolve(gapTarget.pos);
|
|
46
47
|
// A paragraph child takes a TextSelection (caret at the edge) rather than a gap cursor.
|
|
47
48
|
var isParagraphTarget = (0, _utils3.isParagraphBlankSpaceTarget)(view, gapTarget);
|
|
48
|
-
var nextSelection = isParagraphTarget ? _state.TextSelection.near($pos, gapTarget.side === 'left' ? 1 : -1) : new
|
|
49
|
+
var nextSelection = isParagraphTarget ? _state.TextSelection.near($pos, gapTarget.side === 'left' ? 1 : -1) : new _selection2.GapCursorSelection($pos, gapTarget.side === 'left' ? _selection.Side.LEFT : _selection.Side.RIGHT);
|
|
49
50
|
// Idempotency guard: `mousedown` already placed this selection, but the browser still
|
|
50
51
|
// fires `mouseup`, so `handleClick`/`handleClickOn` re-run for the same click. Consume it
|
|
51
52
|
// without re-dispatching (which would add a redundant undo entry).
|
|
@@ -131,16 +132,16 @@ var fireLayoutColumnMenuOpenedAnalytics = function fireLayoutColumnMenuOpenedAna
|
|
|
131
132
|
startIndex = selectedLayoutColumnsResult.startIndex,
|
|
132
133
|
endIndex = selectedLayoutColumnsResult.endIndex;
|
|
133
134
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent({
|
|
134
|
-
action:
|
|
135
|
-
actionSubject:
|
|
135
|
+
action: _enums.ACTION.OPENED,
|
|
136
|
+
actionSubject: _enums.ACTION_SUBJECT.LAYOUT_COLUMN_MENU,
|
|
136
137
|
attributes: {
|
|
137
138
|
columnCount: layoutSectionNode.childCount,
|
|
138
139
|
endIndex: endIndex,
|
|
139
|
-
inputMethod: openedViaKeyboard ?
|
|
140
|
+
inputMethod: openedViaKeyboard ? _enums.INPUT_METHOD.KEYBOARD : _enums.INPUT_METHOD.MOUSE,
|
|
140
141
|
selectedCount: selectedLayoutColumns.length,
|
|
141
142
|
startIndex: startIndex
|
|
142
143
|
},
|
|
143
|
-
eventType:
|
|
144
|
+
eventType: _enums.EVENT_TYPE.UI
|
|
144
145
|
});
|
|
145
146
|
};
|
|
146
147
|
var reduceLayoutColumnMenuState = function reduceLayoutColumnMenuState(pluginState, action) {
|
|
@@ -8,7 +8,7 @@ exports.pluginKey = exports.default = void 0;
|
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
10
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
11
|
-
var
|
|
11
|
+
var _isSsr = require("@atlaskit/editor-common/is-ssr");
|
|
12
12
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
13
13
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
14
14
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -27,7 +27,7 @@ var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin')
|
|
|
27
27
|
* PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
|
|
28
28
|
*/
|
|
29
29
|
var isLayoutElementLike = function isLayoutElementLike(element) {
|
|
30
|
-
if ((0,
|
|
30
|
+
if ((0, _isSsr.isSSR)()) {
|
|
31
31
|
// In SSR environments, `HTMLElement` is undefined globally so a plain
|
|
32
32
|
// `instanceof HTMLElement` check is always `false`. That makes the
|
|
33
33
|
// `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.selectIntoLayout = exports.isParagraphBlankSpaceTarget = exports.getMaybeLayoutSection = exports.getGapCursorTargetForBlankSpaceClick = void 0;
|
|
7
|
-
var _selection = require("@atlaskit/editor-common/selection");
|
|
7
|
+
var _selection = require("@atlaskit/editor-common/selection/gap-cursor/selection");
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
10
10
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
@@ -10,9 +10,9 @@ require("./LayoutBlockMenuItem.compiled.css");
|
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
var _reactIntl = require("react-intl");
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
13
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
14
|
+
var _blockMenu = require("@atlaskit/editor-common/messages/block-menu");
|
|
15
|
+
var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
|
|
16
16
|
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
|
|
17
17
|
var styles = {
|
|
18
18
|
svgOverflow: "_1wrmewfl _172sewfl"
|
|
@@ -24,8 +24,8 @@ var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
|
|
|
24
24
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
25
25
|
formatMessage = _useIntl.formatMessage;
|
|
26
26
|
var handleClick = function handleClick(event) {
|
|
27
|
-
var triggeredFrom = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ?
|
|
28
|
-
var inputMethod =
|
|
27
|
+
var triggeredFrom = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? _enums.INPUT_METHOD.KEYBOARD : _enums.INPUT_METHOD.MOUSE;
|
|
28
|
+
var inputMethod = _enums.INPUT_METHOD.BLOCK_MENU;
|
|
29
29
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
30
30
|
var _api$blockMenu;
|
|
31
31
|
var tr = _ref2.tr;
|
|
@@ -40,7 +40,7 @@ var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
|
|
|
40
40
|
}) : null;
|
|
41
41
|
});
|
|
42
42
|
};
|
|
43
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
43
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
|
|
44
44
|
onClick: handleClick,
|
|
45
45
|
elemBefore: /*#__PURE__*/_react.default.createElement("span", {
|
|
46
46
|
className: (0, _runtime.ax)([styles.svgOverflow])
|
|
@@ -48,7 +48,7 @@ var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
|
|
|
48
48
|
label: "",
|
|
49
49
|
size: "small"
|
|
50
50
|
}))
|
|
51
|
-
}, formatMessage(
|
|
51
|
+
}, formatMessage(_blockMenu.messages.layout));
|
|
52
52
|
};
|
|
53
53
|
var createLayoutBlockMenuItem = exports.createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
|
|
54
54
|
return function () {
|
|
@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.DeleteColumnDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
10
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
11
11
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
13
|
+
var _deleteIcon = require("@atlaskit/editor-toolbar/delete-icon");
|
|
14
|
+
var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
|
|
15
|
+
var _toolbarKeyboardShortcutHint = require("@atlaskit/editor-toolbar/toolbar-keyboard-shortcut-hint");
|
|
14
16
|
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
|
|
15
17
|
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
18
|
var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function DeleteColumnDropdownItem(_ref) {
|
|
@@ -32,7 +34,7 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
|
|
|
32
34
|
var onClick = (0, _react.useCallback)(function () {
|
|
33
35
|
var _api$layout2, _api$core2;
|
|
34
36
|
var deleteCommand = api === null || api === void 0 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.deleteLayoutColumn({
|
|
35
|
-
inputMethod:
|
|
37
|
+
inputMethod: _enums.INPUT_METHOD.LAYOUT_COLUMN_MENU
|
|
36
38
|
});
|
|
37
39
|
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (props) {
|
|
38
40
|
var _api$layout3;
|
|
@@ -52,22 +54,22 @@ var DeleteColumnDropdownItem = exports.DeleteColumnDropdownItem = function Delet
|
|
|
52
54
|
return null;
|
|
53
55
|
}
|
|
54
56
|
var selectedColumnCount = selectedLayoutColumns.selectedLayoutColumns.length;
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
|
|
56
58
|
ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.deleteColumn),
|
|
57
59
|
onClick: onClick,
|
|
58
60
|
onFocus: showDangerPreview,
|
|
59
61
|
onMouseEnter: showDangerPreview,
|
|
60
62
|
onBlur: hideDangerPreview,
|
|
61
63
|
onMouseLeave: hideDangerPreview,
|
|
62
|
-
elemBefore: /*#__PURE__*/_react.default.createElement(
|
|
64
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_deleteIcon.DeleteIcon, {
|
|
63
65
|
color: "currentColor",
|
|
64
66
|
label: "",
|
|
65
67
|
size: "small"
|
|
66
68
|
}),
|
|
67
|
-
elemAfter: /*#__PURE__*/_react.default.createElement(
|
|
69
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_toolbarKeyboardShortcutHint.ToolbarKeyboardShortcutHint, {
|
|
68
70
|
shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
|
|
69
71
|
})
|
|
70
|
-
}, formatMessage(
|
|
72
|
+
}, formatMessage(_layout.toolbarMessages.deleteColumn, {
|
|
71
73
|
count: selectedColumnCount
|
|
72
74
|
}));
|
|
73
75
|
};
|
|
@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.DistributeColumnsDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
10
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
11
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
12
|
+
var _columnsDistributeIcon = require("@atlaskit/editor-toolbar/columns-distribute-icon");
|
|
13
|
+
var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
|
|
13
14
|
var _layoutColumnDistribution = require("../../pm-plugins/utils/layout-column-distribution");
|
|
14
15
|
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
|
|
15
16
|
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); }
|
|
@@ -25,7 +26,7 @@ var DistributeColumnsDropdownItem = exports.DistributeColumnsDropdownItem = func
|
|
|
25
26
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
|
|
26
27
|
var _api$layout, _api$layout2;
|
|
27
28
|
var tr = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.distributeLayoutColumns({
|
|
28
|
-
inputMethod:
|
|
29
|
+
inputMethod: _enums.INPUT_METHOD.LAYOUT_COLUMN_MENU
|
|
29
30
|
})(props);
|
|
30
31
|
if (!tr) {
|
|
31
32
|
return null;
|
|
@@ -50,13 +51,13 @@ var DistributeColumnsDropdownItem = exports.DistributeColumnsDropdownItem = func
|
|
|
50
51
|
if (selectedLayoutColumns === undefined || selectedLayoutColumns.length < 2) {
|
|
51
52
|
return null;
|
|
52
53
|
}
|
|
53
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
|
|
54
55
|
onClick: handleClick,
|
|
55
56
|
isDisabled: isAlreadyUniform,
|
|
56
|
-
elemBefore: /*#__PURE__*/_react.default.createElement(
|
|
57
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_columnsDistributeIcon.TableColumnsDistributeIcon, {
|
|
57
58
|
color: "currentColor",
|
|
58
59
|
label: "",
|
|
59
60
|
size: "small"
|
|
60
61
|
})
|
|
61
|
-
}, formatMessage(
|
|
62
|
+
}, formatMessage(_layout.toolbarMessages.distributeColumns));
|
|
62
63
|
};
|
|
@@ -7,22 +7,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.InsertColumnDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
10
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
11
11
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
13
|
+
var _columnAddLeftIcon = require("@atlaskit/editor-toolbar/column-add-left-icon");
|
|
14
|
+
var _columnAddRightIcon = require("@atlaskit/editor-toolbar/column-add-right-icon");
|
|
15
|
+
var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
|
|
16
|
+
var _toolbarKeyboardShortcutHint = require("@atlaskit/editor-toolbar/toolbar-keyboard-shortcut-hint");
|
|
14
17
|
var _actions = require("../../pm-plugins/actions");
|
|
15
18
|
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
|
|
16
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); }
|
|
17
20
|
var INSERT_COLUMN_OPTIONS = {
|
|
18
21
|
left: {
|
|
19
|
-
Icon:
|
|
20
|
-
label:
|
|
22
|
+
Icon: _columnAddLeftIcon.TableColumnAddLeftIcon,
|
|
23
|
+
label: _layout.toolbarMessages.addColumnLeft,
|
|
21
24
|
side: 'left'
|
|
22
25
|
},
|
|
23
26
|
right: {
|
|
24
|
-
Icon:
|
|
25
|
-
label:
|
|
27
|
+
Icon: _columnAddRightIcon.TableColumnAddRightIcon,
|
|
28
|
+
label: _layout.toolbarMessages.addColumnRight,
|
|
26
29
|
side: 'right'
|
|
27
30
|
}
|
|
28
31
|
};
|
|
@@ -44,7 +47,7 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
|
|
|
44
47
|
var _api$layout, _api$core;
|
|
45
48
|
var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn({
|
|
46
49
|
side: side,
|
|
47
|
-
inputMethod:
|
|
50
|
+
inputMethod: _enums.INPUT_METHOD.LAYOUT_COLUMN_MENU
|
|
48
51
|
});
|
|
49
52
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
|
|
50
53
|
var _api$layout2;
|
|
@@ -63,14 +66,14 @@ var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function Inser
|
|
|
63
66
|
if (!canInsertColumn) {
|
|
64
67
|
return null;
|
|
65
68
|
}
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
|
|
67
70
|
ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut),
|
|
68
71
|
elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
|
|
69
72
|
color: "currentColor",
|
|
70
73
|
label: "",
|
|
71
74
|
size: "small"
|
|
72
75
|
}),
|
|
73
|
-
elemAfter: /*#__PURE__*/_react.default.createElement(
|
|
76
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_toolbarKeyboardShortcutHint.ToolbarKeyboardShortcutHint, {
|
|
74
77
|
shortcut: (_tooltip = (0, _keymaps.tooltip)(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
|
|
75
78
|
}),
|
|
76
79
|
onClick: onClick
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.VerticalAlignDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
10
|
+
var _toolbarDropdownItem = require("@atlaskit/editor-toolbar/toolbar-dropdown-item");
|
|
11
11
|
var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
|
|
12
12
|
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
|
|
13
13
|
var _verticalAlignIcons = require("./verticalAlignIcons");
|
|
@@ -31,7 +31,7 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
|
|
|
31
31
|
valign: value
|
|
32
32
|
}));
|
|
33
33
|
}, [api, value]);
|
|
34
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItem.ToolbarDropdownItem, {
|
|
35
35
|
elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
|
|
36
36
|
label: "",
|
|
37
37
|
size: "small"
|
|
@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.VerticalAlignNestedMenu = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
10
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
11
|
+
var _nestedDropdownRightIcon = require("@atlaskit/editor-toolbar/nested-dropdown-right-icon");
|
|
12
|
+
var _toolbarNestedDropdownMenu = require("@atlaskit/editor-toolbar/toolbar-nested-dropdown-menu");
|
|
12
13
|
var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
|
|
13
14
|
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
|
|
14
15
|
var _verticalAlignIcons = require("./verticalAlignIcons");
|
|
@@ -32,15 +33,15 @@ var VerticalAlignNestedMenu = exports.VerticalAlignNestedMenu = function Vertica
|
|
|
32
33
|
return firstValign;
|
|
33
34
|
}, [selectedLayoutColumns]);
|
|
34
35
|
var TriggerIcon = currentValign ? _verticalAlignIcons.VERTICAL_ALIGN_ICONS[currentValign] : _verticalAlignIcons.VERTICAL_ALIGN_ICONS.middle;
|
|
35
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarNestedDropdownMenu.ToolbarNestedDropdownMenu, {
|
|
36
37
|
elemBefore: /*#__PURE__*/_react.default.createElement(TriggerIcon, {
|
|
37
38
|
label: "",
|
|
38
39
|
size: "small"
|
|
39
40
|
}),
|
|
40
|
-
elemAfter: /*#__PURE__*/_react.default.createElement(
|
|
41
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_nestedDropdownRightIcon.NestedDropdownRightIcon, {
|
|
41
42
|
label: "",
|
|
42
43
|
size: "small"
|
|
43
44
|
}),
|
|
44
|
-
text: formatMessage(
|
|
45
|
+
text: formatMessage(_layout.toolbarMessages.alignColumn)
|
|
45
46
|
}, children);
|
|
46
47
|
};
|
|
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
11
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
12
12
|
var _uiReact = require("@atlaskit/editor-common/ui-react");
|
|
13
|
-
var
|
|
13
|
+
var _toolbarDropdownItemSection = require("@atlaskit/editor-toolbar/toolbar-dropdown-item-section");
|
|
14
14
|
var _toolbarMenuContainer = require("@atlaskit/editor-toolbar/toolbar-menu-container");
|
|
15
15
|
var _DeleteColumnDropdownItem = require("./DeleteColumnDropdownItem");
|
|
16
16
|
var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
|
|
@@ -31,7 +31,7 @@ var LayoutColumnMenuContainer = function LayoutColumnMenuContainer(_ref) {
|
|
|
31
31
|
var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
|
|
32
32
|
'menu-section': function menuSection(_ref2) {
|
|
33
33
|
var children = _ref2.children;
|
|
34
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItemSection.ToolbarDropdownItemSection, null, children);
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref3) {
|
|
@@ -89,7 +89,7 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
|
|
|
89
89
|
component: function component() {
|
|
90
90
|
return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
|
|
91
91
|
api: api,
|
|
92
|
-
label:
|
|
92
|
+
label: _layout.toolbarMessages.alignColumnTop,
|
|
93
93
|
value: "top"
|
|
94
94
|
});
|
|
95
95
|
},
|
|
@@ -100,7 +100,7 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
|
|
|
100
100
|
component: function component() {
|
|
101
101
|
return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
|
|
102
102
|
api: api,
|
|
103
|
-
label:
|
|
103
|
+
label: _layout.toolbarMessages.alignColumnMiddle,
|
|
104
104
|
value: "middle"
|
|
105
105
|
});
|
|
106
106
|
},
|
|
@@ -111,7 +111,7 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
|
|
|
111
111
|
component: function component() {
|
|
112
112
|
return /*#__PURE__*/_react.default.createElement(_VerticalAlignDropdownItem.VerticalAlignDropdownItem, {
|
|
113
113
|
api: api,
|
|
114
|
-
label:
|
|
114
|
+
label: _layout.toolbarMessages.alignColumnBottom,
|
|
115
115
|
value: "bottom"
|
|
116
116
|
});
|
|
117
117
|
},
|
|
@@ -122,7 +122,7 @@ var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = func
|
|
|
122
122
|
_objectSpread(_objectSpread({}, _keys.LAYOUT_COLUMN_DANGER_SECTION), {}, {
|
|
123
123
|
component: function component(_ref5) {
|
|
124
124
|
var children = _ref5.children;
|
|
125
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_toolbarDropdownItemSection.ToolbarDropdownItemSection, {
|
|
126
126
|
hasSeparator: true
|
|
127
127
|
}, children);
|
|
128
128
|
},
|
|
@@ -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,21 +9,22 @@ exports.LayoutColumnMenu = void 0;
|
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
10
|
var _bindEventListener = require("bind-event-listener");
|
|
10
11
|
var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
12
|
+
var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
|
|
13
|
+
var _dragHandle = require("@atlaskit/editor-common/styles/drag-handle");
|
|
14
|
+
var _ArrowKeyNavigationProvider = require("@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider");
|
|
15
|
+
var _types = require("@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider/types");
|
|
16
|
+
var _withReactEditorViewOuterListeners = _interopRequireDefault(require("@atlaskit/editor-common/ui-react/with-react-editor-view-outer-listeners"));
|
|
17
|
+
var _UserIntentPopupWrapper = require("@atlaskit/editor-common/UserIntentPopupWrapper");
|
|
18
|
+
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
|
|
19
|
+
var _constants = require("@atlaskit/editor-shared-styles/constants");
|
|
20
|
+
var _toolbarDropdownMenuContext = require("@atlaskit/editor-toolbar/toolbar-dropdown-menu-context");
|
|
21
|
+
var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
|
|
20
22
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
21
23
|
var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
|
|
22
24
|
var _components = require("./components");
|
|
23
25
|
var _keys = require("./keys");
|
|
24
26
|
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); }
|
|
25
|
-
var PopupWithListeners = (0,
|
|
27
|
+
var PopupWithListeners = (0, _withReactEditorViewOuterListeners.default)(_Popup.default);
|
|
26
28
|
var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
|
|
27
29
|
var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
|
|
28
30
|
var LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];
|
|
@@ -41,7 +43,7 @@ var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, s
|
|
|
41
43
|
return null;
|
|
42
44
|
}
|
|
43
45
|
var dragHandleContainer = (_columnDomRef$parentE = columnDomRef.parentElement) === null || _columnDomRef$parentE === void 0 ? void 0 : _columnDomRef$parentE.querySelector(':scope > [data-blocks-drag-handle-container]');
|
|
44
|
-
return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(
|
|
46
|
+
return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(_dragHandle.DRAG_HANDLE_SELECTOR);
|
|
45
47
|
};
|
|
46
48
|
var focusTrap = {
|
|
47
49
|
initialFocus: undefined
|
|
@@ -53,7 +55,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
|
|
|
53
55
|
mountTo = _ref.mountTo,
|
|
54
56
|
boundariesElement = _ref.boundariesElement,
|
|
55
57
|
scrollableElement = _ref.scrollableElement;
|
|
56
|
-
var _useSharedPluginState = (0,
|
|
58
|
+
var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
|
|
57
59
|
var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
|
|
58
60
|
return {
|
|
59
61
|
isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
|
|
@@ -80,7 +82,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
|
|
|
80
82
|
// Clicking a drag handle should let the drag handle's own click handler
|
|
81
83
|
// update selection/menu state. Treating it as a generic outside click
|
|
82
84
|
// races that transaction and can immediately close the layout column menu.
|
|
83
|
-
if (event.target instanceof Element && event.target.closest(
|
|
85
|
+
if (event.target instanceof Element && event.target.closest(_dragHandle.DRAG_HANDLE_SELECTOR)) {
|
|
84
86
|
return;
|
|
85
87
|
}
|
|
86
88
|
closeLayoutColumnMenu();
|
|
@@ -152,7 +154,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
|
|
|
152
154
|
mountTo: mountTo,
|
|
153
155
|
boundariesElement: boundariesElement,
|
|
154
156
|
scrollableElement: scrollableElement,
|
|
155
|
-
zIndex:
|
|
157
|
+
zIndex: _constants.akEditorFloatingOverlapPanelZIndex,
|
|
156
158
|
forcePlacement: true,
|
|
157
159
|
preventOverflow: true,
|
|
158
160
|
stick: true,
|
|
@@ -162,17 +164,17 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
|
|
|
162
164
|
focusTrap: openedViaKeyboard ? focusTrap : undefined
|
|
163
165
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
164
166
|
ref: menuWrapperRef
|
|
165
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
167
|
+
}, /*#__PURE__*/_react.default.createElement(_UserIntentPopupWrapper.UserIntentPopupWrapper, {
|
|
166
168
|
api: api,
|
|
167
169
|
userIntent: "layoutColumnMenuPopupOpen"
|
|
168
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
170
|
+
}, /*#__PURE__*/_react.default.createElement(_toolbarDropdownMenuContext.ToolbarDropdownMenuProvider, {
|
|
169
171
|
isOpen: isLayoutColumnMenuOpen,
|
|
170
172
|
setIsOpen: handleSetIsOpen
|
|
171
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
172
|
-
type:
|
|
173
|
+
}, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, {
|
|
174
|
+
type: _types.ArrowKeyNavigationType.MENU,
|
|
173
175
|
handleClose: handleArrowKeyNavigationClose,
|
|
174
176
|
disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
|
|
175
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
177
|
+
}, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
|
|
176
178
|
components: components,
|
|
177
179
|
fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
|
|
178
180
|
surface: _keys.LAYOUT_COLUMN_MENU
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useSelectedLayoutColumns = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
|
|
8
8
|
var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
|
|
9
9
|
var useSelectedLayoutColumns = exports.useSelectedLayoutColumns = function useSelectedLayoutColumns(api) {
|
|
10
|
-
return (0,
|
|
10
|
+
return (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['selection'], function (_ref) {
|
|
11
11
|
var selectionState = _ref.selectionState;
|
|
12
12
|
var selectedLayoutColumns = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) && (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(selectionState.selection);
|
|
13
13
|
return selectedLayoutColumns !== null && selectedLayoutColumns !== void 0 && selectedLayoutColumns.selectedLayoutColumns.length ? selectedLayoutColumns : undefined;
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.LayoutSSRReactContextsProvider = LayoutSSRReactContextsProvider;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
-
var
|
|
10
|
+
var _isSsr = require("@atlaskit/editor-common/is-ssr");
|
|
11
11
|
/**
|
|
12
12
|
* Wraps the layout section nodeview children with the editor's actual
|
|
13
13
|
* IntlProvider during SSR streaming (renderToStaticMarkup). This ensures any
|
|
@@ -22,7 +22,7 @@ var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
|
22
22
|
function LayoutSSRReactContextsProvider(_ref) {
|
|
23
23
|
var children = _ref.children,
|
|
24
24
|
intl = _ref.intl;
|
|
25
|
-
if (!(0,
|
|
25
|
+
if (!(0, _isSsr.isSSR)()) {
|
|
26
26
|
return children;
|
|
27
27
|
}
|
|
28
28
|
if (!intl) {
|
|
@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _reactIntl = require("react-intl");
|
|
12
|
-
var
|
|
12
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
13
13
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
14
14
|
/**
|
|
15
15
|
* @jsxRuntime classic
|
|
@@ -64,7 +64,7 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
|
|
|
64
64
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
65
65
|
formatMessage = _useIntl.formatMessage;
|
|
66
66
|
var placeholderStyle = (0, _react.useMemo)(function () {
|
|
67
|
-
var placeholderText = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ?
|
|
67
|
+
var placeholderText = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? _layout.toolbarMessages.controlslayoutPlaceholder : _layout.toolbarMessages.layoutPlaceholder;
|
|
68
68
|
return getPlaceholderStyle(formatMessage(placeholderText));
|
|
69
69
|
}, [formatMessage]);
|
|
70
70
|
var globalStyles = (0, _react.useMemo)(function () {
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.LayoutQuickInsertMenuItem = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactIntl = require("react-intl");
|
|
11
|
-
var
|
|
11
|
+
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
|
|
12
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
13
|
var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
|
|
14
14
|
var _messages2 = require("@atlaskit/editor-common/quick-insert/messages");
|
|
@@ -48,14 +48,14 @@ var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function Lay
|
|
|
48
48
|
source = _ref2.source;
|
|
49
49
|
var tr = insert((0, _actions.createMultiColumnLayoutSection)(editorView.state, columnCount));
|
|
50
50
|
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
|
|
51
|
-
action:
|
|
52
|
-
actionSubject:
|
|
53
|
-
actionSubjectId:
|
|
51
|
+
action: _enums.ACTION.INSERTED,
|
|
52
|
+
actionSubject: _enums.ACTION_SUBJECT.DOCUMENT,
|
|
53
|
+
actionSubjectId: _enums.ACTION_SUBJECT_ID.LAYOUT,
|
|
54
54
|
attributes: {
|
|
55
55
|
columnCount: columnCount,
|
|
56
56
|
inputMethod: source
|
|
57
57
|
},
|
|
58
|
-
eventType:
|
|
58
|
+
eventType: _enums.EVENT_TYPE.TRACK
|
|
59
59
|
})(tr);
|
|
60
60
|
(0, _layoutPlugin.selectIntoLayoutSection)(tr);
|
|
61
61
|
return tr;
|
|
@@ -6,51 +6,52 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.getLayoutQuickInsertComponents = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var
|
|
9
|
+
var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
|
|
10
|
+
var _layout = require("@atlaskit/editor-common/messages/layout");
|
|
10
11
|
var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
|
|
11
12
|
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
|
|
12
13
|
var _rank = require("@atlaskit/editor-common/quick-insert/rank");
|
|
13
14
|
var _LayoutQuickInsertMenuItem = require("./LayoutQuickInsertMenuItem");
|
|
14
15
|
var layoutItems = [{
|
|
15
16
|
columnCount: 2,
|
|
16
|
-
description:
|
|
17
|
+
description: _insertBlock.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
|
|
17
18
|
item: _keys.TWO_COLUMNS_LAYOUT_MENU_ITEM,
|
|
18
19
|
keyword: 'two column',
|
|
19
20
|
previewImageUrls: {
|
|
20
21
|
light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVMM.png',
|
|
21
22
|
dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJY.png'
|
|
22
23
|
},
|
|
23
|
-
title:
|
|
24
|
+
title: _layout.toolbarMessages.twoColumnsAdvancedLayout
|
|
24
25
|
}, {
|
|
25
26
|
columnCount: 3,
|
|
26
|
-
description:
|
|
27
|
+
description: _insertBlock.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
|
|
27
28
|
item: _keys.THREE_COLUMNS_LAYOUT_MENU_ITEM,
|
|
28
29
|
keyword: 'three column',
|
|
29
30
|
previewImageUrls: {
|
|
30
31
|
light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNM.png',
|
|
31
32
|
dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK3.png'
|
|
32
33
|
},
|
|
33
|
-
title:
|
|
34
|
+
title: _layout.toolbarMessages.threeColumnsAdvancedLayout
|
|
34
35
|
}, {
|
|
35
36
|
columnCount: 4,
|
|
36
|
-
description:
|
|
37
|
+
description: _insertBlock.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
|
|
37
38
|
item: _keys.FOUR_COLUMNS_LAYOUT_MENU_ITEM,
|
|
38
39
|
keyword: 'four column',
|
|
39
40
|
previewImageUrls: {
|
|
40
41
|
light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNI.png',
|
|
41
42
|
dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK5.png'
|
|
42
43
|
},
|
|
43
|
-
title:
|
|
44
|
+
title: _layout.toolbarMessages.fourColumns
|
|
44
45
|
}, {
|
|
45
46
|
columnCount: 5,
|
|
46
|
-
description:
|
|
47
|
+
description: _insertBlock.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
|
|
47
48
|
item: _keys.FIVE_COLUMNS_LAYOUT_MENU_ITEM,
|
|
48
49
|
keyword: 'five column',
|
|
49
50
|
previewImageUrls: {
|
|
50
51
|
light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNO.png',
|
|
51
52
|
dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJV.png'
|
|
52
53
|
},
|
|
53
|
-
title:
|
|
54
|
+
title: _layout.toolbarMessages.fiveColumns
|
|
54
55
|
}];
|
|
55
56
|
var getLayoutQuickInsertComponents = exports.getLayoutQuickInsertComponents = function getLayoutQuickInsertComponents(_ref) {
|
|
56
57
|
var api = _ref.api;
|