@atlaskit/editor-plugin-expand 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-expand
 
+## 1.1.0
+
+### Minor Changes
+
+- [#75042](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75042) [`ce823f018248`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce823f018248) - [ux] ED-21987 Diverge expands in live pages so that they are not multiplayer, and are closed by default.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/cjs/commands.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateExpandTitle = exports.toggleExpandExpanded = exports.setSelectionInsideExpand = exports.setExpandRef = exports.insertExpand = exports.focusTitle = exports.deleteExpandAtPos = exports.deleteExpand = exports.createExpandNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 var _utils4 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -59,58 +61,76 @@ var deleteExpand = exports.deleteExpand = function deleteExpand(editorAnalyticsA
     return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
   };
 };
-var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(title, pos, nodeType) {
+var updateExpandTitle = exports.updateExpandTitle = function updateExpandTitle(_ref) {
+  var title = _ref.title,
+    nodeType = _ref.nodeType,
+    pos = _ref.pos,
+    __livePage = _ref.__livePage;
   return function (state, dispatch) {
     var node = state.doc.nodeAt(pos);
     if (node && node.type === nodeType && dispatch) {
       var tr = state.tr;
-      tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        title: title
-      }), node.marks);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && __livePage) {
+        tr.step(new _steps.SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          title: title
+        })));
+      } else {
+        tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          title: title
+        }), node.marks);
+      }
       dispatch(tr);
     }
     return true;
   };
 };
-var toggleExpandExpanded = exports.toggleExpandExpanded = function toggleExpandExpanded(editorAnalyticsAPI) {
-  return function (pos, nodeType) {
-    return function (state, dispatch) {
-      var node = state.doc.nodeAt(pos);
-      if (node && node.type === nodeType && dispatch) {
-        var tr = state.tr;
-        var isExpandedNext = !node.attrs.__expanded;
+var toggleExpandExpanded = exports.toggleExpandExpanded = function toggleExpandExpanded(_ref2) {
+  var editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+    pos = _ref2.pos,
+    nodeType = _ref2.nodeType,
+    __livePage = _ref2.__livePage;
+  return function (state, dispatch) {
+    var node = state.doc.nodeAt(pos);
+    if (node && node.type === nodeType && dispatch) {
+      var tr = state.tr;
+      var isExpandedNext = !node.attrs.__expanded;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && __livePage) {
+        tr.step(new _steps.SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          __expanded: isExpandedNext
+        })));
+      } else {
         tr.setNodeMarkup(pos, node.type, _objectSpread(_objectSpread({}, node.attrs), {}, {
           __expanded: isExpandedNext
         }), node.marks);
+      }
 
-        // 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 === false && (0, _utils4.findExpand)(state)) {
-          tr.setSelection(new _selection.GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), _selection.Side.RIGHT));
-        }
+      // 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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && __livePage ? isExpandedNext === true : isExpandedNext === false && (0, _utils4.findExpand)(state)) {
+        tr.setSelection(new _selection.GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), _selection.Side.RIGHT));
+      }
 
-        // log when people open/close expands
-        // TODO: ED-8523 make platform/mode global attributes?
-        var payload = {
-          action: _analytics.ACTION.TOGGLE_EXPAND,
-          actionSubject: nodeType === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
-          attributes: {
-            platform: _analytics.PLATFORMS.WEB,
-            mode: _analytics.MODE.EDITOR,
-            expanded: isExpandedNext
-          },
-          eventType: _analytics.EVENT_TYPE.TRACK
-        };
+      // log when people open/close expands
+      // TODO: ED-8523 make platform/mode global attributes?
+      var payload = {
+        action: _analytics.ACTION.TOGGLE_EXPAND,
+        actionSubject: nodeType === state.schema.nodes.expand ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
+        attributes: {
+          platform: _analytics.PLATFORMS.WEB,
+          mode: _analytics.MODE.EDITOR,
+          expanded: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && __livePage ? !isExpandedNext : isExpandedNext
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
 
-        // `isRemote` meta prevents this step from being
-        // sync'd between sessions in collab edit
-        tr.setMeta('isRemote', true);
-        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
-        dispatch(tr);
-      }
-      return true;
-    };
+      // `isRemote` meta prevents this step from being
+      // sync'd between sessions in synchrony collab edit
+      tr.setMeta('isRemote', true);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
   };
 };
 

package/dist/cjs/nodeviews/index.js

@@ -18,15 +18,16 @@ var _ui = require("@atlaskit/editor-common/ui");
 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 _ExpandIconButton = require("../ui/ExpandIconButton");
 function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 }
