@atlaskit/editor-common 74.19.1 → 74.20.0

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/index.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { INPUT_METHOD } from '../../../analytics';
+import { WithProviders } from '../../../provider-factory';
+import { EditorLinkPicker } from '../EditorLinkPicker';
+import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
+/**
+ * Wraps around the editor's onSubmit handler so that the plugin can interface with the link picker
+ */
+const onSubmitInterface = onSubmit => ({
+  url,
+  title,
+  displayText,
+  rawUrl,
+  meta
+}, analytic) => {
+  onSubmit(url, title !== null && title !== void 0 ? title : rawUrl, displayText || undefined, meta.inputMethod === 'manual' ? INPUT_METHOD.MANUAL : INPUT_METHOD.TYPEAHEAD, analytic);
+};
+export function HyperlinkAddToolbar({
+  linkPickerOptions = {},
+  onSubmit,
+  displayText,
+  displayUrl,
+  providerFactory,
+  view,
+  onCancel,
+  invokeMethod,
+  featureFlags,
+  onClose,
+  onEscapeCallback,
+  onClickAwayCallback,
+  hyperlinkPluginState
+}) {
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['activityProvider', 'searchProvider'],
+    providerFactory: providerFactory,
+    renderNode: ({
+      activityProvider,
+      searchProvider
+    }) => {
+      const {
+        lpLinkPicker
+      } = featureFlags;
+      if (lpLinkPicker) {
+        return /*#__PURE__*/React.createElement(EditorLinkPicker, _extends({
+          view: view,
+          invokeMethod: // Provide `invokeMethod` prop as preferred value (card plugin passes as prop) otherwise assume this
+          // is being used from inside the hyperlink plugin and use inputMethod from plugin state
+          invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod,
+          editorAppearance: hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.editorAppearance
+        }, linkPickerOptions, {
+          url: displayUrl,
+          displayText: displayText,
+          onSubmit: onSubmitInterface(onSubmit),
+          onCancel: onCancel,
+          onClose: onClose,
+          onEscapeCallback: onEscapeCallback,
+          onClickAwayCallback: onClickAwayCallback
+        }));
+      }
+      return /*#__PURE__*/React.createElement(HyperlinkAddToolbarComp, {
+        activityProvider: activityProvider,
+        searchProvider: searchProvider,
+        onSubmit: onSubmit,
+        displayText: displayText,
+        displayUrl: displayUrl,
+        pluginState: hyperlinkPluginState,
+        view: view,
+        onEscapeCallback: onEscapeCallback,
+        onClickAwayCallback: onClickAwayCallback
+      });
+    }
+  });
+}

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/messages.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl-next';
+export const utilMessages = defineMessages({
+  hyperlinkIconIssueLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconIssueLabel',
+    defaultMessage: 'Issue',
+    description: 'icon label for a jira issue'
+  },
+  hyperlinkIconBugLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconBugLabel',
+    defaultMessage: 'Bug',
+    description: 'icon label for a jira bug'
+  },
+  hyperlinkIconStoryLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconStoryLabel',
+    defaultMessage: 'Story',
+    description: 'icon label for a jira story'
+  },
+  hyperlinkIconTaskLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconTaskLabel',
+    defaultMessage: 'Task',
+    description: 'icon label for a jira task'
+  },
+  hyperlinkIconPageLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconPageLabel',
+    defaultMessage: 'Page',
+    description: 'icon label for a confluence page'
+  },
+  hyperlinkIconBlogLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconBlogLabel',
+    defaultMessage: 'Blog',
+    description: 'icon label for a confluence blog'
+  }
+});

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/utils.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import Rusha from 'rusha';
+import Blog16Icon from '@atlaskit/icon-object/glyph/blog/16';
+import Bug16Icon from '@atlaskit/icon-object/glyph/bug/16';
+import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
+import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
+import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
+import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
+import { utilMessages } from './messages';
+export function filterUniqueItems(arr, comparator) {
+  return arr.filter((firstItem, index, self) => {
+    return self.findIndex(secondItem => comparator ? comparator(firstItem, secondItem) : firstItem === secondItem) === index;
+  });
+}
+const Issue16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Issue16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconIssueLabel)
+  });
+};
+const Bug16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Bug16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBugLabel)
+  });
+};
+const Story16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Story16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconStoryLabel)
+  });
+};
+const Task16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Task16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconTaskLabel)
+  });
+};
+const Page16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Page16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconPageLabel)
+  });
+};
+const Blog16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Blog16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBlogLabel)
+  });
+};
+const IntlIssue16Icon = injectIntl(Issue16);
+const IntlBug16Icon = injectIntl(Bug16);
+const IntlStory16Icon = injectIntl(Story16);
+const IntlTask16Icon = injectIntl(Task16);
+const IntlPage16Icon = injectIntl(Page16);
+const IntlBlog16Icon = injectIntl(Blog16);
+export const mapContentTypeToIcon = {
+  'jira.issue': /*#__PURE__*/React.createElement(IntlIssue16Icon, null),
+  'jira.issue.bug': /*#__PURE__*/React.createElement(IntlBug16Icon, null),
+  'jira.issue.story': /*#__PURE__*/React.createElement(IntlStory16Icon, null),
+  'jira.issue.task': /*#__PURE__*/React.createElement(IntlTask16Icon, null),
+  'confluence.page': /*#__PURE__*/React.createElement(IntlPage16Icon, null),
+  'confluence.blogpost': /*#__PURE__*/React.createElement(IntlBlog16Icon, null)
+};
+export const sha1 = input => {
+  return Rusha.createHash().update(input).digest('hex');
+};
+export const wordCount = input => {
+  return input.split(' ').length;
+};

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import LinkSearchListItem from './LinkSearchListItem';
+const listContainer = css`
+  padding-top: 0;
+`;
+const spinnerContainer = css`
+  text-align: center;
+  min-height: 80px;
+  margin-top: 30px;
+`;
+export const linkSearchList = css`
+  padding: 0;
+  list-style: none;
+`;
+export default class LinkSearchList extends PureComponent {
+  render() {
+    const {
+      onSelect,
+      onMouseMove,
+      onMouseEnter,
+      onMouseLeave,
+      items,
+      selectedIndex,
+      isLoading,
+      ariaControls,
+      role,
+      id
+    } = this.props;
+    let itemsContent;
+    let loadingContent;
+    if (items && items.length > 0) {
+      itemsContent = jsx("ul", {
+        css: linkSearchList,
+        id: id,
+        role: role,
+        "aria-controls": ariaControls
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
+        id: `link-search-list-item-${index}`,
+        role: role && 'option',
+        item: item,
+        selected: selectedIndex === index,
+        onMouseMove: onMouseMove,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onSelect: onSelect,
+        key: item.objectId
+      })));
+    }
+    if (isLoading) {
+      loadingContent = jsx("div", {
+        css: spinnerContainer
+      }, jsx(Spinner, {
+        size: "medium"
+      }));
+    }
+    return jsx("div", {
+      css: listContainer
+    }, itemsContent, loadingContent);
+  }
+}

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -0,0 +1,141 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { injectIntl } from 'react-intl-next';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N20, N300, N800 } from '@atlaskit/theme/colors';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
+import { getCorrectAltByIconUrl } from './listItemAlts';
+import { transformTimeStamp } from './transformTimeStamp';
+export const container = css`
+  background-color: transparent;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  margin-top: 0;
+`;
+export const containerSelected = css`
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
+`;
+const nameWrapper = css`
+  overflow: hidden;
+`;
+export const nameStyle = css`
+  color: ${`var(--ds-text, ${N800})`};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+`;
+export const containerName = css`
+  color: ${`var(--ds-text-subtlest, ${N300})`};
+  line-height: 14px;
+  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
+`;
+const iconStyle = css`
+  min-width: 16px;
+  margin-top: 3px;
+  margin-right: 12px;
+
+  img {
+    max-width: 16px;
+  }
+`;
+class LinkSearchListItem extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleSelect", e => {
+      e.preventDefault(); // don't let editor lose focus
+      const {
+        item,
+        onSelect
+      } = this.props;
+      onSelect(item.url, item.name);
+    });
+    _defineProperty(this, "handleMouseMove", () => {
+      const {
+        onMouseMove,
+        item
+      } = this.props;
+      onMouseMove && onMouseMove(item.objectId);
+    });
+    _defineProperty(this, "handleMouseEnter", () => {
+      const {
+        onMouseEnter,
+        item
+      } = this.props;
+      onMouseEnter && onMouseEnter(item.objectId);
+    });
+    _defineProperty(this, "handleMouseLeave", () => {
+      const {
+        onMouseLeave,
+        item
+      } = this.props;
+      onMouseLeave && onMouseLeave(item.objectId);
+    });
+  }
+  renderIcon() {
+    const {
+      item: {
+        icon,
+        iconUrl
+      },
+      intl
+    } = this.props;
+    if (icon) {
+      return jsx("span", {
+        css: iconStyle
+      }, icon);
+    }
+    if (iconUrl) {
+      return jsx("span", {
+        css: iconStyle
+      }, jsx("img", {
+        src: iconUrl,
+        alt: getCorrectAltByIconUrl(iconUrl, intl)
+      }));
+    }
+    return null;
+  }
+  renderTimeStamp() {
+    const {
+      item,
+      intl
+    } = this.props;
+    const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+    return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
+      className: "link-search-timestamp",
+      "data-test-id": "link-search-timestamp"
+    }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
+  }
+  render() {
+    const {
+      item,
+      selected,
+      id,
+      role
+    } = this.props;
+    return jsx("li", {
+      css: [container, selected && containerSelected],
+      role: role,
+      id: id,
+      "aria-selected": selected,
+      "data-testid": "link-search-list-item",
+      onMouseMove: this.handleMouseMove,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onClick: this.handleSelect
+    }, this.renderIcon(), jsx("span", {
+      css: nameWrapper
+    }, jsx("div", {
+      css: nameStyle
+    }, item.name), jsx("div", {
+      "data-testid": "link-search-list-item-container",
+      css: containerName
+    }, item.container, this.renderTimeStamp())));
+  }
+}
+export default injectIntl(LinkSearchListItem);

