@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
280 lines (278 loc) • 14.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.selectIntoLayoutSection = exports.layoutPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _schema = require("@atlaskit/adf-schema/schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _blockMenu = require("@atlaskit/editor-common/block-menu");
var _messages = require("@atlaskit/editor-common/messages");
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _actions = require("./pm-plugins/actions");
var _main = _interopRequireDefault(require("./pm-plugins/main"));
var _pluginKey = require("./pm-plugins/plugin-key");
var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
var _globalStyles = require("./ui/global-styles");
var _LayoutBlockMenuItem = require("./ui/LayoutBlockMenuItem");
var _toolbar = require("./ui/toolbar");
var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
/**
* This function is used to set the selection into
* the first paragraph of the first column of a layout section.
* This function is only intended to be used after inserting a new layout section.
* @param tr - transaction
* @returns - transaction with the selection set to the first paragraph of the first column
*/
var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
var _nodeWithPos$node$fir;
if (!(0, _experiments.editorExperiment)('single_column_layouts', true)) {
return tr;
}
var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
layoutSection = _tr$doc$type$schema$n.layoutSection,
paragraph = _tr$doc$type$schema$n.paragraph;
var nodeWithPos = (0, _utils.findParentNode)(function (node) {
return node.type === layoutSection;
})(tr.selection);
if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 || (_nodeWithPos$node$fir = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : _nodeWithPos$node$fir.type) !== paragraph) {
return tr;
}
// set text selection at the beginning of the layout section
// will set the selection to the first column
tr.setSelection(_state.TextSelection.create(tr.doc, nodeWithPos.pos));
return tr;
};
var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
var _api$analytics;
var _ref$config = _ref.config,
options = _ref$config === void 0 ? {} : _ref$config,
api = _ref.api;
var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true, {
exposure: true
});
if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
var _api$blockMenu;
api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
type: 'block-menu-item',
key: _blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key,
parent: {
type: 'block-menu-section',
key: _blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION.key,
rank: _blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION_RANK[_blockMenu.TRANSFORM_STRUCTURE_LAYOUT_MENU_ITEM.key]
},
component: (0, _LayoutBlockMenuItem.createLayoutBlockMenuItem)(api),
isHidden: function isHidden() {
var _api$blockMenu2;
return Boolean(api === null || api === void 0 || (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 ? void 0 : _api$blockMenu2.actions.isTransformOptionDisabled(LAYOUT_SECTION_NODE_NAME));
}
}]);
}
return {
name: 'layout',
nodes: function nodes() {
return [{
name: 'layoutSection',
node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutSectionWithLocalId : _adfSchema.layoutSection
}, {
name: 'layoutColumn',
node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
}];
},
pmPlugins: function pmPlugins() {
var plugins = [{
name: 'layout',
plugin: function plugin() {
return (0, _main.default)(options);
}
}];
if ((options.editorAppearance === 'full-page' || options.editorAppearance === 'full-width' || options.editorAppearance === 'max' && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true)) && api && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
plugins.push({
name: 'layoutResizing',
plugin: function plugin(_ref2) {
var portalProviderAPI = _ref2.portalProviderAPI,
eventDispatcher = _ref2.eventDispatcher;
return (0, _resizing.default)(options, api, portalProviderAPI, eventDispatcher);
}
});
}
return plugins;
},
actions: {
insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
},
pluginsOptions: {
floatingToolbar: function floatingToolbar(state, intl) {
var _ref3 = _pluginKey.pluginKey.getState(state),
pos = _ref3.pos,
allowBreakout = _ref3.allowBreakout,
addSidebarLayouts = _ref3.addSidebarLayouts,
allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
isResizing = _ref3.isResizing;
var shouldHideToolbar = isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true);
if (pos !== null && !shouldHideToolbar) {
return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
}
return undefined;
},
quickInsert: function quickInsert(_ref4) {
var formatMessage = _ref4.formatMessage;
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
var _api$analytics2;
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
action: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
columnCount: columnCount
},
eventType: _analytics.EVENT_TYPE.TRACK
})(tr);
return tr;
};
var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
id: 'onecolumnlayout',
title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
description: formatMessage(_messages.toolbarInsertBlockMessages.singleColumnsDescriptionAdvancedLayout),
keywords: ['layout', 'column', 'section', 'single column'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconOneColumnLayout, null);
},
action: function action(insert, state) {
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
withInsertLayoutAnalytics(tr, 1);
} else {
withInsertLayoutAnalytics(tr);
}
selectIntoLayoutSection(tr);
return tr;
}
}] : [];
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
return [].concat(advancedSingleColumnOption, [{
id: 'twocolumnslayout',
title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout),
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
numberOfColumns: 'two'
}),
keywords: ['layout', 'column', 'section', 'two column'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
},
action: function action(insert, state) {
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2));
if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
withInsertLayoutAnalytics(tr, 2);
} else {
withInsertLayoutAnalytics(tr);
}
selectIntoLayoutSection(tr);
return tr;
}
}, {
id: 'threecolumnslayout',
title: formatMessage(_messages.layoutMessages.threeColumnsAdvancedLayout),
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
numberOfColumns: 'three'
}),
keywords: ['layout', 'column', 'section', 'three column'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
},
action: function action(insert, state) {
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
withInsertLayoutAnalytics(tr, 3);
} else {
withInsertLayoutAnalytics(tr);
}
selectIntoLayoutSection(tr);
return tr;
}
}, {
id: 'fourcolumnslayout',
title: formatMessage(_messages.layoutMessages.fourColumns),
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
numberOfColumns: 'four'
}),
keywords: ['layout', 'column', 'section', 'four column'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
},
action: function action(insert, state) {
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
withInsertLayoutAnalytics(tr, 4);
} else {
withInsertLayoutAnalytics(tr);
}
selectIntoLayoutSection(tr);
return tr;
}
}, {
id: 'fivecolumnslayout',
title: formatMessage(_messages.layoutMessages.fiveColumns),
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
numberOfColumns: 'five'
}),
keywords: ['layout', 'column', 'section', 'five column'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
},
action: function action(insert, state) {
var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
withInsertLayoutAnalytics(tr, 5);
} else {
withInsertLayoutAnalytics(tr);
}
selectIntoLayoutSection(tr);
return tr;
}
}]);
} else {
return [{
id: 'layout',
title: formatMessage(_messages.toolbarInsertBlockMessages.columns),
description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
keywords: ['column', 'section'],
priority: 1100,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLayout, null);
},
action: function action(insert, state) {
var _api$analytics3;
var tr = insert((0, _actions.createDefaultLayoutSection)(state));
api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.attachAnalyticsEvent({
action: _analytics.ACTION.INSERTED,
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
attributes: {
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
},
eventType: _analytics.EVENT_TYPE.TRACK
})(tr);
return tr;
}
}];
}
}
},
contentComponent: function contentComponent() {
return (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null;
}
};
};