@atlaskit/editor-plugin-media/dist/cjs/ui/toolbar/mediaInline.js

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.generateMediaInlineFloatingToolbar = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _state2 = require("@atlaskit/editor-prosemirror/state");
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
var _mediaUi = require("@atlaskit/media-ui");
var _linking = require("../../pm-plugins/commands/linking");
var _linking2 = require("../../pm-plugins/linking");
var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
var _isType = require("../../pm-plugins/utils/is-type");
var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
var _altText = require("./alt-text");
var _commands = require("./commands");
var _imageBorder = require("./imageBorder");
var _linking3 = require("./linking");
var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
var _utils = require("./utils");
var _index = require("./index");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
  var _pluginInjectionApi$a, _pluginInjectionApi$f;
  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
  var mediaInline = state.schema.nodes.mediaInline;
  var mediaType = state.selection instanceof _state2.NodeSelection && state.selection.node.attrs.type;
  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
  if (mediaPluginState.allowInlineImages && (0, _isType.isImage)(mediaType)) {
    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
  }
  var items = [];
  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
  var preview = _objectSpread({
    id: 'editor.media.viewer',
    testId: 'file-preview-toolbar-button',
    type: 'button',
    icon: areAnyNewToolbarFlagsEnabled ? _growDiagonal.default : _maximize.default,
    title: intl.formatMessage(_mediaUi.messages.preview),
    onClick: function onClick() {
      var _handleShowMediaViewe;
      return (_handleShowMediaViewe = (0, _index.handleShowMediaViewer)({
        mediaPluginState: mediaPluginState,
        api: pluginInjectionApi
      })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
    }
  }, areAnyNewToolbarFlagsEnabled && {
    supportsViewMode: true
  });
  var disableDownloadButton = (0, _utils.getIsDownloadDisabledByDataSecurityPolicy)(mediaPluginState);
  var download = _objectSpread({
    id: 'editor.media.card.download',
    type: 'button',
    icon: _download.default,
    onClick: function onClick() {
      (0, _utils.downloadMedia)(mediaPluginState);
      return true;
    },
    disabled: disableDownloadButton,
    title: intl.formatMessage(_mediaUi.messages.download)
  }, areAnyNewToolbarFlagsEnabled && {
    supportsViewMode: true
  });
  if (!areAnyNewToolbarFlagsEnabled) {
    items.push({
      id: 'editor.media.view.switcher.inline',
      type: 'button',
      icon: _imageInline.default,
      selected: true,
      disabled: false,
      focusEditoronEnter: true,
      onClick: function onClick() {
        return true;
      },
      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
      testId: 'inline-appearance',
      className: 'inline-appearance' // a11y. uses to force focus on item
    }, {
      id: 'editor.media.view.switcher.thumbnail',
      type: 'button',
      icon: _smartLinkCard.default,
      selected: false,
      disabled: false,
      focusEditoronEnter: true,
      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
      title: intl.formatMessage(_messages.cardMessages.blockTitle),
      testId: 'thumbnail-appearance',
      className: 'thumbnail-appearance' // a11y. uses to force focus on item
    }, {
      type: 'separator'
    }, preview, {
      type: 'separator'
    }, download, {
      type: 'separator'
    }, {
      type: 'copy-button',
      supportsViewMode: true,
      items: [{
        state: state,
        formatMessage: intl.formatMessage,
        nodeType: mediaInline
      }]
    }, {
      type: 'separator'
    }, {
      id: 'editor.media.delete',
      type: 'button',
      appearance: 'danger',
      focusEditoronEnter: true,
      icon: _delete.default,
      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
      title: intl.formatMessage(_messages.default.remove),
      onClick: (0, _commands.removeInlineCardWithAnalytics)(editorAnalyticsAPI),
      testId: 'media-toolbar-remove-button'
    });
  } else {
    var _options = [{
      id: 'editor.media.view.switcher.inline',
      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
      onClick: function onClick() {
        return true;
      },
      selected: true,
      icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
        label: "",
        spacing: "spacious"
      })
    }, {
      id: 'editor.media.view.switcher.thumbnail',
      title: intl.formatMessage(_messages.cardMessages.blockTitle),
      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
      icon: /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
        label: "",
        spacing: "spacious"
      })
    }];
    var switcherDropdown = {
      title: intl.formatMessage(_mediaUi.messages.fileDisplayOptions),
      id: 'media-group-inline-switcher-toolbar-item',
      testId: 'media-group-inline-switcher-dropdown',
      type: 'dropdown',
      options: _options,
      icon: function icon() {
        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
          label: "",
          spacing: "spacious"
        });
      }
    };
    items.push(switcherDropdown, {
      type: 'separator',
      fullHeight: true
    }, download, {
      type: 'separator',
      supportsViewMode: true
    }, preview, {
      type: 'separator',
      fullHeight: true
    });
  }
  return items;
};
var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
  var _pluginInjectionApi$w;
  var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
  var mediaInline = state.schema.nodes.mediaInline;
  var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
  var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
  var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
  var inlineImageItems = [];
  var isEditorControlsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
  var isViewOnly = options.isViewOnly,
    allowAltTextOnImages = options.allowAltTextOnImages,
    allowLinking = options.allowLinking,
    allowImagePreview = options.allowImagePreview;
  if ((0, _imageBorder.shouldShowImageBorder)(state)) {
    inlineImageItems.push({
      type: 'custom',
      fallback: [],
      render: function render(editorView) {
        if (!editorView) {
          return null;
        }
        var dispatch = editorView.dispatch,
          state = editorView.state;
        var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        , {
          toggleBorder: function toggleBorder() {
            var _pluginInjectionApi$a2;
            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
          }
          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
          ,
          setBorder: function setBorder(attrs) {
            var _pluginInjectionApi$a3;
            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
          },
          borderMark: borderMark,
          intl: intl
        });
      }
    });
    if (!isEditorControlsEnabled) {
      inlineImageItems.push({
        type: 'separator'
      });
    }
  }
  var download = {
    id: 'editor.media.image.download',
    type: 'button',
    icon: _download.default,
    onClick: function onClick() {
      (0, _utils.downloadMedia)(mediaPluginState, options.isViewOnly);
      return true;
    },
    title: intl.formatMessage(_mediaUi.messages.download),
    supportsViewMode: true
  };

  // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
  if (!isEditorControlsEnabled) {
    inlineImageItems.push({
      id: 'editor.media.convert.mediainline',
      type: 'button',
      title: mediaInlineImageTitle,
      icon: function icon() {
        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
          color: "currentColor",
          spacing: "spacious",
          label: mediaInlineImageTitle
        });
      },
      onClick: function onClick() {
        return true;
      },
      selected: true
    }, {
      id: 'editor.media.convert.mediasingle',
      type: 'button',
      title: mediaSingleTitle,
      icon: function icon() {
        return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
          color: "currentColor",
          spacing: "spacious",
          label: mediaSingleTitle
        });
      },
      onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
    }, {
      type: 'separator'
    }, {
      type: 'custom',
      fallback: [],
      render: function render(editorView, idx) {
        if (editorView !== null && editorView !== void 0 && editorView.state) {
          var editLink = function editLink() {
            if (editorView) {
              var _state = editorView.state,
                dispatch = editorView.dispatch;
              (0, _linking.showLinkingToolbar)(_state, dispatch);
            }
          };
          var openLink = function openLink() {
            if (editorView) {
              var _pluginInjectionApi$a4;
              var tr = editorView.state.tr,
                dispatch = editorView.dispatch;
              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
                eventType: _analytics.EVENT_TYPE.TRACK,
                action: _analytics.ACTION.VISITED,
                actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
                actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
              })(tr);
              dispatch(tr);
              return true;
            }
          };
          return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
            key: idx,
            editorState: editorView.state,
            intl: intl,
            mediaLinkingState: mediaLinkingState,
            onAddLink: editLink,
            onEditLink: editLink,
            onOpenLink: openLink,
            isInlineNode: true,
            isViewOnly: options.isViewOnly,
            areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
          });
        }
        return null;
      },
      supportsViewMode: true
    });
  } else {
    var switchFromInlineToBlock = (0, _utils.getMediaSingleAndMediaInlineSwitcherDropdown)('inline', intl, pluginInjectionApi);
    inlineImageItems.push(switchFromInlineToBlock, {
      type: 'separator',
      fullHeight: true
    });
    if (isViewOnly) {
      inlineImageItems.push(download, {
        type: 'separator',
        supportsViewMode: true
      });
    }
  }

  //Image Preview
  if (allowImagePreview) {
    inlineImageItems.push({
      id: 'editor.media.viewer',
      testId: 'file-preview-toolbar-button',
      type: 'button',
      icon: isEditorControlsEnabled ? _growDiagonal.default : _maximize.default,
      title: intl.formatMessage(_mediaUi.messages.preview),
      onClick: function onClick() {
        var _handleShowMediaViewe2;
        return (_handleShowMediaViewe2 = (0, _index.handleShowMediaViewer)({
          mediaPluginState: mediaPluginState,
          api: pluginInjectionApi
        })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
      },
      supportsViewMode: true
    }, {
      type: 'separator',
      supportsViewMode: true
    });
  }

  // open link
  if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state) && mediaLinkingState && mediaLinkingState.editable && isEditorControlsEnabled) {
    inlineImageItems.push((0, _linking3.getOpenLinkToolbarButtonOption)(intl, mediaLinkingState, pluginInjectionApi), {
      type: 'separator',
      supportsViewMode: true
    });
  }
  if (isViewOnly && !isEditorControlsEnabled) {
    inlineImageItems.push(download, {
      type: 'separator',
      supportsViewMode: true
    });
  }
  if (allowAltTextOnImages && !isEditorControlsEnabled) {
    var _pluginInjectionApi$a5;
    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
      type: 'separator'
    });
  }
  if (isViewOnly || !isEditorControlsEnabled) {
    inlineImageItems.push({
      type: 'copy-button',
      supportsViewMode: true,
      items: [{
        state: state,
        formatMessage: intl.formatMessage,
        nodeType: mediaInline
      }]
    });
  }
  if (!isEditorControlsEnabled) {
    inlineImageItems.push({
      type: 'separator'
    });
    inlineImageItems.push({
      id: 'editor.media.delete',
      type: 'button',
      appearance: 'danger',
      focusEditoronEnter: true,
      icon: _delete.default,
      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
      title: intl.formatMessage(_messages.default.remove),
      onClick: (0, _commands.removeInlineCardWithAnalytics)(editorAnalyticsAPI),
      testId: 'media-toolbar-remove-button'
    });
  }
  return inlineImageItems;
};