@atlaskit/editor-plugin-expand 0.1.0

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

@@ -0,0 +1,165 @@
+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 { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpand, focusTitle } from '../commands';
+import { findExpand } from '../utils';
+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';
+};
+var isExpandSelected = function isExpandSelected(selection) {
+  return selection instanceof NodeSelection && isExpandNode(selection.node);
+};
+export function expandKeymap(api) {
+  var list = {};
+  bindKeymapWithCommand(moveRight.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && selectionRelativeToNode === RelativeSelectionPos.Start) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(moveLeft.common, function (state, dispatch, editorView) {
+    if (!editorView) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
+    var selectionRelativeToNode = selectionSharedState.selectionRelativeToNode;
+    if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === RelativeSelectionPos.End)) {
+      return focusTitle(selection.from + 1)(state, dispatch, editorView);
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(tab.common, function (state, dispatch, editorView) {
+    if (state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
+      var from = state.selection.from;
+      var expand = editorView.nodeDOM(from);
+      if (!expand || !(expand instanceof HTMLElement)) {
+        return false;
+      }
+      var iconContainer = expand.querySelector(".".concat(expandClassNames.iconContainer));
+      if (iconContainer && iconContainer.focus) {
+        var tr = state.tr;
+        var pos = state.selection.from;
+        tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+        if (dispatch) {
+          dispatch(tr);
+        }
+        editorView.dom.blur();
+        iconContainer.focus();
+      }
+      return true;
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(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 GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && !nodeBefore.attrs.__expanded) {
+      var _$from = selection.$from;
+      return focusTitle(Math.max(_$from.pos - 1, 0))(state, dispatch, editorView);
+    }
+    var $from = state.selection.$from;
+    if (editorView.endOfTextblock('up')) {
+      var 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;
+      }
+      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 focusTitle(expand.start)(state, dispatch, editorView);
+      }
+      var sel = Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
+      var expandBefore = 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) {
+          return focusTitle(expandBefore.start)(state, dispatch, editorView);
+        }
+        // moving cursor from outside of an expand to the content when it is expanded
+        else if (dispatch) {
+          dispatch(state.tr.setSelection(sel));
+        }
+        return true;
+      }
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(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 GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && !nodeAfter.attrs.__expanded) {
+      var $from = selection.$from;
+      return 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 focusTitle($after.pos + 1)(state, dispatch, editorView);
+      }
+    }
+    return false;
+  }, list);
+  bindKeymapWithCommand(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 = findExpand(state);
+    if (!expandNode) {
+      // @see ED-7977
+      var sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
+      var expandBefore = findExpand(state, sel);
+      if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && !expandBefore.node.attrs.__expanded) {
+        return 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 = 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 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
+    }
+    return false;
+  }, list);
+  return keymap(list);
+}

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

@@ -0,0 +1,77 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { setExpandRef } from '../commands';
+import ExpandNodeView from '../nodeviews';
+import { findExpand } from '../utils';
+import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
+export 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));
+}
+export var 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 featureFlags = arguments.length > 4 ? arguments[4] : undefined;
+  var api = arguments.length > 5 ? arguments[5] : undefined;
+  var state = createPluginState(dispatch, {});
+  var isMobile = appearance === 'mobile';
+  return new SafePlugin({
+    state: state,
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        expand: ExpandNodeView({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          featureFlags: featureFlags,
+          api: api
+        }),
+        nestedExpand: ExpandNodeView({
+          getIntl: getIntl,
+          isMobile: isMobile,
+          featureFlags: featureFlags,
+          api: api
+        })
+      },
+      handleKeyDown: function handleKeyDown(_view, event) {
+        return containsClass(event.target, expandClassNames.titleContainer);
+      },
+      handleKeyPress: function handleKeyPress(_view, event) {
+        return containsClass(event.target, expandClassNames.titleContainer);
+      },
+      handleScrollToSelection: function handleScrollToSelection() {
+        return containsClass(document.activeElement, expandClassNames.titleInput);
+      },
+      handleClickOn: createSelectionClickHandler(['expand', 'nestedExpand'], function (target) {
+        return target.classList.contains(expandClassNames.prefix);
+      }, {
+        useLongPressSelection: useLongPressSelection
+      })
+    },
+    // @see ED-8027 to follow up on this work-around
+    filterTransaction: function filterTransaction(tr) {
+      if (containsClass(document.activeElement, expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
+        return false;
+      }
+      return true;
+    },
+    view: function view(editorView) {
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      return {
+        update: function update(view) {
+          var state = view.state,
+            dispatch = view.dispatch;
+          var node = findExpand(state);
+          if (node) {
+            var expandRef = findDomRefAtPos(node.pos, domAtPos);
+            if (getPluginState(state).expandRef !== expandRef) {
+              setExpandRef(expandRef)(state, dispatch);
+            }
+          }
+        }
+      };
+    }
+  });
+};

