@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
+exports.isCaptionNode = isCaptionNode;
+exports.isVideo = exports.isMediaSingle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _insert = require("@atlaskit/editor-common/insert");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaCommon = require("../utils/media-common");
+var _isImage = require("./is-image");
+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 getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
+  return {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      inputMethod: inputMethod,
+      fileExtension: fileExtension,
+      type: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  };
+};
+function shouldAddParagraph(state) {
+  return (0, _selection.atTheBeginningOfBlock)(state) && !(0, _utils.checkNodeDown)(state.selection, state.doc, _utils.isEmptyParagraph);
+}
+function insertNodesWithOptionalParagraph(nodes) {
+  var analyticsAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var editorAnalyticsAPI = arguments.length > 2 ? arguments[2] : undefined;
+  return function (state, dispatch) {
+    var tr = state.tr,
+      schema = state.schema;
+    var paragraph = schema.nodes.paragraph;
+    var inputMethod = analyticsAttributes.inputMethod,
+      fileExtension = analyticsAttributes.fileExtension;
+    var openEnd = 0;
+    if (shouldAddParagraph(state)) {
+      nodes.push(paragraph.create());
+      openEnd = 1;
+    }
+    tr.replaceSelection(new _model.Slice(_model.Fragment.from(nodes), 0, openEnd));
+    if (inputMethod) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+var isMediaSingle = exports.isMediaSingle = function isMediaSingle(schema, fileMimeType) {
+  return !!schema.nodes.mediaSingle && (0, _isImage.isImage)(fileMimeType);
+};
+var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _state$schema$nodes = state.schema.nodes,
+    mediaSingle = _state$schema$nodes.mediaSingle,
+    media = _state$schema$nodes.media;
+  if (!mediaSingle) {
+    return false;
+  }
+
+  // if not an image type media node
+  if (node.type !== media || !(0, _isImage.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
+    return false;
+  }
+  var mediaSingleNode = mediaSingle.create({}, node);
+  var nodes = [mediaSingleNode];
+  var analyticsAttributes = {
+    inputMethod: inputMethod,
+    fileExtension: node.attrs.__fileMimeType
+  };
+  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
+};
+var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) {
+  var _state$selection$$fro;
+  if (collection === undefined) {
+    return false;
+  }
+  var state = view.state,
+    dispatch = view.dispatch;
+  var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  var parentNodeType = state.selection.$from.parent.type;
+
+  // add undefined as fallback as we don't want media single width to have upper limit as 0
+  // if widthPluginState.width is 0, default 760 will be used
+  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
+  var fileExtension;
+  if (mediaState.fileName) {
+    var extensionIdx = mediaState.fileName.lastIndexOf('.');
+    fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
+  }
+  // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+  if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)({
+    parentNodeType: parentNodeType,
+    grandParentNodeType: grandParentNodeType,
+    content: node
+  })) {
+    insertNodesWithOptionalParagraph([node], {
+      fileExtension: fileExtension,
+      inputMethod: inputMethod
+    }, editorAnalyticsAPI)(state, dispatch);
+  } else {
+    var tr = null;
+    if (newInsertionBehaviour) {
+      tr = (0, _insert.safeInsert)(node, state.selection.from)(state.tr);
+    }
+    if (!tr) {
+      var content = shouldAddParagraph(view.state) ? _model.Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
+      tr = (0, _utils2.safeInsert)(content, undefined, true)(state.tr);
+    }
+    if (inputMethod) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
+    }
+    dispatch(tr);
+  }
+  return true;
+};
+var createMediaSingleNode = exports.createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
+  return function (mediaState) {
+    var id = mediaState.id,
+      dimensions = mediaState.dimensions,
+      contextId = mediaState.contextId,
+      _mediaState$scaleFact = mediaState.scaleFactor,
+      scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact;
+    var _ref = dimensions || {
+        height: undefined,
+        width: undefined
+      },
+      width = _ref.width,
+      height = _ref.height;
+    var _schema$nodes = schema.nodes,
+      media = _schema$nodes.media,
+      mediaSingle = _schema$nodes.mediaSingle;
+    var scaledWidth = width && Math.round(width / scaleFactor);
+    var mediaNode = media.create({
+      id: id,
+      type: 'file',
+      collection: collection,
+      contextId: contextId,
+      width: scaledWidth,
+      height: height && Math.round(height / scaleFactor)
+    });
+    var mediaSingleAttrs = alignLeftOnInsert ? {
+      layout: 'align-start'
+    } : {};
+    var extendedMediaSingleAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
+      width: (0, _mediaSingle.getMediaSingleInitialWidth)(scaledWidth, maxWidth, minWidth),
+      // TODO: change to use enum
+      widthType: 'pixel'
+    }) : mediaSingleAttrs;
+    (0, _mediaCommon.copyOptionalAttrsFromMediaState)(mediaState, mediaNode);
+    return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
+  };
+};
+function isCaptionNode(editorView) {
+  var $from = editorView.state.selection.$from;
+  var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));
+  if (immediateWrapperParentNode && immediateWrapperParentNode.type.name === 'caption') {
+    return true;
+  }
+  return false;
+}
+var isVideo = exports.isVideo = function isVideo(fileType) {
+  return !!fileType && fileType.includes('video');
+};

