@atlaskit/editor-plugin-expand 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.4.1
+
+### Patch Changes
+
+- [#90897](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90897) [`6a1d609df65e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a1d609df65e) - [ux] [ED-22841] Implement new state management for the single player expand and handle the expanding behaviour based on this. Single player expand will only be used if `platform.editor.single-player-expand` is true and livePage is enabled.
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/singlePlayerExpand/commands.js

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExpandTitle = exports.setSelectionInsideExpand = exports.insertExpand = exports.focusTitle = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
+exports.updateExpandTitle = exports.toggleExpandExpanded = 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 _expand = require("@atlaskit/editor-common/expand");
+var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -21,7 +23,9 @@ var createExpandNode = exports.createExpandNode = function createExpandNode(stat
     expand = _state$schema$nodes.expand,
     nestedExpand = _state$schema$nodes.nestedExpand;
   var expandType = (0, _utils3.findTable)(state.selection) ? nestedExpand : expand;
-  return expandType.createAndFill({});
+  var expandNode = expandType.createAndFill({});
+  _expand.expandedState.set(expandNode, true);
+  return expandNode;
 };
 var insertExpand = exports.insertExpand = function insertExpand(editorAnalyticsAPI) {
   return function (state, dispatch) {
@@ -99,10 +103,47 @@ var setSelectionInsideExpand = exports.setSelectionInsideExpand = function setSe
     return false;
   };
 };
-var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(_ref) {
-  var title = _ref.title,
-    nodeType = _ref.nodeType,
-    pos = _ref.pos;
+var toggleExpandExpanded = exports.toggleExpandExpanded = function toggleExpandExpanded(_ref) {
+  var editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    pos = _ref.pos,
+    node = _ref.node;
+  return function (state, dispatch) {
+    if (node && dispatch) {
+      var _expandedState$get;
+      var tr = state.tr;
+      var expanded = (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
+      var isExpandedNext = !expanded;
+      _expand.expandedState.set(node, isExpandedNext);
+
+      // 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 === true) {
+        tr.setSelection(new _selection.GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), _selection.Side.RIGHT));
+      }
+
+      // log when people open/close expands
+      // TODO: ED-8523 make platform/mode global attributes?
+      var payload = {
+        action: _analytics.ACTION.TOGGLE_EXPAND,
+        actionSubject: node.type === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
+        attributes: {
+          platform: _analytics.PLATFORMS.WEB,
+          mode: _analytics.MODE.EDITOR,
+          expanded: isExpandedNext
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(_ref2) {
+  var title = _ref2.title,
+    nodeType = _ref2.nodeType,
+    pos = _ref2.pos;
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
     if (node && node.type === nodeType && dispatch) {

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

@@ -11,6 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _w3cKeyname = require("w3c-keyname");
+var _expand = require("@atlaskit/editor-common/expand");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -67,6 +68,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
       var target = event.target;
       if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
+        var _this$api2;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -77,10 +79,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (_this.view.dom instanceof HTMLElement) {
           _this.view.dom.blur();
         }
-
-        // TODO https://product-fabric.atlassian.net/browse/ED-22841
-        // call toggleExpandExpanded
-
+        (0, _commands.toggleExpandExpanded)({
+          editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
+          pos: pos,
+          node: _this.node
+        })(_this.view.state, _this.view.dispatch);
+        _this.updateExpandClassName();
         return;
       }
       if (target === _this.input) {
@@ -117,7 +121,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
       switch ((0, _w3cKeyname.keyName)(event)) {
         case 'Enter':
-          // TO-DO
+          _this.toggleExpand();
           break;
         case 'Tab':
         case 'ArrowDown':
@@ -150,15 +154,33 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api2;
-        (0, _commands.deleteExpand)((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(state, _this.view.dispatch);
+        var _this$api3;
+        (0, _commands.deleteExpand)((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(state, _this.view.dispatch);
+      }
+    });
+    (0, _defineProperty2.default)(this, "toggleExpand", function () {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      if (_this.allowInteractiveExpand) {
+        var _this$api4;
+        var _this$view3 = _this.view,
+          state = _this$view3.state,
+          dispatch = _this$view3.dispatch;
+        (0, _commands.toggleExpandExpanded)({
+          editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
+          pos: pos,
+          node: _this.node
+        })(state, dispatch);
+        _this.updateExpandClassName();
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
       event.preventDefault();
-      var _this$view3 = _this.view,
-        state = _this$view3.state,
-        dispatch = _this$view3.dispatch;
+      var _this$view4 = _this.view,
+        state = _this$view4.state,
+        dispatch = _this$view4.dispatch;
       var expandPos = _this.getPos();
       if (typeof expandPos !== 'number') {
         return;
@@ -182,9 +204,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         dispatch(state.tr.setSelection(sel));
       }
     });
-    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
     (0, _defineProperty2.default)(this, "isCollapsed", function () {
-      return false;
+      return !_expand.expandedState.get(_this.node);
     });
     (0, _defineProperty2.default)(this, "setRightGapCursor", function (event) {
       if (!_this.input) {
@@ -199,9 +220,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input2.selectionStart,
         selectionEnd = _this$input2.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === value.length) {
-        var _this$view4 = _this.view,
-          state = _this$view4.state,
-          dispatch = _this$view4.dispatch;
+        var _this$view5 = _this.view,
+          state = _this$view5.state,
+          dispatch = _this$view5.dispatch;
         event.preventDefault();
         _this.view.focus();
         dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), _selection.Side.RIGHT)));
@@ -220,9 +241,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionEnd = _this$input3.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
         event.preventDefault();
-        var _this$view5 = _this.view,
-          state = _this$view5.state,
-          dispatch = _this$view5.dispatch;
+        var _this$view6 = _this.view,
+          state = _this$view6.state,
+          dispatch = _this$view6.dispatch;
         _this.view.focus();
         dispatch(state.tr.setSelection(new _selection.GapCursorSelection(state.doc.resolve(pos), _selection.Side.LEFT)));
       }
@@ -241,9 +262,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionEnd = _this$input4.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === value.length) {
         event.preventDefault();
-        var _this$view6 = _this.view,
-          state = _this$view6.state,
-          dispatch = _this$view6.dispatch;
+        var _this$view7 = _this.view,
+          state = _this$view7.state,
+          dispatch = _this$view7.dispatch;
         _this.view.focus();
         var tr = _this.selectNearNode({
           selectionRelativeToNode: _selection.RelativeSelectionPos.End,
@@ -266,13 +287,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api3;
+        var _this$api5;
         event.preventDefault();
-        var _this$view7 = _this.view,
-          state = _this$view7.state,
-          dispatch = _this$view7.dispatch;
+        var _this$view8 = _this.view,
+          state = _this$view8.state,
+          dispatch = _this$view8.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.selection) === null || _this$api3 === void 0 ? void 0 : _this$api3.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.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) {
@@ -297,13 +318,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     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;
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(node, this.__livePage, this.intl)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
@@ -312,6 +333,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     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 (!_expand.expandedState.has(this.node)) {
+      _expand.expandedState.set(this.node, false);
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -351,9 +375,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     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.
@@ -362,11 +383,27 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             _this2.input.value = _this2.node.attrs.title;
           }
         });
+        if (this.node !== node) {
+          var previousExpandedState = _expand.expandedState.get(this.node);
+          if (previousExpandedState === undefined) {
+            previousExpandedState = true;
+          }
+          _expand.expandedState.set(node, previousExpandedState);
+          _expand.expandedState.delete(this.node);
+        }
         this.node = node;
         return true;
       }
       return false;
     }
+  }, {
+    key: "updateExpandClassName",
+    value: function updateExpandClassName() {
+      var expanded = _expand.expandedState.get(this.node) ? _expand.expandedState.get(this.node) : false;
+      if (this.dom && expanded !== undefined) {
+        this.dom.className = (0, _NodeView.buildExpandClassName)(this.node.type.name, expanded);
+      }
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -382,6 +419,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       _reactDom.default.unmountComponentAtNode(this.icon);
+      _expand.expandedState.delete(this.node);
     }
   }]);
   return ExpandNodeView;

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

@@ -24,7 +24,8 @@ function expandKeymap(api, options) {
       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)
-    // TO-DO: add back in expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       var _$from = selection.$from;
       return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
@@ -50,7 +51,8 @@ function expandKeymap(api, options) {
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
 
-        // TO-DO: Bring back expanded logic
+        // https://product-fabric.atlassian.net/browse/ED-22991
+        // TODO: add back in expanded logic
         return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
       }
     }
@@ -66,7 +68,8 @@ function expandKeymap(api, options) {
     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)
-    // TO-DO: Bring back expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       var $from = selection.$from;
       return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
@@ -98,7 +101,8 @@ function expandKeymap(api, options) {
       var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
       var expandBefore = (0, _transforms.findExpand)(state, sel);
       if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
-      // TO-DO: Bring back expanded logic
+      // https://product-fabric.atlassian.net/browse/ED-22991
+      // TODO: add back in expanded logic
       ) {
         return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
       }

package/dist/cjs/singlePlayerExpand/ui/NodeView.js

@@ -7,17 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.toDOM = exports.renderIcon = exports.buildExpandClassName = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _ExpandButton = require("../ui/ExpandButton");
-// TODO: https://product-fabric.atlassian.net/browse/ED-22841
-var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type) {
-  return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), "\n  ").concat(_styles.expandClassNames.expanded);
+var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
+  return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 };
 var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
