@atlaskit/editor-plugin-expand 1.3.0 → 1.3.2

package/dist/es2019/singlePlayerExpand/commands.js

@@ -0,0 +1,118 @@
+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 const createExpandNode = state => {
+  const {
+    expand,
+    nestedExpand
+  } = state.schema.nodes;
+  const expandType = findTable(state.selection) ? nestedExpand : expand;
+  return expandType.createAndFill({});
+};
+export const insertExpand = editorAnalyticsAPI => (state, dispatch) => {
+  const expandNode = createExpandNode(state);
+  if (!expandNode) {
+    return false;
+  }
+  const tr = state.selection.empty ? safeInsert(expandNode)(state.tr).scrollIntoView() : createWrapSelectionTransaction({
+    state,
+    type: expandNode.type
+  });
+  const 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 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const deleteExpand = editorAnalyticsAPI => (state, dispatch) => {
+  const expandNode = findExpand(state);
+  if (!expandNode) {
+    return false;
+  }
+  return deleteExpandAtPos(editorAnalyticsAPI)(expandNode.pos, expandNode.node)(state, dispatch);
+};
+export const deleteExpandAtPos = editorAnalyticsAPI => (expandNodePos, expandNode) => (state, dispatch) => {
+  if (!expandNode || isNaN(expandNodePos)) {
+    return false;
+  }
+  const 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) {
+    const {
+      tr
+    } = state;
+    tr.delete(expandNodePos, expandNodePos + expandNode.nodeSize);
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+
+// Used to clear any node or cell selection when expand title is focused
+export const setSelectionInsideExpand = expandPos => (state, dispatch, editorView) => {
+  if (editorView) {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    const sel = Selection.findFrom(editorView.state.doc.resolve(expandPos), 1, true);
+    if (sel && dispatch) {
+      dispatch(editorView.state.tr.setSelection(sel));
+    }
+    return true;
+  }
+  return false;
+};
+export const updateExpandTitle = ({
+  title,
+  nodeType,
+  pos
+}) => (state, dispatch) => {
+  const node = state.doc.nodeAt(pos);
+  if (node && node.type === nodeType && dispatch) {
+    const {
+      tr
+    } = state;
+    tr.step(new SetAttrsStep(pos, {
+      ...node.attrs,
+      title
+    }));
+    dispatch(tr);
+  }
+  return true;
+};
+export const focusTitle = pos => (state, dispatch, editorView) => {
+  if (editorView) {
+    const dom = editorView.domAtPos(pos);
+    const expandWrapper = dom.node.parentElement;
+    if (expandWrapper) {
+      setSelectionInsideExpand(pos)(state, dispatch, editorView);
+      const input = expandWrapper.querySelector('input');
+      if (input) {
+        input.focus();
+        return true;
+      }
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,370 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
+import { keyName } from 'w3c-keyname';
+import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
+import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpand, setSelectionInsideExpand, updateExpandTitle } from '../commands';
+import { renderIcon, toDOM } from '../ui/NodeView';
+export class ExpandNodeView {
+  constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
+    _defineProperty(this, "allowInteractiveExpand", true);
+    _defineProperty(this, "isMobile", false);
+    _defineProperty(this, "focusTitle", () => {
+      if (this.input) {
+        const {
+          state,
+          dispatch
+        } = this.view;
+        if (this.selectNearNode) {
+          const tr = this.selectNearNode({
+            selectionRelativeToNode: RelativeSelectionPos.Start
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        }
+        const pos = this.getPos();
+        if (typeof pos === 'number') {
+          setSelectionInsideExpand(pos)(state, dispatch, this.view);
+        }
+        this.input.focus();
+      }
+    });
+    _defineProperty(this, "handleIconKeyDown", event => {
+      switch (keyName(event)) {
+        case 'Tab':
+          event.preventDefault();
+          this.focusTitle();
+          break;
+        case 'Enter':
+          event.preventDefault();
+          this.handleClick(event);
+          break;
+      }
+    });
+    _defineProperty(this, "handleClick", event => {
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const target = event.target;
+      if (closestElement(target, `.${expandClassNames.icon}`)) {
+        if (!this.allowInteractiveExpand) {
+          return;
+        }
+        event.stopPropagation();
+
+        // We blur the editorView, to prevent any keyboard showing on mobile
+        // When we're interacting with the expand toggle
+        if (this.view.dom instanceof HTMLElement) {
+          this.view.dom.blur();
+        }
+
+        // TODO https://product-fabric.atlassian.net/browse/ED-22841
+        // call toggleExpandExpanded
+
+        return;
+      }
+      if (target === this.input) {
+        event.stopPropagation();
+        this.focusTitle();
+        return;
+      }
+    });
+    _defineProperty(this, "handleInput", event => {
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const target = event.target;
+      if (target === this.input) {
+        event.stopPropagation();
+        const {
+          state,
+          dispatch
+        } = this.view;
+        updateExpandTitle({
+          title: target.value,
+          pos,
+          nodeType: this.node.type
+        })(state, dispatch);
+      }
+    });
+    _defineProperty(this, "handleFocus", event => {
+      event.stopImmediatePropagation();
+    });
+    _defineProperty(this, "handleTitleKeydown", event => {
+      switch (keyName(event)) {
+        case 'Enter':
+          // TO-DO
+          break;
+        case 'Tab':
+        case 'ArrowDown':
+          this.moveToOutsideOfTitle(event);
+          break;
+        case 'ArrowRight':
+          this.handleArrowRightFromTitle(event);
+          break;
+        case 'ArrowLeft':
+          this.handleArrowLeftFromTitle(event);
+          break;
+        case 'ArrowUp':
+          this.setLeftGapCursor(event);
+          break;
+        case 'Backspace':
+          this.deleteEmptyExpand();
+          break;
+      }
+    });
+    _defineProperty(this, "deleteEmptyExpand", () => {
+      const {
+        state
+      } = this.view;
+      const expandNode = this.node;
+      if (expandNode && isEmptyNode(state.schema)(expandNode)) {
+        var _this$api, _this$api$analytics;
+        deleteExpand((_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)(state, this.view.dispatch);
+      }
+    });
+    _defineProperty(this, "moveToOutsideOfTitle", event => {
+      event.preventDefault();
+      const {
+        state,
+        dispatch
+      } = this.view;
+      const expandPos = this.getPos();
+      if (typeof expandPos !== 'number') {
+        return;
+      }
+      let pos = expandPos;
+      if (this.isCollapsed()) {
+        pos = expandPos + this.node.nodeSize;
+      }
+      const resolvedPos = state.doc.resolve(pos);
+      if (!resolvedPos) {
+        return;
+      }
+      if (this.isCollapsed() && resolvedPos.nodeAfter && ['expand', 'nestedExpand'].indexOf(resolvedPos.nodeAfter.type.name) > -1) {
+        return this.setRightGapCursor(event);
+      }
+      const sel = Selection.findFrom(resolvedPos, 1, true);
+      if (sel) {
+        // If the input has focus, ProseMirror doesn't
+        // Give PM focus back before changing our selection
+        this.view.focus();
+        dispatch(state.tr.setSelection(sel));
+      }
+    });
+    // TODO: https://product-fabric.atlassian.net/browse/ED-22841
+    _defineProperty(this, "isCollapsed", () => {
+      return false;
+    });
+    _defineProperty(this, "setRightGapCursor", event => {
+      if (!this.input) {
+        return;
+      }
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const {
+        value,
+        selectionStart,
+        selectionEnd
+      } = this.input;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        const {
+          state,
+          dispatch
+        } = this.view;
+        event.preventDefault();
+        this.view.focus();
+        dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(this.node.nodeSize + pos), Side.RIGHT)));
+      }
+    });
+    _defineProperty(this, "setLeftGapCursor", event => {
+      if (!this.input) {
+        return;
+      }
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const {
+        selectionStart,
+        selectionEnd
+      } = this.input;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        event.preventDefault();
+        const {
+          state,
+          dispatch
+        } = this.view;
+        this.view.focus();
+        dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)));
+      }
+    });
+    _defineProperty(this, "handleArrowRightFromTitle", event => {
+      if (!this.input || !this.selectNearNode) {
+        return;
+      }
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const {
+        value,
+        selectionStart,
+        selectionEnd
+      } = this.input;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        event.preventDefault();
+        const {
+          state,
+          dispatch
+        } = this.view;
+        this.view.focus();
+        const tr = this.selectNearNode({
+          selectionRelativeToNode: RelativeSelectionPos.End,
+          selection: NodeSelection.create(state.doc, pos)
+        })(state);
+        if (dispatch) {
+          dispatch(tr);
+        }
+      }
+    });
+    _defineProperty(this, "handleArrowLeftFromTitle", event => {
+      if (!this.input || !this.selectNearNode) {
+        return;
+      }
+      const pos = this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const {
+        selectionStart,
+        selectionEnd
+      } = this.input;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        var _this$api2, _this$api2$selection;
+        event.preventDefault();
+        const {
+          state,
+          dispatch
+        } = this.view;
+        this.view.focus();
+        const selectionSharedState = ((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$selection = _this$api2.selection) === null || _this$api2$selection === void 0 ? void 0 : _this$api2$selection.sharedState.currentState()) || {};
+        // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
+        // This is a special case where we want to bypass node selection and jump straight to gap cursor
+        if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
+          const tr = this.selectNearNode({
+            selectionRelativeToNode: undefined,
+            selection: new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        } else {
+          const tr = this.selectNearNode({
+            selectionRelativeToNode: RelativeSelectionPos.Start,
+            selection: NodeSelection.create(state.doc, pos)
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        }
+      }
+    });
+    this.selectNearNode = selectNearNode;
+    this.__livePage = __livePage;
+    this.intl = getIntl();
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.__livePage, this.intl));
+    this.allowInteractiveExpand = allowInteractiveExpand;
+    this.getPos = getPos;
+    this.view = view;
+    this.node = node;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.isMobile = isMobile;
+    this.api = api;
+    this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
+    this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
+    this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
+    renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
+    if (!this.input || !this.titleContainer || !this.icon) {
+      return;
+    }
+
+    // Add event listeners
+    /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners*/
+    this.dom.addEventListener('click', this.handleClick);
+    this.dom.addEventListener('input', this.handleInput);
+    this.input.addEventListener('keydown', this.handleTitleKeydown);
+    // If the user interacts in our title bar (either toggle or input)
+    // Prevent ProseMirror from getting a focus event (causes weird selection issues).
+    this.titleContainer.addEventListener('focus', this.handleFocus);
+    this.icon.addEventListener('keydown', this.handleIconKeyDown);
+  }
+  stopEvent(event) {
+    const target = event.target;
+    return target === this.input || target === this.icon || !!closestElement(target, `.${expandClassNames.icon}`);
+  }
+  ignoreMutation(mutationRecord) {
+    // ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
+    // does not recognise the changes and reverts them.
+    if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
+      return false;
+    }
+    if (mutationRecord.type === 'selection') {
+      return false;
+    }
+    return true;
+  }
+  update(node, _decorations) {
+    if (this.node.type === node.type) {
+      // TODO: https://product-fabric.atlassian.net/browse/ED-22841
+      // Handle toggling of the expand on update here
+
+      // During a collab session the title doesn't sync with other users
+      // since we're intentionally being less aggressive about re-rendering.
+      // We also apply a rAF to avoid abrupt continuous replacement of the title.
+      window.requestAnimationFrame(() => {
+        if (this.input && this.node.attrs.title !== this.input.value) {
+          this.input.value = this.node.attrs.title;
+        }
+      });
+      this.node = node;
+      return true;
+    }
+    return false;
+  }
+  destroy() {
+    if (!this.dom || !this.input || !this.titleContainer || !this.icon) {
+      return;
+    }
+    this.dom.removeEventListener('click', this.handleClick);
+    this.dom.removeEventListener('input', this.handleInput);
+    this.input.removeEventListener('keydown', this.handleTitleKeydown);
+    this.titleContainer.removeEventListener('focus', this.handleFocus);
+    this.icon.removeEventListener('keydown', this.handleIconKeyDown);
+    ReactDOM.unmountComponentAtNode(this.icon);
+  }
+}
+export default function ({
+  getIntl,
+  isMobile,
+  api,
+  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, __livePage);
+  };
+}

