@atlaskit/editor-common 65.0.0 → 66.0.2

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

@@ -13,6 +13,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -63,7 +65,7 @@ var isSameMark = function isSameMark(mark, otherMark) {
 exports.isSameMark = isSameMark;
 
 var getValidDocument = function getValidDocument(doc) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var node = getValidNode(doc, schema, adfStage);
 
@@ -88,7 +90,7 @@ var wrapInlineNodes = function wrapInlineNodes() {
 };
 
 var getValidContent = function getValidContent(content) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   return content.map(function (node) {
     return getValidNode(node, schema, adfStage);
@@ -101,7 +103,7 @@ var RELATIVE_LINK = /^\//;
 var ANCHOR_LINK = /^#/;
 
 var flattenUnknownBlockTree = function flattenUnknownBlockTree(node) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var output = [];
   var isPrevLeafNode = false;
@@ -210,7 +212,7 @@ var getValidMarks = function getValidMarks(marks) {
 
 
 var getValidNode = function getValidNode(originalNode) {
-  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.defaultSchema;
+  var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'final';
   var attrs = originalNode.attrs,
       marks = originalNode.marks,
@@ -399,7 +401,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.2",
 	"sideEffects": false
 }

package/dist/es2019/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/es2019/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'
+};

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/panel.js

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';

package/dist/es2019/styles/index.js

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

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,107 +173,110 @@ const mainDynamicStyles = panelType => props => {
   `;
 };
 
-export const panelSharedStyles = css`
-  .${PanelSharedCssClassName.prefix} {
-    border-radius: ${borderRadius()}px;
-    margin: ${blockNodesVerticalMargin} 0 0;
-    padding: ${gridSize()}px;
-    min-width: ${akEditorTableCellMinWidth}px;
-    display: flex;
-    position: relative;
-    align-items: baseline;
-    word-break: break-word;
+export const panelSharedStylesWithoutPrefix = props => css`
+  border-radius: ${borderRadius()}px;
+  margin: ${blockNodesVerticalMargin} 0 0;
+  padding: ${gridSize()}px;
+  min-width: ${akEditorTableCellMinWidth}px;
+  display: flex;
+  position: relative;
+  align-items: baseline;
+  word-break: break-word;
 
-    ${mainDynamicStyles(PanelType.INFO)}
+  ${mainDynamicStyles(PanelType.INFO)(props)}
 
-    .${PanelSharedCssClassName.icon} {
-      flex-shrink: 0;
-      height: ${gridSize() * 3}px;
-      width: ${gridSize() * 3}px;
-      box-sizing: content-box;
-      padding-right: ${gridSize()}px;
-      text-align: center;
-      user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      ${iconDynamicStyles(PanelType.INFO)}
+  .${PanelSharedCssClassName.icon} {
+    flex-shrink: 0;
+    height: ${gridSize() * 3}px;
+    width: ${gridSize() * 3}px;
+    box-sizing: content-box;
+    padding-right: ${gridSize()}px;
+    text-align: center;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    ${iconDynamicStyles(PanelType.INFO)(props)}
 
-      > span {
-        vertical-align: middle;
-        display: inline-flex;
-      }
+    > span {
+      vertical-align: middle;
+      display: inline-flex;
+    }
 
-      .${emojiSprite} {
-        vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
-      }
+    .${emojiSprite} {
+      vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
+    }
 
-      .${emojiImage} {
-        vertical-align: ${panelEmojiImageVerticalAlignment}px;
+    .${emojiImage} {
+      vertical-align: ${panelEmojiImageVerticalAlignment}px;
 
-        // Vertical align only works for inline-block elements in Firefox
-        @-moz-document url-prefix() {
-          img {
-            display: inline-block;
-          }
+      // Vertical align only works for inline-block elements in Firefox
+      @-moz-document url-prefix() {
+        img {
+          display: inline-block;
         }
       }
     }
+  }
 
-    .ak-editor-panel__content {
-      margin: 1px 0 1px;
-      flex: 1 0 0;
-      /*
-        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
-        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
-      */
-      min-width: 0;
-    }
+  .ak-editor-panel__content {
+    margin: 1px 0 1px;
+    flex: 1 0 0;
+    /*
+      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
+      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
+    */
+    min-width: 0;
+  }
 
-    &[data-panel-type='${PanelType.NOTE}'] {
-      ${mainDynamicStyles(PanelType.NOTE)}
+  &[data-panel-type='${PanelType.NOTE}'] {
+    ${mainDynamicStyles(PanelType.NOTE)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.NOTE)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.NOTE)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.TIP}'] {
-      ${mainDynamicStyles(PanelType.TIP)}
+  &[data-panel-type='${PanelType.TIP}'] {
+    ${mainDynamicStyles(PanelType.TIP)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.TIP)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.TIP)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.WARNING}'] {
-      ${mainDynamicStyles(PanelType.WARNING)}
+  &[data-panel-type='${PanelType.WARNING}'] {
+    ${mainDynamicStyles(PanelType.WARNING)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.WARNING)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.WARNING)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.ERROR}'] {
-      ${mainDynamicStyles(PanelType.ERROR)}
+  &[data-panel-type='${PanelType.ERROR}'] {
+    ${mainDynamicStyles(PanelType.ERROR)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.ERROR)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.ERROR)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.SUCCESS}'] {
-      ${mainDynamicStyles(PanelType.SUCCESS)}
+  &[data-panel-type='${PanelType.SUCCESS}'] {
+    ${mainDynamicStyles(PanelType.SUCCESS)(props)}
 
-      .${PanelSharedCssClassName.icon} {
-        ${iconDynamicStyles(PanelType.SUCCESS)}
-      }
+    .${PanelSharedCssClassName.icon} {
+      ${iconDynamicStyles(PanelType.SUCCESS)(props)}
     }
+  }
 
-    &[data-panel-type='${PanelType.CUSTOM}'] {
-      ${themed({
+  &[data-panel-type='${PanelType.CUSTOM}'] {
+    ${themed({
   dark: getPanelBackgroundDarkModeColors
-})};
-    }
+})(props)};
+  }
+`;
+export const panelSharedStyles = props => css`
+  .${PanelSharedCssClassName.prefix} {
+    ${panelSharedStylesWithoutPrefix(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,

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

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
@@ -50,9 +49,7 @@ export function BaseThemeWrapper({
   }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 export function BaseTheme({
   children,