@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/cjs/utils/current-media-node.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.currentMediaNodeWithPos = exports.currentMediaNodeBorderMark = exports.currentMediaNode = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var currentMediaNodeWithPos = exports.currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
+  var doc = editorState.doc,
+    selection = editorState.selection,
+    schema = editorState.schema;
+  if (!doc || !selection || !(selection instanceof _state.NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
+    return;
+  }
+  var pos = selection.$anchor.pos + 1;
+  var node = doc.nodeAt(pos);
+  if (!node || node.type !== schema.nodes.media) {
+    return;
+  }
+  return {
+    node: node,
+    pos: pos
+  };
+};
+var currentMediaNode = exports.currentMediaNode = function currentMediaNode(editorState) {
+  var _currentMediaNodeWith;
+  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+};
+var currentMediaNodeBorderMark = exports.currentMediaNodeBorderMark = function currentMediaNodeBorderMark(editorState) {
+  var node = currentMediaNode(editorState);
+  if (!node) {
+    return;
+  }
+  var borderMark = node.marks.find(function (m) {
+    return m.type.name === 'border';
+  });
+  if (!borderMark) {
+    return;
+  }
+  return borderMark.attrs;
+};

package/dist/cjs/utils/is-image.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isImage = void 0;
+var isImage = exports.isImage = function isImage(fileType) {
+  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+};