package/dist/es2019/singlePlayerExpand/plugin.js

@@ -1,10 +1,19 @@
+import React from 'react';
 import { expand, extendedNestedExpand, nestedExpand } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconExpand } from '@atlaskit/editor-common/quick-insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { getBooleanFF } from '@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
-
-export const expandPlugin = () => {
+import { createExpandNode, insertExpand } from './commands';
+import { expandKeymap } from './pm-plugins/keymap';
+import { createPlugin } from './pm-plugins/main';
+import { getToolbarConfig } from './toolbar';
+export const expandPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$analytics;
   return {
     name: 'expand',
     nodes() {
@@ -18,13 +27,63 @@ export const expandPlugin = () => {
       }];
     },
     actions: {
-      insertExpand: () => {
-        return false;
-      }
+      insertExpand: insertExpand(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
     },
     pmPlugins() {
-      return [];
+      return [{
+        name: 'expand',
+        plugin: ({
+          dispatch,
+          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, options.__livePage);
+        }
+      }, {
+        name: 'expandKeymap',
+        plugin: () => expandKeymap(api, {
+          __livePage: options.__livePage
+        })
+      }];
     },
-    pluginsOptions: {}
+    pluginsOptions: {
+      floatingToolbar: getToolbarConfig(api),
+      quickInsert: ({
+        formatMessage
+      }) => {
+        if (options && options.allowInsertion !== true) {
+          return [];
+        }
+        return [{
+          id: 'expand',
+          title: formatMessage(messages.expand),
+          description: formatMessage(messages.expandDescription),
+          keywords: ['accordion', 'collapse'],
+          priority: 600,
+          icon: () => /*#__PURE__*/React.createElement(IconExpand, null),
+          action(insert, state) {
+            var _api$analytics2;
+            const node = createExpandNode(state);
+            if (!node) {
+              return false;
+            }
+            const tr = state.selection.empty ? insert(node) : createWrapSelectionTransaction({
+              state,
+              type: node.type
+            });
+            api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
+              action: ACTION.INSERTED,
+              actionSubject: ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: node.type === state.schema.nodes.nestedExpand ? ACTION_SUBJECT_ID.NESTED_EXPAND : ACTION_SUBJECT_ID.EXPAND,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
   };
 };