@atlaskit/editor-plugin-expand 1.6.3 → 1.6.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.6.4
+
+### Patch Changes
+
+- [#94988](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94988) [`8e5daa7c846d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e5daa7c846d) - [ux] [ED-22983] disable editing in singlePlayer expand nodes when editorDisabled state is true. these changes are only applied when the platform.editor.live-view.disable-editing-in-view-mode_fi1rx FF is on, and the singlePlayer expand is used when live view is enabled and the platform.editor.single-player-expand FF is enabled.
+
 ## 1.6.3
 
 ### Patch Changes

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

@@ -17,14 +17,17 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _NodeView = require("../ui/NodeView");
 var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
+  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api) {
     var _this = this,
-      _expandedState$get;
+      _api$editorDisabled,
+      _this$api6;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+    var cleanUpEditorDisabledOnChange = arguments.length > 9 ? arguments[9] : undefined;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
     (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
     (0, _defineProperty2.default)(this, "isMobile", false);
@@ -322,14 +325,23 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         }
       }
     });
+    (0, _defineProperty2.default)(this, "getContentEditable", function (node) {
+      var contentEditable = !(0, _expand.isExpandCollapsed)(node);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && _this.api && _this.api.editorDisabled) {
+        var _this$api$editorDisab;
+        return !((_this$api$editorDisab = _this.api.editorDisabled.sharedState.currentState()) !== null && _this$api$editorDisab !== void 0 && _this$api$editorDisab.editorDisabled) && contentEditable;
+      }
+      return contentEditable;
+    });
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
+    this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
     this.intl = getIntl();
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
-    this.node = node;
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(node, this.__livePage, this.intl)),
+    this.node = _node;
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
@@ -343,8 +355,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
-    this.updateExpandBodyContentEditable();
-    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
+    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, !(0, _expand.isExpandCollapsed)(this.node), this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -360,6 +371,21 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
+    if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+        var editorDisabled = sharedState.nextSharedState.editorDisabled;
+        if (_this.input) {
+          if (editorDisabled) {
+            _this.input.setAttribute('readonly', 'true');
+          } else {
+            _this.input.removeAttribute('readonly');
+          }
+        }
+        if (_this.content) {
+          _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+        }
+      });
+    }
   }
   (0, _createClass2.default)(ExpandNodeView, [{
     key: "stopEvent",
@@ -411,6 +437,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           }
           _expand.expandedState.set(node, previousExpandedState);
         }
+        if (this.content) {
+          // Disallow interaction/selection inside when collapsed.
+          this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
+        }
         this.node = node;
         return true;
       }
@@ -421,10 +451,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     value: function updateExpandToggleIcon(node) {
       var expanded = _expand.expandedState.get(node) ? _expand.expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
-        var _expandedState$get2;
+        var _expandedState$get;
         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(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -451,6 +481,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       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);
+      if (this.cleanUpEditorDisabledOnChange) {
+        this.cleanUpEditorDisabledOnChange();
+      }
       _reactDom.default.unmountComponentAtNode(this.icon);
     }
   }]);

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

@@ -10,11 +10,12 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ExpandButton = require("../ui/ExpandButton");
 var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 };
-var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
+var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
   var _expandedState$get;
   return ['div', {
     // prettier-ignore
@@ -41,11 +42,12 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
     'class': _styles.expandClassNames.titleInput,
     value: node.attrs.title,
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
-    type: 'text'
-  }]]],
-  // prettier-ignore
-  ['div', {
-    'class': _styles.expandClassNames.content
+    type: 'text',
+    readonly: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && titleReadOnly ? 'true' : undefined
+  }]]], ['div', {
+    // prettier-ignore
+    class: _styles.expandClassNames.content,
+    contenteditable: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && contentEditable ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };
 var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {

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

@@ -1,17 +1,18 @@
 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 { expandedState, isExpandCollapsed } 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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) {
-    var _expandedState$get;
+  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
+    var _api$editorDisabled, _api$editorDisabled$s, _this$api6;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
@@ -323,17 +324,26 @@ export class ExpandNodeView {
         }
       }
     });
