@atlaskit/editor-common 65.0.0 → 66.0.2

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -38,13 +42,22 @@ const EXPAND_EXPANDED_BORDER_COLOR = themed({
   light: colors.N40A,
   dark: colors.DN50
 });
-export const ExpandIconWrapper = styled.div`
+export const ExpandIconWrapper = ({
+  children,
+  expanded
+}) => {
+  return jsx("div", {
+    css: props => expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props)
+  }, children);
+};
+
+const expandIconWrapperStyle = props => css`
   cursor: pointer;
   display: flex;
   color: ${themed({
   light: colors.N90,
   dark: '#d9dde3'
-})};
+})(props)};
   border-radius: ${gridSize() / 2}px;
   width: 24px;
   height: 24px;
@@ -54,69 +67,85 @@ export const ExpandIconWrapper = styled.div`
   }
 
   svg {
-    ${props => props.expanded ? 'transform: rotate(90deg);' : ''}
     transition: transform 0.2s ${akEditorSwoopCubicBezier};
   }
 `;
-export const ExpandLayoutWrapper = styled.div`
+
+const expandIconWrapperExpandedStyle = css`
+  svg {
+    transform: rotate(90deg);
+  }
+`;
+export const expandLayoutWrapperStyle = css`
   width: ${gridSize() * 3}px;
   height: ${gridSize() * 3}px;
 `;
-const ContainerStyles = css`
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({
-  expanded,
-  focused
-}) => {
-  const expandedBorderColor = expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR;
-  return focused ? EXPAND_FOCUSED_BORDER_COLOR : expandedBorderColor;
-}};
-  border-radius: ${BORDER_RADIUS}px;
-  min-height: 25px;
-  background: ${({
-  expanded
-}) => !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
-  margin: ${props => `${gridSize() / 2 / fontSize()}rem ${// Only only these margins if the expand isn't editable
-// and is the root level expand.
-props['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : `0`} 0`};
+export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", _extends({
+    css: expandLayoutWrapperStyle
+  }, rest, {
+    ref: ref
+  }), children);
+});
 
