@atlaskit/editor-plugin-insert-block/dist/cjs/pm-plugins/experiences/toolbar-action-experiences.js

Insert block plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getToolbarActionExperiencesPlugin = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _bindEventListener = require("bind-event-listener");
var _browserApis = require("@atlaskit/browser-apis");
var _experiences = require("@atlaskit/editor-common/experiences");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _state = require("@atlaskit/editor-prosemirror/state");
var _toolbarExperienceUtils = require("./toolbar-experience-utils");
var pluginKey = new _state.PluginKey('toolbarActionExperiences');
var TIMEOUT_DURATION = 1000;
var PRIMARY_TOOLBAR = 'primaryToolbar';
var ABORT_REASON = {
  USER_CANCELED: 'userCanceled',
  EDITOR_DESTROYED: 'editorDestroyed'
};
var getToolbarActionExperiencesPlugin = exports.getToolbarActionExperiencesPlugin = function getToolbarActionExperiencesPlugin(_ref) {
  var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
  var editorView;
  var lastClickedToolbarButton;
  var getEditorDom = function getEditorDom() {
    var _editorView;
    if (((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom) instanceof HTMLElement) {
      return editorView.dom;
    }
    return null;
  };
  var getInlinePopupTarget = function getInlinePopupTarget() {
    var _lastClickedToolbarBu;
    if (!lastClickedToolbarButton) {
      return undefined;
    }
    return (_lastClickedToolbarBu = lastClickedToolbarButton.closest('[data-toolbar-component="button-group"]')) !== null && _lastClickedToolbarBu !== void 0 ? _lastClickedToolbarBu : lastClickedToolbarButton;
  };
  var observeConfigs = function observeConfigs() {
    var narrowTarget = (0, _experiences.getSelectionAncestorDOM)(editorView);
    var editorDom = getEditorDom();
    return [].concat((0, _toConsumableArray2.default)(narrowTarget ? [{
      target: narrowTarget,
      options: {
        childList: true,
        subtree: true
      }
    }] : []), (0, _toConsumableArray2.default)(editorDom ? [{
      target: editorDom,
      options: {
        childList: true
      }
    }] : []));
  };
  var createNodeInsertExperience = function createNodeInsertExperience(action) {
    return new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
      action: action,
      actionSubjectId: PRIMARY_TOOLBAR,
      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
      checks: [new _experiences.ExperienceCheckTimeout({
        durationMs: TIMEOUT_DURATION
      }), new _experiences.ExperienceCheckDomMutation({
        onDomMutation: _toolbarExperienceUtils.handleEditorNodeInsertDomMutation,
        observeConfig: observeConfigs
      })]
    });
  };
  var buildPopupMutationConfig = function buildPopupMutationConfig(popupSelector, type) {
    switch (type) {
      case 'inline':
        return {
          type: type,
          nestedElementQuery: popupSelector,
          getTarget: getInlinePopupTarget,
          subtree: true
        };
      case 'editorRoot':
        return {
          type: type,
          nestedElementQuery: popupSelector,
          getEditorDom: getEditorDom
        };
    }
  };
  var createPopupExperience = function createPopupExperience(action, popupSelector, type) {
    return new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
      action: action,
      actionSubjectId: PRIMARY_TOOLBAR,
      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
      checks: [new _experiences.ExperienceCheckTimeout({
        durationMs: TIMEOUT_DURATION
      }), new _experiences.ExperienceCheckPopupMutation(buildPopupMutationConfig(popupSelector, type))]
    });
  };
  var experienceButtonMappings = [{
    experience: createPopupExperience('insert', '[data-testid="popup-wrapper"]', 'inline'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.INSERT
  }, {
    experience: createPopupExperience('emoji', '[data-emoji-picker-container], [data-emoji-picker-container="true"], [data-testid="popup-wrapper"]', 'inline'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.EMOJI
  }, {
    experience: createPopupExperience('media', '[data-testid="popup-wrapper"]', 'inline'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MEDIA
  }, {
    experience: createPopupExperience('mention', '[data-testid="popup-wrapper"], [data-type-ahead="typeaheadDecoration"]', 'editorRoot'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MENTION
  }, {
    experience: createNodeInsertExperience('table'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE
  }, {
    experience: createPopupExperience('tableSelector', '[data-testid="popup-wrapper"]', 'inline'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
  }, {
    experience: createNodeInsertExperience('layout'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.LAYOUT
  }, {
    experience: createPopupExperience('image', '[data-testid="popup-wrapper"]', 'inline'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.IMAGE
  }, {
    experience: createNodeInsertExperience('action'),
    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TASK_LIST
  }];
  var handleToolbarButtonClick = function handleToolbarButtonClick(target) {
    for (var _i = 0, _experienceButtonMapp = experienceButtonMappings; _i < _experienceButtonMapp.length; _i++) {
      var _experienceButtonMapp2 = _experienceButtonMapp[_i],
        experience = _experienceButtonMapp2.experience,
        buttonTestId = _experienceButtonMapp2.buttonTestId;
      if ((0, _toolbarExperienceUtils.isToolbarButtonClick)(target, buttonTestId)) {
        // Store the clicked button so inline popup checks can find its button-group
        lastClickedToolbarButton = target;
        experience.start({
          forceRestart: true
        });
        return;
      }
    }
  };
  var abortAllExperiences = function abortAllExperiences(reason) {
    for (var _i2 = 0, _experienceButtonMapp3 = experienceButtonMappings; _i2 < _experienceButtonMapp3.length; _i2++) {
      var experience = _experienceButtonMapp3[_i2].experience;
      experience.abort({
        reason: reason
      });
    }
  };
  var doc = (0, _browserApis.getDocument)();
  if (!doc) {
    return new _safePlugin.SafePlugin({
      key: pluginKey
    });
  }
  var unbindClickListener = (0, _bindEventListener.bind)(doc, {
    type: 'click',
    listener: function listener(event) {
      var target = event.target;
      if (target instanceof HTMLElement) {
        handleToolbarButtonClick(target);
      }
    },
    options: {
      capture: true
    }
  });
  var unbindKeydownListener = (0, _bindEventListener.bind)(doc, {
    type: 'keydown',
    listener: function listener(event) {
      if (event.key === 'Escape') {
        abortAllExperiences(ABORT_REASON.USER_CANCELED);
      }
    },
    options: {
      capture: true
    }
  });
  return new _safePlugin.SafePlugin({
    key: pluginKey,
    view: function view(_view) {
      editorView = _view;
      return {
        destroy: function destroy() {
          abortAllExperiences(ABORT_REASON.EDITOR_DESTROYED);
          editorView = undefined;
          unbindClickListener();
          unbindKeydownListener();
        }
      };
    }
  });
};