@atlaskit/editor-plugin-media-insert 2.7.3 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 2.8.0
+
+### Minor Changes
+
+- [#142802](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142802)
+  [`09c0d0a18b491`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/09c0d0a18b491) -
+  [ux] [ED-24935] [ED24921] Add URL validation and enforce max length for input field
+
 ## 2.7.3
 
 ### Patch Changes

package/dist/cjs/ui/MediaFromURL.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaFromURL = MediaFromURL;
+exports.isValidUrl = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _adfSchema = require("@atlaskit/adf-schema");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
+var _form = require("@atlaskit/form");
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _primitives = require("@atlaskit/primitives");
@@ -46,6 +50,19 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
   warning: null,
   previewInfo: null
 });
+var MAX_URL_LENGTH = 2048;
+var isValidUrl = exports.isValidUrl = function isValidUrl(value) {
+  try {
+    // Check for spaces and length first to avoid the expensive URL parsing
+    if (/\s/.test(value) || value.length > MAX_URL_LENGTH) {
+      return false;
+    }
+    new URL(value);
+  } catch (e) {
+    return false;
+  }
+  return (0, _adfSchema.isSafeUrl)(value);
+};
 var previewStateReducer = function previewStateReducer(state, action) {
   switch (action.type) {
     case 'loading':
@@ -83,16 +100,25 @@ function MediaFromURL(_ref) {
     pasteLinkToUpload: intl.formatMessage(_messages.mediaInsertMessages.pasteLinkToUpload),
     cancel: intl.formatMessage(_messages.mediaInsertMessages.cancel),
     errorMessage: intl.formatMessage(_messages.mediaInsertMessages.fromUrlErrorMessage),
-    warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning)
+    warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning),
+    invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage)
   };
   var _React$useState = _react.default.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    hasUrlError = _React$useState4[0],
+    setHasUrlError = _React$useState4[1];
   var _React$useReducer = _react.default.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
     _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
     previewState = _React$useReducer2[0],
     dispatch = _React$useReducer2[1];
+  var _React$useState5 = _react.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isInputFocused = _React$useState6[0],
+    setInputFocused = _React$useState6[1];
   var pasteFlag = _react.default.useRef(false);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
     onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -178,12 +204,32 @@ function MediaFromURL(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
+  var errorAttributes = {};
+  if (!isInputFocused) {
+    errorAttributes['aria-relevant'] = 'all';
+    errorAttributes['aria-atomic'] = 'false';
+  }
+  var onBlur = _react.default.useCallback(function () {
+    if (!isValidUrl(inputUrl)) {
+      setHasUrlError(true);
+    }
+    setInputFocused(false);
+  }, [inputUrl]);
+  var onFocus = _react.default.useCallback(function () {
+    setInputFocused(true);
+  }, []);
   var onURLChange = _react.default.useCallback(function (e) {
     var url = e.target.value;
     setUrl(url);
     dispatch({
       type: 'reset'
     });
+    if (!isValidUrl(url)) {
+      setHasUrlError(true);
+      return;
+    } else {
+      setHasUrlError(false);
+    }
     if (pasteFlag.current === true) {
       pasteFlag.current = false;
       uploadExternalMedia(url);
@@ -193,7 +239,7 @@ function MediaFromURL(_ref) {
     // 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 occured to then be handled in the onURLChange fn
+    // 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) {
@@ -263,7 +309,7 @@ function MediaFromURL(_ref) {
       // 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) {
+      if (previewState.isLoading || hasUrlError) {
         return;
       }
       if (previewState.previewInfo) {
@@ -281,10 +327,16 @@ function MediaFromURL(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
+    isInvalid: hasUrlError,
+    maxLength: MAX_URL_LENGTH,
     onChange: onURLChange,
     onKeyPress: onInputKeyPress,
-    onPaste: onPaste
-  }), previewState.previewInfo && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    onPaste: onPaste,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), hasUrlError && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+    as: "span"
+  }, errorAttributes), strings.invalidUrl)), previewState.previewInfo && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignInline: "center",
     alignBlock: "center",
     xcss: PreviewImageStyles,
@@ -303,7 +355,7 @@ function MediaFromURL(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_new.default, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: inputUrl.length === 0,
+    isDisabled: inputUrl.length === 0 || hasUrlError,
     iconBefore: _filePreview.default
   }, strings.loadPreview)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: ButtonGroupStyles

