@atlaskit/editor-common 72.2.0 → 72.2.2

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -23,7 +22,6 @@ const focusedMenuItemStyle = css`
   box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
   outline: none;
 `;
-
 const buttonStyles = isActive => theme => {
   if (isActive) {
     /**
@@ -80,47 +78,40 @@ const buttonStyles = isActive => theme => {
 };
 
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
+
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
  *
  * Also it controls popper's placement.
  */
-
 export default class DropdownMenuWrapper extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       popupPlacement: ['bottom', 'left'],
       selectionIndex: -1
     });
-
     _defineProperty(this, "handleRef", target => {
       this.setState({
         target: target || undefined
       });
     });
-
     _defineProperty(this, "updatePopupPlacement", placement => {
       const {
         popupPlacement: previousPlacement
       } = this.state;
-
       if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
         this.setState({
           popupPlacement: placement
         });
       }
     });
-
     _defineProperty(this, "handleCloseAndFocus", () => {
       var _this$state$target, _this$state$target$qu;
-
       this.handleClose();
       (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
     });
-
     _defineProperty(this, "handleClose", () => {
       if (this.props.onOpenChange) {
         this.props.onOpenChange({
@@ -129,7 +120,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       }
     });
   }
-
   renderDropdownMenu() {
     const {
       target,
@@ -166,7 +156,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       keyDownHandlerContext: keyDownHandlerContext,
       onSelection: index => {
         let result = [];
-
         if (typeof onItemActivated === 'function') {
           result = items.reduce((result, group) => {
             return result.concat(group.items);
@@ -198,7 +187,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => {
       var _item$key;
-
       return jsx(DropdownMenuItem, {
         key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
         item: item,
@@ -209,7 +197,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       });
     }))))));
   }
-
   render() {
     const {
       children,
@@ -221,7 +208,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }
-
 }
 const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -232,7 +218,6 @@ const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, re
     ref: ref
   }, rest), children);
 });
-
 function DropdownMenuItem({
   item,
   onItemActivated,
@@ -241,7 +226,6 @@ function DropdownMenuItem({
   onMouseLeave
 }) {
   var _item$key2;
-
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
   if (!item.onClick && !(item.value && item.value.name)) {
@@ -249,7 +233,6 @@ function DropdownMenuItem({
       key: String(item.content)
     }, item.content);
   }
-
   const dropListItem = jsx("div", {
     css: theme => buttonStyles(item.isActive)({
       theme
@@ -281,16 +264,13 @@ function DropdownMenuItem({
       item
     })
   }, item.content));
-
   if (item.tooltipDescription) {
     var _item$key3;
-
     return jsx(Tooltip, {
       key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
       content: item.tooltipDescription,
       position: item.tooltipPosition
     }, dropListItem);
   }
-
   return dropListItem;
 }

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-
 /**
  * This component is a wrapper of vertical menus which listens to keydown events of children
  * and handles up/down arrow key navigation
@@ -16,24 +15,21 @@ export const MenuArrowKeyNavigationProvider = ({
   const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
   const incrementIndex = useCallback(list => {
     const currentIndex = currentSelectedItemIndex;
-    let nextIndex = (currentIndex + 1) % list.length; // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
+    let nextIndex = (currentIndex + 1) % list.length;
+    // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
     // difference between currentIndex and the item index in the menu.
-
     while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
       nextIndex = (nextIndex + 1) % list.length;
     }
-
     setCurrentSelectedItemIndex(nextIndex);
     return nextIndex;
   }, [currentSelectedItemIndex]);
   const decrementIndex = useCallback(list => {
     const currentIndex = currentSelectedItemIndex;
     let nextIndex = (list.length + currentIndex - 1) % list.length;
-
     while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
       nextIndex = (list.length + nextIndex - 1) % list.length;
     }
-
     setCurrentSelectedItemIndex(nextIndex);
     return nextIndex;
   }, [currentSelectedItemIndex]);
@@ -41,99 +37,82 @@ export const MenuArrowKeyNavigationProvider = ({
     if (disableArrowKeyNavigation) {
       return;
     }
+
     /**
      * To handle the key events on the list
      * @param event
      */
-
-
     const handleKeyDown = event => {
       var _wrapperRef$current;
+      const targetElement = event.target;
 
-      const targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
-
+      //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
       if (event.key === 'Tab' && closeOnTab) {
         handleClose(event);
         keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
         return;
-      } //To trap the focus inside the toolbar using left and right arrow keys
-
+      }
 
+      //To trap the focus inside the toolbar using left and right arrow keys
       const focusableElements = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-
       if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
         return;
       }
-
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
         setCurrentSelectedItemIndex(-1);
       }
-
       switch (event.key) {
         case 'ArrowDown':
           {
             var _focusableElements$fo;
-
             const focusIndex = incrementIndex(focusableElements);
             (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
             event.preventDefault();
             break;
           }
-
         case 'ArrowUp':
           {
             var _focusableElements$fo2;
-
             const focusIndex = decrementIndex(focusableElements);
             (_focusableElements$fo2 = focusableElements[focusIndex]) === null || _focusableElements$fo2 === void 0 ? void 0 : _focusableElements$fo2.focus();
             event.preventDefault();
             break;
           }
+
         //ArrowLeft/Right on the menu should close the menus
         //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
-
         case 'ArrowLeft':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           }
-
           handleClose(event);
           break;
-
         case 'ArrowRight':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           }
-
           handleClose(event);
           break;
-
         case 'Escape':
           handleClose(event);
           break;
-
         case 'Enter':
           if (typeof onSelection === 'function') {
             onSelection(currentSelectedItemIndex);
           }
-
           break;
-
         default:
           return;
       }
     };
