@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
319 lines (316 loc) • 16.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.layoutToolbarTitle = exports.buildToolbar = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _layoutOneColumn = _interopRequireDefault(require("@atlaskit/icon/core/layout-one-column"));
var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
var _layoutThreeColumnsSidebars = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns-sidebars"));
var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
var _layoutTwoColumnsSidebarLeft = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-left"));
var _layoutTwoColumnsSidebarRight = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns-sidebar-right"));
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _actions = require("../pm-plugins/actions");
var _LayoutColumnsIcon = require("./icons/LayoutColumnsIcon");
var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
var _LayoutThreeWithRightSidebars = require("./icons/LayoutThreeWithRightSidebars");
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); }
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; }
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; }
var LAYOUT_TYPES = [{
id: 'editor.layout.twoEquals',
type: 'two_equal',
title: _messages.layoutMessages.twoColumns,
icon: _layoutTwoColumns.default
}, {
id: 'editor.layout.threeEquals',
type: 'three_equal',
title: _messages.layoutMessages.threeColumns,
icon: _layoutThreeColumns.default
}];
var LAYOUT_TYPES_WITH_SINGLE_COL = [{
id: 'editor.layout.singeLayout',
type: 'single',
title: _messages.layoutMessages.singleColumn,
icon: _layoutOneColumn.default
}].concat(LAYOUT_TYPES);
var SIDEBAR_LAYOUT_TYPES = [{
id: 'editor.layout.twoRightSidebar',
type: 'two_right_sidebar',
title: _messages.layoutMessages.rightSidebar,
icon: _layoutTwoColumnsSidebarRight.default
}, {
id: 'editor.layout.twoLeftSidebar',
type: 'two_left_sidebar',
title: _messages.layoutMessages.leftSidebar,
icon: _layoutTwoColumnsSidebarLeft.default
}, {
id: 'editor.layout.threeWithSidebars',
type: 'three_with_sidebars',
title: _messages.layoutMessages.threeColumnsWithSidebars,
icon: _layoutThreeColumnsSidebars.default
}];
// These are used for advanced layout options
var LAYOUT_WITH_TWO_COL_DISTRIBUTION = [{
id: 'editor.layout.twoEquals',
type: 'two_equal',
title: _messages.layoutMessages.twoColumns,
icon: _layoutTwoColumns.default
}, {
id: 'editor.layout.twoRightSidebar',
type: 'two_right_sidebar',
title: _messages.layoutMessages.rightSidebar,
icon: _layoutTwoColumnsSidebarRight.default
}, {
id: 'editor.layout.twoLeftSidebar',
type: 'two_left_sidebar',
title: _messages.layoutMessages.leftSidebar,
icon: _layoutTwoColumnsSidebarLeft.default
}];
var LAYOUT_WITH_THREE_COL_DISTRIBUTION = [{
id: 'editor.layout.threeEquals',
type: 'three_equal',
title: _messages.layoutMessages.threeColumns,
icon: _layoutThreeColumns.default
}, {
id: 'editor.layout.threeWithSidebars',
type: 'three_with_sidebars',
title: _messages.layoutMessages.threeColumnsWithSidebars,
icon: _layoutThreeColumnsSidebars.default
}, {
id: 'editor.layout.threeRightSidebars',
type: 'three_right_sidebars',
title: _messages.layoutMessages.threeColumnsWithRightSidebars,
icon: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon,
iconFallback: _LayoutThreeWithRightSidebars.LayoutThreeWithRightSidebarsIcon
}, {
id: 'editor.layout.threeLeftSidebars',
type: 'three_left_sidebars',
title: _messages.layoutMessages.threeColumnsWithLeftSidebars,
icon: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon,
iconFallback: _LayoutThreeWithLeftSidebars.LayoutThreeWithLeftSidebarsIcon
}];
var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
return {
id: item.id,
type: 'button',
icon: item.icon,
iconFallback: item.iconFallback,
testId: item.title.id ? "".concat(item.title.id) : undefined,
title: intl.formatMessage(item.title),
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)(item.type),
selected: !!currentLayout && currentLayout === item.type,
tabIndex: null
};
};
var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
var iconPlaceholder = _layoutTwoColumns.default; // TODO: ED-25466 - Replace with proper icon
var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
if (!(0, _experiments.editorExperiment)('single_column_layouts', true) && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
return undefined;
}
switch (colCount) {
case 1:
return /*#__PURE__*/_react.default.createElement(_layoutOneColumn.default, {
label: ""
});
case 2:
return /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
label: ""
});
case 3:
return /*#__PURE__*/_react.default.createElement(_layoutThreeColumns.default, {
label: ""
});
case 4:
return /*#__PURE__*/_react.default.createElement(_LayoutColumnsIcon.EditorLayoutFourColumnsIcon, null);
case 5:
return /*#__PURE__*/_react.default.createElement(_LayoutColumnsIcon.EditorLayoutFiveColumnsIcon, null);
default:
return undefined;
}
};
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
var addSidebarLayouts = _ref.addSidebarLayouts,
intl = _ref.intl,
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
state = _ref.state,
node = _ref.node,
nodeType = _ref.nodeType,
separator = _ref.separator,
deleteButton = _ref.deleteButton,
currentLayout = _ref.currentLayout,
allowAdvancedSingleColumnLayout = _ref.allowAdvancedSingleColumnLayout;
var numberOfColumns = node.content.childCount || 2;
var distributionOptions = numberOfColumns === 2 ? LAYOUT_WITH_TWO_COL_DISTRIBUTION : numberOfColumns === 3 ? LAYOUT_WITH_THREE_COL_DISTRIBUTION : [];
var columnOptions = [{
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: 2
}),
//'2-columns',
icon: getLayoutColumnsIcons(2) || iconPlaceholder,
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal'),
selected: numberOfColumns === 2
}, {
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: 3
}),
//'3-columns'
icon: getLayoutColumnsIcons(3) || iconPlaceholder,
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal'),
selected: numberOfColumns === 3
}, {
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: 4
}),
//'4-columns'
icon: getLayoutColumnsIcons(4) || iconPlaceholder,
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal'),
selected: numberOfColumns === 4
}, {
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: 5
}),
//'5-columns'
icon: getLayoutColumnsIcons(5) || iconPlaceholder,
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
selected: numberOfColumns === 5
}];
var singleColumnOption = allowAdvancedSingleColumnLayout ? {
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: 1
}),
//'1-columns',
icon: getLayoutColumnsIcons(1) || iconPlaceholder,
onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('single'),
selected: numberOfColumns === 1
} : [];
return [{
type: 'dropdown',
title: intl.formatMessage(_messages.layoutMessages.columnOption, {
count: numberOfColumns
}),
//`${numberOfColumns}-columns`,
options: [singleColumnOption, columnOptions].flat(),
showSelected: true,
testId: 'column-options-button'
}].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
}) : []));
};
var fullHeightSeparator = {
type: 'separator',
fullHeight: true
};
var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api) {
var _api$decorations$acti, _api$decorations, _api$analytics;
var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
hoverDecoration = _ref2.hoverDecoration;
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
var node = state.doc.nodeAt(pos);
var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
if (node) {
var currentLayout = (0, _actions.getPresetLayout)(node);
var separator = {
type: 'separator'
};
var nodeType = state.schema.nodes.layoutSection;
var deleteButton = {
id: 'editor.layout.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: _delete.default,
testId: _messages.default.remove.id,
title: intl.formatMessage(_messages.default.remove),
onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI, _analytics.INPUT_METHOD.FLOATING_TB),
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
tabIndex: null
};
var copyButton = {
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: nodeType
}]
};
var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
return {
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
};
};
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var testId = 'layout-overflow-dropdown-trigger';
var overflowMenu = {
type: 'overflow-dropdown',
testId: testId,
options: [_objectSpread({
title: intl.formatMessage(_messages.default.copyToClipboard),
onClick: function onClick() {
var _api$core, _api$floatingToolbar;
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType, _analytics.INPUT_METHOD.FLOATING_TB));
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
label: ""
})
}, hoverDecorationProps(nodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
title: intl.formatMessage(_messages.default.delete),
onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI, _analytics.INPUT_METHOD.FLOATING_TB),
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
label: ""
})
}, hoverDecorationProps(nodeType))]
};
return {
title: layoutToolbarTitle,
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
getDomRef: function getDomRef(view) {
return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
},
nodeType: nodeType,
groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
items: [].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('advanced_layouts', true) ? getAdvancedLayoutItems({
addSidebarLayouts: addSidebarLayouts,
intl: intl,
editorAnalyticsAPI: editorAnalyticsAPI,
state: state,
nodeType: nodeType,
node: node,
separator: separator,
deleteButton: deleteButton,
currentLayout: currentLayout,
allowAdvancedSingleColumnLayout: allowAdvancedSingleColumnLayout
}) : [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
})), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
}) : []))), (0, _toConsumableArray2.default)(toolbarFlagsEnabled ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])),
scrollable: true
};
}
return;
};