@atlaskit/editor-plugin-media-insert 6.1.3 → 6.2.0

package/dist/es2019/ui/MediaFromURLWithForm.js

@@ -0,0 +1,330 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/new';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
+import Form, { ErrorMessage, Field, FormFooter, MessageWrapper } from '@atlaskit/form';
+import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
+import { default as EditorFilePreviewIconLegacy } from '@atlaskit/icon/glyph/editor/file-preview';
+import { getMediaClient } from '@atlaskit/media-client-react';
+import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
+import SectionMessage from '@atlaskit/section-message';
+import TextField from '@atlaskit/textfield';
+import { MediaCard } from './MediaCard';
+import { useAnalyticsEvents } from './useAnalyticsEvents';
+const PreviewBoxStyles = xcss({
+  borderWidth: 'border.width',
+  borderStyle: 'dashed',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius',
+  height: '200px'
+});
+const PreviewImageStyles = xcss({
+  height: '200px'
+});
+const FormStyles = xcss({
+  flexGrow: 1
+});
+const INITIAL_PREVIEW_STATE = Object.freeze({
+  isLoading: false,
+  error: null,
+  warning: null,
+  previewInfo: null
+});
+const MAX_URL_LENGTH = 2048;
+export const isValidUrl = value => {
+  try {
+    // Check for spaces and length first to avoid the expensive URL parsing
+    // Ignored via go/ees005
+    // eslint-disable-next-line require-unicode-regexp
+    if (/\s/.test(value) || value.length > MAX_URL_LENGTH) {
+      return false;
+    }
+    new URL(value);
+  } catch (e) {
+    return false;
+  }
+  return isSafeUrl(value);
+};
+const previewStateReducer = (state, action) => {
+  switch (action.type) {
+    case 'loading':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        isLoading: true
+      };
+    case 'error':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        error: action.error
+      };
+    case 'warning':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        warning: action.warning
+      };
+    case 'success':
+      return {
+        ...INITIAL_PREVIEW_STATE,
+        previewInfo: action.payload
+      };
+    case 'reset':
+      return INITIAL_PREVIEW_STATE;
+    default:
+      return state;
+  }
+};
+export function MediaFromURLWithForm({
+  mediaProvider,
+  dispatchAnalyticsEvent,
+  closeMediaInsertPicker,
+  insertMediaSingle,
+  insertExternalMediaSingle
+}) {
+  const intl = useIntl();
+  const strings = {
+    loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
+    insert: intl.formatMessage(mediaInsertMessages.insert),
+    pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
+    cancel: intl.formatMessage(mediaInsertMessages.cancel),
+    errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
+    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
+    invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
+  };
+  const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
+  const pasteFlag = React.useRef(false);
+  const {
+    onUploadButtonClickedAnalytics,
+    onUploadCommencedAnalytics,
+    onUploadSuccessAnalytics,
+    onUploadFailureAnalytics
+  } = useAnalyticsEvents(dispatchAnalyticsEvent);
+  const uploadExternalMedia = React.useCallback(async url => {
+    onUploadButtonClickedAnalytics();
+    dispatch({
+      type: 'loading'
+    });
+    const {
+      uploadMediaClientConfig,
+      uploadParams
+    } = mediaProvider;
+    if (!uploadMediaClientConfig) {
+      return;
+    }
+    const mediaClient = getMediaClient(uploadMediaClientConfig);
+    const collection = uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.collection;
+    onUploadCommencedAnalytics('url');
+    try {
+      const {
+        uploadableFileUpfrontIds,
+        dimensions,
+        mimeType
+      } = await mediaClient.file.uploadExternal(url, collection);
+      onUploadSuccessAnalytics('url');
+      dispatch({
+        type: 'success',
+        payload: {
+          id: uploadableFileUpfrontIds.id,
+          collection,
+          dimensions,
+          occurrenceKey: uploadableFileUpfrontIds.occurrenceKey,
+          fileMimeType: mimeType
+        }
+      });
+    } catch (e) {
+      if (typeof e === 'string' && e === 'Could not download remote file') {
+        // TODO: ED-26962 - Make sure this gets good unit test coverage with the actual media plugin.
+        // This hard coded error message could be changed at any
+        // point and we need a unit test to break to stop people changing it.
+        onUploadFailureAnalytics(e, 'url');
+        dispatch({
+          type: 'warning',
+          warning: e,
+          url
+        });
+      } else if (e instanceof Error) {
+        const message = 'Image preview fetch failed';
+        onUploadFailureAnalytics(message, 'url');
+        dispatch({
+          type: 'error',
+          error: message
+        });
+      } else {
+        onUploadFailureAnalytics('Unknown error', 'url');
+        dispatch({
+          type: 'error',
+          error: 'Unknown error'
+        });
+      }
+    }
+  }, [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics]);
+  const onURLChange = React.useCallback(e => {
+    const url = e.currentTarget.value;
+    dispatch({
+      type: 'reset'
+    });
+    if (!isValidUrl(url)) {
+      return;
+    }
+    if (pasteFlag.current) {
+      pasteFlag.current = false;
+      uploadExternalMedia(url);
+    }
+  }, [uploadExternalMedia]);
+  const onPaste = React.useCallback((e, inputUrl) => {
+    // Note: this is a little weird, but the paste event will always be
+    // fired before the change event when pasting. We don't really want to
+    // duplicate logic by handling pastes separately to changes, so we're
+    // just noting paste occurred to then be handled in the onURLChange fn
+    // above. The one exception to this is where paste inputs exactly what was
+    // already in the input, in which case we want to ignore it.
+    if (e.clipboardData.getData('text') !== inputUrl) {
+      pasteFlag.current = true;
+    }
+  }, []);
+  const onInsert = React.useCallback(() => {
+    if (previewState.previewInfo) {
+      insertMediaSingle({
+        mediaState: previewState.previewInfo,
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
+  const onExternalInsert = React.useCallback(url => {
+    if (previewState.warning) {
+      insertExternalMediaSingle({
+        url,
+        alt: '',
+        inputMethod: INPUT_METHOD.MEDIA_PICKER
+      });
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
+  const onInputKeyPress = React.useCallback(event => {
+    if (event && event.key === 'Esc') {
+      if (dispatchAnalyticsEvent) {
+        const payload = {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.PICKER,
+          actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            exitMethod: INPUT_METHOD.KEYBOARD
+          }
+        };
+        dispatchAnalyticsEvent(payload);
+      }
+      closeMediaInsertPicker();
+    }
+  }, [dispatchAnalyticsEvent, closeMediaInsertPicker]);
+  const onCancel = React.useCallback(() => {
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.CANCELLED,
+        actionSubject: ACTION_SUBJECT.PICKER,
+        actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
+        eventType: EVENT_TYPE.UI
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+    closeMediaInsertPicker();
+  }, [closeMediaInsertPicker, dispatchAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: ({
+      inputUrl
+    }, form) => {
+      // This can be triggered from an enter key event on the input even when
+      // the button is disabled, so we explicitly do nothing when in loading
+      // state.
+      if (previewState.isLoading || form.getState().invalid) {
+        return;
+      }
+      if (previewState.previewInfo) {
+        return onInsert();
+      }
+      if (previewState.warning) {
+        return onExternalInsert(inputUrl);
+      }
+      return uploadExternalMedia(inputUrl);
+    }
+  }, ({
+    formProps
+  }) =>
+  /*#__PURE__*/
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  React.createElement(Box, _extends({
+    as: "form"
+  }, formProps, {
+    xcss: FormStyles
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150",
+    grow: "fill"
+  }, /*#__PURE__*/React.createElement(Field, {
+    "aria-required": true,
+    isRequired: true,
+    name: "inputUrl",
+    validate: value => value && isValidUrl(value) ? undefined : strings.invalidUrl
+  }, ({
+    fieldProps: {
+      value,
+      onChange,
+      ...rest
+    },
+    error,
+    meta
+  }) => /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150",
+    grow: "fill"
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(TextField
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , _extends({}, rest, {
+    value: value,
+    placeholder: strings.pasteLinkToUpload,
+    maxLength: MAX_URL_LENGTH,
+    onKeyPress: onInputKeyPress,
+    onPaste: event => onPaste(event, value),
+    onChange: value => {
+      onURLChange(value);
+      onChange(value);
+    }
+  })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span"
+  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
+    xcss: PreviewBoxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    isLoading: previewState.isLoading,
+    isDisabled: !!error || !meta.dirty,
+    iconBefore: () => /*#__PURE__*/React.createElement(ExpandIcon, {
+      label: "",
+      LEGACY_fallbackIcon: EditorFilePreviewIconLegacy
+    })
+  }, strings.loadPreview)))), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
+    alignInline: "center",
+    alignBlock: "center",
+    xcss: PreviewImageStyles,
+    space: "space.200"
+  }, /*#__PURE__*/React.createElement(MediaCard, {
+    attrs: previewState.previewInfo,
+    mediaProvider: mediaProvider
+  })), /*#__PURE__*/React.createElement(MessageWrapper, null, previewState.error && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "error"
+  }, strings.errorMessage), previewState.warning && /*#__PURE__*/React.createElement(SectionMessage, {
+    appearance: "warning"
+  }, strings.warning)), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onCancel
+  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary",
+    isDisabled: !previewState.previewInfo && !previewState.warning
+  }, strings.insert))))));
+}