-  transition: background 0.3s ${akEditorSwoopCubicBezier},
-    border-color 0.3s ${akEditorSwoopCubicBezier};
-  padding: ${gridSize}px;
+const containerStyles = styleProps => {
+  const {
+    expanded,
+    focused
+  } = styleProps;
+  const marginTop = `${gridSize() / 2 / fontSize()}rem`;
+  const marginBottom = 0; // Only only these margins if the expand isn't editable
+  // and is the root level expand.
 
-  &:hover {
-    border: 1px solid ${themed({
-  light: colors.N50A,
-  dark: colors.DN50
-})};
-    background: ${EXPAND_SELECTED_BACKGROUND};
-  }
+  const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
+  const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
+  return themeProps => css`
+    border-width: 1px;
+    border-style: solid;
+    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR};
+    border-radius: ${BORDER_RADIUS}px;
+    min-height: 25px;
+    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps)};
+    margin: ${margin};
+
+    transition: background 0.3s ${akEditorSwoopCubicBezier},
+      border-color 0.3s ${akEditorSwoopCubicBezier};
+    padding: ${gridSize()}px;
+
+    &:hover {
+      border: 1px solid
+        ${themed({
+    light: colors.N50A,
+    dark: colors.DN50
+  })(themeProps)};
+      background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
+    }
 
-  td > &:first-child {
-    margin-top: 0;
+    td > &:first-child {
+      margin-top: 0;
+    }
+  `;
+};
+
+const contentStyles = styleProps => themeProps => css`
+  padding-top: ${styleProps.expanded ? gridSize() : 0}px;
+  padding-right: ${gridSize()}px;
+  padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+  display: flow-root;
+
+  // The follow rules inside @supports block are added as a part of ED-8893
+  // The fix is targeting mobile bridge on iOS 12 or below,
+  // We should consider remove this fix when we no longer support iOS 12
+  @supports not (display: flow-root) {
+    width: 100%;
+    box-sizing: border-box;
   }
-`;
-const ContentStyles = css`
-  ${({
-  expanded
-}) => {
-  return css`
-      padding-top: ${expanded ? gridSize() : 0}px;
-      padding-right: ${gridSize()}px;
-      padding-left: ${gridSize() * 4 - gridSize() / 2}px;
-      display: table;
-      display: flow-root;
-
-      // The follow rules inside @supports block are added as a part of ED-8893
-      // The fix is targeting mobile bridge on iOS 12 or below,
-      // We should consider remove this fix when we no longer support iOS 12
-      @supports not (display: flow-root) {
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      ${!expanded ? `
+
+  ${!styleProps.expanded ? `
         .expand-content-wrapper, .nestedExpand-content-wrapper {
           /* We visually hide the content here to preserve the content during copy+paste */
           width: 100%;
@@ -128,10 +157,9 @@ const ContentStyles = css`
           user-select: none;
         }
       ` : ''}
-    `;
-}};
 `;
-const TitleInputStyles = css`
+
+const titleInputStyles = props => css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -140,7 +168,7 @@ const TitleInputStyles = css`
   color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   background: transparent;
   display: flex;
   flex: 1;
@@ -152,10 +180,11 @@ const TitleInputStyles = css`
     color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   }
 `;
-const TitleContainerStyles = css`
+
+const titleContainerStyles = props => css`
   padding: 0;
   display: flex;
   align-items: flex-start;
@@ -166,7 +195,7 @@ const TitleContainerStyles = css`
   color: ${themed({
   light: colors.N300A,
   dark: colors.DN600
-})};
+})(props)};
   overflow: hidden;
   cursor: pointer;
   // Prevent browser selection being inside the title container
@@ -176,9 +205,10 @@ const TitleContainerStyles = css`
     outline: 0;
   }
 `;
+
 export const sharedExpandStyles = {
-  TitleInputStyles,
-  TitleContainerStyles,
-  ContainerStyles,
-  ContentStyles
+  titleInputStyles,
+  titleContainerStyles,
+  containerStyles,
+  contentStyles
 };

package/dist/es2019/ui/{IntlNextErrorBoundary → IntlErrorBoundary}/index.js

@@ -9,7 +9,7 @@ const isMissingIntlProviderInAncestryError = err => {
   return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
 };
 
-export class IntlNextErrorBoundary extends React.Component {
+export class IntlErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
 

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

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { calcPxFromPct } from './grid';
-import { MediaSingleWrapper, MediaWrapper } from './styled';
+import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -74,13 +76,15 @@ export default function MediaSingle({
   }
 
   const [media, caption] = children;
-  return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
-    innerRef: handleMediaSingleRef,
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return jsx("div", {
+    ref: handleMediaSingleRef,
+    css: MediaSingleDimensionHelper({
+      width,
+      layout,
+      containerWidth,
+      pctWidth,
+      fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -88,7 +92,7 @@ export default function MediaSingle({
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/es2019/ui/MediaSingle/styled.js

@@ -1,4 +1,6 @@
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 
@@ -156,24 +158,20 @@ const RenderFallbackContainer = ({
   ` : ''}
 `;
 
-export const MediaWrapper = styled.div`
+export const mediaWrapperStyle = props => css`
   position: relative;
 
-  ${RenderFallbackContainer}
+  ${RenderFallbackContainer(props)}
 
   /* Editor */
   & > figure {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
 
   & > div {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
@@ -192,7 +190,10 @@ export const MediaWrapper = styled.div`
     }
   }
 `;
-export const MediaSingleWrapper = styled.div`
-  ${MediaSingleDimensionHelper};
-`;
+export const MediaWrapper = ({
+  children,
+  ...rest
+}) => jsx("div", {
+  css: mediaWrapperStyle(rest)
+}, children);
 MediaWrapper.displayName = 'WrapperMediaSingle';

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

@@ -6,6 +6,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { calculatePlacement, calculatePosition, findOverflowScrollParent, validatePosition } from './utils';
 export default class Popup extends React.Component {
   constructor(...args) {
+    var _window;
+
     super(...args);
 
     _defineProperty(this, "state", {
@@ -25,6 +27,10 @@ export default class Popup extends React.Component {
     _defineProperty(this, "scheduledUpdatePosition", rafSchedule(props => this.updatePosition(props)));
 
     _defineProperty(this, "onResize", () => this.scheduledUpdatePosition(this.props));
+
+    _defineProperty(this, "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(() => {
+      this.scheduledUpdatePosition(this.props);
+    }) : undefined);
   }
 
   /**
@@ -147,9 +153,14 @@ export default class Popup extends React.Component {
     const {
       stick
     } = this.props;
+    this.scrollParentElement = findOverflowScrollParent(this.props.target);
+
+    if (this.scrollParentElement && this.resizeObserver) {
+      this.resizeObserver.observe(this.scrollParentElement);
+    }
 
     if (stick) {
-      this.scrollElement = findOverflowScrollParent(this.props.target);
+      this.scrollElement = this.scrollParentElement;
     } else {
       this.scrollElement = this.props.scrollableElement;
     }
@@ -166,6 +177,10 @@ export default class Popup extends React.Component {
       this.scrollElement.removeEventListener('scroll', this.onResize);
     }
 
+    if (this.scrollParentElement && this.resizeObserver) {
+      this.resizeObserver.unobserve(this.scrollParentElement);
+    }
+
     this.scheduledUpdatePosition.cancel();
   }
 

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

@@ -12,7 +12,6 @@ import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const blockNodeStyle = css`
-  align-items: center;
   background: ${N30};
   border: 1px dashed ${N50};
   border-radius: ${borderRadius()}px;

