@atlaskit/editor-plugin-expand 1.3.5 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#90925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90925) [`431c0d17e3e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/431c0d17e3e3) - [ux] Improve the selection marker by hiding it when in an expand and improving styling by making it more subtle.
+
 ## 1.3.5
 
 ### Patch Changes

package/dist/cjs/legacyExpand/nodeviews/index.js

@@ -67,6 +67,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "isMobile", false);
     (0, _defineProperty2.default)(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -82,6 +83,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -107,7 +109,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         state = _this$view2.state,
         dispatch = _this$view2.dispatch;
       if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
-        var _this$api;
+        var _this$api2;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -119,7 +121,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           _this.view.dom.blur();
         }
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
+          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,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -154,6 +156,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
       switch ((0, _w3cKeyname.keyName)(event)) {
         case 'Enter':
@@ -194,8 +200,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       var state = _this.view.state;
       var expandNode = _this.node;
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api2;
-        (0, _commands.deleteExpandAtPos)((_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, expandNode)(state, _this.view.dispatch);
+        var _this$api3;
+        (0, _commands.deleteExpandAtPos)((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, expandNode)(state, _this.view.dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -204,12 +210,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api3;
+        var _this$api4;
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions,
+          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,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -330,13 +336,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api4;
+        var _this$api5;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.selection) === null || _this$api4 === void 0 ? void 0 : _this$api4.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) {
@@ -391,6 +397,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.addEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.addEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // If the user interacts in our title bar (either toggle or input)
@@ -470,6 +478,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$decorationClean2;
       if (this.dom) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.dom.removeEventListener('click', this.handleClick);
@@ -479,6 +488,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.removeEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.removeEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -489,6 +500,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
         _reactDom.default.unmountComponentAtNode(this.icon);
       }
+      (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
 
       // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
       this.dom = undefined;

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");
@@ -28,6 +29,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "isMobile", false);
     (0, _defineProperty2.default)(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -43,6 +45,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -65,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;
         }
@@ -75,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) {
@@ -108,10 +114,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
       switch ((0, _w3cKeyname.keyName)(event)) {
         case 'Enter':
-          // TO-DO
+          _this.toggleExpand();
           break;
         case 'Tab':
         case 'ArrowDown':
@@ -144,15 +154,33 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       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);
+        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;
@@ -176,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) {
@@ -193,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)));
@@ -214,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)));
       }
@@ -235,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,
@@ -260,13 +287,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api2;
+        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$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selection) === null || _this$api2 === void 0 ? void 0 : _this$api2.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) {
@@ -291,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;
@@ -306,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;
     }
@@ -315,6 +345,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.dom.addEventListener('click', this.handleClick);
     this.dom.addEventListener('input', this.handleInput);
     this.input.addEventListener('keydown', this.handleTitleKeydown);
+    this.input.addEventListener('blur', this.handleBlur);
     // 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);
@@ -344,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.
@@ -355,23 +383,43 @@ 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() {
+      var _this$decorationClean2;
       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.input.removeEventListener('blur', this.handleBlur);
       this.titleContainer.removeEventListener('focus', this.handleFocus);
       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);
 };