@atlaskit/editor-plugin-expand 0.1.0

package/dist/esm/nodeviews/index.js

@@ -0,0 +1,486 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+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 { expandMessages } from '@atlaskit/editor-common/ui';
+import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { deleteExpandAtPos, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
+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, intl) {
+  return ['div', {
+    // prettier-ignore
+    'class': buildExpandClassName(node.type.name, node.attrs.__expanded),
+    '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 var ExpandNodeView = /*#__PURE__*/function () {
+  function ExpandNodeView(node, view, getPos, getIntl, isMobile, featureFlags, selectNearNode, api) {
+    var _this = this;
+    _classCallCheck(this, ExpandNodeView);
+    _defineProperty(this, "allowInteractiveExpand", true);
+    _defineProperty(this, "isMobile", false);
+    _defineProperty(this, "focusTitle", function () {
+      if (_this.input) {
+        var _this$view = _this.view,
+          state = _this$view.state,
+          dispatch = _this$view.dispatch;
+        if (_this.selectNearNode) {
+          var tr = _this.selectNearNode({
+            selectionRelativeToNode: RelativeSelectionPos.Start
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        }
+        var pos = _this.getPos();
+        if (typeof pos === 'number') {
+          setSelectionInsideExpand(pos)(state, dispatch, _this.view);
+        }
+        _this.input.focus();
+      }
+    });
+    _defineProperty(this, "handleIconKeyDown", function (event) {
+      switch (keyName(event)) {
+        case 'Tab':
+          event.preventDefault();
+          _this.focusTitle();
+          break;
+        case 'Enter':
+          event.preventDefault();
+          _this.handleClick(event);
+          break;
+      }
+    });
+    _defineProperty(this, "isAllowInteractiveExpandEnabled", function () {
+      return _this.featureFlags && !!_this.featureFlags.interactiveExpand;
+    });
+    _defineProperty(this, "handleClick", function (event) {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var target = event.target;
+      var _this$view2 = _this.view,
+        state = _this$view2.state,
+        dispatch = _this$view2.dispatch;
+      if (closestElement(target, ".".concat(expandClassNames.icon))) {
+        var _this$api;
+        if (!_this.isAllowInteractiveExpandEnabled()) {
+          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();
+        }
+        toggleExpandExpanded((_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions)(pos, _this.node.type)(state, dispatch);
+        return;
+      }
+      if (target === _this.input) {
+        event.stopPropagation();
+        _this.focusTitle();
+        return;
+      }
+    });
+    _defineProperty(this, "handleInput", function (event) {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var target = event.target;
+      if (target === _this.input) {
+        event.stopPropagation();
+        var _this$view3 = _this.view,
+          state = _this$view3.state,
+          dispatch = _this$view3.dispatch;
+        updateExpandTitle(target.value, pos, _this.node.type)(state, dispatch);
+      }
+    });
+    _defineProperty(this, "handleFocus", function (event) {
+      event.stopImmediatePropagation();
+    });
+    _defineProperty(this, "handleTitleKeydown", function (event) {
+      switch (keyName(event)) {
+        case 'Enter':
+          _this.toggleExpand();
+          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.deleteExpand(event);
+          break;
+      }
+    });
+    _defineProperty(this, "deleteExpand", function (event) {
+      if (!_this.input) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input = _this.input,
+        selectionStart = _this$input.selectionStart,
+        selectionEnd = _this$input.selectionEnd;
+      if (selectionStart !== selectionEnd || selectionStart !== 0) {
+        return;
+      }
+      var state = _this.view.state;
+      var expandNode = _this.node;
+      if (expandNode && isEmptyNode(state.schema)(expandNode)) {
+        var _this$api2;
+        deleteExpandAtPos((_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions)(pos, expandNode)(state, _this.view.dispatch);
+      }
+    });
+    _defineProperty(this, "toggleExpand", function () {
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      if (_this.isAllowInteractiveExpandEnabled()) {
+        var _this$api3;
+        var _this$view4 = _this.view,
+          state = _this$view4.state,
+          dispatch = _this$view4.dispatch;
+        toggleExpandExpanded((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, _this.node.type)(state, dispatch);
+      }
+    });
+    _defineProperty(this, "moveToOutsideOfTitle", function (event) {
+      event.preventDefault();
+      var _this$view5 = _this.view,
+        state = _this$view5.state,
+        dispatch = _this$view5.dispatch;
+      var expandPos = _this.getPos();
+      if (typeof expandPos !== 'number') {
+        return;
+      }
+      var pos = expandPos;
+      if (_this.isCollapsed()) {
+        pos = expandPos + _this.node.nodeSize;
+      }
+      var 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);
+      }
+      var 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));
+      }
+    });
+    _defineProperty(this, "isCollapsed", function () {
+      return !_this.node.attrs.__expanded;
+    });
+    _defineProperty(this, "setRightGapCursor", function (event) {
+      if (!_this.input) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input2 = _this.input,
+        value = _this$input2.value,
+        selectionStart = _this$input2.selectionStart,
+        selectionEnd = _this$input2.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        var _this$view6 = _this.view,
+          state = _this$view6.state,
+          dispatch = _this$view6.dispatch;
+        event.preventDefault();
+        _this.view.focus();
+        dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(_this.node.nodeSize + pos), Side.RIGHT)));
+      }
+    });
+    _defineProperty(this, "setLeftGapCursor", function (event) {
+      if (!_this.input) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input3 = _this.input,
+        selectionStart = _this$input3.selectionStart,
+        selectionEnd = _this$input3.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        event.preventDefault();
+        var _this$view7 = _this.view,
+          state = _this$view7.state,
+          dispatch = _this$view7.dispatch;
+        _this.view.focus();
+        dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)));
+      }
+    });
+    _defineProperty(this, "handleArrowRightFromTitle", function (event) {
+      if (!_this.input || !_this.selectNearNode) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input4 = _this.input,
+        value = _this$input4.value,
+        selectionStart = _this$input4.selectionStart,
+        selectionEnd = _this$input4.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === value.length) {
+        event.preventDefault();
+        var _this$view8 = _this.view,
+          state = _this$view8.state,
+          dispatch = _this$view8.dispatch;
+        _this.view.focus();
+        var tr = _this.selectNearNode({
+          selectionRelativeToNode: RelativeSelectionPos.End,
+          selection: NodeSelection.create(state.doc, pos)
+        })(state);
+        if (dispatch) {
+          dispatch(tr);
+        }
+      }
+    });
+    _defineProperty(this, "handleArrowLeftFromTitle", function (event) {
+      if (!_this.input || !_this.selectNearNode) {
+        return;
+      }
+      var pos = _this.getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var _this$input5 = _this.input,
+        selectionStart = _this$input5.selectionStart,
+        selectionEnd = _this$input5.selectionEnd;
+      if (selectionStart === selectionEnd && selectionStart === 0) {
+        var _this$api4;
+        event.preventDefault();
+        var _this$view9 = _this.view,
+          state = _this$view9.state,
+          dispatch = _this$view9.dispatch;
+        _this.view.focus();
+        var selectionSharedState = ((_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.selection) === null || _this$api4 === void 0 ? void 0 : _this$api4.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) {
+          var tr = _this.selectNearNode({
+            selectionRelativeToNode: undefined,
+            selection: new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)
+          })(state);
+          if (dispatch) {
+            dispatch(tr);
+          }
+        } else {
+          var _tr = _this.selectNearNode({
+            selectionRelativeToNode: RelativeSelectionPos.Start,
+            selection: NodeSelection.create(state.doc, pos)
+          })(state);
+          if (dispatch) {
+            dispatch(_tr);
+          }
+        }
+      }
+    });
+    this.selectNearNode = selectNearNode;
+    this.intl = getIntl();
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.intl)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.getPos = getPos;
+    this.view = view;
+    this.node = node;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.isMobile = isMobile;
+    this.featureFlags = featureFlags;
+    this.api = api;
+    this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
+    this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
+    this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
+    this.content = this.dom.querySelector(".".concat(expandClassNames.content));
+    this.renderIcon(this.intl);
+    this.initHandlers();
+  }
+  _createClass(ExpandNodeView, [{
+    key: "initHandlers",
+    value: function initHandlers() {
+      if (this.dom) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.dom.addEventListener('click', this.handleClick);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.dom.addEventListener('input', this.handleInput);
+      }
+      if (this.input) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.addEventListener('keydown', this.handleTitleKeydown);
+      }
+      if (this.titleContainer) {
+        // If the user interacts in our title bar (either toggle or input)
+        // Prevent ProseMirror from getting a focus event (causes weird selection issues).
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.titleContainer.addEventListener('focus', this.handleFocus);
+      }
+      if (this.icon) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.icon.addEventListener('keydown', this.handleIconKeyDown);
+      }
+    }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon(intl, node) {
+      if (!this.icon) {
+        return;
+      }
+      var _ref = node && node.attrs || this.node.attrs,
+        __expanded = _ref.__expanded;
+      ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
+        intl: intl,
+        allowInteractiveExpand: this.isAllowInteractiveExpandEnabled(),
+        expanded: __expanded
+      }), this.icon);
+    }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      var target = event.target;
+      return target === this.input || target === this.icon || !!closestElement(target, ".".concat(expandClassNames.icon));
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function 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;
+    }
+  }, {
+    key: "update",
+    value: function update(node, _decorations) {
+      var _this2 = this;
+      if (this.node.type === node.type) {
+        if (this.node.attrs.__expanded !== node.attrs.__expanded) {
+          // Instead of re-rendering the view on an expand toggle
+          // we toggle a class name to hide the content and animate the chevron.
+          if (this.dom) {
+            this.dom.classList.toggle(expandClassNames.expanded);
+            this.renderIcon(this && this.intl, node);
+          }
+          if (this.content) {
+            // Disallow interaction/selection inside when collapsed.
+            this.content.setAttribute('contenteditable', node.attrs.__expanded);
+          }
+        }
+
+        // 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(function () {
+          if (_this2.input && _this2.node.attrs.title !== _this2.input.value) {
+            _this2.input.value = _this2.node.attrs.title;
+          }
+        });
+        this.node = node;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.dom) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.dom.removeEventListener('click', this.handleClick);
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.dom.removeEventListener('input', this.handleInput);
+      }
+      if (this.input) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.input.removeEventListener('keydown', this.handleTitleKeydown);
+      }
+      if (this.titleContainer) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.titleContainer.removeEventListener('focus', this.handleFocus);
+      }
+      if (this.icon) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        this.icon.removeEventListener('keydown', this.handleIconKeyDown);
+        ReactDOM.unmountComponentAtNode(this.icon);
+      }
+
+      // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
+      this.dom = undefined;
+      this.contentDOM = undefined;
+      this.icon = undefined;
+      this.input = undefined;
+      this.titleContainer = undefined;
+      this.content = undefined;
+    }
+  }]);
+  return ExpandNodeView;
+}();
+export default function (_ref2) {
+  var getIntl = _ref2.getIntl,
+    isMobile = _ref2.isMobile,
+    featureFlags = _ref2.featureFlags,
+    api = _ref2.api;
+  return function (node, view, getPos) {
+    var _api$selection;
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, featureFlags, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api);
+  };
+}

