@atlaskit/editor-plugin-expand 1.3.0 → 1.3.2

package/dist/cjs/singlePlayerExpand/plugin.js

@@ -1,15 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.expandPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-// TODO: https://product-fabric.atlassian.net/browse/ED-22840
-// In ED-22840 make sure we update the ExpandPlugin type to use singlePlayerExpands own types
-
-var expandPlugin = exports.expandPlugin = function expandPlugin() {
+var _commands = require("./commands");
+var _keymap = require("./pm-plugins/keymap");
+var _main = require("./pm-plugins/main");
+var _toolbar = require("./toolbar");
+var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
+  var _api$analytics;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
   return {
     name: 'expand',
     nodes: function nodes() {
@@ -23,13 +34,65 @@ var expandPlugin = exports.expandPlugin = function expandPlugin() {
       }];
     },
     actions: {
-      insertExpand: function insertExpand() {
-        return false;
-      }
+      insertExpand: (0, _commands.insertExpand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
     },
     pmPlugins: function pmPlugins() {
-      return [];
+      return [{
+        name: 'expand',
+        plugin: function plugin(_ref2) {
+          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, options.__livePage);
+        }
+      }, {
+        name: 'expandKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.expandKeymap)(api, {
+            __livePage: options.__livePage
+          });
+        }
+      }];
     },
