@atlaskit/editor-core 178.1.1 → 178.1.2

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -5,11 +5,8 @@ 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; } }
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -22,73 +19,55 @@ import { FullPageToolbar } from './FullPageToolbar';
 import { getFeatureFlags } from '../../../plugins/feature-flags-context';
 export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(FullPageEditor, _React$Component);
-
   var _super = _createSuper(FullPageEditor);
-
   // Wrapper container for toolbar and content area
+
   function FullPageEditor(props) {
     var _this;
-
     _classCallCheck(this, FullPageEditor);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       showKeyline: false
     });
-
     _defineProperty(_assertThisInitialized(_this), "scrollContainer", null);
-
     _defineProperty(_assertThisInitialized(_this), "wrapperElementRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "contentAreaRef", function (contentArea) {
       _this.contentArea = contentArea;
     });
-
     _defineProperty(_assertThisInitialized(_this), "scrollContainerRef", function (ref) {
-      var previousScrollContainer = _this.scrollContainer; // remove existing handler
+      var previousScrollContainer = _this.scrollContainer;
 
+      // remove existing handler
       if (previousScrollContainer) {
         previousScrollContainer.removeEventListener('scroll', _this.updateToolbarKeyline);
       }
-
       _this.scrollContainer = ref ? ref : null;
-
       if (_this.scrollContainer) {
         _this.scrollContainer.addEventListener('scroll', _this.updateToolbarKeyline, false);
-
         _this.updateToolbarKeyline();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "updateToolbarKeyline", rafSchedule(function () {
       if (!_this.scrollContainer) {
         return false;
       }
-
       var scrollTop = _this.scrollContainer.scrollTop;
       var showKeyline = scrollTop > akEditorToolbarKeylineHeight;
-
       if (showKeyline !== _this.state.showKeyline) {
         _this.setState({
           showKeyline: showKeyline
         });
       }
-
       return false;
     }));
-
     _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
       _this.updateToolbarKeyline();
     });
-
     if (props.innerRef) {
       _this.wrapperElementRef = props.innerRef;
     }
-
     return _this;
   }
-
   _createClass(FullPageEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -104,7 +83,6 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _props$editorView;
-
       var props = this.props;
       var showKeyline = this.state.showKeyline;
       var featureFlags = (_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.state ? getFeatureFlags(props.editorView.state) : undefined;
@@ -155,8 +133,6 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-
   return FullPageEditor;
 }(React.Component);
-
 _defineProperty(FullPageEditor, "displayName", 'FullPageEditor');

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import React, { useState, useEffect } from 'react';
 import { jsx } from '@emotion/react';
@@ -14,12 +13,10 @@ import messages from './messages';
 import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
 export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags5, _props$featureFlags6;
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      shouldSplitToolbar = _useState2[0],
-      setShouldSplitToolbar = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldSplitToolbar = _useState2[0],
+    setShouldSplitToolbar = _useState2[1];
   var nonCustomToolbar = jsx("div", {
     css: nonCustomToolbarWrapperStyle
   }, props.beforeIcon && jsx("div", {
@@ -60,12 +57,10 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
   }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
   useEffect(function () {
     var _props$featureFlags7;
-
     if ((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar) {
       var updateOnResize = function updateOnResize() {
         setShouldSplitToolbar(window.innerWidth <= MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
       };
-
       window.addEventListener('resize', updateOnResize);
       updateOnResize();
       return function () {
@@ -73,25 +68,19 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       };
     }
   });
-
   var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
     //Alt + F9 to reach first element in this main toolbar
     return event.altKey && (event.key === 'F9' || event.keyCode === 120);
   };
-
   var handleEscape = function handleEscape(event) {
     var _props$editorView;
-
     if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
       var _props$editorView2;
-
       (_props$editorView2 = props.editorView) === null || _props$editorView2 === void 0 ? void 0 : _props$editorView2.focus();
     }
   };
-
   return jsx(ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
-
     var contextPanelWidth = _ref.width;
     return jsx(ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,14 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-var toolbarLineHeight = 56; // box-shadow is overriden by the mainToolbar
+var toolbarLineHeight = 56;
 
+// box-shadow is overriden by the mainToolbar
 var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
 var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, "var(--ds-surface, white)", akEditorMobileMaxWidth, toolbarLineHeight);

package/dist/esm/ui/Appearance/FullPage/StyledComponents.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 import { css } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
@@ -14,31 +12,30 @@ var TOTAL_PADDING = akEditorGutterPadding * 2;
 export var fullPageEditorWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
 var scrollStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
 export var ScrollContainer = createEditorContentStyle(scrollStyles);
-ScrollContainer.displayName = 'ScrollContainer'; // transition used to match scrollbar with config panel opening animation
-// only use animation when opening as there is a bug with floating toolbars.
+ScrollContainer.displayName = 'ScrollContainer';
 
+// transition used to match scrollbar with config panel opening animation
+// only use animation when opening as there is a bug with floating toolbars.
 export var positionedOverEditorStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  transition: padding 500ms ", ";\n"])), akEditorContextPanelWidth, akEditorSwoopCubicBezier);
 export var contentArea = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  transition: padding 0ms ", ";\n"])), ATLASSIAN_NAVIGATION_HEIGHT, akEditorSwoopCubicBezier);
-export var sidebarArea = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"]))); // initially hide until we have a containerWidth and can properly size them,
-// otherwise they can cause the editor width to extend which is non-recoverable
+export var sidebarArea = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"])));
 
+// initially hide until we have a containerWidth and can properly size them,
+// otherwise they can cause the editor width to extend which is non-recoverable
 export var editorContentAreaHideContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      display: none;\n    }\n  }\n"])));
-/* Prevent horizontal scroll on page in full width mode */
 
+/* Prevent horizontal scroll on page in full width mode */
 var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      max-width: ", "px;\n    }\n\n    [data-layout-section] {\n      max-width: ", "px;\n    }\n  }\n"])), containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2);
 };
