@atlaskit/editor-plugin-layout 10.1.1 → 10.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/layoutPlugin.js +7 -0
- package/dist/cjs/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +32 -0
- package/dist/cjs/ui/LayoutColumnMenu/components.js +46 -0
- package/dist/cjs/ui/LayoutColumnMenu/index.js +12 -2
- package/dist/es2019/layoutPlugin.js +7 -0
- package/dist/es2019/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +25 -0
- package/dist/es2019/ui/LayoutColumnMenu/components.js +46 -0
- package/dist/es2019/ui/LayoutColumnMenu/index.js +12 -2
- package/dist/esm/layoutPlugin.js +7 -0
- package/dist/esm/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.js +25 -0
- package/dist/esm/ui/LayoutColumnMenu/components.js +39 -0
- package/dist/esm/ui/LayoutColumnMenu/index.js +12 -2
- package/dist/types/layoutPluginType.d.ts +3 -1
- package/dist/types/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.d.ts +4 -0
- package/dist/types/ui/LayoutColumnMenu/components.d.ts +11 -0
- package/dist/types-ts4.5/layoutPluginType.d.ts +3 -1
- package/dist/types-ts4.5/ui/LayoutColumnMenu/DistributeColumnsDropdownItem.d.ts +4 -0
- package/dist/types-ts4.5/ui/LayoutColumnMenu/components.d.ts +11 -0
- package/package.json +9 -7
package/CHANGELOG.md
CHANGED
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -24,6 +24,7 @@ var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
|
|
|
24
24
|
var _globalStyles = require("./ui/global-styles");
|
|
25
25
|
var _LayoutBlockMenuItem = require("./ui/LayoutBlockMenuItem");
|
|
26
26
|
var _LayoutColumnMenu = require("./ui/LayoutColumnMenu");
|
|
27
|
+
var _components = require("./ui/LayoutColumnMenu/components");
|
|
27
28
|
var _toolbar = require("./ui/toolbar");
|
|
28
29
|
var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
|
|
29
30
|
|
|
@@ -79,6 +80,12 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
79
80
|
}
|
|
80
81
|
}]);
|
|
81
82
|
}
|
|
83
|
+
if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
84
|
+
var _api$uiControlRegistr;
|
|
85
|
+
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _components.getLayoutColumnMenuComponents)({
|
|
86
|
+
api: api
|
|
87
|
+
}));
|
|
88
|
+
}
|
|
82
89
|
return {
|
|
83
90
|
name: 'layout',
|
|
84
91
|
nodes: function nodes() {
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createDistributeColumnsDropdownItem = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactIntl = require("react-intl");
|
|
10
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
|
+
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
12
|
+
var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
|
|
13
|
+
var api = _ref.api;
|
|
14
|
+
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
15
|
+
formatMessage = _useIntl.formatMessage;
|
|
16
|
+
var handleClick = function handleClick() {
|
|
17
|
+
var _api$core, _api$layout;
|
|
18
|
+
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
|
|
19
|
+
isOpen: false
|
|
20
|
+
}));
|
|
21
|
+
};
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
23
|
+
onClick: handleClick
|
|
24
|
+
}, formatMessage(_messages.layoutMessages.distributeColumns));
|
|
25
|
+
};
|
|
26
|
+
var createDistributeColumnsDropdownItem = exports.createDistributeColumnsDropdownItem = function createDistributeColumnsDropdownItem(api) {
|
|
27
|
+
return function () {
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(DistributeColumnsDropdownItem, {
|
|
29
|
+
api: api
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.getLayoutColumnMenuComponents = exports.LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
11
|
+
var _DistributeColumnsDropdownItem = require("./DistributeColumnsDropdownItem");
|
|
12
|
+
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; }
|
|
13
|
+
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; }
|
|
14
|
+
var LAYOUT_COLUMN_MENU = exports.LAYOUT_COLUMN_MENU = {
|
|
15
|
+
key: 'layout-column-menu',
|
|
16
|
+
type: 'menu'
|
|
17
|
+
};
|
|
18
|
+
var LAYOUT_COLUMN_MENU_SECTION = {
|
|
19
|
+
key: 'layout-column-menu-section',
|
|
20
|
+
type: 'menu-section'
|
|
21
|
+
};
|
|
22
|
+
var DISTRIBUTE_COLUMNS_MENU_ITEM = {
|
|
23
|
+
key: 'layout-column-menu-distribute-columns-item',
|
|
24
|
+
type: 'menu-item'
|
|
25
|
+
};
|
|
26
|
+
var LAYOUT_COLUMN_MENU_RANK = (0, _defineProperty2.default)({}, LAYOUT_COLUMN_MENU_SECTION.key, 0);
|
|
27
|
+
var LAYOUT_COLUMN_MENU_SECTION_RANK = (0, _defineProperty2.default)({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 0);
|
|
28
|
+
var LAYOUT_COLUMN_MENU_FALLBACKS = exports.LAYOUT_COLUMN_MENU_FALLBACKS = {
|
|
29
|
+
'menu-section': function menuSection(_ref) {
|
|
30
|
+
var children = _ref.children;
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, children);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var getLayoutColumnMenuComponents = exports.getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
|
|
35
|
+
var api = _ref2.api;
|
|
36
|
+
return [_objectSpread({}, LAYOUT_COLUMN_MENU), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
|
|
37
|
+
parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
|
|
38
|
+
rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
|
|
39
|
+
})]
|
|
40
|
+
}), _objectSpread(_objectSpread({}, DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
|
|
41
|
+
component: (0, _DistributeColumnsDropdownItem.createDistributeColumnsDropdownItem)(api),
|
|
42
|
+
parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
|
|
43
|
+
rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
|
|
44
|
+
})]
|
|
45
|
+
})];
|
|
46
|
+
};
|
|
@@ -7,7 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.LayoutColumnMenu = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
10
|
+
var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
|
|
11
|
+
var _components = require("./components");
|
|
10
12
|
var LayoutColumnMenu = exports.LayoutColumnMenu = function LayoutColumnMenu(_ref) {
|
|
13
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
11
14
|
var api = _ref.api;
|
|
12
15
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout'], function (states) {
|
|
13
16
|
var _states$layoutState$i, _states$layoutState;
|
|
@@ -19,6 +22,13 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = function LayoutColumnMenu(_ref
|
|
|
19
22
|
if (!isLayoutColumnMenuOpen) {
|
|
20
23
|
return null;
|
|
21
24
|
}
|
|
22
|
-
var
|
|
23
|
-
|
|
25
|
+
var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_components.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
26
|
+
if (components.length === 0) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
|
|
30
|
+
components: components,
|
|
31
|
+
fallbacks: _components.LAYOUT_COLUMN_MENU_FALLBACKS,
|
|
32
|
+
surface: _components.LAYOUT_COLUMN_MENU
|
|
33
|
+
});
|
|
24
34
|
};
|
|
@@ -17,6 +17,7 @@ import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
|
|
|
17
17
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
18
18
|
import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
|
|
19
19
|
import { LayoutColumnMenu } from './ui/LayoutColumnMenu';
|
|
20
|
+
import { getLayoutColumnMenuComponents } from './ui/LayoutColumnMenu/components';
|
|
20
21
|
import { buildToolbar } from './ui/toolbar';
|
|
21
22
|
const LAYOUT_SECTION_NODE_NAME = 'layoutSection';
|
|
22
23
|
|
|
@@ -71,6 +72,12 @@ export const layoutPlugin = ({
|
|
|
71
72
|
}
|
|
72
73
|
}]);
|
|
73
74
|
}
|
|
75
|
+
if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
76
|
+
var _api$uiControlRegistr;
|
|
77
|
+
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
|
|
78
|
+
api
|
|
79
|
+
}));
|
|
80
|
+
}
|
|
74
81
|
return {
|
|
75
82
|
name: 'layout',
|
|
76
83
|
nodes() {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { layoutMessages } from '@atlaskit/editor-common/messages';
|
|
4
|
+
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
|
+
const DistributeColumnsDropdownItem = ({
|
|
6
|
+
api
|
|
7
|
+
}) => {
|
|
8
|
+
const {
|
|
9
|
+
formatMessage
|
|
10
|
+
} = useIntl();
|
|
11
|
+
const handleClick = () => {
|
|
12
|
+
var _api$core, _api$layout;
|
|
13
|
+
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
|
|
14
|
+
isOpen: false
|
|
15
|
+
}));
|
|
16
|
+
};
|
|
17
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
18
|
+
onClick: handleClick
|
|
19
|
+
}, formatMessage(layoutMessages.distributeColumns));
|
|
20
|
+
};
|
|
21
|
+
export const createDistributeColumnsDropdownItem = api => {
|
|
22
|
+
return () => /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
|
|
23
|
+
api: api
|
|
24
|
+
});
|
|
25
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
3
|
+
import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
|
|
4
|
+
export const LAYOUT_COLUMN_MENU = {
|
|
5
|
+
key: 'layout-column-menu',
|
|
6
|
+
type: 'menu'
|
|
7
|
+
};
|
|
8
|
+
const LAYOUT_COLUMN_MENU_SECTION = {
|
|
9
|
+
key: 'layout-column-menu-section',
|
|
10
|
+
type: 'menu-section'
|
|
11
|
+
};
|
|
12
|
+
const DISTRIBUTE_COLUMNS_MENU_ITEM = {
|
|
13
|
+
key: 'layout-column-menu-distribute-columns-item',
|
|
14
|
+
type: 'menu-item'
|
|
15
|
+
};
|
|
16
|
+
const LAYOUT_COLUMN_MENU_RANK = {
|
|
17
|
+
[LAYOUT_COLUMN_MENU_SECTION.key]: 0
|
|
18
|
+
};
|
|
19
|
+
const LAYOUT_COLUMN_MENU_SECTION_RANK = {
|
|
20
|
+
[DISTRIBUTE_COLUMNS_MENU_ITEM.key]: 0
|
|
21
|
+
};
|
|
22
|
+
export const LAYOUT_COLUMN_MENU_FALLBACKS = {
|
|
23
|
+
'menu-section': ({
|
|
24
|
+
children
|
|
25
|
+
}) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children)
|
|
26
|
+
};
|
|
27
|
+
export const getLayoutColumnMenuComponents = ({
|
|
28
|
+
api
|
|
29
|
+
}) => {
|
|
30
|
+
return [{
|
|
31
|
+
...LAYOUT_COLUMN_MENU
|
|
32
|
+
}, {
|
|
33
|
+
...LAYOUT_COLUMN_MENU_SECTION,
|
|
34
|
+
parents: [{
|
|
35
|
+
...LAYOUT_COLUMN_MENU,
|
|
36
|
+
rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
|
|
37
|
+
}]
|
|
38
|
+
}, {
|
|
39
|
+
...DISTRIBUTE_COLUMNS_MENU_ITEM,
|
|
40
|
+
component: createDistributeColumnsDropdownItem(api),
|
|
41
|
+
parents: [{
|
|
42
|
+
...LAYOUT_COLUMN_MENU_SECTION,
|
|
43
|
+
rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
|
|
44
|
+
}]
|
|
45
|
+
}];
|
|
46
|
+
};
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
|
+
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
|
|
4
|
+
import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
|
|
3
5
|
export const LayoutColumnMenu = ({
|
|
4
6
|
api
|
|
5
7
|
}) => {
|
|
8
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
6
9
|
const {
|
|
7
10
|
isLayoutColumnMenuOpen
|
|
8
11
|
} = useSharedPluginStateWithSelector(api, ['layout'], states => {
|
|
@@ -14,6 +17,13 @@ export const LayoutColumnMenu = ({
|
|
|
14
17
|
if (!isLayoutColumnMenuOpen) {
|
|
15
18
|
return null;
|
|
16
19
|
}
|
|
17
|
-
const
|
|
18
|
-
|
|
20
|
+
const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
21
|
+
if (components.length === 0) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
return /*#__PURE__*/React.createElement(SurfaceRenderer, {
|
|
25
|
+
components: components,
|
|
26
|
+
fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
|
|
27
|
+
surface: LAYOUT_COLUMN_MENU
|
|
28
|
+
});
|
|
19
29
|
};
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -17,6 +17,7 @@ import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
|
|
|
17
17
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
18
18
|
import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
|
|
19
19
|
import { LayoutColumnMenu } from './ui/LayoutColumnMenu';
|
|
20
|
+
import { getLayoutColumnMenuComponents } from './ui/LayoutColumnMenu/components';
|
|
20
21
|
import { buildToolbar } from './ui/toolbar';
|
|
21
22
|
var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
|
|
22
23
|
|
|
@@ -72,6 +73,12 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
72
73
|
}
|
|
73
74
|
}]);
|
|
74
75
|
}
|
|
76
|
+
if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
77
|
+
var _api$uiControlRegistr;
|
|
78
|
+
api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
|
|
79
|
+
api: api
|
|
80
|
+
}));
|
|
81
|
+
}
|
|
75
82
|
return {
|
|
76
83
|
name: 'layout',
|
|
77
84
|
nodes: function nodes() {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { layoutMessages } from '@atlaskit/editor-common/messages';
|
|
4
|
+
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
|
+
var DistributeColumnsDropdownItem = function DistributeColumnsDropdownItem(_ref) {
|
|
6
|
+
var api = _ref.api;
|
|
7
|
+
var _useIntl = useIntl(),
|
|
8
|
+
formatMessage = _useIntl.formatMessage;
|
|
9
|
+
var handleClick = function handleClick() {
|
|
10
|
+
var _api$core, _api$layout;
|
|
11
|
+
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
|
|
12
|
+
isOpen: false
|
|
13
|
+
}));
|
|
14
|
+
};
|
|
15
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
16
|
+
onClick: handleClick
|
|
17
|
+
}, formatMessage(layoutMessages.distributeColumns));
|
|
18
|
+
};
|
|
19
|
+
export var createDistributeColumnsDropdownItem = function createDistributeColumnsDropdownItem(api) {
|
|
20
|
+
return function () {
|
|
21
|
+
return /*#__PURE__*/React.createElement(DistributeColumnsDropdownItem, {
|
|
22
|
+
api: api
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
6
|
+
import { createDistributeColumnsDropdownItem } from './DistributeColumnsDropdownItem';
|
|
7
|
+
export var LAYOUT_COLUMN_MENU = {
|
|
8
|
+
key: 'layout-column-menu',
|
|
9
|
+
type: 'menu'
|
|
10
|
+
};
|
|
11
|
+
var LAYOUT_COLUMN_MENU_SECTION = {
|
|
12
|
+
key: 'layout-column-menu-section',
|
|
13
|
+
type: 'menu-section'
|
|
14
|
+
};
|
|
15
|
+
var DISTRIBUTE_COLUMNS_MENU_ITEM = {
|
|
16
|
+
key: 'layout-column-menu-distribute-columns-item',
|
|
17
|
+
type: 'menu-item'
|
|
18
|
+
};
|
|
19
|
+
var LAYOUT_COLUMN_MENU_RANK = _defineProperty({}, LAYOUT_COLUMN_MENU_SECTION.key, 0);
|
|
20
|
+
var LAYOUT_COLUMN_MENU_SECTION_RANK = _defineProperty({}, DISTRIBUTE_COLUMNS_MENU_ITEM.key, 0);
|
|
21
|
+
export var LAYOUT_COLUMN_MENU_FALLBACKS = {
|
|
22
|
+
'menu-section': function menuSection(_ref) {
|
|
23
|
+
var children = _ref.children;
|
|
24
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
export var getLayoutColumnMenuComponents = function getLayoutColumnMenuComponents(_ref2) {
|
|
28
|
+
var api = _ref2.api;
|
|
29
|
+
return [_objectSpread({}, LAYOUT_COLUMN_MENU), _objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
|
|
30
|
+
parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU), {}, {
|
|
31
|
+
rank: LAYOUT_COLUMN_MENU_RANK[LAYOUT_COLUMN_MENU_SECTION.key]
|
|
32
|
+
})]
|
|
33
|
+
}), _objectSpread(_objectSpread({}, DISTRIBUTE_COLUMNS_MENU_ITEM), {}, {
|
|
34
|
+
component: createDistributeColumnsDropdownItem(api),
|
|
35
|
+
parents: [_objectSpread(_objectSpread({}, LAYOUT_COLUMN_MENU_SECTION), {}, {
|
|
36
|
+
rank: LAYOUT_COLUMN_MENU_SECTION_RANK[DISTRIBUTE_COLUMNS_MENU_ITEM.key]
|
|
37
|
+
})]
|
|
38
|
+
})];
|
|
39
|
+
};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
|
+
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
|
|
4
|
+
import { LAYOUT_COLUMN_MENU, LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
|
|
3
5
|
export var LayoutColumnMenu = function LayoutColumnMenu(_ref) {
|
|
6
|
+
var _api$uiControlRegistr, _api$uiControlRegistr2;
|
|
4
7
|
var api = _ref.api;
|
|
5
8
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout'], function (states) {
|
|
6
9
|
var _states$layoutState$i, _states$layoutState;
|
|
@@ -12,6 +15,13 @@ export var LayoutColumnMenu = function LayoutColumnMenu(_ref) {
|
|
|
12
15
|
if (!isLayoutColumnMenuOpen) {
|
|
13
16
|
return null;
|
|
14
17
|
}
|
|
15
|
-
var
|
|
16
|
-
|
|
18
|
+
var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
|
|
19
|
+
if (components.length === 0) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
return /*#__PURE__*/React.createElement(SurfaceRenderer, {
|
|
23
|
+
components: components,
|
|
24
|
+
fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
|
|
25
|
+
surface: LAYOUT_COLUMN_MENU
|
|
26
|
+
});
|
|
17
27
|
};
|
|
@@ -7,6 +7,7 @@ import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
|
|
|
7
7
|
import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
|
|
8
8
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
9
9
|
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
10
|
+
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
|
|
10
11
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
11
12
|
import type { insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
|
|
12
13
|
import type { LayoutState } from './pm-plugins/types';
|
|
@@ -20,7 +21,8 @@ export type LayoutPluginDependencies = [
|
|
|
20
21
|
OptionalPlugin<GuidelinePlugin>,
|
|
21
22
|
OptionalPlugin<InteractionPlugin>,
|
|
22
23
|
OptionalPlugin<BlockMenuPlugin>,
|
|
23
|
-
OptionalPlugin<ToolbarPlugin
|
|
24
|
+
OptionalPlugin<ToolbarPlugin>,
|
|
25
|
+
OptionalPlugin<UiControlRegistryPlugin>
|
|
24
26
|
];
|
|
25
27
|
export type LayoutPlugin = NextEditorPlugin<'layout', {
|
|
26
28
|
actions: {
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { LayoutPlugin } from '../../layoutPluginType';
|
|
4
|
+
export declare const createDistributeColumnsDropdownItem: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => () => React.JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterComponent, SurfaceFallbacks } from '@atlaskit/editor-ui-control-model';
|
|
3
|
+
import type { LayoutPlugin } from '../../layoutPluginType';
|
|
4
|
+
export declare const LAYOUT_COLUMN_MENU: {
|
|
5
|
+
key: string;
|
|
6
|
+
type: "menu";
|
|
7
|
+
};
|
|
8
|
+
export declare const LAYOUT_COLUMN_MENU_FALLBACKS: SurfaceFallbacks;
|
|
9
|
+
export declare const getLayoutColumnMenuComponents: ({ api, }: {
|
|
10
|
+
api: ExtractInjectionAPI<LayoutPlugin> | undefined;
|
|
11
|
+
}) => RegisterComponent[];
|
|
@@ -7,6 +7,7 @@ import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
|
|
|
7
7
|
import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
|
|
8
8
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
9
9
|
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
10
|
+
import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
|
|
10
11
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
11
12
|
import type { insertLayoutColumnsWithAnalytics, toggleLayoutColumnMenu } from './pm-plugins/actions';
|
|
12
13
|
import type { LayoutState } from './pm-plugins/types';
|
|
@@ -20,7 +21,8 @@ export type LayoutPluginDependencies = [
|
|
|
20
21
|
OptionalPlugin<GuidelinePlugin>,
|
|
21
22
|
OptionalPlugin<InteractionPlugin>,
|
|
22
23
|
OptionalPlugin<BlockMenuPlugin>,
|
|
23
|
-
OptionalPlugin<ToolbarPlugin
|
|
24
|
+
OptionalPlugin<ToolbarPlugin>,
|
|
25
|
+
OptionalPlugin<UiControlRegistryPlugin>
|
|
24
26
|
];
|
|
25
27
|
export type LayoutPlugin = NextEditorPlugin<'layout', {
|
|
26
28
|
actions: {
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { LayoutPlugin } from '../../layoutPluginType';
|
|
4
|
+
export declare const createDistributeColumnsDropdownItem: (api: ExtractInjectionAPI<LayoutPlugin> | undefined) => () => React.JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterComponent, SurfaceFallbacks } from '@atlaskit/editor-ui-control-model';
|
|
3
|
+
import type { LayoutPlugin } from '../../layoutPluginType';
|
|
4
|
+
export declare const LAYOUT_COLUMN_MENU: {
|
|
5
|
+
key: string;
|
|
6
|
+
type: "menu";
|
|
7
|
+
};
|
|
8
|
+
export declare const LAYOUT_COLUMN_MENU_FALLBACKS: SurfaceFallbacks;
|
|
9
|
+
export declare const getLayoutColumnMenuComponents: ({ api, }: {
|
|
10
|
+
api: ExtractInjectionAPI<LayoutPlugin> | undefined;
|
|
11
|
+
}) => RegisterComponent[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.2",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,31 +29,33 @@
|
|
|
29
29
|
],
|
|
30
30
|
"atlaskit:src": "src/index.ts",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@atlaskit/adf-schema": "^52.
|
|
32
|
+
"@atlaskit/adf-schema": "^52.11.0",
|
|
33
33
|
"@atlaskit/css": "^0.19.0",
|
|
34
34
|
"@atlaskit/editor-plugin-analytics": "^10.0.0",
|
|
35
|
-
"@atlaskit/editor-plugin-block-menu": "^9.
|
|
35
|
+
"@atlaskit/editor-plugin-block-menu": "^9.1.0",
|
|
36
36
|
"@atlaskit/editor-plugin-decorations": "^10.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-editor-disabled": "^10.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-guideline": "^10.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-interaction": "^19.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-selection": "^10.0.0",
|
|
41
41
|
"@atlaskit/editor-plugin-toolbar": "^7.1.0",
|
|
42
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^4.0.0",
|
|
42
43
|
"@atlaskit/editor-plugin-width": "^11.0.0",
|
|
43
44
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
44
45
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
45
|
-
"@atlaskit/editor-toolbar": "^1.
|
|
46
|
+
"@atlaskit/editor-toolbar": "^1.1.0",
|
|
47
|
+
"@atlaskit/editor-ui-control-model": "^1.1.0",
|
|
46
48
|
"@atlaskit/icon": "^34.5.0",
|
|
47
|
-
"@atlaskit/icon-lab": "^6.
|
|
49
|
+
"@atlaskit/icon-lab": "^6.9.0",
|
|
48
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
49
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
51
|
+
"@atlaskit/tmp-editor-statsig": "^79.0.0",
|
|
50
52
|
"@atlaskit/tokens": "^13.0.0",
|
|
51
53
|
"@babel/runtime": "^7.0.0",
|
|
52
54
|
"@emotion/react": "^11.7.1",
|
|
53
55
|
"bind-event-listener": "^3.0.0"
|
|
54
56
|
},
|
|
55
57
|
"peerDependencies": {
|
|
56
|
-
"@atlaskit/editor-common": "^114.
|
|
58
|
+
"@atlaskit/editor-common": "^114.29.0",
|
|
57
59
|
"react": "^18.2.0",
|
|
58
60
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
59
61
|
},
|