@atlaskit/editor-plugin-layout 0.1.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-layout

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin layout
+
+Layout plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-layout*
+- **npm** - [@atlaskit/editor-plugin-layout](https://www.npmjs.com/package/@atlaskit/editor-plugin-layout)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-layout)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-layout/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-layout is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin layout](https://atlaskit.atlassian.com/packages/editor/editor-plugin-layout) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/actions.js

@@ -0,0 +1,345 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
+exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _pluginKey = require("./pm-plugins/plugin-key");
+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 ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
+var TWO_COL_LAYOUTS = exports.TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
+var THREE_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
+var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
+  switch (presetLayout) {
+    case 'single':
+      return [100];
+    case 'two_equal':
+      return [50, 50];
+    case 'three_equal':
+      return [33.33, 33.33, 33.33];
+    case 'two_left_sidebar':
+      return [33.33, 66.66];
+    case 'two_right_sidebar':
+      return [66.66, 33.33];
+    case 'three_with_sidebars':
+      return [25, 50, 25];
+  }
+};
+
+/**
+ * Finds layout preset based on the width attrs of all the layoutColumn nodes
+ * inside the layoutSection node
+ */
+var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section) {
+  var widths = (0, _utils.mapChildren)(section, function (column) {
+    return column.attrs.width;
+  }).join(',');
+  switch (widths) {
+    case '100':
+      return 'single';
+    case '33.33,33.33,33.33':
+      return 'three_equal';
+    case '25,50,25':
+      return 'three_with_sidebars';
+    case '50,50':
+      return 'two_equal';
+    case '33.33,66.66':
+      return 'two_left_sidebar';
+    case '66.66,33.33':
+      return 'two_right_sidebar';
+  }
+  return;
+};
+var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
+    return getPresetLayout(maybeLayoutSection) || current;
+  }
+  return current;
+};
+var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    layoutSection = _state$schema$nodes.layoutSection,
+    layoutColumn = _state$schema$nodes.layoutColumn;
+
+  // create a 50-50 layout by default
+  var columns = _model.Fragment.fromArray([layoutColumn.createAndFill({
+    width: 50
+  }), layoutColumn.createAndFill({
+    width: 50
+  })]);
+  return layoutSection.createAndFill(undefined, columns);
+};
+var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
+  if (dispatch) {
+    dispatch((0, _utils2.safeInsert)(createDefaultLayoutSection(state))(state.tr));
+  }
+  return true;
+};
+var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(insertLayoutColumns);
+  };
+};
+
+/**
+ * Add a column to the right of existing layout
+ */
+function addColumn(schema, pos) {
+  return function (tr) {
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+  };
+}
+function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
+  return function (tr) {
+    if ((0, _utils.isEmptyDocument)(column)) {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), _model.Slice.empty);
+    } else {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), _model.Slice.empty);
+    }
+  };
+}
+var fromTwoColsToThree = addColumn;
+var fromOneColToTwo = addColumn;
+var fromTwoColsToOne = removeLastColumnInLayout;
+var fromThreeColsToTwo = removeLastColumnInLayout;
+var fromOneColToThree = function fromOneColToThree(schema, pos) {
+  return function (tr) {
+    addColumn(schema, pos)(tr);
+    addColumn(schema, pos)(tr);
+  };
+};
+var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePos) {
+  var thirdColumn = node.content.child(2);
+  fromThreeColsToTwo(thirdColumn, insideRightEdgePos - thirdColumn.nodeSize, insideRightEdgePos)(tr);
+  var secondColumn = node.content.child(1);
+  fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
+};
+
+/**
+ * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
+ * Switching from 2 -> 3 just adds a new one at the end
+ * Switching from 3 -> 2 moves all the content of the third col inside the second before
+ * removing it
+ */
+function forceColumnStructure(state, node, pos, presetLayout) {
+  var tr = state.tr;
+  var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  var numCols = node.childCount;
+
+  // 3 columns -> 2 columns
+  if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
+    var thirdColumn = node.content.child(2);
+    var columnPos = insideRightEdgeOfLayoutSection - thirdColumn.nodeSize;
+    fromThreeColsToTwo(thirdColumn, columnPos, insideRightEdgeOfLayoutSection)(tr);
+
+    // 2 columns -> 3 columns
+  } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
+    fromTwoColsToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
+
+    // 2 columns -> 1 column
+  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 2) {
+    var secondColumn = node.content.child(1);
+    var _columnPos = insideRightEdgeOfLayoutSection - secondColumn.nodeSize;
+    fromTwoColsToOne(secondColumn, _columnPos, insideRightEdgeOfLayoutSection)(tr);
+
+    // 3 columns -> 1 column
+  } else if (ONE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
+    fromThreeColstoOne(node, tr, insideRightEdgeOfLayoutSection);
+
+    // 1 column -> 2 columns
+  } else if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
+    fromOneColToTwo(state.schema, insideRightEdgeOfLayoutSection)(tr);
+    // 1 column -> 3 columns
+  } else if (THREE_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 1) {
+    fromOneColToThree(state.schema, insideRightEdgeOfLayoutSection)(tr);
+  }
+  return tr;
+}
+function columnWidth(node, schema, widths) {
+  var layoutColumn = schema.nodes.layoutColumn;
+  var truncatedWidths = widths.map(function (w) {
+    return Number(w.toFixed(2));
+  });
+  return (0, _utils.flatmap)(node.content, function (column, idx) {
+    if (column.type === layoutColumn) {
+      return layoutColumn.create(_objectSpread(_objectSpread({}, column.attrs), {}, {
+        width: truncatedWidths[idx]
+      }), column.content, column.marks);
+    } else {
+      return column;
+    }
+  });
+}
+function forceColumnWidths(state, tr, pos, presetLayout) {
+  var node = tr.doc.nodeAt(pos);
+  if (!node) {
+    return tr;
+  }
+  return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
+}
+function forceSectionToPresetLayout(state, node, pos, presetLayout) {
+  var tr = forceColumnStructure(state, node, pos, presetLayout);
+
+  // save the selection here, since forcing column widths causes a change over the
+  // entire layoutSection, which remaps selection to the end. not remapping here
+  // is safe because the structure is no longer changing.
+  var selection = tr.selection;
+  tr = forceColumnWidths(state, tr, pos, presetLayout);
+  var selectionPos$ = tr.doc.resolve(selection.$from.pos);
+  return tr.setSelection(state.selection instanceof _state.NodeSelection ? new _state.NodeSelection(selectionPos$) : new _state.TextSelection(selectionPos$));
+}
+var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
+  return function (layout) {
+    return function (state, dispatch) {
+      var _ref = _pluginKey.pluginKey.getState(state),
+        pos = _ref.pos,
+        selectedLayout = _ref.selectedLayout;
+      if (selectedLayout === layout || pos === null) {
+        return false;
+      }
+      var node = state.doc.nodeAt(pos);
+      if (!node) {
+        return false;
+      }
+      var tr = forceSectionToPresetLayout(state, node, pos, layout);
+      if (tr) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.CHANGED_LAYOUT,
+          actionSubject: _analytics.ACTION_SUBJECT.LAYOUT,
+          attributes: {
+            previousLayout: formatLayoutName(selectedLayout),
+            newLayout: formatLayoutName(layout)
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        })(tr);
+        tr.setMeta('scrollIntoView', false);
+        if (dispatch) {
+          dispatch(tr);
+        }
+        return true;
+      }
+      return false;
+    };
+  };
+};
+function layoutNeedChanges(node) {
+  return !getPresetLayout(node);
+}
+function getLayoutChange(node, pos, schema) {
+  if (node.type === schema.nodes.layoutSection) {
+    if (!layoutNeedChanges(node)) {
+      return;
+    }
+    var presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
+    var fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
+    return {
+      from: pos + 1,
+      to: pos + node.nodeSize - 1,
+      slice: new _model.Slice(fixedColumns, 0, 0)
+    };
+  }
+}
+var fixColumnSizes = exports.fixColumnSizes = function fixColumnSizes(changedTr, state) {
+  var layoutSection = state.schema.nodes.layoutSection;
+  var change;
+  var range = (0, _utils.getStepRange)(changedTr);
+  if (!range) {
+    return undefined;
+  }
+  changedTr.doc.nodesBetween(range.from, range.to, function (node, pos) {
+    if (node.type !== layoutSection) {
+      return true; // Check all internal nodes expect for layout section
+    }
+    // Node is a section
+    if (layoutNeedChanges(node)) {
+      change = getLayoutChange(node, pos, state.schema);
+    }
+    return false; // We dont go deep, We dont accept nested layouts
+  });
+
+  // Hack to prevent: https://product-fabric.atlassian.net/browse/ED-7523
+  // By default prosemirror try to recreate the node with the default attributes
+  // The default attribute is invalid adf though. when this happen the node after
+  // current position is a layout section
+  var $pos = changedTr.doc.resolve(range.to);
+  if ($pos.depth > 0) {
+    // 'range.to' position could resolve to doc, in this ResolvedPos.after will throws
+    var pos = $pos.after();
+    var node = changedTr.doc.nodeAt(pos);
+    if (node && node.type === layoutSection && layoutNeedChanges(node)) {
+      change = getLayoutChange(node, pos, state.schema);
+    }
+  }
+  return change;
+};
+var fixColumnStructure = exports.fixColumnStructure = function fixColumnStructure(state) {
+  var _ref2 = _pluginKey.pluginKey.getState(state),
+    pos = _ref2.pos,
+    selectedLayout = _ref2.selectedLayout;
+  if (pos !== null && selectedLayout) {
+    var node = state.doc.nodeAt(pos);
+    if (node && node.childCount !== getWidthsForPreset(selectedLayout).length) {
+      return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+    }
+  }
+  return;
+};
+var deleteActiveLayoutNode = exports.deleteActiveLayoutNode = function deleteActiveLayoutNode(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _ref3 = _pluginKey.pluginKey.getState(state),
+      pos = _ref3.pos,
+      selectedLayout = _ref3.selectedLayout;
+    if (pos !== null) {
+      var node = state.doc.nodeAt(pos);
+      if (dispatch) {
+        var tr = state.tr.delete(pos, pos + node.nodeSize);
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.DELETED,
+          actionSubject: _analytics.ACTION_SUBJECT.LAYOUT,
+          attributes: {
+            layout: formatLayoutName(selectedLayout)
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        })(tr);
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var formatLayoutName = function formatLayoutName(layout) {
+  switch (layout) {
+    case 'single':
+      return _analytics.LAYOUT_TYPE.SINGLE_COL;
+    case 'two_equal':
+      return _analytics.LAYOUT_TYPE.TWO_COLS_EQUAL;
+    case 'three_equal':
+      return _analytics.LAYOUT_TYPE.THREE_COLS_EQUAL;
+    case 'two_left_sidebar':
+      return _analytics.LAYOUT_TYPE.LEFT_SIDEBAR;
+    case 'two_right_sidebar':
+      return _analytics.LAYOUT_TYPE.RIGHT_SIDEBAR;
+    case 'three_with_sidebars':
+      return _analytics.LAYOUT_TYPE.THREE_WITH_SIDEBARS;
+  }
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "layoutPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.layoutPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutPlugin = void 0;
+Object.defineProperty(exports, "pluginKey", {
+  enumerable: true,
+  get: function get() {
+    return _pluginKey.pluginKey;
+  }
+});
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _actions = require("./actions");
+var _main = _interopRequireDefault(require("./pm-plugins/main"));
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _toolbar = require("./toolbar");
+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;
+  return {
+    name: 'layout',
+    nodes: function nodes() {
+      return [{
+        name: 'layoutSection',
+        node: _adfSchema.layoutSection
+      }, {
+        name: 'layoutColumn',
+        node: _adfSchema.layoutColumn
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'layout',
+        plugin: function plugin() {
+          return (0, _main.default)(options);
+        }
+      }];
+    },
+    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 _ref2 = _pluginKey.pluginKey.getState(state),
+          pos = _ref2.pos,
+          allowBreakout = _ref2.allowBreakout,
+          addSidebarLayouts = _ref2.addSidebarLayouts,
+          allowSingleColumnLayout = _ref2.allowSingleColumnLayout;
+        if (pos !== null) {
+          return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+        }
+        return undefined;
+      },
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        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$analytics2;
+            var tr = insert((0, _actions.createDefaultLayoutSection)(state));
+            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
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
+  };
+};

package/dist/cjs/pm-plugins/main.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_LAYOUT = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _actions = require("../actions");
+var _pluginKey = require("./plugin-key");
+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 DEFAULT_LAYOUT = exports.DEFAULT_LAYOUT = 'two_equal';
+var isWholeSelectionInsideLayoutColumn = function isWholeSelectionInsideLayoutColumn(state) {
+  // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
+  var fromParent = (0, _utils2.findParentNodeOfType)(state.schema.nodes.layoutColumn)(state.selection);
+  if (fromParent) {
+    var isToPosInsideSameLayoutColumn = state.selection.from < fromParent.pos + fromParent.node.nodeSize;
+    return isToPosInsideSameLayoutColumn;
+  }
+  return false;
+};
+var moveCursorToNextColumn = function moveCursorToNextColumn(state, dispatch) {
+  var selection = state.selection;
+  var _state$schema$nodes = state.schema.nodes,
+    layoutColumn = _state$schema$nodes.layoutColumn,
+    layoutSection = _state$schema$nodes.layoutSection;
+  var section = (0, _utils2.findParentNodeOfType)(layoutSection)(selection);
+  var column = (0, _utils2.findParentNodeOfType)(layoutColumn)(selection);
+  if (column.node !== section.node.lastChild) {
+    var $nextColumn = state.doc.resolve(column.pos + column.node.nodeSize);
+    var shiftedSelection = _state.TextSelection.findFrom($nextColumn, 1);
+    if (dispatch) {
+      dispatch(state.tr.setSelection(shiftedSelection));
+    }
+  }
+  return true;
+};
+
+// TODO: Look at memoize-one-ing this fn
+var getNodeDecoration = function getNodeDecoration(pos, node) {
+  return [_view.Decoration.node(pos, pos + node.nodeSize, {
+    class: 'selected'
+  })];
+};
+var getInitialPluginState = function getInitialPluginState(options, state) {
+  var maybeLayoutSection = (0, _utils2.findParentNodeOfType)(state.schema.nodes.layoutSection)(state.selection);
+  var allowBreakout = options.allowBreakout || false;
+  var addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
+  var allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
+  var pos = maybeLayoutSection ? maybeLayoutSection.pos : null;
+  var selectedLayout = (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node, DEFAULT_LAYOUT);
+  return {
+    pos: pos,
+    allowBreakout: allowBreakout,
+    addSidebarLayouts: addSidebarLayouts,
+    selectedLayout: selectedLayout,
+    allowSingleColumnLayout: allowSingleColumnLayout
+  };
+};
+var _default = exports.default = function _default(options) {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.pluginKey,
+    state: {
+      init: function init(_, state) {
+        return getInitialPluginState(options, state);
+      },
+      apply: function apply(tr, pluginState, _oldState, newState) {
+        if (tr.docChanged || tr.selectionSet) {
+          var layoutSection = newState.schema.nodes.layoutSection,
+            selection = newState.selection;
+          var maybeLayoutSection = (0, _utils2.findParentNodeOfType)(layoutSection)(selection) || (0, _utils2.findSelectedNodeOfType)([layoutSection])(selection);
+          var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+            selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node, pluginState.selectedLayout)
+          });
+          return newPluginState;
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var layoutState = _pluginKey.pluginKey.getState(state);
+        if (layoutState.pos !== null) {
+          return _view.DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
+        }
+        return undefined;
+      },
+      handleKeyDown: (0, _keymap.keydownHandler)({
+        Tab: (0, _utils.filterCommand)(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+      }),
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['layoutColumn'], function (target) {
+        return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');
+      }, {
+        useLongPressSelection: options.useLongPressSelection || false,
+        getNodeSelectionPos: function getNodeSelectionPos(state, nodePos) {
+          return state.doc.resolve(nodePos).before();
+        }
+      })
+    },
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var changes = [];
+      transactions.forEach(function (prevTr) {
+        // remap change segments across the transaction set
+        changes.forEach(function (change) {
+          return {
+            from: prevTr.mapping.map(change.from),
+            to: prevTr.mapping.map(change.to),
+            slice: change.slice
+          };
+        });
+
+        // don't consider transactions that don't mutate
+        if (!prevTr.docChanged) {
+          return;
+        }
+        var change = (0, _actions.fixColumnSizes)(prevTr, newState);
+        if (change) {
+          changes.push(change);
+        }
+      });
+      if (changes.length) {
+        var tr = newState.tr;
+        var selection = newState.selection.toJSON();
+        changes.forEach(function (change) {
+          tr.replaceRange(change.from, change.to, change.slice);
+        });
+
+        // selecting and deleting across columns in 3 col layouts can remove
+        // a layoutColumn so we fix the structure here
+        tr = (0, _actions.fixColumnStructure)(newState) || tr;
+        if (tr.docChanged) {
+          tr.setSelection(_state.Selection.fromJSON(tr.doc, selection));
+          return tr;
+        }
+      }
+      return;
+    }
+  });
+};

package/dist/cjs/pm-plugins/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('layout');

package/dist/cjs/pm-plugins/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});