package/dist/es2019/link/LinkSearch/ToolbarComponents.js

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX } from '../../ui';
+export const inputWrapper = css`
+  display: flex;
+  line-height: 0;
+  padding: 5px 0;
+  align-items: center;
+`;
+export const container = css`
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 0;
+
+  width: ${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
+  line-height: initial;
+`;
+export const containerWithProvider = css`
+  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
+`;

package/dist/es2019/link/LinkSearch/index.js

@@ -0,0 +1,213 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '../../analytics';
+import LinkSearchList from './LinkSearchList';
+import withActivityProvider from './withActivityProvider';
+const DEFAULT_ITEMS_LIMIT = 5;
+const limit = (items, max) => {
+  return items.slice(0, max);
+};
+class RecentLink extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "activityProvider", null);
+    _defineProperty(this, "handleSubmit", () => {
+      const {
+        items,
+        url,
+        selectedIndex
+      } = this.state;
+      const inputMethod = this.getCurrentInputMethod();
+      if (!inputMethod) {
+        return; // No call submit, if there is nothing to submit
+      }
+
+      switch (inputMethod) {
+        case INPUT_METHOD.MANUAL:
+          {
+            this.props.onSubmit({
+              url,
+              text: url,
+              inputMethod: INPUT_METHOD.MANUAL
+            });
+            break;
+          }
+        case INPUT_METHOD.TYPEAHEAD:
+          {
+            const item = items[selectedIndex];
+            this.setState(() => ({
+              url: item.url
+            }));
+            if (this.props.onSubmit) {
+              this.props.onSubmit({
+                url: item.url,
+                text: item.name,
+                inputMethod: INPUT_METHOD.TYPEAHEAD
+              });
+            }
+            break;
+          }
+      }
+    });
+    _defineProperty(this, "handleSelected", (href, text) => {
+      if (this.props.onSubmit) {
+        this.setState(() => ({
+          url: href
+        }));
+        this.props.onSubmit({
+          text,
+          url: href,
+          inputMethod: INPUT_METHOD.TYPEAHEAD
+        });
+      }
+    });
+    _defineProperty(this, "handleChange", async input => {
+      this.setState({
+        url: input
+      });
+      if (this.activityProvider) {
+        if (input.length === 0) {
+          this.setState({
+            items: limit(await this.activityProvider.getRecentItems(), this.props.limit),
+            selectedIndex: -1
+          });
+        } else {
+          this.setState({
+            items: limit(await this.activityProvider.searchRecent(input), this.props.limit),
+            selectedIndex: 0
+          });
+        }
+      }
+    });
+    _defineProperty(this, "handleKeyDown", e => {
+      const {
+        items,
+        selectedIndex
+      } = this.state;
+      if (!items || !items.length) {
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        // down
+        e.preventDefault();
+        this.setState({
+          selectedIndex: (selectedIndex + 1) % items.length
+        });
+      } else if (e.key === 'ArrowUp') {
+        // up
+        e.preventDefault();
+        this.setState({
+          selectedIndex: selectedIndex > 0 ? selectedIndex - 1 : items.length - 1
+        });
+      }
+    });
+    _defineProperty(this, "handleMouseMove", objectId => {
+      const {
+        items
+      } = this.state;
+      if (items) {
+        const index = items.findIndex(item => item.objectId === objectId);
+        this.setState({
+          selectedIndex: index
+        });
+      }
+    });
+    _defineProperty(this, "renderRecentList", () => {
+      const {
+        items,
+        isLoading,
+        selectedIndex
+      } = this.state;
+      return /*#__PURE__*/React.createElement(LinkSearchList, {
+        items: items,
+        isLoading: isLoading,
+        selectedIndex: selectedIndex,
+        onSelect: this.handleSelected,
+        onMouseMove: this.handleMouseMove
+      });
+    });
+    _defineProperty(this, "clearValue", () => {
+      this.setState({
+        url: ''
+      });
+    });
+    this.state = {
+      selectedIndex: -1,
+      isLoading: false,
+      items: [],
+      url: props.defaultUrl || ''
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.defaultUrl !== nextProps.defaultUrl) {
+      this.setState(state => {
+        if (state.url !== nextProps.defaultUrl) {
+          return {
+            items: [],
+            selectedIndex: -1,
+            url: nextProps.defaultUrl || ''
+          };
+        }
+        return null;
+      });
+    }
+  }
+  async componentDidMount() {
+    if (this.props.activityProvider) {
+      this.activityProvider = await this.props.activityProvider;
+      await this.loadRecentItems(this.activityProvider);
+    }
+  }
+  async loadRecentItems(activityProvider) {
+    try {
+      if (!this.state.url) {
+        this.setState({
+          isLoading: true,
+          items: limit(await activityProvider.getRecentItems(), this.props.limit) // defaultProps assure that limit always contains a value
+        });
+      }
+    } finally {
+      this.setState({
+        isLoading: false
+      });
+    }
+  }
+  getCurrentInputMethod() {
+    const {
+      items,
+      url,
+      selectedIndex
+    } = this.state;
+    if (items && items.length > 0 && selectedIndex > -1) {
+      return INPUT_METHOD.TYPEAHEAD;
+    } else if (url && url.length > 0) {
+      return INPUT_METHOD.MANUAL;
+    }
+    return;
+  }
+  render() {
+    const {
+      render
+    } = this.props;
+    const {
+      url
+    } = this.state;
+    return render({
+      activityProvider: this.activityProvider,
+      inputProps: {
+        onChange: this.handleChange,
+        onKeyDown: this.handleKeyDown,
+        onSubmit: this.handleSubmit,
+        value: url
+      },
+      clearValue: this.clearValue,
+      currentInputMethod: this.getCurrentInputMethod(),
+      renderRecentList: this.renderRecentList
+    });
+  }
+}
+_defineProperty(RecentLink, "defaultProps", {
+  limit: DEFAULT_ITEMS_LIMIT
+});
+export default withActivityProvider(injectIntl(RecentLink));