-
 export var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
-      fullWidthMode = _ref.fullWidthMode,
-      containerWidth = _ref.containerWidth;
+    fullWidthMode = _ref.fullWidthMode,
+    containerWidth = _ref.containerWidth;
   return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
 };
-
 var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
   return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), layoutMaxWidth + TOTAL_PADDING);
 };
-
 var editorContentArea = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n  }\n"])), akEditorFullWidthLayoutWidth + TOTAL_PADDING, SWOOP_ANIMATION, taskListSelector, decisionListSelector, tableFullPageEditorStyles);
 export var editorContentGutterStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), akEditorGutterPadding);

package/dist/esm/ui/Appearance/Mobile.js

@@ -3,10 +3,10 @@ import { MobileAppearance } from '../AppearanceComponents/Mobile';
 import WidthEmitter from '../WidthEmitter';
 export default function Mobile(_ref) {
   var editorView = _ref.editorView,
-      maxHeight = _ref.maxHeight,
-      persistScrollGutter = _ref.persistScrollGutter,
-      editorDOMElement = _ref.editorDOMElement,
-      disabled = _ref.disabled;
+    maxHeight = _ref.maxHeight,
+    persistScrollGutter = _ref.persistScrollGutter,
+    editorDOMElement = _ref.editorDOMElement,
+    disabled = _ref.disabled;
   return /*#__PURE__*/React.createElement(MobileAppearance, {
     editorView: editorView || null,
     maxHeight: maxHeight,

package/dist/esm/ui/AppearanceComponents/Mobile.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -16,21 +14,20 @@ var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export function MobileAppearance(_ref) {
   var editorView = _ref.editorView,
-      persistScrollGutter = _ref.persistScrollGutter,
-      children = _ref.children,
-      editorDisabled = _ref.editorDisabled;
+    persistScrollGutter = _ref.persistScrollGutter,
+    children = _ref.children,
+    editorDisabled = _ref.editorDisabled;
   var render = useCallback(function (_ref2) {
     var maxContentSize = _ref2.maxContentSize,
-        mobileDimensions = _ref2.mobileDimensions;
+      mobileDimensions = _ref2.mobileDimensions;
     var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
     var minHeight = 100;
     var currentIsExpanded = true; // isExpanded prop should always be true for Hybrid Editor
-
     if (mobileDimensions) {
       var keyboardHeight = mobileDimensions.keyboardHeight,
-          windowHeight = mobileDimensions.windowHeight,
-          mobilePaddingTop = mobileDimensions.mobilePaddingTop,
-          isExpanded = mobileDimensions.isExpanded;
+        windowHeight = mobileDimensions.windowHeight,
+        mobilePaddingTop = mobileDimensions.mobilePaddingTop,
+        isExpanded = mobileDimensions.isExpanded;
       /*
         We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
         This is needed due to scrolling issues when there is no content to scroll (like, only having 1 paragraph),
@@ -44,12 +41,11 @@ export function MobileAppearance(_ref) {
         minHeight = windowHeight - keyboardHeight - 2 * mobilePaddingTop;
       } else {
         // in iOS Compact Editor windowHeight excludes keyboardHeight
-        minHeight = windowHeight - mobilePaddingTop; // isExpanded can be true of false for Compact editor
-
+        minHeight = windowHeight - mobilePaddingTop;
+        // isExpanded can be true of false for Compact editor
         currentIsExpanded = isExpanded;
       }
     }
-
     return jsx(WithFlash, {
       animate: maxContentSizeReached
     }, jsx("div", {

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

@@ -5,11 +5,8 @@ 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; } }
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -17,23 +14,16 @@ import { PureComponent } from 'react';
 import { inputStyle } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { messages } from './messages';
-
 var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
   _inherits(ChromeCollapsed, _PureComponent);
-
   var _super = _createSuper(ChromeCollapsed);
-
   function ChromeCollapsed() {
     var _this;
-
     _classCallCheck(this, ChromeCollapsed);
-
     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), "focusHandler", function (evt) {
       /**
        * We need this magic for FireFox.
@@ -44,19 +34,15 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
       if (_this.input) {
         _this.input.blur();
       }
-
       if (_this.props.onFocus) {
         _this.props.onFocus(evt);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (ref) {
       _this.input = ref;
     });
-
     return _this;
   }
-
   _createClass(ChromeCollapsed, [{
     key: "render",
     value: function render() {
@@ -69,8 +55,6 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
       });
     }
   }]);
-
   return ChromeCollapsed;
 }(PureComponent);
-
 export default injectIntl(ChromeCollapsed);

package/dist/esm/ui/ChromeCollapsed/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';

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

@@ -5,44 +5,31 @@ 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 { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
 import EditorWithActions from '../../labs/EditorWithActions';
 import ChromeCollapsed from '../ChromeCollapsed';
-
 var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(CollapsedEditor, _React$Component);
-
   var _super = _createSuper(CollapsedEditor);
-
   function CollapsedEditor() {
     var _this;
-
     _classCallCheck(this, CollapsedEditor);
-
     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), "handleEditorRef", function (editorRef, editorRefCallback) {
       if (editorRefCallback && typeof editorRefCallback === 'function') {
         editorRefCallback(editorRef);
       }
-
       _this.editorComponent = editorRef;
     });
-
     return _this;
   }
-
   _createClass(CollapsedEditor, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -55,7 +42,6 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate() {
       if (this.shouldTriggerExpandEvent && this.editorComponent) {
         this.shouldTriggerExpandEvent = false;
-
         if (this.props.onExpand) {
           this.props.onExpand();
         }
@@ -65,20 +51,16 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var child = React.Children.only(this.props.children);
-
       if (child.type !== Editor && child.type !== EditorWithActions) {
         throw new Error('Expected child to be of type `Editor`');
       }
-
       if (!this.props.isExpanded) {
         return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
           onFocus: this.props.onFocus,
           text: this.props.placeholder
         }));
       }
-
       return /*#__PURE__*/React.cloneElement(child, {
         ref: function ref(editorComponent) {
           return _this2.handleEditorRef(editorComponent, child.ref);
@@ -86,8 +68,6 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
       });
     }
   }]);
-
   return CollapsedEditor;
 }(React.Component);
-
 export { CollapsedEditor as default };

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

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,39 +15,33 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
 // helps adjusts position of popup
-var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
+var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 
+// Control the size of color picker buttons and preview
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 var colorPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;
-
   var buttonRef = React.useRef(null);
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isPopupOpen = _React$useState2[0],
-      setIsPopupOpen = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isPopupOpen = _React$useState2[0],
+    setIsPopupOpen = _React$useState2[1];
   var togglePopup = function togglePopup() {
     setIsPopupOpen(!isPopupOpen);
   };
-
   React.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPopupOpen]);
   var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
-
   var onColorSelected = function onColorSelected(color, label) {
     setIsPopupOpen(false);
-
     if (props.onChange) {
       if (props.createAnalyticsEvent) {
         // fire analytics
@@ -66,26 +58,24 @@ var ColorPickerButton = function ColorPickerButton(props) {
         };
         props.createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
       }
-
       var newPalette = props.colorPalette.find(function (colorPalette) {
         return colorPalette.value === color;
       });
       newPalette && props.onChange(newPalette);
     }
   };
-
   var renderPopup = function renderPopup() {
     if (!isPopupOpen || !buttonRef.current) {
       return;
     }
-
     return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX,
-      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined // Confluence inline comment editor has z-index: 500
+      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined
+      // Confluence inline comment editor has z-index: 500
       // if the toolbar is scrollable, this will be mounted in the root editor
       // we need an index of > 500 to display over it
       ,
@@ -102,7 +92,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
       handleClickOutside: togglePopup
     })));
   };
-
   var title = props.title || '';
   var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", DEFAULT_BORDER_COLOR, borderRadius(), props.currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
   return jsx("div", {
@@ -118,7 +107,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
     css: buttonStyle
   })), renderPopup());
 };
-
 export default withAnalyticsContext({
   source: 'ConfigPanel'
 })(withAnalyticsEvents()(ColorPickerButton));