@atlaskit/renderer 105.1.1 → 106.0.0

package/dist/es2019/ui/Renderer/click-to-edit.js

@@ -1,23 +1,20 @@
 import { fileCardImageViewSelector } from '@atlaskit/media-card/classnames';
 import { mediaViewerPopupClass } from '@atlaskit/media-viewer/classnames';
+
 /**
  * Check if an element is interactive (or otherwise if clicking on it shouldn't transition the
  * renderer to the editor in somewhere like the Jira description
  * @param element
  */
-
 export function isInteractiveElement(element) {
   if ('href' in element && element.href != null) {
     return true;
   }
-
   if (element.classList.contains(mediaViewerPopupClass)) {
     return true;
   }
-
   if (element.classList.contains(fileCardImageViewSelector)) {
     return true;
   }
-
   return false;
 }

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
@@ -36,17 +35,16 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "105.1.1";
+const packageVersion = "106.0.0";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then
    * deleted once that measurement occurs.
    */
+
   constructor(props) {
     super(props);
-
     _defineProperty(this, "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
-
     _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
       const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -55,26 +53,21 @@ export class Renderer extends PureComponent {
         featureFlags: normalizedFeatureFlags
       };
     }));
-
     _defineProperty(this, "fireAnalyticsEvent", event => {
       const {
         createAnalyticsEvent
       } = this.props;
-
       if (createAnalyticsEvent) {
         const channel = FabricChannel.editor;
         createAnalyticsEvent(event).fire(channel);
       }
     });
-
     _defineProperty(this, "getSchema", memoizeOne((schema, adfStage) => {
       if (schema) {
         return schema;
       }
-
       return getSchemaBasedOnStage(adfStage);
     }));