package/dist/es2019/ui/MediaInsertPicker.js

@@ -7,12 +7,14 @@ import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, useTabPanel } from '@atlaskit/tabs';
 import { useFocusEditor } from './hooks/use-focus-editor';
 import { useUnholyAutofocus } from './hooks/use-unholy-autofocus';
 import { LocalMedia } from './LocalMedia';
 import { MediaFromURL } from './MediaFromURL';
+import { MediaFromURLWithForm } from './MediaFromURLWithForm';
 import { MediaInsertWrapper } from './MediaInsertWrapper';
 const PopupWithListeners = withOuterListeners(Popup);
 const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
@@ -150,7 +152,16 @@ export const MediaInsertPicker = ({
     },
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     insertFile: insertFile
-  })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
+  })), /*#__PURE__*/React.createElement(CustomTabPanel, null, fg('platform_editor_media_from_url_remove_form') ? /*#__PURE__*/React.createElement(MediaFromURL, {
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    closeMediaInsertPicker: () => {
+      closeMediaInsertPicker();
+      focusEditor();
+    },
+    insertMediaSingle: insertMediaSingle,
+    insertExternalMediaSingle: insertExternalMediaSingle
+  }) : /*#__PURE__*/React.createElement(MediaFromURLWithForm, {
     mediaProvider: mediaProvider,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     closeMediaInsertPicker: () => {

package/dist/esm/pm-plugins/actions.js

@@ -1,4 +1,3 @@
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './plugin-key';
 export var ACTION_OPEN_POPUP = 'OPEN_POPUP';
 export var ACTION_CLOSE_POPUP = 'CLOSE_POPUP';
@@ -12,10 +11,6 @@ var setPopupMeta = function setPopupMeta(_ref) {
   });
 };
 export var showMediaInsertPopup = function showMediaInsertPopup(tr, mountInfo) {
-  // Log exposure here but don't actually switch anything on it
-  editorExperiment('add-media-from-url', true, {
-    exposure: true
-  });
   return setPopupMeta({
     type: ACTION_OPEN_POPUP,
     mountInfo: mountInfo,

package/dist/esm/ui/MediaFromURL.js

@@ -280,11 +280,9 @@ export function MediaFromURL(_ref) {
       /*#__PURE__*/
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      React.createElement(Box, _extends({
-        as: "form"
-      }, formProps, {
+      React.createElement(Box, {
         xcss: FormStyles
-      }), /*#__PURE__*/React.createElement(Stack, {
+      }, /*#__PURE__*/React.createElement(Stack, {
         space: "space.150",
         grow: "fill"
       }, /*#__PURE__*/React.createElement(Field, {
@@ -318,6 +316,12 @@ export function MediaFromURL(_ref) {
           onChange: function onChange(value) {
             onURLChange(value);
             _onChange(value);
+          },
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              formProps.onSubmit();
+            }
           }
         })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
           as: "span"
@@ -326,7 +330,10 @@ export function MediaFromURL(_ref) {
           alignItems: "center",
           justifyContent: "center"
         }, /*#__PURE__*/React.createElement(Button, {
-          type: "submit",
+          type: "button",
+          onClick: function onClick() {
+            return formProps.onSubmit();
+          },
           isLoading: previewState.isLoading,
           isDisabled: !!error || !meta.dirty,
           iconBefore: function iconBefore() {
@@ -352,9 +359,12 @@ export function MediaFromURL(_ref) {
         appearance: "subtle",
         onClick: onCancel
       }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
-        type: "submit",
+        type: "button",
         appearance: "primary",
-        isDisabled: !previewState.previewInfo && !previewState.warning
+        isDisabled: !previewState.previewInfo && !previewState.warning,
+        onClick: function onClick() {
+          return formProps.onSubmit();
+        }
       }, strings.insert)))))
     );
   });