@atlaskit/renderer 105.1.1 → 106.0.0

package/dist/es2019/text/nodes/table.js

@@ -1,5 +1,4 @@
 import { reduce } from './';
-
 const table = (node, schema) => {
   const result = [];
   node.forEach(n => {
@@ -7,7 +6,6 @@ const table = (node, schema) => {
   });
   return result.join('\n');
 };
-
 const tableRow = (node, schema) => {
   const result = [];
   let separator = '|';
@@ -16,7 +14,6 @@ const tableRow = (node, schema) => {
   });
   return `${separator}${result.join(`${separator}`)}${separator}`;
 };
-
 const tableCell = (node, schema) => {
   const result = [];
   node.forEach(n => {
@@ -24,5 +21,4 @@ const tableCell = (node, schema) => {
   });
   return result.join('\n');
 };
-
 export default table;

package/dist/es2019/text/nodes/taskItem.js

@@ -1,21 +1,17 @@
 import { reduce } from './';
-
 const taskItem = (node, schema) => {
   const result = [];
   let previousNodeType = '';
   const state = node.attrs.state === 'DONE' ? '[x]' : '[]';
   node.forEach(n => {
     const text = reduce(n, schema);
-
     if (previousNodeType === 'mention' && !text.startsWith(' ')) {
       result.push(` ${text}`);
     } else {
       result.push(text);
     }
-
     previousNodeType = n.type.name;
   });
   return `${state} ${result.join('').trim()}`;
 };
-
 export default taskItem;

package/dist/es2019/text/nodes/unknown.js

@@ -1,17 +1,13 @@
 import { getText } from '../../utils';
 import { reduce } from './';
-
 const unknown = (node, schema) => {
   const result = [];
   node.forEach(n => {
     result.push(reduce(n, schema));
   });
-
   if (result.length > 0) {
     return result.join('');
   }
-
   return getText(node);
 };
-
 export default unknown;

package/dist/es2019/ui/Expand.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -26,11 +25,9 @@ const titleStyles = css`
   padding: 0 0 0 ${gridSize() / 2}px;
   text-align: left;
 `;
-
 const Container = props => {
   const paddingBottom = `${props.expanded ? gridSize() : 0}px`;
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-
   const styles = themeProps => css`
     ${sharedContainerStyles({
     theme: themeProps
@@ -38,15 +35,12 @@ const Container = props => {
     padding: 0;
     padding-bottom: ${paddingBottom};
   `;
-
   return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
-
 const TitleContainer = props => {
   const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
-
   const styles = themeProps => css`
     ${sharedExpandStyles.titleContainerStyles({
     theme: themeProps
@@ -54,18 +48,14 @@ const TitleContainer = props => {
     padding: ${gridSize()}px;
     padding-bottom: ${paddingBottom};
   `;
-
   return jsx("button", _extends({
     css: styles
   }, props), props.children);
 };
-
 TitleContainer.displayName = 'TitleContainerButton';
-
 const ContentContainer = props => {
   const sharedContentStyles = sharedExpandStyles.contentStyles(props);
   const visibility = props.expanded ? 'visible' : 'hidden';
-
   const styles = themeProps => css`
     ${sharedContentStyles({
     theme: themeProps
@@ -74,17 +64,14 @@ const ContentContainer = props => {
     padding-left: ${gridSize() * 5 - gridSize() / 2}px;
     visibility: ${visibility};
   `;
-
   return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
-
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
     return;
   }
-
   fireAnalyticsEvent({
     action: ACTION.TOGGLE_EXPAND,
     actionSubject: nodeType === 'expand' ? ACTION_SUBJECT.EXPAND : ACTION_SUBJECT.NESTED_EXPAND,
@@ -96,7 +83,6 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
     eventType: EVENT_TYPE.TRACK
   });
 }
-
 function Expand({
   title,
   children,
@@ -129,8 +115,8 @@ function Expand({
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
       setExpanded(!expanded);
-      e.persist(); // @ts-ignore detail doesn't exist on type
-
+      e.persist();
+      // @ts-ignore detail doesn't exist on type
       e.detail ? handleBlur() : handleFocus();
     },
     onFocus: handleFocus,
@@ -163,5 +149,4 @@ function Expand({
     css: clearNextSiblingMarginTopStyle
   }), children))));
 }