-    pluginsOptions: {}
+    pluginsOptions: {
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(api),
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        if (options && options.allowInsertion !== true) {
+          return [];
+        }
+        return [{
+          id: 'expand',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.expand),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.expandDescription),
+          keywords: ['accordion', 'collapse'],
+          priority: 600,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconExpand, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics2;
+            var node = (0, _commands.createExpandNode)(state);
+            if (!node) {
+              return false;
+            }
+            var tr = state.selection.empty ? insert(node) : (0, _utils.createWrapSelectionTransaction)({
+              state: state,
+              type: node.type
+            });
+            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: node.type === state.schema.nodes.nestedExpand ? _analytics.ACTION_SUBJECT_ID.NESTED_EXPAND : _analytics.ACTION_SUBJECT_ID.EXPAND,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
   };
 };

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandKeymap = expandKeymap;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _selection = require("@atlaskit/editor-common/selection");
+var _transforms = require("@atlaskit/editor-common/transforms");
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("../commands");
+var isExpandNode = function isExpandNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
+};
+function expandKeymap(api, options) {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    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)
+    // TO-DO: add back in expanded logic
+    ) {
+      var _$from = selection.$from;
+      return (0, _commands.focusTitle)(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
+    }
+    var $from = state.selection.$from;
+    if (editorView.endOfTextblock('up')) {
+      var expand = (0, _transforms.findExpand)(state);
+
+      // Moving UP in a table should move the cursor to the row above
+      // however when an expand is in a table cell to the left of the
+      // current table cell, arrow UP moves the cursor to the left
+      // see ED-15425
+      if ((0, _utils.isPositionNearTableRow)($from, schema, 'before') && !expand) {
+        return false;
+      }
+      var prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0);
+      // move cursor from expand's content to its title
+      if (expand && expand.start === prevCursorPos) {
+        return (0, _commands.focusTitle)(expand.start)(state, dispatch, editorView);
+      }
+      var sel = _state.Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
+      var expandBefore = (0, _transforms.findExpand)(state, sel);
+      if (sel && expandBefore) {
+        // moving cursor from outside of an expand to the title when it is collapsed
+
+        // TO-DO: Bring back expanded logic
+        return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var _state$schema$nodes = state.schema.nodes,
+      expand = _state$schema$nodes.expand,
+      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)
+    // TO-DO: Bring back expanded logic
+    ) {
+      var $from = selection.$from;
+      return (0, _commands.focusTitle)($from.pos + 1)(state, dispatch, editorView);
+    }
+    if (editorView.endOfTextblock('down')) {
+      var _$from2 = state.selection.$from;
+      if (_$from2.depth === 0) {
+        return false;
+      }
+      var $after = state.doc.resolve(_$from2.after());
+      if ($after.nodeAfter && ($after.nodeAfter.type === expand || $after.nodeAfter.type === nestedExpand)) {
+        return (0, _commands.focusTitle)($after.pos + 1)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, function (state, dispatch, editorView) {
+    var selection = state.selection;
+    var $from = selection.$from;
+    if (!editorView || !selection.empty) {
+      return false;
+    }
+    var _state$schema$nodes2 = state.schema.nodes,
+      expand = _state$schema$nodes2.expand,
+      nestedExpand = _state$schema$nodes2.nestedExpand;
+    var expandNode = (0, _transforms.findExpand)(state);
+    if (!expandNode) {
+      // @see ED-7977
+      var sel = _state.Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
+      var expandBefore = (0, _transforms.findExpand)(state, sel);
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
+      // TO-DO: Bring back expanded logic
+      ) {
+        return (0, _commands.focusTitle)(expandBefore.start)(state, dispatch, editorView);
+      }
+      return false;
+    }
+    var parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1)));
+    // ED-10012 catch cases where the expand has another node nested within it and
+    // the backspace should be applied only to the inner node instead of the expand
+    if (parentNode && !isExpandNode(parentNode)) {
+      return false;
+    }
+    var textSel = _state.Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
+    if (textSel && selection.$from.pos === textSel.$from.pos && (0, _utils.isEmptyNode)(state.schema)(expandNode.node) && dispatch) {
+      var _api$analytics;
+      return (0, _commands.deleteExpand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
+    }
+    return false;
+  }, list);
+  return (0, _keymap.keymap)(list);
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.containsClass = containsClass;
+exports.pluginKey = exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _selection = require("@atlaskit/editor-common/selection");
+var _styles = require("@atlaskit/editor-common/styles");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _nodeViews = _interopRequireDefault(require("../node-views"));
+var pluginKey = exports.pluginKey = new _state.PluginKey('expandPlugin');
+function containsClass(element, className) {
+  var _element$classList;
+  return Boolean(element === null || element === void 0 || (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
+}
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, getIntl) {
+  var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
+  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 isMobile = appearance === 'mobile';
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        expand: (0, _nodeViews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          api: api,
+          allowInteractiveExpand: allowInteractiveExpand,
+          __livePage: __livePage
+        }),
+        nestedExpand: (0, _nodeViews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          api: api,
+          allowInteractiveExpand: allowInteractiveExpand,
+          __livePage: __livePage
+        })
+      },
+      handleKeyDown: function handleKeyDown(_view, event) {
+        return containsClass(event.target, _styles.expandClassNames.titleContainer);
+      },
+      handleKeyPress: function handleKeyPress(_view, event) {
+        return containsClass(event.target, _styles.expandClassNames.titleContainer);
+      },
+      handleScrollToSelection: function handleScrollToSelection() {
+        return containsClass(document.activeElement, _styles.expandClassNames.titleInput);
+      },
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['expand', 'nestedExpand'], function (target) {
+        return target.classList.contains(_styles.expandClassNames.prefix);
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    },
+    // @see ED-8027 to follow up on this work-around
+    filterTransaction: function filterTransaction(tr) {
+      if (containsClass(document.activeElement, _styles.expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
+        return false;
+      }
+      return true;
+    }
+  });
+};

