@atlaskit/editor-plugin-layout/dist/cjs/layoutPlugin.js

Layout plugin for @atlaskit/editor-core

"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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _actions = require("./pm-plugins/actions");
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
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 _LayoutColumnMenu = require("./ui/LayoutColumnMenu");
var _components = require("./ui/LayoutColumnMenu/components");
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$analytics2;
  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));
      }
    }]);
  }
  if ((0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
    var _api$uiControlRegistr;
    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _components.getLayoutColumnMenuComponents)({
      api: api
    }));
  }
  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() {
          var _api$analytics;
          return (0, _main.default)(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
        }
      }];
      if ((0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
        plugins.push({
          name: 'layoutKeymap',
          plugin: function plugin() {
            return (0, _keymap.default)({
              api: api
            });
          }
        });
      }
      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,
              getIntl = _ref2.getIntl;
            return (0, _resizing.default)(options, api, portalProviderAPI, eventDispatcher, getIntl());
          }
        });
      }
      return plugins;
    },
    actions: {
      insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
    },
    pluginsOptions: {
      floatingToolbar: function floatingToolbar(state, intl) {
        var layoutState = _pluginKey.pluginKey.getState(state);
        if (!layoutState) {
          return undefined;
        }
        var pos = layoutState.pos,
          allowBreakout = layoutState.allowBreakout,
          addSidebarLayouts = layoutState.addSidebarLayouts,
          allowSingleColumnLayout = layoutState.allowSingleColumnLayout,
          isResizing = layoutState.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(_ref3) {
        var formatMessage = _ref3.formatMessage;
        var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
          var _api$analytics3;
          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,
              columnCount: columnCount
            },
            eventType: _analytics.EVENT_TYPE.TRACK
          })(tr);
          return tr;
        };
        if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
          var advancedSingleColumnOption = allowAdvancedSingleColumnLayout ? [{
            id: 'onecolumnlayout',
            title: formatMessage(_messages.layoutMessages.singleColumnAdvancedLayout),
            description: formatMessage(_messages.toolbarInsertBlockMessages.singleColumnsDescriptionAdvancedLayout),
            keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'single column'] : ['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, _expValEquals.expValEquals)('platform_editor_layout_typeahead_reorder', 'isEnabled', true)) {
            var createAdvancedColumnLayoutOption = function createAdvancedColumnLayoutOption(_ref4) {
              var columnCount = _ref4.columnCount,
                descriptionColumnCount = _ref4.descriptionColumnCount,
                Icon = _ref4.icon,
                id = _ref4.id,
                keyword = _ref4.keyword,
                title = _ref4.title;
              return {
                id: id,
                title: title,
                description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
                  numberOfColumns: descriptionColumnCount
                }),
                keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', keyword] : ['layout', 'column', 'section', keyword],
                priority: 1100,
                icon: Icon,
                action: function action(insert, state) {
                  var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, columnCount));
                  if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
                    withInsertLayoutAnalytics(tr, columnCount);
                  } else {
                    withInsertLayoutAnalytics(tr);
                  }
                  selectIntoLayoutSection(tr);
                  return tr;
                }
              };
            };
            return [createAdvancedColumnLayoutOption({
              columnCount: 2,
              descriptionColumnCount: 'two',
              icon: function icon() {
                return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
              },
              id: 'twocolumnslayout',
              keyword: 'two column',
              title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout)
            })].concat(advancedSingleColumnOption, [createAdvancedColumnLayoutOption({
              columnCount: 3,
              descriptionColumnCount: 'three',
              icon: function icon() {
                return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
              },
              id: 'threecolumnslayout',
              keyword: 'three column',
              title: formatMessage(_messages.layoutMessages.threeColumnsAdvancedLayout)
            }), createAdvancedColumnLayoutOption({
              columnCount: 4,
              descriptionColumnCount: 'four',
              icon: function icon() {
                return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
              },
              id: 'fourcolumnslayout',
              keyword: 'four column',
              title: formatMessage(_messages.layoutMessages.fourColumns)
            }), createAdvancedColumnLayoutOption({
              columnCount: 5,
              descriptionColumnCount: 'five',
              icon: function icon() {
                return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
              },
              id: 'fivecolumnslayout',
              keyword: 'five column',
              title: formatMessage(_messages.layoutMessages.fiveColumns)
            })]);
          }
          return [].concat(advancedSingleColumnOption, [{
            id: 'twocolumnslayout',
            title: formatMessage(_messages.layoutMessages.twoColumnsAdvancedLayout),
            description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
              numberOfColumns: 'two'
            }),
            keywords: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'two column'] : ['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: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'three column'] : ['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: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'four column'] : ['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: (0, _expValEquals.expValEquals)('platform_editor_layout_keywords', 'isEnabled', true) ? ['layout', 'column', 'section', 'col', 'five column'] : ['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$analytics4;
              var tr = insert((0, _actions.createDefaultLayoutSection)(state));
              api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.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(_ref5) {
      var editorView = _ref5.editorView,
        popupsMountPoint = _ref5.popupsMountPoint,
        popupsBoundariesElement = _ref5.popupsBoundariesElement,
        popupsScrollableElement = _ref5.popupsScrollableElement;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null, (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/_react.default.createElement(_LayoutColumnMenu.LayoutColumnMenu, {
        api: api,
        editorView: editorView,
        mountTo: popupsMountPoint,
        boundariesElement: popupsBoundariesElement,
        scrollableElement: popupsScrollableElement
      }) : null);
    },
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return undefined;
      }
      return _pluginKey.pluginKey.getState(editorState);
    },
    commands: {
      deleteLayoutColumn: function deleteLayoutColumn(options) {
        var _api$analytics5;
        return (0, _actions.deleteLayoutColumn)(options, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, api);
      },
      distributeLayoutColumns: function distributeLayoutColumns(options) {
        var _api$analytics6;
        return (0, _actions.distributeLayoutColumns)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, api)(options);
      },
      insertLayoutColumn: function insertLayoutColumn(options) {
        var _api$analytics7;
        return (0, _actions.insertLayoutColumn)(options, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, api);
      },
      setLayoutColumnDangerPreview: _actions.setLayoutColumnDangerPreview,
      setLayoutColumnValign: function setLayoutColumnValign(options) {
        var _api$analytics8;
        return (0, _actions.setLayoutColumnValign)(options, api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions, api);
      },
      toggleLayoutColumnMenu: _actions.toggleLayoutColumnMenu
    }
  };
};