@atlaskit/editor-plugin-layout 0.1.0

package/dist/cjs/toolbar.js

@@ -0,0 +1,118 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _layoutSingle = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-single"));
+var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
+var _layoutThreeWithSidebars = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-with-sidebars"));
+var _layoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-equal"));
+var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-left-sidebar"));
+var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _actions = require("./actions");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var LAYOUT_TYPES = [{
+  id: 'editor.layout.twoEquals',
+  type: 'two_equal',
+  title: _messages.layoutMessages.twoColumns,
+  icon: _layoutTwoEqual.default
+}, {
+  id: 'editor.layout.threeEquals',
+  type: 'three_equal',
+  title: _messages.layoutMessages.threeColumns,
+  icon: _layoutThreeEqual.default
+}];
+var LAYOUT_TYPES_WITH_SINGLE_COL = [{
+  id: 'editor.layout.singeLayout',
+  type: 'single',
+  title: _messages.layoutMessages.singleColumn,
+  icon: _layoutSingle.default
+}].concat(LAYOUT_TYPES);
+var SIDEBAR_LAYOUT_TYPES = [{
+  id: 'editor.layout.twoRightSidebar',
+  type: 'two_right_sidebar',
+  title: _messages.layoutMessages.rightSidebar,
+  icon: _layoutTwoRightSidebar.default
+}, {
+  id: 'editor.layout.twoLeftSidebar',
+  type: 'two_left_sidebar',
+  title: _messages.layoutMessages.leftSidebar,
+  icon: _layoutTwoLeftSidebar.default
+}, {
+  id: 'editor.layout.threeWithSidebars',
+  type: 'three_with_sidebars',
+  title: _messages.layoutMessages.threeColumnsWithSidebars,
+  icon: _layoutThreeWithSidebars.default
+}];
+var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, editorAnalyticsAPI) {
+  return {
+    id: item.id,
+    type: 'button',
+    icon: item.icon,
+    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 buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
+  var _api$decorations$acti, _api$decorations, _api$analytics;
+  var _ref = (_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 = _ref.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);
+  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: _remove.default,
+      testId: _messages.default.remove.id,
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: (0, _actions.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
+    };
+    var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    return {
+      title: layoutToolbarTitle,
+      getDomRef: function getDomRef(view) {
+        return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
+      },
+      nodeType: nodeType,
+      items: [].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);
+      }) : []), [{
+        type: 'copy-button',
+        items: [separator, {
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: nodeType
+        }]
+      }, separator, deleteButton]),
+      scrollable: true
+    };
+  }
+  return;
+};

package/dist/cjs/types.js

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

package/dist/es2019/actions.js

