@atlaskit/editor-plugin-expand 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.3.2
+
+### Patch Changes
+
+- [#89345](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89345) [`80a9a5da9ce4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80a9a5da9ce4) - [ED-22840] Build the base functionality of the new single player expand which will be used for live view pages. Single player expand will only be used if `platform.editor.single-player-expand` is true and livePage is enabled.
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/cjs/singlePlayerExpand/commands.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateExpandTitle = exports.setSelectionInsideExpand = exports.insertExpand = exports.focusTitle = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _steps = require("@atlaskit/adf-schema/steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _transforms = require("@atlaskit/editor-common/transforms");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("@atlaskit/editor-tables/utils");
+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; }
+// Creates either an expand or a nestedExpand node based on the current selection
+var createExpandNode = exports.createExpandNode = function createExpandNode(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    expand = _state$schema$nodes.expand,
+    nestedExpand = _state$schema$nodes.nestedExpand;
+  var expandType = (0, _utils3.findTable)(state.selection) ? nestedExpand : expand;
+  return expandType.createAndFill({});
+};
+var insertExpand = exports.insertExpand = function insertExpand(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var expandNode = createExpandNode(state);
+    if (!expandNode) {
+      return false;
+    }
+    var tr = state.selection.empty ? (0, _utils2.safeInsert)(expandNode)(state.tr).scrollIntoView() : (0, _utils.createWrapSelectionTransaction)({
+      state: state,
+      type: expandNode.type
+    });
+    var payload = {
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT_ID.EXPAND : _analytics.ACTION_SUBJECT_ID.NESTED_EXPAND,
+      attributes: {
+        inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    };
+    if (dispatch && expandNode) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var deleteExpand = exports.deleteExpand = function deleteExpand(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var expandNode = (0, _transforms.findExpand)(state);
+    if (!expandNode) {
+      return false;
+    }
+    return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
+  };
+};
+var deleteExpandAtPos = exports.deleteExpandAtPos = function deleteExpandAtPos(editorAnalyticsAPI) {
+  return function (expandNodePos, expandNode) {
+    return function (state, dispatch) {
+      if (!expandNode || isNaN(expandNodePos)) {
+        return false;
+      }
+      var payload = {
+        action: _analytics.ACTION.DELETED,
+        actionSubject: expandNode.type === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
+        attributes: {
+          inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+      if (expandNode && dispatch) {
+        var tr = state.tr;
+        tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+
+// Used to clear any node or cell selection when expand title is focused
+var setSelectionInsideExpand = exports.setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {
+  return function (state, dispatch, editorView) {
+    if (editorView) {
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+      var sel = _state.Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
+      if (sel && dispatch) {
+        dispatch(editorView.state.tr.setSelection(sel));
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(_ref) {
+  var title = _ref.title,
+    nodeType = _ref.nodeType,
+    pos = _ref.pos;
+  return function (state, dispatch) {
+    var node = state.doc.nodeAt(pos);
+    if (node && node.type === nodeType && dispatch) {
+      var tr = state.tr;
+      tr.step(new _steps.SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        title: title
+      })));
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var focusTitle = exports.focusTitle = function focusTitle(pos) {
+  return function (state, dispatch, editorView) {
+    if (editorView) {
+      var dom = editorView.domAtPos(pos);
+      var expandWrapper = dom.node.parentElement;
+      if (expandWrapper) {
+        setSelectionInsideExpand(pos)(state, dispatch, editorView);
+        var input = expandWrapper.querySelector('input');
+        if (input) {
+          input.focus();
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+};

package/dist/cjs/singlePlayerExpand/node-views/index.js

@@ -0,0 +1,381 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandNodeView = void 0;
+exports.default = _default;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _w3cKeyname = require("w3c-keyname");
+var _selection = require("@atlaskit/editor-common/selection");
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("../commands");
+var _NodeView = require("../ui/NodeView");
+var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
+  function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
+    var _this = this;
+    var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+    var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+    (0, _classCallCheck2.default)(this, ExpandNodeView);
+    (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
+    (0, _defineProperty2.default)(this, "isMobile", false);
+    (0, _defineProperty2.default)(this, "focusTitle", function () {
+      if (_this.input) {
+        var _this$view = _this.view,
+          state = _this$view.state,
+          dispatch = _this$view.dispatch;
+        if (_this.selectNearNode) {
+          var tr = _this.selectNearNode({
+            selectionRelativeToNode: _selection.RelativeSelectionPos.Start
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        }
+        var pos = _this.getPos();
+        if (typeof pos === 'number') {
+          (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
+        }
+        _this.input.focus();
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleIconKeyDown", function (event) {
+      switch ((0, _w3cKeyname.keyName)(event)) {
+        case 'Tab':
+          event.preventDefault();
+          _this.focusTitle();
+          break;
+        case 'Enter':
+          event.preventDefault();
+          _this.handleClick(event);
+          break;
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleClick", function (event) {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var target = event.target;
+      if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
+        if (!_this.allowInteractiveExpand) {
+          return;
+        }
+        event.stopPropagation();
+
+        // We blur the editorView, to prevent any keyboard showing on mobile
+        // When we're interacting with the expand toggle
+        if (_this.view.dom instanceof HTMLElement) {
+          _this.view.dom.blur();
+        }
+
+        // TODO https://product-fabric.atlassian.net/browse/ED-22841
+        // call toggleExpandExpanded
+
+        return;
+      }
+      if (target === _this.input) {
+        event.stopPropagation();
+        _this.focusTitle();
+        return;
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleInput", function (event) {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var target = event.target;
+      if (target === _this.input) {
+        event.stopPropagation();
+        var _this$view2 = _this.view,
+          state = _this$view2.state,
+          dispatch = _this$view2.dispatch;
+        (0, _commands.updateExpandTitle)({
+          title: target.value,
+          pos: pos,
+          nodeType: _this.node.type
+        })(state, dispatch);
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleFocus", function (event) {
+      event.stopImmediatePropagation();
+    });
+    (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
+      switch ((0, _w3cKeyname.keyName)(event)) {
+        case 'Enter':
+          // TO-DO
+          break;
+        case 'Tab':
+        case 'ArrowDown':
+          _this.moveToOutsideOfTitle(event);
+          break;
+        case 'ArrowRight':
+          _this.handleArrowRightFromTitle(event);
+          break;
+        case 'ArrowLeft':
+          _this.handleArrowLeftFromTitle(event);
+          break;
+        case 'ArrowUp':
+          _this.setLeftGapCursor(event);
+          break;
+        case 'Backspace':
+          _this.deleteEmptyExpand();
+          break;
+      }
+    });
+    (0, _defineProperty2.default)(this, "deleteEmptyExpand", function () {
+      var state = _this.view.state;
+      var expandNode = _this.node;
+      if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
+        var _this$api;
+        (0, _commands.deleteExpand)((_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions)(state, _this.view.dispatch);
+      }
+    });
+    (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
+      event.preventDefault();
+      var _this$view3 = _this.view,
+        state = _this$view3.state,
+        dispatch = _this$view3.dispatch;
+      var expandPos = _this.getPos();
+      if (typeof expandPos !== 'number') {
+        return;
+      }
+      var pos = expandPos;
+      if (_this.isCollapsed()) {
+        pos = expandPos + _this.node.nodeSize;
+      }
+      var resolvedPos = state.doc.resolve(pos);
+      if (!resolvedPos) {
+        return;
+      }
+      if (_this.isCollapsed() && resolvedPos.nodeAfter && ['expand', 'nestedExpand'].indexOf(resolvedPos.nodeAfter.type.name) > -1) {
+        return _this.setRightGapCursor(event);
+      }
+      var sel = _state.Selection.findFrom(resolvedPos, 1, true);
+      if (sel) {
+        // If the input has focus, ProseMirror doesn't
+        // Give PM focus back before changing our selection
+        _this.view.focus();
+        dispatch(state.tr.setSelection(sel));
+      }
+    });
+    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
+    (0, _defineProperty2.default)(this, "isCollapsed", function () {
+      return false;
+    });
+    (0, _defineProperty2.default)(this, "setRightGapCursor", function (event) {
+      if (!_this.input) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input = _this.input,
+        value = _this$input.value,
+        selectionStart = _this$input.selectionStart,
+        selectionEnd = _this$input.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        var _this$view4 = _this.view,
+          state = _this$view4.state,
+          dispatch = _this$view4.dispatch;
+        event.preventDefault();
+        _this.view.focus();
+        dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), _selection.Side.RIGHT)));
+      }
+    });
+    (0, _defineProperty2.default)(this, "setLeftGapCursor", function (event) {
+      if (!_this.input) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input2 = _this.input,
+        selectionStart = _this$input2.selectionStart,
+        selectionEnd = _this$input2.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        event.preventDefault();
+        var _this$view5 = _this.view,
+          state = _this$view5.state,
+          dispatch = _this$view5.dispatch;
+        _this.view.focus();
+        dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(pos), _selection.Side.LEFT)));
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleArrowRightFromTitle", function (event) {
+      if (!_this.input || !_this.selectNearNode) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input3 = _this.input,
+        value = _this$input3.value,
+        selectionStart = _this$input3.selectionStart,
+        selectionEnd = _this$input3.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        event.preventDefault();
+        var _this$view6 = _this.view,
+          state = _this$view6.state,
+          dispatch = _this$view6.dispatch;
+        _this.view.focus();
+        var tr = _this.selectNearNode({
+          selectionRelativeToNode: _selection.RelativeSelectionPos.End,
+          selection: _state.NodeSelection.create(state.doc, pos)
+        })(state);
+        if (dispatch) {
+          dispatch(tr);
+        }
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleArrowLeftFromTitle", function (event) {
+      if (!_this.input || !_this.selectNearNode) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input4 = _this.input,
+        selectionStart = _this$input4.selectionStart,
+        selectionEnd = _this$input4.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        var _this$api2;
+        event.preventDefault();
+        var _this$view7 = _this.view,
+          state = _this$view7.state,
+          dispatch = _this$view7.dispatch;
+        _this.view.focus();
+        var selectionSharedState = ((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selection) === null || _this$api2 === void 0 ? void 0 : _this$api2.sharedState.currentState()) || {};
+        // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
+        // This is a special case where we want to bypass node selection and jump straight to gap cursor
+        if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
+          var tr = _this.selectNearNode({
+            selectionRelativeToNode: undefined,
+            selection: new _selection.GapCursorSelection(state.doc.resolve(pos), _selection.Side.LEFT)
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        } else {
+          var _tr = _this.selectNearNode({
+            selectionRelativeToNode: _selection.RelativeSelectionPos.Start,
+            selection: _state.NodeSelection.create(state.doc, pos)
+          })(state);
+          if (dispatch) {
+            dispatch(_tr);
+          }
+        }
+      }
+    });
+    this.selectNearNode = selectNearNode;
+    this.__livePage = __livePage;
+    this.intl = getIntl();
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(node, this.__livePage, this.intl)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.allowInteractiveExpand = allowInteractiveExpand;
+    this.getPos = getPos;
+    this.view = view;
+    this.node = node;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.isMobile = isMobile;
+    this.api = api;
+    this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
+    this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
+    this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
+    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, this.intl);
+    if (!this.input || !this.titleContainer || !this.icon) {
+      return;
+    }
+
+    // Add event listeners
+    /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners*/
+    this.dom.addEventListener('click', this.handleClick);
+    this.dom.addEventListener('input', this.handleInput);
+    this.input.addEventListener('keydown', this.handleTitleKeydown);
+    // If the user interacts in our title bar (either toggle or input)
+    // Prevent ProseMirror from getting a focus event (causes weird selection issues).
+    this.titleContainer.addEventListener('focus', this.handleFocus);
+    this.icon.addEventListener('keydown', this.handleIconKeyDown);
+  }
+  (0, _createClass2.default)(ExpandNodeView, [{
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      var target = event.target;
+      return target === this.input || target === this.icon || !!(0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon));
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutationRecord) {
+      // ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
+      // does not recognise the changes and reverts them.
+      if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
+        return false;
+      }
+      if (mutationRecord.type === 'selection') {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "update",
+    value: function update(node, _decorations) {
+      var _this2 = this;
+      if (this.node.type === node.type) {
+        // TODO: https://product-fabric.atlassian.net/browse/ED-22841
+        // Handle toggling of the expand on update here
+
+        // During a collab session the title doesn't sync with other users
+        // since we're intentionally being less aggressive about re-rendering.
+        // We also apply a rAF to avoid abrupt continuous replacement of the title.
+        window.requestAnimationFrame(function () {
+          if (_this2.input && _this2.node.attrs.title !== _this2.input.value) {
+            _this2.input.value = _this2.node.attrs.title;
+          }
+        });
+        this.node = node;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
+        return;
+      }
+      this.dom.removeEventListener('click', this.handleClick);
+      this.dom.removeEventListener('input', this.handleInput);
+      this.input.removeEventListener('keydown', this.handleTitleKeydown);
+      this.titleContainer.removeEventListener('focus', this.handleFocus);
+      this.icon.removeEventListener('keydown', this.handleIconKeyDown);
+      _reactDom.default.unmountComponentAtNode(this.icon);
+    }
+  }]);
+  return ExpandNodeView;
+}();
+function _default(_ref) {
+  var getIntl = _ref.getIntl,
+    isMobile = _ref.isMobile,
+    api = _ref.api,
+    _ref$allowInteractive = _ref.allowInteractiveExpand,
+    allowInteractiveExpand = _ref$allowInteractive === void 0 ? true : _ref$allowInteractive,
+    __livePage = _ref.__livePage;
+  return function (node, view, getPos) {
+    var _api$selection;
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, allowInteractiveExpand, __livePage);
+  };
+}

package/dist/cjs/singlePlayerExpand/plugin.js

@@ -1,15 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.expandPlugin = void 0;
+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 _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-// TODO: https://product-fabric.atlassian.net/browse/ED-22840
-// In ED-22840 make sure we update the ExpandPlugin type to use singlePlayerExpands own types
-
-var expandPlugin = exports.expandPlugin = function expandPlugin() {
+var _commands = require("./commands");
+var _keymap = require("./pm-plugins/keymap");
+var _main = require("./pm-plugins/main");
+var _toolbar = require("./toolbar");
+var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
+  var _api$analytics;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
   return {
     name: 'expand',
     nodes: function nodes() {
@@ -23,13 +34,65 @@ var expandPlugin = exports.expandPlugin = function expandPlugin() {
       }];
     },
     actions: {
-      insertExpand: function insertExpand() {
-        return false;
-      }
+      insertExpand: (0, _commands.insertExpand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
     },
     pmPlugins: function pmPlugins() {
-      return [];
+      return [{
+        name: 'expand',
+        plugin: function plugin(_ref2) {
+          var _options$allowInterac;
+          var dispatch = _ref2.dispatch,
+            getIntl = _ref2.getIntl;
+          return (0, _main.createPlugin)(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
+        }
+      }, {
+        name: 'expandKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.expandKeymap)(api, {
+            __livePage: options.__livePage
+          });
+        }
+      }];
     },
-    pluginsOptions: {}
+    pluginsOptions: {
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(api),
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        if (options && options.allowInsertion !== true) {
+          return [];
+        }
+        return [{
+          id: 'expand',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.expand),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.expandDescription),
+          keywords: ['accordion', 'collapse'],
+          priority: 600,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconExpand, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics2;
+            var node = (0, _commands.createExpandNode)(state);
+            if (!node) {
+              return false;
+            }
+            var tr = state.selection.empty ? insert(node) : (0, _utils.createWrapSelectionTransaction)({
+              state: state,
+              type: node.type
+            });
+            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: node.type === state.schema.nodes.nestedExpand ? _analytics.ACTION_SUBJECT_ID.NESTED_EXPAND : _analytics.ACTION_SUBJECT_ID.EXPAND,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
   };
 };