package/dist/esm/plugin.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { expand, 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 { createExpandNode, insertExpand } from './commands';
+import { expandKeymap } from './pm-plugins/keymap';
+import { createPlugin } from './pm-plugins/main';
+import { getToolbarConfig } from './toolbar';
+export var expandPlugin = function expandPlugin(_ref) {
+  var _api$featureFlags, _api$analytics;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'expand',
+    nodes: function nodes() {
+      return [{
+        name: 'expand',
+        node: expand
+      }, {
+        name: 'nestedExpand',
+        node: nestedExpand
+      }];
+    },
+    actions: {
+      insertExpand: insertExpand(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'expand',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch,
+            getIntl = _ref2.getIntl;
+          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, featureFlags, api);
+        }
+      }, {
+        name: 'expandKeymap',
+        plugin: function plugin() {
+          return expandKeymap(api);
+        }
+      }];
+    },
+    pluginsOptions: {
+      floatingToolbar: getToolbarConfig(api),
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        if (options && options.allowInsertion !== true) {
+          return [];
+        }
+        return [{
+          id: 'expand',
+          title: formatMessage(messages.expand),
+          description: formatMessage(messages.expandDescription),
+          keywords: ['accordion', 'collapse'],
+          priority: 600,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconExpand, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics2;
+            var node = createExpandNode(state);
+            if (!node) {
+              return false;
+            }
+            var tr = state.selection.empty ? insert(node) : 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: 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;
+          }
+        }];
+      }
+    }
+  };
+};
+export { pluginKey } from './pm-plugins/plugin-factory';