package/dist/esm/pm-plugins/plugin-factory.js

@@ -0,0 +1,9 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from '../reducer';
+export var pluginKey = new PluginKey('expandPlugin');
+var _pluginFactory = pluginFactory(pluginKey, reducer),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export { createPluginState, createCommand, getPluginState };

package/dist/esm/reducer.js

@@ -0,0 +1,13 @@
+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; }
+export default (function (pluginState, action) {
+  switch (action.type) {
+    case 'SET_EXPAND_REF':
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        expandRef: action.data.ref
+      });
+    default:
+      return pluginState;
+  }
+});

package/dist/esm/toolbar.js

@@ -0,0 +1,52 @@
+import commonMessages from '@atlaskit/editor-common/messages';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { deleteExpand } from './commands';
+import { getPluginState } from './pm-plugins/plugin-factory';
+export var 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 _getPluginState = getPluginState(state),
+      expandRef = _getPluginState.expandRef;
+    if (expandRef) {
+      var _state$schema$nodes = state.schema.nodes,
+        nestedExpand = _state$schema$nodes.nestedExpand,
+        expand = _state$schema$nodes.expand;
+      return {
+        title: 'Expand toolbar',
+        getDomRef: function getDomRef() {
+          return expandRef;
+        },
+        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: 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/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/ExpandIconButton.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+var _excluded = ["buttonStyles"];
+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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @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';
+export var withTooltip = function withTooltip(WrapperComponent) {
+  return /*#__PURE__*/function (_React$Component) {
+    _inherits(WithSortableColumn, _React$Component);
+    var _super = _createSuper(WithSortableColumn);
+    function WithSortableColumn(props) {
+      _classCallCheck(this, WithSortableColumn);
+      return _super.call(this, props);
+    }
+    _createClass(WithSortableColumn, [{
+      key: "render",
+      value: function render() {
+        var label = this.props.label;
+        return jsx(Tooltip, {
+          content: label,
+          position: "top",
+          tag: ExpandLayoutWrapperWithRef
+        }, jsx(WrapperComponent, this.props));
+      }
+    }]);
+    return WithSortableColumn;
+  }(React.Component);
+};
+export var CustomButton = function CustomButton(props) {
+  var label = props.label,
+    allowInteractiveExpand = props.allowInteractiveExpand;
+  var useTheme = useCallback(function (currentTheme, themeProps) {
+    var _currentTheme = currentTheme(themeProps),
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = _objectWithoutProperties(_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(akEditorSwoopCubicBezier, ";")
+        }
+      })
+    }, rest);
+  }, [props]);
+  return jsx(Button, {
+    appearance: "subtle",
+    className: expandClassNames.iconContainer,
+    iconBefore: jsx(ChevronRightIcon, {
+      label: label
+    }),
+    shouldFitContainer: true,
+    theme: useTheme,
+    isDisabled: !allowInteractiveExpand
+  });
+};
+var ButtonWithTooltip = withTooltip(CustomButton);
+var ButtonWithoutTooltip = CustomButton;
+export var ExpandIconButton = function ExpandIconButton(props) {
+  var expanded = props.expanded,
+    intl = props.intl;
+  var message = expanded ? expandMessages.collapseNode : 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 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/esm/utils.js

@@ -0,0 +1 @@
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';

package/dist/types/commands.d.ts

@@ -0,0 +1,13 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const setExpandRef: (ref?: HTMLDivElement | null) => Command;
+export declare const deleteExpandAtPos: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (expandNodePos: number, expandNode: PMNode) => Command;
+export declare const deleteExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const updateExpandTitle: (title: string, pos: number, nodeType: NodeType) => Command;
+export declare const toggleExpandExpanded: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (pos: number, nodeType: NodeType) => Command;
+export declare const createExpandNode: (state: EditorState) => PMNode | null;
+export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const focusTitle: (pos: number) => Command;
+export declare const setSelectionInsideExpand: (expandPos: number) => Command;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export type { ExpandPlugin } from './plugin';
+export type { ExpandPluginState, ExpandPluginOptions } from './types';
+export { expandPlugin } from './plugin';

package/dist/types/nodeviews/index.d.ts

@@ -0,0 +1,55 @@
+import type { IntlShape } from 'react-intl-next';
+import type { SetSelectionRelativeToNode } from '@atlaskit/editor-common/selection';
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
+import type { getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { ExpandPlugin } from '../types';
+export declare class ExpandNodeView implements NodeView {
+    private selectNearNode;
+    node: PmNode;
+    view: EditorView;
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    icon?: HTMLElement | null;
+    input?: HTMLInputElement | null;
+    titleContainer?: HTMLElement | null;
+    content?: HTMLElement | null;
+    getPos: getPosHandlerNode;
+    intl: IntlShape;
+    allowInteractiveExpand: boolean;
+    isMobile: boolean;
+    featureFlags: FeatureFlags;
+    api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, featureFlags: FeatureFlags, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined);
+    private initHandlers;
+    private focusTitle;
+    private handleIconKeyDown;
+    private renderIcon;
+    private isAllowInteractiveExpandEnabled;
+    private handleClick;
+    private handleInput;
+    private handleFocus;
+    private handleTitleKeydown;
+    private deleteExpand;
+    private toggleExpand;
+    private moveToOutsideOfTitle;
+    private isCollapsed;
+    private setRightGapCursor;
+    private setLeftGapCursor;
+    private handleArrowRightFromTitle;
+    private handleArrowLeftFromTitle;
+    stopEvent(event: Event): boolean;
+    ignoreMutation(mutationRecord: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
+    update(node: PmNode, _decorations: readonly Decoration[]): boolean;
+    destroy(): void;
+}
+export default function ({ getIntl, isMobile, featureFlags, api, }: {
+    getIntl: () => IntlShape;
+    isMobile: boolean;
+    featureFlags: FeatureFlags;
+    api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+}): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types/plugin.d.ts

@@ -0,0 +1,24 @@
+import type { EditorAppearance, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { insertExpand } from './commands';
+interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
+    allowInsertion?: boolean;
+    appearance?: EditorAppearance;
+}
+export type ExpandPlugin = NextEditorPlugin<'expand', {
+    pluginConfiguration: ExpandPluginOptions | undefined;
+    dependencies: [
+        FeatureFlagsPlugin,
+        DecorationsPlugin,
+        SelectionPlugin,
+        OptionalPlugin<AnalyticsPlugin>
+    ];
+    actions: {
+        insertExpand: ReturnType<typeof insertExpand>;
+    };
+}>;
+export declare const expandPlugin: ExpandPlugin;
+export { pluginKey } from './pm-plugins/plugin-factory';

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,4 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExpandPlugin } from '../types';
+export declare function expandKeymap(api: ExtractInjectionAPI<ExpandPlugin> | undefined): SafePlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,7 @@
+import type { IntlShape } from 'react-intl-next';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorAppearance, ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExpandPlugin } from '../types';
+export declare function containsClass(element: Element | null, className: string): boolean;
+export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, featureFlags: FeatureFlags, api: ExtractInjectionAPI<ExpandPlugin> | undefined) => SafePlugin<import("../types").ExpandPluginState>;