-var toDOM = function toDOM(node, intl) {
+var toDOM = function toDOM(node, __livePage, intl) {
   return ['div', {
     // prettier-ignore
-    'class': buildExpandClassName(node.type.name, node.attrs.__expanded),
+    'class': buildExpandClassName(node.type.name, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
     'data-node-type': node.type.name,
     'data-title': node.attrs.title
   }, ['div', {
@@ -60,6 +61,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
     var _this = this;
     var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+    var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
     (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
     (0, _defineProperty2.default)(this, "isMobile", false);
@@ -116,7 +118,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         if (_this.view.dom instanceof HTMLElement) {
           _this.view.dom.blur();
         }
-        (0, _commands.toggleExpandExpanded)((_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions)(pos, _this.node.type)(state, dispatch);
+        (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,
+          pos: pos,
+          nodeType: _this.node.type,
+          __livePage: _this.__livePage
+        })(state, dispatch);
         return;
       }
       if (target === _this.input) {
@@ -136,7 +143,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         var _this$view3 = _this.view,
           state = _this$view3.state,
           dispatch = _this$view3.dispatch;
-        (0, _commands.updateExpandTitle)(target.value, pos, _this.node.type)(state, dispatch);
+        (0, _commands.updateExpandTitle)({
+          title: target.value,
+          pos: pos,
+          nodeType: _this.node.type,
+          __livePage: _this.__livePage
+        })(state, dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "handleFocus", function (event) {
@@ -196,7 +208,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
-        (0, _commands.toggleExpandExpanded)((_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, _this.node.type)(state, 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,
+          pos: pos,
+          nodeType: _this.node.type,
+          __livePage: _this.__livePage
+        })(state, dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -228,6 +245,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
     });
     (0, _defineProperty2.default)(this, "isCollapsed", function () {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && _this.__livePage) {
+        return _this.node.attrs.__expanded;
+      }
       return !_this.node.attrs.__expanded;
     });
     (0, _defineProperty2.default)(this, "setRightGapCursor", function (event) {
@@ -339,8 +359,9 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
     });
     this.selectNearNode = selectNearNode;
+    this.__livePage = __livePage;
     this.intl = getIntl();
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node, this.intl)),
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.allowInteractiveExpand = allowInteractiveExpand;
@@ -393,7 +414,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
         intl: intl,
         allowInteractiveExpand: this.allowInteractiveExpand,
-        expanded: __expanded
+        expanded: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && this.__livePage ? !__expanded : __expanded
       }), this.icon);
     }
   }, {
@@ -429,7 +450,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           }
           if (this.content) {
             // Disallow interaction/selection inside when collapsed.
-            this.content.setAttribute('contenteditable', node.attrs.__expanded);
+            this.content.setAttribute('contenteditable', (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && this.__livePage ? !node.attrs.__expanded : node.attrs.__expanded);
           }
         }
 
@@ -485,9 +506,10 @@ function _default(_ref2) {
     isMobile = _ref2.isMobile,
     api = _ref2.api,
     _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
-    allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv;
+    allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
+    __livePage = _ref2.__livePage;
   return function (node, view, getPos) {
     var _api$selection;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, allowInteractiveExpand);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, allowInteractiveExpand, __livePage);
   };
 }

package/dist/cjs/plugin.js

@@ -50,12 +50,14 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
           var _options$allowInterac;
           var dispatch = _ref2.dispatch,
             getIntl = _ref2.getIntl;
-          return (0, _main.createPlugin)(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true);
+          return (0, _main.createPlugin)(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
         }
       }, {
         name: 'expandKeymap',
         plugin: function plugin() {
-          return (0, _keymap.expandKeymap)(api);
+          return (0, _keymap.expandKeymap)(api, {
+            __livePage: options.__livePage
+          });
         }
       }];
     },

package/dist/cjs/pm-plugins/keymap.js

