@atlaskit/renderer 105.1.1 → 106.0.0

package/dist/esm/ui/Renderer/style.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
@@ -16,11 +14,9 @@ import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor'
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 export var FullPagePadding = 32;
-
 var getLineHeight = function getLineHeight(fontCode) {
   return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 };
-
 export var headingSizes = {
   h1: {
     lineHeight: getLineHeight('h700')
@@ -41,59 +37,43 @@ export var headingSizes = {
     lineHeight: getLineHeight('h100')
   }
 };
-
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
 };
-
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
-
   if (!allowNestedHeaderLinks) {
     return '';
   }
-
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
 };
-
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
-      allowNestedHeaderLinks = _ref2.allowNestedHeaderLinks;
-
+    allowNestedHeaderLinks = _ref2.allowNestedHeaderLinks;
   if (!allowColumnSorting) {
     return '';
   }
-
   var headingsCss = '';
-
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
-
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
   var theme = _ref4.theme;
-
   if (appearance !== 'full-page' && appearance !== 'mobile') {
     return '';
   }
-
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
-
 var fullWidthStyles = function fullWidthStyles(_ref5) {
   var appearance = _ref5.appearance;
-
   if (appearance !== 'full-width') {
     return '';
   }
-
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .pm-table-container,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n  "])), akEditorFullWidthLayoutWidth);
 };
-
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     // This is required to be compatible with styled-components prop structure.

package/dist/esm/ui/Renderer/truncated-wrapper.js

@@ -4,56 +4,46 @@ 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;
-
 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 { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
 };
-
 var FadeOut = function FadeOut(props) {
   var children = props.children,
-      backgroundColor = props.backgroundColor,
-      fadeHeight = props.fadeHeight,
-      height = props.height;
+    backgroundColor = props.backgroundColor,
+    fadeHeight = props.fadeHeight,
+    height = props.height;
   var top = height - fadeHeight;
   var styles = fadeOutStyles(height, top, backgroundColor);
   return jsx("div", {
     css: styles
   }, children);
 };
-
 export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
   _inherits(TruncatedWrapper, _Component);
-
   var _super = _createSuper(TruncatedWrapper);
-
   function TruncatedWrapper(props) {
     _classCallCheck(this, TruncatedWrapper);
-
     return _super.call(this, props);
-  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
-
+  }
 
+  // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
   _createClass(TruncatedWrapper, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          _this$props$height = _this$props.height,
-          height = _this$props$height === void 0 ? 95 : _this$props$height,
-          _this$props$fadeHeigh = _this$props.fadeHeight,
-          fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
-          _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
-          children = _this$props.children;
+        _this$props$height = _this$props.height,
+        height = _this$props$height === void 0 ? 95 : _this$props$height,
+        _this$props$fadeHeigh = _this$props.fadeHeight,
+        fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
+        _this$props$backgroun = _this$props.backgroundColor,
+        backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
+        children = _this$props.children;
       return jsx(FadeOut, {
         height: height,
         fadeHeight: fadeHeight,
@@ -61,6 +51,5 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
       }, children);
     }
   }]);
-
   return TruncatedWrapper;
 }(Component);

package/dist/esm/ui/RendererActionsContext/index.js

@@ -3,7 +3,7 @@ import RendererActions from '../../actions/index';
 export var RendererContext = /*#__PURE__*/React.createContext(new RendererActions());
 export function RendererActionsContext(_ref) {
   var children = _ref.children,
-      context = _ref.context;
+    context = _ref.context;
   var actions = useMemo(function () {
     return new RendererActions(true);
   }, []);

package/dist/esm/ui/SmartCardStorage.js

@@ -4,11 +4,8 @@ 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";
-
 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; } }