+    _defineProperty(this, "getContentEditable", node => {
+      const contentEditable = !isExpandCollapsed(node);
+      if (getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && this.api && this.api.editorDisabled) {
+        var _this$api$editorDisab;
+        return !((_this$api$editorDisab = this.api.editorDisabled.sharedState.currentState()) !== null && _this$api$editorDisab !== void 0 && _this$api$editorDisab.editorDisabled) && contentEditable;
+      }
+      return contentEditable;
+    });
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
+    this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
     this.intl = getIntl();
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
-    this.node = node;
+    this.node = _node;
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled));
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
@@ -345,8 +355,7 @@ export class ExpandNodeView {
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
-    this.updateExpandBodyContentEditable();
-    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
+    renderIcon(this.icon, this.allowInteractiveExpand, !isExpandCollapsed(this.node), this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -362,6 +371,21 @@ export class ExpandNodeView {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
+    if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled && getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
+        const editorDisabled = sharedState.nextSharedState.editorDisabled;
+        if (this.input) {
+          if (editorDisabled) {
+            this.input.setAttribute('readonly', 'true');
+          } else {
+            this.input.removeAttribute('readonly');
+          }
+        }
+        if (this.content) {
+          this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
+        }
+      });
+    }
   }
   stopEvent(event) {
     const target = event.target;
@@ -406,6 +430,10 @@ export class ExpandNodeView {
         }
         expandedState.set(node, previousExpandedState);
       }
+      if (this.content) {
+        // Disallow interaction/selection inside when collapsed.
+        this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
+      }
       this.node = node;
       return true;
     }
@@ -414,10 +442,10 @@ export class ExpandNodeView {
   updateExpandToggleIcon(node) {
     const expanded = expandedState.get(node) ? expandedState.get(node) : false;
     if (this.dom && expanded !== undefined) {
-      var _expandedState$get2;
+      var _expandedState$get;
       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(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+      renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
     }
     this.updateExpandBodyContentEditable();
   }
@@ -440,6 +468,9 @@ export class ExpandNodeView {
     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);
+    if (this.cleanUpEditorDisabledOnChange) {
+      this.cleanUpEditorDisabledOnChange();
+    }
     ReactDOM.unmountComponentAtNode(this.icon);
   }
 }

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

@@ -3,11 +3,12 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ExpandButton } from '../ui/ExpandButton';
 export const buildExpandClassName = (type, expanded) => {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
-export const toDOM = (node, __livePage, intl) => {
+export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => {
   var _expandedState$get;
   return ['div', {
     // prettier-ignore
@@ -34,11 +35,12 @@ export const toDOM = (node, __livePage, intl) => {
     'class': expandClassNames.titleInput,
     value: node.attrs.title,
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-    type: 'text'
-  }]]],
-  // prettier-ignore
-  ['div', {
-    'class': expandClassNames.content
+    type: 'text',
+    readonly: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && titleReadOnly ? 'true' : undefined
+  }]]], ['div', {
+    // prettier-ignore
+    class: expandClassNames.content,
+    contenteditable: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && contentEditable ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };
 export const renderIcon = (icon, allowInteractiveExpand, expanded, intl) => {

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

@@ -3,20 +3,23 @@ import _createClass from "@babel/runtime/helpers/createClass";
 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 { expandedState, isExpandCollapsed } 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
 export var ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
+  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api) {
     var _this = this,
-      _expandedState$get;
+      _api$editorDisabled,
+      _this$api6;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
     var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+    var cleanUpEditorDisabledOnChange = arguments.length > 9 ? arguments[9] : undefined;
     _classCallCheck(this, ExpandNodeView);
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
@@ -314,14 +317,23 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         }
       }
     });