@@ -0,0 +1,328 @@
+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 const ONE_COL_LAYOUTS = ['single'];
+export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
+export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
+const 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 const getPresetLayout = section => {
+  const widths = mapChildren(section, column => 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 const getSelectedLayout = (maybeLayoutSection, current) => {
+  if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
+    return getPresetLayout(maybeLayoutSection) || current;
+  }
+  return current;
+};
+export const createDefaultLayoutSection = state => {
+  const {
+    layoutSection,
+    layoutColumn
+  } = state.schema.nodes;
+
+  // create a 50-50 layout by default
+  const columns = Fragment.fromArray([layoutColumn.createAndFill({
+    width: 50
+  }), layoutColumn.createAndFill({
+    width: 50
+  })]);
+  return layoutSection.createAndFill(undefined, columns);
+};
+export const insertLayoutColumns = (state, dispatch) => {
+  if (dispatch) {
+    dispatch(safeInsert(createDefaultLayoutSection(state))(state.tr));
+  }
+  return true;
+};
+export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMethod => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.INSERTED,
+  actionSubject: ACTION_SUBJECT.DOCUMENT,
+  actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
+  attributes: {
+    inputMethod
+  },
+  eventType: EVENT_TYPE.TRACK
+})(insertLayoutColumns);
+
+/**
+ * Add a column to the right of existing layout
+ */
+function addColumn(schema, pos) {
+  return tr => {
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+  };
+}
+function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {
+  return 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);
+    }
+  };
+}
+const fromTwoColsToThree = addColumn;
+const fromOneColToTwo = addColumn;
+const fromTwoColsToOne = removeLastColumnInLayout;
+const fromThreeColsToTwo = removeLastColumnInLayout;
+const fromOneColToThree = (schema, pos) => {
+  return tr => {
+    addColumn(schema, pos)(tr);
+    addColumn(schema, pos)(tr);
+  };
+};
+const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
+  const thirdColumn = node.content.child(2);
+  fromThreeColsToTwo(thirdColumn, insideRightEdgePos - thirdColumn.nodeSize, insideRightEdgePos)(tr);
+  const 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) {
+  const tr = state.tr;
+  const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  const numCols = node.childCount;
+
+  // 3 columns -> 2 columns
+  if (TWO_COL_LAYOUTS.indexOf(presetLayout) >= 0 && numCols === 3) {
+    const thirdColumn = node.content.child(2);
+    const 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) {
+    const secondColumn = node.content.child(1);
+    const 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) {
+  const {
+    layoutColumn
+  } = schema.nodes;
+  const truncatedWidths = widths.map(w => Number(w.toFixed(2)));
+  return flatmap(node.content, (column, idx) => {
+    if (column.type === layoutColumn) {
+      return layoutColumn.create({
+        ...column.attrs,
+        width: truncatedWidths[idx]
+      }, column.content, column.marks);
+    } else {
+      return column;
+    }
+  });
+}
+function forceColumnWidths(state, tr, pos, presetLayout) {
+  const 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) {
+  let 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.
+  const selection = tr.selection;
+  tr = forceColumnWidths(state, tr, pos, presetLayout);
+  const selectionPos$ = tr.doc.resolve(selection.$from.pos);
+  return tr.setSelection(state.selection instanceof NodeSelection ? new NodeSelection(selectionPos$) : new TextSelection(selectionPos$));
+}
+export const setPresetLayout = editorAnalyticsAPI => layout => (state, dispatch) => {
+  const {
+    pos,
+    selectedLayout
+  } = pluginKey.getState(state);
+  if (selectedLayout === layout || pos === null) {
+    return false;
+  }
+  const node = state.doc.nodeAt(pos);
+  if (!node) {
+    return false;
+  }
+  let tr = forceSectionToPresetLayout(state, node, pos, layout);
+  if (tr) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? 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;
+    }
+    const presetLayout = node.childCount === 2 ? 'two_equal' : node.childCount === 3 ? 'three_equal' : 'single';
+    const fixedColumns = columnWidth(node, schema, getWidthsForPreset(presetLayout));
+    return {
+      from: pos + 1,
+      to: pos + node.nodeSize - 1,
+      slice: new Slice(fixedColumns, 0, 0)
+    };
+  }
+}
+export const fixColumnSizes = (changedTr, state) => {
+  const {
+    layoutSection
+  } = state.schema.nodes;
+  let change;
+  const range = getStepRange(changedTr);
+  if (!range) {
+    return undefined;
+  }
+  changedTr.doc.nodesBetween(range.from, range.to, (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
+  const $pos = changedTr.doc.resolve(range.to);
+  if ($pos.depth > 0) {
+    // 'range.to' position could resolve to doc, in this ResolvedPos.after will throws
+    const pos = $pos.after();
+    const node = changedTr.doc.nodeAt(pos);
+    if (node && node.type === layoutSection && layoutNeedChanges(node)) {
+      change = getLayoutChange(node, pos, state.schema);
+    }
+  }
+  return change;
+};
+export const fixColumnStructure = state => {
+  const {
+    pos,
+    selectedLayout
+  } = pluginKey.getState(state);
+  if (pos !== null && selectedLayout) {
+    const node = state.doc.nodeAt(pos);
+    if (node && node.childCount !== getWidthsForPreset(selectedLayout).length) {
+      return forceSectionToPresetLayout(state, node, pos, selectedLayout);
+    }
+  }
+  return;
+};
+export const deleteActiveLayoutNode = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    pos,
+    selectedLayout
+  } = pluginKey.getState(state);
+  if (pos !== null) {
+    const node = state.doc.nodeAt(pos);
+    if (dispatch) {
+      let tr = state.tr.delete(pos, pos + node.nodeSize);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? 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;
+};
+const 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/es2019/index.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,75 @@
+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 const layoutPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$analytics;
+  return {
+    name: 'layout',
+    nodes() {
+      return [{
+        name: 'layoutSection',
+        node: layoutSection
+      }, {
+        name: 'layoutColumn',
+        node: layoutColumn
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'layout',
+        plugin: () => createLayoutPlugin(options)
+      }];
+    },
+    actions: {
+      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+    },
+    pluginsOptions: {
+      floatingToolbar(state, intl) {
+        const {
+          pos,
+          allowBreakout,
+          addSidebarLayouts,
+          allowSingleColumnLayout
+        } = pluginKey.getState(state);
+        if (pos !== null) {
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api);
+        }
+        return undefined;
+      },
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'layout',
+        title: formatMessage(messages.columns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['column', 'section'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
+        action(insert, state) {
+          var _api$analytics2, _api$analytics2$actio;
+          const tr = insert(createDefaultLayoutSection(state));
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.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/es2019/pm-plugins/main.js

@@ -0,0 +1,142 @@
+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 const DEFAULT_LAYOUT = 'two_equal';
+const isWholeSelectionInsideLayoutColumn = state => {
+  // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
+  const fromParent = findParentNodeOfType(state.schema.nodes.layoutColumn)(state.selection);
+  if (fromParent) {
+    const isToPosInsideSameLayoutColumn = state.selection.from < fromParent.pos + fromParent.node.nodeSize;
+    return isToPosInsideSameLayoutColumn;
+  }
+  return false;
+};
+const moveCursorToNextColumn = (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const {
+    schema: {
+      nodes: {
+        layoutColumn,
+        layoutSection
+      }
+    }
+  } = state;
+  const section = findParentNodeOfType(layoutSection)(selection);
+  const column = findParentNodeOfType(layoutColumn)(selection);
+  if (column.node !== section.node.lastChild) {
+    const $nextColumn = state.doc.resolve(column.pos + column.node.nodeSize);
+    const shiftedSelection = TextSelection.findFrom($nextColumn, 1);
+    if (dispatch) {
+      dispatch(state.tr.setSelection(shiftedSelection));
+    }
+  }
+  return true;
+};
+
+// TODO: Look at memoize-one-ing this fn
+const getNodeDecoration = (pos, node) => [Decoration.node(pos, pos + node.nodeSize, {
+  class: 'selected'
+})];
+const getInitialPluginState = (options, state) => {
+  const maybeLayoutSection = findParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
+  const allowBreakout = options.allowBreakout || false;
+  const addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
+  const allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
+  const pos = maybeLayoutSection ? maybeLayoutSection.pos : null;
+  const selectedLayout = getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, DEFAULT_LAYOUT);
+  return {
+    pos,
+    allowBreakout,
+    addSidebarLayouts,
+    selectedLayout,
+    allowSingleColumnLayout
+  };
+};
+export default (options => new SafePlugin({
+  key: pluginKey,
+  state: {
+    init: (_, state) => getInitialPluginState(options, state),
+    apply: (tr, pluginState, _oldState, newState) => {
+      if (tr.docChanged || tr.selectionSet) {
+        const {
+          schema: {
+            nodes: {
+              layoutSection
+            }
+          },
+          selection
+        } = newState;
+        const maybeLayoutSection = findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+        const newPluginState = {
+          ...pluginState,
+          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+          selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, pluginState.selectedLayout)
+        };
+        return newPluginState;
+      }
+      return pluginState;
+    }
+  },
+  props: {
+    decorations(state) {
+      const 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'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
+      useLongPressSelection: options.useLongPressSelection || false,
+      getNodeSelectionPos: (state, nodePos) => state.doc.resolve(nodePos).before()
+    })
+  },
+  appendTransaction: (transactions, _oldState, newState) => {
+    let changes = [];
+    transactions.forEach(prevTr => {
+      // remap change segments across the transaction set
+      changes.forEach(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;
+      }
+      const change = fixColumnSizes(prevTr, newState);
+      if (change) {
+        changes.push(change);
+      }
+    });
+    if (changes.length) {
+      let tr = newState.tr;
+      const selection = newState.selection.toJSON();
+      changes.forEach(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/es2019/pm-plugins/plugin-key.js

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

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

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