-
 import React from 'react';
 export var Context = /*#__PURE__*/React.createContext(new Map());
 export var Provider = function Provider(_ref) {
@@ -20,20 +17,15 @@ export var Provider = function Provider(_ref) {
 export var withSmartCardStorage = function withSmartCardStorage(WrappedComponent) {
   return /*#__PURE__*/function (_React$Component) {
     _inherits(_class, _React$Component);
-
     var _super = _createSuper(_class);
-
     function _class() {
       _classCallCheck(this, _class);
-
       return _super.apply(this, arguments);
     }
-
     _createClass(_class, [{
       key: "render",
       value: function render() {
         var _this = this;
-
         return /*#__PURE__*/React.createElement(Context.Consumer, null, function (storage) {
           return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, _this.props, {
             smartCardStorage: storage
@@ -41,7 +33,6 @@ export var withSmartCardStorage = function withSmartCardStorage(WrappedComponent
         });
       }
     }]);
-
     return _class;
   }(React.Component);
 };

package/dist/esm/ui/SortingIcon.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
@@ -12,86 +10,70 @@ import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
 import { RendererCssClassName } from '../consts';
 export var StatusClassNames;
-
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
   StatusClassNames["DESC"] = "sorting-icon-svg__desc";
   StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
-
 var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", gridSize() / 2, "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
-var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
+var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON);
+
+// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-
 var iconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), "var(--ds-icon, #42526E)", "var(--ds-icon, #42526E)");
-
 var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
   var activated = sortOrdered !== SortOrder.NO_ORDER;
   var activeStatusClass = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
-
   if (!isSortingAllowed) {
     return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
   }
-
   switch (sortOrdered) {
     case SortOrder.ASC:
       return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
-
     case SortOrder.DESC:
       return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
-
     default:
       return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
   }
 };
-
 var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
   var noOrderLabel = sortingIconMessages.noOrderLabel,
-      ascOrderLabel = sortingIconMessages.ascOrderLabel,
-      descOrderLabel = sortingIconMessages.descOrderLabel,
-      invalidLabel = sortingIconMessages.invalidLabel;
-
+    ascOrderLabel = sortingIconMessages.ascOrderLabel,
+    descOrderLabel = sortingIconMessages.descOrderLabel,
+    invalidLabel = sortingIconMessages.invalidLabel;
   if (!isSortingAllowed) {
     return intl.formatMessage(invalidLabel);
   }
-
   switch (sortOrdered) {
     case SortOrder.NO_ORDER:
       return intl.formatMessage(noOrderLabel);
-
     case SortOrder.ASC:
       return intl.formatMessage(ascOrderLabel);
-
     case SortOrder.DESC:
       return intl.formatMessage(descOrderLabel);
   }
-
   return '';
 };
-
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
-      sortOrdered = _ref.sortOrdered,
-      intl = _ref.intl,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown;
+    sortOrdered = _ref.sortOrdered,
+    intl = _ref.intl,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
   var buttonClassName = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-
   var handleClick = function handleClick() {
     if (isSortingAllowed) {
       onClick();
     }
   };
-
   var handleKeyDown = function handleKeyDown(event) {
     if (isSortingAllowed) {
       onKeyDown(event);
     }
   };
-
   return jsx(Tooltip, {
     delay: 0,
     content: content,
@@ -112,5 +94,4 @@ var SortingIcon = function SortingIcon(_ref) {
     css: iconStyles
   }))));
 };
-
 export default injectIntl(SortingIcon);

package/dist/esm/ui/TaskItemsFormatContext/TaskItemsFormatContext.js

@@ -1,11 +1,9 @@
 import React from 'react';
 var defaultValue = [undefined, function () {}];
 export var TaskItemsFormatContext = /*#__PURE__*/React.createContext(defaultValue);
-
 var reducer = function reducer(_state, action) {
   return action;
 };
