@atlaskit/editor-plugin-expand 7.2.5 → 7.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-expand
 
+## 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/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,6 +21,7 @@ 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; }
@@ -450,7 +451,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
     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 +503,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 +564,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/singlePlayerExpand/commands.js

@@ -241,8 +241,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,6 +21,7 @@ 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");
@@ -420,7 +421,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     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 +523,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 +534,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 +554,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/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/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

@@ -11,6 +11,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) {
@@ -451,7 +452,11 @@ export class ExpandNodeView {
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
     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 +501,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 +551,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/singlePlayerExpand/commands.js

@@ -220,8 +220,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

@@ -11,6 +11,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';
@@ -419,7 +420,11 @@ export class ExpandNodeView {
     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 +513,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 +522,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 +540,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/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/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

@@ -15,6 +15,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) {
@@ -442,7 +443,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
     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 +495,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 +556,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/singlePlayerExpand/commands.js

@@ -235,8 +235,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

@@ -13,6 +13,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';
@@ -412,7 +413,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     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 +515,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 +526,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 +546,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/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/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/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/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/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.3.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.30.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.23.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"
 	},