@atlaskit/editor-plugin-expand 0.1.0

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

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandKeymap = expandKeymap;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _selection = require("@atlaskit/editor-common/selection");
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("../commands");
+var _utils2 = require("../utils");
+var isExpandNode = function isExpandNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
+};
+var isExpandSelected = function isExpandSelected(selection) {
+  return selection instanceof _state.NodeSelection && isExpandNode(selection.node);
+};
+function expandKeymap(api) {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && selectionRelativeToNode === _selection.RelativeSelectionPos.Start) {
+      return (0, _commands.focusTitle)(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === _selection.RelativeSelectionPos.End)) {
+      return (0, _commands.focusTitle)(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch, editorView) {
+    if (state.selection instanceof _state.NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
+      var from = state.selection.from;
+      var expand = editorView.nodeDOM(from);
+      if (!expand || !(expand instanceof HTMLElement)) {
+        return false;
+      }
+      var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
+      if (iconContainer && iconContainer.focus) {
+        var tr = state.tr;
+        var pos = state.selection.from;
+        tr.setSelection(new _state.TextSelection(tr.doc.resolve(pos)));
+        if (dispatch) {
+          dispatch(tr);
+        }
+        editorView.dom.blur();
+        iconContainer.focus();
+      }
+      return true;
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection,
+      schema = state.schema;
+    var nodeBefore = selection.$from.nodeBefore;
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && !nodeBefore.attrs.__expanded) {
+      var _$from = selection.$from;
+      return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
+    }
+    var $from = state.selection.$from;
+    if (editorView.endOfTextblock('up')) {
+      var expand = (0, _utils2.findExpand)(state);
+
+      // Moving UP in a table should move the cursor to the row above
+      // however when an expand is in a table cell to the left of the
+      // current table cell, arrow UP moves the cursor to the left
+      // see ED-15425
+      if ((0, _utils.isPositionNearTableRow)($from, schema, 'before') && !expand) {
+        return false;
+      }
+      var prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0);
+      // move cursor from expand's content to its title
+      if (expand && expand.start === prevCursorPos) {
+        return (0, _commands.focusTitle)(expand.start)(state, dispatch, editorView);
+      }
+      var sel = _state.Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
+      var expandBefore = (0, _utils2.findExpand)(state, sel);
+      if (sel && expandBefore) {
+        // moving cursor from outside of an expand to the title when it is collapsed
+        if (!expandBefore.node.attrs.__expanded) {
+          return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+        }
+        // moving cursor from outside of an expand to the content when it is expanded
+        else if (dispatch) {
+          dispatch(state.tr.setSelection(sel));
+        }
+        return true;
+      }
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var _state$schema$nodes = state.schema.nodes,
+      expand = _state$schema$nodes.expand,
+      nestedExpand = _state$schema$nodes.nestedExpand;
+    var selection = state.selection;
+    var nodeAfter = selection.$from.nodeAfter;
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && !nodeAfter.attrs.__expanded) {
+      var $from = selection.$from;
+      return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
+    }
+    if (editorView.endOfTextblock('down')) {
+      var _$from2 = state.selection.$from;
+      if (_$from2.depth === 0) {
+        return false;
+      }
+      var $after = state.doc.resolve(_$from2.after());
+      if ($after.nodeAfter && ($after.nodeAfter.type === expand || $after.nodeAfter.type === nestedExpand)) {
+        return (0, _commands.focusTitle)($after.pos + 1)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, function (state, dispatch, editorView) {
+    var selection = state.selection;
+    var $from = selection.$from;
+    if (!editorView || !selection.empty) {
+      return false;
+    }
+    var _state$schema$nodes2 = state.schema.nodes,
+      expand = _state$schema$nodes2.expand,
+      nestedExpand = _state$schema$nodes2.nestedExpand;
+    var expandNode = (0, _utils2.findExpand)(state);
+    if (!expandNode) {
+      // @see ED-7977
+      var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
+      var expandBefore = (0, _utils2.findExpand)(state, sel);
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && !expandBefore.node.attrs.__expanded) {
+        return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+      }
+      return false;
+    }
+    var parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1)));
+    // ED-10012 catch cases where the expand has another node nested within it and
+    // the backspace should be applied only to the inner node instead of the expand
+    if (parentNode && !isExpandNode(parentNode)) {
+      return false;
+    }
+    var textSel = _state.Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
+    if (textSel && selection.$from.pos === textSel.$from.pos && (0, _utils.isEmptyNode)(state.schema)(expandNode.node) && dispatch) {
+      var _api$analytics;
+      return (0, _commands.deleteExpand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
+    }
+    return false;
+  }, list);
+  return (0, _keymap.keymap)(list);
+}

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containsClass = containsClass;
+exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection = require("@atlaskit/editor-common/selection");
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _commands = require("../commands");
+var _nodeviews = _interopRequireDefault(require("../nodeviews"));
+var _utils2 = require("../utils");
+var _pluginFactory = require("./plugin-factory");
+function containsClass(element, className) {
+  var _element$classList;
+  return Boolean(element === null || element === void 0 || (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
+}
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, getIntl) {
+  var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
+  var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var featureFlags = arguments.length > 4 ? arguments[4] : undefined;
+  var api = arguments.length > 5 ? arguments[5] : undefined;
+  var state = (0, _pluginFactory.createPluginState)(dispatch, {});
+  var isMobile = appearance === 'mobile';
+  return new _safePlugin.SafePlugin({
+    state: state,
+    key: _pluginFactory.pluginKey,
+    props: {
+      nodeViews: {
+        expand: (0, _nodeviews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          featureFlags: featureFlags,
+          api: api
+        }),
+        nestedExpand: (0, _nodeviews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          featureFlags: featureFlags,
+          api: api
+        })
+      },
+      handleKeyDown: function handleKeyDown(_view, event) {
+        return containsClass(event.target, _styles.expandClassNames.titleContainer);
+      },
+      handleKeyPress: function handleKeyPress(_view, event) {
+        return containsClass(event.target, _styles.expandClassNames.titleContainer);
+      },
+      handleScrollToSelection: function handleScrollToSelection() {
+        return containsClass(document.activeElement, _styles.expandClassNames.titleInput);
+      },
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['expand', 'nestedExpand'], function (target) {
+        return target.classList.contains(_styles.expandClassNames.prefix);
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    },
+    // @see ED-8027 to follow up on this work-around
+    filterTransaction: function filterTransaction(tr) {
+      if (containsClass(document.activeElement, _styles.expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
+        return false;
+      }
+      return true;
+    },
+    view: function view(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      return {
+        update: function update(view) {
+          var state = view.state,
+            dispatch = view.dispatch;
+          var node = (0, _utils2.findExpand)(state);
+          if (node) {
+            var expandRef = (0, _utils.findDomRefAtPos)(node.pos, domAtPos);
+            if ((0, _pluginFactory.getPluginState)(state).expandRef !== expandRef) {
+              (0, _commands.setExpandRef)(expandRef)(state, dispatch);
+            }
+          }
+        }
+      };
+    }
+  });
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _reducer = _interopRequireDefault(require("../reducer"));
+var pluginKey = exports.pluginKey = new _state.PluginKey('expandPlugin');
+var _pluginFactory = (0, _utils.pluginFactory)(pluginKey, _reducer.default),
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;

package/dist/cjs/reducer.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@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) { (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 = exports.default = function _default(pluginState, action) {
+  switch (action.type) {
+    case 'SET_EXPAND_REF':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        expandRef: action.data.ref
+      });
+    default:
+      return pluginState;
+  }
+};

package/dist/cjs/toolbar.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarConfig = void 0;
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _commands = require("./commands");
+var _pluginFactory = require("./pm-plugins/plugin-factory");
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(api) {
+  return function (state, _ref) {
+    var _api$decorations$acti, _api$decorations, _api$analytics;
+    var formatMessage = _ref.formatMessage;
+    var _ref2 = (_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 = _ref2.hoverDecoration;
+    var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      expandRef = _getPluginState.expandRef;
+    if (expandRef) {
+      var _state$schema$nodes = state.schema.nodes,
+        nestedExpand = _state$schema$nodes.nestedExpand,
+        expand = _state$schema$nodes.expand;
+      return {
+        title: 'Expand toolbar',
+        getDomRef: function getDomRef() {
+          return expandRef;
+        },
+        nodeType: [nestedExpand, expand],
+        offset: [0, 6],
+        items: [{
+          type: 'copy-button',
+          items: [{
+            state: state,
+            formatMessage: formatMessage,
+            nodeType: [nestedExpand, expand]
+          }, {
+            type: 'separator'
+          }]
+        }, {
+          id: 'editor.expand.delete',
+          type: 'button',
+          appearance: 'danger',
+          focusEditoronEnter: true,
+          icon: _remove.default,
+          onClick: (0, _commands.deleteExpand)(editorAnalyticsAPI),
+          onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
+          onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
+          onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
+          onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
+          title: formatMessage(_messages.default.remove),
+          tabIndex: null
+        }]
+      };
+    }
+    return;
+  };
+};

package/dist/cjs/types.js

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

package/dist/cjs/ui/ExpandIconButton.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withTooltip = exports.ExpandIconButton = exports.CustomButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _excluded = ["buttonStyles"];
+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; }
+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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var withTooltip = exports.withTooltip = function withTooltip(WrapperComponent) {
+  return /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(WithSortableColumn, _React$Component);
+    var _super = _createSuper(WithSortableColumn);
+    function WithSortableColumn(props) {
+      (0, _classCallCheck2.default)(this, WithSortableColumn);
+      return _super.call(this, props);
+    }
+    (0, _createClass2.default)(WithSortableColumn, [{
+      key: "render",
+      value: function render() {
+        var label = this.props.label;
+        return (0, _react2.jsx)(_tooltip.default, {
+          content: label,
+          position: "top",
+          tag: _ui.ExpandLayoutWrapperWithRef
+        }, (0, _react2.jsx)(WrapperComponent, this.props));
+      }
+    }]);
+    return WithSortableColumn;
+  }(_react.default.Component);
+};
+var CustomButton = exports.CustomButton = function CustomButton(props) {
+  var label = props.label,
+    allowInteractiveExpand = props.allowInteractiveExpand;
+  var useTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
+    var _currentTheme = currentTheme(themeProps),
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded);
+    return _objectSpread({
+      buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
+        height: '100%',
+        '& svg': {
+          transform: props.expanded ? 'transform: rotate(90deg);' : 'transform: rotate(0deg);',
+          transition: "transform 0.2s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ";")
+        }
+      })
+    }, rest);
+  }, [props]);
+  return (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    className: _styles.expandClassNames.iconContainer,
+    iconBefore: (0, _react2.jsx)(_chevronRight.default, {
+      label: label
+    }),
+    shouldFitContainer: true,
+    theme: useTheme,
+    isDisabled: !allowInteractiveExpand
+  });
+};
+var ButtonWithTooltip = withTooltip(CustomButton);
+var ButtonWithoutTooltip = CustomButton;
+var ExpandIconButton = exports.ExpandIconButton = function ExpandIconButton(props) {
+  var expanded = props.expanded,
+    intl = props.intl;
+  var message = expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode;
+  var label = intl && intl.formatMessage(message) || message.defaultMessage;
+  // check to ensure device supports any-hover
+  var supportsAnyHover = !!window.matchMedia ? window.matchMedia('(any-hover: hover)').matches !== window.matchMedia('(any-hover: none)').matches : false;
+  var hoverEventCheck = supportsAnyHover ? window.matchMedia('(any-hover: hover)').matches : true;
+
+  // hoverEventCheck is to disable tooltips for mobile to prevent incorrect hover state causing issues on iOS
+  if (props.allowInteractiveExpand && hoverEventCheck) {
+    return (0, _react2.jsx)(ButtonWithTooltip, (0, _extends2.default)({
+      label: label
+    }, props));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _ui.expandLayoutWrapperStyle
+    }, (0, _react2.jsx)(ButtonWithoutTooltip, (0, _extends2.default)({
+      label: label
+    }, props)))
+  );
+};