package/dist/cjs/singlePlayerExpand/toolbar.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarConfig = void 0;
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _commands = require("./commands");
+var _utils2 = require("./utils");
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(api) {
+  return function (state, _ref) {
+    var _api$decorations$acti, _api$decorations, _api$analytics;
+    var formatMessage = _ref.formatMessage;
+    var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
+      hoverDecoration = _ref2.hoverDecoration;
+    var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+    var selectedExpandNode = (0, _utils2.findParentExpandNode)(state);
+    if (selectedExpandNode) {
+      var _state$schema$nodes = state.schema.nodes,
+        nestedExpand = _state$schema$nodes.nestedExpand,
+        expand = _state$schema$nodes.expand;
+      return {
+        title: 'Expand toolbar',
+        getDomRef: function getDomRef(view) {
+          return (0, _utils.findDomRefAtPos)(selectedExpandNode.pos, view.domAtPos.bind(view));
+        },
+        nodeType: [nestedExpand, expand],
+        offset: [0, 6],
+        items: [{
+          type: 'copy-button',
+          items: [{
+            state: state,
+            formatMessage: formatMessage,
+            nodeType: [nestedExpand, expand]
+          }, {
+            type: 'separator'
+          }]
+        }, {
+          id: 'editor.expand.delete',
+          type: 'button',
+          appearance: 'danger',
+          focusEditoronEnter: true,
+          icon: _remove.default,
+          onClick: (0, _commands.deleteExpand)(editorAnalyticsAPI),
+          onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
+          onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
+          onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], true),
+          onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration([nestedExpand, expand], false),
+          title: formatMessage(_messages.default.remove),
+          tabIndex: null
+        }]
+      };
+    }
+    return;
+  };
+};

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandButtonInner = exports.ExpandButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _excluded = ["buttonStyles"];
+/** @jsx jsx */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function withTooltip(Component) {
+  return function WithTooltip(props) {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: props.label,
+      position: "top",
+      tag: _ui.ExpandLayoutWrapperWithRef
+    }, (0, _react2.jsx)(Component, props));
+  };
+}
+var ExpandButtonInner = exports.ExpandButtonInner = function ExpandButtonInner(props) {
+  var useTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
+    var _currentTheme = currentTheme(themeProps),
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded);
+    return _objectSpread({
+      buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
+        height: '100%',
+        '& svg': {
+          transform: props.expanded ? 'transform: rotate(90deg);' : 'transform: rotate(0deg);',
+          transition: "transform 0.2s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ";")
+        }
+      })
+    }, rest);
+  }, [props]);
+  return (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    className: _styles.expandClassNames.iconContainer,
+    iconBefore: (0, _react2.jsx)(_chevronRight.default, {
+      label: ''
+    }),
+    shouldFitContainer: true,
+    theme: useTheme,
+    "aria-expanded": props.expanded,
+    isDisabled: !props.allowInteractiveExpand
+  });
+};
+var ButtonWithTooltip = withTooltip(ExpandButtonInner);
+var ButtonWithoutTooltip = ExpandButtonInner;
+var ExpandButton = exports.ExpandButton = function ExpandButton(props) {
+  var expanded = props.expanded,
+    intl = props.intl;
+  var message = expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode;
+  var label = intl && intl.formatMessage(message) || message.defaultMessage;
+  // check to ensure device supports any-hover
+  var supportsAnyHover = !!window.matchMedia ? window.matchMedia('(any-hover: hover)').matches !== window.matchMedia('(any-hover: none)').matches : false;
+  var hoverEventCheck = supportsAnyHover ? window.matchMedia('(any-hover: hover)').matches : true;
+
+  // hoverEventCheck is to disable tooltips for mobile to prevent incorrect hover state causing issues on iOS
+  if (props.allowInteractiveExpand && hoverEventCheck) {
+    return (0, _react2.jsx)(ButtonWithTooltip, (0, _extends2.default)({
+      label: label
+    }, props));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _ui.expandLayoutWrapperStyle
+    }, (0, _react2.jsx)(ButtonWithoutTooltip, (0, _extends2.default)({
+      label: label
+    }, props)))
+  );
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toDOM = exports.renderIcon = exports.buildExpandClassName = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+var _ExpandButton = require("../ui/ExpandButton");
+// TODO: https://product-fabric.atlassian.net/browse/ED-22841
+var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type) {
+  return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), "\n  ").concat(_styles.expandClassNames.expanded);
+};
+var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
+  return ['div', {
+    // prettier-ignore
+    'class': buildExpandClassName(node.type.name),
+    'data-node-type': node.type.name,
+    'data-title': node.attrs.title
+  }, ['div', {
+    // prettier-ignore
+    'class': _styles.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': _styles.expandClassNames.icon
+  }], ['div', {
+    // prettier-ignore
+    'class': _styles.expandClassNames.inputContainer
+  }, ['input', {
+    // prettier-ignore
+    'class': _styles.expandClassNames.titleInput,
+    value: node.attrs.title,
+    placeholder: intl && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
+    type: 'text'
+  }]]],
+  // prettier-ignore
+  ['div', {
+    'class': _styles.expandClassNames.content
+  }, 0]];
+};
+var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
+  if (!icon) {
+    return;
+  }
+  _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
+    intl: intl,
+    allowInteractiveExpand: allowInteractiveExpand,
+    expanded: true // TO-DO https://product-fabric.atlassian.net/browse/ED-22841
+  }), icon);
+};

