@atlaskit/editor-plugin-expand 8.1.3 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-expand
 
+## 8.2.0
+
+### Minor Changes
+
+- [`25991b4c801ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/25991b4c801ab) -
+  [EDITOR-4884](https://hello.jira.atlassian.cloud/browse/EDITOR-4884) - set `display: none` for
+  collapsed Expand
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.1.3
 
 ### Patch Changes

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

@@ -64,6 +64,7 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
   }]]], ['div', {
     // prettier-ignore
     class: _styles.expandClassNames.content,
+    style: (0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true) ? "display: ".concat(__livePage ? !node.attrs.__expanded : node.attrs.__expanded ? 'flow-root' : 'none') : undefined,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };
@@ -225,7 +226,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         }
       }
     });
-    (0, _defineProperty2.default)(this, "deleteExpand", function (event) {
+    (0, _defineProperty2.default)(this, "deleteExpand", function (_event) {
       if (!_this.input) {
         return;
       }
@@ -536,6 +537,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           if (_this2.content) {
             _this2.content.setAttribute('contenteditable', _this2.getContentEditable(_this2.node) ? 'true' : 'false');
           }
+          if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+            _this2.updateDisplayStyle(_this2.node);
+          }
         });
       }
     }
@@ -569,6 +573,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         });
       }, this.icon, this.renderKey);
     }
+  }, {
+    key: "updateDisplayStyle",
+    value: function updateDisplayStyle(node) {
+      if (this.content) {
+        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+        this.content.style.display = isCollapsed ? 'none' : 'flow-root';
+      }
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(event) {
@@ -610,6 +622,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             // Disallow interaction/selection inside when collapsed.
             this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
           }
+          if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+            this.updateDisplayStyle(node);
+          }
         }
 
         // During a collab session the title doesn't sync with other users

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

@@ -97,6 +97,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
         _this.updateExpandToggleIcon(_this.node);
+        if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          _this.updateDisplayStyle(_this.node);
+        }
         return;
       }
       if (target === _this.input) {
@@ -215,6 +218,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           node: _this.node
         })(state, dispatch);
         _this.updateExpandToggleIcon(_this.node);
+        if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          _this.updateDisplayStyle(_this.node);
+        }
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -543,6 +549,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           var hasChanged = this.isExpanded !== _expand.expandedState.get(node);
           if (hasChanged) {
             this.updateExpandToggleIcon(node);
+            if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+              this.updateDisplayStyle(node);
+            }
           }
         } else {
           this.node = node;
@@ -579,6 +588,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.isExpanded = expanded;
       }
     }
+  }, {
+    key: "updateDisplayStyle",
+    value: function updateDisplayStyle(node) {
+      if (this.content) {
+        this.content.style.display = (0, _expand.isExpandCollapsed)(node) ? 'none' : 'flow-root';
+      }
+    }
   }, {
     key: "updateExpandBodyContentEditable",
     value: function updateExpandBodyContentEditable() {

package/dist/cjs/singlePlayerExpand/toolbar.js

@@ -17,7 +17,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(api)
     var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
       hoverDecoration = _ref2.hoverDecoration;
     var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-    var selectedExpandNode = (0, _utils2.findParentExpandNode)(state);
+    var selectedExpandNode = (0, _utils2.findSelectedParentExpandNode)(state);
     if (selectedExpandNode) {
       var _state$schema$nodes = state.schema.nodes,
         nestedExpand = _state$schema$nodes.nestedExpand,

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

@@ -10,6 +10,7 @@ var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
@@ -51,6 +52,7 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly
   }]]], ['div', {
     // prettier-ignore
     class: _styles.expandClassNames.content,
+    style: (0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true) ? "display: ".concat(_expand.expandedState.get(node) ? 'flow-root' : 'none') : undefined,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };

package/dist/cjs/singlePlayerExpand/utils.js

@@ -3,13 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findReplaceExpandDecorations = exports.findParentExpandNode = void 0;
+exports.findSelectedParentExpandNode = exports.findReplaceExpandDecorations = void 0;
+var _expand = require("@atlaskit/editor-common/expand");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 // from platform/packages/editor/editor-plugin-find-replace/src/ui/styles.ts
 var darkModeSearchMatchClass = 'search-match-dark';
 var searchMatchExpandTitleClass = 'search-match-expand-title';
 var selectedSearchMatchClass = 'selected-search-match';
-var findParentExpandNode = exports.findParentExpandNode = function findParentExpandNode(state) {
-  return (0, _utils.findParentNodeOfType)(state.schema.nodes.nestedExpand)(state.selection) || (0, _utils.findParentNodeOfType)(state.schema.nodes.expand)(state.selection);
+var findSelectedParentExpandNode = exports.findSelectedParentExpandNode = function findSelectedParentExpandNode(state) {
+  var nestedOrParentExpand = (0, _utils.findParentNodeOfType)(state.schema.nodes.nestedExpand)(state.selection) || (0, _utils.findParentNodeOfType)(state.schema.nodes.expand)(state.selection);
+  if ((0, _expValEquals.expValEquals)('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+    // If it's nested expand, we should check if its parent expand is collapsed.
+    // If the parent expand is collapsed, the nested expand is not visible,
+    // so it could not be selected.
+    // In this case, we return the parent expand node instead of the nested expand node.
+    if ((nestedOrParentExpand === null || nestedOrParentExpand === void 0 ? void 0 : nestedOrParentExpand.node.type) === state.schema.nodes.nestedExpand) {
+      var parentExpand = (0, _utils.findParentNodeOfType)(state.schema.nodes.expand)(state.selection);
+      if (parentExpand && (0, _expand.isExpandCollapsed)(parentExpand.node)) {
+        return parentExpand;
+      }
+    }
+  }
+  return nestedOrParentExpand;
 };
 var findReplaceExpandDecorations = exports.findReplaceExpandDecorations = [darkModeSearchMatchClass, searchMatchExpandTitleClass, selectedSearchMatchClass];

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

@@ -53,6 +53,7 @@ const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => ['div'
 }]]], ['div', {
   // prettier-ignore
   class: expandClassNames.content,
+  style: expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true) ? `display: ${__livePage ? !node.attrs.__expanded : node.attrs.__expanded ? 'flow-root' : 'none'}` : undefined,
   contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
 }, 0]];
 export class ExpandNodeView {
@@ -211,7 +212,7 @@ export class ExpandNodeView {
         }
       }
     });
-    _defineProperty(this, "deleteExpand", event => {
+    _defineProperty(this, "deleteExpand", _event => {
       if (!this.input) {
         return;
       }
@@ -537,6 +538,9 @@ export class ExpandNodeView {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
         }
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          this.updateDisplayStyle(this.node);
+        }
       });
     }
   }
@@ -566,6 +570,12 @@ export class ExpandNodeView {
       expanded: this.__livePage ? !__expanded : __expanded
     }), this.icon, this.renderKey);
   }
+  updateDisplayStyle(node) {
+    if (this.content) {
+      const isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+      this.content.style.display = isCollapsed ? 'none' : 'flow-root';
+    }
+  }
   stopEvent(event) {
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -600,6 +610,9 @@ export class ExpandNodeView {
           // Disallow interaction/selection inside when collapsed.
           this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
         }
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          this.updateDisplayStyle(node);
+        }
       }
 
       // During a collab session the title doesn't sync with other users

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

@@ -81,6 +81,9 @@ export class ExpandNodeView {
           node: this.node
         })(this.view.state, this.view.dispatch);
         this.updateExpandToggleIcon(this.node);
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          this.updateDisplayStyle(this.node);
+        }
         return;
       }
       if (target === this.input) {
@@ -204,6 +207,9 @@ export class ExpandNodeView {
           node: this.node
         })(state, dispatch);
         this.updateExpandToggleIcon(this.node);
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          this.updateDisplayStyle(this.node);
+        }
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -537,6 +543,9 @@ export class ExpandNodeView {
         const hasChanged = this.isExpanded !== expandedState.get(node);
         if (hasChanged) {
           this.updateExpandToggleIcon(node);
+          if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+            this.updateDisplayStyle(node);
+          }
         }
       } else {
         this.node = node;
@@ -569,6 +578,11 @@ export class ExpandNodeView {
       this.isExpanded = expanded;
     }
   }
+  updateDisplayStyle(node) {
+    if (this.content) {
+      this.content.style.display = isExpandCollapsed(node) ? 'none' : 'flow-root';
+    }
+  }
   updateExpandBodyContentEditable() {
     // Disallow interaction/selection inside expand body when collapsed.
     if (this.content) {

package/dist/es2019/singlePlayerExpand/toolbar.js

@@ -2,7 +2,7 @@ import commonMessages from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { deleteExpand } from './commands';
-import { findParentExpandNode } from './utils';
+import { findSelectedParentExpandNode } from './utils';
 export const getToolbarConfig = api => (state, {
   formatMessage
 }) => {
@@ -11,7 +11,7 @@ export const getToolbarConfig = api => (state, {
     hoverDecoration
   } = (_api$decorations$acti = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {};
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  const selectedExpandNode = findParentExpandNode(state);
+  const selectedExpandNode = findSelectedParentExpandNode(state);
   if (selectedExpandNode) {
     const {
       nestedExpand,

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

@@ -2,6 +2,7 @@ import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const buildExpandClassName = (type, expanded) => {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
@@ -42,6 +43,7 @@ export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) =>
   }]]], ['div', {
     // prettier-ignore
     class: expandClassNames.content,
+    style: expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true) ? `display: ${expandedState.get(node) ? 'flow-root' : 'none'}` : undefined,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };

package/dist/es2019/singlePlayerExpand/utils.js

@@ -1,10 +1,25 @@
+import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // from platform/packages/editor/editor-plugin-find-replace/src/ui/styles.ts
 const darkModeSearchMatchClass = 'search-match-dark';
 const searchMatchExpandTitleClass = 'search-match-expand-title';
 const selectedSearchMatchClass = 'selected-search-match';
-export const findParentExpandNode = state => {
-  return findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+export const findSelectedParentExpandNode = state => {
+  const nestedOrParentExpand = findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+  if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+    // If it's nested expand, we should check if its parent expand is collapsed.
+    // If the parent expand is collapsed, the nested expand is not visible,
+    // so it could not be selected.
+    // In this case, we return the parent expand node instead of the nested expand node.
+    if ((nestedOrParentExpand === null || nestedOrParentExpand === void 0 ? void 0 : nestedOrParentExpand.node.type) === state.schema.nodes.nestedExpand) {
+      const parentExpand = findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+      if (parentExpand && isExpandCollapsed(parentExpand.node)) {
+        return parentExpand;
+      }
+    }
+  }
+  return nestedOrParentExpand;
 };
 export const findReplaceExpandDecorations = [darkModeSearchMatchClass, searchMatchExpandTitleClass, selectedSearchMatchClass];

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

@@ -57,6 +57,7 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
   }]]], ['div', {
     // prettier-ignore
     class: expandClassNames.content,
+    style: expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true) ? "display: ".concat(__livePage ? !node.attrs.__expanded : node.attrs.__expanded ? 'flow-root' : 'none') : undefined,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };
@@ -218,7 +219,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         }
       }
     });
-    _defineProperty(this, "deleteExpand", function (event) {
+    _defineProperty(this, "deleteExpand", function (_event) {
       if (!_this.input) {
         return;
       }
@@ -529,6 +530,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           if (_this2.content) {
             _this2.content.setAttribute('contenteditable', _this2.getContentEditable(_this2.node) ? 'true' : 'false');
           }
+          if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+            _this2.updateDisplayStyle(_this2.node);
+          }
         });
       }
     }
@@ -562,6 +566,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         });
       }, this.icon, this.renderKey);
     }
+  }, {
+    key: "updateDisplayStyle",
+    value: function updateDisplayStyle(node) {
+      if (this.content) {
+        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+        this.content.style.display = isCollapsed ? 'none' : 'flow-root';
+      }
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(event) {
@@ -603,6 +615,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             // Disallow interaction/selection inside when collapsed.
             this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
           }
+          if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+            this.updateDisplayStyle(node);
+          }
         }
 
         // During a collab session the title doesn't sync with other users

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

@@ -89,6 +89,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
         _this.updateExpandToggleIcon(_this.node);
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          _this.updateDisplayStyle(_this.node);
+        }
         return;
       }
       if (target === _this.input) {
@@ -207,6 +210,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           node: _this.node
         })(state, dispatch);
         _this.updateExpandToggleIcon(_this.node);
+        if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+          _this.updateDisplayStyle(_this.node);
+        }
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -535,6 +541,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           var hasChanged = this.isExpanded !== expandedState.get(node);
           if (hasChanged) {
             this.updateExpandToggleIcon(node);
+            if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+              this.updateDisplayStyle(node);
+            }
           }
         } else {
           this.node = node;
@@ -571,6 +580,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         this.isExpanded = expanded;
       }
     }
+  }, {
+    key: "updateDisplayStyle",
+    value: function updateDisplayStyle(node) {
+      if (this.content) {
+        this.content.style.display = isExpandCollapsed(node) ? 'none' : 'flow-root';
+      }
+    }
   }, {
     key: "updateExpandBodyContentEditable",
     value: function updateExpandBodyContentEditable() {

package/dist/esm/singlePlayerExpand/toolbar.js

@@ -2,7 +2,7 @@ import commonMessages from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { deleteExpand } from './commands';
-import { findParentExpandNode } from './utils';
+import { findSelectedParentExpandNode } from './utils';
 export var getToolbarConfig = function getToolbarConfig(api) {
   return function (state, _ref) {
     var _api$decorations$acti, _api$decorations, _api$analytics;
@@ -10,7 +10,7 @@ export var getToolbarConfig = function getToolbarConfig(api) {
     var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
       hoverDecoration = _ref2.hoverDecoration;
     var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-    var selectedExpandNode = findParentExpandNode(state);
+    var selectedExpandNode = findSelectedParentExpandNode(state);
     if (selectedExpandNode) {
       var _state$schema$nodes = state.schema.nodes,
         nestedExpand = _state$schema$nodes.nestedExpand,

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

@@ -5,6 +5,7 @@ import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
@@ -44,6 +45,7 @@ export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, content
   }]]], ['div', {
     // prettier-ignore
     class: expandClassNames.content,
+    style: expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true) ? "display: ".concat(expandedState.get(node) ? 'flow-root' : 'none') : undefined,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };

package/dist/esm/singlePlayerExpand/utils.js

@@ -1,10 +1,25 @@
+import { isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 // from platform/packages/editor/editor-plugin-find-replace/src/ui/styles.ts
 var darkModeSearchMatchClass = 'search-match-dark';
 var searchMatchExpandTitleClass = 'search-match-expand-title';
 var selectedSearchMatchClass = 'selected-search-match';
-export var findParentExpandNode = function findParentExpandNode(state) {
-  return findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+export var findSelectedParentExpandNode = function findSelectedParentExpandNode(state) {
+  var nestedOrParentExpand = findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+  if (expValEquals('platform_editor_display_none_to_expand', 'isEnabled', true)) {
+    // If it's nested expand, we should check if its parent expand is collapsed.
+    // If the parent expand is collapsed, the nested expand is not visible,
+    // so it could not be selected.
+    // In this case, we return the parent expand node instead of the nested expand node.
+    if ((nestedOrParentExpand === null || nestedOrParentExpand === void 0 ? void 0 : nestedOrParentExpand.node.type) === state.schema.nodes.nestedExpand) {
+      var parentExpand = findParentNodeOfType(state.schema.nodes.expand)(state.selection);
+      if (parentExpand && isExpandCollapsed(parentExpand.node)) {
+        return parentExpand;
+      }
+    }
+  }
+  return nestedOrParentExpand;
 };
 export var findReplaceExpandDecorations = [darkModeSearchMatchClass, searchMatchExpandTitleClass, selectedSearchMatchClass];

package/dist/types/legacyExpand/nodeviews/index.d.ts

@@ -49,6 +49,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleUndoFromTitle;
     private handleRedoFromTitle;
     private getContentEditable;
+    private updateDisplayStyle;
     stopEvent(event: Event): boolean;
     ignoreMutation(mutationRecord: MutationRecord | {
         target: Node;

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

@@ -54,6 +54,7 @@ export declare class ExpandNodeView implements NodeView {
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     updateExpandToggleIcon(node: PmNode): void;
+    private updateDisplayStyle;
     updateExpandBodyContentEditable(): void;
     private renderNativeIcon;
     renderIcon: (icon: HTMLElement | null, expanded: boolean) => void;

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

@@ -1,4 +1,4 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export declare const findParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export declare const findSelectedParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;
 export declare const findReplaceExpandDecorations: string[];

package/dist/types-ts4.5/legacyExpand/nodeviews/index.d.ts

@@ -49,6 +49,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleUndoFromTitle;
     private handleRedoFromTitle;
     private getContentEditable;
+    private updateDisplayStyle;
     stopEvent(event: Event): boolean;
     ignoreMutation(mutationRecord: MutationRecord | {
         target: Node;

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

@@ -54,6 +54,7 @@ export declare class ExpandNodeView implements NodeView {
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     updateExpandToggleIcon(node: PmNode): void;
+    private updateDisplayStyle;
     updateExpandBodyContentEditable(): void;
     private renderNativeIcon;
     renderIcon: (icon: HTMLElement | null, expanded: boolean) => void;

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

@@ -1,4 +1,4 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export declare const findParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export declare const findSelectedParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;
 export declare const findReplaceExpandDecorations: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "8.1.3",
+	"version": "8.2.0",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/icon-lab": "^5.15.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^17.0.0",
-		"@atlaskit/tokens": "^10.1.0",
+		"@atlaskit/tmp-editor-statsig": "^17.10.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -57,7 +57,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.9.0",
+		"@atlaskit/editor-common": "^111.11.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"