@atlaskit/editor-plugin-expand 2.7.4 → 2.7.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-expand
 
+## 2.7.5
+
+### Patch Changes
+
+- [#143199](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143199)
+  [`2c7282d335256`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c7282d335256) -
+  [ux] [ED-24799] 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.
+- Updated dependencies
+
 ## 2.7.4
 
 ### Patch Changes

package/dist/cjs/legacyExpand/commands.js

@@ -198,9 +198,11 @@ var focusTitle = exports.focusTitle = function focusTitle(pos) {
 };
 var focusIcon = exports.focusIcon = function focusIcon(expand) {
   return function (state, dispatch, editorView) {
-    if (!expand || !(expand instanceof HTMLElement)) {
+    if (!(expand instanceof HTMLElement)) {
       return false;
     }
+
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
     var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;

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

@@ -9,9 +9,10 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
-var _utils2 = require("../utils");
+var _utils3 = require("../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';
 };
@@ -49,20 +50,25 @@ function expandKeymap(api, options) {
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch, editorView) {
     if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         var expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof _state.TextSelection && !(0, _utils2.isInTable)(state)) {
+        var _expand = (0, _utils3.findExpand)(state);
+        if (_expand) {
+          var expandNode = editorView.nodeDOM(_expand.pos);
+          if (expandNode) {
+            return (0, _commands.focusIcon)(expandNode)(state, dispatch, editorView);
+          }
         }
-        return (0, _commands.focusIcon)(_expand)(state, dispatch, editorView);
       }
     }
     return false;
@@ -82,7 +88,7 @@ function expandKeymap(api, options) {
     }
     var $from = state.selection.$from;
     if (editorView.endOfTextblock('up')) {
-      var expand = (0, _utils2.findExpand)(state);
+      var expand = (0, _utils3.findExpand)(state);
 
       // Moving UP in a table should move the cursor to the row above
       // however when an expand is in a table cell to the left of the
@@ -97,7 +103,7 @@ function expandKeymap(api, options) {
         return (0, _commands.focusTitle)(expand.start)(state, dispatch, editorView);
       }
       var sel = _state.Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
-      var expandBefore = (0, _utils2.findExpand)(state, sel);
+      var expandBefore = (0, _utils3.findExpand)(state, sel);
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
         if (
@@ -150,11 +156,11 @@ function expandKeymap(api, options) {
     var _state$schema$nodes2 = state.schema.nodes,
       expand = _state$schema$nodes2.expand,
       nestedExpand = _state$schema$nodes2.nestedExpand;
-    var expandNode = (0, _utils2.findExpand)(state);
+    var expandNode = (0, _utils3.findExpand)(state);
     if (!expandNode) {
       // @see ED-7977
       var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
-      var expandBefore = (0, _utils2.findExpand)(state, sel);
+      var expandBefore = (0, _utils3.findExpand)(state, sel);
       if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && (
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       (0, _platformFeatureFlags.fg)('platform.editor.live-pages-expand-divergence') && options.__livePage ? expandBefore.node.attrs.__expanded : !expandBefore.node.attrs.__expanded)) {

package/dist/cjs/singlePlayerExpand/commands.js

@@ -200,9 +200,11 @@ var focusTitle = exports.focusTitle = function focusTitle(pos) {
 };
 var focusIcon = exports.focusIcon = function focusIcon(expand) {
   return function (state, dispatch, editorView) {
-    if (!expand || !(expand instanceof HTMLElement)) {
+    if (!(expand instanceof HTMLElement)) {
       return false;
     }
+
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
     var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;

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

@@ -11,6 +11,7 @@ var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 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';
@@ -49,20 +50,25 @@ function expandKeymap(api, options) {
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch, editorView) {
     if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         var expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof _state.TextSelection && !(0, _utils2.isInTable)(state)) {
+        var _expand = (0, _transforms.findExpand)(state);
+        if (_expand) {
+          var expandNode = editorView.nodeDOM(_expand.pos);
+          if (expandNode) {
+            return (0, _commands.focusIcon)(expandNode)(state, dispatch, editorView);
+          }
         }
-        return (0, _commands.focusIcon)(_expand)(state, dispatch, editorView);
       }
     }
     return false;

package/dist/es2019/legacyExpand/commands.js

@@ -178,9 +178,11 @@ export const focusTitle = pos => (state, dispatch, editorView) => {
   return false;
 };
 export const focusIcon = expand => (state, dispatch, editorView) => {
-  if (!expand || !(expand instanceof HTMLElement)) {
+  if (!(expand instanceof HTMLElement)) {
     return false;
   }
+
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
   const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
   if (iconContainer && iconContainer.focus) {
     const {

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

@@ -3,6 +3,7 @@ import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor
 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 { isInTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { deleteExpand, focusIcon, focusTitle } from '../commands';
 import { findExpand } from '../utils';
@@ -51,20 +52,25 @@ export function expandKeymap(api, options) {
       const {
         from
       } = state.selection;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         const expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof TextSelection && !isInTable(state)) {
+        const expand = findExpand(state);
+        if (expand) {
+          const expandNode = editorView.nodeDOM(expand.pos);
+          if (expandNode) {
+            return focusIcon(expandNode)(state, dispatch, editorView);
+          }
         }
-        return focusIcon(expand)(state, dispatch, editorView);
       }
     }
     return false;

package/dist/es2019/singlePlayerExpand/commands.js

@@ -178,9 +178,11 @@ export const focusTitle = pos => (state, dispatch, editorView) => {
   return false;
 };
 export const focusIcon = expand => (state, dispatch, editorView) => {
-  if (!expand || !(expand instanceof HTMLElement)) {
+  if (!(expand instanceof HTMLElement)) {
     return false;
   }
+
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
   const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
   if (iconContainer && iconContainer.focus) {
     const {

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

@@ -5,6 +5,7 @@ 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, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isInTable } from '@atlaskit/editor-tables/utils';
 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';
@@ -51,20 +52,25 @@ export function expandKeymap(api, options) {
       const {
         from
       } = state.selection;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         const expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof TextSelection && !isInTable(state)) {
+        const expand = findExpand(state);
+        if (expand) {
+          const expandNode = editorView.nodeDOM(expand.pos);
+          if (expandNode) {
+            return focusIcon(expandNode)(state, dispatch, editorView);
+          }
         }
-        return focusIcon(expand)(state, dispatch, editorView);
       }
     }
     return false;

package/dist/esm/legacyExpand/commands.js

@@ -191,9 +191,11 @@ export var focusTitle = function focusTitle(pos) {
 };
 export var focusIcon = function focusIcon(expand) {
   return function (state, dispatch, editorView) {
-    if (!expand || !(expand instanceof HTMLElement)) {
+    if (!(expand instanceof HTMLElement)) {
       return false;
     }
+
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
     var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;

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

@@ -3,6 +3,7 @@ import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor
 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 { isInTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { deleteExpand, focusIcon, focusTitle } from '../commands';
 import { findExpand } from '../utils';
@@ -43,20 +44,25 @@ export function expandKeymap(api, options) {
   bindKeymapWithCommand(tab.common, function (state, dispatch, editorView) {
     if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         var expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof TextSelection && !isInTable(state)) {
+        var _expand = findExpand(state);
+        if (_expand) {
+          var expandNode = editorView.nodeDOM(_expand.pos);
+          if (expandNode) {
+            return focusIcon(expandNode)(state, dispatch, editorView);
+          }
         }
-        return focusIcon(_expand)(state, dispatch, editorView);
       }
     }
     return false;

package/dist/esm/singlePlayerExpand/commands.js

@@ -194,9 +194,11 @@ export var focusTitle = function focusTitle(pos) {
 };
 export var focusIcon = function focusIcon(expand) {
   return function (state, dispatch, editorView) {
-    if (!expand || !(expand instanceof HTMLElement)) {
+    if (!(expand instanceof HTMLElement)) {
       return false;
     }
+
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
     var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;

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

@@ -5,6 +5,7 @@ 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, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isInTable } from '@atlaskit/editor-tables/utils';
 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';
@@ -43,20 +44,25 @@ export function expandKeymap(api, options) {
   bindKeymapWithCommand(tab.common, function (state, dispatch, editorView) {
     if (editorView && editorView.dom instanceof HTMLElement) {
       var from = state.selection.from;
+
+      // if the node selected is an expand
       if (isExpandSelected(state.selection)) {
         var expand = editorView.nodeDOM(from);
-        if (!expand || !(expand instanceof HTMLElement)) {
+        if (!expand) {
           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;
+      }
+
+      // if the text selection is inside an expand
+      else if (state.selection instanceof TextSelection && !isInTable(state)) {
+        var _expand = findExpand(state);
+        if (_expand) {
+          var expandNode = editorView.nodeDOM(_expand.pos);
+          if (expandNode) {
+            return focusIcon(expandNode)(state, dispatch, editorView);
+          }
         }
-        return focusIcon(_expand)(state, dispatch, editorView);
       }
     }
     return false;

package/package.json

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