-
 export function TaskItemsFormatProvider(_ref) {
   var children = _ref.children;
   var value = React.useReducer(reducer, undefined);

package/dist/esm/ui/active-header-id-provider.js

@@ -1,10 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-
 var _React$createContext = /*#__PURE__*/React.createContext(undefined),
-    Provider = _React$createContext.Provider,
-    Consumer = _React$createContext.Consumer;
-
+  Provider = _React$createContext.Provider,
+  Consumer = _React$createContext.Consumer;
 /**
  * We need to expose this abstraction on top of the native Consumer in order to control when
  * The consumer will get notified when a match has happened. If we use the Consumer directly in
@@ -17,13 +15,11 @@ var _React$createContext = /*#__PURE__*/React.createContext(undefined),
  */
 var ActiveHeaderIdConsumer = function ActiveHeaderIdConsumer(_ref) {
   var nestedHeaderIds = _ref.nestedHeaderIds,
-      onNestedHeaderIdMatch = _ref.onNestedHeaderIdMatch;
-
+    onNestedHeaderIdMatch = _ref.onNestedHeaderIdMatch;
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeHeaderId = _useState2[0],
-      setActiveHeaderId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    activeHeaderId = _useState2[0],
+    setActiveHeaderId = _useState2[1];
   return /*#__PURE__*/React.createElement(Consumer, null, function (newActiveHeaderId) {
     if (!newActiveHeaderId || !nestedHeaderIds.includes(newActiveHeaderId)) {
       setActiveHeaderId(undefined);
@@ -31,9 +27,7 @@ var ActiveHeaderIdConsumer = function ActiveHeaderIdConsumer(_ref) {
       setActiveHeaderId(newActiveHeaderId);
       onNestedHeaderIdMatch();
     }
-
     return null;
   });
 };
-
 export { Provider as ActiveHeaderIdProvider, ActiveHeaderIdConsumer };

package/dist/esm/ui/annotations/context.js

@@ -5,54 +5,40 @@ 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";
-
 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; } }
-
 import React, { createContext } from 'react';
 export var AnnotationsDraftContext = /*#__PURE__*/createContext(null);
 export var ProvidersContext = /*#__PURE__*/createContext(null);
 export var InlineCommentsStateContext = /*#__PURE__*/createContext({});
 export var AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(AnnotationsDraftContextWrapper, _React$Component);
-
   var _super = _createSuper(AnnotationsDraftContextWrapper);
-
   function AnnotationsDraftContextWrapper() {
     var _this;
-
     _classCallCheck(this, AnnotationsDraftContextWrapper);
-
     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), "state", {
       position: null
     });
-
     _defineProperty(_assertThisInitialized(_this), "applyAnnotationDraftAt", function (nextPosition) {
       var position = _this.state.position;
-
       if (!position) {
         _this.setState({
           position: nextPosition
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "clearAnnotationDraft", function () {
       _this.setState({
         position: null
       });
     });
-
     return _this;
   }
-
   _createClass(AnnotationsDraftContextWrapper, [{
     key: "render",
     value: function render() {
@@ -68,6 +54,5 @@ export var AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Compon
       }));
     }
   }]);
-
   return AnnotationsDraftContextWrapper;
 }(React.Component);

package/dist/esm/ui/annotations/draft/component.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -12,14 +10,12 @@ import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-
 var markStyles = function markStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
 };
-
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
-      children = _ref.children;
+    children = _ref.children;
   return jsx("mark", _extends({
     "data-renderer-mark": true
   }, dataAttributes(draftPosition), {
@@ -30,21 +26,18 @@ export var getAnnotationIndex = function getAnnotationIndex(annotationPosition,
   if (annotationPosition === InsertDraftPosition.START) {
     return 0;
   }
-
   if (annotationPosition === InsertDraftPosition.END) {
     return fragmentCount - 1;
   }
-
   if (annotationPosition === InsertDraftPosition.INSIDE && fragmentCount === 3) {
     return 1;
   }
-
   return -1;
 };
 export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var texts = _ref2.texts,
-      shouldApplyAnnotationAt = _ref2.shouldApplyAnnotationAt,
-      draftPosition = _ref2.draftPosition;
+    shouldApplyAnnotationAt = _ref2.shouldApplyAnnotationAt,
+    draftPosition = _ref2.draftPosition;
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
     if (annotateIndex === index) {
@@ -53,7 +46,6 @@ export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
         draftPosition: draftPosition
       }, value);
     }
-
     return jsx(React.Fragment, {
       key: index
     }, value);
@@ -61,8 +53,8 @@ export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
 };
 export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