-
 export default injectIntl(Expand);

package/dist/es2019/ui/ExtensionRenderer.js

@@ -7,13 +7,10 @@ import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 export default class ExtensionRenderer extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       extensionProvider: null
     });
-
     _defineProperty(this, "mounted", false);
-
     _defineProperty(this, "handleProvider", (name, providerPromise) => {
       providerPromise && providerPromise.then(provider => {
         if (this.mounted) {
@@ -23,12 +20,9 @@ export default class ExtensionRenderer extends React.Component {
         }
       });
     });
-
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
-
     _defineProperty(this, "renderExtensionNode", extensionProvider => {
       var _marks$find, _marks$find$attrs;
-
       const {
         extensionHandlers,
         rendererContext,
@@ -52,13 +46,11 @@ export default class ExtensionRenderer extends React.Component {
         fragmentLocalId
       };
       let result = null;
-
       try {
         if (extensionHandlers && extensionHandlers[extensionType]) {
           const render = getExtensionRenderer(extensionHandlers[extensionType]);
           result = render(node, rendererContext.adDoc);
         }
-
         if (!result && extensionProvider) {
           const NodeRenderer = this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
           result = /*#__PURE__*/React.createElement(NodeRenderer, {
@@ -67,50 +59,39 @@ export default class ExtensionRenderer extends React.Component {
         }
       } catch (e) {
         /** We don't want this error to block renderer */
-
         /** We keep rendering the default content */
       }
-
       return this.props.children({
         result
       });
     });
-
     _defineProperty(this, "setupAndRenderExtensionNode", providers => {
       const {
         extensionProvider
       } = this.state;
-
       if (!extensionProvider && providers.extensionProvider) {
         this.handleProvider('extensionProvider', providers.extensionProvider);
       }
-
       return this.renderExtensionNode(extensionProvider);
     });
   }
-
   UNSAFE_componentWillMount() {
     this.mounted = true;
   }
-
   componentWillUnmount() {
     this.mounted = false;
   }
-
   render() {
     const {
       providers
     } = this.props;
-
     if (!providers) {
       return this.setupAndRenderExtensionNode({});
     }
-
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['extensionProvider'],
       providerFactory: providers,
       renderNode: this.setupAndRenderExtensionNode
     });
   }
-
 }

package/dist/es2019/ui/MediaCard.js

@@ -9,7 +9,6 @@ export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
     return [];
   }
-
   return filter(doc, node => node.type === 'media').reduce((identifierList, mediaNode) => {
     if (mediaNode.attrs) {
       const {
@@ -17,7 +16,6 @@ export const getListOfIdentifiersFromDoc = doc => {
         url: dataURI,
         id
       } = mediaNode.attrs;
-
       if (type === 'file' && id) {
         identifierList.push({
           mediaItemType: 'file',
@@ -31,16 +29,13 @@ export const getListOfIdentifiersFromDoc = doc => {
         });
       }
     }
-
     return identifierList;
   }, []);
 };
 export class MediaCardInternal extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {});