package/dist/types/pm-plugins/plugin-factory.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const pluginKey: PluginKey<any>;
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("..").ExpandPluginState | ((state: import("prosemirror-state").EditorState) => import("..").ExpandPluginState)) => import("prosemirror-state").SafeStateField<import("..").ExpandPluginState>, createCommand: <A = import("../types").ExpandPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("..").ExpandPluginState;

package/dist/types/reducer.d.ts

@@ -0,0 +1,3 @@
+import type { ExpandPluginAction, ExpandPluginState } from './types';
+declare const _default: (pluginState: ExpandPluginState, action: ExpandPluginAction) => ExpandPluginState;
+export default _default;

package/dist/types/toolbar.d.ts

@@ -0,0 +1,3 @@
+import type { ExtractInjectionAPI, FloatingToolbarHandler } from '@atlaskit/editor-common/types';
+import type { ExpandPlugin } from './index';
+export declare const getToolbarConfig: (api: ExtractInjectionAPI<ExpandPlugin> | undefined) => FloatingToolbarHandler;

package/dist/types/types.d.ts

@@ -0,0 +1,31 @@
+import type { EditorAppearance, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { insertExpand } from './commands';
+export interface ExpandPluginState {
+    expandRef?: HTMLDivElement | null;
+}
+export type ExpandPluginAction = {
+    type: 'SET_EXPAND_REF';
+    data: {
+        ref?: HTMLDivElement | null;
+    };
+};
+export interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
+    allowInsertion?: boolean;
+    appearance?: EditorAppearance;
+}
+export type ExpandPlugin = NextEditorPlugin<'expand', {
+    pluginConfiguration: ExpandPluginOptions | undefined;
+    dependencies: [
+        FeatureFlagsPlugin,
+        DecorationsPlugin,
+        SelectionPlugin,
+        OptionalPlugin<AnalyticsPlugin>
+    ];
+    actions: {
+        insertExpand: ReturnType<typeof insertExpand>;
+    };
+}>;

