@atlaskit/editor-plugin-expand 1.3.5 → 1.4.1

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/commands.js

@@ -1,5 +1,7 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
+import { expandedState } from '@atlaskit/editor-common/expand';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { findExpand } from '@atlaskit/editor-common/transforms';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -13,7 +15,9 @@ export const createExpandNode = state => {
     nestedExpand
   } = state.schema.nodes;
   const expandType = findTable(state.selection) ? nestedExpand : expand;
-  return expandType.createAndFill({});
+  const expandNode = expandType.createAndFill({});
+  expandedState.set(expandNode, true);
+  return expandNode;
 };
 export const insertExpand = editorAnalyticsAPI => (state, dispatch) => {
   const expandNode = createExpandNode(state);
@@ -83,6 +87,44 @@ export const setSelectionInsideExpand = expandPos => (state, dispatch, editorVie
   }
   return false;
 };
+export const toggleExpandExpanded = ({
+  editorAnalyticsAPI,
+  pos,
+  node
+}) => (state, dispatch) => {
+  if (node && dispatch) {
+    var _expandedState$get;
+    const {
+      tr
+    } = state;
+    const expanded = (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
+    const isExpandedNext = !expanded;
+    expandedState.set(node, isExpandedNext);
+
+    // If we're going to collapse the expand and our cursor is currently inside
+    // Move to a right gap cursor, if the toolbar is interacted (or an API),
+    // it will insert below rather than inside (which will be invisible).
+    if (isExpandedNext === true) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), Side.RIGHT));
+    }
+
+    // log when people open/close expands
+    // TODO: ED-8523 make platform/mode global attributes?
+    const payload = {
+      action: ACTION.TOGGLE_EXPAND,
+      actionSubject: node.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        mode: MODE.EDITOR,
+        expanded: isExpandedNext
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
 export const updateExpandTitle = ({
   title,
   nodeType,

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

@@ -1,19 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 import { keyName } from 'w3c-keyname';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
-import { deleteExpand, setSelectionInsideExpand, updateExpandTitle } from '../commands';
-import { renderIcon, toDOM } from '../ui/NodeView';
+import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
+import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export class ExpandNodeView {
   constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
       if (this.input) {
+        var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
         const {
           state,
           dispatch
@@ -30,6 +32,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();
       }
     });
@@ -52,6 +55,7 @@ export class ExpandNodeView {
       }
       const target = event.target;
       if (closestElement(target, `.${expandClassNames.icon}`)) {
+        var _this$api2, _this$api2$analytics;
         if (!this.allowInteractiveExpand) {
           return;
         }
@@ -62,10 +66,12 @@ export class ExpandNodeView {
         if (this.view.dom instanceof HTMLElement) {
           this.view.dom.blur();
         }
-
-        // TODO https://product-fabric.atlassian.net/browse/ED-22841
-        // call toggleExpandExpanded
-
+        toggleExpandExpanded({
+          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,
+          node: this.node
+        })(this.view.state, this.view.dispatch);
+        this.updateExpandClassName();
         return;
       }
       if (target === this.input) {
@@ -96,10 +102,14 @@ 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':
-          // TO-DO
+          this.toggleExpand();
           break;
         case 'Tab':
         case 'ArrowDown':
@@ -135,8 +145,27 @@ 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$api3, _this$api3$analytics;
+        deleteExpand((_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)(state, this.view.dispatch);
+      }
+    });
+    _defineProperty(this, "toggleExpand", () => {
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      if (this.allowInteractiveExpand) {
+        var _this$api4, _this$api4$analytics;
+        const {
+          state,
+          dispatch
+        } = this.view;
+        toggleExpandExpanded({
+          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,
+          node: this.node
+        })(state, dispatch);
+        this.updateExpandClassName();
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -168,9 +197,8 @@ export class ExpandNodeView {
         dispatch(state.tr.setSelection(sel));
       }
     });
-    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
     _defineProperty(this, "isCollapsed", () => {
-      return false;
+      return !expandedState.get(this.node);
     });
     _defineProperty(this, "setRightGapCursor", event => {
       if (!this.input) {
@@ -259,14 +287,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api2, _this$api2$selection;
+        var _this$api5, _this$api5$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$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) {
@@ -291,14 +319,14 @@ export class ExpandNodeView {
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
     this.intl = getIntl();
-    const {
-      dom,
-      contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
     this.node = node;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
@@ -307,6 +335,9 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    if (!expandedState.has(this.node)) {
+      expandedState.set(this.node, false);
+    }
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -316,6 +347,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);
@@ -338,9 +370,6 @@ export class ExpandNodeView {
   }
   update(node, _decorations) {
     if (this.node.type === node.type) {
-      // TODO: https://product-fabric.atlassian.net/browse/ED-22841
-      // Handle toggling of the expand on update here
-
       // During a collab session the title doesn't sync with other users
       // since we're intentionally being less aggressive about re-rendering.
       // We also apply a rAF to avoid abrupt continuous replacement of the title.
@@ -349,21 +378,39 @@ export class ExpandNodeView {
           this.input.value = this.node.attrs.title;
         }
       });
+      if (this.node !== node) {
+        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;
   }
+  updateExpandClassName() {
+    const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
+    if (this.dom && expanded !== undefined) {
+      this.dom.className = buildExpandClassName(this.node.type.name, expanded);
+    }
+  }
   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);
+    expandedState.delete(this.node);
   }
 }
 export default function ({

package/dist/es2019/singlePlayerExpand/pm-plugins/keymap.js

@@ -22,7 +22,8 @@ export function expandKeymap(api, options) {
       nodeBefore
     } = selection.$from;
     if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
-    // TO-DO: add back in expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       const {
         $from
@@ -52,7 +53,8 @@ export function expandKeymap(api, options) {
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
 
-        // TO-DO: Bring back expanded logic
+        // https://product-fabric.atlassian.net/browse/ED-22991
+        // TODO: add back in expanded logic
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }
     }
@@ -73,7 +75,8 @@ export function expandKeymap(api, options) {
       nodeAfter
     } = selection.$from;
     if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
-    // TO-DO: Bring back expanded logic
+    // https://product-fabric.atlassian.net/browse/ED-22991
+    // TODO: add back in expanded logic
     ) {
       const {
         $from
@@ -114,7 +117,8 @@ export function expandKeymap(api, options) {
       const sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
       const expandBefore = findExpand(state, sel);
       if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
-      // TO-DO: Bring back expanded logic
+      // https://product-fabric.atlassian.net/browse/ED-22991
+      // TODO: add back in expanded logic
       ) {
         return focusTitle(expandBefore.start)(state, dispatch, editorView);
       }

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

@@ -1,52 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { ExpandButton } from '../ui/ExpandButton';
-
-// TODO: https://product-fabric.atlassian.net/browse/ED-22841
-export const buildExpandClassName = type => {
-  return `${expandClassNames.prefix} ${expandClassNames.type(type)}
-  ${expandClassNames.expanded}`;
+export const buildExpandClassName = (type, expanded) => {
+  return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
-export const toDOM = (node, __livePage, intl) => ['div', {
+export const toDOM = (node, __livePage, intl) => {
+  var _expandedState$get;
+  return ['div', {
+    // prettier-ignore
+    'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
+    'data-node-type': node.type.name,
+    'data-title': node.attrs.title
+  }, ['div', {
+    // prettier-ignore
+    'class': expandClassNames.titleContainer,
+    contenteditable: 'false',
+    // Element gains access to focus events.
+    // This is needed to prevent PM gaining access
+    // on interacting with our controls.
+    tabindex: '-1'
+  },
   // prettier-ignore
-  'class': buildExpandClassName(node.type.name),
-  'data-node-type': node.type.name,
-  'data-title': node.attrs.title
-}, ['div', {
+  ['div', {
+    'class': expandClassNames.icon
+  }], ['div', {
+    // prettier-ignore
+    'class': expandClassNames.inputContainer
+  }, ['input', {
+    // prettier-ignore
+    'class': expandClassNames.titleInput,
+    value: node.attrs.title,
+    placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
+    type: 'text'
+  }]]],
   // prettier-ignore
-  'class': expandClassNames.titleContainer,
-  contenteditable: 'false',
-  // Element gains access to focus events.
-  // This is needed to prevent PM gaining access
-  // on interacting with our controls.
-  tabindex: '-1'
-},
-// prettier-ignore
-['div', {
-  'class': expandClassNames.icon
-}], ['div', {
-  // prettier-ignore
-  'class': expandClassNames.inputContainer
-}, ['input', {
-  // prettier-ignore
-  'class': expandClassNames.titleInput,
-  value: node.attrs.title,
-  placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-  type: 'text'
-}]]],
-// prettier-ignore
-['div', {
-  'class': expandClassNames.content
-}, 0]];
+  ['div', {
+    'class': expandClassNames.content
+  }, 0]];
+};
 export const renderIcon = (icon, allowInteractiveExpand, intl, node) => {
   if (!icon) {
     return;
   }
+  let expanded = node ? expandedState.get(node) : true;
+  if (expanded === undefined) {
+    expanded = false;
+  }
   ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
     intl: intl,
     allowInteractiveExpand: allowInteractiveExpand,
-    expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
+    expanded: expanded
   }), 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;