@atlaskit/editor-plugin-expand 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.4.2
+
+### Patch Changes
+
+- [#91886](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91886) [`5c0443e007d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c0443e007d9) - [ux] Fix bug where selection marker shows when focussing on the expand title with the keyboard.
+
+## 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/legacyExpand/nodeviews/index.js

@@ -67,7 +67,6 @@ 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;
@@ -83,7 +82,6 @@ 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();
       }
     });
@@ -109,7 +107,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$api2;
+        var _this$api;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -121,7 +119,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           _this.view.dom.blur();
         }
         (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,
+          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,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -156,7 +154,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
-    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+    (0, _defineProperty2.default)(this, "handleInputFocus", function () {
+      var _this$api2;
+      _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
+    });
+    (0, _defineProperty2.default)(this, "handleBlur", function () {
       var _this$decorationClean;
       (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
     });
@@ -399,6 +401,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.input.addEventListener('keydown', this.handleTitleKeydown);
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.addEventListener('blur', this.handleBlur);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.addEventListener('focus', this.handleInputFocus);
       }
       if (this.titleContainer) {
         // If the user interacts in our title bar (either toggle or input)
@@ -490,6 +494,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.input.removeEventListener('keydown', this.handleTitleKeydown);
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.removeEventListener('blur', this.handleBlur);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.removeEventListener('focus', this.handleInputFocus);
       }
       if (this.titleContainer) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners

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,7 +29,6 @@ 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;
@@ -44,7 +44,6 @@ 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();
       }
     });
@@ -67,6 +66,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
       var target = event.target;
       if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
+        var _this$api;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -77,10 +77,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$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
+          pos: pos,
+          node: _this.node
+        })(_this.view.state, _this.view.dispatch);
+        _this.updateExpandClassName();
         return;
       }
       if (target === _this.input) {
@@ -110,14 +112,18 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
-    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+    (0, _defineProperty2.default)(this, "handleInputFocus", function () {
+      var _this$api2;
+      _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
+    });
+    (0, _defineProperty2.default)(this, "handleBlur", function () {
       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':
@@ -150,15 +156,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 +206,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 +222,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 +243,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 +264,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 +289,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 +320,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 +335,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;
     }
@@ -322,6 +348,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.dom.addEventListener('input', this.handleInput);
     this.input.addEventListener('keydown', this.handleTitleKeydown);
     this.input.addEventListener('blur', this.handleBlur);
+    this.input.addEventListener('focus', this.handleInputFocus);
     // 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);
@@ -351,9 +378,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 +386,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() {
@@ -378,10 +418,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       this.dom.removeEventListener('input', this.handleInput);
       this.input.removeEventListener('keydown', this.handleTitleKeydown);
       this.input.removeEventListener('blur', this.handleBlur);
+      this.input.removeEventListener('focus', this.handleInputFocus);
       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);
 };

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

@@ -51,7 +51,6 @@ export class ExpandNodeView {
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
       if (this.input) {
-        var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
         const {
           state,
           dispatch
@@ -68,7 +67,6 @@ export class ExpandNodeView {
         if (typeof pos === 'number') {
           setSelectionInsideExpand(pos)(state, dispatch, this.view);
         }
-        this.decorationCleanup = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$selectionMa = _this$api.selectionMarker) === null || _this$api$selectionMa === void 0 ? void 0 : (_this$api$selectionMa2 = _this$api$selectionMa.actions) === null || _this$api$selectionMa2 === void 0 ? void 0 : _this$api$selectionMa2.hideDecoration();
         this.input.focus();
       }
     });
@@ -95,7 +93,7 @@ export class ExpandNodeView {
         dispatch
       } = this.view;
       if (closestElement(target, `.${expandClassNames.icon}`)) {
-        var _this$api2, _this$api2$analytics;
+        var _this$api, _this$api$analytics;
         if (!this.allowInteractiveExpand) {
           return;
         }
@@ -107,7 +105,7 @@ export class ExpandNodeView {
           this.view.dom.blur();
         }
         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,
+          editorAnalyticsAPI: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions,
           pos,
           nodeType: this.node.type,
           __livePage: this.__livePage
@@ -143,7 +141,11 @@ export class ExpandNodeView {
     _defineProperty(this, "handleFocus", event => {
       event.stopImmediatePropagation();
     });
-    _defineProperty(this, "handleBlur", event => {
+    _defineProperty(this, "handleInputFocus", () => {
+      var _this$api2, _this$api2$selectionM, _this$api2$selectionM2;
+      this.decorationCleanup = (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$selectionM = _this$api2.selectionMarker) === null || _this$api2$selectionM === void 0 ? void 0 : (_this$api2$selectionM2 = _this$api2$selectionM.actions) === null || _this$api2$selectionM2 === void 0 ? void 0 : _this$api2$selectionM2.hideDecoration();
+    });
+    _defineProperty(this, "handleBlur", () => {
       var _this$decorationClean;
       (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
     });
@@ -398,6 +400,8 @@ export class ExpandNodeView {
       this.input.addEventListener('keydown', this.handleTitleKeydown);
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.input.addEventListener('blur', this.handleBlur);
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.input.addEventListener('focus', this.handleInputFocus);
     }
     if (this.titleContainer) {
       // If the user interacts in our title bar (either toggle or input)
@@ -479,6 +483,8 @@ export class ExpandNodeView {
       this.input.removeEventListener('keydown', this.handleTitleKeydown);
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.input.removeEventListener('blur', this.handleBlur);
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.input.removeEventListener('focus', this.handleInputFocus);
     }
     if (this.titleContainer) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners

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,