@atlaskit/editor-common/dist/cjs/card/MediaAndEmbedsToolbar/index.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.wrappingIcons = exports.layoutToMessages = exports.default = exports.buildLayoutDropdown = exports.alignmentIcons = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/core/align-image-right"));
var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
var _alignTextLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-text-left"));
var _alignTextRight = _interopRequireDefault(require("@atlaskit/icon/core/align-text-right"));
var _contentWidthWide = _interopRequireDefault(require("@atlaskit/icon/core/content-width-wide"));
var _contentWrapLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-left"));
var _contentWrapRight = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-right"));
var _expandHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/expand-horizontal"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _analytics = require("../../analytics");
var _coreUtils = require("../../core-utils");
var _keymaps = require("../../keymaps");
var _messages = _interopRequireWildcard(require("../../messages"));
var _ui = require("../../ui");
var _utils2 = require("../../utils");
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; }
// Workaround as we don't want to import this package into `editor-common`
// We'll get type errors if this gets out of sync with `editor-plugin-width`.

var alignmentIcons = exports.alignmentIcons = [{
  id: 'editor.media.alignLeft',
  value: 'align-start',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignImageLeft.default, {
      color: "currentColor",
      spacing: "spacious",
      label: "media-toolbar-align-left-icon"
    });
  }
}, {
  id: 'editor.media.alignCenter',
  value: 'center',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignImageCenter.default, {
      color: "currentColor",
      spacing: "spacious",
      label: "media-toolbar-align-center-icon"
    });
  }
}, {
  id: 'editor.media.alignRight',
  value: 'align-end',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignImageRight.default, {
      color: "currentColor",
      spacing: "spacious",
      label: "media-toolbar-align-right-icon"
    });
  }
}];
var alignmentIconsControls = [{
  id: 'editor.media.alignLeft',
  value: 'align-start',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    });
  },
  keyboardShortcut: _keymaps.alignLeft
}, {
  id: 'editor.media.alignCenter',
  value: 'center',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    });
  },
  keyboardShortcut: _keymaps.alignCenter
}, {
  id: 'editor.media.alignRight',
  value: 'align-end',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    });
  },
  keyboardShortcut: _keymaps.alignRight
}];
var wrappingIcons = exports.wrappingIcons = [{
  id: 'editor.media.wrapLeft',
  value: 'wrap-left',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_contentWrapLeft.default, {
      color: "currentColor",
      spacing: "spacious",
      label: "media-toolbar-wrap-left-icon"
    });
  }
}, {
  id: 'editor.media.wrapRight',
  value: 'wrap-right',
  icon: function icon() {
    return /*#__PURE__*/_react.default.createElement(_contentWrapRight.default, {
      color: "currentColor",
      spacing: "spacious",
      label: "media-toolbar-wrap-right-icon"
    });
  }
}];
var breakoutIcons = [{
  value: 'wide',
  icon: _contentWidthWide.default
}, {
  value: 'full-width',
  icon: _expandHorizontal.default
}];

// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var layoutToMessages = exports.layoutToMessages = {
  'wrap-left': _messages.mediaAndEmbedToolbarMessages.wrapLeft,
  center: _messages.default.alignImageCenter,
  'wrap-right': _messages.mediaAndEmbedToolbarMessages.wrapRight,
  wide: _messages.default.layoutWide,
  'full-width': _messages.default.layoutFullWidth,
  'align-end': _messages.default.alignImageRight,
  'align-start': _messages.default.alignImageLeft
};
var getNodeWidth = function getNodeWidth(node, schema) {
  var embedCard = schema.nodes.embedCard;
  if (node.type === embedCard) {
    return node.attrs.originalWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH;
  }
  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
};
var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing) {
  return function (state, dispatch) {
    var _ref = state.selection,
      node = _ref.node;
    var previousLayoutType = node.attrs.layout;
    var mediaSingle = state.schema.nodes.mediaSingle;
    if (!dispatch) {
      return false;
    }
    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
    if (!node || node.type !== nodeType || !widthPluginState) {
      return false;
    }
    var nodeWidth = getNodeWidth(node, state.schema);
    var newAttrs = allowPixelResizing ? // with extended experience, change alignment does not change media single width
    _objectSpread(_objectSpread({}, node.attrs), {}, {
      layout: layout
    }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
    var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
    tr.setMeta('scrollIntoView', false);
    // when image captions are enabled, the wrong node gets selected after
    // setNodeMarkup is called
    tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
    var paragraph = tr.doc.type.schema.nodes.paragraph;

    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && ((0, _coreUtils.insideTable)(state) || (0, _utils2.isInLayoutColumn)(state))) {
      var emptyParaghraph = paragraph.createAndFill();
      if (emptyParaghraph) {
        tr.insert(state.selection.to, emptyParaghraph);
      }
    }
    analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
      eventType: _analytics.EVENT_TYPE.TRACK,
      action: _analytics.ACTION.SELECTED,
      actionSubject: _analytics.ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
      actionSubjectId: _analytics.ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
      attributes: {
        previousLayoutType: previousLayoutType,
        currentLayoutType: layout
      }
    })(tr);
    dispatch(tr);
    return true;
  };
};
var getToolbarLayout = function getToolbarLayout(layout, allowPixelResizing) {
  if (_utils2.nonWrappedLayouts.includes(layout) && allowPixelResizing) {
    return 'center';
  }
  return layout;
};
var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled, allowPixelResizing) {
  return icons.map(function (toolbarItem) {
    var id = toolbarItem.id,
      value = toolbarItem.value;
    return _objectSpread({
      id: id,
      type: 'button',
      icon: toolbarItem.icon,
      title: intl.formatMessage(layoutToMessages[value]),
      selected: getToolbarLayout(layout, allowPixelResizing) === value,
      onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing)
    }, isChangingLayoutDisabled && {
      disabled: value !== 'center'
    });
  });
};
var mapIconsToDropdownOptions = function mapIconsToDropdownOptions(_ref2) {
  var icons = _ref2.icons,
    layout = _ref2.layout,
    intl = _ref2.intl,
    nodeType = _ref2.nodeType,
    widthPluginDependencyApi = _ref2.widthPluginDependencyApi,
    analyticsApi = _ref2.analyticsApi,
    isChangingLayoutDisabled = _ref2.isChangingLayoutDisabled,
    allowPixelResizing = _ref2.allowPixelResizing;
  return icons.map(function (layoutOption) {
    var id = layoutOption.id,
      value = layoutOption.value;
    return _objectSpread(_objectSpread({
      id: id,
      icon: /*#__PURE__*/_react.default.createElement(layoutOption.icon, {
        label: ""
      }),
      title: intl.formatMessage(layoutToMessages[value]),
      selected: getToolbarLayout(layout, allowPixelResizing) === value,
      onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing)
    }, layoutOption.keyboardShortcut && {
      elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(layoutOption.keyboardShortcut))
    }), isChangingLayoutDisabled && {
      disabled: value !== 'center'
    });
  });
};
var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref3, allowResizingInTables) {
  var nodes = _ref3.nodes;
  return (0, _utils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('editor_enable_image_alignment_in_expand', 'isEnabled', true) ? [] : [nodes.expand, nodes.nestedExpand]), (0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
};
var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
  var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
  var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
  var allowPixelResizing = arguments.length > 10 ? arguments[10] : undefined;
  var selection = state.selection;
  if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
    return [];
  }
  var layout = selection.node.attrs.layout;
  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled, allowPixelResizing) : [];
  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled, allowPixelResizing) : [];
  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing) : [];
  var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
  return items;
};
var buildLayoutDropdown = exports.buildLayoutDropdown = function buildLayoutDropdown(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
  var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
  var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
  var allowPixelResizing = arguments.length > 10 ? arguments[10] : undefined;
  var selection = state.selection;
  if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
    return [];
  }
  var layout = selection.node.attrs.layout;
  var icons = [];
  if (allowAlignment) {
    icons.push.apply(icons, alignmentIconsControls);
  }
  if (allowWrapping) {
    icons.push.apply(icons, wrappingIcons);
  }
  if (!allowResizing) {
    icons.push.apply(icons, breakoutIcons);
  }
  if (icons.length === 0) {
    return [];
  }
  var selectedLayout = getSelectedLayoutIcon(icons, selection.node) || icons[0];
  if (!selectedLayout) {
    return [];
  }
  var alignmentDropdownOptions = mapIconsToDropdownOptions({
    icons: icons,
    layout: layout,
    intl: intl,
    nodeType: nodeType,
    widthPluginDependencyApi: widthPluginDependencyApi,
    analyticsApi: analyticsApi,
    isChangingLayoutDisabled: isChangingLayoutDisabled,
    allowPixelResizing: allowPixelResizing
  });
  return [{
    type: 'dropdown',
    title: intl.formatMessage(layoutToMessages[selectedLayout.value]),
    icon: selectedLayout.icon,
    options: alignmentDropdownOptions,
    shouldFitContainer: false,
    testId: "".concat(nodeType.name, "-layout-dropdown-trigger-button")
  }];
};
var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
  var selectedLayout = selectedNode.attrs.layout;
  return layoutIcons.find(function (icon) {
    return icon.value === (_utils2.nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
  });
};
var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
  return allowAlignment && allowWrapping ? [{
    type: 'separator'
  }] : [];
};
var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
  return !allowResizing && (allowAlignment || allowWrapping) ? [{
    type: 'separator'
  }] : [];
};
var _default = exports.default = buildLayoutButtons;