-
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
@@ -144,12 +123,10 @@ export const MenuArrowKeyNavigationProvider = ({
     ref: wrapperRef
   }, children);
 };
-
 function getFocusableElements(rootNode) {
   if (!rootNode) {
     return [];
   }
-
   const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
   return Array.from(focusableModalElements);
 }

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

@@ -39,20 +39,18 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (disabled) {
       return;
     }
-
     if (buttonId) {
-      analyticsEvent.update(payload => ({ ...payload,
+      analyticsEvent.update(payload => ({
+        ...payload,
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
         actionSubjectId: buttonId,
         eventType: EVENT_TYPE.UI
       })).fire(FabricChannel.editor);
     }
-
     if (onClick) {
       onClick(event);
     }
-
     if (item && onItemClick) {
       onItemClick(item);
     }
@@ -79,11 +77,9 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-pressed": ariaPressed,
     "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
-
   if (!title) {
     return button;
   }
-
   const tooltipContent = !hideTooltip ? title : null;
   return jsx(Tooltip, {
     content: tooltipContent,

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -2,43 +2,35 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import ReactEditorViewContext from './ReactEditorViewContext';
-
 class WithOutsideClick extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleClick", evt => {
       if (!this.props.isActiveComponent) {
         return;
       }
-
       const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
-
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         if (this.props.handleClickOutside) {
           var _this$props$editorVie;
-
-          this.props.handleClickOutside(evt); //When the menus are closed by clicking outside the focus is set on editor.
-
+          this.props.handleClickOutside(evt);
+          //When the menus are closed by clicking outside the focus is set on editor.
           if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
             var _this$props$editorVie2;
-
             (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
           }
         }
       }
     });
-
     _defineProperty(this, "handleKeydown", evt => {
       if (!this.props.isActiveComponent) {
         return;
       }
-
       if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.props.handleEscapeKeydown(evt); //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
-
+        this.props.handleEscapeKeydown(evt);
+        //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
         return false;
       } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
         this.props.handleEnterKeydown(evt);
@@ -48,42 +40,32 @@ class WithOutsideClick extends PureComponent {
       }
     });
   }
-
   componentDidMount() {
     if (this.props.handleClickOutside) {
       document.addEventListener('click', this.handleClick, false);
     }
-
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef;
-
       //Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
       (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
     }
   }
-
   componentWillUnmount() {
     if (this.props.handleClickOutside) {
       document.removeEventListener('click', this.handleClick, false);
     }
-
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef2;
-
       (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
     }
   }
-
   render() {
     return this.props.children;
   }
-
 }
-
 function hasIsOpen(props) {
   return 'isOpen' in props;
 }
