@atlaskit/editor-plugin-layout 0.1.0

package/dist/es2019/toolbar.js

@@ -0,0 +1,100 @@
+import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import EditorLayoutSingleIcon from '@atlaskit/icon/glyph/editor/layout-single';
+import LayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
+import LayoutThreeWithSidebarsIcon from '@atlaskit/icon/glyph/editor/layout-three-with-sidebars';
+import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
+import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
+import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
+const LAYOUT_TYPES = [{
+  id: 'editor.layout.twoEquals',
+  type: 'two_equal',
+  title: toolbarMessages.twoColumns,
+  icon: LayoutTwoEqualIcon
+}, {
+  id: 'editor.layout.threeEquals',
+  type: 'three_equal',
+  title: toolbarMessages.threeColumns,
+  icon: LayoutThreeEqualIcon
+}];
+const LAYOUT_TYPES_WITH_SINGLE_COL = [{
+  id: 'editor.layout.singeLayout',
+  type: 'single',
+  title: toolbarMessages.singleColumn,
+  icon: EditorLayoutSingleIcon
+}, ...LAYOUT_TYPES];
+const SIDEBAR_LAYOUT_TYPES = [{
+  id: 'editor.layout.twoRightSidebar',
+  type: 'two_right_sidebar',
+  title: toolbarMessages.rightSidebar,
+  icon: LayoutTwoRightSidebarIcon
+}, {
+  id: 'editor.layout.twoLeftSidebar',
+  type: 'two_left_sidebar',
+  title: toolbarMessages.leftSidebar,
+  icon: LayoutTwoLeftSidebarIcon
+}, {
+  id: 'editor.layout.threeWithSidebars',
+  type: 'three_with_sidebars',
+  title: toolbarMessages.threeColumnsWithSidebars,
+  icon: LayoutThreeWithSidebarsIcon
+}];
+const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
+  id: item.id,
+  type: 'button',
+  icon: item.icon,
+  testId: item.title.id ? `${item.title.id}` : undefined,
+  title: intl.formatMessage(item.title),
+  onClick: setPresetLayout(editorAnalyticsAPI)(item.type),
+  selected: !!currentLayout && currentLayout === item.type,
+  tabIndex: null
+});
+export const layoutToolbarTitle = 'Layout floating controls';
+export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
+  var _api$decorations$acti, _api$decorations, _api$analytics;
+  const {
+    hoverDecoration
+  } = (_api$decorations$acti = api === null || api === void 0 ? 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 : {};
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const node = state.doc.nodeAt(pos);
+  if (node) {
+    const currentLayout = getPresetLayout(node);
+    const separator = {
+      type: 'separator'
+    };
+    const nodeType = state.schema.nodes.layoutSection;
+    const deleteButton = {
+      id: 'editor.layout.delete',
+      type: 'button',
+      appearance: 'danger',
+      focusEditoronEnter: true,
+      icon: RemoveIcon,
+      testId: commonMessages.remove.id,
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
+      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
+    };
+    const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    return {
+      title: layoutToolbarTitle,
+      getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
+      nodeType,
+      items: [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), {
+        type: 'copy-button',
+        items: [separator, {
+          state,
+          formatMessage: intl.formatMessage,
+          nodeType
+        }]
+      }, separator, deleteButton],
+      scrollable: true
+    };
+  }
+  return;
+};

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/actions.js