-
     _defineProperty(this, "onMouseDownEditView", () => {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
       // the current selection, by the time the onclick handler is called the window.getSelection()
@@ -83,73 +76,57 @@ export class Renderer extends PureComponent {
       const windowSelection = window.getSelection();
       this.mouseDownSelection = windowSelection !== null ? windowSelection.toString() : undefined;
     });
-
     _defineProperty(this, "handleMouseTripleClickInTables", event => {
       var _parentElement, _parentElement2;
-
       if (browser.ios || browser.android) {
         return;
       }
-
       const badBrowser = browser.chrome || browser.safari;
       const tripleClick = event.detail >= 3;
-
       if (!(badBrowser && tripleClick)) {
         return;
       }
-
       const selection = window.getSelection();
-
       if (!selection) {
         return;
       }
-
       const {
         type,
         anchorNode,
         focusNode
       } = selection;
       const rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
-
       if (!rangeSelection) {
         return;
       }
-
       const target = event.target;
       const tableCell = target.closest('td,th');
       const clickedInCell = Boolean(tableCell);
-
       if (!clickedInCell) {
         return;
       }
-
       const anchorInCell = tableCell.contains(anchorNode);
       const focusInCell = tableCell.contains(focusNode);
       const selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
-
       if (!selectionStartsOrEndsOutsideClickedCell) {
         return;
-      } // If selection starts or ends in a different cell than the clicked cell,
+      }
+      // If selection starts or ends in a different cell than the clicked cell,
       // we select the node inside the clicked cell (or if both are in a different
       // cell, we select the cell's contents instead). We want to select the nearest
       // parent block, so that a whole line of text/content is selected (rather than
       // selecting a span that would select one specific chunk of text).
-
-
       const elementToSelect = anchorInCell ? (_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? (_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.closest('div,p') : tableCell;
-
       if (elementToSelect) {
         selection.selectAllChildren(elementToSelect);
       }
     });
-
     this.providerFactory = props.dataProviders || new ProviderFactory();
     this.serializer = new ReactSerializer(this.deriveSerializerProps(props));
     this.editorRef = props.innerRef || /*#__PURE__*/React.createRef();
     this.id = uuid();
     startMeasure(`Renderer Render Time: ${this.id}`);
     const _featureFlags = this.featureFlags(this.props.featureFlags).featureFlags;
-
     if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
       measureTTI((tti, ttiFromInvocation, canceled) => {
         this.fireAnalyticsEvent({
@@ -165,17 +142,15 @@ export class Renderer extends PureComponent {
       });
     }
   }
-
   anchorLinkAnalytics() {
     const hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
     const {
       disableHeadingIDs
     } = this.props;
-
     if (!disableHeadingIDs && hash && this.editorRef && this.editorRef.current instanceof HTMLElement) {
-      const anchorLinkElement = document.getElementById(hash); // We are not use this.editorRef.querySelector here, instead we have this.editorRef.contains
+      const anchorLinkElement = document.getElementById(hash);
+      // We are not use this.editorRef.querySelector here, instead we have this.editorRef.contains
       // because querySelector might fail if there are special characters in hash, and CSS.escape is still experimental.
-
       if (anchorLinkElement && this.editorRef.current.contains(anchorLinkElement)) {
         this.fireAnalyticsEvent({
           action: ACTION.VIEWED,
@@ -189,7 +164,6 @@ export class Renderer extends PureComponent {
       }
     }
   }
-
   componentDidMount() {
     this.fireAnalyticsEvent({
       action: ACTION.STARTED,
@@ -202,7 +176,6 @@ export class Renderer extends PureComponent {
     this.rafID = requestAnimationFrame(() => {
       stopMeasure(`Renderer Render Time: ${this.id}`, duration => {
         var _analyticsEventSeveri, _analyticsEventSeveri2;
-
         const {
           analyticsEventSeverityTracking
         } = this.props;
@@ -230,16 +203,13 @@ export class Renderer extends PureComponent {
       this.anchorLinkAnalytics();
     });
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     const nextMedia = nextProps.media || {};
     const media = this.props.media || {};
-
     if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }
-
   deriveSerializerProps(props) {
     // if just passed a boolean, change shape into object to simplify type
     const stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
@@ -284,7 +254,6 @@ export class Renderer extends PureComponent {
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
     };
   }
-
   render() {
     const {
       document: adfDocument,
@@ -309,64 +278,56 @@ export class Renderer extends PureComponent {
      * renderer out for the editor).
      * @param event Click event anywhere inside renderer
      */
-
     const handleWrapperOnClick = event => {
       var _this$props$eventHand;
+      const targetElement = event.target;
 
-      const targetElement = event.target; // ED-14862: When a user triple clicks to select a line of content inside a
+      // ED-14862: When a user triple clicks to select a line of content inside a
       // a table cell, but the browser incorrectly moves the selection start or end into
       // a different table cell, we manually set the selection back to within the original
       // table cell the user intended to target
-
       this.handleMouseTripleClickInTables(event);
-
       if (!((_this$props$eventHand = this.props.eventHandlers) !== null && _this$props$eventHand !== void 0 && _this$props$eventHand.onUnhandledClick)) {
         return;
       }
-
       if (!(targetElement instanceof window.Element)) {
         return;
       }
+      const rendererWrapper = event.currentTarget;
 
-      const rendererWrapper = event.currentTarget; // Check if the click was on an interactive element
-
+      // Check if the click was on an interactive element
       const isInteractiveElementInTree = findInTree(targetElement, rendererWrapper, isInteractiveElement);
-
       if (isInteractiveElementInTree) {
         return;
-      } // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+      }
+
+      // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
       // This logic originated in jira-frontend:
       // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
       // The selection is required to be checked in `onMouseDown` and here. If not here, a new
       // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
       // return an empty selection, which will erroneously fire onUnhandledClick.
-
-
       const windowSelection = window.getSelection();
       const selection = windowSelection !== null ? windowSelection.toString() : undefined;
       const hasSelection = selection && selection.length !== 0;
       const hasSelectionMouseDown = this.mouseDownSelection && this.mouseDownSelection.length !== 0;
       const allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
-
       if (allowEditBasedOnSelection) {
         this.props.eventHandlers.onUnhandledClick(event);
       }
     };
-
     try {
       var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
-
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
         stat,
         pmDoc
       } = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance);
-
       if (onComplete) {
         onComplete(stat);
       }
-
       const rendererOutput = jsx(RendererContextProvider, {
         value: this.featureFlags(this.props.featureFlags)
       }, jsx(ActiveHeaderIdProvider, {
@@ -407,7 +368,6 @@ export class Renderer extends PureComponent {
       if (onError) {
         onError(e);
       }
-
       return jsx(RendererWrapper, {
         appearance: appearance,
         allowCopyToClipboard: allowCopyToClipboard,
@@ -418,23 +378,20 @@ export class Renderer extends PureComponent {
       }, jsx(UnsupportedBlock, null));
     }
   }
-
   componentWillUnmount() {
     const {
       dataProviders
     } = this.props;
-
     if (this.rafID) {
       window.cancelAnimationFrame(this.rafID);
-    } // if this is the ProviderFactory which was created in constructor
-    // it's safe to destroy it on Renderer unmount
-
+    }
 
+    // if this is the ProviderFactory which was created in constructor
+    // it's safe to destroy it on Renderer unmount
     if (!dataProviders) {
       this.providerFactory.destroy();
     }
   }
-
 }
 const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext, {
   data: {
@@ -482,7 +439,6 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     })
   }, children)));
 });
-
 function RendererActionsInternalUpdater({
   children,
   doc,
@@ -497,12 +453,10 @@ function RendererActionsInternalUpdater({
     } else {
       actions._privateUnregisterRenderer();
     }
-
     return () => actions._privateUnregisterRenderer();
   }, [actions, schema, doc, onAnalyticsEvent]);
   return children;
 }
-
 const RendererWithAnnotationSelection = props => {
   const {
     allowAnnotations,
@@ -510,13 +464,11 @@ const RendererWithAnnotationSelection = props => {
   } = props;
   const localRef = React.useRef(null);
   const innerRef = props.innerRef || localRef;
-
   if (!allowAnnotations) {
     return jsx(RendererWithAnalytics, _extends({
       innerRef: innerRef
     }, props));
   }
-
   return jsx(RendererActionsContext, null, jsx(AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
@@ -527,5 +479,4 @@ const RendererWithAnnotationSelection = props => {
     featureFlags: props.featureFlags
   }))));
 };
-
 export default RendererWithAnnotationSelection;

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

@@ -12,9 +12,7 @@ import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor'
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 export const FullPagePadding = 32;
-
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
-
 export const headingSizes = {
   h1: {
     lineHeight: getLineHeight('h700')
@@ -35,7 +33,6 @@ export const headingSizes = {
     lineHeight: getLineHeight('h100')
   }
 };
-
 const headingAnchorStyle = headingTag => css`
     /**
      * The copy link button doesn't reserve space in the DOM so that
@@ -79,14 +76,12 @@ const headingAnchorStyle = headingTag => css`
       }
     }
   `;
-
 const alignedHeadingAnchorStyle = ({
   allowNestedHeaderLinks
 }) => {
   if (!allowNestedHeaderLinks) {
     return '';
   }
-
   return css`
     .fabric-editor-block-mark[data-align] > {
       h1,
@@ -149,7 +144,6 @@ const alignedHeadingAnchorStyle = ({
     }
   `;
 };
-
 const tableSortableColumnStyle = ({
   allowColumnSorting,
   allowNestedHeaderLinks
@@ -157,9 +151,7 @@ const tableSortableColumnStyle = ({
   if (!allowColumnSorting) {
     return '';
   }
-
   let headingsCss = '';
-
   if (allowNestedHeaderLinks) {
     headingsCss = `
       /**
@@ -185,7 +177,6 @@ const tableSortableColumnStyle = ({
       }
     `;
   }
-
   return css`
     .${RendererCssClassName.SORTABLE_COLUMN_WRAPPER} {
       padding: 0;
@@ -251,7 +242,6 @@ const tableSortableColumnStyle = ({
     }
   `;
 };
-
 const fullPageStyles = ({
   appearance
 }, {
@@ -260,21 +250,18 @@ const fullPageStyles = ({
   if (appearance !== 'full-page' && appearance !== 'mobile') {
     return '';
   }
-
   return css`
     max-width: ${theme && theme.layoutMaxWidth ? `${theme.layoutMaxWidth}px` : 'none'};
     margin: 0 auto;
     padding: 0 ${appearance === 'full-page' ? FullPagePadding : 0}px;
   `;
 };
-
 const fullWidthStyles = ({
   appearance
 }) => {
   if (appearance !== 'full-width') {
     return '';
   }
-
   return css`
     max-width: ${akEditorFullWidthLayoutWidth}px;
     margin: 0 auto;
@@ -286,7 +273,6 @@ const fullWidthStyles = ({
     }
   `;
 };
-
 export const rendererStyles = wrapperProps => theme => {
   // This is required to be compatible with styled-components prop structure.
   const themeProps = {

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
   overflow-y: hidden;
@@ -19,7 +18,6 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
     );
   }
 `;
-
 const FadeOut = props => {
   const {
     children,
@@ -33,13 +31,12 @@ const FadeOut = props => {
     css: styles
   }, children);
 };
-
 export class TruncatedWrapper extends Component {
   constructor(props) {
     super(props);
-  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
-
+  }
 
+  // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
   render() {
     const {
       height = 95,
@@ -53,5 +50,4 @@ export class TruncatedWrapper extends Component {
       backgroundColor: backgroundColor
     }, children);
   }
-
 }

package/dist/es2019/ui/SmartCardStorage.js

@@ -15,6 +15,5 @@ export const withSmartCardStorage = WrappedComponent => {
         smartCardStorage: storage
       })));
     }
-
   };
 };

package/dist/es2019/ui/SortingIcon.js

@@ -8,14 +8,12 @@ import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
 import { RendererCssClassName } from '../consts';
 export let StatusClassNames;
-
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
   StatusClassNames["DESC"] = "sorting-icon-svg__desc";
   StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
-
 const buttonStyles = css`
   position: absolute;
   display: flex;
@@ -58,10 +56,11 @@ const iconWrapperStyles = css`
   &.${RendererCssClassName.SORTABLE_COLUMN_ICON}-inactive {
     opacity: 0.7;
   }
-`; // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
+`;
+
+// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-
 const iconStyles = css`
   height: 100%;
   width: 2px;
@@ -86,27 +85,21 @@ const iconStyles = css`
     transform: rotate(-45deg) translate(-6.3px, 5.7px);
   }
 `;
-
 const getIconClassName = (isSortingAllowed, sortOrdered) => {
   const activated = sortOrdered !== SortOrder.NO_ORDER;
   const activeStatusClass = `${RendererCssClassName.SORTABLE_COLUMN_ICON}-${activated ? 'active' : 'inactive'}`;
-
   if (!isSortingAllowed) {
     return `${StatusClassNames.SORTING_NOT_ALLOWED} ${activeStatusClass}`;
   }
-
   switch (sortOrdered) {
     case SortOrder.ASC:
       return `${StatusClassNames.ASC} ${activeStatusClass}`;
-
     case SortOrder.DESC:
       return `${StatusClassNames.DESC} ${activeStatusClass}`;
-
     default:
       return `${StatusClassNames.NO_ORDER} ${activeStatusClass}`;
   }
 };
-
 const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
   const {
     noOrderLabel,
@@ -114,25 +107,19 @@ const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
     descOrderLabel,
     invalidLabel
   } = sortingIconMessages;
-
   if (!isSortingAllowed) {
     return intl.formatMessage(invalidLabel);
   }
-
   switch (sortOrdered) {
     case SortOrder.NO_ORDER:
       return intl.formatMessage(noOrderLabel);
-
     case SortOrder.ASC:
       return intl.formatMessage(ascOrderLabel);
-
     case SortOrder.DESC:
       return intl.formatMessage(descOrderLabel);
   }
-
   return '';
 };
-
 const SortingIcon = ({
   isSortingAllowed,
   sortOrdered,
@@ -142,19 +129,16 @@ const SortingIcon = ({
 }) => {
   const buttonClassName = `${RendererCssClassName.SORTABLE_COLUMN_ICON}${isSortingAllowed ? '' : ` ${RendererCssClassName.SORTABLE_COLUMN_ICON}__not-allowed`}`;
   const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-
   const handleClick = () => {
     if (isSortingAllowed) {
       onClick();
     }
   };
-
   const handleKeyDown = event => {
     if (isSortingAllowed) {
       onKeyDown(event);
     }
   };
-
   return jsx(Tooltip, {
     delay: 0,
     content: content,
@@ -175,5 +159,4 @@ const SortingIcon = ({
     css: iconStyles
   }))));
 };
-
 export default injectIntl(SortingIcon);

package/dist/es2019/ui/TaskItemsFormatContext/TaskItemsFormatContext.js

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

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

@@ -3,7 +3,6 @@ const {
   Provider,
   Consumer
 } = /*#__PURE__*/React.createContext(undefined);
-
 /**
  * We need to expose this abstraction on top of the native Consumer in order to control when
  * The consumer will get notified when a match has happened. If we use the Consumer directly in
@@ -26,9 +25,7 @@ const ActiveHeaderIdConsumer = ({
       setActiveHeaderId(newActiveHeaderId);
       onNestedHeaderIdMatch();
     }
-
     return null;
   });
 };
-
 export { Provider as ActiveHeaderIdProvider, ActiveHeaderIdConsumer };

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

@@ -6,30 +6,25 @@ export const InlineCommentsStateContext = /*#__PURE__*/createContext({});
 export class AnnotationsDraftContextWrapper extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       position: null
     });
-
     _defineProperty(this, "applyAnnotationDraftAt", nextPosition => {
       const {
         position
       } = this.state;
-
       if (!position) {
         this.setState({
           position: nextPosition
         });
       }
     });
-
     _defineProperty(this, "clearAnnotationDraft", () => {
       this.setState({
         position: null
       });
     });
   }
-
   render() {
     const {
       children
@@ -46,5 +41,4 @@ export class AnnotationsDraftContextWrapper extends React.Component {
       clearAnnotationDraft
     }));
   }
-
 }