@@ -10,6 +10,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _utils2 = require("../utils");
 var isExpandNode = function isExpandNode(node) {
@@ -18,7 +19,7 @@ var isExpandNode = function isExpandNode(node) {
 var isExpandSelected = function isExpandSelected(selection) {
   return selection instanceof _state.NodeSelection && isExpandNode(selection.node);
 };
-function expandKeymap(api) {
+function expandKeymap(api, options) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, function (state, dispatch, editorView) {
     var _api$selection;
@@ -75,7 +76,7 @@ function expandKeymap(api) {
     var selection = state.selection,
       schema = state.schema;
     var nodeBefore = selection.$from.nodeBefore;
-    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && !nodeBefore.attrs.__expanded) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && options.__livePage ? nodeBefore.attrs.__expanded : !nodeBefore.attrs.__expanded)) {
       var _$from = selection.$from;
       return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
     }
@@ -99,7 +100,7 @@ function expandKeymap(api) {
       var expandBefore = (0, _utils2.findExpand)(state, sel);
       if (sel && expandBefore) {
         // moving cursor from outside of an expand to the title when it is collapsed
-        if (!expandBefore.node.attrs.__expanded) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && options.__livePage ? expandBefore.node.attrs.__expanded : !expandBefore.node.attrs.__expanded) {
           return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
         }
         // moving cursor from outside of an expand to the content when it is expanded
@@ -120,7 +121,7 @@ function expandKeymap(api) {
       nestedExpand = _state$schema$nodes.nestedExpand;
     var selection = state.selection;
     var nodeAfter = selection.$from.nodeAfter;
-    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && !nodeAfter.attrs.__expanded) {
+    if (selection instanceof _selection.GapCursorSelection && selection.side === _selection.Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && options.__livePage ? nodeAfter.attrs.__expanded : !nodeAfter.attrs.__expanded)) {
       var $from = selection.$from;
       return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
     }
@@ -150,7 +151,7 @@ function expandKeymap(api) {
       // @see ED-7977
       var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
       var expandBefore = (0, _utils2.findExpand)(state, sel);
-      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && !expandBefore.node.attrs.__expanded) {
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-pages-expand-divergence') && options.__livePage ? expandBefore.node.attrs.__expanded : !expandBefore.node.attrs.__expanded)) {
         return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
       }
       return false;

package/dist/cjs/pm-plugins/main.js

@@ -23,6 +23,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
   var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var api = arguments.length > 4 ? arguments[4] : undefined;
   var allowInteractiveExpand = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var __livePage = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var state = (0, _pluginFactory.createPluginState)(dispatch, {});
   var isMobile = appearance === 'mobile';
   return new _safePlugin.SafePlugin({
@@ -34,13 +35,15 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
-          allowInteractiveExpand: allowInteractiveExpand
+          allowInteractiveExpand: allowInteractiveExpand,
+          __livePage: __livePage
         }),
         nestedExpand: (0, _nodeviews.default)({
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
-          allowInteractiveExpand: allowInteractiveExpand
+          allowInteractiveExpand: allowInteractiveExpand,
+          __livePage: __livePage
         })
       },
       handleKeyDown: function handleKeyDown(_view, event) {

package/dist/es2019/commands.js

@@ -1,9 +1,11 @@
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createCommand } from './pm-plugins/plugin-factory';
 import { findExpand } from './utils';
 export const setExpandRef = ref => createCommand({
@@ -41,36 +43,60 @@ export const deleteExpand = editorAnalyticsAPI => (state, dispatch) => {
   }
   return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
 };
-export const updateExpandTitle = (title, pos, nodeType) => (state, dispatch) => {
+export const updateExpandTitle = ({
+  title,
+  nodeType,
+  pos,
+  __livePage
+}) => (state, dispatch) => {
   const node = state.doc.nodeAt(pos);
   if (node && node.type === nodeType && dispatch) {
     const {
       tr
     } = state;
-    tr.setNodeMarkup(pos, node.type, {
-      ...node.attrs,
-      title
-    }, node.marks);
+    if (getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage) {
+      tr.step(new SetAttrsStep(pos, {
+        ...node.attrs,
+        title
+      }));
+    } else {
+      tr.setNodeMarkup(pos, node.type, {
+        ...node.attrs,
+        title
+      }, node.marks);
+    }
     dispatch(tr);
   }
   return true;
 };
-export const toggleExpandExpanded = editorAnalyticsAPI => (pos, nodeType) => (state, dispatch) => {
+export const toggleExpandExpanded = ({
+  editorAnalyticsAPI,
+  pos,
+  nodeType,
+  __livePage
+}) => (state, dispatch) => {
   const node = state.doc.nodeAt(pos);
   if (node && node.type === nodeType && dispatch) {
     const {
       tr
     } = state;
     const isExpandedNext = !node.attrs.__expanded;
-    tr.setNodeMarkup(pos, node.type, {
-      ...node.attrs,
-      __expanded: isExpandedNext
-    }, node.marks);
+    if (getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage) {
+      tr.step(new SetAttrsStep(pos, {
+        ...node.attrs,
+        __expanded: isExpandedNext
+      }));
+    } else {
+      tr.setNodeMarkup(pos, node.type, {
+        ...node.attrs,
+        __expanded: isExpandedNext
+      }, node.marks);
+    }
 
     // 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 === false && findExpand(state)) {
+    if (getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage ? isExpandedNext === true : isExpandedNext === false && findExpand(state)) {
       tr.setSelection(new GapCursorSelection(tr.doc.resolve(pos + node.nodeSize), Side.RIGHT));
     }
 
@@ -82,13 +108,13 @@ export const toggleExpandExpanded = editorAnalyticsAPI => (pos, nodeType) => (st
       attributes: {
         platform: PLATFORMS.WEB,
         mode: MODE.EDITOR,
-        expanded: isExpandedNext
+        expanded: getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage ? !isExpandedNext : isExpandedNext
       },
       eventType: EVENT_TYPE.TRACK
     };
 
     // `isRemote` meta prevents this step from being
-    // sync'd between sessions in collab edit
+    // sync'd between sessions in synchrony collab edit
     tr.setMeta('isRemote', true);
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
     dispatch(tr);

package/dist/es2019/nodeviews/index.js

@@ -8,14 +8,15 @@ import { expandMessages } from '@atlaskit/editor-common/ui';
 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 { deleteExpandAtPos, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 }
-const toDOM = (node, intl) => ['div', {
+const toDOM = (node, __livePage, intl) => ['div', {
   // prettier-ignore
-  'class': buildExpandClassName(node.type.name, node.attrs.__expanded),
+  'class': buildExpandClassName(node.type.name, getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
   'data-node-type': node.type.name,
   'data-title': node.attrs.title
 }, ['div', {
@@ -45,7 +46,7 @@ const toDOM = (node, intl) => ['div', {
   'class': expandClassNames.content
 }, 0]];
 export class ExpandNodeView {
-  constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true) {
+  constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
@@ -103,7 +104,12 @@ export class ExpandNodeView {
         if (this.view.dom instanceof HTMLElement) {
           this.view.dom.blur();
         }
-        toggleExpandExpanded((_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)(pos, this.node.type)(state, dispatch);
+        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,
+          pos,
+          nodeType: this.node.type,
+          __livePage: this.__livePage
+        })(state, dispatch);
         return;
       }
       if (target === this.input) {
@@ -124,7 +130,12 @@ export class ExpandNodeView {
           state,
           dispatch
         } = this.view;
-        updateExpandTitle(target.value, pos, this.node.type)(state, dispatch);
+        updateExpandTitle({
+          title: target.value,
+          pos,
+          nodeType: this.node.type,
+          __livePage: this.__livePage
+        })(state, dispatch);
       }
     });
     _defineProperty(this, "handleFocus", event => {
@@ -188,7 +199,12 @@ export class ExpandNodeView {
           state,
           dispatch
         } = this.view;
-        toggleExpandExpanded((_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, this.node.type)(state, dispatch);
+        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,
+          pos,
+          nodeType: this.node.type,
+          __livePage: this.__livePage
+        })(state, dispatch);
       }
     });
     _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -221,6 +237,9 @@ export class ExpandNodeView {
       }
     });
     _defineProperty(this, "isCollapsed", () => {
+      if (getBooleanFF('platform.editor.live-pages-expand-divergence') && this.__livePage) {
+        return this.node.attrs.__expanded;
+      }
       return !this.node.attrs.__expanded;
     });
     _defineProperty(this, "setRightGapCursor", event => {
@@ -340,11 +359,12 @@ export class ExpandNodeView {
       }
     });
     this.selectNearNode = selectNearNode;
+    this.__livePage = __livePage;
     this.intl = getIntl();
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.intl));
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
@@ -386,13 +406,13 @@ export class ExpandNodeView {
     if (!this.icon) {
       return;
     }
-    const {
+    let {
       __expanded
     } = node && node.attrs || this.node.attrs;
     ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
       intl: intl,
       allowInteractiveExpand: this.allowInteractiveExpand,
-      expanded: __expanded
+      expanded: getBooleanFF('platform.editor.live-pages-expand-divergence') && this.__livePage ? !__expanded : __expanded
     }), this.icon);
   }
   stopEvent(event) {
@@ -421,7 +441,7 @@ export class ExpandNodeView {
         }
         if (this.content) {
           // Disallow interaction/selection inside when collapsed.
-          this.content.setAttribute('contenteditable', node.attrs.__expanded);
+          this.content.setAttribute('contenteditable', getBooleanFF('platform.editor.live-pages-expand-divergence') && this.__livePage ? !node.attrs.__expanded : node.attrs.__expanded);
         }
       }
 
@@ -472,10 +492,11 @@ export default function ({
   getIntl,
   isMobile,
   api,
-  allowInteractiveExpand = true
+  allowInteractiveExpand = true,
+  __livePage
 }) {
   return (node, view, getPos) => {
     var _api$selection, _api$selection$action;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, allowInteractiveExpand);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, allowInteractiveExpand, __livePage);
   };
 }

package/dist/es2019/plugin.js

@@ -37,11 +37,13 @@ export const expandPlugin = ({
           getIntl
         }) => {
           var _options$allowInterac;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true);
+          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
         }
       }, {
         name: 'expandKeymap',
-        plugin: () => expandKeymap(api)
+        plugin: () => expandKeymap(api, {
+          __livePage: options.__livePage
+        })
       }];
     },
     pluginsOptions: {