@atlaskit/editor-plugin-expand 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.6.3
+
+### Patch Changes
+
+- [#95226](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95226) [`35450b170a19`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35450b170a19) - [ux] [ED-23152] Expands no longer change state (open/closed) when the page width is toggled by a user (live pages/ single player expands)
+- [#94901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94901) [`da964fcdc828`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/da964fcdc828) - [ED-23097] Bump ADF schema to version 35.12.1
+- [#94398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94398) [`4df808e35fda`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4df808e35fda) - [ux] [ED-23108] Solve bug where single player expands would lose their expanded state when adding breakout marks. Single player expands are only used when `platform.editor.single-player-expand` FF AND live page are both enabled.
+
+## 1.6.2
+
+### Patch Changes
+
+- [#93962](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93962) [`797e12a40048`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/797e12a40048) - [ED-23107] fix functionality for moving down from the title of an expand with the arrow key down - you can be anywhere inside the single player expand title and move down now. the single player expand is only used when live view is enabled and the platform.editor.single-player-expand FF is enabled.
+
 ## 1.6.1
 
 ### Patch Changes

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

@@ -83,7 +83,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandToggleIcon();
+        _this.updateExpandToggleIcon(_this.node);
         return;
       }
       if (target === _this.input) {
@@ -176,7 +176,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandToggleIcon();
+        _this.updateExpandToggleIcon(_this.node);
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -222,7 +222,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         value = _this$input2.value,
         selectionStart = _this$input2.selectionStart,
         selectionEnd = _this$input2.selectionEnd;
-      if (selectionStart === selectionEnd && selectionStart === value.length) {
+      var selectionStartExists = selectionStart !== null && selectionStart !== undefined;
+      var selectionEndExists = selectionEnd !== null && selectionEnd !== undefined;
+      var selectionStartInsideTitle = selectionStartExists && selectionStart >= 0 && selectionStart <= value.length;
+      var selectionEndInsideTitle = selectionEndExists && selectionEnd >= 0 && selectionEnd <= value.length;
+      if (selectionStartInsideTitle && selectionEndInsideTitle) {
         var _this$view5 = _this.view,
           state = _this$view5.state,
           dispatch = _this$view5.dispatch;
@@ -389,13 +393,23 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             _this2.input.value = _this2.node.attrs.title;
           }
         });
-        if (this.node !== node) {
+
+        // This solves for a bug where the breakout plugin updates the node
+        // but by the time it reaches the update, it gives us the expand after
+        if (this.node !== node && this.node.attrs.title !== node.attrs.title) {
+          var shouldBeExpanded = _expand.expandedState.get(node);
+          if (shouldBeExpanded === undefined) {
+            _expand.expandedState.set(node, true);
+          }
+          this.updateExpandToggleIcon(node);
+        } else if (this.node !== node) {
+          // 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
           var previousExpandedState = _expand.expandedState.get(this.node);
           if (previousExpandedState === undefined) {
             previousExpandedState = true;
           }
           _expand.expandedState.set(node, previousExpandedState);
-          _expand.expandedState.delete(this.node);
         }
         this.node = node;
         return true;
@@ -404,13 +418,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     }
   }, {
     key: "updateExpandToggleIcon",
-    value: function updateExpandToggleIcon() {
-      var expanded = _expand.expandedState.get(this.node) ? _expand.expandedState.get(this.node) : false;
+    value: function updateExpandToggleIcon(node) {
+      var expanded = _expand.expandedState.get(node) ? _expand.expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
         var _expandedState$get2;
-        this.dom.className = (0, _NodeView.buildExpandClassName)(this.node.type.name, expanded);
+        this.dom.className = (0, _NodeView.buildExpandClassName)(node.type.name, expanded);
         // Re-render the icon to update the aria-expanded attribute
-        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = _expand.expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = _expand.expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -438,7 +452,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       _reactDom.default.unmountComponentAtNode(this.icon);
-      _expand.expandedState.delete(this.node);
     }
   }]);
   return ExpandNodeView;

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

@@ -70,7 +70,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(this.view.state, this.view.dispatch);
-        this.updateExpandToggleIcon();
+        this.updateExpandToggleIcon(this.node);
         return;
       }
       if (target === this.input) {
@@ -168,7 +168,7 @@ export class ExpandNodeView {
           pos,
           node: this.node
         })(state, dispatch);
-        this.updateExpandToggleIcon();
+        this.updateExpandToggleIcon(this.node);
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -216,7 +216,11 @@ export class ExpandNodeView {
         selectionStart,
         selectionEnd
       } = this.input;
-      if (selectionStart === selectionEnd && selectionStart === value.length) {
+      const selectionStartExists = selectionStart !== null && selectionStart !== undefined;
+      const selectionEndExists = selectionEnd !== null && selectionEnd !== undefined;
+      const selectionStartInsideTitle = selectionStartExists && selectionStart >= 0 && selectionStart <= value.length;
+      const selectionEndInsideTitle = selectionEndExists && selectionEnd >= 0 && selectionEnd <= value.length;
+      if (selectionStartInsideTitle && selectionEndInsideTitle) {
         const {
           state,
           dispatch
@@ -384,26 +388,36 @@ export class ExpandNodeView {
           this.input.value = this.node.attrs.title;
         }
       });
-      if (this.node !== node) {
+
+      // This solves for a bug where the breakout plugin updates the node
+      // but by the time it reaches the update, it gives us the expand after
+      if (this.node !== node && this.node.attrs.title !== node.attrs.title) {
+        let shouldBeExpanded = expandedState.get(node);
+        if (shouldBeExpanded === undefined) {
+          expandedState.set(node, true);
+        }
+        this.updateExpandToggleIcon(node);
+      } else if (this.node !== node) {
+        // 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
         let previousExpandedState = expandedState.get(this.node);
         if (previousExpandedState === undefined) {
           previousExpandedState = true;
         }
         expandedState.set(node, previousExpandedState);
-        expandedState.delete(this.node);
       }
       this.node = node;
       return true;
     }
     return false;
   }
