@atlaskit/editor-plugin-expand 1.3.4 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.4.0
+
+### Minor Changes
+
+- [#90925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90925) [`431c0d17e3e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/431c0d17e3e3) - [ux] Improve the selection marker by hiding it when in an expand and improving styling by making it more subtle.
+
+## 1.3.5
+
+### Patch Changes
+
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- Updated dependencies
+
 ## 1.3.4
 
 ### Patch Changes

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

@@ -67,6 +67,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "isMobile", false);
     (0, _defineProperty2.default)(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -82,6 +83,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -107,7 +109,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         state = _this$view2.state,
         dispatch = _this$view2.dispatch;
       if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
-        var _this$api;
+        var _this$api2;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -119,7 +121,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           _this.view.dom.blur();
         }
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
+          editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -154,6 +156,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
       switch ((0, _w3cKeyname.keyName)(event)) {
         case 'Enter':
@@ -194,8 +200,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       var state = _this.view.state;
       var expandNode = _this.node;
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api2;
-        (0, _commands.deleteExpandAtPos)((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(pos, expandNode)(state, _this.view.dispatch);
+        var _this$api3;
+        (0, _commands.deleteExpandAtPos)((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, expandNode)(state, _this.view.dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -204,12 +210,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api3;
+        var _this$api4;
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions,
+          editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -330,13 +336,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api4;
+        var _this$api5;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.selection) === null || _this$api4 === void 0 ? void 0 : _this$api4.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.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) {
@@ -391,6 +397,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.addEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.addEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // If the user interacts in our title bar (either toggle or input)
@@ -470,6 +478,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$decorationClean2;
       if (this.dom) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.dom.removeEventListener('click', this.handleClick);
@@ -479,6 +488,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.removeEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.removeEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -489,6 +500,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
         _reactDom.default.unmountComponentAtNode(this.icon);
       }
+      (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
 
       // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
       this.dom = undefined;

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

@@ -28,6 +28,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "isMobile", false);
     (0, _defineProperty2.default)(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -43,6 +44,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -108,6 +110,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    (0, _defineProperty2.default)(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
       switch ((0, _w3cKeyname.keyName)(event)) {
         case 'Enter':
@@ -144,8 +150,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api;
-        (0, _commands.deleteExpand)((_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions)(state, _this.view.dispatch);
+        var _this$api2;
+        (0, _commands.deleteExpand)((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(state, _this.view.dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -260,13 +266,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api2;
+        var _this$api3;
         event.preventDefault();
         var _this$view7 = _this.view,
           state = _this$view7.state,
           dispatch = _this$view7.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selection) === null || _this$api2 === void 0 ? void 0 : _this$api2.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.selection) === null || _this$api3 === void 0 ? void 0 : _this$api3.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) {
@@ -315,6 +321,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.dom.addEventListener('click', this.handleClick);
     this.dom.addEventListener('input', this.handleInput);
     this.input.addEventListener('keydown', this.handleTitleKeydown);
+    this.input.addEventListener('blur', this.handleBlur);
     // If the user interacts in our title bar (either toggle or input)
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -363,14 +370,17 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$decorationClean2;
       if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
         return;
       }
       this.dom.removeEventListener('click', this.handleClick);
       this.dom.removeEventListener('input', this.handleInput);
       this.input.removeEventListener('keydown', this.handleTitleKeydown);
+      this.input.removeEventListener('blur', this.handleBlur);
       this.titleContainer.removeEventListener('focus', this.handleFocus);
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
+      (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       _reactDom.default.unmountComponentAtNode(this.icon);
     }
   }]);

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

@@ -51,6 +51,7 @@ export class ExpandNodeView {
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
       if (this.input) {
+        var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
         const {
           state,
           dispatch
@@ -67,6 +68,7 @@ export class ExpandNodeView {
         if (typeof pos === 'number') {
           setSelectionInsideExpand(pos)(state, dispatch, this.view);
         }
+        this.decorationCleanup = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$selectionMa = _this$api.selectionMarker) === null || _this$api$selectionMa === void 0 ? void 0 : (_this$api$selectionMa2 = _this$api$selectionMa.actions) === null || _this$api$selectionMa2 === void 0 ? void 0 : _this$api$selectionMa2.hideDecoration();
         this.input.focus();
       }
     });
@@ -93,7 +95,7 @@ export class ExpandNodeView {
         dispatch
       } = this.view;
       if (closestElement(target, `.${expandClassNames.icon}`)) {
-        var _this$api, _this$api$analytics;
+        var _this$api2, _this$api2$analytics;
         if (!this.allowInteractiveExpand) {
           return;
         }
@@ -105,7 +107,7 @@ export class ExpandNodeView {
           this.view.dom.blur();
         }
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions,
+          editorAnalyticsAPI: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions,
           pos,
           nodeType: this.node.type,
           __livePage: this.__livePage
@@ -141,6 +143,10 @@ export class ExpandNodeView {
     _defineProperty(this, "handleFocus", event => {
       event.stopImmediatePropagation();
     });
+    _defineProperty(this, "handleBlur", event => {
+      var _this$decorationClean;
+      (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
+    });
     _defineProperty(this, "handleTitleKeydown", event => {
       switch (keyName(event)) {
         case 'Enter':
@@ -184,8 +190,8 @@ export class ExpandNodeView {
       } = this.view;
       const expandNode = this.node;
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api2, _this$api2$analytics;
-        deleteExpandAtPos((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
+        var _this$api3, _this$api3$analytics;
+        deleteExpandAtPos((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", () => {
@@ -194,13 +200,13 @@ export class ExpandNodeView {
         return;
       }
       if (this.allowInteractiveExpand) {
-        var _this$api3, _this$api3$analytics;
+        var _this$api4, _this$api4$analytics;
         const {
           state,
           dispatch
         } = this.view;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions,
+          editorAnalyticsAPI: (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : _this$api4$analytics.actions,
           pos,
           nodeType: this.node.type,
           __livePage: this.__livePage
@@ -329,14 +335,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api4, _this$api4$selection;
+        var _this$api5, _this$api5$selection;
         event.preventDefault();
         const {
           state,
           dispatch
         } = this.view;
         this.view.focus();
-        const selectionSharedState = ((_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$selection = _this$api4.selection) === null || _this$api4$selection === void 0 ? void 0 : _this$api4$selection.sharedState.currentState()) || {};
+        const selectionSharedState = ((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$selection = _this$api5.selection) === null || _this$api5$selection === void 0 ? void 0 : _this$api5$selection.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) {
@@ -390,6 +396,8 @@ export class ExpandNodeView {
     if (this.input) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.input.addEventListener('keydown', this.handleTitleKeydown);
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.input.addEventListener('blur', this.handleBlur);
     }
     if (this.titleContainer) {
       // If the user interacts in our title bar (either toggle or input)
@@ -459,6 +467,7 @@ export class ExpandNodeView {
     return false;
   }
   destroy() {
+    var _this$decorationClean2;
     if (this.dom) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.dom.removeEventListener('click', this.handleClick);
@@ -468,6 +477,8 @@ export class ExpandNodeView {
     if (this.input) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.input.removeEventListener('keydown', this.handleTitleKeydown);
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      this.input.removeEventListener('blur', this.handleBlur);
     }
     if (this.titleContainer) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -478,6 +489,7 @@ export class ExpandNodeView {
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
       ReactDOM.unmountComponentAtNode(this.icon);
     }
+    (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 ? void 0 : _this$decorationClean2.call(this);
 
     // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
     this.dom = undefined;

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

@@ -14,6 +14,7 @@ export class ExpandNodeView {
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
       if (this.input) {
+        var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
         const {
           state,
           dispatch
@@ -30,6 +31,7 @@ export class ExpandNodeView {
         if (typeof pos === 'number') {
           setSelectionInsideExpand(pos)(state, dispatch, this.view);
         }
+        this.decorationCleanup = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$selectionMa = _this$api.selectionMarker) === null || _this$api$selectionMa === void 0 ? void 0 : (_this$api$selectionMa2 = _this$api$selectionMa.actions) === null || _this$api$selectionMa2 === void 0 ? void 0 : _this$api$selectionMa2.hideDecoration();
         this.input.focus();
       }
     });
@@ -96,6 +98,10 @@ export class ExpandNodeView {
     _defineProperty(this, "handleFocus", event => {
       event.stopImmediatePropagation();
     });
+    _defineProperty(this, "handleBlur", event => {
+      var _this$decorationClean;
+      (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
+    });
     _defineProperty(this, "handleTitleKeydown", event => {
       switch (keyName(event)) {
         case 'Enter':
@@ -135,8 +141,8 @@ export class ExpandNodeView {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api, _this$api$analytics;
-        deleteExpand((_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions)(state, this.view.dispatch);
+        var _this$api2, _this$api2$analytics;
+        deleteExpand((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions)(state, this.view.dispatch);
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -259,14 +265,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api2, _this$api2$selection;
+        var _this$api3, _this$api3$selection;
         event.preventDefault();
         const {
           state,
           dispatch
         } = this.view;
         this.view.focus();
-        const selectionSharedState = ((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$selection = _this$api2.selection) === null || _this$api2$selection === void 0 ? void 0 : _this$api2$selection.sharedState.currentState()) || {};
+        const selectionSharedState = ((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$selection = _this$api3.selection) === null || _this$api3$selection === void 0 ? void 0 : _this$api3$selection.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) {
@@ -316,6 +322,7 @@ export class ExpandNodeView {
     this.dom.addEventListener('click', this.handleClick);
     this.dom.addEventListener('input', this.handleInput);
     this.input.addEventListener('keydown', this.handleTitleKeydown);
+    this.input.addEventListener('blur', this.handleBlur);
     // If the user interacts in our title bar (either toggle or input)
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -355,14 +362,17 @@ export class ExpandNodeView {
     return false;
   }
   destroy() {
+    var _this$decorationClean2;
     if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
       return;
     }
     this.dom.removeEventListener('click', this.handleClick);
     this.dom.removeEventListener('input', this.handleInput);
     this.input.removeEventListener('keydown', this.handleTitleKeydown);
+    this.input.removeEventListener('blur', this.handleBlur);
     this.titleContainer.removeEventListener('focus', this.handleFocus);
     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);
   }
 }

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

@@ -59,6 +59,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -74,6 +75,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           setSelectionInsideExpand(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -99,7 +101,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         state = _this$view2.state,
         dispatch = _this$view2.dispatch;
       if (closestElement(target, ".".concat(expandClassNames.icon))) {
-        var _this$api;
+        var _this$api2;
         if (!_this.allowInteractiveExpand) {
           return;
         }
@@ -111,7 +113,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           _this.view.dom.blur();
         }
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
+          editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -146,6 +148,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    _defineProperty(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     _defineProperty(this, "handleTitleKeydown", function (event) {
       switch (keyName(event)) {
         case 'Enter':
@@ -186,8 +192,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       var state = _this.view.state;
       var expandNode = _this.node;
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api2;
-        deleteExpandAtPos((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(pos, expandNode)(state, _this.view.dispatch);
+        var _this$api3;
+        deleteExpandAtPos((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, expandNode)(state, _this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", function () {
@@ -196,12 +202,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api3;
+        var _this$api4;
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions,
+          editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -322,13 +328,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api4;
+        var _this$api5;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.selection) === null || _this$api4 === void 0 ? void 0 : _this$api4.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.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) {
@@ -383,6 +389,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.addEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.addEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // If the user interacts in our title bar (either toggle or input)
@@ -462,6 +470,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$decorationClean2;
       if (this.dom) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.dom.removeEventListener('click', this.handleClick);
@@ -471,6 +480,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.input) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.input.removeEventListener('keydown', this.handleTitleKeydown);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.removeEventListener('blur', this.handleBlur);
       }
       if (this.titleContainer) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -481,6 +492,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
         ReactDOM.unmountComponentAtNode(this.icon);
       }
+      (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
 
       // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
       this.dom = undefined;

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

@@ -20,6 +20,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", function () {
       if (_this.input) {
+        var _this$api;
         var _this$view = _this.view,
           state = _this$view.state,
           dispatch = _this$view.dispatch;
@@ -35,6 +36,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         if (typeof pos === 'number') {
           setSelectionInsideExpand(pos)(state, dispatch, _this.view);
         }
+        _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
         _this.input.focus();
       }
     });
@@ -100,6 +102,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "handleFocus", function (event) {
       event.stopImmediatePropagation();
     });
+    _defineProperty(this, "handleBlur", function (event) {
+      var _this$decorationClean;
+      (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
+    });
     _defineProperty(this, "handleTitleKeydown", function (event) {
       switch (keyName(event)) {
         case 'Enter':
@@ -136,8 +142,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api;
-        deleteExpand((_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions)(state, _this.view.dispatch);
+        var _this$api2;
+        deleteExpand((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(state, _this.view.dispatch);
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -252,13 +258,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input5.selectionStart,
         selectionEnd = _this$input5.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api2;
+        var _this$api3;
         event.preventDefault();
         var _this$view7 = _this.view,
           state = _this$view7.state,
           dispatch = _this$view7.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selection) === null || _this$api2 === void 0 ? void 0 : _this$api2.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.selection) === null || _this$api3 === void 0 ? void 0 : _this$api3.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) {
@@ -307,6 +313,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.dom.addEventListener('click', this.handleClick);
     this.dom.addEventListener('input', this.handleInput);
     this.input.addEventListener('keydown', this.handleTitleKeydown);
+    this.input.addEventListener('blur', this.handleBlur);
     // If the user interacts in our title bar (either toggle or input)
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -355,14 +362,17 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$decorationClean2;
       if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
         return;
       }
       this.dom.removeEventListener('click', this.handleClick);
       this.dom.removeEventListener('input', this.handleInput);
       this.input.removeEventListener('keydown', this.handleTitleKeydown);
+      this.input.removeEventListener('blur', this.handleBlur);
       this.titleContainer.removeEventListener('focus', this.handleFocus);
       this.icon.removeEventListener('keydown', this.handleIconKeyDown);
+      (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       ReactDOM.unmountComponentAtNode(this.icon);
     }
   }]);

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

@@ -20,6 +20,7 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    decorationCleanup?: () => boolean | undefined;
     constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean);
     private initHandlers;
     private focusTitle;
@@ -28,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleClick;
     private handleInput;
     private handleFocus;
+    private handleBlur;
     private handleTitleKeydown;
     private deleteExpand;
     private toggleExpand;

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

@@ -20,12 +20,14 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    decorationCleanup?: () => boolean | undefined;
     constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
     private handleInput;
     private handleFocus;
+    private handleBlur;
     private handleTitleKeydown;
     private deleteEmptyExpand;
     private moveToOutsideOfTitle;

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { EditorAppearance, LongPressSelectionPluginOptions, NextEditorPlugi
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 import type { insertExpand } from './legacyExpand/commands';
 export interface ExpandPluginState {
     expandRef?: HTMLDivElement | null;
@@ -37,7 +38,8 @@ export type ExpandPlugin = NextEditorPlugin<'expand', {
     dependencies: [
         DecorationsPlugin,
         SelectionPlugin,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<SelectionMarkerPlugin>
     ];
     actions: {
         insertExpand: ReturnType<typeof insertExpand>;

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

@@ -20,6 +20,7 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    decorationCleanup?: () => boolean | undefined;
     constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean);
     private initHandlers;
     private focusTitle;
@@ -28,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleClick;
     private handleInput;
     private handleFocus;
+    private handleBlur;
     private handleTitleKeydown;
     private deleteExpand;
     private toggleExpand;

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

@@ -20,12 +20,14 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    decorationCleanup?: () => boolean | undefined;
     constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
     private handleInput;
     private handleFocus;
+    private handleBlur;
     private handleTitleKeydown;
     private deleteEmptyExpand;
     private moveToOutsideOfTitle;

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

@@ -2,6 +2,7 @@ import type { EditorAppearance, LongPressSelectionPluginOptions, NextEditorPlugi
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 import type { insertExpand } from './legacyExpand/commands';
 export interface ExpandPluginState {
     expandRef?: HTMLDivElement | null;
@@ -37,7 +38,8 @@ export type ExpandPlugin = NextEditorPlugin<'expand', {
     dependencies: [
         DecorationsPlugin,
         SelectionPlugin,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<SelectionMarkerPlugin>
     ];
     actions: {
         insertExpand: ReturnType<typeof insertExpand>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "Expand plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,12 +33,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.8.0",
+    "@atlaskit/adf-schema": "^35.9.0",
     "@atlaskit/button": "^17.12.0",
-    "@atlaskit/editor-common": "^78.27.0",
+    "@atlaskit/editor-common": "^78.28.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-selection": "^1.1.0",
+    "@atlaskit/editor-plugin-selection-marker": "^1.2.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.6.0",