package/dist/es2019/ui/MediaFromURL.js

@@ -1,9 +1,12 @@
+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 { ErrorMessage } from '@atlaskit/form';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
@@ -33,6 +36,19 @@ const INITIAL_PREVIEW_STATE = Object.freeze({
   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
+    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':
@@ -75,10 +91,13 @@ export function MediaFromURL({
     pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
     cancel: intl.formatMessage(mediaInsertMessages.cancel),
     errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
-    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning)
+    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
+    invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
   };
   const [inputUrl, setUrl] = React.useState('');
+  const [hasUrlError, setHasUrlError] = React.useState();
   const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
+  const [isInputFocused, setInputFocused] = React.useState(false);
   const pasteFlag = React.useRef(false);
   const {
     onUploadButtonClickedAnalytics,
@@ -146,12 +165,32 @@ export function MediaFromURL({
       }
     }
   }, [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
+  const errorAttributes = {};
+  if (!isInputFocused) {
+    errorAttributes['aria-relevant'] = 'all';
+    errorAttributes['aria-atomic'] = 'false';
+  }
+  const onBlur = React.useCallback(() => {
+    if (!isValidUrl(inputUrl)) {
+      setHasUrlError(true);
+    }
+    setInputFocused(false);
+  }, [inputUrl]);
+  const onFocus = React.useCallback(() => {
+    setInputFocused(true);
+  }, []);
   const onURLChange = React.useCallback(e => {
     const url = e.target.value;
     setUrl(url);
     dispatch({
       type: 'reset'
     });
+    if (!isValidUrl(url)) {
+      setHasUrlError(true);
+      return;
+    } else {
+      setHasUrlError(false);
+    }
     if (pasteFlag.current === true) {
       pasteFlag.current = false;
       uploadExternalMedia(url);
@@ -161,7 +200,7 @@ export function MediaFromURL({
     // 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 occured to then be handled in the onURLChange fn
+    // 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) {
@@ -231,7 +270,7 @@ export function MediaFromURL({
       // 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) {
+      if (previewState.isLoading || hasUrlError) {
         return;
       }
       if (previewState.previewInfo) {
@@ -249,10 +288,16 @@ export function MediaFromURL({
   }, /*#__PURE__*/React.createElement(TextField, {
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
+    isInvalid: hasUrlError,
+    maxLength: MAX_URL_LENGTH,
     onChange: onURLChange,
     onKeyPress: onInputKeyPress,
-    onPaste: onPaste
-  }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
+    onPaste: onPaste,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), hasUrlError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span"
+  }, errorAttributes), strings.invalidUrl)), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
     alignBlock: "center",
     xcss: PreviewImageStyles,
@@ -271,7 +316,7 @@ export function MediaFromURL({
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: inputUrl.length === 0,
+    isDisabled: inputUrl.length === 0 || hasUrlError,
     iconBefore: EditorFilePreviewIcon
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles

package/dist/esm/ui/MediaFromURL.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -6,10 +7,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 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 { ErrorMessage } from '@atlaskit/form';
 import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
@@ -39,6 +42,19 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
   warning: null,
   previewInfo: null
 });
+var MAX_URL_LENGTH = 2048;
+export var isValidUrl = function isValidUrl(value) {
+  try {
+    // Check for spaces and length first to avoid the expensive URL parsing
+    if (/\s/.test(value) || value.length > MAX_URL_LENGTH) {
+      return false;
+    }
+    new URL(value);
+  } catch (e) {
+    return false;
+  }
+  return isSafeUrl(value);
+};
 var previewStateReducer = function previewStateReducer(state, action) {
   switch (action.type) {
     case 'loading':
@@ -76,16 +92,25 @@ export function MediaFromURL(_ref) {
     pasteLinkToUpload: intl.formatMessage(mediaInsertMessages.pasteLinkToUpload),
     cancel: intl.formatMessage(mediaInsertMessages.cancel),
     errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
-    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning)
+    warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
+    invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
   };
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputUrl = _React$useState2[0],
     setUrl = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hasUrlError = _React$useState4[0],
+    setHasUrlError = _React$useState4[1];
   var _React$useReducer = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
     previewState = _React$useReducer2[0],
     dispatch = _React$useReducer2[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isInputFocused = _React$useState6[0],
+    setInputFocused = _React$useState6[1];
   var pasteFlag = React.useRef(false);
   var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
     onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -171,12 +196,32 @@ export function MediaFromURL(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [onUploadButtonClickedAnalytics, mediaProvider, onUploadCommencedAnalytics, onUploadSuccessAnalytics, onUploadFailureAnalytics, inputUrl]);
+  var errorAttributes = {};
+  if (!isInputFocused) {
+    errorAttributes['aria-relevant'] = 'all';
+    errorAttributes['aria-atomic'] = 'false';
+  }
+  var onBlur = React.useCallback(function () {
+    if (!isValidUrl(inputUrl)) {
+      setHasUrlError(true);
+    }
+    setInputFocused(false);
+  }, [inputUrl]);
+  var onFocus = React.useCallback(function () {
+    setInputFocused(true);
+  }, []);
   var onURLChange = React.useCallback(function (e) {
     var url = e.target.value;
     setUrl(url);
     dispatch({
       type: 'reset'
     });
+    if (!isValidUrl(url)) {
+      setHasUrlError(true);
+      return;
+    } else {
+      setHasUrlError(false);
+    }
     if (pasteFlag.current === true) {
       pasteFlag.current = false;
       uploadExternalMedia(url);
@@ -186,7 +231,7 @@ export function MediaFromURL(_ref) {
     // 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 occured to then be handled in the onURLChange fn
+    // 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) {
@@ -256,7 +301,7 @@ export function MediaFromURL(_ref) {
       // 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) {
+      if (previewState.isLoading || hasUrlError) {
         return;
       }
       if (previewState.previewInfo) {
@@ -274,10 +319,16 @@ export function MediaFromURL(_ref) {
   }, /*#__PURE__*/React.createElement(TextField, {
     value: inputUrl,
     placeholder: strings.pasteLinkToUpload,
+    isInvalid: hasUrlError,
+    maxLength: MAX_URL_LENGTH,
     onChange: onURLChange,
     onKeyPress: onInputKeyPress,
-    onPaste: onPaste
-  }), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
+    onPaste: onPaste,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), hasUrlError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span"
+  }, errorAttributes), strings.invalidUrl)), previewState.previewInfo && /*#__PURE__*/React.createElement(Inline, {
     alignInline: "center",
     alignBlock: "center",
     xcss: PreviewImageStyles,
@@ -296,7 +347,7 @@ export function MediaFromURL(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     isLoading: previewState.isLoading,
-    isDisabled: inputUrl.length === 0,
+    isDisabled: inputUrl.length === 0 || hasUrlError,
     iconBefore: EditorFilePreviewIcon
   }, strings.loadPreview)), /*#__PURE__*/React.createElement(Box, {
     xcss: ButtonGroupStyles

package/dist/types/ui/MediaFromURL.d.ts

@@ -2,6 +2,7 @@
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
+export declare const isValidUrl: (value: string) => boolean;
 type Props = {
     mediaProvider: MediaProvider;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/dist/types-ts4.5/ui/MediaFromURL.d.ts

@@ -2,6 +2,7 @@
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
+export declare const isValidUrl: (value: string) => boolean;
 type Props = {
     mediaProvider: MediaProvider;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "2.7.3",
+	"version": "2.8.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,12 +23,14 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/editor-common": "^90.0.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-media": "^1.31.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
+		"@atlaskit/form": "^10.5.3",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",