@atlaskit/editor-plugin-expand 30.0.1 → 30.0.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-expand
 
+## 30.0.3
+
+### Patch Changes
+
+- [`892a6ad6af76e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/892a6ad6af76e) -
+  Use a native expand toggle behind the platform_editor_expand_icon_vanilla experiment while
+  preserving the selector used to reveal inline comments.
+- Updated dependencies
+
+## 30.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 30.0.1
 
 ### Patch Changes

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

@@ -29,6 +29,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _redo = require("@atlaskit/prosemirror-history/redo");
 var _undo = require("@atlaskit/prosemirror-history/undo");
 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; }
@@ -625,6 +626,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
       var _ref2 = node && node.attrs || this.node.attrs,
         __expanded = _ref2.__expanded;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_icon_vanilla')) {
+        (0, _renderExpandButton.renderExpandButton)(this.icon, {
+          intl: intl,
+          allowInteractiveExpand: this.allowInteractiveExpand,
+          expanded: this.__livePage ? !__expanded : __expanded
+        });
+        return;
+      }
       this.nodeViewPortalProviderAPI.render(function () {
         return /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
           intl: intl,
@@ -756,7 +765,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.icon) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
-        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_icon_vanilla')) {
+          this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        }
       }
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       if (this.cleanUpEditorDisabledOnChange) {

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

@@ -27,6 +27,7 @@ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-ex
 var _redo = require("@atlaskit/prosemirror-history/redo");
 var _undo = require("@atlaskit/prosemirror-history/undo");
 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");
@@ -482,6 +483,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (!icon) {
         return;
       }
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_icon_vanilla')) {
+        (0, _renderExpandButton.renderExpandButton)(icon, {
+          intl: _this.intl,
+          allowInteractiveExpand: _this.allowInteractiveExpand,
+          expanded: expanded
+        });
+        return;
+      }
       _this.nodeViewPortalProviderAPI.render(function () {
         return /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
           intl: _this.intl,
@@ -725,7 +734,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.cleanUpEditorDisabledOnChange) {
         this.cleanUpEditorDisabledOnChange();
       }
-      this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_icon_vanilla')) {
+        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      }
     }
   }]);
 }();

package/dist/cjs/ui/renderExpandButton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderExpandButton = renderExpandButton;
+var _expand = require("@atlaskit/editor-common/styles/expand");
+var _uiExpand = require("@atlaskit/editor-common/ui-expand");
+/** Update the existing control without a React portal or tooltip positioning work. */
+function renderExpandButton(container, _ref) {
+  var _intl$formatMessage;
+  var allowInteractiveExpand = _ref.allowInteractiveExpand,
+    expanded = _ref.expanded,
+    intl = _ref.intl;
+  var button = container.querySelector(".".concat(_expand.expandClassNames.iconButton));
+  if (!button) {
+    var doc = container.ownerDocument;
+    button = doc.createElement('button');
+    button.type = 'button';
+    // Confluence comment navigation and focusIcon locate and click iconContainer.
+    // Dropping that class broke revealing comments inside collapsed expands in ED-29205.
+    button.className = "".concat(_expand.expandClassNames.iconButton, " ").concat(_expand.expandClassNames.iconContainer);
+    var svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', _expand.expandClassNames.iconSvg);
+    svg.setAttribute('width', '12');
+    svg.setAttribute('height', '12');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentColor');
+    // The ADS small ChevronRightIcon, matching the existing React control.
+    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');
+    svg.appendChild(path);
+    button.appendChild(svg);
+    container.appendChild(button);
+  }
+  var message = expanded ? _uiExpand.messages.collapseNode : _uiExpand.messages.expandNode;
+  var label = (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(message)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : message.defaultMessage;
+  button.setAttribute('aria-label', label);
+  button.setAttribute('aria-expanded', String(expanded));
+  button.disabled = !allowInteractiveExpand;
+  if (allowInteractiveExpand) {
+    button.title = label;
+  } else {
+    button.removeAttribute('title');
+  }
+}

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

@@ -19,6 +19,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 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) {
@@ -628,6 +629,14 @@ export class ExpandNodeView {
     const {
       __expanded
     } = node && node.attrs || this.node.attrs;
+    if (isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+      renderExpandButton(this.icon, {
+        intl,
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        expanded: this.__livePage ? !__expanded : __expanded
+      });
+      return;
+    }
     this.nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(ExpandIconButton, {
       intl: intl,
       allowInteractiveExpand: this.allowInteractiveExpand,
@@ -740,7 +749,9 @@ export class ExpandNodeView {
     if (this.icon) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
-      this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      if (!isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      }
     }
     (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 ? void 0 : _this$decorationClean2.call(this);
     if (this.cleanUpEditorDisabledOnChange) {

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

@@ -18,6 +18,7 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 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, getExpandBodyAriaLabel, toDOM } from '../ui/NodeView';
@@ -486,6 +487,14 @@ export class ExpandNodeView {
       if (!icon) {
         return;
       }
+      if (isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+        renderExpandButton(icon, {
+          intl: this.intl,
+          allowInteractiveExpand: this.allowInteractiveExpand,
+          expanded
+        });
+        return;
+      }
       this.nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(ExpandButton, {
         intl: this.intl,
         allowInteractiveExpand: this.allowInteractiveExpand,
@@ -703,7 +712,9 @@ export class ExpandNodeView {
     if (this.cleanUpEditorDisabledOnChange) {
       this.cleanUpEditorDisabledOnChange();
     }
-    this.nodeViewPortalProviderAPI.remove(this.renderKey);
+    if (!isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+      this.nodeViewPortalProviderAPI.remove(this.renderKey);
+    }
   }
 }
 export default function ({

package/dist/es2019/ui/renderExpandButton.js

@@ -0,0 +1,43 @@
+import { expandClassNames } from '@atlaskit/editor-common/styles/expand';
+import { messages } from '@atlaskit/editor-common/ui-expand';
+/** Update the existing control without a React portal or tooltip positioning work. */
+export function renderExpandButton(container, {
+  allowInteractiveExpand,
+  expanded,
+  intl
+}) {
+  var _intl$formatMessage;
+  let button = container.querySelector(`.${expandClassNames.iconButton}`);
+  if (!button) {
+    const doc = container.ownerDocument;
+    button = doc.createElement('button');
+    button.type = 'button';
+    // Confluence comment navigation and focusIcon locate and click iconContainer.
+    // Dropping that class broke revealing comments inside collapsed expands in ED-29205.
+    button.className = `${expandClassNames.iconButton} ${expandClassNames.iconContainer}`;
+    const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', expandClassNames.iconSvg);
+    svg.setAttribute('width', '12');
+    svg.setAttribute('height', '12');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentColor');
+    // The ADS small ChevronRightIcon, matching the existing React control.
+    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');
+    svg.appendChild(path);
+    button.appendChild(svg);
+    container.appendChild(button);
+  }
+  const message = expanded ? messages.collapseNode : messages.expandNode;
+  const label = (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(message)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : message.defaultMessage;
+  button.setAttribute('aria-label', label);
+  button.setAttribute('aria-expanded', String(expanded));
+  button.disabled = !allowInteractiveExpand;
+  if (allowInteractiveExpand) {
+    button.title = label;
+  } else {
+    button.removeAttribute('title');
+  }
+}

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

@@ -23,6 +23,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 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) {
@@ -617,6 +618,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       }
       var _ref2 = node && node.attrs || this.node.attrs,
         __expanded = _ref2.__expanded;
+      if (isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+        renderExpandButton(this.icon, {
+          intl: intl,
+          allowInteractiveExpand: this.allowInteractiveExpand,
+          expanded: this.__livePage ? !__expanded : __expanded
+        });
+        return;
+      }
       this.nodeViewPortalProviderAPI.render(function () {
         return /*#__PURE__*/React.createElement(ExpandIconButton, {
           intl: intl,
@@ -748,7 +757,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.icon) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
-        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        if (!isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+          this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        }
       }
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       if (this.cleanUpEditorDisabledOnChange) {

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

@@ -20,6 +20,7 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { redo } from '@atlaskit/prosemirror-history/redo';
 import { undo } from '@atlaskit/prosemirror-history/undo';
 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, getExpandBodyAriaLabel, toDOM } from '../ui/NodeView';
@@ -474,6 +475,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (!icon) {
         return;
       }
+      if (isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+        renderExpandButton(icon, {
+          intl: _this.intl,
+          allowInteractiveExpand: _this.allowInteractiveExpand,
+          expanded: expanded
+        });
+        return;
+      }
       _this.nodeViewPortalProviderAPI.render(function () {
         return /*#__PURE__*/React.createElement(ExpandButton, {
           intl: _this.intl,
@@ -717,7 +726,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.cleanUpEditorDisabledOnChange) {
         this.cleanUpEditorDisabledOnChange();
       }
-      this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      if (!isExperimentEnabled('platform_editor_expand_icon_vanilla')) {
+        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      }
     }
   }]);
 }();

package/dist/esm/ui/renderExpandButton.js

@@ -0,0 +1,42 @@
+import { expandClassNames } from '@atlaskit/editor-common/styles/expand';
+import { messages } from '@atlaskit/editor-common/ui-expand';
+/** Update the existing control without a React portal or tooltip positioning work. */
+export function renderExpandButton(container, _ref) {
+  var _intl$formatMessage;
+  var allowInteractiveExpand = _ref.allowInteractiveExpand,
+    expanded = _ref.expanded,
+    intl = _ref.intl;
+  var button = container.querySelector(".".concat(expandClassNames.iconButton));
+  if (!button) {
+    var doc = container.ownerDocument;
+    button = doc.createElement('button');
+    button.type = 'button';
+    // Confluence comment navigation and focusIcon locate and click iconContainer.
+    // Dropping that class broke revealing comments inside collapsed expands in ED-29205.
+    button.className = "".concat(expandClassNames.iconButton, " ").concat(expandClassNames.iconContainer);
+    var svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', expandClassNames.iconSvg);
+    svg.setAttribute('width', '12');
+    svg.setAttribute('height', '12');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    var path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('fill', 'currentColor');
+    // The ADS small ChevronRightIcon, matching the existing React control.
+    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');
+    svg.appendChild(path);
+    button.appendChild(svg);
+    container.appendChild(button);
+  }
+  var message = expanded ? messages.collapseNode : messages.expandNode;
+  var label = (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(message)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : message.defaultMessage;
+  button.setAttribute('aria-label', label);
+  button.setAttribute('aria-expanded', String(expanded));
+  button.disabled = !allowInteractiveExpand;
+  if (allowInteractiveExpand) {
+    button.title = label;
+  } else {
+    button.removeAttribute('title');
+  }
+}

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

@@ -0,0 +1,9 @@
+import type { IntlShape } from 'react-intl';
+interface ExpandButtonProps {
+    allowInteractiveExpand: boolean;
+    expanded: boolean;
+    intl?: IntlShape;
+}
+/** Update the existing control without a React portal or tooltip positioning work. */
+export declare function renderExpandButton(container: HTMLElement, { allowInteractiveExpand, expanded, intl }: ExpandButtonProps): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "30.0.1",
+	"version": "30.0.3",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,9 +22,9 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/button": "^25.5.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/editor-plugin-analytics": "^29.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^30.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^30.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^28.0.0",
 		"@atlaskit/editor-plugin-decorations": "^29.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^29.0.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/editor-plugin-selection": "^29.0.0",
 		"@atlaskit/editor-plugin-selection-marker": "^29.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
-		"@atlaskit/editor-shared-styles": "^4.5.0",
+		"@atlaskit/editor-shared-styles": "^4.6.0",
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/editor-ui-control-model": "^2.10.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-history": "^1.3.0",
-		"@atlaskit/tmp-editor-statsig": "^243.0.0",
+		"@atlaskit/tmp-editor-statsig": "^244.0.0",
 		"@atlaskit/tokens": "^20.6.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -52,7 +52,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^133.1.0",
+		"@atlaskit/editor-common": "^133.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"