@scaleflex/widget-url 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# @scaleflex/widget-url
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+The Url plugin for [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core)
+ lets users import files from the Internet. Paste any URL and it’ll be added!
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-url
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-url
+```
+
+then
+
+```js
+import Url from '@scaleflex/widget-url'
+...
+...
+...
+scaleflexWidget.use(Url, propertiesObject)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Url`
+
+```js
+const url = window.ScaleflexWidget.Url
+...
+...
+...
+scaleflexWidget.use(url, propertiesObject)
+```
+
+## Plugin's styles
+
+```js
+import '@scaleflex/widget-core/dist/style.css'
+import '@scaleflex/widget-url/dist/style.css'
+```
+
+or if you prefer the minified version
+
+```js
+import '@scaleflex/widget-core/dist/style.min.css'
+import '@scaleflex/widget-url/dist/style.min.css'
+```
+
+> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
+
+## Properties
+
+### `title`
+
+<u>Type:</u> `string`
+
+<u>Default:</u> `'Link'`
+
+The title/label that would be shown & used for the plugin.
+
+### `companionHeaders`
+
+<u>Type:</u> `null` | `object`
+
+<u>Default:</u> `null`
+
+If you need to pass additional headers for in companion requests then pass them in this property.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-url
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-url
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-url?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/UrlUI.js

@@ -0,0 +1,123 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from '@scaleflex/icons';
+import { selectInfo } from '@scaleflex/widget-core/lib/slices/info.slice';
+import Styled from './UrlUI.styled';
+import { selectCurrentFolderPath } from '@scaleflex/widget-explorer/lib/slices/folders.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HTTP_REGEX = /(http):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;
+var DUPLICATE_MESSAGE = 'duplicate';
+var UrlUI = function UrlUI(_ref) {
+  var addFile = _ref.addFile,
+    i18n = _ref.i18n,
+    fileName = _ref.fileName;
+  var currentFolderPath = useSelector(selectCurrentFolderPath);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isError = _useState6[0],
+    setIsError = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isNotHttps = _useState8[0],
+    setIsNotHttps = _useState8[1];
+
+  // TODO: we should improve the logic as it depends on the language?, better to trigger an event maybe? or some better solution.
+  var isFileExists = useSelector(function (state) {
+    return selectInfo(state).message.includes(DUPLICATE_MESSAGE);
+  });
+  var handleChangeInput = function handleChangeInput(event) {
+    setIsError(false);
+    setInputValue(event.target.value);
+  };
+  var handleError = function handleError() {
+    setIsError(true);
+    setIsLoading(false);
+  };
+  var handleSubmit = function handleSubmit() {
+    if (inputValue.match(HTTP_REGEX)) {
+      setIsNotHttps(true);
+      setIsError(true);
+    } else {
+      setIsLoading(true);
+      setIsError(false);
+      addFile({
+        url: inputValue,
+        toFolder: currentFolderPath,
+        callback: function callback() {
+          return setIsLoading(false);
+        },
+        onError: handleError
+      });
+    }
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (event.keyCode === 13 && inputValue.length) {
+      handleSubmit();
+    }
+  };
+  var errorMessage = function errorMessage() {
+    if (isNotHttps && isError) {
+      return i18n('urlUiInputErrorHttpsRequired');
+    }
+    if (isFileExists && isError) {
+      return i18n('urlUiInputExistsError', {
+        fileName: fileName(inputValue)
+      });
+    }
+    if (isError) {
+      return i18n('urlUiInputError');
+    }
+    return '';
+  };
+  return /*#__PURE__*/_jsx(Styled.Wrapper, {
+    className: "filerobot-Url",
+    children: /*#__PURE__*/_jsxs(Styled.Content, {
+      className: "filerobot-Url-content",
+      children: [/*#__PURE__*/_jsx(Styled.IconWrapper, {
+        children: /*#__PURE__*/_jsx(Link, {
+          size: 34
+        })
+      }), /*#__PURE__*/_jsxs(Styled.Info, {
+        children: [i18n('urlUiEnterPublicUrlText'), ' ', /*#__PURE__*/_jsxs(Styled.Hint, {
+          className: "filerobot-Url-required",
+          children: ["(", i18n('urlUiHttpsRequiredText'), ")"]
+        })]
+      }), /*#__PURE__*/_jsxs(Styled.InputWrapper, {
+        children: [/*#__PURE__*/_jsx(Styled.InputGroup, {
+          className: "filerobot-Url-input",
+          placeholder: i18n('urlUiInputPlaceholder'),
+          focusOnMount: true,
+          onKeyUp: handleKeyPress,
+          onChange: handleChangeInput,
+          fullWidth: true,
+          value: inputValue,
+          error: isError,
+          hint: errorMessage()
+        }), /*#__PURE__*/_jsx(Styled.Button, {
+          className: "filerobot-Url-actionsBtn",
+          disabled: isLoading || !inputValue.length,
+          onClick: handleSubmit,
+          loading: isLoading,
+          size: "lg",
+          color: "primary",
+          children: i18n('mutualizedImportLabel')
+        })]
+      })]
+    })
+  });
+};
+export default UrlUI;

package/lib/UrlUI.styled.js

@@ -0,0 +1,30 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import styled from 'styled-components';
+import { InputGroup as SfxInputGroup, Button as SfxButton } from '@scaleflex/ui/core';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  padding: 0 24px;\n"])));
+var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  row-gap: 16px;\n"])));
+var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background-color: ", ";\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.Link];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.ButtonPrimaryText];
+});
+var Info = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 18px;\n  line-height: 20px;\n  text-align: center;\n  font-weight: 400;\n  margin: 0;\n"])));
+var Hint = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\n"])));
+var InputWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 12px;\n  height: 48px;\n  width: 100%;\n  max-width: 714px;\n\n  .SfxInputGroup-root {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var InputGroup = styled(SfxInputGroup)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  padding: 11px 20px;\n"])));
+var Button = styled(SfxButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 102px;\n  display: flex;\n  justify-content: center;\n  transition: all 100ms ease-out;\n"])));
+var Styled = {
+  Wrapper: Wrapper,
+  Content: Content,
+  IconWrapper: IconWrapper,
+  Info: Info,
+  Hint: Hint,
+  InputWrapper: InputWrapper,
+  InputGroup: InputGroup,
+  Button: Button
+};
+export default Styled;

package/lib/defaultLocale.js

@@ -0,0 +1,16 @@
+export default {
+  mutualizedImportLabel: 'Import',
+  urlUiImportingLabel: 'Importing...',
+  mutualizedCancelButtonLabel: 'Cancel',
+  urlUiEnterUrlToImportLabel: 'Enter URL to import a file',
+  urlUiInputPlaceholder: 'eg. https://sample-site.com/path-to-file',
+  urlUiInputError: 'Incorrect URL!',
+  urlUiInputExistsError: 'the %{fileName} already exists',
+  urlUiInputErrorHttpsRequired: 'Incorrect URL, https required',
+  addFileFailedToFetchMessage: 'Companion failed to fetch this URL, please make sure it’s correct',
+  addFileEnterCorrectUrlInfo: 'Incorrect URL: Please make sure you are entering a direct link to a file',
+  urlUiEnterPublicUrlText: 'Enter public URL of file to upload',
+  urlUiHttpsRequiredText: 'https required',
+  addFileImportingCancelledInfo: 'Importing request has just cancelled.',
+  addFileNoPendingImportsToCancelInfo: 'No import requests were found to cancel.'
+};

package/lib/index.js

@@ -0,0 +1,268 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import { Plugin } from '@scaleflex/widget-core';
+import Explorer from '@scaleflex/widget-explorer';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import { RequestClient } from '@scaleflex/widget-companion-client';
+import { UrlIcon } from '@scaleflex/widget-icons';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import isThumbnailCloudimgSupported from '@scaleflex/widget-utils/lib/isThumbnailCloudimgSupported';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { selectCurrentFolderPath } from '@scaleflex/widget-core/lib/slices/common.slice';
+import defaultLocale from './defaultLocale';
+import UrlUI from './UrlUI';
+import forEachDroppedOrPastedUrl from './utils/forEachDroppedOrPastedUrl';
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+var Url = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function Url(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, Url);
+    _this = _callSuper(this, Url, [filerobot, opts]);
+    _this.id = PLUGINS_IDS.URL;
+    _this.title = _this.opts.title || 'Link';
+    _this.type = 'acquirer';
+    _this.icon = UrlIcon;
+    _this.onRequestClose = _this.cancelImporting;
+    // Set default options and locale
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    var defaultOptions = {};
+    _this.opts = _objectSpread(_objectSpread({}, defaultOptions), opts);
+    _this.i18nInit();
+
+    // Bind all event handlers for referencability
+    _this.getMeta = _this.getMeta.bind(_this);
+    _this.addFile = _this.addFile.bind(_this);
+    _this.cancelImporting = _this.cancelImporting.bind(_this);
+    _this.handleRootDrop = _this.handleRootDrop.bind(_this);
+    _this.handleRootPaste = _this.handleRootPaste.bind(_this);
+    _this.client = new RequestClient(filerobot, {
+      companionHeaders: _this.opts.companionHeaders
+    });
+    _this.hostname = _this.client.companionUrl;
+    if (!_this.hostname) {
+      throw new Error('Companion hostname is required');
+    }
+    return _this;
+  }
+  _inherits(Url, _Plugin);
+  return _createClass(Url, [{
+    key: "i18nInit",
+    value: function i18nInit() {
+      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
+      this.i18n = this.translator.translate.bind(this.translator);
+      this.i18nArray = this.translator.translateArray.bind(this.translator);
+    }
+  }, {
+    key: "getFileNameFromUrl",
+    value: function getFileNameFromUrl(url) {
+      var urlParamsRegex = /\?(.*)/gm;
+      return url.substring(url.lastIndexOf('/') + 1).replace(urlParamsRegex, '');
+    }
+  }, {
+    key: "checkIfCorrectURL",
+    value: function checkIfCorrectURL(url) {
+      var webProtocolRegex = /^http(s)?:\/\//;
+      if (!url || !webProtocolRegex.test(url)) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "addProtocolToURL",
+    value: function addProtocolToURL(url) {
+      var protocolRegex = /^[a-z0-9]+:\/\//;
+      var defaultProtocol = 'http://';
+      if (protocolRegex.test(url)) {
+        return url;
+      }
+      return defaultProtocol + url;
+    }
+  }, {
+    key: "getCurrentFolderPath",
+    value: function getCurrentFolderPath() {
+      var state = this.filerobot.getGlobalState();
+      return selectCurrentFolderPath(state);
+    }
+  }, {
+    key: "getMeta",
+    value: async function getMeta(url) {
+      var _this2 = this;
+      return this.client.post('url/meta', {
+        url: url
+      }).then(function (res) {
+        if (res.error) {
+          _this2.filerobot.log('[URL] Error:');
+          _this2.filerobot.log(res.error);
+          throw new Error('Failed to fetch the file');
+        }
+        return res;
+      });
+    }
+  }, {
+    key: "addFile",
+    value: function addFile(_ref) {
+      var _this3 = this;
+      var _ref$url = _ref.url,
+        url = _ref$url === void 0 ? '' : _ref$url,
+        toFolder = _ref.toFolder,
+        _ref$callback = _ref.callback,
+        callback = _ref$callback === void 0 ? function () {
+          return undefined;
+        } : _ref$callback,
+        _ref$onError = _ref.onError,
+        onError = _ref$onError === void 0 ? function () {
+          return undefined;
+        } : _ref$onError;
+      if (!url) {
+        return;
+      }
+      if (url.toLowerCase().startsWith('www.')) {
+        url = this.addProtocolToURL(url);
+      }
+      if (!this.checkIfCorrectURL(url)) {
+        this.filerobot.log("[URL] Incorrect URL entered: ".concat(url));
+        this.filerobot.info(this.i18n('addFileEnterCorrectUrlInfo'), 'warning', 5000);
+        return onError();
+      }
+      return this.getMeta(url).then(function (meta) {
+        var tagFile = {
+          source: _this3.id,
+          name: _this3.getFileNameFromUrl(url),
+          type: meta.type,
+          toFolder: toFolder,
+          data: {
+            size: meta.size
+          },
+          isRemote: true,
+          body: {
+            url: url
+          },
+          remote: {
+            companionUrl: _this3.client.companionUrl,
+            url: "".concat(_this3.hostname, "/url/get"),
+            body: {
+              fileId: url,
+              url: url
+            },
+            providerOptions: _this3.client.opts
+          }
+        };
+        if (!isImage(tagFile) && isThumbnailCloudimgSupported(tagFile)) {
+          tagFile.preview = "https://".concat(_this3.filerobot.opts.container, ".filerobot.com/").concat(encodeURIComponent(url), "?bypass_process_proxy=1&ci_url_encoded=1");
+        }
+        return tagFile;
+      }).then(function (tagFile) {
+        _this3.filerobot.log('[Url] Adding remote file');
+        try {
+          _this3.filerobot.addFile(tagFile);
+          callback(tagFile);
+        } catch (err) {
+          onError(err);
+          if (!err.isRestriction) {
+            _this3.filerobot.log(err);
+          }
+        }
+      })["catch"](function (err) {
+        _this3.filerobot.log(err);
+        onError(err);
+        _this3.filerobot.info({
+          message: _this3.i18n('addFileFailedToFetchMessage'),
+          details: err.message
+        }, 'error', 5000);
+      });
+    }
+  }, {
+    key: "cancelImporting",
+    value: function cancelImporting() {
+      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+        return undefined;
+      };
+      if (this.client.checkIfTherePendingRequests()) {
+        this.client.cancel();
+        this.filerobot.hideInfo();
+        this.filerobot.info(this.i18n('addFileImportingCancelledInfo'), 'warning');
+      } else {
+        this.filerobot.info(this.i18n('addFileNoPendingImportsToCancelInfo'));
+      }
+      callback();
+    }
+  }, {
+    key: "handleRootDrop",
+    value: function handleRootDrop(e) {
+      var _this4 = this;
+      forEachDroppedOrPastedUrl(e.dataTransfer, 'drop', function (url) {
+        _this4.filerobot.log("[URL] Adding file from dropped url: ".concat(url));
+        _this4.addFile({
+          url: url,
+          toFolder: _this4.getCurrentFolderPath()
+        });
+      });
+    }
+  }, {
+    key: "handleRootPaste",
+    value: function handleRootPaste(e) {
+      var _this5 = this;
+      var tagName = e.target.tagName;
+      if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+        return;
+      }
+      forEachDroppedOrPastedUrl(e.clipboardData, 'paste', function (url) {
+        _this5.filerobot.log("[URL] Adding file from pasted url: ".concat(url));
+        _this5.addFile({
+          url: url,
+          toFolder: _this5.getCurrentFolderPath()
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return UrlUI({
+        i18n: this.i18n,
+        addFile: this.addFile,
+        fileName: this.getFileNameFromUrl
+      });
+    }
+  }, {
+    key: "install",
+    value: function install() {
+      if (Explorer) {
+        this.mount(Explorer, this);
+      }
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.unmount();
+    }
+  }]);
+}(Plugin);
+export { Url as default };

package/lib/utils/forEachDroppedOrPastedUrl.js

@@ -0,0 +1,94 @@
+import toArray from '@scaleflex/widget-utils/lib/toArray';
+
+/*
+  SITUATION
+
+    1. Cross-browser dataTransfer.items
+
+      paste in chrome [Copy Image]:
+      0: {kind: "file", type: "image/png"}
+      1: {kind: "string", type: "text/html"}
+      paste in safari [Copy Image]:
+      0: {kind: "file", type: "image/png"}
+      1: {kind: "string", type: "text/html"}
+      2: {kind: "string", type: "text/plain"}
+      3: {kind: "string", type: "text/uri-list"}
+      paste in firefox [Copy Image]:
+      0: {kind: "file", type: "image/png"}
+      1: {kind: "string", type: "text/html"}
+
+      paste in chrome [Copy Image Address]:
+      0: {kind: "string", type: "text/plain"}
+      paste in safari [Copy Image Address]:
+      0: {kind: "string", type: "text/plain"}
+      1: {kind: "string", type: "text/uri-list"}
+      paste in firefox [Copy Image Address]:
+      0: {kind: "string", type: "text/plain"}
+
+      drop in chrome [from browser]:
+      0: {kind: "string", type: "text/uri-list"}
+      1: {kind: "string", type: "text/html"}
+      drop in safari [from browser]:
+      0: {kind: "string", type: "text/uri-list"}
+      1: {kind: "string", type: "text/html"}
+      2: {kind: "file", type: "image/png"}
+      drop in firefox [from browser]:
+      0: {kind: "string", type: "text/uri-list"}
+      1: {kind: "string", type: "text/x-moz-url"}
+      2: {kind: "string", type: "text/plain"}
+
+    2. We can determine if it's a 'copypaste' or a 'drop', but we can't discern between [Copy Image] and [Copy Image Address].
+
+  CONCLUSION
+
+    1. 'paste' ([Copy Image] or [Copy Image Address], we can't discern between these two)
+      Don't do anything if there is 'file' item. .handlePaste in the ExplorerPlugin will deal with all 'file' items.
+      If there are no 'file' items - handle 'text/plain' items.
+
+    2. 'drop'
+      Take 'text/uri-list' items. Safari has an additional item of .kind === 'file', and you may worry about the item being duplicated (first by ExplorerPlugin, and then by UrlPlugin, now), but don't. Directory handling code won't pay attention to this particular item of kind 'file'.
+*/
+
+/**
+ * Finds all links dropped/pasted from one browser window to another.
+ *
+ * @param {object} dataTransfer - DataTransfer instance, e.g. e.clipboardData, or e.dataTransfer
+ * @param {string} isDropOrPaste - either 'drop' or 'paste'
+ * @param {Function} callback - (urlString) => {}
+ */
+export default function forEachDroppedOrPastedUrl(dataTransfer, isDropOrPaste, callback) {
+  var items = toArray(dataTransfer.items);
+  var urlItems;
+  switch (isDropOrPaste) {
+    case 'paste':
+      {
+        var atLeastOneFileIsDragged = items.some(function (item) {
+          return item.kind === 'file';
+        });
+        if (atLeastOneFileIsDragged) {
+          return;
+        } else {
+          urlItems = items.filter(function (item) {
+            return item.kind === 'string' && item.type === 'text/plain';
+          });
+        }
+        break;
+      }
+    case 'drop':
+      {
+        urlItems = items.filter(function (item) {
+          return item.kind === 'string' && item.type === 'text/uri-list';
+        });
+        break;
+      }
+    default:
+      {
+        throw new Error("isDropOrPaste must be either 'drop' or 'paste', but it's ".concat(isDropOrPaste));
+      }
+  }
+  urlItems.forEach(function (item) {
+    item.getAsString(function (urlString) {
+      return callback(urlString);
+    });
+  });
+}