-      endPos = _ref3.endPos,
-      children = _ref3.children;
+    endPos = _ref3.endPos,
+    children = _ref3.children;
   var textPosition = React.useMemo(function () {
     return {
       start: startPos,
@@ -74,28 +66,22 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     if (!nextDraftPosition) {
       return false;
     }
-
     return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
-
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
     return jsx(Fragment, null, children);
   }
-
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
     return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
   }
-
   var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
   var texts = splitText(children, offsets);
-
   if (!texts) {
     return jsx(Fragment, null, children);
   }
-
   var components = applyAnnotationOnText({
     texts: texts,
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,

package/dist/esm/ui/annotations/draft/dom.js

@@ -2,36 +2,28 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 export var dataAttributes = function dataAttributes(_ref) {
   var _ref2;
-
   var from = _ref.from,
-      to = _ref.to;
+    to = _ref.to;
   return _ref2 = {}, _defineProperty(_ref2, 'data-annotation-draft-mark', true), _defineProperty(_ref2, 'data-draft-start-at', from), _defineProperty(_ref2, 'data-draft-end-at', to), _ref2;
 };
-
 var buildDataAttributesQuery = function buildDataAttributesQuery(pos) {
   var a = dataAttributes(pos);
   return Object.entries(a).map(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
-        k = _ref4[0],
-        v = _ref4[1];
-
+      k = _ref4[0],
+      v = _ref4[1];
     return "[".concat(k, "=\"").concat(v, "\"]");
   }).join('');
 };
-
 export var updateWindowSelectionAroundDraft = function updateWindowSelectionAroundDraft(pos) {
   var sel = window.getSelection();
-
   if (!sel) {
     return false;
   }
-
   var draftNodes = document.querySelectorAll(buildDataAttributesQuery(pos));
-
   if (!draftNodes || draftNodes.length === 0) {
     return false;
   }
-
   sel.removeAllRanges();
   var range = document.createRange();
   range.setStart(draftNodes[0], 0);

package/dist/esm/ui/annotations/draft/position.js

@@ -1,30 +1,22 @@
 import { InsertDraftPosition } from '../types';
 export var calcInsertDraftPositionOnText = function calcInsertDraftPositionOnText(_ref, position) {
   var startTextPosition = _ref.start,
-      endTextPosition = _ref.end;
+    endTextPosition = _ref.end;
   var isRangePositionAroundText = position.from <= startTextPosition && position.to >= endTextPosition;
-
   if (isRangePositionAroundText) {
     return InsertDraftPosition.AROUND_TEXT;
   }
-
   var isRangePositionInsideText = position.from > startTextPosition && position.from < endTextPosition && position.to < endTextPosition && position.to > startTextPosition;
-
   if (isRangePositionInsideText) {
     return InsertDraftPosition.INSIDE;
   }
-
   var isRangePositionStartingAtText = position.from >= startTextPosition && position.from <= endTextPosition && position.to >= endTextPosition;
-
   if (isRangePositionStartingAtText) {
     return InsertDraftPosition.END;
   }
-
   var isRangePositionEndingAtText = position.from <= startTextPosition && position.to >= startTextPosition && position.to <= endTextPosition;
-
   if (isRangePositionEndingAtText) {
     return InsertDraftPosition.START;
   }
-
   return false;
 };

package/dist/esm/ui/annotations/draft/text.js

@@ -1,16 +1,14 @@
 export var splitText = function splitText(text, _ref) {
   var startOffset = _ref.startOffset,
-      endOffset = _ref.endOffset;
-
+    endOffset = _ref.endOffset;
   if (endOffset > text.length || endOffset - startOffset <= 0) {
     return null;
   }
-
   return [text.slice(0, startOffset), text.slice(startOffset, endOffset), text.slice(endOffset)].filter(Boolean);
 };
 export var calcTextSplitOffset = function calcTextSplitOffset(position, textPosition, text) {
   var start = textPosition.start,
-      end = textPosition.end;
+    end = textPosition.end;
   var startOffset = Math.max(position.from - start, 0);
   var endOffset = Math.min(Math.abs(end - position.to - text.length), text.length);
   return {