-
 export default function withReactEditorViewOuterListeners(Component) {
   return ({
     handleClickOutside,

package/dist/es2019/utils/analytics.js

@@ -3,16 +3,12 @@ export const getAnalyticsAppearance = appearance => {
   switch (appearance) {
     case 'full-page':
       return EDITOR_APPEARANCE_CONTEXT.FIXED_WIDTH;
-
     case 'full-width':
       return EDITOR_APPEARANCE_CONTEXT.FULL_WIDTH;
-
     case 'comment':
       return EDITOR_APPEARANCE_CONTEXT.COMMENT;
-
     case 'chromeless':
       return EDITOR_APPEARANCE_CONTEXT.CHROMELESS;
-
     case 'mobile':
       return EDITOR_APPEARANCE_CONTEXT.MOBILE;
   }
@@ -21,20 +17,16 @@ export const getAnalyticsEventSeverity = (duration, normalThreshold, degradedThr
   if (duration > normalThreshold && duration <= degradedThreshold) {
     return SEVERITY.DEGRADED;
   }
-
   if (duration > degradedThreshold) {
     return SEVERITY.BLOCKING;
   }
-
   return SEVERITY.NORMAL;
 };
 export let SEVERITY;
-
 (function (SEVERITY) {
   SEVERITY["NORMAL"] = "normal";
   SEVERITY["DEGRADED"] = "degraded";
   SEVERITY["BLOCKING"] = "blocking";
 })(SEVERITY || (SEVERITY = {}));
-
 export { UNSUPPORTED_CONTENT_LEVEL_SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './unsupportedContent/get-unsupported-content-level-data';
 export const analyticsEventKey = 'EDITOR_ANALYTICS_EVENT';

package/dist/es2019/utils/annotation/index.js

@@ -3,26 +3,23 @@ export const canApplyAnnotationOnRange = (rangeSelection, doc, schema) => {
     from,
     to
   } = rangeSelection;
-
   if (isNaN(from + to) || to - from <= 0 || to < 0 || from < 0) {
     return false;
   }
-
   let foundInvalid = false;
   doc.nodesBetween(rangeSelection.from, rangeSelection.to, (node, _pos, parent) => {
     // Special exception for hardBreak nodes
     if (schema.nodes.hardBreak === node.type) {
       return false;
-    } // For block elements or text nodes, we want to check
+    }
+
+    // For block elements or text nodes, we want to check
     // if annotations are allowed inside this tree
     // or if we're leaf and not text
-
-
     if (node.isInline && !node.isText || node.isLeaf && !node.isText || node.isText && !parent.type.allowsMarkType(schema.marks.annotation)) {
       foundInvalid = true;
       return false;
     }
-
     return true;
   });
   return !foundInvalid;
@@ -37,7 +34,6 @@ export const getAnnotationIdsFromRange = (rangeSelection, doc, schema) => {
     if (!node.marks) {
       return true;
     }
-
     node.marks.forEach(mark => {
       if (mark.type === schema.marks.annotation && mark.attrs) {
         annotations.add(mark.attrs.id);

package/dist/es2019/utils/breakout.js

@@ -2,12 +2,12 @@ import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthL
 import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
 import { getBreakpoint } from '../ui/WidthProvider';
 import { parsePx } from './dom';
+
 /**
  * Variables required to construct a context for breakout ssr inline script.
  *
  * TODO: Clean this up after: https://product-fabric.atlassian.net/browse/ED-8942
  */
-
 const breakoutConsts = {
   padding: akEditorBreakoutPadding,
   defaultLayoutWidth: akEditorDefaultLayoutWidth,
@@ -16,21 +16,17 @@ const breakoutConsts = {
   wideLayoutWidth: akEditorWideLayoutWidth,
   mapBreakpointToLayoutMaxWidth,
   getBreakpoint,
-
   /**
    * Consumers are opinionated that this will always return a string ending in
    * `px` when called with `full-width` or `wide` as the layout parameter.
    */
   calcBreakoutWidth: (layout, containerWidth) => {
     const effectiveFullWidth = containerWidth - breakoutConsts.padding;
-
     switch (layout) {
       case 'full-width':
         return `${Math.min(effectiveFullWidth, breakoutConsts.fullWidthLayoutWidth)}px`;
-
       case 'wide':
         return breakoutConsts.calcWideWidth(containerWidth);
-
       default:
         return '100%';
     }
@@ -44,21 +40,19 @@ const breakoutConsts = {
   }
 };
 export const absoluteBreakoutWidth = (layout, containerWidth) => {
-  const breakoutWidth = breakoutConsts.calcBreakoutWidth(layout, containerWidth); // If it's percent, map to max layout size
+  const breakoutWidth = breakoutConsts.calcBreakoutWidth(layout, containerWidth);
 
+  // If it's percent, map to max layout size
   if (breakoutWidth.endsWith('%')) {
     switch (layout) {
       case 'full-width':
         return akEditorFullWidthLayoutWidth;
-
       case 'wide':
         return akEditorWideLayoutWidth;
-
       default:
         return breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));
     }
   }
-
   return parseInt(breakoutWidth, 10);
 };
 export { breakoutConsts };
@@ -71,7 +65,6 @@ export function calculateBreakoutStyles({
 }) {
   const breakoutWidth = calcBreakoutWidth(mode, widthStateWidth);
   const breakoutWidthPx = parsePx(breakoutWidth);
-
   if (!widthStateLineLength) {
     // lineLength is not normally undefined when this is run for,
     // consumers but can be in SSR, initial render or test (jsdom)
@@ -87,13 +80,13 @@ export function calculateBreakoutStyles({
       transform: 'translateX(-50%)',
       marginLeft: '50%'
     };
-  } // NOTE
+  }
+
+  // NOTE
   // At time of writing -- when toggling between full-width and
   // full-page appearance modes. There is a slight delay before
   // the widthState is updated.
   // During this period -- the marginLeftPx will be incorrect.
-
-
   const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
   return {
     type: 'line-length-known',