@atlaskit/editor-core 178.1.0 → 178.1.2

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

@@ -53,19 +53,15 @@ const layoutToMessages = {
   'align-end': commonMessages.alignImageRight,
   'align-start': commonMessages.alignImageLeft
 };
-
 const getNodeWidth = (node, schema) => {
   const {
     embedCard
   } = schema.nodes;
-
   if (node.type === embedCard) {
     return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
   }
-
   return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
 };
-
 const makeAlign = (layout, nodeType) => {
   return (state, dispatch) => {
     const {
@@ -77,23 +73,19 @@ const makeAlign = (layout, nodeType) => {
     const {
       mediaSingle
     } = state.schema.nodes;
-
     if (!dispatch) {
       return false;
     }
-
     const widthPluginState = widthPluginKey.getState(state);
-
     if (!node || node.type !== nodeType || !widthPluginState) {
       return false;
     }
-
     const nodeWidth = getNodeWidth(node, state.schema);
     const newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     const tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
-    tr.setMeta('scrollIntoView', false); // when image captions are enabled, the wrong node gets selected after
+    tr.setMeta('scrollIntoView', false);
+    // when image captions are enabled, the wrong node gets selected after
     // setNodeMarkup is called
-
     tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
     const {
       doc: {
@@ -105,12 +97,12 @@ const makeAlign = (layout, nodeType) => {
           }
         }
       }
-    } = tr; // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
+    } = tr;
 
+    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
     if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
       tr.insert(state.selection.to, paragraph.createAndFill());
     }
-
     dispatch(addAnalytics(state, tr, {
       eventType: EVENT_TYPE.TRACK,
       action: ACTION.SELECTED,
@@ -124,7 +116,6 @@ const makeAlign = (layout, nodeType) => {
     return true;
   };
 };
-
 const mapIconsToToolbarItem = (icons, layout, intl, nodeType) => icons.map(toolbarItem => {
   const {
     id,
@@ -139,36 +130,29 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType) => icons.map(toolb
     onClick: makeAlign(value, nodeType)
   };
 });
-
 const shouldHideLayoutToolbar = (selection, {
   nodes
 }, allowResizingInTables) => {
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
-
 const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingInTables) => {
   const {
     selection
   } = state;
-
   if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
-
   const {
     layout
   } = selection.node.attrs;
   let toolbarItems = [...mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType), {
     type: 'separator'
   }, ...mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType)];
-
   if (!allowResizing) {
     toolbarItems = toolbarItems.concat([{
       type: 'separator'
     }, ...mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType)]);
   }
-
   return toolbarItems;
 };
-
 export default buildLayoutButtons;

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
@@ -10,43 +9,35 @@ const KeyYCode = 89;
 export default class PanelTextInput extends PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "onMouseDown", () => {
       const {
         onMouseDown
       } = this.props;
-
       if (onMouseDown) {
         onMouseDown();
       }
     });
-
     _defineProperty(this, "onBlur", e => {
       const {
         onBlur
       } = this.props;
-
       if (onBlur) {
         onBlur(e);
       }
     });
-
     _defineProperty(this, "handleChange", () => {
       const {
         onChange
       } = this.props;
-
       if (this.input) {
         this.setState({
           value: this.input.value
         });
       }
-
       if (onChange && this.input) {
         onChange(this.input.value);
       }
     });
