@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -0,0 +1,384 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import uuidV4 from 'uuid/v4';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getAttrsFromUrl, getMediaClient, isImageRepresentationReady, isMediaBlobUrl } from '@atlaskit/media-client';
+import { replaceExternalMedia, updateAllMediaSingleNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaSingleNodeAttrs } from '../commands/helpers';
+export class MediaNodeUpdater {
+  constructor(props) {
+    // Updates the node with contextId if it doesn't have one already
+    // TODO [MS-2258]: remove updateContextId in order to only use updateMediaSingleFileAttrs
+    _defineProperty(this, "updateContextId", async () => {
+      const attrs = this.getAttrs();
+      if (!attrs || attrs.type !== 'file') {
+        return;
+      }
+      const {
+        id
+      } = attrs;
+      const objectId = await this.getObjectId();
+      updateAllMediaSingleNodesAttrs(id, {
+        __contextId: objectId
+      })(this.props.view.state, this.props.view.dispatch);
+    });
+    _defineProperty(this, "updateNodeContextId", async getPos => {
+      const attrs = this.getAttrs();
+      if ((attrs === null || attrs === void 0 ? void 0 : attrs.type) !== 'file') {
+        return;
+      }
+      const objectId = await this.getObjectId();
+      updateCurrentMediaNodeAttrs({
+        __contextId: objectId
+      }, {
+        node: this.props.node,
+        getPos
+      })(this.props.view.state, this.props.view.dispatch);
+    });
+    _defineProperty(this, "hasFileAttributesDefined", attrs => {
+      return attrs && attrs.type === 'file' && attrs.__fileName && attrs.__fileMimeType && attrs.__fileSize && attrs.__contextId;
+    });
+    _defineProperty(this, "getNewFileAttrsForNode", async () => {
+      const attrs = this.getAttrs();
+      const mediaProvider = await this.props.mediaProvider;
+      if (!mediaProvider || !mediaProvider.uploadParams || !attrs || attrs.type !== 'file' || this.hasFileAttributesDefined(attrs)) {
+        return;
+      }
+      const mediaClientConfig = mediaProvider.viewMediaClientConfig;
+      const mediaClient = getMediaClient(mediaClientConfig);
+      let fileState;
+      const {
+        id,
+        collection: collectionName
+      } = attrs;
+      try {
+        fileState = await mediaClient.file.getCurrentState(id, {
+          collectionName
+        });
+        if (fileState.status === 'error') {
+          return;
+        }
+      } catch (err) {
+        return;
+      }
+      const contextId = this.getNodeContextId() || (await this.getObjectId());
+      const {
+        name,
+        mimeType,
+        size
+      } = fileState;
+      const newAttrs = {
+        __fileName: name,
+        __fileMimeType: mimeType,
+        __fileSize: size,
+        __contextId: contextId
+      };
+      if (!hasPrivateAttrsChanged(attrs, newAttrs)) {
+        return;
+      }
+      return newAttrs;
+    });
+    _defineProperty(this, "updateMediaSingleFileAttrs", async () => {
+      const newAttrs = await this.getNewFileAttrsForNode();
+      const {
+        id
+      } = this.getAttrs();
+      if (id && newAttrs) {
+        updateAllMediaSingleNodesAttrs(id, newAttrs)(this.props.view.state, this.props.view.dispatch);
+      }
+    });
+    _defineProperty(this, "updateNodeAttrs", async getPos => {
+      const newAttrs = await this.getNewFileAttrsForNode();
+      if (newAttrs) {
+        updateCurrentMediaNodeAttrs(newAttrs, {
+          node: this.props.node,
+          getPos
+        })(this.props.view.state, this.props.view.dispatch);
+      }
+    });
+    _defineProperty(this, "getAttrs", () => {
+      const {
+        attrs
+      } = this.props.node;
+      if (attrs) {
+        return attrs;
+      }
+      return undefined;
+    });
+    _defineProperty(this, "getObjectId", async () => {
+      const contextIdentifierProvider = await this.props.contextIdentifierProvider;
+      return (contextIdentifierProvider === null || contextIdentifierProvider === void 0 ? void 0 : contextIdentifierProvider.objectId) || null;
+    });
+    _defineProperty(this, "uploadExternalMedia", async getPos => {
+      const {
+        node
+      } = this.props;
+      const mediaProvider = await this.props.mediaProvider;
+      if (node && mediaProvider) {
+        const uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+        if (!uploadMediaClientConfig || !node.attrs.url) {
+          return;
+        }
+        const mediaClient = getMediaClient(uploadMediaClientConfig);
+        const collection = mediaProvider.uploadParams && mediaProvider.uploadParams.collection;
+        try {
+          const uploader = await mediaClient.file.uploadExternal(node.attrs.url, collection);
+          const {
+            uploadableFileUpfrontIds,
+            dimensions
+          } = uploader;
+          const pos = getPos();
+          if (typeof pos !== 'number') {
+            return;
+          }
+          replaceExternalMedia(pos + 1, {
+            id: uploadableFileUpfrontIds.id,
+            collection,
+            height: dimensions.height,
+            width: dimensions.width,
+            occurrenceKey: uploadableFileUpfrontIds.occurrenceKey
+          })(this.props.view.state, this.props.view.dispatch);
+        } catch (e) {
+          //keep it as external media
+          if (this.props.dispatchAnalyticsEvent) {
+            this.props.dispatchAnalyticsEvent({
+              action: ACTION.UPLOAD_EXTERNAL_FAIL,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              eventType: EVENT_TYPE.OPERATIONAL
+            });
+          }
+        }
+      }
+    });
+    _defineProperty(this, "getNodeContextId", () => {
+      const attrs = this.getAttrs();
+      if (!attrs || attrs.type !== 'file') {
+        return null;
+      }
+      return attrs.__contextId || null;
+    });
+    _defineProperty(this, "updateDimensions", dimensions => {
+      updateAllMediaSingleNodesAttrs(dimensions.id, {
+        height: dimensions.height,
+        width: dimensions.width
+      })(this.props.view.state, this.props.view.dispatch);
+    });
+    _defineProperty(this, "hasDifferentContextId", async () => {
+      const nodeContextId = this.getNodeContextId();
+      const currentContextId = await this.getObjectId();
+      if (nodeContextId && currentContextId && nodeContextId !== currentContextId) {
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(this, "isNodeFromDifferentCollection", async () => {
+      const mediaProvider = await this.props.mediaProvider;
+      if (!mediaProvider || !mediaProvider.uploadParams) {
+        return false;
+      }
+      const currentCollectionName = mediaProvider.uploadParams.collection;
+      const attrs = this.getAttrs();
+      if (!attrs || attrs.type !== 'file') {
+        return false;
+      }
+      const {
+        collection: nodeCollection,
+        __contextId
+      } = attrs;
+      const contextId = __contextId || (await this.getObjectId());
+      if (contextId && currentCollectionName !== nodeCollection) {
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(this, "copyNodeFromBlobUrl", async getPos => {
+      const attrs = this.getAttrs();
+      if (!attrs || attrs.type !== 'external') {
+        return;
+      }
+      const {
+        url
+      } = attrs;
+      const mediaAttrs = getAttrsFromUrl(url);
+      if (!mediaAttrs) {
+        return;
+      }
+      const mediaProvider = await this.props.mediaProvider;
+      if (!mediaProvider || !mediaProvider.uploadParams) {
+        return;
+      }
+      const currentCollectionName = mediaProvider.uploadParams.collection;
+      const {
+        contextId,
+        id,
+        collection,
+        height,
+        width,
+        mimeType,
+        name,
+        size
+      } = mediaAttrs;
+      const uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+      if (!uploadMediaClientConfig || !uploadMediaClientConfig.getAuthFromContext) {
+        return;
+      }
+      const mediaClient = getMediaClient(uploadMediaClientConfig);
+      const auth = await uploadMediaClientConfig.getAuthFromContext(contextId);
+      const source = {
+        id,
+        collection,
+        authProvider: () => Promise.resolve(auth)
+      };
+      const destination = {
+        collection: currentCollectionName,
+        authProvider: uploadMediaClientConfig.authProvider,
+        occurrenceKey: uuidV4()
+      };
+      const mediaFile = await mediaClient.file.copyFile(source, destination);
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      replaceExternalMedia(pos + 1, {
+        id: mediaFile.id,
+        collection: currentCollectionName,
+        height,
+        width,
+        __fileName: name,
+        __fileMimeType: mimeType,
+        __fileSize: size
+      })(this.props.view.state, this.props.view.dispatch);
+    });
+    // Copies the pasted node into the current collection using a getPos handler
+    _defineProperty(this, "copyNodeFromPos", async (getPos, traceContext) => {
+      const attrs = this.getAttrs();
+      if ((attrs === null || attrs === void 0 ? void 0 : attrs.type) !== 'file') {
+        return;
+      }
+      const copiedAttrs = await this.copyFile(attrs.id, attrs.collection, traceContext);
+      if (!copiedAttrs) {
+        return;
+      }
+      updateCurrentMediaNodeAttrs(copiedAttrs, {
+        node: this.props.node,
+        getPos
+      })(this.props.view.state, this.props.view.dispatch);
+    });
+    // Copies the pasted node into the current collection
+    _defineProperty(this, "copyNode", async traceContext => {
+      const attrs = this.getAttrs();
+      const {
+        view
+      } = this.props;
+      if ((attrs === null || attrs === void 0 ? void 0 : attrs.type) !== 'file') {
+        return;
+      }
+      const copiedAttrs = await this.copyFile(attrs.id, attrs.collection, traceContext);
+      if (!copiedAttrs) {
+        return;
+      }
+      updateMediaSingleNodeAttrs(attrs.id, copiedAttrs)(view.state, view.dispatch);
+    });
+    _defineProperty(this, "copyFile", async (id, collection, traceContext) => {
+      const mediaProvider = await this.props.mediaProvider;
+      if (!(mediaProvider !== null && mediaProvider !== void 0 && mediaProvider.uploadParams)) {
+        return;
+      }
+      const nodeContextId = this.getNodeContextId();
+      const uploadMediaClientConfig = mediaProvider.uploadMediaClientConfig;
+      if (!(uploadMediaClientConfig !== null && uploadMediaClientConfig !== void 0 && uploadMediaClientConfig.getAuthFromContext) || !nodeContextId) {
+        return;
+      }
+      const mediaClient = getMediaClient(uploadMediaClientConfig);
+      const auth = await uploadMediaClientConfig.getAuthFromContext(nodeContextId);
+      const objectId = await this.getObjectId();
+      const source = {
+        id,
+        collection,
+        authProvider: () => Promise.resolve(auth)
+      };
+      const currentCollectionName = mediaProvider.uploadParams.collection;
+      const destination = {
+        collection: currentCollectionName,
+        authProvider: uploadMediaClientConfig.authProvider,
+        occurrenceKey: uuidV4()
+      };
+      const mediaFile = await mediaClient.file.copyFile(source, destination, undefined, traceContext);
+      return {
+        id: mediaFile.id,
+        collection: currentCollectionName,
+        __contextId: objectId
+      };
+    });
+    this.props = props;
+  }
+  isMediaBlobUrl() {
+    const attrs = this.getAttrs();
+    return !!(attrs && attrs.type === 'external' && isMediaBlobUrl(attrs.url));
+  }
+  async getRemoteDimensions() {
+    const mediaProvider = await this.props.mediaProvider;
+    const {
+      mediaOptions
+    } = this.props;
+    const attrs = this.getAttrs();
+    if (!mediaProvider || !attrs) {
+      return false;
+    }
+    const {
+      height,
+      width
+    } = attrs;
+    if (attrs.type === 'external' || !attrs.id) {
+      return false;
+    }
+    const {
+      id,
+      collection
+    } = attrs;
+    if (height && width) {
+      return false;
+    }
+
+    // can't fetch remote dimensions on mobile, so we'll default them
+    if (mediaOptions && !mediaOptions.allowRemoteDimensionsFetch) {
+      return {
+        id,
+        height: DEFAULT_IMAGE_HEIGHT,
+        width: DEFAULT_IMAGE_WIDTH
+      };
+    }
+    const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+    const mediaClient = getMediaClient(viewMediaClientConfig);
+    const currentState = await mediaClient.file.getCurrentState(id, {
+      collectionName: collection
+    });
+    if (!isImageRepresentationReady(currentState)) {
+      return false;
+    }
+    const imageMetadata = await mediaClient.getImageMetadata(id, {
+      collection
+    });
+    if (!imageMetadata || !imageMetadata.original) {
+      return false;
+    }
+    return {
+      id,
+      height: imageMetadata.original.height || DEFAULT_IMAGE_HEIGHT,
+      width: imageMetadata.original.width || DEFAULT_IMAGE_WIDTH
+    };
+  }
+  async handleExternalMedia(getPos) {
+    if (this.isMediaBlobUrl()) {
+      try {
+        await this.copyNodeFromBlobUrl(getPos);
+      } catch (e) {
+        await this.uploadExternalMedia(getPos);
+      }
+    } else {
+      await this.uploadExternalMedia(getPos);
+    }
+  }
+}
+const hasPrivateAttrsChanged = (currentAttrs, newAttrs) => {
+  return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
+import MediaNode from './media';
+const MediaNodeWithProviders = ({
+  pluginInjectionApi,
+  innerComponent
+}) => {
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return innerComponent({
+    width: widthState
+  });
+};
+function isMediaDecorationSpec(decoration) {
+  return decoration.spec.type !== undefined && decoration.spec.selected !== undefined;
+}
+class MediaNodeView extends SelectionBasedNodeView {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isSelected", false);
+    _defineProperty(this, "renderMediaNodeWithState", (mediaProvider, contextIdentifierProvider) => {
+      return ({
+        width: editorWidth
+      }) => {
+        const getPos = this.getPos;
+        const {
+          mediaOptions
+        } = this.reactComponentProps;
+        const attrs = this.getAttrs();
+        const url = attrs.type === 'external' ? attrs.url : '';
+        let {
+          width,
+          height
+        } = attrs;
+        if (this.isMediaBlobUrl()) {
+          const urlAttrs = getAttrsFromUrl(url);
+          if (urlAttrs) {
+            const {
+              width: urlWidth,
+              height: urlHeight
+            } = urlAttrs;
+            width = width || urlWidth;
+            height = height || urlHeight;
+          }
+        }
+        width = width || DEFAULT_IMAGE_WIDTH;
+        height = height || DEFAULT_IMAGE_HEIGHT;
+        const maxDimensions = {
+          width: `${editorWidth.width}px`,
+          height: `${height / width * editorWidth.width}px`
+        };
+        const originalDimensions = {
+          width,
+          height
+        };
+        return /*#__PURE__*/React.createElement(MediaNode, {
+          view: this.view,
+          node: this.node,
+          getPos: getPos,
+          selected: this.nodeInsideSelection(),
+          originalDimensions: originalDimensions,
+          maxDimensions: maxDimensions,
+          url: url,
+          mediaProvider: mediaProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          mediaOptions: mediaOptions
+        });
+      };
+    });
+    _defineProperty(this, "renderMediaNodeWithProviders", ({
+      mediaProvider,
+      contextIdentifierProvider
+    }) => {
+      const {
+        pluginInjectionApi
+      } = this.reactComponentProps;
+      return /*#__PURE__*/React.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+      });
+    });
+  }
+  createDomRef() {
+    const domRef = document.createElement('div');
+    if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+      // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+      // see also: https://github.com/ProseMirror/prosemirror/issues/884
+      domRef.contentEditable = 'true';
+    }
+    return domRef;
+  }
+  viewShouldUpdate(nextNode, decorations) {
+    const hasMediaNodeSelectedDecoration = decorations.some(decoration => isMediaDecorationSpec(decoration) && decoration.spec.type === 'media' && decoration.spec.selected);
+    if (this.isSelected !== hasMediaNodeSelectedDecoration) {
+      this.isSelected = hasMediaNodeSelectedDecoration;
+      return true;
+    }
+    if (this.node.attrs !== nextNode.attrs) {
+      return true;
+    }
+    return super.viewShouldUpdate(nextNode, decorations);
+  }
+  stopEvent(event) {
+    // Don't trap right click events on media node
+    if (['mousedown', 'contextmenu'].indexOf(event.type) !== -1) {
+      const mouseEvent = event;
+      if (mouseEvent.button === 2) {
+        return true;
+      }
+    }
+    return false;
+  }
+  getAttrs() {
+    const {
+      attrs
+    } = this.node;
+    return attrs;
+  }
+  isMediaBlobUrl() {
+    const attrs = this.getAttrs();
+    return isMediaBlobUrlFromAttrs(attrs);
+  }
+  render() {
+    const {
+      providerFactory
+    } = this.reactComponentProps;
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['mediaProvider', 'contextIdentifierProvider'],
+      providerFactory: providerFactory,
+      renderNode: this.renderMediaNodeWithProviders
+    });
+  }
+}
+export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
+  const hasIntlContext = true;
+  return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+    eventDispatcher,
+    providerFactory,
+    mediaOptions,
+    pluginInjectionApi
+  }, undefined, undefined, undefined, hasIntlContext).init();
+};