package/dist/cjs/singlePlayerExpand/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "findExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.findExpand;
+  }
+});
+exports.findParentExpandNode = void 0;
+Object.defineProperty(exports, "transformSliceNestedExpandToExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceNestedExpandToExpand;
+  }
+});
+Object.defineProperty(exports, "transformSliceToRemoveOpenExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceToRemoveOpenExpand;
+  }
+});
+Object.defineProperty(exports, "transformSliceToRemoveOpenNestedExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceToRemoveOpenNestedExpand;
+  }
+});
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _transforms = require("@atlaskit/editor-common/transforms");
+var findParentExpandNode = exports.findParentExpandNode = function findParentExpandNode(state) {
+  return (0, _utils.findParentNodeOfType)(state.schema.nodes.expand)(state.selection) || (0, _utils.findParentNodeOfType)(state.schema.nodes.nestedExpand)(state.selection);
+};

package/dist/es2019/index.js

@@ -1,3 +1 @@
-// TODO: Handle type exports for singlePlayerExpandPlugin when they're created
-// https://product-fabric.atlassian.net/browse/ED-22840
 export { expandPlugin } from './plugin';

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

@@ -14,7 +14,7 @@ import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 }
-const toDOM = (node, __livePage, intl) => ['div', {
+const toDOM = (node, __livePage, intl, editable) => ['div', {
   // prettier-ignore
   '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,
@@ -39,11 +39,13 @@ const toDOM = (node, __livePage, intl) => ['div', {
   'class': expandClassNames.titleInput,
   value: node.attrs.title,
   placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-  type: 'text'
+  type: 'text',
+  readonly: !editable ? 'true' : undefined
 }]]],
 // prettier-ignore
 ['div', {
-  'class': expandClassNames.content
+  'class': expandClassNames.content,
+  contenteditable: editable
 }, 0]];
 export class ExpandNodeView {
   constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
@@ -364,7 +366,7 @@ export class ExpandNodeView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl, view.editable));
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
@@ -441,7 +443,18 @@ export class ExpandNodeView {
         }
         if (this.content) {
           // Disallow interaction/selection inside when collapsed.
-          this.content.setAttribute('contenteditable', getBooleanFF('platform.editor.live-pages-expand-divergence') && this.__livePage ? !node.attrs.__expanded : node.attrs.__expanded);
+          this.content.setAttribute('contenteditable', this.view.editable && (getBooleanFF('platform.editor.live-pages-expand-divergence') && this.__livePage ? !node.attrs.__expanded : node.attrs.__expanded));
+        }
+      } else {
+        if (this.content) {
+          this.content.setAttribute('contenteditable', this.view.editable ? 'true' : 'false');
+        }
+      }
+      if (this.input) {
+        if (!this.view.editable) {
+          this.input.setAttribute('readonly', 'true');
+        } else {
+          this.input.removeAttribute('readonly');
         }
       }
 

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

@@ -1,8 +1,7 @@
 import { backspace, bindKeymapWithCommand, moveDown, moveLeft, moveRight, moveUp, tab } from '@atlaskit/editor-common/keymaps';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
-import { isPositionNearTableRow } from '@atlaskit/editor-common/utils';
-import { isEmptyNode } from '@atlaskit/editor-common/utils';
+import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';