package/dist/es2019/ui/index.js

@@ -11,9 +11,7 @@ export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
-export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
+export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
-export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
-export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';

package/dist/es2019/utils/compare-props.js

@@ -0,0 +1,99 @@
+import React from 'react';
+export const getKeys = Object.keys;
+export const getKeysAddedRemovedCommon = (object1, object2) => {
+  const oldKeys = object1 !== null ? getKeys(object1) : [];
+  const newKeys = object2 !== null ? getKeys(object2) : [];
+  const removed = oldKeys.filter(key => !newKeys.includes(key));
+  const added = newKeys.filter(key => !oldKeys.includes(key));
+  const common = oldKeys.filter(key => newKeys.includes(key));
+  return {
+    added,
+    common,
+    removed
+  };
+};
+export const serializeValue = value => {
+  const valueType = typeof value;
+
+  if (value === null) {
+    return 'null';
+  } else if (value === undefined) {
+    return 'undefined';
+  } else if (valueType === 'string' || valueType === 'number') {
+    return value;
+  } else if (valueType === 'symbol') {
+    return value.toString();
+  } // Calling toString of function returns whole function text with body.
+  // So, just return function with name.
+  else if (valueType === 'function') {
+    return `function:${value.name}`;
+  } else if (valueType === 'object') {
+    return {
+      type: 'object',
+      keys: Object.keys(value)
+    };
+  }
+};
+export const getPropsDifference = (object1, object2, curDepth = 0, maxDepth = 2, keysToIgnore = []) => {
+  const {
+    added,
+    common,
+    removed
+  } = getKeysAddedRemovedCommon(object1, object2);
+  const changed = [];
+  common.forEach(key => {
+    const value1 = object1[key];
+    const value2 = object2[key];
+    const value1Type = typeof value1;
+    const value2Type = typeof value2; // Do comparision only if values doesn't match (or reference to same object in memory).
+    // Or if key does not exist in keys to ignore.
+
+    if (value1 !== value2 && keysToIgnore.indexOf(key) === -1) {
+      // if both key value are objects and not referencing same object in memory.
+      //  then get recursive difference.
+      if ( /*#__PURE__*/React.isValidElement(value1) || /*#__PURE__*/React.isValidElement(value2)) {
+        changed.push({
+          key,
+          reactElementChanged: true
+        });
+      } else if (value1Type === 'object' && value2Type === 'object') {
+        if (curDepth <= maxDepth) {
+          const difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
+          changed.push({
+            key,
+            difference
+          });
+        } else {
+          changed.push({
+            key,
+            maxDepthReached: true
+          });
+        }
+      } else {
+        changed.push({
+          key,
+          oldValue: serializeValue(value1),
+          newValue: serializeValue(value2)
+        });
+      }
+    }
+  });
+  return {
+    added,
+    changed,
+    removed
+  };
+};
+export const getShallowPropsDifference = (object1, object2) => {
+  const {
+    added,
+    common,
+    removed
+  } = getKeysAddedRemovedCommon(object1, object2);
+  const changed = common.filter(key => object1[key] !== object2[key]);
+  return {
+    added,
+    changed,
+    removed
+  };
+};