package/dist/cjs/utils/media-common.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitMediaGroup = exports.removeMediaNode = exports.posOfPrecedingMediaGroup = exports.posOfParentMediaGroup = exports.posOfMediaGroupNearby = exports.isSelectionNonMediaBlockNode = exports.isSelectionMediaSingleNode = exports.isMediaBlobUrlFromAttrs = exports.isInsidePotentialEmptyParagraph = exports.getMediaNodeFromSelection = exports.copyOptionalAttrsFromMediaState = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _mediaClient = require("@atlaskit/media-client");
+var isTemporary = function isTemporary(id) {
+  return id.indexOf('temporary:') === 0;
+};
+var isMediaBlobUrlFromAttrs = exports.isMediaBlobUrlFromAttrs = function isMediaBlobUrlFromAttrs(attrs) {
+  return !!(attrs && attrs.type === 'external' && (0, _mediaClient.isMediaBlobUrl)(attrs.url));
+};
+var posOfMediaGroupNearby = exports.posOfMediaGroupNearby = function posOfMediaGroupNearby(state) {
+  return posOfParentMediaGroup(state) || posOfFollowingMediaGroup(state) || posOfPrecedingMediaGroup(state) || posOfMediaGroupNextToGapCursor(state);
+};
+var isSelectionNonMediaBlockNode = exports.isSelectionNonMediaBlockNode = function isSelectionNonMediaBlockNode(state) {
+  var _ref = state.selection,
+    node = _ref.node;
+  return node && node.type !== state.schema.nodes.media && node.isBlock;
+};
+var isSelectionMediaSingleNode = exports.isSelectionMediaSingleNode = function isSelectionMediaSingleNode(state) {
+  var _ref2 = state.selection,
+    node = _ref2.node;
+  return node && node.type === state.schema.nodes.mediaSingle;
+};
+var posOfPrecedingMediaGroup = exports.posOfPrecedingMediaGroup = function posOfPrecedingMediaGroup(state) {
+  if (!(0, _selection.atTheBeginningOfBlock)(state)) {
+    return;
+  }
+  return posOfMediaGroupAbove(state, state.selection.$from);
+};
+var posOfMediaGroupNextToGapCursor = function posOfMediaGroupNextToGapCursor(state) {
+  var selection = state.selection;
+  if (selection instanceof _selection.GapCursorSelection) {
+    var $pos = state.selection.$from;
+    var mediaGroupType = state.schema.nodes.mediaGroup;
+    return posOfImmediatePrecedingMediaGroup($pos, mediaGroupType) || posOfImmediateFollowingMediaGroup($pos, mediaGroupType);
+  }
+};
+var posOfImmediatePrecedingMediaGroup = function posOfImmediatePrecedingMediaGroup($pos, mediaGroupType) {
+  if ($pos.nodeBefore && $pos.nodeBefore.type === mediaGroupType) {
+    return $pos.pos - $pos.nodeBefore.nodeSize + 1;
+  }
+};
+var posOfImmediateFollowingMediaGroup = function posOfImmediateFollowingMediaGroup($pos, mediaGroupType) {
+  if ($pos.nodeAfter && $pos.nodeAfter.type === mediaGroupType) {
+    return $pos.pos + 1;
+  }
+};
+var posOfFollowingMediaGroup = function posOfFollowingMediaGroup(state) {
+  if (!(0, _selection.atTheEndOfBlock)(state)) {
+    return;
+  }
+  return posOfMediaGroupBelow(state, state.selection.$to);
+};
+var posOfMediaGroupAbove = function posOfMediaGroupAbove(state, $pos) {
+  var adjacentPos;
+  var adjacentNode;
+  if (isSelectionNonMediaBlockNode(state)) {
+    adjacentPos = $pos.pos;
+    adjacentNode = $pos.nodeBefore;
+  } else {
+    adjacentPos = (0, _selection.startPositionOfParent)($pos) - 1;
+    adjacentNode = state.doc.resolve(adjacentPos).nodeBefore;
+  }
+  if (adjacentNode && adjacentNode.type === state.schema.nodes.mediaGroup) {
+    return adjacentPos - adjacentNode.nodeSize + 1;
+  }
+  return;
+};
+
+/**
+ * Determine whether the cursor is inside empty paragraph
+ * or the selection is the entire paragraph
+ */
+var isInsidePotentialEmptyParagraph = exports.isInsidePotentialEmptyParagraph = function isInsidePotentialEmptyParagraph(state) {
+  var $from = state.selection.$from;
+  return $from.parent.type === state.schema.nodes.paragraph && (0, _selection.atTheBeginningOfBlock)(state) && (0, _selection.atTheEndOfBlock)(state);
+};
+var posOfMediaGroupBelow = function posOfMediaGroupBelow(state, $pos) {
+  var prepend = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var adjacentPos;
+  var adjacentNode;
+  if (isSelectionNonMediaBlockNode(state)) {
+    adjacentPos = $pos.pos;
+    adjacentNode = $pos.nodeAfter;
+  } else {
+    adjacentPos = (0, _selection.endPositionOfParent)($pos);
+    adjacentNode = state.doc.nodeAt(adjacentPos);
+  }
+  if (adjacentNode && adjacentNode.type === state.schema.nodes.mediaGroup) {
+    return prepend ? adjacentPos + 1 : adjacentPos + adjacentNode.nodeSize - 1;
+  }
+  return;
+};
+var posOfParentMediaGroup = exports.posOfParentMediaGroup = function posOfParentMediaGroup(state, $pos) {
+  var prepend = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var $from = state.selection.$from;
+  $pos = $pos || $from;
+  if ($pos.parent.type === state.schema.nodes.mediaGroup) {
+    return prepend ? (0, _selection.startPositionOfParent)($pos) : (0, _selection.endPositionOfParent)($pos) - 1;
+  }
+  return;
+};
+var removeMediaNode = exports.removeMediaNode = function removeMediaNode(view, node, getPos) {
+  var id = node.attrs.id;
+  var state = view.state;
+  var tr = state.tr,
+    selection = state.selection,
+    doc = state.doc;
+  var currentMediaNodePos = getPos();
+  if (typeof currentMediaNodePos !== 'number') {
+    return;
+  }
+  tr.deleteRange(currentMediaNodePos, currentMediaNodePos + node.nodeSize);
+  if (isTemporary(id)) {
+    tr.setMeta('addToHistory', false);
+  }
+  var $currentMediaNodePos = doc.resolve(currentMediaNodePos);
+  var nodeBefore = $currentMediaNodePos.nodeBefore,
+    parent = $currentMediaNodePos.parent;
+  var isLastMediaNode = $currentMediaNodePos.index() === parent.childCount - 1;
+
+  // If deleting a selected media node, we need to tell where the cursor to go next.
+  // Prosemirror didn't gave us the behaviour of moving left if the media node is not the last one.
+  // So we handle it ourselves.
+  if (selection.from === currentMediaNodePos && !isLastMediaNode && !(0, _selection.atTheBeginningOfDoc)(state) && nodeBefore && nodeBefore.type.name === 'media') {
+    var _nodeBefore = (0, _utils2.findPositionOfNodeBefore)(tr.selection);
+    if (_nodeBefore) {
+      tr.setSelection(_state.NodeSelection.create(tr.doc, _nodeBefore));
+    }
+  }
+  view.dispatch(tr);
+};
+var splitMediaGroup = exports.splitMediaGroup = function splitMediaGroup(view) {
+  var selection = view.state.selection;
+
+  // if selection is not a media node, do nothing.
+  if (!(selection instanceof _state.NodeSelection) || selection.node.type !== view.state.schema.nodes.media) {
+    return false;
+  }
+  (0, _commands.deleteSelection)(view.state, view.dispatch);
+  if (selection.$to.nodeAfter) {
+    (0, _commands.splitBlock)(view.state, view.dispatch);
+    (0, _utils.createParagraphNear)(false)(view.state, view.dispatch);
+  } else {
+    (0, _utils.createNewParagraphBelow)(view.state, view.dispatch);
+  }
+  return true;
+};
+var isOptionalAttr = function isOptionalAttr(attr) {
+  return attr.length > 1 && attr[0] === '_' && attr[1] === '_';
+};
+var copyOptionalAttrsFromMediaState = exports.copyOptionalAttrsFromMediaState = function copyOptionalAttrsFromMediaState(mediaState, node) {
+  Object.keys(node.attrs).filter(isOptionalAttr).forEach(function (key) {
+    var mediaStateKey = key.substring(2);
+    var attrValue = mediaState[mediaStateKey];
+    if (attrValue !== undefined) {
+      // @ts-ignore - [unblock prosemirror bump] assigning to readonly prop
+      node.attrs[key] = attrValue;
+    }
+  });
+};
+var getMediaNodeFromSelection = exports.getMediaNodeFromSelection = function getMediaNodeFromSelection(state) {
+  if (!isSelectionMediaSingleNode(state)) {
+    return null;
+  }
+  var tr = state.tr;
+  var pos = tr.selection.from + 1;
+  var mediaNode = tr.doc.nodeAt(pos);
+  if (mediaNode && mediaNode.type === state.schema.nodes.media) {
+    return mediaNode;
+  }
+  return null;
+};

