@atlaskit/editor-plugin-expand 1.3.0 → 1.3.2

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

@@ -0,0 +1,137 @@
+import { backspace, bindKeymapWithCommand, moveDown, moveUp } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { findExpand } from '@atlaskit/editor-common/transforms';
+import { isEmptyNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpand, focusTitle } from '../commands';
+const 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';
+};
+export function expandKeymap(api, options) {
+  const list = {};
+  bindKeymapWithCommand(moveUp.common, (state, dispatch, editorView) => {
+    if (!editorView) {
+      return false;
+    }
+    const {
+      selection,
+      schema
+    } = state;
+    const {
+      nodeBefore
+    } = selection.$from;
+    if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand)
+    // TO-DO: add back in expanded logic
+    ) {
+      const {
+        $from
+      } = selection;
+      return focusTitle(Math.max($from.pos - 1, 0))(state, dispatch, editorView);
+    }
+    const {
+      $from
+    } = state.selection;
+    if (editorView.endOfTextblock('up')) {
+      const expand = 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 (isPositionNearTableRow($from, schema, 'before') && !expand) {
+        return false;
+      }
+      const prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0);
+      // move cursor from expand's content to its title
+      if (expand && expand.start === prevCursorPos) {
+        return focusTitle(expand.start)(state, dispatch, editorView);
+      }
+      const sel = Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
+      const expandBefore = 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 focusTitle(expandBefore.start)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(moveDown.common, (state, dispatch, editorView) => {
+    if (!editorView) {
+      return false;
+    }
+    const {
+      expand,
+      nestedExpand
+    } = state.schema.nodes;
+    const {
+      selection
+    } = state;
+    const {
+      nodeAfter
+    } = selection.$from;
+    if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand)
+    // TO-DO: Bring back expanded logic
+    ) {
+      const {
+        $from
+      } = selection;
+      return focusTitle($from.pos + 1)(state, dispatch, editorView);
+    }
+    if (editorView.endOfTextblock('down')) {
+      const {
+        $from
+      } = state.selection;
+      if ($from.depth === 0) {
+        return false;
+      }
+      const $after = state.doc.resolve($from.after());
+      if ($after.nodeAfter && ($after.nodeAfter.type === expand || $after.nodeAfter.type === nestedExpand)) {
+        return focusTitle($after.pos + 1)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(backspace.common, (state, dispatch, editorView) => {
+    const {
+      selection
+    } = state;
+    const {
+      $from
+    } = selection;
+    if (!editorView || !selection.empty) {
+      return false;
+    }
+    const {
+      expand,
+      nestedExpand
+    } = state.schema.nodes;
+    const expandNode = findExpand(state);
+    if (!expandNode) {
+      // @see ED-7977
+      const sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
+      const expandBefore = findExpand(state, sel);
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand)
+      // TO-DO: Bring back expanded logic
+      ) {
+        return focusTitle(expandBefore.start)(state, dispatch, editorView);
+      }
+      return false;
+    }
+    const 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;
+    }
+    const textSel = Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
+    if (textSel && selection.$from.pos === textSel.$from.pos && isEmptyNode(state.schema)(expandNode.node) && dispatch) {
+      var _api$analytics;
+      return deleteExpand(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
+    }
+    return false;
+  }, list);
+  return keymap(list);
+}

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

@@ -0,0 +1,53 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import ExpandNodeView from '../node-views';
+export const pluginKey = new PluginKey('expandPlugin');
+export function containsClass(element, className) {
+  var _element$classList;
+  return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
+}
+export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, allowInteractiveExpand = true, __livePage = false) => {
+  const isMobile = appearance === 'mobile';
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        expand: ExpandNodeView({
+          getIntl,
+          isMobile,
+          api,
+          allowInteractiveExpand,
+          __livePage
+        }),
+        nestedExpand: ExpandNodeView({
+          getIntl,
+          isMobile,
+          api,
+          allowInteractiveExpand,
+          __livePage
+        })
+      },
+      handleKeyDown(_view, event) {
+        return containsClass(event.target, expandClassNames.titleContainer);
+      },
+      handleKeyPress(_view, event) {
+        return containsClass(event.target, expandClassNames.titleContainer);
+      },
+      handleScrollToSelection() {
+        return containsClass(document.activeElement, expandClassNames.titleInput);
+      },
+      handleClickOn: createSelectionClickHandler(['expand', 'nestedExpand'], target => target.classList.contains(expandClassNames.prefix), {
+        useLongPressSelection
+      })
+    },
+    // @see ED-8027 to follow up on this work-around
+    filterTransaction(tr) {
+      if (containsClass(document.activeElement, expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
+        return false;
+      }
+      return true;
+    }
+  });
+};