package/dist/es2019/utils/index.js

@@ -23,4 +23,6 @@ export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
-export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { getShallowPropsDifference, getPropsDifference } from './compare-props';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';

package/dist/es2019/utils/performance/hooks/use-component-render-tracking/index.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { uuid } from '@atlaskit/adf-schema';
+import { getPropsDifference, getShallowPropsDifference } from '../../../compare-props';
+export function useComponentRenderTracking({
+  onRender,
+  propsDiffingOptions,
+  zeroBasedCount = true
+}) {
+  const propsRef = useRef();
+  const renderCountRef = useRef(zeroBasedCount ? 0 : 1);
+  const {
+    current: componentId
+  } = useRef(uuid.generate());
+  useEffect(() => {
+    const lastProps = propsRef.current;
+    const renderCount = renderCountRef.current;
+    let propsDifference;
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? getShallowPropsDifference(lastProps, propsDiffingOptions.props) : getPropsDifference(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    const result = {
+      renderCount,
+      propsDifference,
+      componentId
+    };
+    onRender(result);
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
+      propsRef.current = propsDiffingOptions.props;
+    }
+
+    renderCountRef.current = renderCountRef.current + 1;
+  }); // No dependencies run on each render
+}

package/dist/es2019/utils/validator.js

@@ -1,4 +1,5 @@
-import { defaultSchema, inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 export const ADFStages = {
   FINAL: 'final',
   STAGE_0: 'stage0'
@@ -356,7 +357,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
             mediaCollection = collection;
           }
 
-          if (mediaId && mediaCollection && adfStage === 'stage0') {
+          if (mediaId && mediaCollection) {
             return {
               type,
               attrs,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "65.0.0",
+	"version": "66.0.2",
 	"sideEffects": false
 }

package/dist/esm/i18n/en.js

@@ -0,0 +1,19 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+export default {
+  'fabric.editor.captionPlaceholder': 'Add a caption',
+  'fabric.editor.codeBidiWarningLabel': 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.',
+  'fabric.editor.collapseNode': 'Collapse content',
+  'fabric.editor.expandDefaultTitle': 'Click here to expand...',
+  'fabric.editor.expandNode': 'Expand content',
+  'fabric.editor.expandPlaceholder': 'Give this expand a title...',
+  'fabric.editor.openLink': 'Open link in a new tab',
+  'fabric.editor.unsupportedBlockContent': 'This editor does not support displaying this content',
+  'fabric.editor.unsupportedContentTooltip': 'Content is not available in this editor, this will be preserved when you edit and save',
+  'fabric.editor.unsupportedInlineContent': 'Unsupported content'
+};

package/dist/esm/i18n/en_GB.js

@@ -0,0 +1,19 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//English (United Kingdom)
+export default {
+  'fabric.editor.captionPlaceholder': 'Add a caption',
+  'fabric.editor.codeBidiWarningLabel': 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.',
+  'fabric.editor.collapseNode': 'Collapse content',
+  'fabric.editor.expandDefaultTitle': 'Click here to expand...',
+  'fabric.editor.expandNode': 'Expand content',
+  'fabric.editor.expandPlaceholder': 'Give this expand a title...',
+  'fabric.editor.openLink': 'Open link in a new tab',
+  'fabric.editor.unsupportedBlockContent': 'This editor does not support displaying this content',
+  'fabric.editor.unsupportedContentTooltip': 'Content is not available in this editor, this will be preserved when you edit and save',
+  'fabric.editor.unsupportedInlineContent': 'Unsupported content'
+};