@atlaskit/editor-plugin-expand 7.2.5 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-expand
 
+## 7.4.0
+
+### Minor Changes
+
+- [`fd552090f0285`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd552090f0285) -
+  Introduce new toggle expand command API to toggle expands across a range.
+
+## 7.3.0
+
+### Minor Changes
+
+- [`236d9310035ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/236d9310035ae) -
+  [https://product-fabric.atlassian.net/browse/ED-29205](ED-29205) - use native DOM element for
+  editor expand icon
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.2.5
 
 ### Patch Changes

package/dist/cjs/editor-commands/toggleExpandRange.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleExpandRange = void 0;
+var _expand = require("@atlaskit/editor-common/expand");
+var toggleExpandRange = exports.toggleExpandRange = function toggleExpandRange(from, to) {
+  var open = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  return function (_ref) {
+    var tr = _ref.tr;
+    var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+      expand = _tr$doc$type$schema$n.expand,
+      nestedExpand = _tr$doc$type$schema$n.nestedExpand;
+    var fromClamped = from && from >= 0 ? from : 0;
+    var toClamped = to && to <= tr.doc.content.size ? to : tr.doc.content.size;
+    tr.doc.nodesBetween(fromClamped, toClamped, function (node) {
+      if ([expand, nestedExpand].includes(node.type)) {
+        _expand.expandedState.set(node, open);
+      }
+    });
+    return null;
+  };
+};

package/dist/cjs/legacyExpand/commands.js

@@ -15,6 +15,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils4 = require("../utils");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 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; }
@@ -207,8 +208,8 @@ var focusIcon = exports.focusIcon = function focusIcon(expand) {
       return false;
     }
 
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
+    // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+    var iconContainer = (0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(".".concat(_styles.expandClassNames.iconButton)) : expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;
       var pos = state.selection.from;

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

@@ -21,10 +21,11 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _renderExpandButton = require("../../ui/renderExpandButton");
 var _commands = require("../commands");
 var _ExpandIconButton = require("../ui/ExpandIconButton");
 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; }
+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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 }
@@ -449,8 +450,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = (0, _v.default)();
-    this.renderIcon(this.intl);
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.intl);
+    }
     this.initHandlers();
   }
   return (0, _createClass2.default)(ExpandNodeView, [{
@@ -498,6 +504,19 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         });
       }
     }
+  }, {
+    key: "renderNativeIcon",
+    value: function renderNativeIcon(node) {
+      if (!this.icon) {
+        return;
+      }
+      var __expanded = node.attrs.__expanded;
+      (0, _renderExpandButton.renderExpandButton)(this.icon, {
+        expanded: this.__livePage ? !__expanded : __expanded,
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        intl: this.intl
+      });
+    }
   }, {
     key: "renderIcon",
     value: function renderIcon(intl, node) {
@@ -546,7 +565,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           // we toggle a class name to hide the content and animate the chevron.
           if (this.dom) {
             this.dom.classList.toggle(_styles.expandClassNames.expanded);
-            this.renderIcon(this && this.intl, node);
+            if ((0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true)) {
+              this.renderNativeIcon(node);
+            } else {
+              this.renderIcon(this && this.intl, node);
+            }
           }
           if (this.content) {
             // Disallow interaction/selection inside when collapsed.

package/dist/cjs/legacyExpand/plugin.js

@@ -14,6 +14,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _toggleExpandRange = require("../editor-commands/toggleExpandRange");
 var _ExpandBlockMenuItem = require("../ui/ExpandBlockMenuItem");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
@@ -57,7 +58,8 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
     commands: {
       toggleExpandWithMatch: function toggleExpandWithMatch(selection) {
         return (0, _commands.toggleExpandWithMatch)(selection);
-      }
+      },
+      toggleExpandRange: _toggleExpandRange.toggleExpandRange
     },
     pmPlugins: function pmPlugins() {
       return [{

package/dist/cjs/singlePlayerExpand/commands.js

@@ -21,7 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils4 = require("../utils");
 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; }
+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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 // Creates either an expand or a nestedExpand node based on the current selection
 var createExpandNode = exports.createExpandNode = function createExpandNode(state) {
   var setExpandedState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -34,8 +34,11 @@ var createExpandNode = exports.createExpandNode = function createExpandNode(stat
   var isSelectionInExpand = (0, _utils4.isNestedInExpand)(state);
   var expandType = isSelectionInTable || isSelectionInExpand ? nestedExpand : expand;
   var expandNode = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? expandType.createAndFill(addLocalId ? {
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     localId: (0, _v.default)()
-  } : {}, paragraph.createAndFill(addLocalId ? {
+  } : {},
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  paragraph.createAndFill(addLocalId ? {
     localId: (0, _v.default)()
   } : {})) : expandType.createAndFill({});
   if (setExpandedState) {
@@ -241,8 +244,8 @@ var focusIcon = exports.focusIcon = function focusIcon(expand) {
       return false;
     }
 
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    var iconContainer = expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
+    // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+    var iconContainer = (0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(".".concat(_styles.expandClassNames.iconButton)) : expand.querySelector(".".concat(_styles.expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;
       var pos = state.selection.from;

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

@@ -21,10 +21,12 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _renderExpandButton = require("../../ui/renderExpandButton");
 var _commands = require("../commands");
 var _ExpandButton = require("../ui/ExpandButton");
 var _NodeView = require("../ui/NodeView");
 var _utils2 = require("../utils");
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
     var _this = this,
@@ -415,12 +417,17 @@ 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));
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = (0, _v.default)();
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
-    this.renderIcon(this.icon, !(0, _expand.isExpandCollapsed)(this.node));
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.icon, !(0, _expand.isExpandCollapsed)(this.node));
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -518,7 +525,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     value: function updateExpandToggleIcon(node) {
       var expanded = _expand.expandedState.get(node) ? _expand.expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
-        var _expandedState$get;
         if ((0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
           var classes = this.dom.className.split(' ');
           // find & replace styles might be applied to the expand title and we need to keep them
@@ -530,7 +536,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           this.dom.className = (0, _NodeView.buildExpandClassName)(node.type.name, expanded);
         }
         // Re-render the icon to update the aria-expanded attribute
-        this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+        if ((0, _expValEquals.expValEquals)('platform_editor_native_expand_button', 'isEnabled', true)) {
+          this.renderNativeIcon(node);
+        } else {
+          var _expandedState$get;
+          this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+        }
       }
       this.updateExpandBodyContentEditable();
       if ((0, _expValEquals.expValEquals)('platform_editor_toggle_expand_on_match_found', 'isEnabled', true)) {
@@ -545,6 +556,18 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
       }
     }
+  }, {
+    key: "renderNativeIcon",
+    value: function renderNativeIcon(node) {
+      if (!this.icon) {
+        return;
+      }
+      (0, _renderExpandButton.renderExpandButton)(this.icon, {
+        expanded: !(0, _expand.isExpandCollapsed)(node),
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        intl: this.intl
+      });
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/cjs/singlePlayerExpand/plugin.js

@@ -14,6 +14,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _toggleExpandRange = require("../editor-commands/toggleExpandRange");
 var _ExpandBlockMenuItem = require("../ui/ExpandBlockMenuItem");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
@@ -56,7 +57,8 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
     commands: {
       toggleExpandWithMatch: function toggleExpandWithMatch(selection) {
         return (0, _commands.toggleExpandWithMatch)(selection);
-      }
+      },
+      toggleExpandRange: _toggleExpandRange.toggleExpandRange
     },
     pmPlugins: function pmPlugins() {
       return [{

package/dist/cjs/ui/renderExpandButton.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderExpandButton = renderExpandButton;
+var _browserApis = require("@atlaskit/browser-apis");
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+/**
+ * Renders or updates the expand/collapse button inside the provided container element.
+ *
+ * @param container - The HTML element that will contain the expand/collapse button.
+ * @param buttonProps - Properties for configuring the button's behavior and appearance.
+ */
+function renderExpandButton(container, buttonProps) {
+  var allowInteractiveExpand = buttonProps.allowInteractiveExpand,
+    expanded = buttonProps.expanded,
+    intl = buttonProps.intl;
+
+  // Update existing button attributes
+  var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
+  var existingButton = container.querySelector(".".concat(_styles.expandClassNames.iconButton));
+  if (existingButton) {
+    existingButton.setAttribute('aria-label', label);
+    existingButton.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      existingButton.setAttribute('title', label);
+      existingButton.removeAttribute('disabled');
+    } else {
+      existingButton.removeAttribute('title');
+      existingButton.setAttribute('disabled', 'true');
+    }
+  } else {
+    var doc = (0, _browserApis.getDocument)();
+    if (!doc) {
+      return;
+    }
+    var button = doc.createElement('button');
+    button.className = _styles.expandClassNames.iconButton;
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      button.setAttribute('title', label);
+    } else {
+      button.setAttribute('disabled', 'true');
+    }
+    container.appendChild(button);
+    var svgIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgIcon.setAttribute('class', _styles.expandClassNames.iconSvg);
+    svgIcon.setAttribute('width', '12');
+    svgIcon.setAttribute('height', '12');
+    svgIcon.setAttribute('viewBox', '0 0 16 16');
+    svgIcon.setAttribute('role', 'presentation');
+    var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentcolor');
+    path.setAttribute('d', 'm6.03 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L10.44 8 4.97 2.53z');
+    svgIcon.appendChild(path);
+    button.appendChild(svgIcon);
+  }
+}

package/dist/es2019/editor-commands/toggleExpandRange.js

@@ -0,0 +1,17 @@
+import { expandedState } from '@atlaskit/editor-common/expand';
+export const toggleExpandRange = (from, to, open = true) => ({
+  tr
+}) => {
+  const {
+    expand,
+    nestedExpand
+  } = tr.doc.type.schema.nodes;
+  const fromClamped = from && from >= 0 ? from : 0;
+  const toClamped = to && to <= tr.doc.content.size ? to : tr.doc.content.size;
+  tr.doc.nodesBetween(fromClamped, toClamped, node => {
+    if ([expand, nestedExpand].includes(node.type)) {
+      expandedState.set(node, open);
+    }
+  });
+  return null;
+};

package/dist/es2019/legacyExpand/commands.js

@@ -7,6 +7,7 @@ import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isNestedInExpand } from '../utils';
 import { createCommand } from './pm-plugins/plugin-factory';
 export const setExpandRef = ref => createCommand({
@@ -187,8 +188,8 @@ export const focusIcon = expand => (state, dispatch, editorView) => {
     return false;
   }
 
-  // eslint-disable-next-line @atlaskit/editor/no-as-casting
-  const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
+  // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+  const iconContainer = expValEquals('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(`.${expandClassNames.iconButton}`) : expand.querySelector(`.${expandClassNames.iconContainer}`);
   if (iconContainer && iconContainer.focus) {
     const {
       tr

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
@@ -11,6 +12,7 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpandAtPos, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
@@ -450,8 +452,13 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
-    this.renderIcon(this.intl);
+    if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.intl);
+    }
     this.initHandlers();
   }
   initHandlers() {
@@ -496,6 +503,19 @@ export class ExpandNodeView {
       });
     }
   }
+  renderNativeIcon(node) {
+    if (!this.icon) {
+      return;
+    }
+    const {
+      __expanded
+    } = node.attrs;
+    renderExpandButton(this.icon, {
+      expanded: this.__livePage ? !__expanded : __expanded,
+      allowInteractiveExpand: this.allowInteractiveExpand,
+      intl: this.intl
+    });
+  }
   renderIcon(intl, node) {
     if (!this.icon) {
       return;
@@ -533,7 +553,11 @@ export class ExpandNodeView {
         // we toggle a class name to hide the content and animate the chevron.
         if (this.dom) {
           this.dom.classList.toggle(expandClassNames.expanded);
-          this.renderIcon(this && this.intl, node);
+          if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+            this.renderNativeIcon(node);
+          } else {
+            this.renderIcon(this && this.intl, node);
+          }
         }
         if (this.content) {
           // Disallow interaction/selection inside when collapsed.

package/dist/es2019/legacyExpand/plugin.js

@@ -7,6 +7,7 @@ import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { toggleExpandRange } from '../editor-commands/toggleExpandRange';
 import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
@@ -49,7 +50,8 @@ export let expandPlugin = ({
       insertExpandWithInputMethod: insertExpandWithInputMethod(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     commands: {
-      toggleExpandWithMatch: selection => toggleExpandWithMatch(selection)
+      toggleExpandWithMatch: selection => toggleExpandWithMatch(selection),
+      toggleExpandRange
     },
     pmPlugins() {
       return [{

package/dist/es2019/singlePlayerExpand/commands.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 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';
@@ -24,8 +25,11 @@ export const createExpandNode = (state, setExpandedState = true, addLocalId) =>
   const isSelectionInExpand = isNestedInExpand(state);
   const expandType = isSelectionInTable || isSelectionInExpand ? nestedExpand : expand;
   const expandNode = fg('platform_editor_adf_with_localid') ? expandType.createAndFill(addLocalId ? {
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     localId: uuid()
-  } : {}, paragraph.createAndFill(addLocalId ? {
+  } : {},
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  paragraph.createAndFill(addLocalId ? {
     localId: uuid()
   } : {})) : expandType.createAndFill({});
   if (setExpandedState) {
@@ -220,8 +224,8 @@ export const focusIcon = expand => (state, dispatch, editorView) => {
     return false;
   }
 
-  // eslint-disable-next-line @atlaskit/editor/no-as-casting
-  const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
+  // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+  const iconContainer = expValEquals('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(`.${expandClassNames.iconButton}`) : expand.querySelector(`.${expandClassNames.iconContainer}`);
   if (iconContainer && iconContainer.focus) {
     const {
       tr

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
@@ -11,6 +12,7 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandButton } from '../ui/ExpandButton';
 import { buildExpandClassName, toDOM } from '../ui/NodeView';
@@ -414,12 +416,17 @@ export class ExpandNodeView {
     this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
-    this.renderIcon(this.icon, !isExpandCollapsed(this.node));
+    if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.icon, !isExpandCollapsed(this.node));
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -508,7 +515,6 @@ export class ExpandNodeView {
   updateExpandToggleIcon(node) {
     const expanded = expandedState.get(node) ? expandedState.get(node) : false;
     if (this.dom && expanded !== undefined) {
-      var _expandedState$get;
       if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
         const classes = this.dom.className.split(' ');
         // find & replace styles might be applied to the expand title and we need to keep them
@@ -518,7 +524,12 @@ export class ExpandNodeView {
         this.dom.className = buildExpandClassName(node.type.name, expanded);
       }
       // Re-render the icon to update the aria-expanded attribute
-      this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+      if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+        this.renderNativeIcon(node);
+      } else {
+        var _expandedState$get;
+        this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+      }
     }
     this.updateExpandBodyContentEditable();
     if (expValEquals('platform_editor_toggle_expand_on_match_found', 'isEnabled', true)) {
@@ -531,6 +542,16 @@ export class ExpandNodeView {
       this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
     }
   }
+  renderNativeIcon(node) {
+    if (!this.icon) {
+      return;
+    }
+    renderExpandButton(this.icon, {
+      expanded: !isExpandCollapsed(node),
+      allowInteractiveExpand: this.allowInteractiveExpand,
+      intl: this.intl
+    });
+  }
   destroy() {
     var _this$decorationClean2;
     if (!this.dom || !this.input || !this.titleContainer || !this.icon) {

package/dist/es2019/singlePlayerExpand/plugin.js

@@ -7,6 +7,7 @@ import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { toggleExpandRange } from '../editor-commands/toggleExpandRange';
 import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch, wrapSelectionAndSetExpandedState } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
@@ -48,7 +49,8 @@ export let expandPlugin = ({
       insertExpandWithInputMethod: insertExpandWithInputMethod(api)
     },
     commands: {
-      toggleExpandWithMatch: selection => toggleExpandWithMatch(selection)
+      toggleExpandWithMatch: selection => toggleExpandWithMatch(selection),
+      toggleExpandRange
     },
     pmPlugins() {
       return [{

package/dist/es2019/ui/renderExpandButton.js

@@ -0,0 +1,57 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { expandMessages } from '@atlaskit/editor-common/ui';
+/**
+ * Renders or updates the expand/collapse button inside the provided container element.
+ *
+ * @param container - The HTML element that will contain the expand/collapse button.
+ * @param buttonProps - Properties for configuring the button's behavior and appearance.
+ */
+export function renderExpandButton(container, buttonProps) {
+  const {
+    allowInteractiveExpand,
+    expanded,
+    intl
+  } = buttonProps;
+
+  // Update existing button attributes
+  const label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
+  const existingButton = container.querySelector(`.${expandClassNames.iconButton}`);
+  if (existingButton) {
+    existingButton.setAttribute('aria-label', label);
+    existingButton.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      existingButton.setAttribute('title', label);
+      existingButton.removeAttribute('disabled');
+    } else {
+      existingButton.removeAttribute('title');
+      existingButton.setAttribute('disabled', 'true');
+    }
+  } else {
+    const doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    const button = doc.createElement('button');
+    button.className = expandClassNames.iconButton;
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      button.setAttribute('title', label);
+    } else {
+      button.setAttribute('disabled', 'true');
+    }
+    container.appendChild(button);
+    const svgIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgIcon.setAttribute('class', expandClassNames.iconSvg);
+    svgIcon.setAttribute('width', '12');
+    svgIcon.setAttribute('height', '12');
+    svgIcon.setAttribute('viewBox', '0 0 16 16');
+    svgIcon.setAttribute('role', 'presentation');
+    const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentcolor');
+    path.setAttribute('d', 'm6.03 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L10.44 8 4.97 2.53z');
+    svgIcon.appendChild(path);
+    button.appendChild(svgIcon);
+  }
+}

package/dist/esm/editor-commands/toggleExpandRange.js

@@ -0,0 +1,18 @@
+import { expandedState } from '@atlaskit/editor-common/expand';
+export var toggleExpandRange = function toggleExpandRange(from, to) {
+  var open = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  return function (_ref) {
+    var tr = _ref.tr;
+    var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+      expand = _tr$doc$type$schema$n.expand,
+      nestedExpand = _tr$doc$type$schema$n.nestedExpand;
+    var fromClamped = from && from >= 0 ? from : 0;
+    var toClamped = to && to <= tr.doc.content.size ? to : tr.doc.content.size;
+    tr.doc.nodesBetween(fromClamped, toClamped, function (node) {
+      if ([expand, nestedExpand].includes(node.type)) {
+        expandedState.set(node, open);
+      }
+    });
+    return null;
+  };
+};

package/dist/esm/legacyExpand/commands.js

@@ -10,6 +10,7 @@ import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isNestedInExpand } from '../utils';
 import { createCommand } from './pm-plugins/plugin-factory';
 export var setExpandRef = function setExpandRef(ref) {
@@ -200,8 +201,8 @@ export var focusIcon = function focusIcon(expand) {
       return false;
     }
 
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
+    // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+    var iconContainer = expValEquals('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(".".concat(expandClassNames.iconButton)) : expand.querySelector(".".concat(expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;
       var pos = state.selection.from;

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

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import React from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
@@ -15,6 +16,7 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpandAtPos, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
@@ -441,8 +443,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
-    this.renderIcon(this.intl);
+    if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.intl);
+    }
     this.initHandlers();
   }
   return _createClass(ExpandNodeView, [{
@@ -490,6 +497,19 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         });
       }
     }
+  }, {
+    key: "renderNativeIcon",
+    value: function renderNativeIcon(node) {
+      if (!this.icon) {
+        return;
+      }
+      var __expanded = node.attrs.__expanded;
+      renderExpandButton(this.icon, {
+        expanded: this.__livePage ? !__expanded : __expanded,
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        intl: this.intl
+      });
+    }
   }, {
     key: "renderIcon",
     value: function renderIcon(intl, node) {
@@ -538,7 +558,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           // we toggle a class name to hide the content and animate the chevron.
           if (this.dom) {
             this.dom.classList.toggle(expandClassNames.expanded);
-            this.renderIcon(this && this.intl, node);
+            if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+              this.renderNativeIcon(node);
+            } else {
+              this.renderIcon(this && this.intl, node);
+            }
           }
           if (this.content) {
             // Disallow interaction/selection inside when collapsed.

package/dist/esm/legacyExpand/plugin.js

@@ -7,6 +7,7 @@ import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { toggleExpandRange } from '../editor-commands/toggleExpandRange';
 import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch as _toggleExpandWithMatch } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
@@ -51,7 +52,8 @@ export var expandPlugin = function expandPlugin(_ref) {
     commands: {
       toggleExpandWithMatch: function toggleExpandWithMatch(selection) {
         return _toggleExpandWithMatch(selection);
-      }
+      },
+      toggleExpandRange: toggleExpandRange
     },
     pmPlugins: function pmPlugins() {
       return [{

package/dist/esm/singlePlayerExpand/commands.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 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';
@@ -28,8 +29,11 @@ export var createExpandNode = function createExpandNode(state) {
   var isSelectionInExpand = isNestedInExpand(state);
   var expandType = isSelectionInTable || isSelectionInExpand ? nestedExpand : expand;
   var expandNode = fg('platform_editor_adf_with_localid') ? expandType.createAndFill(addLocalId ? {
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     localId: uuid()
-  } : {}, paragraph.createAndFill(addLocalId ? {
+  } : {},
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  paragraph.createAndFill(addLocalId ? {
     localId: uuid()
   } : {})) : expandType.createAndFill({});
   if (setExpandedState) {
@@ -235,8 +239,8 @@ export var focusIcon = function focusIcon(expand) {
       return false;
     }
 
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
+    // TODO: ED-29205 - During platform_editor_native_expand_button cleanup, rename `iconContainer` to `iconButton`.
+    var iconContainer = expValEquals('platform_editor_native_expand_button', 'isEnabled', true) ? expand.querySelector(".".concat(expandClassNames.iconButton)) : expand.querySelector(".".concat(expandClassNames.iconContainer));
     if (iconContainer && iconContainer.focus) {
       var tr = state.tr;
       var pos = state.selection.from;

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

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
@@ -13,6 +14,7 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandButton } from '../ui/ExpandButton';
 import { buildExpandClassName, toDOM } from '../ui/NodeView';
@@ -407,12 +409,17 @@ 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));
+    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
-    this.renderIcon(this.icon, !isExpandCollapsed(this.node));
+    if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+      this.renderNativeIcon(this.node);
+    } else {
+      this.renderIcon(this.icon, !isExpandCollapsed(this.node));
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -510,7 +517,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     value: function updateExpandToggleIcon(node) {
       var expanded = expandedState.get(node) ? expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
-        var _expandedState$get;
         if (expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
           var classes = this.dom.className.split(' ');
           // find & replace styles might be applied to the expand title and we need to keep them
@@ -522,7 +528,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           this.dom.className = buildExpandClassName(node.type.name, expanded);
         }
         // Re-render the icon to update the aria-expanded attribute
-        this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+        if (expValEquals('platform_editor_native_expand_button', 'isEnabled', true)) {
+          this.renderNativeIcon(node);
+        } else {
+          var _expandedState$get;
+          this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
+        }
       }
       this.updateExpandBodyContentEditable();
       if (expValEquals('platform_editor_toggle_expand_on_match_found', 'isEnabled', true)) {
@@ -537,6 +548,18 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
       }
     }
+  }, {
+    key: "renderNativeIcon",
+    value: function renderNativeIcon(node) {
+      if (!this.icon) {
+        return;
+      }
+      renderExpandButton(this.icon, {
+        expanded: !isExpandCollapsed(node),
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        intl: this.intl
+      });
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/esm/singlePlayerExpand/plugin.js

@@ -7,6 +7,7 @@ import { IconExpand } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { toggleExpandRange } from '../editor-commands/toggleExpandRange';
 import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { createExpandNode, insertExpand, insertExpandWithInputMethod, toggleExpandWithMatch as _toggleExpandWithMatch, wrapSelectionAndSetExpandedState } from './commands';
 import { expandKeymap } from './pm-plugins/keymap';
@@ -50,7 +51,8 @@ export var expandPlugin = function expandPlugin(_ref) {
     commands: {
       toggleExpandWithMatch: function toggleExpandWithMatch(selection) {
         return _toggleExpandWithMatch(selection);
-      }
+      },
+      toggleExpandRange: toggleExpandRange
     },
     pmPlugins: function pmPlugins() {
       return [{

package/dist/esm/ui/renderExpandButton.js

@@ -0,0 +1,55 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { expandMessages } from '@atlaskit/editor-common/ui';
+/**
+ * Renders or updates the expand/collapse button inside the provided container element.
+ *
+ * @param container - The HTML element that will contain the expand/collapse button.
+ * @param buttonProps - Properties for configuring the button's behavior and appearance.
+ */
+export function renderExpandButton(container, buttonProps) {
+  var allowInteractiveExpand = buttonProps.allowInteractiveExpand,
+    expanded = buttonProps.expanded,
+    intl = buttonProps.intl;
+
+  // Update existing button attributes
+  var label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
+  var existingButton = container.querySelector(".".concat(expandClassNames.iconButton));
+  if (existingButton) {
+    existingButton.setAttribute('aria-label', label);
+    existingButton.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      existingButton.setAttribute('title', label);
+      existingButton.removeAttribute('disabled');
+    } else {
+      existingButton.removeAttribute('title');
+      existingButton.setAttribute('disabled', 'true');
+    }
+  } else {
+    var doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    var button = doc.createElement('button');
+    button.className = expandClassNames.iconButton;
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-expanded', String(expanded));
+    if (allowInteractiveExpand) {
+      button.setAttribute('title', label);
+    } else {
+      button.setAttribute('disabled', 'true');
+    }
+    container.appendChild(button);
+    var svgIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgIcon.setAttribute('class', expandClassNames.iconSvg);
+    svgIcon.setAttribute('width', '12');
+    svgIcon.setAttribute('height', '12');
+    svgIcon.setAttribute('viewBox', '0 0 16 16');
+    svgIcon.setAttribute('role', 'presentation');
+    var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentcolor');
+    path.setAttribute('d', 'm6.03 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L10.44 8 4.97 2.53z');
+    svgIcon.appendChild(path);
+    button.appendChild(svgIcon);
+  }
+}

package/dist/types/editor-commands/toggleExpandRange.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const toggleExpandRange: (from?: number, to?: number, open?: boolean) => EditorCommand;

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

@@ -29,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
     private initHandlers;
     private focusTitle;
     private handleIconKeyDown;
+    private renderNativeIcon;
     private renderIcon;
     private handleClick;
     private handleInput;

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

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

package/dist/types/types.d.ts

@@ -68,6 +68,34 @@ export type ExpandPlugin = NextEditorPlugin<'expand', {
          * Toggle the expand or nested expand node open
          */
         toggleExpandWithMatch: (selection: Selection) => EditorCommand;
+        /**
+         * Expand or collapse a range of expand nodes. With no parameters
+         *
+         *
+         * @param from Starting range (defaults to 0)
+         * @param to Ending range (defaults to the document size)
+         * @param open Boolean to open (defaults to opening expands)
+         * @returns EditorCommand to be executed
+         *
+         * @example
+         * ```ts
+         * // Opens all the expands on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange()
+         * )
+         *
+         * // Closes all the expands between positions 0 and 34 on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange(0, 34, false)
+         * )
+         *
+         * // Closes all the expands on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange(undefined, undefined, false)
+         * )
+         * ```
+         */
+        toggleExpandRange: (from?: number, to?: number, open?: boolean) => EditorCommand;
     };
     dependencies: ExpandPluginDependencies;
     pluginConfiguration: ExpandPluginOptions | undefined;

package/dist/types/ui/renderExpandButton.d.ts

@@ -0,0 +1,17 @@
+import type { IntlShape } from 'react-intl-next';
+interface ButtonProps {
+    /** Indicates whether interactive expand is allowed */
+    allowInteractiveExpand: boolean;
+    /** Indicates whether the expand is currently expanded */
+    expanded: boolean;
+    /** Internationalization object for formatting messages */
+    intl: IntlShape;
+}
+/**
+ * Renders or updates the expand/collapse button inside the provided container element.
+ *
+ * @param container - The HTML element that will contain the expand/collapse button.
+ * @param buttonProps - Properties for configuring the button's behavior and appearance.
+ */
+export declare function renderExpandButton(container: HTMLElement, buttonProps: ButtonProps): void;
+export {};

package/dist/types-ts4.5/editor-commands/toggleExpandRange.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const toggleExpandRange: (from?: number, to?: number, open?: boolean) => EditorCommand;

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

@@ -29,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
     private initHandlers;
     private focusTitle;
     private handleIconKeyDown;
+    private renderNativeIcon;
     private renderIcon;
     private handleClick;
     private handleInput;

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

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

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

@@ -68,6 +68,34 @@ export type ExpandPlugin = NextEditorPlugin<'expand', {
          * Toggle the expand or nested expand node open
          */
         toggleExpandWithMatch: (selection: Selection) => EditorCommand;
+        /**
+         * Expand or collapse a range of expand nodes. With no parameters
+         *
+         *
+         * @param from Starting range (defaults to 0)
+         * @param to Ending range (defaults to the document size)
+         * @param open Boolean to open (defaults to opening expands)
+         * @returns EditorCommand to be executed
+         *
+         * @example
+         * ```ts
+         * // Opens all the expands on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange()
+         * )
+         *
+         * // Closes all the expands between positions 0 and 34 on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange(0, 34, false)
+         * )
+         *
+         * // Closes all the expands on the page
+         * editorAPI.core.actions.execute(
+         *   editorAPI.expand.commands.toggleExpandRange(undefined, undefined, false)
+         * )
+         * ```
+         */
+        toggleExpandRange: (from?: number, to?: number, open?: boolean) => EditorCommand;
     };
     dependencies: ExpandPluginDependencies;
     pluginConfiguration: ExpandPluginOptions | undefined;

package/dist/types-ts4.5/ui/renderExpandButton.d.ts

@@ -0,0 +1,17 @@
+import type { IntlShape } from 'react-intl-next';
+interface ButtonProps {
+    /** Indicates whether interactive expand is allowed */
+    allowInteractiveExpand: boolean;
+    /** Indicates whether the expand is currently expanded */
+    expanded: boolean;
+    /** Internationalization object for formatting messages */
+    intl: IntlShape;
+}
+/**
+ * Renders or updates the expand/collapse button inside the provided container element.
+ *
+ * @param container - The HTML element that will contain the expand/collapse button.
+ * @param buttonProps - Properties for configuring the button's behavior and appearance.
+ */
+export declare function renderExpandButton(container: HTMLElement, buttonProps: ButtonProps): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "7.2.5",
+	"version": "7.4.0",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,6 +30,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.3.2",
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-block-menu": "^5.0.0",
@@ -46,8 +47,9 @@
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/icon-lab": "^5.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^13.22.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/prosemirror-history": "^0.2.0",
+		"@atlaskit/tmp-editor-statsig": "^13.31.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -55,7 +57,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.19.0",
+		"@atlaskit/editor-common": "^110.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -68,7 +70,6 @@
 		"@atlaskit/editor-plugin-table": "^15.3.0",
 		"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
-		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"react-test-renderer": "^18.2.0"
 	},