package/dist/es2019/singlePlayerExpand/toolbar.js

@@ -0,0 +1,51 @@
+import commonMessages from '@atlaskit/editor-common/messages';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { deleteExpand } from './commands';
+import { findParentExpandNode } from './utils';
+export const getToolbarConfig = api => (state, {
+  formatMessage
+}) => {
+  var _api$decorations$acti, _api$decorations, _api$analytics;
+  const {
+    hoverDecoration
+  } = (_api$decorations$acti = api === null || api === void 0 ? 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 : {};
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const selectedExpandNode = findParentExpandNode(state);
+  if (selectedExpandNode) {
+    const {
+      nestedExpand,
+      expand
+    } = state.schema.nodes;
+    return {
+      title: 'Expand toolbar',
+      getDomRef: view => findDomRefAtPos(selectedExpandNode.pos, view.domAtPos.bind(view)),
+      nodeType: [nestedExpand, expand],
+      offset: [0, 6],
+      items: [{
+        type: 'copy-button',
+        items: [{
+          state,
+          formatMessage,
+          nodeType: [nestedExpand, expand]
+        }, {
+          type: 'separator'
+        }]
+      }, {
+        id: 'editor.expand.delete',
+        type: 'button',
+        appearance: 'danger',
+        focusEditoronEnter: true,
+        icon: RemoveIcon,
+        onClick: 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(commonMessages.remove),
+        tabIndex: null
+      }]
+    };
+  }
+  return;
+};

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/custom-theme-button';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef, expandMessages } from '@atlaskit/editor-common/ui';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import Tooltip from '@atlaskit/tooltip';
+function withTooltip(Component) {
+  return function WithTooltip(props) {
+    return jsx(Tooltip, {
+      content: props.label,
+      position: "top",
+      tag: ExpandLayoutWrapperWithRef
+    }, jsx(Component, props));
+  };
+}
+export const ExpandButtonInner = props => {
+  const useTheme = useCallback((currentTheme, themeProps) => {
+    const {
+      buttonStyles,
+      ...rest
+    } = currentTheme(themeProps);
+    return {
+      buttonStyles: {
+        ...buttonStyles,
+        height: '100%',
+        '& svg': {
+          transform: props.expanded ? 'transform: rotate(90deg);' : 'transform: rotate(0deg);',
+          transition: `transform 0.2s ${akEditorSwoopCubicBezier};`
+        }
+      },
+      ...rest
+    };
+  }, [props]);
+  return jsx(Button, {
+    appearance: "subtle",
+    className: expandClassNames.iconContainer,
+    iconBefore: jsx(ChevronRightIcon, {
+      label: ''
+    }),
+    shouldFitContainer: true,
+    theme: useTheme,
+    "aria-expanded": props.expanded,
+    isDisabled: !props.allowInteractiveExpand
+  });
+};
+const ButtonWithTooltip = withTooltip(ExpandButtonInner);
+const ButtonWithoutTooltip = ExpandButtonInner;
+export const ExpandButton = props => {
+  const {
+    expanded,
+    intl
+  } = props;
+  const message = expanded ? expandMessages.collapseNode : expandMessages.expandNode;
+  const label = intl && intl.formatMessage(message) || message.defaultMessage;
+  // check to ensure device supports any-hover
+  const supportsAnyHover = !!window.matchMedia ? window.matchMedia('(any-hover: hover)').matches !== window.matchMedia('(any-hover: none)').matches : false;
+  const 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 jsx(ButtonWithTooltip, _extends({
+      label: label
+    }, props));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: expandLayoutWrapperStyle
+    }, jsx(ButtonWithoutTooltip, _extends({
+      label: label
+    }, props)))
+  );
+};

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

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

package/dist/es2019/singlePlayerExpand/utils.js

