@atlaskit/editor-common 65.0.0 → 66.0.0

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

@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui/index.js

@@ -43,10 +43,10 @@ Object.defineProperty(exports, "ExpandIconWrapper", {
     return _Expand.ExpandIconWrapper;
   }
 });
-Object.defineProperty(exports, "ExpandLayoutWrapper", {
+Object.defineProperty(exports, "ExpandLayoutWrapperWithRef", {
   enumerable: true,
   get: function get() {
-    return _Expand.ExpandLayoutWrapper;
+    return _Expand.ExpandLayoutWrapperWithRef;
   }
 });
 Object.defineProperty(exports, "HelperMessage", {
@@ -55,22 +55,10 @@ Object.defineProperty(exports, "HelperMessage", {
     return _Messages.HelperMessage;
   }
 });
-Object.defineProperty(exports, "IntlLegacyFallbackProvider", {
+Object.defineProperty(exports, "IntlErrorBoundary", {
   enumerable: true,
   get: function get() {
-    return _IntlLegacyFallbackProvider.IntlLegacyFallbackProvider;
-  }
-});
-Object.defineProperty(exports, "IntlNextErrorBoundary", {
-  enumerable: true,
-  get: function get() {
-    return _IntlNextErrorBoundary.IntlNextErrorBoundary;
-  }
-});
-Object.defineProperty(exports, "LegacyToNextIntlProvider", {
-  enumerable: true,
-  get: function get() {
-    return _LegacyToNextIntlProvider.LegacyToNextIntlProvider;
+    return _IntlErrorBoundary.IntlErrorBoundary;
   }
 });
 Object.defineProperty(exports, "MediaSingle", {
@@ -94,7 +82,7 @@ Object.defineProperty(exports, "Popup", {
 Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
   enumerable: true,
   get: function get() {
-    return _IntlNextErrorBoundary.REACT_INTL_ERROR_MESSAGE;
+    return _IntlErrorBoundary.REACT_INTL_ERROR_MESSAGE;
   }
 });
 Object.defineProperty(exports, "UnsupportedBlock", {
@@ -163,6 +151,12 @@ Object.defineProperty(exports, "clearNextSiblingMarginTopStyle", {
     return _clearNextSiblingMarginTop.clearNextSiblingMarginTopStyle;
   }
 });
+Object.defineProperty(exports, "expandLayoutWrapperStyle", {
+  enumerable: true,
+  get: function get() {
+    return _Expand.expandLayoutWrapperStyle;
+  }
+});
 Object.defineProperty(exports, "expandMessages", {
   enumerable: true,
   get: function get() {
@@ -274,11 +268,7 @@ var _Messages = require("./Messages");
 
 var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 
-var _IntlNextErrorBoundary = require("./IntlNextErrorBoundary");
-
-var _IntlLegacyFallbackProvider = require("./IntlLegacyFallbackProvider");
-
-var _LegacyToNextIntlProvider = require("./LegacyToNextIntlProvider");
+var _IntlErrorBoundary = require("./IntlErrorBoundary");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

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

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeValue = exports.getShallowPropsDifference = exports.getPropsDifference = exports.getKeysAddedRemovedCommon = exports.getKeys = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var getKeys = Object.keys;
+exports.getKeys = getKeys;
+
+var getKeysAddedRemovedCommon = function getKeysAddedRemovedCommon(object1, object2) {
+  var oldKeys = object1 !== null ? getKeys(object1) : [];
+  var newKeys = object2 !== null ? getKeys(object2) : [];
+  var removed = oldKeys.filter(function (key) {
+    return !newKeys.includes(key);
+  });
+  var added = newKeys.filter(function (key) {
+    return !oldKeys.includes(key);
+  });
+  var common = oldKeys.filter(function (key) {
+    return newKeys.includes(key);
+  });
+  return {
+    added: added,
+    common: common,
+    removed: removed
+  };
+};
+
+exports.getKeysAddedRemovedCommon = getKeysAddedRemovedCommon;
+
+var serializeValue = function serializeValue(value) {
+  var valueType = (0, _typeof2.default)(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:".concat(value.name);
+  } else if (valueType === 'object') {
+    return {
+      type: 'object',
+      keys: Object.keys(value)
+    };
+  }
+};
+
+exports.serializeValue = serializeValue;
+
+var getPropsDifference = function getPropsDifference(object1, object2) {
+  var curDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
+  var keysToIgnore = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  var _getKeysAddedRemovedC = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC.added,
+      common = _getKeysAddedRemovedC.common,
+      removed = _getKeysAddedRemovedC.removed;
+
+  var changed = [];
+  common.forEach(function (key) {
+    var value1 = object1[key];
+    var value2 = object2[key];
+    var value1Type = (0, _typeof2.default)(value1);
+    var value2Type = (0, _typeof2.default)(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.default.isValidElement(value1) || /*#__PURE__*/_react.default.isValidElement(value2)) {
+        changed.push({
+          key: key,
+          reactElementChanged: true
+        });
+      } else if (value1Type === 'object' && value2Type === 'object') {
+        if (curDepth <= maxDepth) {
+          var difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
+          changed.push({
+            key: key,
+            difference: difference
+          });
+        } else {
+          changed.push({
+            key: key,
+            maxDepthReached: true
+          });
+        }
+      } else {
+        changed.push({
+          key: key,
+          oldValue: serializeValue(value1),
+          newValue: serializeValue(value2)
+        });
+      }
+    }
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};
+
+exports.getPropsDifference = getPropsDifference;
+
+var getShallowPropsDifference = function getShallowPropsDifference(object1, object2) {
+  var _getKeysAddedRemovedC2 = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC2.added,
+      common = _getKeysAddedRemovedC2.common,
+      removed = _getKeysAddedRemovedC2.removed;
+
+  var changed = common.filter(function (key) {
+    return object1[key] !== object2[key];
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};
+
+exports.getShallowPropsDifference = getShallowPropsDifference;

package/dist/cjs/utils/index.js

@@ -179,12 +179,24 @@ Object.defineProperty(exports, "getModeFromTheme", {
     return _getModeFromTheme.getModeFromTheme;
   }
 });
+Object.defineProperty(exports, "getPropsDifference", {
+  enumerable: true,
+  get: function get() {
+    return _compareProps.getPropsDifference;
+  }
+});
 Object.defineProperty(exports, "getResponseEndTime", {
   enumerable: true,
   get: function get() {
     return _navigation.getResponseEndTime;
   }
 });
+Object.defineProperty(exports, "getShallowPropsDifference", {
+  enumerable: true,
+  get: function get() {
+    return _compareProps.getShallowPropsDifference;
+  }
+});
 Object.defineProperty(exports, "getTTISeverity", {
   enumerable: true,
   get: function get() {
@@ -335,6 +347,12 @@ Object.defineProperty(exports, "todayTimestampInUTC", {
     return _date.todayTimestampInUTC;
   }
 });
+Object.defineProperty(exports, "useComponentRenderTracking", {
+  enumerable: true,
+  get: function get() {
+    return _useComponentRenderTracking.useComponentRenderTracking;
+  }
+});
 Object.defineProperty(exports, "validateADFEntity", {
   enumerable: true,
   get: function get() {
@@ -404,4 +422,8 @@ var _browserExtensions = require("./browser-extensions");
 
 var _renderCount = require("./profiler/render-count");
 
-var _validateUsingSpec = require("./validate-using-spec");
+var _validateUsingSpec = require("./validate-using-spec");
+
+var _compareProps = require("./compare-props");
+
+var _useComponentRenderTracking = require("./performance/hooks/use-component-render-tracking");

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentRenderTracking = useComponentRenderTracking;
+
+var _react = require("react");
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _compareProps = require("../../../compare-props");
+
+function useComponentRenderTracking(_ref) {
+  var onRender = _ref.onRender,
+      propsDiffingOptions = _ref.propsDiffingOptions,
+      _ref$zeroBasedCount = _ref.zeroBasedCount,
+      zeroBasedCount = _ref$zeroBasedCount === void 0 ? true : _ref$zeroBasedCount;
+  var propsRef = (0, _react.useRef)();
+  var renderCountRef = (0, _react.useRef)(zeroBasedCount ? 0 : 1);
+
+  var _useRef = (0, _react.useRef)(_adfSchema.uuid.generate()),
+      componentId = _useRef.current;
+
+  (0, _react.useEffect)(function () {
+    var lastProps = propsRef.current;
+    var renderCount = renderCountRef.current;
+    var propsDifference;
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? (0, _compareProps.getShallowPropsDifference)(lastProps, propsDiffingOptions.props) : (0, _compareProps.getPropsDifference)(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    var result = {
+      renderCount: renderCount,
+      propsDifference: propsDifference,
+      componentId: 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/cjs/utils/validator.js

@@ -399,7 +399,7 @@ var getValidNode = function getValidNode(originalNode) {
             mediaCollection = collection;
           }
 
-          if (mediaId && mediaCollection && adfStage === 'stage0') {
+          if (mediaId && mediaCollection) {
             return {
               type: type,
               attrs: attrs,

package/dist/cjs/version.json

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

package/dist/es2019/normalize-feature-flags.js

@@ -1,6 +1,24 @@
 import camelCase from 'lodash/camelCase';
 import kebabCase from 'lodash/kebabCase';
 const EMPTY = {};
+
+function isObjectFlagKey(key, value, objectFlagKeys) {
+  return Boolean(typeof value === 'string' && (objectFlagKeys === null || objectFlagKeys === void 0 ? void 0 : objectFlagKeys.includes(key)));
+}
+
+function isValidJSONObject(value) {
+  try {
+    let result = JSON.parse(value);
+
+    if (typeof result === 'object' && result !== null) {
+      return true;
+    }
+
+    return false;
+  } catch (err) {
+    return false;
+  }
+}
 /**
  * Normalise and filter a free Record<string, unknown> to match
  * the rules for feature flags in editor and renderer
@@ -11,18 +29,36 @@ const EMPTY = {};
  *
  * Output matches
  * 1. cased in camelCase (match [a-zA-Z])
- * 2. has boolean value
+ * 2. has boolean value or object {} value
  *
  * @param rawFeatureFlags
  */
 
-export function normalizeFeatureFlags(rawFeatureFlags) {
+
+export function normalizeFeatureFlags(rawFeatureFlags, options) {
   if (!rawFeatureFlags) {
     return EMPTY;
   }
 
-  return Object.entries(rawFeatureFlags).filter(e => typeof e[1] === 'boolean').filter(([key]) => kebabCase(key) === key).map(([key, value]) => [camelCase(key), value]).reduce((flags, [key, value]) => {
-    flags[key] = value;
+  return Object.entries(rawFeatureFlags).filter(e => {
+    if (typeof e[1] === 'boolean') {
+      return true;
+    }
+
+    if (isObjectFlagKey(camelCase(e[0]), e[1], options === null || options === void 0 ? void 0 : options.objectFlagKeys) && isValidJSONObject(e[1])) {
+      return true;
+    }
+
+    return false;
+  }).filter(([key]) => kebabCase(key) === key).map(([key, value]) => [camelCase(key), value]).reduce((flags, [key, value]) => {
+    if (isObjectFlagKey(key, value, options === null || options === void 0 ? void 0 : options.objectFlagKeys)) {
+      flags[key] = JSON.parse(value);
+    }
+
+    if (typeof value === 'boolean') {
+      flags[key] = value;
+    }
+
     return flags;
   }, {});
 }

package/dist/es2019/styles/shared/link.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 const linkSharedStyle = css`
   a.blockLink {
     display: block;

package/dist/es2019/styles/shared/lists.js

@@ -42,8 +42,10 @@ export const listsSharedStyles = css`
       @see https://css-tricks.com/display-flow-root/
     */
     // For older browsers the do not support flow-root.
+    /* stylelint-disable declaration-block-no-duplicate-properties */
     display: table;
     display: flow-root;
+    /* stylelint-enable declaration-block-no-duplicate-properties */
   }
 
   /* =============== INDENTATION AESTHETICS ========= */

package/dist/es2019/styles/shared/panel.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
@@ -173,7 +173,7 @@ const mainDynamicStyles = panelType => props => {
   `;
 };
 
-export const panelSharedStyles = css`
+export const panelSharedStyles = props => css`
   .${PanelSharedCssClassName.prefix} {
     border-radius: ${borderRadius()}px;
     margin: ${blockNodesVerticalMargin} 0 0;
@@ -184,7 +184,7 @@ export const panelSharedStyles = css`
     align-items: baseline;
     word-break: break-word;
 
-    ${mainDynamicStyles(PanelType.INFO)}
+    ${mainDynamicStyles(PanelType.INFO)(props)}
 
     .${PanelSharedCssClassName.icon} {
       flex-shrink: 0;
@@ -197,7 +197,7 @@ export const panelSharedStyles = css`
       -moz-user-select: none;
       -webkit-user-select: none;
       -ms-user-select: none;
-      ${iconDynamicStyles(PanelType.INFO)}
+      ${iconDynamicStyles(PanelType.INFO)(props)}
 
       > span {
         vertical-align: middle;
@@ -231,49 +231,49 @@ export const panelSharedStyles = css`
     }
 
     &[data-panel-type='${PanelType.NOTE}'] {
-      ${mainDynamicStyles(PanelType.NOTE)}
+      ${mainDynamicStyles(PanelType.NOTE)(props)}
 
       .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.NOTE)}
+        ${iconDynamicStyles(PanelType.NOTE)(props)}
       }
     }
 
     &[data-panel-type='${PanelType.TIP}'] {
-      ${mainDynamicStyles(PanelType.TIP)}
+      ${mainDynamicStyles(PanelType.TIP)(props)}
 
       .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.TIP)}
+        ${iconDynamicStyles(PanelType.TIP)(props)}
       }
     }
 
     &[data-panel-type='${PanelType.WARNING}'] {
-      ${mainDynamicStyles(PanelType.WARNING)}
+      ${mainDynamicStyles(PanelType.WARNING)(props)}
 
       .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.WARNING)}
+        ${iconDynamicStyles(PanelType.WARNING)(props)}
       }
     }
 
     &[data-panel-type='${PanelType.ERROR}'] {
-      ${mainDynamicStyles(PanelType.ERROR)}
+      ${mainDynamicStyles(PanelType.ERROR)(props)}
 
       .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.ERROR)}
+        ${iconDynamicStyles(PanelType.ERROR)(props)}
       }
     }
 
     &[data-panel-type='${PanelType.SUCCESS}'] {
-      ${mainDynamicStyles(PanelType.SUCCESS)}
+      ${mainDynamicStyles(PanelType.SUCCESS)(props)}
 
       .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.SUCCESS)}
+        ${iconDynamicStyles(PanelType.SUCCESS)(props)}
       }
     }
 
     &[data-panel-type='${PanelType.CUSTOM}'] {
       ${themed({
   dark: getPanelBackgroundDarkModeColors
-})};
+})(props)};
     }
   }
 `;

package/dist/es2019/styles/shared/rule.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -7,10 +7,10 @@ const divider = themed({
   dark: DN50
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
-export const ruleSharedStyles = css`
+export const ruleSharedStyles = props => css`
   & hr {
     border: none;
-    background-color: ${divider};
+    background-color: ${divider(props)};
     margin: ${akEditorLineHeight}em 0;
     height: 2px;
     border-radius: 1px;

package/dist/es2019/styles/shared/table.js

@@ -44,12 +44,20 @@ const tableSharedStyle = props => css`
     padding-left: ${akEditorTableNumberColumnWidth - 1}px;
     clear: both;
   }
+  .${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table {
+    margin: ${tableMarginTop}px 0 0 0;
+  }
+
+  .${TableSharedCssClassName.TABLE_CONTAINER} > table,
+  .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table {
+    margin: ${tableMarginTop}px ${tableMarginSides}px 0 0;
+  }
+
   /* avoid applying styles to nested tables (possible via extensions) */
   .${TableSharedCssClassName.TABLE_CONTAINER} > table,
   .${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
   .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table {
     border-collapse: collapse;
-    margin: ${tableMarginTop}px ${tableMarginSides}px 0 0;
     border: ${tableCellBorderWidth}px solid
       ${themed({
   light: akEditorTableBorder,