@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 0.3.1
+
+### Patch Changes
+
+- [#40750](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40750) [`fc19a7b9edd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc19a7b9edd) - [ED-19875] Extraction of Editor Core's Selection Plugin into independent package '@atlaskit/editor-plugin-selection'.
+- Updated dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#41187](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41187) [`c09b3a047f4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c09b3a047f4) - Extract media plugin from `@atlaskit/editor-core` to `@atlaskit/editor-plugin-media.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/cjs/commands/captions.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectCaptionFromMediaSinglePos = exports.insertAndSelectCaptionFromMediaSinglePos = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var selectCaptionFromMediaSinglePos = exports.selectCaptionFromMediaSinglePos = function selectCaptionFromMediaSinglePos(mediaSingleNodePos, mediaSingleNode) {
+  return function (state, dispatch) {
+    // node should have two children, media and caption
+    if (mediaSingleNode.childCount !== 2) {
+      return false;
+    }
+    if (dispatch) {
+      var media = mediaSingleNode.child(0);
+      var caption = mediaSingleNode.child(1);
+      var tr = state.tr;
+      tr = setSelectionAtEndOfCaption(tr, mediaSingleNodePos, media.nodeSize, caption.nodeSize);
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var insertAndSelectCaptionFromMediaSinglePos = exports.insertAndSelectCaptionFromMediaSinglePos = function insertAndSelectCaptionFromMediaSinglePos(editorAnalyticsAPI) {
+  return function (mediaSingleNodePos, mediaSingleNode) {
+    return function (state, dispatch) {
+      if (typeof mediaSingleNodePos !== 'number') {
+        return false;
+      }
+      var tr = state.tr;
+
+      // node should have one child, media
+      if (mediaSingleNode.childCount !== 1) {
+        return false;
+      }
+      if (dispatch) {
+        var schema = state.schema;
+        var media = mediaSingleNode.child(0);
+        var caption = schema.nodes.caption.create();
+        tr = state.tr.insert(mediaSingleNodePos + media.nodeSize + 1, caption);
+        tr = setSelectionAtEndOfCaption(tr, mediaSingleNodePos, media.nodeSize, caption.nodeSize);
+        tr.setMeta('scrollIntoView', false);
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.ADDED,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          actionSubject: _analytics.ACTION_SUBJECT.MEDIA_SINGLE,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.CAPTION
+        })(tr);
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+var setSelectionAtEndOfCaption = function setSelectionAtEndOfCaption(tr, mediaSingleNodePos, mediaNodeSize, captionNodeSize) {
+  return (0, _utils.setTextSelection)(mediaSingleNodePos + mediaNodeSize + captionNodeSize)(tr);
+};

package/dist/cjs/commands/helpers.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateMediaSingleNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaSingleNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaSingleNode = exports.findAllMediaSingleNodes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _steps = require("@atlaskit/adf-schema/steps");
+var _pluginKey = require("../pm-plugins/plugin-key");
+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; }
+/**
+ * Note that Media Inline is inserted like a media single node into the media plugin state.
+ * Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
+ *
+ */
+var findMediaSingleNode = exports.findMediaSingleNode = function findMediaSingleNode(mediaPluginState, id) {
+  var mediaNodes = mediaPluginState.mediaNodes;
+
+  // Array#find... no IE support
+  return mediaNodes.reduce(function (memo, nodeWithPos) {
+    if (memo) {
+      return memo;
+    }
+    var node = nodeWithPos.node;
+    if (node.attrs.id === id) {
+      return nodeWithPos;
+    }
+    return memo;
+  }, null);
+};
+var findAllMediaSingleNodes = exports.findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState, id) {
+  var mediaNodes = mediaPluginState.mediaNodes;
+  return mediaNodes.filter(function (nodeWithHandler) {
+    return nodeWithHandler.node.attrs.id === id;
+  });
+};
+var isMediaNode = exports.isMediaNode = function isMediaNode(pos, state) {
+  var node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
+var updateAllMediaSingleNodesAttrs = exports.updateAllMediaSingleNodesAttrs = function updateAllMediaSingleNodesAttrs(id, attrs) {
+  return function (state, dispatch) {
+    var mediaPluginState = _pluginKey.stateKey.getState(state);
+    if (!mediaPluginState) {
+      return false;
+    }
+    var mediaNodes;
+    mediaNodes = findAllMediaSingleNodes(mediaPluginState, id);
+    var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
+      var getPos = _ref.getPos;
+      var pos = getPos();
+      if (typeof pos !== 'number' || isNaN(pos) || typeof pos === 'number' && !isMediaNode(pos, state)) {
+        return acc;
+      }
+      acc.push(pos);
+      return acc;
+    }, []);
+    if (validMediaNodePositions.length === 0) {
+      return false;
+    }
+    var tr = state.tr;
+    validMediaNodePositions.forEach(function (pos) {
+      return tr.step(new _steps.SetAttrsStep(pos, attrs));
+    });
+    tr.setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var updateCurrentMediaNodeAttrs = exports.updateCurrentMediaNodeAttrs = function updateCurrentMediaNodeAttrs(attrs, mediaNode) {
+  return function (state, dispatch) {
+    var pos = mediaNode.getPos();
+    if (typeof pos !== 'number' || isNaN(pos) || typeof pos === 'number' && !isMediaNode(pos, state)) {
+      return false;
+    }
+    var tr = state.tr;
+    tr.step(new _steps.SetAttrsStep(pos, attrs));
+    tr.setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var updateMediaSingleNodeAttrs = exports.updateMediaSingleNodeAttrs = function updateMediaSingleNodeAttrs(id, attrs) {
+  return function (state, dispatch) {
+    var mediaPluginState = _pluginKey.stateKey.getState(state);
+    if (!mediaPluginState) {
+      return false;
+    }
+    var mediaNodeWithPos = findMediaSingleNode(mediaPluginState, id);
+    if (!mediaNodeWithPos) {
+      return false;
+    }
+    var tr = state.tr;
+    var pos = mediaNodeWithPos.getPos();
+    if (typeof pos !== 'number' || !isMediaNode(pos, state)) {
+      return false;
+    }
+    tr.step(new _steps.SetAttrsStep(pos, attrs)).setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var replaceExternalMedia = exports.replaceExternalMedia = function replaceExternalMedia(pos, attrs) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    var node = tr.doc.nodeAt(pos);
+    if (!node || node.type.name !== 'media') {
+      return false;
+    }
+    tr.step(new _steps.SetAttrsStep(pos, _objectSpread({
+      type: 'file',
+      url: null
+    }, attrs))).setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/cjs/commands/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "replaceExternalMedia", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.replaceExternalMedia;
+  }
+});
+Object.defineProperty(exports, "updateAllMediaSingleNodesAttrs", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.updateAllMediaSingleNodesAttrs;
+  }
+});
+Object.defineProperty(exports, "updateMediaSingleNodeAttrs", {
+  enumerable: true,
+  get: function get() {
+    return _helpers.updateMediaSingleNodeAttrs;
+  }
+});
+var _helpers = require("./helpers");

package/dist/cjs/commands/linking.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unlink = exports.showLinkingToolbarWithMediaTypeCheck = exports.showLinkingToolbar = exports.setUrlToMedia = exports.hideLinkingToolbar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _commands = require("@atlaskit/editor-common/commands");
+var _utils = require("@atlaskit/editor-common/utils");
+var _linking = require("../pm-plugins/linking");
+var _actions = require("../pm-plugins/linking/actions");
+var _main = require("../pm-plugins/main");
+var _checkMediaType = require("../utils/check-media-type");
+var _currentMediaNode = require("../utils/current-media-node");
+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 showLinkingToolbar = exports.showLinkingToolbar = (0, _linking.createMediaLinkingCommand)(function (state) {
+  var mediaLinkingState = (0, _linking.getMediaLinkingState)(state);
+  if (mediaLinkingState && mediaLinkingState.mediaPos !== null) {
+    var mediaSingle = state.doc.nodeAt(mediaLinkingState.mediaPos);
+    if (mediaSingle) {
+      return {
+        type: _actions.MediaLinkingActionsTypes.showToolbar
+      };
+    }
+  }
+  return false;
+});
+var showLinkingToolbarWithMediaTypeCheck = exports.showLinkingToolbarWithMediaTypeCheck = function showLinkingToolbarWithMediaTypeCheck(editorState, dispatch, editorView) {
+  if (dispatch && editorView) {
+    var mediaNode = (0, _currentMediaNode.currentMediaNode)(editorState);
+    if (!mediaNode) {
+      return false;
+    }
+    var _getMediaPluginState = (0, _main.getMediaPluginState)(editorState),
+      mediaClientConfig = _getMediaPluginState.mediaClientConfig;
+    if (!mediaClientConfig) {
+      return false;
+    }
+    (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
+      if ((mediaType === 'external' || mediaType === 'image') &&
+      // We make sure the selection and the node hasn't changed.
+      (0, _currentMediaNode.currentMediaNode)(editorView.state) === mediaNode) {
+        dispatch(editorView.state.tr.setMeta(_linking.mediaLinkingPluginKey, {
+          type: _actions.MediaLinkingActionsTypes.showToolbar
+        }));
+      }
+    });
+  }
+  return true;
+};
+var hideLinkingToolbarCommand = (0, _linking.createMediaLinkingCommand)({
+  type: _actions.MediaLinkingActionsTypes.hideToolbar
+});
+var hideLinkingToolbar = exports.hideLinkingToolbar = function hideLinkingToolbar(state, dispatch, view, focusFloatingToolbar) {
+  hideLinkingToolbarCommand(state, dispatch, view);
+
+  // restore focus on the editor so keyboard shortcuts aren't lost to the browser
+  if (view && !focusFloatingToolbar) {
+    view.focus();
+  }
+};
+function getCurrentUrl(state) {
+  var linkType = state.schema.marks.link;
+  var mediaLinkingState = (0, _linking.getMediaLinkingState)(state);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return;
+  }
+  var $pos = state.doc.resolve(mediaLinkingState.mediaPos);
+  var node = state.doc.nodeAt($pos.pos);
+  if (!node) {
+    return;
+  }
+  var hasLink = linkType.isInSet(node.marks);
+  if (!hasLink) {
+    return;
+  }
+  var link = node.marks.find(function (mark) {
+    return mark.type === linkType;
+  }); // Already check exist
+  var url = link.attrs.href;
+  return url;
+}
+function toggleLinkMark(tr, state, _ref) {
+  var _ref$forceRemove = _ref.forceRemove,
+    forceRemove = _ref$forceRemove === void 0 ? false : _ref$forceRemove,
+    url = _ref.url;
+  var mediaLinkingState = (0, _linking.getMediaLinkingState)(state);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return tr;
+  }
+  var $pos = state.doc.resolve(mediaLinkingState.mediaPos);
+  var node = state.doc.nodeAt($pos.pos);
+  if (!node) {
+    return tr;
+  }
+  var linkMark = state.schema.marks.link;
+  var media = state.schema.nodes.media;
+  var toggleBlockLinkMark = (0, _commands.createToggleBlockMarkOnRange)(linkMark, function (prevAttrs, node) {
+    // Only add mark to media
+    if (!node || node.type !== media) {
+      return; //No op
+    }
+
+    if (forceRemove) {
+      return false;
+    }
+    var href = (0, _utils.normalizeUrl)(url);
+    if (prevAttrs && prevAttrs.href === href) {
+      return; //No op
+    }
+
+    if (href.trim() === '') {
+      return false; // remove
+    }
+
+    return _objectSpread(_objectSpread({}, prevAttrs), {}, {
+      href: href
+    });
+  }, [media]);
+  toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  return tr;
+}
+var fireAnalyticForMediaLink = function fireAnalyticForMediaLink(tr, action) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  var editorAnalyticsAPI = arguments.length > 3 ? arguments[3] : undefined;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: action,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK,
+    attributes: attributes
+  })(tr);
+  return tr;
+};
+var unlink = exports.unlink = function unlink(editorAnalyticsAPI) {
+  return (0, _linking.createMediaLinkingCommand)({
+    type: _actions.MediaLinkingActionsTypes.unlink
+  }, function (tr, state) {
+    var transaction = toggleLinkMark(tr, state, {
+      forceRemove: true
+    });
+    return fireAnalyticForMediaLink(transaction, _analytics.ACTION.DELETED, undefined, editorAnalyticsAPI);
+  });
+};
+var getAction = function getAction(newUrl, state) {
+  var currentUrl = getCurrentUrl(state);
+  if (!currentUrl) {
+    return _analytics.ACTION.ADDED;
+  } else if (newUrl !== currentUrl) {
+    return _analytics.ACTION.EDITED;
+  }
+  return undefined;
+};
+var setUrlToMedia = exports.setUrlToMedia = function setUrlToMedia(url, inputMethod, editorAnalyticsAPI) {
+  return (0, _linking.createMediaLinkingCommand)({
+    type: _actions.MediaLinkingActionsTypes.setUrl,
+    payload: (0, _utils.normalizeUrl)(url)
+  }, function (tr, state) {
+    var action = getAction(url, state);
+    if (!action) {
+      return tr;
+    }
+    try {
+      var toggleLinkMarkResult = toggleLinkMark(tr, state, {
+        url: url
+      });
+      fireAnalyticForMediaLink(tr, action, action === _analytics.ACTION.ADDED ? {
+        inputMethod: inputMethod
+      } : undefined, editorAnalyticsAPI);
+      return toggleLinkMarkResult;
+    } catch (e) {
+      fireAnalyticForMediaLink(tr, _analytics.ACTION.ERRORED, {
+        action: action
+      }, editorAnalyticsAPI);
+      throw e;
+    }
+  });
+};

package/dist/cjs/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "mediaPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.mediaPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/media-plugin-options.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/next-plugin-type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});