@atlaskit/editor-common 72.2.0 → 72.2.2

package/dist/es2019/ui/PortalProvider/index.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 var _class;
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
@@ -15,19 +13,15 @@ import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export class PortalProviderAPI extends EventDispatcher {
   constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
     super();
-
     _defineProperty(this, "portals", new Map());
-
     _defineProperty(this, "setContext", context => {
       this.context = context;
     });
-
     this.intl = intl;
     this.onAnalyticsEvent = onAnalyticsEvent;
     this.useAnalyticsContext = analyticsContext;
     this.themeMode = themeMode;
   }
-
   render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
     this.portals.set(container, {
       children: children,
@@ -38,19 +32,17 @@ export class PortalProviderAPI extends EventDispatcher {
       mode: this.themeMode
     }, children());
     let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
-
     if (hasIntlContext) {
       wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
         value: this.intl
       }, wrappedChildren);
     }
-
     unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
-  } // TODO: until https://product-fabric.atlassian.net/browse/ED-5013
+  }
+
+  // TODO: until https://product-fabric.atlassian.net/browse/ED-5013
   // we (unfortunately) need to re-render to pass down any updated context.
   // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
-
-
   forceUpdate({
     intl,
     themeMode
@@ -61,34 +53,30 @@ export class PortalProviderAPI extends EventDispatcher {
       if (!portal.hasAnalyticsContext && !this.useAnalyticsContext && !portal.hasIntlContext) {
         return;
       }
-
       let wrappedChildren = portal.children();
       const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
         mode: themeMode
       }, wrappedChildren);
-
       if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
       }
-
       if (portal.hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
         }, childrenWithThemeProviders);
       }
-
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
     });
   }
-
   remove(container) {
-    this.portals.delete(container); // There is a race condition that can happen caused by Prosemirror vs React,
+    this.portals.delete(container);
+
+    // There is a race condition that can happen caused by Prosemirror vs React,
     // where Prosemirror removes the container from the DOM before React gets
     // around to removing the child from the container
     // This will throw a NotFoundError: The node to be removed is not a child of this node
     // Both Prosemirror and React remove the elements asynchronously, and in edge
     // cases Prosemirror beats React
-
     try {
       unmountComponentAtNode(container);
     } catch (error) {
@@ -112,30 +100,23 @@ export class PortalProviderAPI extends EventDispatcher {
       }
     }
   }
-
 }
-
 class BasePortalProvider extends React.Component {
   constructor(props) {
     super(props);
     this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
   }
-
   render() {
     return this.props.render(this.portalProviderAPI);
   }
-
   componentDidUpdate() {
     this.portalProviderAPI.forceUpdate({
       intl: this.props.intl,
       themeMode: this.props.themeMode
     });
   }
-
 }
-
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
-
 export const PortalProvider = injectIntl(BasePortalProvider);
 export const PortalProviderWithThemeProviders = ({
   onAnalyticsEvent,
@@ -146,7 +127,6 @@ export const PortalProviderWithThemeProviders = ({
   useAnalyticsContext: useAnalyticsContext,
   render: render
 }));
-
 const PortalProviderWithThemeAndIntlProviders = ({
   onAnalyticsEvent,
   useAnalyticsContext,
@@ -162,39 +142,32 @@ const PortalProviderWithThemeAndIntlProviders = ({
     render: render
   });
 };
-
 export class PortalRenderer extends React.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "handleUpdate", portals => this.setState({
       portals
     }));
-
     props.portalProviderAPI.setContext(this);
     props.portalProviderAPI.on('update', this.handleUpdate);
     this.state = {
       portals: new Map()
     };
   }
-
   render() {
     const {
       portals
     } = this.state;
     return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(portals.entries()).map(([container, children]) => /*#__PURE__*/createPortal(children, container)));
   }
-
 }
+
 /**
  * Wrapper to re-provide modern analytics context to ReactNodeViews.
  */
-
 const dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext() {},
-
   getAtlaskitAnalyticsEventHandlers() {}
-
 };
 const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends React.Component {
   render() {
@@ -207,7 +180,6 @@ const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends
       value: value
     }, this.props.children);
   }
-
 }, _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
 }), _class);

package/dist/es2019/ui/UnsupportedBlock/index.js