+    _defineProperty(this, "getContentEditable", function (node) {
+      var contentEditable = !isExpandCollapsed(node);
+      if (getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && _this.api && _this.api.editorDisabled) {
+        var _this$api$editorDisab;
+        return !((_this$api$editorDisab = _this.api.editorDisabled.sharedState.currentState()) !== null && _this$api$editorDisab !== void 0 && _this$api$editorDisab.editorDisabled) && contentEditable;
+      }
+      return contentEditable;
+    });
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
+    this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
     this.intl = getIntl();
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
-    this.node = node;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl)),
+    this.node = _node;
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
@@ -335,8 +347,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
-    this.updateExpandBodyContentEditable();
-    renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
+    renderIcon(this.icon, this.allowInteractiveExpand, !isExpandCollapsed(this.node), this.intl);
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -352,6 +363,21 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
+    if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled && getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+        var editorDisabled = sharedState.nextSharedState.editorDisabled;
+        if (_this.input) {
+          if (editorDisabled) {
+            _this.input.setAttribute('readonly', 'true');
+          } else {
+            _this.input.removeAttribute('readonly');
+          }
+        }
+        if (_this.content) {
+          _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+        }
+      });
+    }
   }
   _createClass(ExpandNodeView, [{
     key: "stopEvent",
@@ -403,6 +429,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           }
           expandedState.set(node, previousExpandedState);
         }
+        if (this.content) {
+          // Disallow interaction/selection inside when collapsed.
+          this.content.setAttribute('contenteditable', this.getContentEditable(node) ? 'true' : 'false');
+        }
         this.node = node;
         return true;
       }
@@ -413,10 +443,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     value: function updateExpandToggleIcon(node) {
       var expanded = expandedState.get(node) ? expandedState.get(node) : false;
       if (this.dom && expanded !== undefined) {
-        var _expandedState$get2;
+        var _expandedState$get;
         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(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
+        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -443,6 +473,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       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);
+      if (this.cleanUpEditorDisabledOnChange) {
+        this.cleanUpEditorDisabledOnChange();
+      }
       ReactDOM.unmountComponentAtNode(this.icon);
     }
   }]);

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

@@ -3,11 +3,12 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ExpandButton } from '../ui/ExpandButton';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
-export var toDOM = function toDOM(node, __livePage, intl) {
+export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
   var _expandedState$get;
   return ['div', {
     // prettier-ignore
@@ -34,11 +35,12 @@ export var toDOM = function toDOM(node, __livePage, intl) {
     'class': expandClassNames.titleInput,
     value: node.attrs.title,
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-    type: 'text'
-  }]]],
-  // prettier-ignore
-  ['div', {
-    'class': expandClassNames.content
+    type: 'text',
+    readonly: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && titleReadOnly ? 'true' : undefined
+  }]]], ['div', {
+    // prettier-ignore
+    class: expandClassNames.content,
+    contenteditable: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') && contentEditable ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
 };
 export var renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {

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

@@ -7,6 +7,7 @@ import type { ExpandPlugin } from '../../types';
 export declare class ExpandNodeView implements NodeView {
     private selectNearNode;
     private __livePage;
+    private cleanUpEditorDisabledOnChange?;
     node: PmNode;
     view: EditorView;
     dom: HTMLElement;
@@ -21,7 +22,7 @@ export declare class ExpandNodeView implements NodeView {
     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);
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
@@ -38,6 +39,7 @@ export declare class ExpandNodeView implements NodeView {
     private setLeftGapCursor;
     private handleArrowRightFromTitle;
     private handleArrowLeftFromTitle;
+    private getContentEditable;
     stopEvent(event: Event): boolean;
     ignoreMutation(mutationRecord: MutationRecord | {
         type: 'selection';

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

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
-export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
+export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;
 export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

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

@@ -7,6 +7,7 @@ import type { ExpandPlugin } from '../../types';
 export declare class ExpandNodeView implements NodeView {
     private selectNearNode;
     private __livePage;
+    private cleanUpEditorDisabledOnChange?;
     node: PmNode;
     view: EditorView;
     dom: HTMLElement;
@@ -21,7 +22,7 @@ export declare class ExpandNodeView implements NodeView {
     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);
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
@@ -38,6 +39,7 @@ export declare class ExpandNodeView implements NodeView {
     private setLeftGapCursor;
     private handleArrowRightFromTitle;
     private handleArrowLeftFromTitle;
+    private getContentEditable;
     stopEvent(event: Event): boolean;
     ignoreMutation(mutationRecord: MutationRecord | {
         type: 'selection';

package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts

@@ -1,5 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
-export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
+export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;
 export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-expand",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Expand plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",