package/dist/cjs/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "findExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.findExpand;
+  }
+});
+Object.defineProperty(exports, "transformSliceNestedExpandToExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceNestedExpandToExpand;
+  }
+});
+Object.defineProperty(exports, "transformSliceToRemoveOpenExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceToRemoveOpenExpand;
+  }
+});
+var _transforms = require("@atlaskit/editor-common/transforms");

package/dist/es2019/commands.js

@@ -0,0 +1,161 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { createCommand } from './pm-plugins/plugin-factory';
+import { findExpand } from './utils';
+export const setExpandRef = ref => createCommand({
+  type: 'SET_EXPAND_REF',
+  data: {
+    ref
+  }
+}, tr => tr.setMeta('addToHistory', false));
+export const deleteExpandAtPos = editorAnalyticsAPI => (expandNodePos, expandNode) => (state, dispatch) => {
+  if (!expandNode || isNaN(expandNodePos)) {
+    return false;
+  }
+  const payload = {
+    action: ACTION.DELETED,
+    actionSubject: expandNode.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+  if (expandNode && dispatch) {
+    const {
+      tr
+    } = state;
+    tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const deleteExpand = editorAnalyticsAPI => (state, dispatch) => {
+  const expandNode = findExpand(state);
+  if (!expandNode) {
+    return false;
+  }
+  return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
+};
+export const updateExpandTitle = (title, pos, nodeType) => (state, dispatch) => {
+  const node = state.doc.nodeAt(pos);
+  if (node && node.type === nodeType && dispatch) {
+    const {
+      tr
+    } = state;
+    tr.setNodeMarkup(pos, node.type, {
+      ...node.attrs,
+      title
+    }, node.marks);
+    dispatch(tr);
+  }
+  return true;
+};
+export const toggleExpandExpanded = editorAnalyticsAPI => (pos, nodeType) => (state, dispatch) => {
+  const node = state.doc.nodeAt(pos);
+  if (node && node.type === nodeType && dispatch) {
+    const {
+      tr
+    } = state;
+    const isExpandedNext = !node.attrs.__expanded;
+    tr.setNodeMarkup(pos, node.type, {
+      ...node.attrs,
+      __expanded: isExpandedNext
+    }, node.marks);
+
+    // If we're going to collapse the expand and our cursor is currently inside
+    // Move to a right gap cursor, if the toolbar is interacted (or an API),
+    // it will insert below rather than inside (which will be invisible).
+    if (isExpandedNext === false && findExpand(state)) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), Side.RIGHT));
+    }
+
+    // log when people open/close expands
+    // TODO: ED-8523 make platform/mode global attributes?
+    const payload = {
+      action: ACTION.TOGGLE_EXPAND,
+      actionSubject: nodeType === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        mode: MODE.EDITOR,
+        expanded: isExpandedNext
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+
+    // `isRemote` meta prevents this step from being
+    // sync'd between sessions in collab edit
+    tr.setMeta('isRemote', true);
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+
+// Creates either an expand or a nestedExpand node based on the current selection
+export const createExpandNode = state => {
+  const {
+    expand,
+    nestedExpand
+  } = state.schema.nodes;
+  const expandType = findTable(state.selection) ? nestedExpand : expand;
+  return expandType.createAndFill({});
+};
+export const insertExpand = editorAnalyticsAPI => (state, dispatch) => {
+  const expandNode = createExpandNode(state);
+  if (!expandNode) {
+    return false;
+  }
+  const tr = state.selection.empty ? safeInsert(expandNode)(state.tr).scrollIntoView() : createWrapSelectionTransaction({
+    state,
+    type: expandNode.type
+  });
+  const payload = {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? ACTION_SUBJECT_ID.EXPAND : ACTION_SUBJECT_ID.NESTED_EXPAND,
+    attributes: {
+      inputMethod: INPUT_METHOD.INSERT_MENU
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+  if (dispatch && expandNode) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const focusTitle = pos => (state, dispatch, editorView) => {
+  if (editorView) {
+    const dom = editorView.domAtPos(pos);
+    const expandWrapper = dom.node.parentElement;
+    if (expandWrapper) {
+      setSelectionInsideExpand(pos)(state, dispatch, editorView);
+      const input = expandWrapper.querySelector('input');
+      if (input) {
+        input.focus();
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// Used to clear any node or cell selection when expand title is focused
+export const setSelectionInsideExpand = expandPos => (state, dispatch, editorView) => {
+  if (editorView) {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    const sel = Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
+    if (sel && dispatch) {
+      dispatch(editorView.state.tr.setSelection(sel));
+    }
+    return true;
+  }
+  return false;
+};

package/dist/es2019/index.js

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