@atlaskit/editor-plugin-expand 20.0.2 → 20.0.4

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

@@ -5,6 +5,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { keyName } from 'w3c-keyname';
+import { BLOCK_CONTROLS_DRAG_HANDLE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
@@ -19,14 +20,14 @@ 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';
+import { buildExpandClassName, getExpandBodyAriaLabel, toDOM } from '../ui/NodeView';
 import { findReplaceExpandDecorations } from '../utils';
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
     var _this = this,
       _expandedState$get,
       _api$editorDisabled,
-      _this$api8;
+      _this$api9;
     var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
     var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
     var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
@@ -152,21 +153,30 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
               var tr = _ref.tr;
               tr.setSelection(NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if (isExperimentEnabled('platform_editor_block_control_migration')) {
+                var _this$api4;
+                var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showControlAtPosition(pos, BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr: tr
+                  });
+                }
+                return null;
+              }
               var node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 var dom = _this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   var anchorName = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4;
-                    var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5;
+                    var _command = (_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.blockControls) === null || _this$api5 === void 0 ? void 0 : _this$api5.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
-                    if (command) {
-                      return command({
+                    if (_command) {
+                      return _command({
                         tr: tr
                       });
                     }
@@ -239,8 +249,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api5;
-        deleteExpand((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
+        var _this$api6;
+        deleteExpand((_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions)(state, _this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", function () {
@@ -249,12 +259,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api6;
+        var _this$api7;
         var _this$view3 = _this.view,
           state = _this$view3.state,
           dispatch = _this$view3.dispatch;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
+          editorAnalyticsAPI: (_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.analytics) === null || _this$api7 === void 0 ? void 0 : _this$api7.actions,
           pos: pos,
           node: _this.node
         })(state, dispatch);
@@ -408,13 +418,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input6.selectionStart,
         selectionEnd = _this$input6.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7;
+        var _this$api8;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api8 = _this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.selection) === null || _this$api8 === void 0 ? void 0 : _this$api8.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -530,7 +540,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
-    if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+    if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
       if (isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
@@ -602,6 +612,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           }
         });
 
+        // Sync up the aria-label with the current expand title.
+        if (isExperimentEnabled('platform_editor_expand_content_a11y_2') && this.node.attrs.title !== node.attrs.title && this.content) {
+          var _node$attrs$title;
+          this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', this.intl));
+        }
+
         // This checks if the node has been replaced with a different version
         // and updates the state of the new node to match the old one
         // Eg. typing in a node changes it to a new node so it must be updated
@@ -658,13 +674,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "isLimitedModeEnabled",
     value: function isLimitedModeEnabled() {
-      var _this$api9;
+      var _this$api0;
       // Read from `this.view.state` via the exposed plugin key rather than the shared state's
       // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
       // API's editor state isn't wired up yet).
       //
       // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.enabled);
+      return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedMode) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.sharedState.currentState()) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedModePluginKey) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.getState(this.view.state)) === null || _this$api0 === void 0 ? void 0 : _this$api0.enabled);
     }
   }, {
     key: "updateDisplayStyle",

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

@@ -4,12 +4,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
+export var getExpandBodyAriaLabel = function getExpandBodyAriaLabel(title, intl) {
+  var safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabelUntitled)) || expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+};
 export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
-  var _expandedState$get;
+  var _expandedState$get, _node$attrs$title, _intl$formatMessage;
   return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
@@ -41,12 +48,17 @@ export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, content
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [isExperimentEnabled('platform_editor_expand_content_a11y_2') ? 'section' : 'div', _objectSpread(_objectSpread({
     // prettier-ignore
     class: "".concat(expandClassNames.content, " ").concat(expandedState.get(node) ? '' : expandClassNames.contentCollapsed),
-    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
+  }, !isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
     role: 'textbox',
     'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabel) || expandMessages.expandBodyAriaLabel.defaultMessage
-  }, 0]];
+    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabelOriginal) || expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+  }), isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+    'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+    'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaDescription)) || expandMessages.expandBodyAriaDescription.defaultMessage,
+    'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : expandMessages.expandBodyRoleDescription.defaultMessage
+  }), 0]];
 };

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

@@ -5,6 +5,7 @@ import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atl
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
+export declare function getExpandBodyAriaLabel(title: string, intl?: IntlShape): string;
 export declare class ExpandNodeView implements NodeView {
     private selectNearNode;
     private __livePage;

package/dist/types/singlePlayerExpand/ui/NodeView.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
+export declare const getExpandBodyAriaLabel: (title: string, intl?: IntlShape) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "20.0.2",
+	"version": "20.0.4",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,10 +21,10 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.5.0",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/adf-schema": "^57.6.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/editor-plugin-analytics": "^19.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^20.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^20.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^18.0.0",
 		"@atlaskit/editor-plugin-decorations": "^19.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^19.0.0",
@@ -37,13 +37,13 @@
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/editor-toolbar": "^2.7.0",
-		"@atlaskit/editor-ui-control-model": "^2.9.0",
+		"@atlaskit/editor-ui-control-model": "^2.10.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/icon-lab": "^7.9.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
-		"@atlaskit/tmp-editor-statsig": "^201.0.0",
+		"@atlaskit/tmp-editor-statsig": "^202.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -52,7 +52,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.2.0",
+		"@atlaskit/editor-common": "^123.5.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"