@atlaskit/editor-plugin-expand 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.5.0
+
+### Minor Changes
+
+- [#92831](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92831) [`c8652f78a9ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8652f78a9ce) - [ED-22991] add functionality for moving left and moving right with the single player expands. the single player expand is only used when live view is enabled and the platform.editor.single-player-expand FF is enabled.
+
+### Patch Changes
+
+- [#92956](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92956) [`33ba4a1b556d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33ba4a1b556d) - [ux] [ED-23085] Fix contenteditable being not set to false when expand closed for single player expand. This single player expand is only used when live view is enabled and the platform.editor.single-player-expand FF is enabled.
+
+## 1.4.3
+
+### Patch Changes
+
+- [#92468](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92468) [`515df766c29c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/515df766c29c) - [ux] [ED-23066] Re-render expand toggle icon when the class name is updated so that the aria-expanded attribute gets updated to match.
+
 ## 1.4.2
 
 ### Patch Changes

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

@@ -21,7 +21,8 @@ var _commands = require("../commands");
 var _NodeView = require("../ui/NodeView");
 var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
-    var _this = this;
+    var _this = this,
+      _expandedState$get;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
@@ -82,7 +83,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
         return;
       }
       if (target === _this.input) {
@@ -175,7 +176,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -334,10 +335,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
-    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, this.intl);
+    this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
+    this.updateExpandBodyContentEditable();
+    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -400,11 +403,23 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       return false;
     }
   }, {
-    key: "updateExpandClassName",
-    value: function updateExpandClassName() {
+    key: "updateExpandToggleIcon",
+    value: function updateExpandToggleIcon() {
       var expanded = _expand.expandedState.get(this.node) ? _expand.expandedState.get(this.node) : false;
       if (this.dom && expanded !== undefined) {
+        var _expandedState$get2;
         this.dom.className = (0, _NodeView.buildExpandClassName)(this.node.type.name, expanded);
+        // Re-render the icon to update the aria-expanded attribute
+        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = _expand.expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+      }
+      this.updateExpandBodyContentEditable();
+    }
+  }, {
+    key: "updateExpandBodyContentEditable",
+    value: function updateExpandBodyContentEditable() {
+      // Disallow interaction/selection inside expand body when collapsed.
+      if (this.content) {
+        this.content.setAttribute('contenteditable', _expand.expandedState.get(this.node) ? 'true' : 'false');
       }
     }
   }, {

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.expandKeymap = expandKeymap;
+var _expand = require("@atlaskit/editor-common/expand");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
@@ -14,8 +15,37 @@ var _commands = require("../commands");
 var isExpandNode = function isExpandNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
 };
+var isExpandSelected = function isExpandSelected(selection) {
+  return selection instanceof _state.NodeSelection && isExpandNode(selection.node);
+};
 function expandKeymap(api, options) {
   var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, function (state, dispatch, editorView) {
+    var _api$selection;
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && selectionRelativeToNode === _selection.RelativeSelectionPos.Start) {
+      return (0, _commands.focusTitle)(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, function (state, dispatch, editorView) {
+    var _api$selection2;
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 || (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === _selection.RelativeSelectionPos.End)) {
+      return (0, _commands.focusTitle)(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, editorView) {
     if (!editorView) {
       return false;
@@ -23,10 +53,7 @@ function expandKeymap(api, options) {
     var selection = state.selection,
       schema = state.schema;
     var nodeBefore = selection.$from.nodeBefore;
-    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && (0, _expand.isExpandCollapsed)(nodeBefore)) {
       var _$from = selection.$from;
       return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
     }
@@ -50,10 +77,14 @@ function expandKeymap(api, options) {
       var expandBefore = (0, _transforms.findExpand)(state, sel);
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
-
-        // https://product-fabric.atlassian.net/browse/ED-22991
-        // TODO: add back in expanded logic
-        return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+        if ((0, _expand.isExpandCollapsed)(expandBefore.node)) {
+          return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+        }
+        // moving cursor from outside of an expand to the content when it is expanded
+        else if (dispatch) {
+          dispatch(state.tr.setSelection(sel));
+        }
+        return true;
       }
     }
     return false;
@@ -67,10 +98,7 @@ function expandKeymap(api, options) {
       nestedExpand = _state$schema$nodes.nestedExpand;
     var selection = state.selection;
     var nodeAfter = selection.$from.nodeAfter;
-    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && (0, _expand.isExpandCollapsed)(nodeAfter)) {
       var $from = selection.$from;
       return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
     }
@@ -100,10 +128,7 @@ function expandKeymap(api, options) {
       // @see ED-7977
       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)
-      // https://product-fabric.atlassian.net/browse/ED-22991
-      // TODO: add back in expanded logic
-      ) {
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && (0, _expand.isExpandCollapsed)(expandBefore.node)) {
         return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
       }
       return false;

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

@@ -48,14 +48,10 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
     'class': _styles.expandClassNames.content
   }, 0]];
 };
-var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
+var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
   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,

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

@@ -11,6 +11,7 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
 import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export class ExpandNodeView {
   constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
+    var _expandedState$get;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
@@ -69,7 +70,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(this.view.state, this.view.dispatch);
-        this.updateExpandClassName();
+        this.updateExpandToggleIcon();
         return;
       }
       if (target === this.input) {
@@ -167,7 +168,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(state, dispatch);
-        this.updateExpandClassName();
+        this.updateExpandToggleIcon();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -336,10 +337,12 @@ export class ExpandNodeView {
     this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
-    renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    this.content = this.dom.querySelector(`.${expandClassNames.content}`);
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    this.updateExpandBodyContentEditable();
+    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -394,10 +397,20 @@ export class ExpandNodeView {
     }
     return false;
   }
-  updateExpandClassName() {
+  updateExpandToggleIcon() {
     const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
     if (this.dom && expanded !== undefined) {
+      var _expandedState$get2;
       this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+      // Re-render the icon to update the aria-expanded attribute
+      renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+    }
+    this.updateExpandBodyContentEditable();
+  }
+  updateExpandBodyContentEditable() {
+    // Disallow interaction/selection inside expand body when collapsed.
+    if (this.content) {
+      this.content.setAttribute('contenteditable', expandedState.get(this.node) ? 'true' : 'false');
     }
   }
   destroy() {

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

@@ -1,15 +1,51 @@
-import { backspace, bindKeymapWithCommand, moveDown, moveUp } from '@atlaskit/editor-common/keymaps';
-import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
+import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { deleteExpand, focusTitle } from '../commands';
 const isExpandNode = node => {
   return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
 };
+const isExpandSelected = selection => selection instanceof NodeSelection && isExpandNode(selection.node);
 export function expandKeymap(api, options) {
   const list = {};
+  bindKeymapWithCommand(moveRight.common, (state, dispatch, editorView) => {
+    var _api$selection;
+    if (!editorView) {
+      return false;
+    }
+    const {
+      selection
+    } = state;
+    const selectionSharedState = (api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.currentState()) || {};
+    const {
+      selectionRelativeToNode
+    } = selectionSharedState;
+    if (isExpandSelected(selection) && selectionRelativeToNode === RelativeSelectionPos.Start) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(moveLeft.common, (state, dispatch, editorView) => {
+    var _api$selection2;
+    if (!editorView) {
+      return false;
+    }
+    const {
+      selection
+    } = state;
+    const selectionSharedState = (api === null || api === void 0 ? void 0 : (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.currentState()) || {};
+    const {
+      selectionRelativeToNode
+    } = selectionSharedState;
+    if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === RelativeSelectionPos.End)) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
   bindKeymapWithCommand(moveUp.common, (state, dispatch, editorView) => {
     if (!editorView) {
       return false;
@@ -21,10 +57,7 @@ export function expandKeymap(api, options) {
     const {
       nodeBefore
     } = selection.$from;
-    if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && isExpandCollapsed(nodeBefore)) {
       const {
         $from
       } = selection;
@@ -52,10 +85,14 @@ export function expandKeymap(api, options) {
       const expandBefore = findExpand(state, sel);
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
-
-        // https://product-fabric.atlassian.net/browse/ED-22991
-        // TODO: add back in expanded logic
-        return focusTitle(expandBefore.start)(state, dispatch, editorView);
+        if (isExpandCollapsed(expandBefore.node)) {
+          return focusTitle(expandBefore.start)(state, dispatch, editorView);
+        }
+        // moving cursor from outside of an expand to the content when it is expanded
+        else if (dispatch) {
+          dispatch(state.tr.setSelection(sel));
+        }
+        return true;
       }
     }
     return false;
@@ -74,10 +111,7 @@ export function expandKeymap(api, options) {
     const {
       nodeAfter
     } = selection.$from;
-    if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && isExpandCollapsed(nodeAfter)) {
       const {
         $from
       } = selection;
@@ -116,10 +150,7 @@ export function expandKeymap(api, options) {
       // @see ED-7977
       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)
-      // https://product-fabric.atlassian.net/browse/ED-22991
-      // TODO: add back in expanded logic
-      ) {
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && isExpandCollapsed(expandBefore.node)) {
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }
       return false;

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

@@ -41,14 +41,10 @@ export const toDOM = (node, __livePage, intl) => {
     'class': expandClassNames.content
   }, 0]];
 };
-export const renderIcon = (icon, allowInteractiveExpand, intl, node) => {
+export const renderIcon = (icon, allowInteractiveExpand, expanded, intl) => {
   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,

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

@@ -13,7 +13,8 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
 import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
-    var _this = this;
+    var _this = this,
+      _expandedState$get;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
     _classCallCheck(this, ExpandNodeView);
@@ -74,7 +75,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
         return;
       }
       if (target === _this.input) {
@@ -167,7 +168,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandClassName();
+        _this.updateExpandToggleIcon();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -326,10 +327,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
-    renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    this.content = this.dom.querySelector(".".concat(expandClassNames.content));
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    this.updateExpandBodyContentEditable();
+    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -392,11 +395,23 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       return false;
     }
   }, {
-    key: "updateExpandClassName",
-    value: function updateExpandClassName() {
+    key: "updateExpandToggleIcon",
+    value: function updateExpandToggleIcon() {
       var expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
       if (this.dom && expanded !== undefined) {
+        var _expandedState$get2;
         this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+        // Re-render the icon to update the aria-expanded attribute
+        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+      }
+      this.updateExpandBodyContentEditable();
+    }
+  }, {
+    key: "updateExpandBodyContentEditable",
+    value: function updateExpandBodyContentEditable() {
+      // Disallow interaction/selection inside expand body when collapsed.
+      if (this.content) {
+        this.content.setAttribute('contenteditable', expandedState.get(this.node) ? 'true' : 'false');
       }
     }
   }, {

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

@@ -1,15 +1,45 @@
-import { backspace, bindKeymapWithCommand, moveDown, moveUp } from '@atlaskit/editor-common/keymaps';
-import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
+import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { deleteExpand, focusTitle } from '../commands';
 var isExpandNode = function isExpandNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
 };
+var isExpandSelected = function isExpandSelected(selection) {
+  return selection instanceof NodeSelection && isExpandNode(selection.node);
+};
 export function expandKeymap(api, options) {
   var list = {};
+  bindKeymapWithCommand(moveRight.common, function (state, dispatch, editorView) {
+    var _api$selection;
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && selectionRelativeToNode === RelativeSelectionPos.Start) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(moveLeft.common, function (state, dispatch, editorView) {
+    var _api$selection2;
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 || (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === RelativeSelectionPos.End)) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
   bindKeymapWithCommand(moveUp.common, function (state, dispatch, editorView) {
     if (!editorView) {
       return false;
@@ -17,10 +47,7 @@ export function expandKeymap(api, options) {
     var selection = state.selection,
       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)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && isExpandCollapsed(nodeBefore)) {
       var _$from = selection.$from;
       return focusTitle(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
     }
@@ -44,10 +71,14 @@ export function expandKeymap(api, options) {
       var expandBefore = findExpand(state, sel);
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
-
-        // https://product-fabric.atlassian.net/browse/ED-22991
-        // TODO: add back in expanded logic
-        return focusTitle(expandBefore.start)(state, dispatch, editorView);
+        if (isExpandCollapsed(expandBefore.node)) {
+          return focusTitle(expandBefore.start)(state, dispatch, editorView);
+        }
+        // moving cursor from outside of an expand to the content when it is expanded
+        else if (dispatch) {
+          dispatch(state.tr.setSelection(sel));
+        }
+        return true;
       }
     }
     return false;
@@ -61,10 +92,7 @@ export function expandKeymap(api, options) {
       nestedExpand = _state$schema$nodes.nestedExpand;
     var selection = state.selection;
     var nodeAfter = selection.$from.nodeAfter;
-    if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // https://product-fabric.atlassian.net/browse/ED-22991
-    // TODO: add back in expanded logic
-    ) {
+    if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && isExpandCollapsed(nodeAfter)) {
       var $from = selection.$from;
       return focusTitle($from.pos + 1)(state, dispatch, editorView);
     }
@@ -94,10 +122,7 @@ export function expandKeymap(api, options) {
       // @see ED-7977
       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)
-      // https://product-fabric.atlassian.net/browse/ED-22991
-      // TODO: add back in expanded logic
-      ) {
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && isExpandCollapsed(expandBefore.node)) {
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }
       return false;

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

@@ -41,14 +41,10 @@ export var toDOM = function toDOM(node, __livePage, intl) {
     'class': expandClassNames.content
   }, 0]];
 };
-export var renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
+export var renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, 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,

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

@@ -44,7 +44,8 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandClassName(): void;
+    updateExpandToggleIcon(): void;
+    updateExpandBodyContentEditable(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

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

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 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;
+export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

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

@@ -44,7 +44,8 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandClassName(): void;
+    updateExpandToggleIcon(): void;
+    updateExpandBodyContentEditable(): void;
     destroy(): void;
 }
 export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {

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

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 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;
+export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "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.29.0",
+    "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-selection": "^1.1.0",