package/dist/es2019/commands/captions.js

@@ -0,0 +1,47 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+export const selectCaptionFromMediaSinglePos = (mediaSingleNodePos, mediaSingleNode) => (state, dispatch) => {
+  // node should have two children, media and caption
+  if (mediaSingleNode.childCount !== 2) {
+    return false;
+  }
+  if (dispatch) {
+    const media = mediaSingleNode.child(0);
+    const caption = mediaSingleNode.child(1);
+    let tr = state.tr;
+    tr = setSelectionAtEndOfCaption(tr, mediaSingleNodePos, media.nodeSize, caption.nodeSize);
+    tr.setMeta('scrollIntoView', false);
+    dispatch(tr);
+  }
+  return true;
+};
+export const insertAndSelectCaptionFromMediaSinglePos = editorAnalyticsAPI => (mediaSingleNodePos, mediaSingleNode) => (state, dispatch) => {
+  if (typeof mediaSingleNodePos !== 'number') {
+    return false;
+  }
+  let tr = state.tr;
+
+  // node should have one child, media
+  if (mediaSingleNode.childCount !== 1) {
+    return false;
+  }
+  if (dispatch) {
+    const schema = state.schema;
+    const media = mediaSingleNode.child(0);
+    const 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 ? 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;
+};
+const setSelectionAtEndOfCaption = (tr, mediaSingleNodePos, mediaNodeSize, captionNodeSize) => {
+  return setTextSelection(mediaSingleNodePos + mediaNodeSize + captionNodeSize)(tr);
+};

package/dist/es2019/commands/helpers.js

@@ -0,0 +1,113 @@
+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 const findMediaSingleNode = (mediaPluginState, id) => {
+  const {
+    mediaNodes
+  } = mediaPluginState;
+
+  // Array#find... no IE support
+  return mediaNodes.reduce((memo, nodeWithPos) => {
+    if (memo) {
+      return memo;
+    }
+    const {
+      node
+    } = nodeWithPos;
+    if (node.attrs.id === id) {
+      return nodeWithPos;
+    }
+    return memo;
+  }, null);
+};
+export const findAllMediaSingleNodes = (mediaPluginState, id) => {
+  const {
+    mediaNodes
+  } = mediaPluginState;
+  return mediaNodes.filter(nodeWithHandler => nodeWithHandler.node.attrs.id === id);
+};
+export const isMediaNode = (pos, state) => {
+  const node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
+export const updateAllMediaSingleNodesAttrs = (id, attrs) => (state, dispatch) => {
+  const mediaPluginState = mediaPluginKey.getState(state);
+  if (!mediaPluginState) {
+    return false;
+  }
+  let mediaNodes;
+  mediaNodes = findAllMediaSingleNodes(mediaPluginState, id);
+  const validMediaNodePositions = mediaNodes.reduce((acc, {
+    getPos
+  }) => {
+    const 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;
+  }
+  const tr = state.tr;
+  validMediaNodePositions.forEach(pos => tr.step(new SetAttrsStep(pos, attrs)));
+  tr.setMeta('addToHistory', false);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+export const updateCurrentMediaNodeAttrs = (attrs, mediaNode) => (state, dispatch) => {
+  const pos = mediaNode.getPos();
+  if (typeof pos !== 'number' || isNaN(pos) || typeof pos === 'number' && !isMediaNode(pos, state)) {
+    return false;
+  }
+  const tr = state.tr;
+  tr.step(new SetAttrsStep(pos, attrs));
+  tr.setMeta('addToHistory', false);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+export const updateMediaSingleNodeAttrs = (id, attrs) => (state, dispatch) => {
+  const mediaPluginState = mediaPluginKey.getState(state);
+  if (!mediaPluginState) {
+    return false;
+  }
+  const mediaNodeWithPos = findMediaSingleNode(mediaPluginState, id);
+  if (!mediaNodeWithPos) {
+    return false;
+  }
+  const tr = state.tr;
+  const 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 const replaceExternalMedia = (pos, attrs) => (state, dispatch) => {
+  const tr = state.tr;
+  const node = tr.doc.nodeAt(pos);
+  if (!node || node.type.name !== 'media') {
+    return false;
+  }
+  tr.step(new SetAttrsStep(pos, {
+    type: 'file',
+    url: null,
+    ...attrs
+  })).setMeta('addToHistory', false);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};

package/dist/es2019/commands/index.js

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

package/dist/es2019/commands/linking.js

@@ -0,0 +1,169 @@
+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 const showLinkingToolbar = createMediaLinkingCommand(state => {
+  const mediaLinkingState = getMediaLinkingState(state);
+  if (mediaLinkingState && mediaLinkingState.mediaPos !== null) {
+    const mediaSingle = state.doc.nodeAt(mediaLinkingState.mediaPos);
+    if (mediaSingle) {
+      return {
+        type: MediaLinkingActionsTypes.showToolbar
+      };
+    }
+  }
+  return false;
+});
+export const showLinkingToolbarWithMediaTypeCheck = (editorState, dispatch, editorView) => {
+  if (dispatch && editorView) {
+    const mediaNode = currentMediaNode(editorState);
+    if (!mediaNode) {
+      return false;
+    }
+    const {
+      mediaClientConfig
+    } = getMediaPluginState(editorState);
+    if (!mediaClientConfig) {
+      return false;
+    }
+    checkMediaType(mediaNode, mediaClientConfig).then(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;
+};
+const hideLinkingToolbarCommand = createMediaLinkingCommand({
+  type: MediaLinkingActionsTypes.hideToolbar
+});
+export const 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) {
+  const {
+    link: linkType
+  } = state.schema.marks;
+  const mediaLinkingState = getMediaLinkingState(state);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return;
+  }
+  const $pos = state.doc.resolve(mediaLinkingState.mediaPos);
+  const node = state.doc.nodeAt($pos.pos);
+  if (!node) {
+    return;
+  }
+  const hasLink = linkType.isInSet(node.marks);
+  if (!hasLink) {
+    return;
+  }
+  const link = node.marks.find(mark => mark.type === linkType); // Already check exist
+  const url = link.attrs.href;
+  return url;
+}
+function toggleLinkMark(tr, state, {
+  forceRemove = false,
+  url
+}) {
+  const mediaLinkingState = getMediaLinkingState(state);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return tr;
+  }
+  const $pos = state.doc.resolve(mediaLinkingState.mediaPos);
+  const node = state.doc.nodeAt($pos.pos);
+  if (!node) {
+    return tr;
+  }
+  const linkMark = state.schema.marks.link;
+  const {
+    media
+  } = state.schema.nodes;
+  const toggleBlockLinkMark = createToggleBlockMarkOnRange(linkMark, (prevAttrs, node) => {
+    // Only add mark to media
+    if (!node || node.type !== media) {
+      return; //No op
+    }
+
+    if (forceRemove) {
+      return false;
+    }
+    const href = normalizeUrl(url);
+    if (prevAttrs && prevAttrs.href === href) {
+      return; //No op
+    }
+
+    if (href.trim() === '') {
+      return false; // remove
+    }
+
+    return {
+      ...prevAttrs,
+      href: href
+    };
+  }, [media]);
+  toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  return tr;
+}
+const fireAnalyticForMediaLink = (tr, action, attributes = undefined, editorAnalyticsAPI) => {
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubject: ACTION_SUBJECT.MEDIA,
+    actionSubjectId: ACTION_SUBJECT_ID.LINK,
+    attributes
+  })(tr);
+  return tr;
+};
+export const unlink = editorAnalyticsAPI => createMediaLinkingCommand({
+  type: MediaLinkingActionsTypes.unlink
+}, (tr, state) => {
+  const transaction = toggleLinkMark(tr, state, {
+    forceRemove: true
+  });
+  return fireAnalyticForMediaLink(transaction, ACTION.DELETED, undefined, editorAnalyticsAPI);
+});
+const getAction = (newUrl, state) => {
+  const currentUrl = getCurrentUrl(state);
+  if (!currentUrl) {
+    return ACTION.ADDED;
+  } else if (newUrl !== currentUrl) {
+    return ACTION.EDITED;
+  }
+  return undefined;
+};
+export const setUrlToMedia = (url, inputMethod, editorAnalyticsAPI) => createMediaLinkingCommand({
+  type: MediaLinkingActionsTypes.setUrl,
+  payload: normalizeUrl(url)
+}, (tr, state) => {
+  const action = getAction(url, state);
+  if (!action) {
+    return tr;
+  }
+  try {
+    const toggleLinkMarkResult = toggleLinkMark(tr, state, {
+      url: url
+    });
+    fireAnalyticForMediaLink(tr, action, action === ACTION.ADDED ? {
+      inputMethod
+    } : undefined, editorAnalyticsAPI);
+    return toggleLinkMarkResult;
+  } catch (e) {
+    fireAnalyticForMediaLink(tr, ACTION.ERRORED, {
+      action: action
+    }, editorAnalyticsAPI);
+    throw e;
+  }
+});

package/dist/es2019/index.js

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

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

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

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

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