@atlaskit/editor-common 74.19.2 → 74.21.0

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

@@ -0,0 +1,72 @@
+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
+ */
+var onSubmitInterface = function onSubmitInterface(onSubmit) {
+  return function (_ref, analytic) {
+    var url = _ref.url,
+      title = _ref.title,
+      displayText = _ref.displayText,
+      rawUrl = _ref.rawUrl,
+      meta = _ref.meta;
+    onSubmit(url, title !== null && title !== void 0 ? title : rawUrl, displayText || undefined, meta.inputMethod === 'manual' ? INPUT_METHOD.MANUAL : INPUT_METHOD.TYPEAHEAD, analytic);
+  };
+};
+export function HyperlinkAddToolbar(_ref2) {
+  var _ref2$linkPickerOptio = _ref2.linkPickerOptions,
+    linkPickerOptions = _ref2$linkPickerOptio === void 0 ? {} : _ref2$linkPickerOptio,
+    onSubmit = _ref2.onSubmit,
+    displayText = _ref2.displayText,
+    displayUrl = _ref2.displayUrl,
+    providerFactory = _ref2.providerFactory,
+    view = _ref2.view,
+    onCancel = _ref2.onCancel,
+    invokeMethod = _ref2.invokeMethod,
+    featureFlags = _ref2.featureFlags,
+    onClose = _ref2.onClose,
+    onEscapeCallback = _ref2.onEscapeCallback,
+    onClickAwayCallback = _ref2.onClickAwayCallback,
+    hyperlinkPluginState = _ref2.hyperlinkPluginState;
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['activityProvider', 'searchProvider'],
+    providerFactory: providerFactory,
+    renderNode: function renderNode(_ref3) {
+      var activityProvider = _ref3.activityProvider,
+        searchProvider = _ref3.searchProvider;
+      var lpLinkPicker = featureFlags.lpLinkPicker;
+      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/esm/link/LinkPicker/HyperlinkAddToolbar/messages.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl-next';
+export var 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/esm/link/LinkPicker/HyperlinkAddToolbar/utils.js

@@ -0,0 +1,73 @@
+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(function (firstItem, index, self) {
+    return self.findIndex(function (secondItem) {
+      return comparator ? comparator(firstItem, secondItem) : firstItem === secondItem;
+    }) === index;
+  });
+}
+var Issue16 = function Issue16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Issue16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconIssueLabel)
+  });
+};
+var Bug16 = function Bug16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Bug16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBugLabel)
+  });
+};
+var Story16 = function Story16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Story16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconStoryLabel)
+  });
+};
+var Task16 = function Task16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Task16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconTaskLabel)
+  });
+};
+var Page16 = function Page16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Page16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconPageLabel)
+  });
+};
+var Blog16 = function Blog16(props) {
+  var intl = props.intl;
+  return /*#__PURE__*/React.createElement(Blog16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBlogLabel)
+  });
+};
+var IntlIssue16Icon = injectIntl(Issue16);
+var IntlBug16Icon = injectIntl(Bug16);
+var IntlStory16Icon = injectIntl(Story16);
+var IntlTask16Icon = injectIntl(Task16);
+var IntlPage16Icon = injectIntl(Page16);
+var IntlBlog16Icon = injectIntl(Blog16);
+export var 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 var sha1 = function sha1(input) {
+  return Rusha.createHash().update(input).digest('hex');
+};
+export var wordCount = function wordCount(input) {
+  return input.split(' ').length;
+};

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

@@ -0,0 +1,75 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import LinkSearchListItem from './LinkSearchListItem';
+var listContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+var spinnerContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var linkSearchList = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
+  _inherits(LinkSearchList, _PureComponent);
+  var _super = _createSuper(LinkSearchList);
+  function LinkSearchList() {
+    _classCallCheck(this, LinkSearchList);
+    return _super.apply(this, arguments);
+  }
+  _createClass(LinkSearchList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onSelect = _this$props.onSelect,
+        onMouseMove = _this$props.onMouseMove,
+        onMouseEnter = _this$props.onMouseEnter,
+        onMouseLeave = _this$props.onMouseLeave,
+        items = _this$props.items,
+        selectedIndex = _this$props.selectedIndex,
+        isLoading = _this$props.isLoading,
+        ariaControls = _this$props.ariaControls,
+        role = _this$props.role,
+        id = _this$props.id;
+      var itemsContent;
+      var loadingContent;
+      if (items && items.length > 0) {
+        itemsContent = jsx("ul", {
+          css: linkSearchList,
+          id: id,
+          role: role,
+          "aria-controls": ariaControls
+        }, items.map(function (item, index) {
+          return jsx(LinkSearchListItem, {
+            id: "link-search-list-item-".concat(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);
+    }
+  }]);
+  return LinkSearchList;
+}(PureComponent);
+export { LinkSearchList as default };

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

@@ -0,0 +1,131 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @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 var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
+export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));
+var nameWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(N800, ")"));
+export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), relativeFontSizeToBase16(fontSizeSmall()));
+var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
+var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(LinkSearchListItem, _React$PureComponent);
+  var _super = _createSuper(LinkSearchListItem);
+  function LinkSearchListItem() {
+    var _this;
+    _classCallCheck(this, LinkSearchListItem);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (e) {
+      e.preventDefault(); // don't let editor lose focus
+      var _this$props = _this.props,
+        item = _this$props.item,
+        onSelect = _this$props.onSelect;
+      onSelect(item.url, item.name);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function () {
+      var _this$props2 = _this.props,
+        onMouseMove = _this$props2.onMouseMove,
+        item = _this$props2.item;
+      onMouseMove && onMouseMove(item.objectId);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
+      var _this$props3 = _this.props,
+        onMouseEnter = _this$props3.onMouseEnter,
+        item = _this$props3.item;
+      onMouseEnter && onMouseEnter(item.objectId);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
+      var _this$props4 = _this.props,
+        onMouseLeave = _this$props4.onMouseLeave,
+        item = _this$props4.item;
+      onMouseLeave && onMouseLeave(item.objectId);
+    });
+    return _this;
+  }
+  _createClass(LinkSearchListItem, [{
+    key: "renderIcon",
+    value: function renderIcon() {
+      var _this$props5 = this.props,
+        _this$props5$item = _this$props5.item,
+        icon = _this$props5$item.icon,
+        iconUrl = _this$props5$item.iconUrl,
+        intl = _this$props5.intl;
+      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;
+    }
+  }, {
+    key: "renderTimeStamp",
+    value: function renderTimeStamp() {
+      var _this$props6 = this.props,
+        item = _this$props6.item,
+        intl = _this$props6.intl;
+      var 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 || ''));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props7 = this.props,
+        item = _this$props7.item,
+        selected = _this$props7.selected,
+        id = _this$props7.id,
+        role = _this$props7.role;
+      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())));
+    }
+  }]);
+  return LinkSearchListItem;
+}(React.PureComponent);
+export default injectIntl(LinkSearchListItem);

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

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX } from '../../ui';
+export var inputWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+export var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  width: ", "px;\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
+export var containerWithProvider = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);