+  var _expandedState$get;
   return ['div', {
     // prettier-ignore
-    'class': buildExpandClassName(node.type.name),
+    'class': buildExpandClassName(node.type.name, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
   }, ['div', {
@@ -39,7 +40,7 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
     // prettier-ignore
     'class': _styles.expandClassNames.titleInput,
     value: node.attrs.title,
-    placeholder: intl && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
+    placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text'
   }]]],
   // prettier-ignore
@@ -51,9 +52,13 @@ var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractive
   if (!icon) {
     return;
   }
+  var expanded = node ? _expand.expandedState.get(node) : true;
+  if (expanded === undefined) {
+    expanded = false;
+  }
   _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,
-    expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
+    expanded: expanded
   }), icon);
 };

package/dist/es2019/singlePlayerExpand/commands.js

@@ -1,5 +1,7 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
+import { expandedState } from '@atlaskit/editor-common/expand';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -13,7 +15,9 @@ export const createExpandNode = state => {
     nestedExpand
   } = state.schema.nodes;
   const expandType = findTable(state.selection) ? nestedExpand : expand;
-  return expandType.createAndFill({});
+  const expandNode = expandType.createAndFill({});
+  expandedState.set(expandNode, true);
+  return expandNode;
 };
 export const insertExpand = editorAnalyticsAPI => (state, dispatch) => {
   const expandNode = createExpandNode(state);
@@ -83,6 +87,44 @@ export const setSelectionInsideExpand = expandPos => (state, dispatch, editorVie
   }
   return false;
 };
