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

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.updateMediaSingleWidthTr = exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCardWithAnalytics = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _model = require("@atlaskit/editor-prosemirror/model");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _analytics2 = require("../../pm-plugins/utils/analytics");
var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
var _mediaCommon = require("../../pm-plugins/utils/media-common");
var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
var _utils2 = require("./utils");
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 DEFAULT_BORDER_COLOR = exports.DEFAULT_BORDER_COLOR = '#091e4224';
var DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_SIZE = 2;
var getNodeType = exports.getNodeType = function getNodeType(state) {
  var _state$schema$nodes = state.schema.nodes,
    mediaSingle = _state$schema$nodes.mediaSingle,
    mediaInline = _state$schema$nodes.mediaInline;
  return (0, _mediaCommon.isSelectionMediaSingleNode)(state) ? mediaSingle.name : mediaInline.name;
};
var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
  return function (state, dispatch) {
    var _findParentNodeCloses, _parent$content$first, _parent$content$lastC, _parent$content$lastC2;
    var _state$schema$nodes2 = state.schema.nodes,
      media = _state$schema$nodes2.media,
      mediaInline = _state$schema$nodes2.mediaInline,
      mediaGroup = _state$schema$nodes2.mediaGroup,
      paragraph = _state$schema$nodes2.paragraph,
      heading = _state$schema$nodes2.heading;
    var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
    if (!selectedNode) {
      return false;
    }
    var _selectedNode$attrs = selectedNode.attrs,
      id = _selectedNode$attrs.id,
      type = _selectedNode$attrs.type,
      collection = _selectedNode$attrs.collection;
    var mediaNode = media.createChecked({
      id: id,
      type: type,
      collection: collection
    });
    var group = mediaGroup.createChecked({}, mediaNode);
    var parent = (_findParentNodeCloses = (0, _utils.findParentNodeClosestToPos)(state.selection.$from, function (node) {
      return node.type === paragraph || node.type === heading;
    })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
    var tr = state.tr;
    var insertPos;
    if (!!parent && parent.content.size === 2 && ((_parent$content$first = parent.content.firstChild) === null || _parent$content$first === void 0 ? void 0 : _parent$content$first.type.name) === 'mediaInline' && ((_parent$content$lastC = parent.content.lastChild) === null || _parent$content$lastC === void 0 ? void 0 : _parent$content$lastC.type.name) === 'text' && ((_parent$content$lastC2 = parent.content.lastChild) === null || _parent$content$lastC2 === void 0 || (_parent$content$lastC2 = _parent$content$lastC2.text) === null || _parent$content$lastC2 === void 0 ? void 0 : _parent$content$lastC2.trim()) === '') {
      /// Empty paragraph or empty heading
      /// Drop the corresponding card on the current line
      insertPos = state.tr.doc.resolve(state.selection.from).start() - 1;
      if (insertPos < 0) {
        return false;
      }
      tr = tr.delete(insertPos, insertPos + parent.nodeSize);
      tr = (0, _utils.safeInsert)(group, insertPos, false)(tr);
    } else {
      /// Non-empty paragraph, non-empty heading, or other nodes (e.g., action, list)
      /// Drop the corresponding card underneath the current line
      insertPos = state.tr.doc.resolve(state.selection.from).end();
      tr = (0, _utils.removeSelectedNode)(tr);
      tr = (0, _utils.safeInsert)(group, insertPos, false)(tr);
    }
    if (dispatch) {
      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
        action: _analytics.ACTION.CHANGED_TYPE,
        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
        eventType: _analytics.EVENT_TYPE.TRACK,
        attributes: {
          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
        }
      })(tr);
      var $endOfNode = tr.doc.resolve(insertPos + 1);
      var newSelection = new _state.NodeSelection($endOfNode);
      tr.setSelection(newSelection);
      forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
      dispatch(tr);
    }
    return true;
  };
};
var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
  return function (state, dispatch) {
    var _state$schema$nodes3 = state.schema.nodes,
      media = _state$schema$nodes3.media,
      mediaInline = _state$schema$nodes3.mediaInline,
      paragraph = _state$schema$nodes3.paragraph;
    var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node;

    // @ts-ignore - [unblock prosemirror bump] redundant check comparing boolean to media
    if (!selectedNode || !selectedNode.type === media) {
      return false;
    }
    var mediaInlineNode = mediaInline.create({
      id: selectedNode.attrs.id,
      collection: selectedNode.attrs.collection
    });
    var space = state.schema.text(' ');
    var content = _model.Fragment.from([mediaInlineNode, space]);
    var node = paragraph.createChecked({}, content);
    var nodePos = state.tr.doc.resolve(state.selection.from).start();
    var tr = (0, _utils2.removeMediaGroupNode)(state);
    // Minus 1 to insert the node before the media group
    tr = (0, _utils.safeInsert)(node, nodePos - 1, false)(tr);
    if (dispatch) {
      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
        action: _analytics.ACTION.CHANGED_TYPE,
        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
        eventType: _analytics.EVENT_TYPE.TRACK,
        attributes: {
          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
        }
      })(tr);
      var newSelection = _state.NodeSelection.create(tr.doc, nodePos);
      tr.setSelection(newSelection);
      forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
      dispatch(tr);
    }
    return true;
  };
};
var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, allowPixelResizing) {
  return function (state, dispatch, view) {
    var mediaInline = state.schema.nodes.mediaInline;
    var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
    if (!selectedNode) {
      return false;
    }
    if (view) {
      return (0, _mediaSingle2.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing);
    }
    return true;
  };
};
var removeInlineCardWithAnalytics = exports.removeInlineCardWithAnalytics = function removeInlineCardWithAnalytics(editorAnalyticsAPI) {
  return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
    action: _analytics.ACTION.DELETED,
    actionSubject: _analytics.ACTION_SUBJECT.MEDIA_INLINE,
    attributes: {
      inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
    },
    eventType: _analytics.EVENT_TYPE.TRACK
  })(removeInlineCard);
};
var removeInlineCard = exports.removeInlineCard = function removeInlineCard(state, dispatch) {
  if ((0, _utils.isNodeSelection)(state.selection)) {
    if (dispatch) {
      dispatch((0, _utils.removeSelectedNode)(state.tr));
    }
    return true;
  }
  return false;
};
var toggleBorderMark = exports.toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
  return function (state, dispatch) {
    var nodeWithPos = (0, _mediaSingle.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
    if (!nodeWithPos) {
      return false;
    }
    var node = nodeWithPos.node,
      pos = nodeWithPos.pos;
    var borderMark = node.marks.find(function (m) {
      return m.type.name === 'border';
    });
    var marks = node.marks.filter(function (m) {
      return m.type.name !== 'border';
    }).concat(borderMark ? [] : state.schema.marks.border.create({
      color: DEFAULT_BORDER_COLOR,
      size: DEFAULT_BORDER_SIZE
    }));
    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
    tr.setMeta('scrollIntoView', false);
    if (state.selection instanceof _state.NodeSelection) {
      if (state.selection.$anchor.pos === state.selection.from) {
        tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
      }
    }
    if (dispatch) {
      var type = getNodeType(state);
      if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
          action: _analytics.ACTION.DELETED,
          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
          eventType: _analytics.EVENT_TYPE.TRACK,
          attributes: {
            type: type,
            previousColor: borderMark.attrs.color,
            previousSize: borderMark.attrs.size,
            mediaType: node.attrs.type
          }
        })(tr);
      } else {
        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
          action: _analytics.ACTION.ADDED,
          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
          eventType: _analytics.EVENT_TYPE.TRACK,
          attributes: {
            type: type,
            color: DEFAULT_BORDER_COLOR,
            size: DEFAULT_BORDER_SIZE,
            mediaType: node.attrs.type
          }
        })(tr);
      }
      dispatch(tr);
    }
    return true;
  };
};
var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyticsAPI) {
  return function (attrs) {
    return function (state, dispatch) {
      var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
      var nodeWithPos = (0, _mediaSingle.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
      if (!nodeWithPos) {
        return false;
      }
      var node = nodeWithPos.node,
        pos = nodeWithPos.pos;
      var borderMark = (_node$marks$find = node.marks.find(function (m) {
        return m.type.name === 'border';
      })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
      var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
      var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
      var marks = node.marks.filter(function (m) {
        return m.type.name !== 'border';
      }).concat(state.schema.marks.border.create({
        color: color,
        size: size
      }));
      var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
      tr.setMeta('scrollIntoView', false);
      if (state.selection instanceof _state.NodeSelection) {
        if (state.selection.$anchor.pos === state.selection.from) {
          tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
        }
      }
      if (dispatch) {
        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
          action: _analytics.ACTION.UPDATED,
          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
          eventType: _analytics.EVENT_TYPE.TRACK,
          attributes: {
            type: getNodeType(state),
            mediaType: node.attrs.type,
            previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
            previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
            newColor: color,
            newSize: size
          }
        })(tr);
        dispatch(tr);
      }
      return true;
    };
  };
};
var updateMediaSingleWidthTr = exports.updateMediaSingleWidthTr = function updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout) {
  var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
  if (!selectedMediaSingleNode) {
    return null;
  }
  var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
    width: width,
    widthType: 'pixel',
    layout: layout
  }));
  tr.setMeta('scrollIntoView', false);
  tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
  var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
  var parentNodeType = $pos ? $pos.parent.type.name : undefined;
  var payload = (0, _analytics2.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
    width: width,
    layout: layout,
    validation: validation,
    inputMethod: inputMethod,
    parentNode: parentNodeType
  });
  if (payload) {
    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
  }
  return tr;
};
var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
  return function (width, validation, inputMethod, layout) {
    return function (state, dispatch) {
      var tr = updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout);
      if (!tr) {
        return false;
      }
      if (dispatch) {
        dispatch(tr);
      }
      return true;
    };
  };
};
var changeMediaSingleToMediaInline = exports.changeMediaSingleToMediaInline = function changeMediaSingleToMediaInline(editorAnalyticsAPI) {
  return function (state, dispatch) {
    var selectedNodeWithPos = (0, _utils2.getSelectedMediaSingle)(state);
    var _state$schema$nodes4 = state.schema.nodes,
      mediaInline = _state$schema$nodes4.mediaInline,
      paragraph = _state$schema$nodes4.paragraph;
    if (!selectedNodeWithPos) {
      return false;
    }
    var mediaSingleNode = selectedNodeWithPos.node;
    var mediaNode = mediaSingleNode.firstChild;
    if (!mediaNode) {
      return false;
    }
    var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
      type: 'image'
    }), null, mediaNode.marks);
    var space = state.schema.text(' ');
    var content = _model.Fragment.from([mediaInlineNode, space]);
    var node = paragraph.createChecked({}, content);
    var from = state.selection.from;
    var tr = state.tr;
    tr = (0, _utils.removeSelectedNode)(tr);
    tr = (0, _utils.safeInsert)(node, from, false)(tr);
    // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
    tr.setSelection(_state.TextSelection.create(tr.doc, from + 3));
    if (dispatch) {
      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(_analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE, _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
      dispatch(tr);
    }
    return true;
  };
};