@@ -0,0 +1,336 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { pluginKey } from './pm-plugins/plugin-key';
+export var ONE_COL_LAYOUTS = ['single'];
+export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
+export var 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
+ */
+export var getPresetLayout = function getPresetLayout(section) {
+  var widths = 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;
+};
+export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
+    return getPresetLayout(maybeLayoutSection) || current;
+  }
+  return current;
+};
+export var 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 = Fragment.fromArray([layoutColumn.createAndFill({
+    width: 50
+  }), layoutColumn.createAndFill({
+    width: 50
+  })]);
+  return layoutSection.createAndFill(undefined, columns);
+};
+export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
+  if (dispatch) {
+    dispatch(safeInsert(createDefaultLayoutSection(state))(state.tr));
+  }
+  return true;
+};
+export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: 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 (isEmptyDocument(column)) {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(insideRightEdgePos), Slice.empty);
+    } else {
+      tr.replaceRange(tr.mapping.map(columnPos - 1), tr.mapping.map(columnPos + 1), 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 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)));
+}
+export 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 NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
+}
+export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
+  return function (layout) {
+    return function (state, dispatch) {
+      var _ref = 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: ACTION.CHANGED_LAYOUT,
+          actionSubject: ACTION_SUBJECT.LAYOUT,
+          attributes: {
+            previousLayout: formatLayoutName(selectedLayout),
+            newLayout: formatLayoutName(layout)
+          },
+          eventType: 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 Slice(fixedColumns, 0, 0)
+    };
+  }
+}
+export var fixColumnSizes = function fixColumnSizes(changedTr, state) {
+  var layoutSection = state.schema.nodes.layoutSection;
+  var change;
+  var range = 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;
+};
+export var fixColumnStructure = function fixColumnStructure(state) {
+  var _ref2 = 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;
+};
+export var deleteActiveLayoutNode = function deleteActiveLayoutNode(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _ref3 = 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: ACTION.DELETED,
+          actionSubject: ACTION_SUBJECT.LAYOUT,
+          attributes: {
+            layout: formatLayoutName(selectedLayout)
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(tr);
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var formatLayoutName = function formatLayoutName(layout) {
+  switch (layout) {
+    case 'single':
+      return LAYOUT_TYPE.SINGLE_COL;
+    case 'two_equal':
+      return LAYOUT_TYPE.TWO_COLS_EQUAL;
+    case 'three_equal':
+      return LAYOUT_TYPE.THREE_COLS_EQUAL;
+    case 'two_left_sidebar':
+      return LAYOUT_TYPE.LEFT_SIDEBAR;
+    case 'two_right_sidebar':
+      return LAYOUT_TYPE.RIGHT_SIDEBAR;
+    case 'three_with_sidebars':
+      return LAYOUT_TYPE.THREE_WITH_SIDEBARS;
+  }
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { layoutPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconLayout } from '@atlaskit/editor-common/quick-insert';
+import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
+import { default as createLayoutPlugin } from './pm-plugins/main';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { buildToolbar } from './toolbar';
+export { pluginKey };
+export var 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: layoutSection
+      }, {
+        name: 'layoutColumn',
+        node: layoutColumn
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'layout',
+        plugin: function plugin() {
+          return createLayoutPlugin(options);
+        }
+      }];
+    },
+    actions: {
+      insertLayoutColumns: 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.getState(state),
+          pos = _ref2.pos,
+          allowBreakout = _ref2.allowBreakout,
+          addSidebarLayouts = _ref2.addSidebarLayouts,
+          allowSingleColumnLayout = _ref2.allowSingleColumnLayout;
+        if (pos !== null) {
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+        }
+        return undefined;
+      },
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        return [{
+          id: 'layout',
+          title: formatMessage(messages.columns),
+          description: formatMessage(messages.columnsDescription),
+          keywords: ['column', 'section'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconLayout, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics2;
+            var tr = insert(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: ACTION.INSERTED,
+              actionSubject: ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
+  };
+};

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

@@ -0,0 +1,141 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { filterCommand as filter } from '@atlaskit/editor-common/utils';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from '../actions';
+import { pluginKey } from './plugin-key';
+export var 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 = 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 = findParentNodeOfType(layoutSection)(selection);
+  var column = findParentNodeOfType(layoutColumn)(selection);
+  if (column.node !== section.node.lastChild) {
+    var $nextColumn = state.doc.resolve(column.pos + column.node.nodeSize);
+    var shiftedSelection = 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 [Decoration.node(pos, pos + node.nodeSize, {
+    class: 'selected'
+  })];
+};
+var getInitialPluginState = function getInitialPluginState(options, state) {
+  var maybeLayoutSection = 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 = getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, DEFAULT_LAYOUT);
+  return {
+    pos: pos,
+    allowBreakout: allowBreakout,
+    addSidebarLayouts: addSidebarLayouts,
+    selectedLayout: selectedLayout,
+    allowSingleColumnLayout: allowSingleColumnLayout
+  };
+};
+export default (function (options) {
+  return new SafePlugin({
+    key: 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 = findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+          var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+            selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, pluginState.selectedLayout)
+          });
+          return newPluginState;
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var layoutState = pluginKey.getState(state);
+        if (layoutState.pos !== null) {
+          return DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
+        }
+        return undefined;
+      },
+      handleKeyDown: keydownHandler({
+        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+      }),
+      handleClickOn: 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 = 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 = fixColumnStructure(newState) || tr;
+        if (tr.docChanged) {
+          tr.setSelection(Selection.fromJSON(tr.doc, selection));
+          return tr;
+        }
+      }
+      return;
+    }
+  });
+});

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('layout');

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

@@ -0,0 +1 @@
+export {};