+export const toggleExpandExpanded = ({
+  editorAnalyticsAPI,
+  pos,
+  node
+}) => (state, dispatch) => {
+  if (node && dispatch) {
+    var _expandedState$get;
+    const {
+      tr
+    } = state;
+    const expanded = (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
+    const isExpandedNext = !expanded;
+    expandedState.set(node, isExpandedNext);
+
+    // 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 === true) {
+      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: node.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        mode: MODE.EDITOR,
+        expanded: isExpandedNext
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
 export const updateExpandTitle = ({
   title,
   nodeType,

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

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 import { keyName } from 'w3c-keyname';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
-import { deleteExpand, setSelectionInsideExpand, updateExpandTitle } from '../commands';
-import { renderIcon, toDOM } from '../ui/NodeView';
+import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
+import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export class ExpandNodeView {
   constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
     _defineProperty(this, "allowInteractiveExpand", true);
@@ -54,6 +55,7 @@ export class ExpandNodeView {
       }
       const target = event.target;
       if (closestElement(target, `.${expandClassNames.icon}`)) {
+        var _this$api2, _this$api2$analytics;
         if (!this.allowInteractiveExpand) {
           return;
         }
@@ -64,10 +66,12 @@ export class ExpandNodeView {
         if (this.view.dom instanceof HTMLElement) {
           this.view.dom.blur();
         }
-
-        // TODO https://product-fabric.atlassian.net/browse/ED-22841
-        // call toggleExpandExpanded
-
+        toggleExpandExpanded({
+          editorAnalyticsAPI: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions,
+          pos,
+          node: this.node
+        })(this.view.state, this.view.dispatch);
+        this.updateExpandClassName();
         return;
       }
       if (target === this.input) {
@@ -105,7 +109,7 @@ export class ExpandNodeView {
     _defineProperty(this, "handleTitleKeydown", event => {
       switch (keyName(event)) {
         case 'Enter':
-          // TO-DO
+          this.toggleExpand();
           break;
         case 'Tab':
         case 'ArrowDown':
@@ -141,8 +145,27 @@ export class ExpandNodeView {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api2, _this$api2$analytics;
-        deleteExpand((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions)(state, this.view.dispatch);
+        var _this$api3, _this$api3$analytics;
+        deleteExpand((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions)(state, this.view.dispatch);
+      }
+    });
+    _defineProperty(this, "toggleExpand", () => {
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      if (this.allowInteractiveExpand) {
+        var _this$api4, _this$api4$analytics;
+        const {
+          state,
+          dispatch
+        } = this.view;
+        toggleExpandExpanded({
+          editorAnalyticsAPI: (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : _this$api4$analytics.actions,
+          pos,
+          node: this.node
+        })(state, dispatch);
+        this.updateExpandClassName();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -174,9 +197,8 @@ export class ExpandNodeView {
         dispatch(state.tr.setSelection(sel));
       }
     });
-    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
     _defineProperty(this, "isCollapsed", () => {
-      return false;
+      return !expandedState.get(this.node);
     });
     _defineProperty(this, "setRightGapCursor", event => {
       if (!this.input) {
@@ -265,14 +287,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api3, _this$api3$selection;
+        var _this$api5, _this$api5$selection;
         event.preventDefault();
         const {
           state,
           dispatch
         } = this.view;
         this.view.focus();
-        const selectionSharedState = ((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$selection = _this$api3.selection) === null || _this$api3$selection === void 0 ? void 0 : _this$api3$selection.sharedState.currentState()) || {};
+        const selectionSharedState = ((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$selection = _this$api5.selection) === null || _this$api5$selection === void 0 ? void 0 : _this$api5$selection.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) {
@@ -297,14 +319,14 @@ export class ExpandNodeView {
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
     this.intl = getIntl();
-    const {
-      dom,
-      contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
     this.node = node;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
@@ -313,6 +335,9 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    if (!expandedState.has(this.node)) {
+      expandedState.set(this.node, false);
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -345,9 +370,6 @@ export class ExpandNodeView {
   }
   update(node, _decorations) {
     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.
@@ -356,11 +378,25 @@ export class ExpandNodeView {
           this.input.value = this.node.attrs.title;
         }
       });
+      if (this.node !== node) {
+        let previousExpandedState = expandedState.get(this.node);
+        if (previousExpandedState === undefined) {
+          previousExpandedState = true;
+        }
+        expandedState.set(node, previousExpandedState);
+        expandedState.delete(this.node);
+      }
       this.node = node;
       return true;
     }
     return false;
   }
+  updateExpandClassName() {
+    const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
+    if (this.dom && expanded !== undefined) {
+      this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+    }
+  }
   destroy() {
     var _this$decorationClean2;
     if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
@@ -374,6 +410,7 @@ export class ExpandNodeView {
     this.icon.removeEventListener('keydown', this.handleIconKeyDown);
     (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 ? void 0 : _this$decorationClean2.call(this);
     ReactDOM.unmountComponentAtNode(this.icon);
+    expandedState.delete(this.node);
   }
 }
 export default function ({

package/dist/es2019/singlePlayerExpand/pm-plugins/keymap.js

@@ -22,7 +22,8 @@ export function expandKeymap(api, options) {
       nodeBefore
     } = selection.$from;
     if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
-    // TO-DO: add back in expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       const {
         $from
@@ -52,7 +53,8 @@ export function expandKeymap(api, options) {
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
 
-        // TO-DO: Bring back expanded logic
+        // https://product-fabric.atlassian.net/browse/ED-22991
+        // TODO: add back in expanded logic
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }
     }
@@ -73,7 +75,8 @@ export function expandKeymap(api, options) {
       nodeAfter
     } = selection.$from;
     if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // TO-DO: Bring back expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       const {
         $from
@@ -114,7 +117,8 @@ export function expandKeymap(api, options) {
       const sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
       const expandBefore = findExpand(state, sel);
       if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
-      // TO-DO: Bring back expanded logic
+      // https://product-fabric.atlassian.net/browse/ED-22991
+      // TODO: add back in expanded logic
       ) {
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }

package/dist/es2019/singlePlayerExpand/ui/NodeView.js

@@ -1,52 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { ExpandButton } from '../ui/ExpandButton';
-
-// TODO: https://product-fabric.atlassian.net/browse/ED-22841
-export const buildExpandClassName = type => {
-  return `${expandClassNames.prefix} ${expandClassNames.type(type)}
-  ${expandClassNames.expanded}`;
+export const buildExpandClassName = (type, expanded) => {
+  return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
-export const toDOM = (node, __livePage, intl) => ['div', {
+export const toDOM = (node, __livePage, intl) => {
+  var _expandedState$get;
+  return ['div', {
+    // prettier-ignore
+    'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
+    'data-node-type': node.type.name,
+    'data-title': node.attrs.title
+  }, ['div', {
+    // prettier-ignore
+    'class': expandClassNames.titleContainer,
+    contenteditable: 'false',
+    // Element gains access to focus events.
+    // This is needed to prevent PM gaining access
+    // on interacting with our controls.
+    tabindex: '-1'
+  },
   // prettier-ignore
-  'class': buildExpandClassName(node.type.name),
-  'data-node-type': node.type.name,
-  'data-title': node.attrs.title
-}, ['div', {
+  ['div', {
+    'class': expandClassNames.icon
+  }], ['div', {
+    // prettier-ignore
+    'class': expandClassNames.inputContainer
+  }, ['input', {
+    // prettier-ignore
+    'class': expandClassNames.titleInput,
+    value: node.attrs.title,
+    placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
+    type: 'text'
+  }]]],
   // prettier-ignore
-  'class': expandClassNames.titleContainer,
-  contenteditable: 'false',
-  // Element gains access to focus events.
-  // This is needed to prevent PM gaining access
-  // on interacting with our controls.
-  tabindex: '-1'
-},
-// prettier-ignore
-['div', {
-  'class': expandClassNames.icon
-}], ['div', {
-  // prettier-ignore
-  'class': expandClassNames.inputContainer
-}, ['input', {
-  // prettier-ignore
-  'class': expandClassNames.titleInput,
-  value: node.attrs.title,
-  placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-  type: 'text'
-}]]],
-// prettier-ignore
-['div', {
-  'class': expandClassNames.content
-}, 0]];
+  ['div', {
+    'class': expandClassNames.content
+  }, 0]];
+};
 export const renderIcon = (icon, allowInteractiveExpand, intl, node) => {
   if (!icon) {
     return;
   }
+  let expanded = node ? expandedState.get(node) : true;
+  if (expanded === undefined) {
+    expanded = false;
+  }
   ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,
-    expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
+    expanded: expanded
   }), icon);
 };

package/dist/esm/singlePlayerExpand/commands.js

@@ -2,7 +2,9 @@ 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 { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
+import { expandedState } from '@atlaskit/editor-common/expand';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -15,7 +17,9 @@ export var createExpandNode = function createExpandNode(state) {
     expand = _state$schema$nodes.expand,
     nestedExpand = _state$schema$nodes.nestedExpand;
   var expandType = findTable(state.selection) ? nestedExpand : expand;
-  return expandType.createAndFill({});
+  var expandNode = expandType.createAndFill({});
+  expandedState.set(expandNode, true);
+  return expandNode;
 };
 export var insertExpand = function insertExpand(editorAnalyticsAPI) {
   return function (state, dispatch) {
@@ -93,10 +97,47 @@ export var setSelectionInsideExpand = function setSelectionInsideExpand(expandPo
     return false;
   };
 };
-export var updateExpandTitle = function updateExpandTitle(_ref) {
-  var title = _ref.title,
-    nodeType = _ref.nodeType,
-    pos = _ref.pos;
+export var toggleExpandExpanded = function toggleExpandExpanded(_ref) {
+  var editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    pos = _ref.pos,
+    node = _ref.node;
+  return function (state, dispatch) {
+    if (node && dispatch) {
+      var _expandedState$get;
+      var tr = state.tr;
+      var expanded = (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
+      var isExpandedNext = !expanded;
+      expandedState.set(node, isExpandedNext);
+
+      // 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 === true) {
+        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?
+      var payload = {
+        action: ACTION.TOGGLE_EXPAND,
+        actionSubject: node.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+        attributes: {
+          platform: PLATFORMS.WEB,
+          mode: MODE.EDITOR,
+          expanded: isExpandedNext
+        },
+        eventType: EVENT_TYPE.TRACK
+      };
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var updateExpandTitle = function updateExpandTitle(_ref2) {
+  var title = _ref2.title,
+    nodeType = _ref2.nodeType,
+    pos = _ref2.pos;
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
     if (node && node.type === nodeType && dispatch) {

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

@@ -3,13 +3,14 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 import { keyName } from 'w3c-keyname';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
-import { deleteExpand, setSelectionInsideExpand, updateExpandTitle } from '../commands';
-import { renderIcon, toDOM } from '../ui/NodeView';
+import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
+import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
     var _this = this;
@@ -59,6 +60,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       }
       var target = event.target;
       if (closestElement(target, ".".concat(expandClassNames.icon))) {
+        var _this$api2;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -69,10 +71,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         if (_this.view.dom instanceof HTMLElement) {
           _this.view.dom.blur();
         }
-
-        // TODO https://product-fabric.atlassian.net/browse/ED-22841
-        // call toggleExpandExpanded
-
+        toggleExpandExpanded({
+          editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
+          pos: pos,
+          node: _this.node
+        })(_this.view.state, _this.view.dispatch);
+        _this.updateExpandClassName();
         return;
       }
       if (target === _this.input) {
@@ -109,7 +113,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "handleTitleKeydown", function (event) {
       switch (keyName(event)) {
         case 'Enter':
-          // TO-DO
+          _this.toggleExpand();
           break;
         case 'Tab':
         case 'ArrowDown':
@@ -142,15 +146,33 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api2;
-        deleteExpand((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(state, _this.view.dispatch);
+        var _this$api3;
+        deleteExpand((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(state, _this.view.dispatch);
+      }
+    });
+    _defineProperty(this, "toggleExpand", function () {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      if (_this.allowInteractiveExpand) {
+        var _this$api4;
+        var _this$view3 = _this.view,
+          state = _this$view3.state,
+          dispatch = _this$view3.dispatch;
+        toggleExpandExpanded({
+          editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
+          pos: pos,
+          node: _this.node
+        })(state, dispatch);
+        _this.updateExpandClassName();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
       event.preventDefault();
-      var _this$view3 = _this.view,
-        state = _this$view3.state,
-        dispatch = _this$view3.dispatch;
+      var _this$view4 = _this.view,
+        state = _this$view4.state,
+        dispatch = _this$view4.dispatch;
       var expandPos = _this.getPos();
       if (typeof expandPos !== 'number') {
         return;
@@ -174,9 +196,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         dispatch(state.tr.setSelection(sel));
       }
     });
-    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
     _defineProperty(this, "isCollapsed", function () {
-      return false;
+      return !expandedState.get(_this.node);
     });
     _defineProperty(this, "setRightGapCursor", function (event) {
       if (!_this.input) {
@@ -191,9 +212,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input2.selectionStart,
         selectionEnd = _this$input2.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === value.length) {
-        var _this$view4 = _this.view,
-          state = _this$view4.state,
-          dispatch = _this$view4.dispatch;
+        var _this$view5 = _this.view,
+          state = _this$view5.state,
+          dispatch = _this$view5.dispatch;
         event.preventDefault();
         _this.view.focus();
         dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), Side.RIGHT)));
@@ -212,9 +233,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionEnd = _this$input3.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
         event.preventDefault();
-        var _this$view5 = _this.view,
-          state = _this$view5.state,
-          dispatch = _this$view5.dispatch;
+        var _this$view6 = _this.view,
+          state = _this$view6.state,
+          dispatch = _this$view6.dispatch;
         _this.view.focus();
         dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)));
       }
@@ -233,9 +254,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionEnd = _this$input4.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === value.length) {
         event.preventDefault();
-        var _this$view6 = _this.view,
-          state = _this$view6.state,
-          dispatch = _this$view6.dispatch;
+        var _this$view7 = _this.view,
+          state = _this$view7.state,
+          dispatch = _this$view7.dispatch;
         _this.view.focus();
         var tr = _this.selectNearNode({
           selectionRelativeToNode: RelativeSelectionPos.End,
@@ -258,13 +279,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api3;
+        var _this$api5;
         event.preventDefault();
-        var _this$view7 = _this.view,
-          state = _this$view7.state,
-          dispatch = _this$view7.dispatch;
+        var _this$view8 = _this.view,
+          state = _this$view8.state,
+          dispatch = _this$view8.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.selection) === null || _this$api3 === void 0 ? void 0 : _this$api3.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.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) {
@@ -289,13 +310,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
     this.intl = getIntl();
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, 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;
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
@@ -304,6 +325,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
     renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    if (!expandedState.has(this.node)) {
+      expandedState.set(this.node, false);
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -343,9 +367,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     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.
@@ -354,11 +375,27 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             _this2.input.value = _this2.node.attrs.title;
           }
         });
+        if (this.node !== node) {
+          var previousExpandedState = expandedState.get(this.node);
+          if (previousExpandedState === undefined) {
+            previousExpandedState = true;
+          }
+          expandedState.set(node, previousExpandedState);
+          expandedState.delete(this.node);
+        }
         this.node = node;
         return true;
       }
       return false;
     }
+  }, {
+    key: "updateExpandClassName",
+    value: function updateExpandClassName() {
+      var expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
+      if (this.dom && expanded !== undefined) {
+        this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+      }
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -374,6 +411,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       ReactDOM.unmountComponentAtNode(this.icon);
+      expandedState.delete(this.node);
     }
   }]);
   return ExpandNodeView;

package/dist/esm/singlePlayerExpand/pm-plugins/keymap.js

@@ -18,7 +18,8 @@ export function expandKeymap(api, options) {
       schema = state.schema;
     var nodeBefore = selection.$from.nodeBefore;
     if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
-    // TO-DO: add back in expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       var _$from = selection.$from;
       return focusTitle(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
@@ -44,7 +45,8 @@ export function expandKeymap(api, options) {
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
 
-        // TO-DO: Bring back expanded logic
+        // https://product-fabric.atlassian.net/browse/ED-22991
+        // TODO: add back in expanded logic
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }
     }
@@ -60,7 +62,8 @@ export function expandKeymap(api, options) {
     var selection = state.selection;
     var nodeAfter = selection.$from.nodeAfter;
     if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // TO-DO: Bring back expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       var $from = selection.$from;
       return focusTitle($from.pos + 1)(state, dispatch, editorView);
@@ -92,7 +95,8 @@ export function expandKeymap(api, options) {
       var sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
       var expandBefore = findExpand(state, sel);
       if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
-      // TO-DO: Bring back expanded logic
+      // https://product-fabric.atlassian.net/browse/ED-22991
+      // TODO: add back in expanded logic
       ) {
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }

package/dist/esm/singlePlayerExpand/ui/NodeView.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { ExpandButton } from '../ui/ExpandButton';
-
-// TODO: https://product-fabric.atlassian.net/browse/ED-22841
-export var buildExpandClassName = function buildExpandClassName(type) {
-  return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), "\n  ").concat(expandClassNames.expanded);
+export var buildExpandClassName = function buildExpandClassName(type, expanded) {
+  return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
 export var toDOM = function toDOM(node, __livePage, intl) {
+  var _expandedState$get;
   return ['div', {
     // prettier-ignore
-    'class': buildExpandClassName(node.type.name),
+    'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
   }, ['div', {
@@ -33,7 +33,7 @@ export var toDOM = function toDOM(node, __livePage, intl) {
     // prettier-ignore
     'class': expandClassNames.titleInput,
     value: node.attrs.title,
-    placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
+    placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text'
   }]]],
   // prettier-ignore
@@ -45,9 +45,13 @@ export var renderIcon = function renderIcon(icon, allowInteractiveExpand, intl,
   if (!icon) {
     return;
   }
+  var expanded = node ? expandedState.get(node) : true;
+  if (expanded === undefined) {
+    expanded = false;
+  }
   ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,
-    expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
+    expanded: expanded
   }), icon);
 };

package/dist/types/singlePlayerExpand/commands.d.ts

@@ -7,6 +7,11 @@ export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | und
 export declare const deleteExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const deleteExpandAtPos: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (expandNodePos: number, expandNode: PMNode) => Command;
 export declare const setSelectionInsideExpand: (expandPos: number) => Command;
+export declare const toggleExpandExpanded: ({ editorAnalyticsAPI, pos, node, }: {
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    pos: number;
+    node: PMNode;
+}) => Command;
 export declare const updateExpandTitle: ({ title, nodeType, pos, }: {
     title: string;
     pos: number;

package/dist/types/singlePlayerExpand/node-views/index.d.ts

@@ -30,6 +30,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleBlur;
     private handleTitleKeydown;
     private deleteEmptyExpand;
+    private toggleExpand;
     private moveToOutsideOfTitle;
     private isCollapsed;
     private setRightGapCursor;
@@ -42,6 +43,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
+    updateExpandClassName(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

package/dist/types/singlePlayerExpand/ui/NodeView.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-export declare const buildExpandClassName: (type: string) => string;
+export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
 export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;

package/dist/types-ts4.5/singlePlayerExpand/commands.d.ts

@@ -7,6 +7,11 @@ export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | und
 export declare const deleteExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const deleteExpandAtPos: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (expandNodePos: number, expandNode: PMNode) => Command;
 export declare const setSelectionInsideExpand: (expandPos: number) => Command;
+export declare const toggleExpandExpanded: ({ editorAnalyticsAPI, pos, node, }: {
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    pos: number;
+    node: PMNode;
+}) => Command;
 export declare const updateExpandTitle: ({ title, nodeType, pos, }: {
     title: string;
     pos: number;

package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts

@@ -30,6 +30,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleBlur;
     private handleTitleKeydown;
     private deleteEmptyExpand;
+    private toggleExpand;
     private moveToOutsideOfTitle;
     private isCollapsed;
     private setRightGapCursor;
@@ -42,6 +43,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
+    updateExpandClassName(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-export declare const buildExpandClassName: (type: string) => string;
+export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
 export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Expand plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.9.0",
     "@atlaskit/button": "^17.12.0",
-    "@atlaskit/editor-common": "^78.28.0",
+    "@atlaskit/editor-common": "^78.29.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-selection": "^1.1.0",