package/dist/cjs/utils/media-files.js

@@ -0,0 +1,297 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertMediaInlineNode = exports.insertMediaGroupNode = exports.getPosInList = exports.canInsertMediaInline = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _mediaCommon = require("./media-common");
+var canInsertMediaInline = exports.canInsertMediaInline = function canInsertMediaInline(state) {
+  var node = state.schema.nodes.mediaInline.create({});
+  return (0, _utils2.canInsert)(state.selection.$to, _model.Fragment.from(node));
+};
+var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaState, inputMethod) {
+  var media = '';
+  if (mediaState.length === 1) {
+    media = mediaState[0].fileMimeType || 'unknown';
+  } else if (mediaState.length > 1) {
+    media = 'multiple';
+  }
+  return {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
+      inputMethod: inputMethod,
+      fileExtension: media
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  };
+};
+var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(mediaState, inputMethod) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
+      inputMethod: inputMethod,
+      fileExtension: media
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  };
+};
+
+/**
+ * Check if current editor selections is a media group or not.
+ * @param state Editor state
+ */
+function isSelectionMediaGroup(state) {
+  var schema = state.schema;
+  var selectionParent = state.selection.$anchor.node();
+  return selectionParent && selectionParent.type === schema.nodes.mediaGroup;
+}
+
+/**
+ * Insert a paragraph after if reach the end of doc
+ * and there is no media group in the front or selection is a non media block node
+ * @param node Node at insertion point
+ * @param state Editor state
+ */
+function shouldAppendParagraph(state, node) {
+  var media = state.schema.nodes.media;
+  var wasMediaNode = node && node.type === media;
+  return ((0, _utils.insideTableCell)(state) || (0, _utils.isInListItem)(state) || (0, _utils.isInLayoutColumn)(state) || (0, _selection.atTheEndOfDoc)(state) && (!(0, _mediaCommon.posOfPrecedingMediaGroup)(state) || (0, _mediaCommon.isSelectionNonMediaBlockNode)(state))) && !wasMediaNode;
+}
+
+/**
+ * Create a new media inline to insert the new media.
+ * @param view Editor view
+ * @param mediaState Media file to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+var insertMediaInlineNode = exports.insertMediaInlineNode = function insertMediaInlineNode(editorAnalyticsAPI) {
+  return function (view, mediaState, collection, inputMethod) {
+    var state = view.state,
+      dispatch = view.dispatch;
+    var schema = state.schema,
+      tr = state.tr;
+    var mediaInline = schema.nodes.mediaInline;
+
+    // Do nothing if no media found
+    if (!mediaInline || !mediaState || collection === undefined) {
+      return false;
+    }
+    var id = mediaState.id;
+    var mediaInlineNode = mediaInline.create({
+      id: id,
+      collection: collection
+    });
+    var space = state.schema.text(' ');
+    var pos = state.selection.$to.pos;
+
+    // If the selection is inside an empty list item set pos inside paragraph
+    if ((0, _utils.isInListItem)(state) && (0, _mediaCommon.isInsidePotentialEmptyParagraph)(state)) {
+      pos = pos + 1;
+    }
+    var content = _model.Fragment.from([mediaInlineNode, space]);
+
+    // Delete the selection if a selection is made
+    var deleteRange = findDeleteRange(state);
+    if (!deleteRange) {
+      tr.insert(pos, content);
+    } else {
+      tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+    }
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaInlineAnalytics(mediaState, inputMethod))(tr);
+    dispatch(tr);
+    return true;
+  };
+};
+
+/**
+ * Insert a media into an existing media group
+ * or create a new media group to insert the new media.
+ * @param view Editor view
+ * @param mediaStates Media files to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+var insertMediaGroupNode = exports.insertMediaGroupNode = function insertMediaGroupNode(editorAnalyticsAPI) {
+  return function (view, mediaStates, collection, inputMethod) {
+    var state = view.state,
+      dispatch = view.dispatch;
+    var tr = state.tr,
+      schema = state.schema;
+    var _schema$nodes = schema.nodes,
+      media = _schema$nodes.media,
+      paragraph = _schema$nodes.paragraph;
+
+    // Do nothing if no media found
+    if (!media || !mediaStates.length) {
+      return;
+    }
+    var mediaNodes = createMediaFileNodes(mediaStates, collection, media);
+    var mediaInsertPos = findMediaInsertPos(state);
+    var resolvedInsertPos = tr.doc.resolve(mediaInsertPos);
+    var parent = resolvedInsertPos.parent;
+    var nodeAtInsertionPoint = tr.doc.nodeAt(mediaInsertPos);
+    var shouldSplit = !isSelectionMediaGroup(state) && (0, _utils.isSupportedInParent)(state, _model.Fragment.from(state.schema.nodes.mediaGroup.createChecked({}, mediaNodes)));
+    var withParagraph = shouldAppendParagraph(state, nodeAtInsertionPoint);
+    var content = parent.type === schema.nodes.mediaGroup ? mediaNodes // If parent is a mediaGroup do not wrap items again.
+    : [schema.nodes.mediaGroup.createChecked({}, mediaNodes)];
+    if (shouldSplit) {
+      content = withParagraph ? content.concat(paragraph.create()) : content;
+      // delete the selection or empty paragraph
+      var deleteRange = findDeleteRange(state);
+      if (!deleteRange) {
+        tr.insert(mediaInsertPos, content);
+      } else if (mediaInsertPos <= deleteRange.start) {
+        tr.deleteRange(deleteRange.start, deleteRange.end).insert(mediaInsertPos, content);
+      } else {
+        tr.insert(mediaInsertPos, content).deleteRange(deleteRange.start, deleteRange.end);
+      }
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaGroupAnalytics(mediaStates, inputMethod))(tr);
+      dispatch(tr);
+      setSelectionAfterMediaInsertion(view);
+      return;
+    }
+
+    // Don't append new paragraph when adding media to a existing mediaGroup
+    if (withParagraph && parent.type !== schema.nodes.mediaGroup) {
+      content.push(paragraph.create());
+    }
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaGroupAnalytics(mediaStates, inputMethod))(tr);
+    dispatch((0, _utils2.safeInsert)(_model.Fragment.fromArray(content), mediaInsertPos)(tr));
+  };
+};
+var createMediaFileNodes = function createMediaFileNodes(mediaStates, collection, media) {
+  var nodes = mediaStates.map(function (mediaState) {
+    var id = mediaState.id;
+    var node = media.create({
+      id: id,
+      type: 'file',
+      collection: collection
+    });
+    (0, _mediaCommon.copyOptionalAttrsFromMediaState)(mediaState, node);
+    return node;
+  });
+  return nodes;
+};
+
+/**
+ * Find root list node if exist from current selection
+ * @param state Editor state
+ */
+var findRootListNode = function findRootListNode(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    bulletList = _state$schema$nodes.bulletList,
+    orderedList = _state$schema$nodes.orderedList;
+  return (0, _utils.findFarthestParentNode)(function (node) {
+    return node.type === bulletList || node.type === orderedList;
+  })(state.selection.$from);
+};
+
+/**
+ * Return position of media to be inserted, if it is inside a list
+ * @param content Content to be inserted
+ * @param state Editor State
+ */
+var getPosInList = exports.getPosInList = function getPosInList(state) {
+  var _state$schema$nodes2 = state.schema.nodes,
+    mediaGroup = _state$schema$nodes2.mediaGroup,
+    listItem = _state$schema$nodes2.listItem;
+
+  // 1. Check if I am inside a list.
+  if ((0, _utils2.hasParentNode)(function (node) {
+    return node.type === listItem;
+  })(state.selection)) {
+    // 2. Get end position of root list
+    var rootListNode = findRootListNode(state);
+    if (rootListNode) {
+      var pos = rootListNode.pos + rootListNode.node.nodeSize;
+      // 3. Fint the first location inside the media group
+      var nextNode = state.doc.nodeAt(pos);
+      if (nextNode && nextNode.type === mediaGroup) {
+        return pos + 1;
+      }
+      return pos;
+    }
+  }
+  return;
+};
+
+/**
+ * Find insertion point,
+ * If it is in a List it will return position to the next block,
+ * If there are any media group close it will return this position
+ * Otherwise, It will return the respective block given selection.
+ * @param content Content to be inserted
+ * @param state Editor state
+ */
+var findMediaInsertPos = function findMediaInsertPos(state) {
+  var _state$selection = state.selection,
+    $from = _state$selection.$from,
+    $to = _state$selection.$to;
+
+  // Check if selection is inside a list.
+  var posInList = getPosInList(state);
+  if (posInList) {
+    // If I have a position in lists, I should return, otherwise I am not inside a list
+    return posInList;
+  }
+  var nearbyMediaGroupPos = (0, _mediaCommon.posOfMediaGroupNearby)(state);
+  if (nearbyMediaGroupPos && (!(0, _mediaCommon.isSelectionNonMediaBlockNode)(state) || $from.pos < nearbyMediaGroupPos && $to.pos < nearbyMediaGroupPos)) {
+    return nearbyMediaGroupPos;
+  }
+  if ((0, _mediaCommon.isSelectionNonMediaBlockNode)(state)) {
+    return $to.pos;
+  }
+  if ((0, _selection.atTheEndOfBlock)(state)) {
+    return $to.pos + 1;
+  }
+  if ((0, _selection.atTheBeginningOfBlock)(state)) {
+    return $from.pos - 1;
+  }
+  return $to.pos;
+};
+var findDeleteRange = function findDeleteRange(state) {
+  var _state$selection2 = state.selection,
+    $from = _state$selection2.$from,
+    $to = _state$selection2.$to;
+  if ((0, _mediaCommon.posOfParentMediaGroup)(state)) {
+    return;
+  }
+  if (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _mediaCommon.posOfMediaGroupNearby)(state)) {
+    return range($from.pos, $to.pos);
+  }
+  return range((0, _selection.startPositionOfParent)($from) - 1, (0, _selection.endPositionOfParent)($to));
+};
+var range = function range(start) {
+  var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : start;
+  return {
+    start: start,
+    end: end
+  };
+};
+var setSelectionAfterMediaInsertion = function setSelectionAfterMediaInsertion(view) {
+  var state = view.state;
+  var doc = state.doc;
+  var mediaPos = (0, _mediaCommon.posOfMediaGroupNearby)(state);
+  if (!mediaPos) {
+    return;
+  }
+  var $mediaPos = doc.resolve(mediaPos);
+  var endOfMediaGroup = (0, _selection.endPositionOfParent)($mediaPos);
+  if (endOfMediaGroup + 1 >= doc.nodeSize - 1) {
+    // if nothing after the media group, fallback to select the newest uploaded media item
+    (0, _utils.setNodeSelection)(view, mediaPos);
+  } else {
+    (0, _utils.setTextSelection)(view, endOfMediaGroup + 1);
+  }
+};