-  updateExpandToggleIcon() {
-    const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
+  updateExpandToggleIcon(node) {
+    const expanded = expandedState.get(node) ? expandedState.get(node) : false;
     if (this.dom && expanded !== undefined) {
       var _expandedState$get2;
-      this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+      this.dom.className = buildExpandClassName(node.type.name, expanded);
       // Re-render the icon to update the aria-expanded attribute
-      renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+      renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
     }
     this.updateExpandBodyContentEditable();
   }
@@ -427,7 +441,6 @@ export class ExpandNodeView {
     this.icon.removeEventListener('keydown', this.handleIconKeyDown);
     (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 ? void 0 : _this$decorationClean2.call(this);
     ReactDOM.unmountComponentAtNode(this.icon);
-    expandedState.delete(this.node);
   }
 }
 export default function ({

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

@@ -75,7 +75,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(_this.view.state, _this.view.dispatch);
-        _this.updateExpandToggleIcon();
+        _this.updateExpandToggleIcon(_this.node);
         return;
       }
       if (target === _this.input) {
@@ -168,7 +168,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           pos: pos,
           node: _this.node
         })(state, dispatch);
-        _this.updateExpandToggleIcon();
+        _this.updateExpandToggleIcon(_this.node);
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -214,7 +214,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         value = _this$input2.value,
         selectionStart = _this$input2.selectionStart,
         selectionEnd = _this$input2.selectionEnd;
-      if (selectionStart === selectionEnd && selectionStart === value.length) {
+      var selectionStartExists = selectionStart !== null && selectionStart !== undefined;
+      var selectionEndExists = selectionEnd !== null && selectionEnd !== undefined;
+      var selectionStartInsideTitle = selectionStartExists && selectionStart >= 0 && selectionStart <= value.length;
+      var selectionEndInsideTitle = selectionEndExists && selectionEnd >= 0 && selectionEnd <= value.length;
+      if (selectionStartInsideTitle && selectionEndInsideTitle) {
         var _this$view5 = _this.view,
           state = _this$view5.state,
           dispatch = _this$view5.dispatch;
@@ -381,13 +385,23 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             _this2.input.value = _this2.node.attrs.title;
           }
         });
-        if (this.node !== node) {
+
+        // This solves for a bug where the breakout plugin updates the node
+        // but by the time it reaches the update, it gives us the expand after
+        if (this.node !== node && this.node.attrs.title !== node.attrs.title) {
+          var shouldBeExpanded = expandedState.get(node);
+          if (shouldBeExpanded === undefined) {
+            expandedState.set(node, true);
+          }
+          this.updateExpandToggleIcon(node);
+        } else if (this.node !== node) {
+          // 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
           var previousExpandedState = expandedState.get(this.node);
           if (previousExpandedState === undefined) {
             previousExpandedState = true;
           }
           expandedState.set(node, previousExpandedState);
-          expandedState.delete(this.node);
         }
         this.node = node;
         return true;
@@ -396,13 +410,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     }
   }, {
     key: "updateExpandToggleIcon",
-    value: function updateExpandToggleIcon() {
-      var expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
+    value: function updateExpandToggleIcon(node) {
+      var expanded = expandedState.get(node) ? expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
         var _expandedState$get2;
-        this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+        this.dom.className = buildExpandClassName(node.type.name, expanded);
         // Re-render the icon to update the aria-expanded attribute
-        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -430,7 +444,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       ReactDOM.unmountComponentAtNode(this.icon);
-      expandedState.delete(this.node);
     }
   }]);
   return ExpandNodeView;

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

@@ -44,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandToggleIcon(): void;
+    updateExpandToggleIcon(node: PmNode): void;
     updateExpandBodyContentEditable(): void;
     destroy(): void;
 }

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

@@ -44,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
         target: Element;
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
-    updateExpandToggleIcon(): void;
+    updateExpandToggleIcon(node: PmNode): void;
     updateExpandBodyContentEditable(): void;
     destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Expand plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,16 +33,16 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.10.0",
+    "@atlaskit/adf-schema": "^35.12.1",
     "@atlaskit/button": "^17.14.0",
-    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/editor-common": "^78.36.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
     "@atlaskit/editor-plugin-selection": "^1.2.0",
     "@atlaskit/editor-plugin-selection-marker": "^1.3.0",
     "@atlaskit/editor-prosemirror": "4.0.0",
-    "@atlaskit/editor-shared-styles": "^2.9.0",
+    "@atlaskit/editor-shared-styles": "^2.10.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
@@ -61,7 +61,7 @@
     "@atlaskit/editor-plugin-content-insertion": "^1.1.0",
     "@atlaskit/editor-plugin-guideline": "^1.1.0",
     "@atlaskit/editor-plugin-quick-insert": "^1.1.0",
-    "@atlaskit/editor-plugin-table": "^7.8.0",
+    "@atlaskit/editor-plugin-table": "^7.11.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",