@@ -28,7 +28,6 @@ const blockNodeStyle = css`
   align-items: center;
   justify-content: center;
 `;
-
 const UnsupportedBlockNode = ({
   node,
   intl,
@@ -59,5 +58,4 @@ const UnsupportedBlockNode = ({
     size: "small"
   }))));
 };
-
 export default injectIntl(UnsupportedBlockNode);

package/dist/es2019/ui/UnsupportedInline/index.js

@@ -26,7 +26,6 @@ const inlineNodeStyle = css`
   vertical-align: middle;
   white-space: nowrap;
 `;
-
 const UnsupportedInlineNode = ({
   node,
   intl,
@@ -56,5 +55,4 @@ const UnsupportedInlineNode = ({
     size: "small"
   }))));
 };
-
 export default injectIntl(UnsupportedInlineNode);

package/dist/es2019/ui/WidthProvider/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,13 +8,11 @@ const SCROLLBAR_WIDTH = 30;
 export function getBreakpoint(width = 0) {
   const MAX_S = 1266;
   const MAX_M = 2146;
-
   if (width >= MAX_S && width < MAX_M) {
     return 'M';
   } else if (width >= MAX_M) {
     return 'L';
   }
-
   return 'S';
 }
 export function createWidthContext(width = 0) {
@@ -32,25 +29,20 @@ const {
 export class WidthProvider extends React.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       width: 0
     });
-
     _defineProperty(this, "setWidth", rafSchedule(width => {
       // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
       if (Math.abs(this.state.width - width) < SCROLLBAR_WIDTH) {
         return;
       }
-
       this.setState({
         width
       });
     }));
-
     this.state.width = document.body.offsetWidth;
   }
-
   render() {
     return jsx("div", {
       css: css`
@@ -65,6 +57,5 @@ export class WidthProvider extends React.Component {
       value: createWidthContext(this.state.width)
     }, this.props.children));
   }
-
 }
 export { Consumer as WidthConsumer };

package/dist/es2019/ui/WithCreateAnalyticsEvent/index.js

@@ -8,5 +8,4 @@ export const WithCreateAnalyticsEvent = withAnalyticsEvents()(class WithCreateAn
     } = this.props;
     return render(createAnalyticsEvent);
   }
-
 });

package/dist/es2019/ui/clear-next-sibling-margin-top.js

@@ -1,5 +1,6 @@
-import { css } from '@emotion/react'; // We use !important to ensure next sibling gets the margin reset no matter what
+import { css } from '@emotion/react';
 
+// We use !important to ensure next sibling gets the margin reset no matter what
 const marginTopReset = `margin-top: 0 !important;`;
 export const clearNextSiblingMarginTopStyle = css`
   & + * {

package/dist/es2019/ui/unsupported-content-helper.js

@@ -3,12 +3,10 @@ export function getUnsupportedContent(message, prefix, node, intl) {
   let canTranslateToLocale = true;
   let locale = intl ? intl.locale : defaultLocale;
   let finalMessage = message.defaultMessage;
-
   if (node && locale.startsWith(defaultLocale)) {
     const {
       originalValue
     } = node.attrs;
-
     if (originalValue.text || originalValue.attrs && originalValue.attrs.text) {
       finalMessage = originalValue.text ? originalValue.text : originalValue.attrs.text;
       canTranslateToLocale = false;
@@ -17,10 +15,8 @@ export function getUnsupportedContent(message, prefix, node, intl) {
       canTranslateToLocale = false;
     }
   }
-
   if (intl && canTranslateToLocale) {
     return intl.formatMessage(message);
   }
-
   return finalMessage;
 }

package/dist/es2019/ui/with-outer-listeners.js

@@ -5,7 +5,6 @@ export default function withOuterListeners(Component) {
   return class WithOutsideClick extends PureComponent {
     constructor(...args) {
       super(...args);
-
       _defineProperty(this, "handleClick", evt => {
         const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
 
@@ -15,37 +14,30 @@ export default function withOuterListeners(Component) {
           }
         }
       });
-
       _defineProperty(this, "handleKeydown", evt => {
         if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
           this.props.handleEscapeKeydown(evt);
         }
       });
     }
-
     componentDidMount() {
       if (this.props.handleClickOutside) {
         document.addEventListener('click', this.handleClick, false);
       }
-
       if (this.props.handleEscapeKeydown) {
         document.addEventListener('keydown', this.handleKeydown, false);
       }
     }
-
     componentWillUnmount() {
       if (this.props.handleClickOutside) {
         document.removeEventListener('click', this.handleClick, false);
       }
-
       if (this.props.handleEscapeKeydown) {
         document.removeEventListener('keydown', this.handleKeydown, false);
       }
     }
-
     render() {
       return /*#__PURE__*/React.createElement(Component, this.props);
     }
-
   };
 }

package/dist/es2019/ui-color/ColorPalette/Color/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,15 +7,12 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle } from './styles';
-
 class Color extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "onMouseDown", e => {
       e.preventDefault();
     });
-
     _defineProperty(this, "onClick", e => {
       const {
         onClick,
@@ -27,7 +23,6 @@ class Color extends PureComponent {
       onClick(value, label);
     });
   }
-
   render() {
     const {
       autoFocus,
@@ -36,12 +31,9 @@ class Color extends PureComponent {
       label,
       isSelected,
       borderColor,
-
       /** this is not new usage - old code extracted from editor-core */
-
       /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
       checkMarkColor = N0,
-
       /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
       useDesignTokens
     } = this.props;
@@ -69,7 +61,5 @@ class Color extends PureComponent {
       label: ""
     }))));
   }