package/dist/types/ui/ExpandIconButton.d.ts

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+interface ExpandIconButtonProps {
+    allowInteractiveExpand: boolean;
+    expanded: boolean;
+    intl?: IntlShape;
+}
+interface ExpandIconButtonWithLabelProps extends ExpandIconButtonProps {
+    label: string;
+}
+export declare const withTooltip: (WrapperComponent: React.ElementType) => {
+    new (props: ExpandIconButtonWithLabelProps): {
+        render(): jsx.JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ExpandIconButtonWithLabelProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ExpandIconButtonWithLabelProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<ExpandIconButtonWithLabelProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ExpandIconButtonWithLabelProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ExpandIconButtonWithLabelProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ExpandIconButtonWithLabelProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ExpandIconButtonWithLabelProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ExpandIconButtonWithLabelProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ExpandIconButtonWithLabelProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export declare const CustomButton: (props: ExpandIconButtonWithLabelProps) => jsx.JSX.Element;
+export declare const ExpandIconButton: (props: ExpandIconButtonProps) => jsx.JSX.Element;
+export {};

package/dist/types/utils.d.ts

@@ -0,0 +1 @@
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceNestedExpandToExpand, } from '@atlaskit/editor-common/transforms';

package/dist/types-ts4.5/commands.d.ts

@@ -0,0 +1,13 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const setExpandRef: (ref?: HTMLDivElement | null) => Command;
+export declare const deleteExpandAtPos: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (expandNodePos: number, expandNode: PMNode) => Command;
+export declare const deleteExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const updateExpandTitle: (title: string, pos: number, nodeType: NodeType) => Command;
+export declare const toggleExpandExpanded: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (pos: number, nodeType: NodeType) => Command;
+export declare const createExpandNode: (state: EditorState) => PMNode | null;
+export declare const insertExpand: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const focusTitle: (pos: number) => Command;
+export declare const setSelectionInsideExpand: (expandPos: number) => Command;