-
     _defineProperty(this, "saveFileState", async (id, mediaClientConfig) => {
       const {
         collection: collectionName,
@@ -50,16 +45,15 @@ export class MediaCardInternal extends Component {
       const options = {
         collectionName
       };
-
       try {
         const fileState = await mediaClient.file.getCurrentState(id, options);
         this.setState({
           fileState
         });
-      } catch (error) {// do not set state on error
+      } catch (error) {
+        // do not set state on error
       }
     });
-
     _defineProperty(this, "renderLoadingCard", () => {
       const {
         cardDimensions
@@ -68,27 +62,22 @@ export class MediaCardInternal extends Component {
         dimensions: cardDimensions
       });
     });
-
     _defineProperty(this, "getOnCardClickCallback", isInlinePlayer => {
       const {
         eventHandlers
       } = this.props;
-
       if (eventHandlers && eventHandlers.media && eventHandlers.media.onClick) {
         return (result, analyticsEvent) => {
           const isVideo = result.mediaItemDetails && result.mediaItemDetails.mediaType === 'video';
           const isVideoWithInlinePlayer = isInlinePlayer && isVideo;
-
           if (!isVideoWithInlinePlayer && eventHandlers && eventHandlers.media && eventHandlers.media.onClick) {
             eventHandlers.media.onClick(result, analyticsEvent);
           }
         };
       }
-
       return undefined;
     });
   }
-
   async componentDidMount() {
     const {
       rendererContext,
@@ -98,25 +87,22 @@ export class MediaCardInternal extends Component {
       url,
       collection: collectionName
     } = this.props;
-
     if (!mediaProvider) {
       return;
     }
-
     if (contextIdentifierProvider) {
       this.setState({
         contextIdentifierProvider: await contextIdentifierProvider
       });
     }
-
     const mediaProviderObject = await mediaProvider;
     const mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
     const nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
-
     if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
       getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(identifier => {
         if (identifier.mediaItemType === 'file' && identifier.id === id) {
-          mediaIdentifierMap.set(identifier.id, { ...identifier,
+          mediaIdentifierMap.set(identifier.id, {
+            ...identifier,
             collectionName
           });
         } else if (identifier.mediaItemType === 'external-image') {
@@ -124,16 +110,13 @@ export class MediaCardInternal extends Component {
         }
       });
     }
-
     this.setState({
       mediaClientConfig: mediaClientConfig
     });
-
     if (id) {
       this.saveFileState(id, mediaClientConfig);
     }
   }
-
   UNSAFE_componentWillReceiveProps(newProps) {
     const {
       mediaClientConfig
@@ -141,25 +124,21 @@ export class MediaCardInternal extends Component {
     const {
       id: newId
     } = newProps;
-
     if (mediaClientConfig && newId && newId !== this.props.id) {
       this.saveFileState(newId, mediaClientConfig);
     }
   }
-
   componentWillUnmount() {
     const {
       id,
       url: dataURI
     } = this.props;
-
     if (id) {
       mediaIdentifierMap.delete(id);
     } else if (dataURI) {
       mediaIdentifierMap.delete(dataURI);
     }
   }
-
   renderExternal(shouldOpenMediaViewer) {
     const {
       mediaClientConfig
@@ -175,17 +154,16 @@ export class MediaCardInternal extends Component {
       featureFlags,
       ssr
     } = this.props;
-
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
     }
-
     const identifier = {
       dataURI: url,
       name: url,
       mediaItemType: 'external-image'
     };
-    return /*#__PURE__*/React.createElement(Card // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+    return /*#__PURE__*/React.createElement(Card
+    // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
     // context is not really used when the type is external and we want to render the component asap
     , {
       mediaClientConfig: mediaClientConfig,
@@ -203,6 +181,7 @@ export class MediaCardInternal extends Component {
       ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     });
   }
+
   /**
    * We want to call provided `eventHandlers.media.onClick` when it's provided,
    * but we also don't want to call it when it's a video and inline video player is enabled.
@@ -210,7 +189,6 @@ export class MediaCardInternal extends Component {
    * we don't want that to happened described above text.
    */
 
-
   render() {
     const {
       contextIdentifierProvider,
@@ -239,27 +217,21 @@ export class MediaCardInternal extends Component {
     const isInlinePlayer = isMobile ? false : shouldPlayInline;
     const onCardClick = this.getOnCardClickCallback(isInlinePlayer);
     const shouldOpenMediaViewer = typeof forceOpenMediaViewer === 'boolean' ? forceOpenMediaViewer : !isMobile && !onCardClick;
-
     if (type === 'external') {
       return this.renderExternal(shouldOpenMediaViewer);
     }
-
     if (type === 'link') {
       return null;
     }
-
     const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
-
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
-
     if (!id || type !== 'file') {
       return /*#__PURE__*/React.createElement(CardError, {
         dimensions: cardDimensions
       });
     }
-
     const contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
     const identifier = {
       id,
@@ -295,9 +267,9 @@ export class MediaCardInternal extends Component {
       ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     }));
   }
+}
 
-} // Needed for copy & paste
-
+// Needed for copy & paste
 export const getClipboardAttrs = ({
   id,
   alt,
@@ -310,16 +282,13 @@ export const getClipboardAttrs = ({
   const width = originalDimensions && originalDimensions.width;
   const height = originalDimensions && originalDimensions.height;
   let fileName = 'file'; // default name is needed for Confluence
-
   let fileSize = 1;
   let fileMimeType = '';
-
   if (fileState && fileState.status !== 'error') {
     fileSize = fileState.size;
     fileName = fileState.name;
     fileMimeType = fileState.mimeType;
   }
-
   return {
     'data-context-id': contextId,
     'data-type': 'file',

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

@@ -6,31 +6,25 @@ import { FabricChannel } from '@atlaskit/analytics-listeners';
 export class ErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       errorCaptured: false
     });
   }
-
   fireAnalyticsEvent(event) {
     const {
       createAnalyticsEvent
     } = this.props;
-
     if (createAnalyticsEvent) {
       const channel = FabricChannel.editor;
       createAnalyticsEvent(event).fire(channel);
     }
   }
-
   hasFallback() {
     return typeof this.props.fallbackComponent !== 'undefined';
   }
-
   shouldRecover() {
     return this.hasFallback() && this.state.errorCaptured;
   }
-
   componentDidCatch(error, errorInfo) {
     this.fireAnalyticsEvent({
       action: ACTION.CRASHED,
@@ -45,7 +39,6 @@ export class ErrorBoundary extends React.Component {
         errorRethrown: Boolean(this.props.rethrowError)
       }
     });
-
     if (this.hasFallback()) {
       this.setState({
         errorCaptured: true
@@ -56,13 +49,10 @@ export class ErrorBoundary extends React.Component {
       });
     }
   }
-
   render() {
     if (this.shouldRecover()) {
       return this.props.fallbackComponent;
     }
-
     return this.props.children;
   }
-
 }

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { breakoutConsts } from '@atlaskit/editor-common/utils';
+
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
  *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
-
 export function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
@@ -15,7 +15,6 @@ export function BreakoutSSRInlineScript() {
   if (typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom')) {
     return null;
   }
-
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   const context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
@@ -41,64 +40,51 @@ export const breakoutInlineScriptContext = `
   breakoutConsts.calcLineLength = ${breakoutConsts.calcLineLength.toString()};
   breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
 `;
-
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
-
   function findUp(element, condition) {
     if (!element) {
       return;
     }
-
     while (element.parentElement) {
       if (condition(element)) {
         return element.parentElement;
       }
-
       element = element.parentElement;
     }
   }
-
   const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), elem => {
     var _elem$parentElement;
-
     return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
   });
-
   if (!renderer) {
     return;
   }
-
   const observer = new MutationObserver(mutationsList => {
     mutationsList.forEach(item => {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
-
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(maybeNode => {
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
-
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-
           const width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-
           if (node.style.width === width) {
             return;
           }
+          node.style.width = width;
 
-          node.style.width = width; // Tables require some special logic, as they are not using common css transform approach,
+          // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-
           if (node.classList.contains('pm-table-container')) {
             const lineLength = breakoutConsts.calcLineLength();
             const left = lineLength / 2 - parseInt(width) / 2;
-
             if (left < 0) {
               node.style.left = left + 'px';
             }
@@ -117,34 +103,31 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
     });
   });
-
   const applyMediaBreakout = card => {
     // width was already set by another breakout script
     if (card.style.width) {
       return;
     }
+    const tableParent = findUp(card, elem => elem instanceof HTMLTableCellElement);
 
-    const tableParent = findUp(card, elem => elem instanceof HTMLTableCellElement); // only apply the breakout to media elements not nested inside table
+    // only apply the breakout to media elements not nested inside table
     // table sizing is not based on percentage width
-
     if (tableParent) {
       return;
     }
-
     const mode = card.dataset.mode || card.dataset.layout || '';
     const width = card.dataset.width;
-
     if (WIDE_LAYOUT_MODES.includes(mode)) {
       card.style.width = '100%';
     } else if (width) {
       card.style.width = `${width}%`;
     }
   };
-
   observer.observe(renderer, {
     childList: true,
     subtree: true
   });
+
   /**
    * Using window load event to unsubscribe from mutation observer, as at this stage document is fully rendered.
    * Experiment with DOMContentLoaded showed that some of the blocks were not processed at all.
@@ -155,13 +138,10 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
    * – https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
    * – https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
    */
-
   const disconnect = () => {
     observer.disconnect();
     window.removeEventListener('load', disconnect);
   };
-
   window.addEventListener('load', disconnect);
 }
-
 export const calcLineLength = breakoutConsts.calcLineLength;