@@ -0,0 +1,5 @@
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+export const findParentExpandNode = state => {
+  return findParentNodeOfType(state.schema.nodes.expand)(state.selection) || findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection);
+};

package/dist/esm/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/esm/legacyExpand/nodeviews/index.js

@@ -16,7 +16,7 @@ import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 }
-var toDOM = function toDOM(node, __livePage, intl) {
+var toDOM = function toDOM(node, __livePage, intl, editable) {
   return ['div', {
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, getBooleanFF('platform.editor.live-pages-expand-divergence') && __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
@@ -42,11 +42,13 @@ var toDOM = function toDOM(node, __livePage, intl) {
     '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 var ExpandNodeView = /*#__PURE__*/function () {
@@ -353,7 +355,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
     this.intl = getIntl();
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl)),
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl, view.editable)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.allowInteractiveExpand = allowInteractiveExpand;
@@ -442,7 +444,18 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           }
           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/esm/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';

package/dist/esm/singlePlayerExpand/commands.js

@@ -0,0 +1,128 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { findExpand } from '@atlaskit/editor-common/transforms';
+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';
+
+// Creates either an expand or a nestedExpand node based on the current selection
+export var createExpandNode = function createExpandNode(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    expand = _state$schema$nodes.expand,
+    nestedExpand = _state$schema$nodes.nestedExpand;
+  var expandType = findTable(state.selection) ? nestedExpand : expand;
+  return expandType.createAndFill({});
+};
+export var insertExpand = function insertExpand(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var expandNode = createExpandNode(state);
+    if (!expandNode) {
+      return false;
+    }
+    var tr = state.selection.empty ? safeInsert(expandNode)(state.tr).scrollIntoView() : createWrapSelectionTransaction({
+      state: state,
+      type: expandNode.type
+    });
+    var payload = {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: (expandNode === null || expandNode === void 0 ? void 0 : expandNode.type) === state.schema.nodes.expand ? ACTION_SUBJECT_ID.EXPAND : ACTION_SUBJECT_ID.NESTED_EXPAND,
+      attributes: {
+        inputMethod: INPUT_METHOD.INSERT_MENU
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+    if (dispatch && expandNode) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var deleteExpand = function deleteExpand(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var expandNode = findExpand(state);
+    if (!expandNode) {
+      return false;
+    }
+    return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
+  };
+};
+export var deleteExpandAtPos = function deleteExpandAtPos(editorAnalyticsAPI) {
+  return function (expandNodePos, expandNode) {
+    return function (state, dispatch) {
+      if (!expandNode || isNaN(expandNodePos)) {
+        return false;
+      }
+      var payload = {
+        action: ACTION.DELETED,
+        actionSubject: expandNode.type === state.schema.nodes.expand ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
+        attributes: {
+          inputMethod: INPUT_METHOD.TOOLBAR
+        },
+        eventType: EVENT_TYPE.TRACK
+      };
+      if (expandNode && dispatch) {
+        var tr = state.tr;
+        tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+
+// Used to clear any node or cell selection when expand title is focused
+export var setSelectionInsideExpand = function setSelectionInsideExpand(expandPos) {
+  return function (state, dispatch, editorView) {
+    if (editorView) {
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+      var sel = Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
+      if (sel && dispatch) {
+        dispatch(editorView.state.tr.setSelection(sel));
+      }
+      return true;
+    }
+    return false;
+  };
+};
+export var updateExpandTitle = function updateExpandTitle(_ref) {
+  var title = _ref.title,
+    nodeType = _ref.nodeType,
+    pos = _ref.pos;
+  return function (state, dispatch) {
+    var node = state.doc.nodeAt(pos);
+    if (node && node.type === nodeType && dispatch) {
+      var tr = state.tr;
+      tr.step(new SetAttrsStep(pos, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        title: title
+      })));
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var focusTitle = function focusTitle(pos) {
+  return function (state, dispatch, editorView) {
+    if (editorView) {
+      var dom = editorView.domAtPos(pos);
+      var expandWrapper = dom.node.parentElement;
+      if (expandWrapper) {
+        setSelectionInsideExpand(pos)(state, dispatch, editorView);
+        var input = expandWrapper.querySelector('input');
+        if (input) {
+          input.focus();
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+};