-
     _defineProperty(this, "handleKeydown", e => {
       const {
         onUndo,
@@ -54,10 +45,8 @@ export default class PanelTextInput extends PureComponent {
         onSubmit,
         onCancel
       } = this.props;
-
       if (e.keyCode === 13 && onSubmit) {
         e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
         onSubmit(this.input.value);
       } else if (e.keyCode === 27 && onCancel) {
         onCancel(e);
@@ -68,16 +57,13 @@ export default class PanelTextInput extends PureComponent {
         e.preventDefault();
         onRedo();
       }
-
       if (this.props.onKeyDown) {
         this.props.onKeyDown(e);
       }
     });
-
     _defineProperty(this, "handleRef", input => {
       if (input instanceof HTMLInputElement) {
         this.input = input;
-
         if (this.props.autoFocus) {
           // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
           this.focusTimeoutId = window.setTimeout(() => this.focus());
@@ -86,12 +72,10 @@ export default class PanelTextInput extends PureComponent {
         this.input = undefined;
       }
     });
-
     this.state = {
       value: props.defaultValue || ''
     };
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.defaultValue !== this.props.defaultValue) {
       this.setState({
@@ -99,11 +83,9 @@ export default class PanelTextInput extends PureComponent {
       });
     }
   }
-
   componentWillUnmount() {
     window.clearTimeout(this.focusTimeoutId);
   }
-
   render() {
     const {
       placeholder,
@@ -142,28 +124,26 @@ export default class PanelTextInput extends PureComponent {
       "aria-label": ariaLabel
     });
   }
-
   focus() {
     const {
       input
     } = this;
-
     if (input) {
       const focusOpts = typeof this.props.autoFocus === 'object' ? this.props.autoFocus : {};
       input.focus(focusOpts);
     }
   }
-
   isUndoEvent(event) {
-    return event.keyCode === KeyZCode && ( // cmd + z for mac
-    browser.mac && event.metaKey && !event.shiftKey || // ctrl + z for non-mac
+    return event.keyCode === KeyZCode && (
+    // cmd + z for mac
+    browser.mac && event.metaKey && !event.shiftKey ||
+    // ctrl + z for non-mac
     !browser.mac && event.ctrlKey);
   }
-
   isRedoEvent(event) {
-    return (// ctrl + y for non-mac
+    return (
+      // ctrl + y for non-mac
       !browser.mac && event.ctrlKey && event.keyCode === KeyYCode || browser.mac && event.metaKey && event.shiftKey && event.keyCode === KeyZCode || event.ctrlKey && event.shiftKey && event.keyCode === KeyZCode
     );
   }
-
 }

package/dist/es2019/ui/PluginSlot/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';
@@ -12,9 +11,7 @@ const pluginsComponentsWrapper = css`
 export default class PluginSlot extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "transitionEvent", whichTransitionEvent());
-
     _defineProperty(this, "forceComponentUpdate", event => {
       // Only trigger an update if the transition is on a property containing `width`
       // This will cater for media and the content area itself currently.
@@ -22,13 +19,11 @@ export default class PluginSlot extends React.Component {
         this.forceUpdate();
       }
     });
-
     _defineProperty(this, "removeModeChangeListener", contentArea => {
       if (contentArea && this.transitionEvent) {
         contentArea.removeEventListener(this.transitionEvent, this.forceComponentUpdate);
       }
     });
-
     _defineProperty(this, "addModeChangeListener", contentArea => {
       if (contentArea && this.transitionEvent) {
         /**
@@ -39,7 +34,6 @@ export default class PluginSlot extends React.Component {
       }
     });
   }
-
   shouldComponentUpdate(nextProps) {
     const {
       editorView,
@@ -56,22 +50,18 @@ export default class PluginSlot extends React.Component {
     } = this.props;
     return !(nextProps.editorView === editorView && nextProps.editorActions === editorActions && nextProps.items === items && nextProps.providerFactory === providerFactory && nextProps.eventDispatcher === eventDispatcher && nextProps.popupsMountPoint === popupsMountPoint && nextProps.popupsBoundariesElement === popupsBoundariesElement && nextProps.popupsScrollableElement === popupsScrollableElement && nextProps.containerElement === containerElement && nextProps.disabled === disabled && nextProps.wrapperElement === wrapperElement);
   }
-
   componentDidMount() {
     this.addModeChangeListener(this.props.contentArea);
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.contentArea !== nextProps.contentArea) {
       this.removeModeChangeListener(this.props.contentArea);
       this.addModeChangeListener(nextProps.contentArea);
     }
   }
-
   componentWillUnmount() {
     this.removeModeChangeListener(this.props.contentArea);
   }
-
   render() {
     const {
       items,
@@ -88,11 +78,9 @@ export default class PluginSlot extends React.Component {
       dispatchAnalyticsEvent,
       wrapperElement
     } = this.props;
-
     if (!items || !editorView) {
       return null;
     }
-
     return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.PLUGIN_SLOT,
       fallbackComponent: null
@@ -119,7 +107,5 @@ export default class PluginSlot extends React.Component {
       return element && /*#__PURE__*/React.cloneElement(element, props);
     })));
   }
-
 }
-
 _defineProperty(PluginSlot, "displayName", 'PluginSlot');

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

@@ -7,7 +7,8 @@ export function PortalProviderThemeProviders(props) {
     children,
     mode
   } = props;
-  const styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  const styledComponentsAndEmotionTheme = React.useMemo(
+  // This return value should only be one of the following
   // - { [CHANNEL]: { mode },
   // - { theme: { [CHANNEL]: { mode } }
   // However, it appears that consumers have inconsistent expectations

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 { createPortal, unstable_renderSubtreeIntoContainer, unmountComponentAtNode } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -15,19 +13,15 @@ import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 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) {
@@ -111,30 +99,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,
@@ -145,7 +126,6 @@ export const PortalProviderWithThemeProviders = ({
   useAnalyticsContext: useAnalyticsContext,
   render: render
 }));
-
 const PortalProviderWithThemeAndIntlProviders = ({
   onAnalyticsEvent,
   useAnalyticsContext,
@@ -161,39 +141,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() {
@@ -206,7 +179,6 @@ const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends
       value: value
     }, this.props.children);
   }
-
 }, _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
 }), _class);

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

@@ -7,7 +7,6 @@ import { snapTo, handleSides } from './utils';
 import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics';
-
 const getResizeAnalyticsEvent = (type, size, layout) => {
   const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {
@@ -21,25 +20,19 @@ const getResizeAnalyticsEvent = (type, size, layout) => {
     eventType: EVENT_TYPE.UI
   };
 };
-
 const getWidthFromSnapPoints = (width, snapPoints) => {
   if (snapPoints.length) {
     return Math.min(Math.max(width, snapPoints[0]), snapPoints[snapPoints.length - 1]);
   }
-
   return width;
 };
-
 export default class Resizer extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "resizable", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "state", {
       isResizing: false
     });
-
     _defineProperty(this, "handleResizeStart", event => {
       const {
         innerPadding = 0,
@@ -48,8 +41,9 @@ export default class Resizer extends React.Component {
         layout,
         width,
         snapPoints
-      } = this.props; // prevent creating a drag event on Firefox
+      } = this.props;
 
+      // prevent creating a drag event on Firefox
       event.preventDefault();
       this.setState({
         isResizing: true
@@ -58,7 +52,6 @@ export default class Resizer extends React.Component {
         displayGrid(newHighlights.length > 0, gridTypeForLayout(layout), newHighlights);
       });
     });
-
     _defineProperty(this, "handleResize", (_event, _direction, _elementRef, delta) => {
       const {
         highlights,
@@ -74,18 +67,14 @@ export default class Resizer extends React.Component {
       const {
         isResizing
       } = this.state;
-
       if (!resizable || !resizable.state.original || !isResizing) {
         return;
       }
-
       const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width * (scaleFactor || 1), snapPoints);
       const newSize = calcNewSize(newWidth + innerPadding, false);
-
       if (newSize.layout !== layout) {
         updateSize(newSize.width, newSize.layout);
       }
-
       const newHighlights = highlights(newWidth, snapPoints);
       displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
       resizable.updateSize({
@@ -96,7 +85,6 @@ export default class Resizer extends React.Component {
         isResizing: true
       });
     });
-
     _defineProperty(this, "handleResizeStop", (_event, _direction, _elementRef, delta) => {
       const {
         highlights,
@@ -112,21 +100,17 @@ export default class Resizer extends React.Component {
       const {
         isResizing
       } = this.state;
-
       if (!resizable || !resizable.state.original || !isResizing) {
         return;
       }
-
       const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width, snapPoints);
       const snapWidth = snapTo(newWidth, snapPoints);
       const newSize = calcNewSize(snapWidth, true);
       const newHighlights = highlights(newWidth, snapPoints);
-
       if (dispatchAnalyticsEvent) {
         dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
-      } // show committed grid size
-
-
+      }
+      // show committed grid size
       displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
       this.setState({
         isResizing: false
@@ -136,7 +120,6 @@ export default class Resizer extends React.Component {
       });
     });
   }
-
   render() {
     const handleStyles = {};
     const handles = {};
@@ -164,7 +147,6 @@ export default class Resizer extends React.Component {
         pointerEvents: 'auto'
       };
       const sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
-
       if (sideHandleComponent) {
         handleComponent[side] = sideHandleComponent;
       }
@@ -176,7 +158,6 @@ export default class Resizer extends React.Component {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     let handleWrapperStyle;
-
     if (ratio) {
       handleWrapperStyle = {
         position: 'absolute',
@@ -185,10 +166,10 @@ export default class Resizer extends React.Component {
         top: 0,
         pointerEvents: 'none'
       };
-    } // Ideally, Resizable would let you pass in the component rather than
-    // the div. For now, we just apply the same styles using CSS
-
+    }
 
+    // Ideally, Resizable would let you pass in the component rather than
+    // the div. For now, we just apply the same styles using CSS
     return /*#__PURE__*/React.createElement(Resizable, {
       ref: this.resizable,
       size: {
@@ -207,5 +188,4 @@ export default class Resizer extends React.Component {
       onResizeStart: this.handleResizeStart
     }, children);
   }
-
 }

package/dist/es2019/ui/Resizer/utils.js

@@ -1,5 +1,6 @@
 export const snapTo = (target, points) => {
-  return points.length === 0 ? // extreme last case if there are no points somehow
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
   target : points.reduce((point, closest) => {
     return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
   });

package/dist/es2019/ui/Toolbar/ToolbarInner.js

@@ -13,7 +13,6 @@ export class ToolbarInner extends React.Component {
   shouldComponentUpdate(nextProps) {
     return nextProps.toolbarSize !== this.props.toolbarSize || nextProps.disabled !== this.props.disabled || nextProps.popupsMountPoint === this.props.popupsMountPoint || nextProps.popupsBoundariesElement === this.props.popupsBoundariesElement || nextProps.popupsScrollableElement === this.props.popupsScrollableElement || nextProps.isReducedSpacing !== this.props.isToolbarReducedSpacing;
   }
-
   render() {
     const {
       appearance,
@@ -31,11 +30,9 @@ export class ToolbarInner extends React.Component {
       dispatchAnalyticsEvent,
       containerElement
     } = this.props;
-
     if (!items || !items.length) {
       return null;
     }
-
     return jsx("div", {
       css: toolbarComponentsWrapper
     }, items.map((component, key) => {
@@ -62,5 +59,4 @@ export class ToolbarInner extends React.Component {
       return element && /*#__PURE__*/React.cloneElement(element, props);
     }));
   }
-
 }

package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';