package/dist/es2019/link/LinkSearch/listItemAlts.js

@@ -0,0 +1,63 @@
+import { defineMessages } from 'react-intl-next';
+const messages = defineMessages({
+  story: {
+    id: 'fabric.editor.story',
+    defaultMessage: 'Story',
+    description: 'Alt text for Story'
+  },
+  epic: {
+    id: 'fabric.editor.epic',
+    defaultMessage: 'Epic',
+    description: 'Alt text for Epic'
+  },
+  task: {
+    id: 'fabric.editor.task',
+    defaultMessage: 'Task',
+    description: 'Alt text for Task'
+  },
+  bug: {
+    id: 'fabric.editor.bug',
+    defaultMessage: 'Bug',
+    description: 'Alt text for Bug'
+  },
+  subTask: {
+    id: 'fabric.editor.subTask',
+    defaultMessage: 'Sub-task',
+    description: 'Alt text for Sub-task'
+  },
+  improvement: {
+    id: 'fabric.editor.improvement',
+    defaultMessage: 'Improvement',
+    description: 'Alt text for Improvement'
+  },
+  defaultAltText: {
+    id: 'fabric.editor.defaultAltText',
+    defaultMessage: 'List item',
+    description: 'Default alt text for ListItem image'
+  }
+});
+
+// Workaround to get alt text for images from url
+// Can be removed when alt={iconAlt} will be available from GraphQL
+export const getCorrectAltByIconUrl = (iconUrl, intl) => {
+  let alt = intl.formatMessage(messages.defaultAltText);
+  if (iconUrl.includes('story.svg')) {
+    alt = intl.formatMessage(messages.story);
+  }
+  if (iconUrl.includes('epic.svg')) {
+    alt = intl.formatMessage(messages.epic);
+  }
+  if (iconUrl.includes('avatarId=10318')) {
+    alt = intl.formatMessage(messages.task);
+  }
+  if (iconUrl.includes('avatarId=10303')) {
+    alt = intl.formatMessage(messages.bug);
+  }
+  if (iconUrl.includes('avatarId=10518')) {
+    alt = intl.formatMessage(messages.subTask);
+  }
+  if (iconUrl.includes('avatarId=10310')) {
+    alt = intl.formatMessage(messages.improvement);
+  }
+  return alt;
+};