@atlaskit/link-picker 0.0.2 → 0.7.0

package/dist/es2019/ui/link-picker.js

@@ -0,0 +1,480 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/core';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../messages';
+import PanelTextInput from './PanelTextInput';
+import LinkSearchList from './LinkSearchList';
+import { normalizeUrl, isSafeUrl } from '../url';
+import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
+import { browser } from '../browser';
+import { transformTimeStamp } from '../transformTimeStamp';
+import Announcer from './announcer';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+export const RECENT_SEARCH_LIST_SIZE = 5;
+export class LinkPicker extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "queryVersion", 0);
+
+    _defineProperty(this, "updateInput", async input => {
+      // If input is a valid URL, do not search or display link suggestions
+      if (input.length && isSafeUrl(input)) {
+        return this.setState({
+          url: input,
+          selectedIndex: -1,
+          items: [],
+          isLoading: false,
+          invalidUrl: null
+        });
+      }
+
+      return this.setState({
+        url: input,
+        // Unset selection on any input change
+        selectedIndex: -1,
+        invalidUrl: null
+      }, () => {
+        this.updateResults();
+      });
+    });
+
+    _defineProperty(this, "createClearHandler", field => {
+      return () => {
+        switch (field) {
+          case 'url':
+            {
+              this.updateInput('');
+              break;
+            }
+
+          case 'displayText':
+            {
+              this.setState({
+                [field]: ''
+              });
+            }
+        }
+      };
+    });
+
+    _defineProperty(this, "getScreenReaderText", () => {
+      const {
+        intl
+      } = this.props;
+      const {
+        items,
+        selectedIndex
+      } = this.state;
+
+      if (items.length && selectedIndex > -1) {
+        const {
+          name,
+          container,
+          lastUpdatedDate,
+          lastViewedDate
+        } = items[selectedIndex];
+        const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+        return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
+      }
+    });
+
+    _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
+      /**
+       * When we use ArrowKey to navigate through result items,
+       * the URL field will be populated with the content of
+       * selected item.
+       * This function will check if the URL field is populated
+       * with selected item.
+       * It can be useful to detect whether we want to insert a
+       * smartlink or a hyperlink with customized title
+       */
+      const {
+        items,
+        selectedIndex,
+        url
+      } = this.state;
+      const selectedItem = items[selectedIndex];
+
+      if (selectedItem && selectedItem.url === url) {
+        return true;
+      }
+
+      return false;
+    });
+
+    _defineProperty(this, "handleSelected", objectId => {
+      const {
+        items
+      } = this.state;
+      const selectedItem = items.find(item => item.objectId === objectId);
+
+      if (selectedItem) {
+        const {
+          url,
+          name
+        } = selectedItem;
+        this.handleInsert(url, name, 'typeAhead');
+      }
+    });
+
+    _defineProperty(this, "handleInsert", (url, title, inputType) => {
+      const {
+        onSubmit
+      } = this.props;
+      const {
+        url: rawUrl,
+        displayText
+      } = this.state;
+
+      if (onSubmit) {
+        onSubmit({
+          url,
+          displayText: displayText || null,
+          title: title || null,
+          meta: {
+            inputMethod: inputType
+          },
+          ...(inputType === 'manual' ? {
+            rawUrl
+          } : {})
+        });
+      }
+    });
+
+    _defineProperty(this, "handleMouseEnterResultItem", objectId => {
+      const {
+        items
+      } = this.state;
+      const index = findIndex(items, item => item.objectId === objectId);
+      this.setState({
+        activeIndex: index
+      });
+    });
+
+    _defineProperty(this, "handleMouseLeaveResultItem", objectId => {
+      const {
+        items,
+        activeIndex
+      } = this.state;
+      const index = findIndex(items, item => item.objectId === objectId); // This is to avoid updating index that was set by other mouseenter event
+
+      if (activeIndex === index) {
+        this.setState({
+          activeIndex: -1
+        });
+      }
+    });
+
+    _defineProperty(this, "handleSubmit", () => {
+      const {
+        url,
+        selectedIndex,
+        items
+      } = this.state;
+      const selectedItem = items[selectedIndex];
+
+      if (this.isUrlPopulatedWithSelectedItem()) {
+        this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
+      } else if (url.length > 0) {
+        const normalized = normalizeUrl(url);
+
+        if (normalized) {
+          this.handleInsert(normalized, null, 'manual');
+        } else {
+          const {
+            intl
+          } = this.props;
+          const linkInvalid = intl.formatMessage(messages.linkInvalid);
+          this.setState({
+            invalidUrl: linkInvalid
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "handleKeyDown", event => {
+      const {
+        items,
+        activeIndex
+      } = this.state;
+      const {
+        keyCode
+      } = event;
+      const KEY_CODE_ARROW_DOWN = 40;
+      const KEY_CODE_ARROW_UP = 38;
+
+      if (!items || !items.length) {
+        return;
+      }
+
+      let updatedIndex = activeIndex;
+
+      switch (keyCode) {
+        case KEY_CODE_ARROW_DOWN:
+          // down
+          event.preventDefault();
+          updatedIndex = (activeIndex + 1) % items.length;
+          break;
+
+        case KEY_CODE_ARROW_UP:
+          // up
+          event.preventDefault();
+          updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+          break;
+      }
+
+      if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+        this.setState({
+          activeIndex: updatedIndex,
+          selectedIndex: updatedIndex,
+          url: items[updatedIndex].url,
+          invalidUrl: null
+        });
+      }
+    });
+
+    _defineProperty(this, "handleCancel", () => {
+      const {
+        onCancel
+      } = this.props;
+
+      if (onCancel) {
+        onCancel();
+      }
+    });
+
+    _defineProperty(this, "updateTextInput", displayText => {
+      this.setState({
+        displayText: displayText
+      });
+    });
+
+    this.state = {
+      selectedIndex: -1,
+      activeIndex: -1,
+      isLoading: false,
+      url: normalizeUrl(props.url) || '',
+      displayText: props.displayText || '',
+      items: [],
+      invalidUrl: null
+    };
+    /* Cache functions */
+
+    this.handleClearUrl = this.createClearHandler('url');
+    this.handleClearDisplayText = this.createClearHandler('displayText');
+  }
+
+  componentDidMount() {
+    this.loadInitialLinkSearchResult();
+  }
+
+  loadInitialLinkSearchResult() {
+    const {
+      url
+    } = this.state;
+
+    if (!url) {
+      this.updateResults();
+    }
+  }
+
+  getActivePlugin() {
+    if (!this.props.plugins) {
+      return null;
+    }
+
+    return this.props.plugins[0];
+  }
+  /**
+   * Interface between link picker and plugins to update results
+   */
+
+
+  async updateResults() {
+    const queryVersion = ++this.queryVersion;
+    const activePlugin = this.getActivePlugin();
+
+    if (!activePlugin) {
+      return;
+    }
+
+    const updates = activePlugin.resolve({
+      query: this.state.url
+    });
+    this.setState({
+      isLoading: true,
+      items: []
+    });
+
+    try {
+      while (queryVersion === this.queryVersion) {
+        const {
+          done,
+          value
+        } = await updates.next();
+
+        if (queryVersion !== this.queryVersion) {
+          return;
+        }
+
+        this.setState({
+          items: limit(value),
+          isLoading: !done
+        });
+
+        if (done) {
+          return;
+        }
+      }
+    } catch {
+      this.setState({
+        isLoading: false
+      });
+    }
+  }
+
+  render() {
+    const {
+      items,
+      isLoading,
+      activeIndex,
+      selectedIndex,
+      url,
+      displayText
+    } = this.state;
+    const {
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    const activePlugin = this.getActivePlugin();
+    const linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
+    const linkLabel = formatMessage(messages.linkLabel);
+    const linkTextLabel = formatMessage(messages.linkTextLabel);
+    const linkTextPlaceHolder = formatMessage(messages.linkTextPlaceholder);
+    const screenReaderDescriptionId = 'search-recent-links-field-description';
+    const linkSearchListId = 'link-picker-search-list';
+    const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
+    // as the Aria design pattern for combobox does not work in this case
+    // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+    const screenReaderText = browser.safari && this.getScreenReaderText();
+    const searchIcon = activePlugin && jsx(SearchIconWrapper, {
+      "data-testid": "link-picker-search-icon"
+    }, jsx(EditorSearchIcon, {
+      size: "medium",
+      label: ''
+    }));
+    return jsx("div", {
+      "data-testid": "link-picker",
+      className: "recent-list",
+      css: recentListStyles
+    }, jsx(Container, {
+      innerRef: this.wrapperRef
+    }, screenReaderText && jsx(Announcer, {
+      ariaLive: "assertive",
+      text: screenReaderText,
+      ariaRelevant: "additions",
+      delay: 250
+    }), jsx(VisuallyHidden, null, jsx("span", {
+      "aria-hidden": "true",
+      id: screenReaderDescriptionId
+    }, formatMessage(messages.searchLinkAriaDescription))), jsx(PanelTextInput, {
+      name: "link",
+      testId: "link-url",
+      role: "combobox",
+      label: linkLabel,
+      placeholder: linkPlaceHolder,
+      value: url,
+      autoFocus: true,
+      autoComplete: "off",
+      elemBeforeInput: searchIcon,
+      onSubmit: this.handleSubmit,
+      onChange: this.updateInput,
+      onKeyDown: this.handleKeyDown,
+      onClear: this.handleClearUrl,
+      error: this.state.invalidUrl,
+      clearLabel: formatMessage(messages.clearLink),
+      "aria-controls": linkSearchListId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": ariaActiveDescendant,
+      "aria-describedby": screenReaderDescriptionId,
+      "aria-expanded": true
+    }), jsx(PanelTextInput, {
+      name: "link-text",
+      testId: "link-text",
+      autoComplete: "off",
+      label: linkTextLabel,
+      placeholder: linkTextPlaceHolder,
+      "aria-label": formatMessage(messages.linkAriaLabel),
+      value: displayText,
+      onSubmit: this.handleSubmit,
+      onKeyDown: this.handleKeyDown,
+      onChange: this.updateTextInput,
+      onClear: this.handleClearDisplayText,
+      clearLabel: formatMessage(messages.clearText)
+    }), !!items.length && jsx("div", {
+      css: ListTitleStyles,
+      id: "link-picker-list-title",
+      "data-testid": "link-picker-list-title"
+    }, formatMessage(this.state.url ? messages.titleResults : messages.titleRecentlyViewed)), jsx(VisuallyHidden, null, jsx("span", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, url && formatMessage(messages.searchLinkResults, {
+      count: items.length
+    }))), jsx(LinkSearchList, {
+      ariaLabelledBy: "link-picker-list-title",
+      ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+      id: linkSearchListId,
+      role: "listbox",
+      items: items,
+      isLoading: isLoading,
+      selectedIndex: selectedIndex,
+      activeIndex: activeIndex,
+      onSelect: this.handleSelected,
+      onMouseEnter: this.handleMouseEnterResultItem,
+      onMouseLeave: this.handleMouseLeaveResultItem
+    }), jsx(FormFooter, {
+      align: "end"
+    }, jsx(ButtonGroup, null, jsx(Button, {
+      appearance: "default",
+      onClick: this.handleCancel,
+      testId: "link-picker-cancel-button"
+    }, formatMessage(messages.cancelButton)), jsx(Button, {
+      type: "submit",
+      appearance: "primary",
+      onClick: this.handleSubmit,
+      testId: "link-picker-insert-button"
+    }, formatMessage(messages.insertButton))))));
+  }
+
+}
+
+function findIndex(array, predicate) {
+  let index = -1;
+  array.some((item, i) => {
+    if (predicate(item)) {
+      index = i;
+      return true;
+    }
+
+    return false;
+  });
+  return index;
+}
+
+function limit(items) {
+  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+}
+
+export const LinkPickerWithIntl = injectIntl(LinkPicker);

package/dist/es2019/url.js

@@ -0,0 +1,88 @@
+import LinkifyIt from 'linkify-it';
+const linkify = LinkifyIt();
+linkify.add('sourcetree:', 'http:');
+const tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
+const tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
+tlds.push(tlds2Char);
+linkify.tlds(tlds, false);
+const whitelistedURLPatterns = [/^https?:\/\/[^\s]*$/im, /^ftps?:\/\//im, /^\//im, /^mailto:/im, /^skype:/im, /^callto:[^\s]*$/im, /^facetime:[^\s]*$/im, /^git:/im, /^irc6?:/im, /^news:/im, /^nntp:/im, /^feed:/im, /^cvs:/im, /^svn:/im, /^mvn:/im, /^ssh:/im, /^scp:\/\//im, /^sftp:\/\//im, /^itms:/im, /^notes:/im, /^hipchat:\/\//im, /^sourcetree:/im, /^urn:/im, /^tel:/im, /^xmpp:/im, /^telnet:/im, /^vnc:/im, /^rdp:/im, /^whatsapp:/im, /^slack:/im, /^sips?:/im, /^magnet:/im, /^foo:/im, /^#/im];
+
+const normaliseLinkHref = url => {
+  const match = getLinkMatch(url);
+  return match && match.url || null;
+};
+
+const getLinkMatch = str => {
+  if (!str) {
+    return null;
+  }
+
+  let match = linkifyMatch(str);
+
+  if (!match.length) {
+    match = linkify.match(str);
+  }
+
+  return match && match.length > 0 && match[0].index === 0 && match[0].lastIndex === str.trim().length ? match[0] : null;
+};
+
+const LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
+
+const linkifyMatch = text => {
+  const matches = [];
+
+  if (!LINK_REGEXP.test(text)) {
+    return matches;
+  }
+
+  let startpos = 0;
+  let substr;
+
+  while (substr = text.substr(startpos)) {
+    const link = (substr.match(LINK_REGEXP) || [''])[0];
+
+    if (link) {
+      const index = substr.search(LINK_REGEXP);
+      const start = index >= 0 ? index + startpos : index;
+      const end = start + link.length;
+      matches.push({
+        index: start,
+        lastIndex: end,
+        raw: link,
+        url: link,
+        text: link,
+        schema: ''
+      });
+      startpos += end;
+    } else {
+      break;
+    }
+  }
+
+  return matches;
+};
+
+export const isSafeUrl = url => {
+  const urlTrimmed = url.trim();
+
+  if (urlTrimmed.length === 0) {
+    return true;
+  }
+
+  return whitelistedURLPatterns.some(p => p.test(urlTrimmed));
+};
+/**
+ * Adds protocol to url if needed.
+ */
+
+export function normalizeUrl(url) {
+  if (!url) {
+    return '';
+  }
+
+  if (isSafeUrl(url)) {
+    return url.trim();
+  }
+
+  return normaliseLinkHref(url);
+}

package/dist/es2019/utils.js

@@ -0,0 +1,24 @@
+import { browser } from './browser';
+export const relativeFontSizeToBase16 = px => {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error(`Invalid font size: '${px}'`);
+  }
+
+  return `${px / 16}rem`;
+};
+const KeyZCode = 90;
+const KeyYCode = 89;
+export const isUndoEvent = e => {
+  return e.keyCode === KeyZCode && ( // cmd + z for mac
+  browser.mac && e.metaKey && !e.shiftKey || // ctrl + z for non-mac
+  !browser.mac && e.ctrlKey);
+};
+export const isRedoEvent = e => {
+  return (// ctrl + y for non-mac
+    !browser.mac && e.ctrlKey && e.keyCode === KeyYCode || browser.mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
+  );
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "0.0.2",
+	"version": "0.7.0",
 	"sideEffects": false
 }

package/dist/esm/browser.js

@@ -0,0 +1,34 @@
+var result = {
+  mac: false,
+  ie: false,
+  ie_version: 0,
+  gecko: false,
+  chrome: false,
+  chrome_version: 0,
+  android: false,
+  ios: false,
+  webkit: false,
+  safari: false,
+  supportsIntersectionObserver: false,
+  supportsResizeObserver: false
+};
+
+if (typeof navigator !== 'undefined') {
+  var ieEdge = /Edge\/(\d+)/.exec(navigator.userAgent);
+  var ieUpTo10 = /MSIE \d/.test(navigator.userAgent);
+  var ie11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+  result.mac = /Mac/.test(navigator.platform);
+  var ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
+  result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
+  result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
+  result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d+)/) || [])[1], 10);
+  result.android = /Android \d/.test(navigator.userAgent);
+  result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
+  result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+  result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
+}
+
+export { result as browser };

package/dist/esm/index.js

@@ -1 +1 @@
-export { LinkPicker } from './link-picker';
+export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';