-
 }
-
 export default Color;

package/dist/es2019/ui-color/ColorPalette/Color/styles.js

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
 import { N0, N50, N900 } from '@atlaskit/theme/colors';
-/** this is not new usage - old code extracted from editor-core */
 
+/** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 export const buttonStyle = css`
   height: 26px;
   width: 26px;
@@ -17,9 +16,7 @@ export const buttonStyle = css`
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 /** this is not new usage - old code extracted from editor-core */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 export const buttonWrapperStyle = css`
   border: 1px solid transparent;
   margin: 1px;

package/dist/es2019/ui-color/ColorPalette/Palettes/common.js

@@ -1,5 +1,6 @@
 import chromatism from 'chromatism';
 import { N800 } from '@atlaskit/theme/colors';
+
 /**
  * For a given color set the alpha channel to alpha
  *
@@ -7,7 +8,6 @@ import { N800 } from '@atlaskit/theme/colors';
  * @param alpha Alpha channel value as fraction of 1
  * @return CSS RGBA string with applied alpha channel
  */
-
 function setAlpha(color, alpha) {
   const {
     r,
@@ -16,10 +16,8 @@ function setAlpha(color, alpha) {
   } = chromatism.convert(color).rgb;
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-/** this is not new usage - old code extracted from editor-core */
 
+/** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-
 export const DEFAULT_BORDER_COLOR = setAlpha(N800, 0.12);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/getColorMessage.js

@@ -1,6 +1,5 @@
 export default function getColorMessage(messages, color) {
   let message = messages[color];
-
   if (!message) {
     // eslint-disable-next-line no-console
     console.warn(`Text color palette does not have an internationalization message for color ${color.toUpperCase()}.
