@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

package/dist/esm/commands/captions.js

@@ -0,0 +1,53 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+export var 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;
+  };
+};
+export var 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: ACTION.ADDED,
+          eventType: EVENT_TYPE.TRACK,
+          actionSubject: ACTION_SUBJECT.MEDIA_SINGLE,
+          actionSubjectId: ACTION_SUBJECT_ID.CAPTION
+        })(tr);
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+var setSelectionAtEndOfCaption = function setSelectionAtEndOfCaption(tr, mediaSingleNodePos, mediaNodeSize, captionNodeSize) {
+  return setTextSelection(mediaSingleNodePos + mediaNodeSize + captionNodeSize)(tr);
+};

package/dist/esm/commands/helpers.js

@@ -0,0 +1,120 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
+/**
+ * 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
+ *
+ */
+export var 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);
+};
+export var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState, id) {
+  var mediaNodes = mediaPluginState.mediaNodes;
+  return mediaNodes.filter(function (nodeWithHandler) {
+    return nodeWithHandler.node.attrs.id === id;
+  });
+};
+export var isMediaNode = function isMediaNode(pos, state) {
+  var node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
+export var updateAllMediaSingleNodesAttrs = function updateAllMediaSingleNodesAttrs(id, attrs) {
+  return function (state, dispatch) {
+    var mediaPluginState = mediaPluginKey.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 SetAttrsStep(pos, attrs));
+    });
+    tr.setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var 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 SetAttrsStep(pos, attrs));
+    tr.setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var updateMediaSingleNodeAttrs = function updateMediaSingleNodeAttrs(id, attrs) {
+  return function (state, dispatch) {
+    var mediaPluginState = mediaPluginKey.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 SetAttrsStep(pos, attrs)).setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var 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 SetAttrsStep(pos, _objectSpread({
+      type: 'file',
+      url: null
+    }, attrs))).setMeta('addToHistory', false);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/esm/commands/index.js

@@ -0,0 +1 @@
+export { updateMediaSingleNodeAttrs, updateAllMediaSingleNodesAttrs, replaceExternalMedia } from './helpers';

package/dist/esm/commands/linking.js

@@ -0,0 +1,174 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { createToggleBlockMarkOnRange } from '@atlaskit/editor-common/commands';
+import { normalizeUrl } from '@atlaskit/editor-common/utils';
+import { createMediaLinkingCommand, getMediaLinkingState, mediaLinkingPluginKey } from '../pm-plugins/linking';
+import { MediaLinkingActionsTypes } from '../pm-plugins/linking/actions';
+import { getMediaPluginState } from '../pm-plugins/main';
+import { checkMediaType } from '../utils/check-media-type';
+import { currentMediaNode } from '../utils/current-media-node';
+export var showLinkingToolbar = createMediaLinkingCommand(function (state) {
+  var mediaLinkingState = getMediaLinkingState(state);
+  if (mediaLinkingState && mediaLinkingState.mediaPos !== null) {
+    var mediaSingle = state.doc.nodeAt(mediaLinkingState.mediaPos);
+    if (mediaSingle) {
+      return {
+        type: MediaLinkingActionsTypes.showToolbar
+      };
+    }
+  }
+  return false;
+});
+export var showLinkingToolbarWithMediaTypeCheck = function showLinkingToolbarWithMediaTypeCheck(editorState, dispatch, editorView) {
+  if (dispatch && editorView) {
+    var mediaNode = currentMediaNode(editorState);
+    if (!mediaNode) {
+      return false;
+    }
+    var _getMediaPluginState = getMediaPluginState(editorState),
+      mediaClientConfig = _getMediaPluginState.mediaClientConfig;
+    if (!mediaClientConfig) {
+      return false;
+    }
+    checkMediaType(mediaNode, mediaClientConfig).then(function (mediaType) {
+      if ((mediaType === 'external' || mediaType === 'image') &&
+      // We make sure the selection and the node hasn't changed.
+      currentMediaNode(editorView.state) === mediaNode) {
+        dispatch(editorView.state.tr.setMeta(mediaLinkingPluginKey, {
+          type: MediaLinkingActionsTypes.showToolbar
+        }));
+      }
+    });
+  }
+  return true;
+};
+var hideLinkingToolbarCommand = createMediaLinkingCommand({
+  type: MediaLinkingActionsTypes.hideToolbar
+});
+export var 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 = 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 = 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 = createToggleBlockMarkOnRange(linkMark, function (prevAttrs, node) {
+    // Only add mark to media
+    if (!node || node.type !== media) {
+      return; //No op
+    }
+
+    if (forceRemove) {
+      return false;
+    }
+    var href = 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: EVENT_TYPE.TRACK,
+    actionSubject: ACTION_SUBJECT.MEDIA,
+    actionSubjectId: ACTION_SUBJECT_ID.LINK,
+    attributes: attributes
+  })(tr);
+  return tr;
+};
+export var unlink = function unlink(editorAnalyticsAPI) {
+  return createMediaLinkingCommand({
+    type: MediaLinkingActionsTypes.unlink
+  }, function (tr, state) {
+    var transaction = toggleLinkMark(tr, state, {
+      forceRemove: true
+    });
+    return fireAnalyticForMediaLink(transaction, ACTION.DELETED, undefined, editorAnalyticsAPI);
+  });
+};
+var getAction = function getAction(newUrl, state) {
+  var currentUrl = getCurrentUrl(state);
+  if (!currentUrl) {
+    return ACTION.ADDED;
+  } else if (newUrl !== currentUrl) {
+    return ACTION.EDITED;
+  }
+  return undefined;
+};
+export var setUrlToMedia = function setUrlToMedia(url, inputMethod, editorAnalyticsAPI) {
+  return createMediaLinkingCommand({
+    type: MediaLinkingActionsTypes.setUrl,
+    payload: 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 === ACTION.ADDED ? {
+        inputMethod: inputMethod
+      } : undefined, editorAnalyticsAPI);
+      return toggleLinkMarkResult;
+    } catch (e) {
+      fireAnalyticForMediaLink(tr, ACTION.ERRORED, {
+        action: action
+      }, editorAnalyticsAPI);
+      throw e;
+    }
+  });
+};

package/dist/esm/index.js

@@ -1 +1 @@
-export {};
+export { mediaPlugin } from './plugin';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};