@atlaskit/editor-plugin-expand 2.5.4 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-expand
 
+## 2.6.0
+
+### Minor Changes
+
+- [#134731](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134731)
+  [`07dc34f5168a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07dc34f5168a0) -
+  [ux] ED-23190 This change allows users to navigate using Tab when there are multiple expands on
+  the page. Previously, users could only navigate around the 1st expand on the page with Tab.
+
 ## 2.5.4
 
 ### Patch Changes

package/dist/cjs/legacyExpand/commands.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExpandTitle = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.setExpandRef = exports.insertExpandWithInputMethod = exports.insertExpand = exports.focusTitle = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
+exports.updateExpandTitle = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.setExpandRef = exports.insertExpandWithInputMethod = exports.insertExpand = exports.focusTitle = exports.focusIcon = 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 _selection = require("@atlaskit/editor-common/selection");
+var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -195,6 +196,26 @@ var focusTitle = exports.focusTitle = function focusTitle(pos) {
     return false;
   };
 };
+var focusIcon = exports.focusIcon = function focusIcon(expand) {
+  return function (state, dispatch, editorView) {
+    if (!expand || !(expand instanceof HTMLElement)) {
+      return false;
+    }
+    var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
+    if (iconContainer && iconContainer.focus) {
+      var tr = state.tr;
+      var pos = state.selection.from;
+      tr.setSelection(new _state2.TextSelection(tr.doc.resolve(pos)));
+      if (dispatch) {
+        dispatch(tr);
+      }
+      editorView === null || editorView === void 0 || editorView.dom.blur();
+      iconContainer.focus();
+      return true;
+    }
+    return false;
+  };
+};
 
 // Used to clear any node or cell selection when expand title is focused
 var setSelectionInsideExpand = exports.setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.expandKeymap = expandKeymap;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _selection = require("@atlaskit/editor-common/selection");
-var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -48,24 +47,23 @@ function expandKeymap(api, options) {
     return false;
   }, list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch, editorView) {
-    if (state.selection instanceof _state.NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
+    if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
-      var expand = editorView.nodeDOM(from);
-      if (!expand || !(expand instanceof HTMLElement)) {
-        return false;
-      }
-      var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
-      if (iconContainer && iconContainer.focus) {
-        var tr = state.tr;
-        var pos = state.selection.from;
-        tr.setSelection(new _state.TextSelection(tr.doc.resolve(pos)));
-        if (dispatch) {
-          dispatch(tr);
+      if (isExpandSelected(state.selection)) {
+        var expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return (0, _commands.focusIcon)(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof _state.TextSelection) {
+        var _dom$node$parentEleme;
+        var dom = editorView.domAtPos(from);
+        var _expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!_expand || !(_expand instanceof HTMLElement)) {
+          return false;
         }
-        editorView.dom.blur();
-        iconContainer.focus();
+        return (0, _commands.focusIcon)(_expand)(state, dispatch, editorView);
       }
-      return true;
     }
     return false;
   }, list);

package/dist/cjs/singlePlayerExpand/commands.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExpandTitle = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.insertExpandWithInputMethod = exports.insertExpand = exports.focusTitle = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
+exports.updateExpandTitle = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.insertExpandWithInputMethod = exports.insertExpand = exports.focusTitle = exports.focusIcon = 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 _styles = require("@atlaskit/editor-common/styles");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
@@ -204,4 +205,24 @@ var focusTitle = exports.focusTitle = function focusTitle(pos) {
     }
     return false;
   };
+};
+var focusIcon = exports.focusIcon = function focusIcon(expand) {
+  return function (state, dispatch, editorView) {
+    if (!expand || !(expand instanceof HTMLElement)) {
+      return false;
+    }
+    var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
+    if (iconContainer && iconContainer.focus) {
+      var tr = state.tr;
+      var pos = state.selection.from;
+      tr.setSelection(new _state2.TextSelection(tr.doc.resolve(pos)));
+      if (dispatch) {
+        dispatch(tr);
+      }
+      editorView === null || editorView === void 0 || editorView.dom.blur();
+      iconContainer.focus();
+      return true;
+    }
+    return false;
+  };
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.expandKeymap = expandKeymap;
-var _expand = require("@atlaskit/editor-common/expand");
+var _expand2 = 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");
@@ -46,6 +46,27 @@ function expandKeymap(api, options) {
     }
     return false;
   }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch, editorView) {
+    if (editorView && editorView.dom instanceof HTMLElement) {
+      var from = state.selection.from;
+      if (isExpandSelected(state.selection)) {
+        var expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return (0, _commands.focusIcon)(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof _state.TextSelection) {
+        var _dom$node$parentEleme;
+        var dom = editorView.domAtPos(from);
+        var _expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!_expand || !(_expand instanceof HTMLElement)) {
+          return false;
+        }
+        return (0, _commands.focusIcon)(_expand)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, editorView) {
     if (!editorView) {
       return false;
@@ -53,7 +74,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) && (0, _expand.isExpandCollapsed)(nodeBefore)) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && (0, _expand2.isExpandCollapsed)(nodeBefore)) {
       var _$from = selection.$from;
       return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
     }
@@ -77,7 +98,7 @@ 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
-        if ((0, _expand.isExpandCollapsed)(expandBefore.node)) {
+        if ((0, _expand2.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
@@ -98,7 +119,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) && (0, _expand.isExpandCollapsed)(nodeAfter)) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && (0, _expand2.isExpandCollapsed)(nodeAfter)) {
       var $from = selection.$from;
       return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
     }
@@ -128,7 +149,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) && (0, _expand.isExpandCollapsed)(expandBefore.node)) {
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && (0, _expand2.isExpandCollapsed)(expandBefore.node)) {
         return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
       }
       return false;

package/dist/es2019/legacyExpand/commands.js

@@ -1,8 +1,9 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -176,6 +177,26 @@ export const focusTitle = pos => (state, dispatch, editorView) => {
   }
   return false;
 };
+export const focusIcon = expand => (state, dispatch, editorView) => {
+  if (!expand || !(expand instanceof HTMLElement)) {
+    return false;
+  }
+  const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
+  if (iconContainer && iconContainer.focus) {
+    const {
+      tr
+    } = state;
+    const pos = state.selection.from;
+    tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    editorView === null || editorView === void 0 ? void 0 : editorView.dom.blur();
+    iconContainer.focus();
+    return true;
+  }
+  return false;
+};
 
 // Used to clear any node or cell selection when expand title is focused
 export const setSelectionInsideExpand = expandPos => (_state, dispatch, editorView) => {

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

@@ -1,11 +1,10 @@
 import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } from '@atlaskit/editor-common/keymaps';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
-import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { deleteExpand, focusTitle } from '../commands';
+import { deleteExpand, focusIcon, focusTitle } from '../commands';
 import { findExpand } from '../utils';
 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';
@@ -48,28 +47,25 @@ export function expandKeymap(api, options) {
     return false;
   }, list);
   bindKeymapWithCommand(tab.common, (state, dispatch, editorView) => {
-    if (state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
+    if (editorView && editorView.dom instanceof HTMLElement) {
       const {
         from
       } = state.selection;
-      const expand = editorView.nodeDOM(from);
-      if (!expand || !(expand instanceof HTMLElement)) {
-        return false;
-      }
-      const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
-      if (iconContainer && iconContainer.focus) {
-        const {
-          tr
-        } = state;
-        const pos = state.selection.from;
-        tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
-        if (dispatch) {
-          dispatch(tr);
+      if (isExpandSelected(state.selection)) {
+        const expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof TextSelection) {
+        var _dom$node$parentEleme;
+        const dom = editorView.domAtPos(from);
+        const expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
         }
-        editorView.dom.blur();
-        iconContainer.focus();
+        return focusIcon(expand)(state, dispatch, editorView);
       }
-      return true;
     }
     return false;
   }, list);

package/dist/es2019/singlePlayerExpand/commands.js

@@ -2,9 +2,10 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 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 { expandClassNames } from '@atlaskit/editor-common/styles';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -183,4 +184,24 @@ export const focusTitle = pos => (state, dispatch, editorView) => {
     }
   }
   return false;
+};
+export const focusIcon = expand => (state, dispatch, editorView) => {
+  if (!expand || !(expand instanceof HTMLElement)) {
+    return false;
+  }
+  const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
+  if (iconContainer && iconContainer.focus) {
+    const {
+      tr
+    } = state;
+    const pos = state.selection.from;
+    tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    editorView === null || editorView === void 0 ? void 0 : editorView.dom.blur();
+    iconContainer.focus();
+    return true;
+  }
+  return false;
 };

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

@@ -1,11 +1,11 @@
 import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
-import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp } from '@atlaskit/editor-common/keymaps';
+import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } 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 { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
-import { deleteExpand, focusTitle } from '../commands';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpand, focusIcon, 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';
 };
@@ -46,6 +46,29 @@ export function expandKeymap(api, options) {
     }
     return false;
   }, list);
+  bindKeymapWithCommand(tab.common, (state, dispatch, editorView) => {
+    if (editorView && editorView.dom instanceof HTMLElement) {
+      const {
+        from
+      } = state.selection;
+      if (isExpandSelected(state.selection)) {
+        const expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof TextSelection) {
+        var _dom$node$parentEleme;
+        const dom = editorView.domAtPos(from);
+        const expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(expand)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
   bindKeymapWithCommand(moveUp.common, (state, dispatch, editorView) => {
     if (!editorView) {
       return false;

package/dist/esm/legacyExpand/commands.js

@@ -4,8 +4,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -188,6 +189,26 @@ export var focusTitle = function focusTitle(pos) {
     return false;
   };
 };
+export var focusIcon = function focusIcon(expand) {
+  return function (state, dispatch, editorView) {
+    if (!expand || !(expand instanceof HTMLElement)) {
+      return false;
+    }
+    var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
+    if (iconContainer && iconContainer.focus) {
+      var tr = state.tr;
+      var pos = state.selection.from;
+      tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+      if (dispatch) {
+        dispatch(tr);
+      }
+      editorView === null || editorView === void 0 || editorView.dom.blur();
+      iconContainer.focus();
+      return true;
+    }
+    return false;
+  };
+};
 
 // Used to clear any node or cell selection when expand title is focused
 export var setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {

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

@@ -1,11 +1,10 @@
 import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } from '@atlaskit/editor-common/keymaps';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
-import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { deleteExpand, focusTitle } from '../commands';
+import { deleteExpand, focusIcon, focusTitle } from '../commands';
 import { findExpand } from '../utils';
 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';
@@ -42,24 +41,23 @@ export function expandKeymap(api, options) {
     return false;
   }, list);
   bindKeymapWithCommand(tab.common, function (state, dispatch, editorView) {
-    if (state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
+    if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
-      var expand = editorView.nodeDOM(from);
-      if (!expand || !(expand instanceof HTMLElement)) {
-        return false;
-      }
-      var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
-      if (iconContainer && iconContainer.focus) {
-        var tr = state.tr;
-        var pos = state.selection.from;
-        tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
-        if (dispatch) {
-          dispatch(tr);
+      if (isExpandSelected(state.selection)) {
+        var expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof TextSelection) {
+        var _dom$node$parentEleme;
+        var dom = editorView.domAtPos(from);
+        var _expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!_expand || !(_expand instanceof HTMLElement)) {
+          return false;
         }
-        editorView.dom.blur();
-        iconContainer.focus();
+        return focusIcon(_expand)(state, dispatch, editorView);
       }
-      return true;
     }
     return false;
   }, list);

package/dist/esm/singlePlayerExpand/commands.js

@@ -5,9 +5,10 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 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 { expandClassNames } from '@atlaskit/editor-common/styles';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -198,4 +199,24 @@ export var focusTitle = function focusTitle(pos) {
     }
     return false;
   };
+};
+export var focusIcon = function focusIcon(expand) {
+  return function (state, dispatch, editorView) {
+    if (!expand || !(expand instanceof HTMLElement)) {
+      return false;
+    }
+    var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
+    if (iconContainer && iconContainer.focus) {
+      var tr = state.tr;
+      var pos = state.selection.from;
+      tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+      if (dispatch) {
+        dispatch(tr);
+      }
+      editorView === null || editorView === void 0 || editorView.dom.blur();
+      iconContainer.focus();
+      return true;
+    }
+    return false;
+  };
 };

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

@@ -1,11 +1,11 @@
 import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
-import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp } from '@atlaskit/editor-common/keymaps';
+import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } 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 { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
-import { deleteExpand, focusTitle } from '../commands';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpand, focusIcon, 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';
 };
@@ -40,6 +40,27 @@ export function expandKeymap(api, options) {
     }
     return false;
   }, list);
+  bindKeymapWithCommand(tab.common, function (state, dispatch, editorView) {
+    if (editorView && editorView.dom instanceof HTMLElement) {
+      var from = state.selection.from;
+      if (isExpandSelected(state.selection)) {
+        var expand = editorView.nodeDOM(from);
+        if (!expand || !(expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(expand)(state, dispatch, editorView);
+      } else if (state.selection instanceof TextSelection) {
+        var _dom$node$parentEleme;
+        var dom = editorView.domAtPos(from);
+        var _expand = (_dom$node$parentEleme = dom.node.parentElement) === null || _dom$node$parentEleme === void 0 ? void 0 : _dom$node$parentEleme.parentElement;
+        if (!_expand || !(_expand instanceof HTMLElement)) {
+          return false;
+        }
+        return focusIcon(_expand)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
   bindKeymapWithCommand(moveUp.common, function (state, dispatch, editorView) {
     if (!editorView) {
       return false;

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

@@ -22,4 +22,5 @@ export declare const createExpandNode: (state: EditorState, isNestingExpandsSupp
 export declare const insertExpandWithInputMethod: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, isNestingExpandsSupported?: boolean) => (inputMethod: InsertMethod) => Command;
 export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, isNestingExpandsSupported?: boolean) => Command;
 export declare const focusTitle: (pos: number) => Command;
+export declare const focusIcon: (expand: Node) => Command;
 export declare const setSelectionInsideExpand: (expandPos: number) => Command;

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

@@ -20,3 +20,4 @@ export declare const updateExpandTitle: ({ title, nodeType, pos }: {
     nodeType: NodeType;
 }) => Command;
 export declare const focusTitle: (pos: number) => Command;
+export declare const focusIcon: (expand: Node) => Command;

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

@@ -22,4 +22,5 @@ export declare const createExpandNode: (state: EditorState, isNestingExpandsSupp
 export declare const insertExpandWithInputMethod: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, isNestingExpandsSupported?: boolean) => (inputMethod: InsertMethod) => Command;
 export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, isNestingExpandsSupported?: boolean) => Command;
 export declare const focusTitle: (pos: number) => Command;
+export declare const focusIcon: (expand: Node) => Command;
 export declare const setSelectionInsideExpand: (expandPos: number) => Command;

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

@@ -20,3 +20,4 @@ export declare const updateExpandTitle: ({ title, nodeType, pos }: {
     nodeType: NodeType;
 }) => Command;
 export declare const focusTitle: (pos: number) => Command;
+export declare const focusIcon: (expand: Node) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "2.5.4",
+	"version": "2.6.0",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^88.2.0",
+		"@atlaskit/editor-common": "^88.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",