@@ -9,6 +8,5 @@ Using current label as default message.
 This could have happen when someone changed the 'colorPalette' from 'adf-schema' without updating this file.
 `);
   }
-
   return message;
 }

package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -1,6 +1,7 @@
-import { defineMessages } from 'react-intl-next'; // These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
-// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
+import { defineMessages } from 'react-intl-next';
 
+// These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
+// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
 export const newLightPalette = defineMessages({
   '#FFFFFF': {
     id: 'fabric.theme.white',
@@ -115,6 +116,7 @@ const darkModeWhite = defineMessages({
     description: 'Name of a color'
   }
 });
-export const newDarkPalette = { ...newLightPalette,
+export const newDarkPalette = {
+  ...newLightPalette,
   ...darkModeWhite
 };

package/dist/es2019/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -3,9 +3,7 @@
 import { colors } from '@atlaskit/theme';
 import { darkPanelColors } from '../../../panel';
 import { DEFAULT_BORDER_COLOR } from './common';
-
 /** this is not new usage - old code extracted from editor-core */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const panelBackgroundPalette = [{
   label: 'White',
@@ -70,7 +68,8 @@ export const panelBackgroundPalette = [{
 }, {
   label: 'Dark purple',
   value: colors.P100
-}].map(color => ({ ...color,
+}].map(color => ({
+  ...color,
   border: DEFAULT_BORDER_COLOR
 }));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
@@ -138,6 +137,7 @@ export const panelDarkModeBackgroundPalette = [{
 }, {
   label: 'Light purple',
   value: darkPanelColors.P800S
-}].map(color => ({ ...color,
+}].map(color => ({
+  ...color,
   border: DEFAULT_BORDER_COLOR
 }));

package/dist/es2019/ui-color/ColorPalette/Palettes/statusColorPalette.js

@@ -1,7 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
-
 /** this is not new usage - old code extracted from editor-core */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const lightModeStatusColorPalette = [{
   label: 'neutral',

package/dist/es2019/ui-color/ColorPalette/Palettes/textColorPalette.js

@@ -2,7 +2,6 @@ import { colorPalette } from '@atlaskit/adf-schema';
 import { DEFAULT_BORDER_COLOR } from './common';
 import getColorMessage from './getColorMessage';
 import paletteMessages from './paletteMessages';
-
 const mapPaletteColor = (label, color) => {
   const key = label.toLowerCase().replace(' ', '-');
   const message = getColorMessage(paletteMessages, key);
@@ -12,9 +11,9 @@ const mapPaletteColor = (label, color) => {
     border: DEFAULT_BORDER_COLOR,
     message
   };
-}; // row 1
-
+};
 
+// row 1
 export const textColorPalette = [];
 colorPalette.forEach((label, color) => {
   textColorPalette.push(mapPaletteColor(label, color));

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -9,7 +9,6 @@ import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
-
 /**
  * For a given color pick the color from a list of colors with
  * the highest contrast
@@ -20,18 +19,16 @@ import { colorPaletteWrapper } from './styles';
 function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   const contrastColor = [N0, N500].sort((a, b) => chromatism.difference(b, color) - chromatism.difference(a, color))[0];
-
   if (!textPalette) {
     return contrastColor;
-  } // Use of these token comes from guidance from designers in the Design System team
+  }
+
+  // Use of these token comes from guidance from designers in the Design System team
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-
   return contrastColor === N0 ? `var(--ds-icon-inverse, ${N0})` : `var(--ds-icon, ${N500})`;
 }
-
 const ColorPalette = props => {
   const {
     palette,
@@ -50,7 +47,6 @@ const ColorPalette = props => {
     return palette.reduce((resultArray, item, index) => {
       const chunkIndex = Math.floor(index / cols);
       resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
-
       resultArray[chunkIndex].push(item);
       return resultArray;
     }, []);
@@ -70,12 +66,10 @@ const ColorPalette = props => {
       if (tokenTheme === 'dark') {
         message = getColorMessage(newDarkPalette, value.toUpperCase());
       }
-
       if (tokenTheme === 'light') {
         message = getColorMessage(newLightPalette, value.toUpperCase());
       }
     }
-
     return jsx(Color, {
       key: value,
       value: value,
@@ -88,5 +82,4 @@ const ColorPalette = props => {
     });
   }))));
 };
-
 export default injectIntl(ColorPalette);

package/dist/es2019/ui-menu/Dropdown/index.js

@@ -4,7 +4,6 @@ import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
-
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * droplist outside of "overflow: hidden" containers when needed.
@@ -14,24 +13,20 @@ import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvide
 export class Dropdown extends PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "handleRef", target => {
       this.setState({
         target: target || undefined
       });
     });
-
     _defineProperty(this, "updatePopupPlacement", placement => {
       this.setState({
         popupPlacement: placement
       });
     });
-
     this.state = {
       popupPlacement: ['bottom', 'left']
     };
   }
-
   renderDropdown() {
     const {
       target,
@@ -78,7 +73,6 @@ export class Dropdown extends PureComponent {
       shouldFitContainer: true
     }, children))));
   }
-
   render() {
     const {
       trigger,
@@ -88,7 +82,6 @@ export class Dropdown extends PureComponent {
       ref: this.handleRef
     }, trigger), isOpen ? this.renderDropdown() : null);
   }
-
 }
 const DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);
 export default DropdownWithOuterListeners;