@atlaskit/renderer 84.0.0 → 86.0.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @atlaskit/renderer
 
+## 86.0.0
+
+### Major Changes
+
+- [`304351e4b1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/304351e4b1e) - CETI-241 - Added additional panel ADF attributes (panelIconId, panelIconText) to uniquely identify custom panel emojis. The change has been categorised as major since it is a change to the full-schema ADF. However, the custom panel feature is behind a feature flag, has not yet been released to production, and is only currently planned for release to Confluence. See ADF change #61 for further details.
+- [`9d1e0356622`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d1e0356622) - [ux] CETI-166 Increase the standard panel icons size to make it consistent with the emojis in the panel content area
+
+### Minor Changes
+
+- [`de207a6b8e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de207a6b8e0) - Fixed a bug in SSR where media components would resize due to MutationObserver not receiving all children in initial call.
+- [`49878ec3af4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49878ec3af4) - Add `smartLinks` prop to React Renderer component
+
+  ```
+  interface SmartLinksOptions {
+    ssr?: boolean;
+  }
+  ```
+
+  It contains a `ssr` field which when set to true will enable SSR support for smart links nodes
+
+  ```
+  <Renderer
+    smartLinks={{
+      ssr: true
+    }}
+  >
+  ```
+
+- [`9c9557fcdd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c9557fcdd8) - AK-279 Moved copy button outside of heading, that made heading accessible
+- [`bd283364aad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd283364aad) - Fixed a bug for SSR where some media components would be rendered in the incorrect size resulting in jumping components during hydration.
+
+### Patch Changes
+
+- [`439cf07029a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/439cf07029a) - ED-13881 Move @atlaskit/adf-schema test helpers to @atlaskit/editor-test-helpers
+
+  A new entry point for @atlaskit/editor-test-helpers/adf-schema has been
+  introduced. All test helpers that previously lived under @atlaskit/adf-schema
+  have been moved there instead.
+
+  Imports inside @atlaskit/adf-schema that previously relied on relative paths, or
+  imports from other packages that referred to @atlaskit/adf-schema/test-helpers,
+  should be updated to reference @atlaskit/editor-test-helpers/adf-schema instead.
+
+  Old usages:
+
+  ```
+  import { schema } from '../relative/path/to/test-helpers';
+  import { schema } from '@atlaskit/adf-schema/test-helpers';
+  ```
+
+  New usage:
+
+  ```
+  import { schema } from '@atlaskit/editor-test-helpers/adf-schema';
+  ```
+
+- [`5293a48368e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5293a48368e) - fix image size in layout with ref and width observer
+- [`85bffe0fecb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85bffe0fecb) - Removed portal prop from Mention node
+- [`85c4e5a71ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c4e5a71ee) - [AK-837] added role prop for Status component
+- [`57f3b255fb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57f3b255fb2) - [ux] AK-608: Action items are keyboard accessible
+- [`3b49ff824ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b49ff824ec) - ED-14043 update prosemirror schema to only allow link mark on children of paragraph and mediaSingle
+- [`16294b02fd4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16294b02fd4) - CETI-242 Change the Color palette labels for panel
+- [`a36d06dee66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a36d06dee66) - [ux] Added intl tooling to all strings that were previously not using intl tooling. Should mean that more things are able to be translated. Also fixed the relevent tests to account for intl tooling.
+- Updated dependencies
+
+## 85.0.0
+
+### Major Changes
+
+- [`5af69bfe9be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af69bfe9be) - CETI-241 - Added additional panel ADF attributes (panelIconId, panelIconText) to uniquely identify custom panel emojis. The change has been categorised as major since it is a change to the full-schema ADF. However, the custom panel feature is behind a feature flag, has not yet been released to production, and is only currently planned for release to Confluence. See ADF change #61 for further details.
+- [`272a64c6bf0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/272a64c6bf0) - [ux] CETI-166 Increase the standard panel icons size to make it consistent with the emojis in the panel content area
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Make DecisionList, TaskList, MediaSingle, EmbedCard and Panel loadable.
+
+### Patch Changes
+
+- [`e221ee215e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e221ee215e7) - fix vertical scroll for firefox when media link is wrapped
+- [`231b3d8b718`](https://bitbucket.org/atlassian/atlassian-frontend/commits/231b3d8b718) - CETI-242 Change the Color palette labels for panel
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - ED-13753 Updated editor-common import entries.
+- Updated dependencies
+
+## 84.1.1
+
+### Patch Changes
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
+## 84.1.0
+
+### Minor Changes
+
+- [`b9cd2373064`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9cd2373064) - [ED-14106] Reset custom color when the node is inside a link
+
+### Patch Changes
+
+- [`d6c140182ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6c140182ce) - [ED-14095] Send a new analytics events when the document loaded is not a valid ProseMirror Model
+- Updated dependencies
+
 ## 84.0.0
 
 ### Major Changes

package/dist/cjs/actions/index.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -75,7 +75,7 @@ var RendererActions = /*#__PURE__*/function () {
         return false;
       }
 
-      return (0, _editorCommon.canApplyAnnotationOnRange)({
+      return (0, _utils.canApplyAnnotationOnRange)({
         from: from,
         to: to
       }, this.doc, this.schema);
@@ -243,7 +243,7 @@ var RendererActions = /*#__PURE__*/function () {
         return [];
       }
 
-      return (0, _editorCommon.getAnnotationIdsFromRange)(pos, this.doc, this.schema);
+      return (0, _utils.getAnnotationIdsFromRange)(pos, this.doc, this.schema);
     }
   }, {
     key: "applyAnnotation",

package/dist/cjs/analytics/enums.js

@@ -21,6 +21,7 @@ exports.ACTION = ACTION;
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
   ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
   ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
   ACTION["CLICKED"] = "clicked";
@@ -38,6 +39,7 @@ exports.ACTION = ACTION;
   ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["MEDIA_LINK_TRANSFORMED"] = "mediaLinkTransformed";
 })(ACTION || (exports.ACTION = ACTION = {}));
 
 var ACTION_SUBJECT;

package/dist/cjs/analytics/unsupported-content.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trackUnsupportedContentLevels = void 0;
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _enums = require("./enums");
 
@@ -15,7 +15,7 @@ var rendersMap = {};
 
 var processLevelsAndTrack = function processLevelsAndTrack(item, thresholds, dispatchAnalyticsEvent) {
   try {
-    var _getUnsupportedConten = (0, _editorCommon.getUnsupportedContentLevelData)(item.doc, thresholds),
+    var _getUnsupportedConten = (0, _utils.getUnsupportedContentLevelData)(item.doc, thresholds),
         severity = _getUnsupportedConten.severity,
         percentage = _getUnsupportedConten.percentage,
         _getUnsupportedConten2 = _getUnsupportedConten.counts,
@@ -26,7 +26,7 @@ var processLevelsAndTrack = function processLevelsAndTrack(item, thresholds, dis
       action: _enums.ACTION.UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED,
       actionSubject: _enums.ACTION_SUBJECT.RENDERER,
       attributes: {
-        appearance: (0, _editorCommon.getAnalyticsAppearance)(item.appearance),
+        appearance: (0, _utils.getAnalyticsAppearance)(item.appearance),
         platform: _events.PLATFORM.WEB,
         unsupportedContentLevelSeverity: severity,
         unsupportedContentLevelPercentage: percentage,

package/dist/cjs/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.headingAnchorLinkMessages = exports.codeBlockCopyButtonMessages = void 0;
+exports.tableCellMessages = exports.sortingIconMessages = exports.headingAnchorLinkMessages = exports.codeBlockCopyButtonMessages = void 0;
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -22,9 +22,55 @@ var headingAnchorLinkMessages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.headingLink.failedToCopy',
     defaultMessage: 'Copy failed',
     description: 'failed to copy heading link to clipboard'
+  },
+  copyAriaLabel: {
+    id: 'fabric.editor.headingLink.copyAriaLabel',
+    defaultMessage: 'Copy',
+    description: 'copy aria label for link icon'
   }
 });
 exports.headingAnchorLinkMessages = headingAnchorLinkMessages;
+var tableCellMessages = (0, _reactIntlNext.defineMessages)({
+  noneSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'none',
+    description: 'this table column is not sorted'
+  },
+  ascSortingLabel: {
+    id: 'fabric.editor.headingLink.ascSortingLabel',
+    defaultMessage: 'ascending',
+    description: 'this table column is sorted in ascending order'
+  },
+  descSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'descending',
+    description: 'this table column is sorted in descending order'
+  }
+});
+exports.tableCellMessages = tableCellMessages;
+var sortingIconMessages = (0, _reactIntlNext.defineMessages)({
+  noOrderLabel: {
+    id: 'fabric.editor.headingLink.noOrderLabel',
+    defaultMessage: 'Sort column A to Z',
+    description: 'Sort the column in ascending order'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.headingLink.ascOrderLabel',
+    defaultMessage: 'Sort column Z to A',
+    description: 'Sort the column in descending order'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: 'Clear sorting',
+    description: 'clear the sorting from this column'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cell",
+    description: 'this sort is invalid for merged cells'
+  }
+});
+exports.sortingIconMessages = sortingIconMessages;
 var codeBlockCopyButtonMessages = (0, _reactIntlNext.defineMessages)({
   copyCodeToClipboard: {
     id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',

package/dist/cjs/react/hooks/use-observed-width.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useObservedWidth = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var resizeObserver;
+var nodeToCallback = new WeakMap();
+
+var useObservedWidth = function useObservedWidth(node, useObservedWidthFlag) {
+  var _React$useState = _react.default.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      rect = _React$useState2[0],
+      setRect = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    if (!node || !useObservedWidthFlag) {
+      return;
+    }
+
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+
+            if (nodeToCallback.has(entry.target)) {
+              nodeToCallback.get(entry.target)(entry.contentRect);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+    }
+
+    nodeToCallback.set(node, function (rect) {
+      var x = rect.x,
+          y = rect.y,
+          width = rect.width,
+          height = rect.height,
+          top = rect.top,
+          left = rect.left,
+          bottom = rect.bottom,
+          right = rect.right;
+      return setRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        left: left,
+        bottom: bottom,
+        right: right
+      });
+    });
+    resizeObserver.observe(node);
+    return function () {
+      resizeObserver.unobserve(node);
+      nodeToCallback.delete(node);
+    };
+  }, [node, useObservedWidthFlag]);
+
+  return rect;
+};
+
+exports.useObservedWidth = useObservedWidth;

package/dist/cjs/react/index.js

@@ -31,9 +31,11 @@ var _textWrapper = _interopRequireDefault(require("./nodes/text-wrapper"));
 
 var _marks = require("./marks");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _validator = require("@atlaskit/editor-common/validator");
 
-var _utils = require("../utils");
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _utils2 = require("../utils");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
@@ -41,15 +43,17 @@ var _rendererNode = require("./renderer-node");
 
 var _code = require("./marks/code");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["key"];
+
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
 
-    if (markOrNode.type instanceof _prosemirrorModel.MarkType && prev && prev.type instanceof _prosemirrorModel.MarkType && Array.isArray(prev.content) && (0, _editorCommon.isSameMark)(prev, markOrNode)) {
+    if (markOrNode.type instanceof _prosemirrorModel.MarkType && prev && prev.type instanceof _prosemirrorModel.MarkType && Array.isArray(prev.content) && (0, _validator.isSameMark)(prev, markOrNode)) {
       prev.content = mergeMarks(prev.content.concat(markOrNode.content));
     } else {
       acc.push(markOrNode);
@@ -152,7 +156,7 @@ var ReactSerializer = /*#__PURE__*/function () {
 
       var _mark$attrs = mark.attrs,
           key = _mark$attrs.key,
-          otherAttrs = (0, _objectWithoutProperties2.default)(_mark$attrs, ["key"]);
+          otherAttrs = (0, _objectWithoutProperties2.default)(_mark$attrs, _excluded);
       var extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
       }; // currently the only mark which has custom props is the code mark
@@ -200,6 +204,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
   }
 
@@ -388,7 +393,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var stickyHeaders = !(0, _rendererNode.insideBreakoutLayout)(path) ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
-        columnWidths: (0, _editorCommon.calcTableColumnWidths)(node),
+        columnWidths: (0, _utils.calcTableColumnWidths)(node),
         tableNode: node,
         stickyHeaders: stickyHeaders
       });
@@ -564,6 +569,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         nodeType: node.type.name,
         marks: node.marks,
+        smartLinks: this.smartLinks,
         dataAttributes: {
           // We need to account for depth (path.length gives up depth) here
           // but depth doesnt increment the pos, only accounted for.
@@ -626,7 +632,7 @@ var ReactSerializer = /*#__PURE__*/function () {
 
 
       var nodeContent = node.content.toJSON().reduce(function (acc, node) {
-        return acc.concat((0, _utils.getText)(node) || '');
+        return acc.concat((0, _utils2.getText)(node) || '');
       }, '').trim().replace(/\s/g, '-');
 
       if (!nodeContent) {
@@ -670,7 +676,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         return [];
       }
 
-      return (0, _editorCommon.getMarksByOrder)(node.marks);
+      return (0, _validator.getMarksByOrder)(node.marks);
     }
   }, {
     key: "buildMarkStructure",

package/dist/cjs/react/marks/annotation.js

@@ -17,9 +17,9 @@ var _adfSchema = require("@atlaskit/adf-schema");
 
 var _annotations = require("../../ui/annotations");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var isAnnotationMark = function isAnnotationMark(mark) {
   return mark && mark.type && mark.type.name === 'annotation';

package/dist/cjs/react/marks/breakout.js

@@ -14,7 +14,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -25,12 +27,12 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 exports.Wrapper = Wrapper;
 
 function Breakout(props) {
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref) {
+  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
     return /*#__PURE__*/_react.default.createElement(Wrapper, {
       "data-mode": props.mode,
       style: {
-        width: (0, _editorCommon.calcBreakoutWidth)(props.mode, width)
+        width: (0, _utils.calcBreakoutWidth)(props.mode, width)
       },
       className: "fabric-editor-breakout-mark fabric-editor-block-mark"
     }, props.children);

package/dist/cjs/react/marks/textColor.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +11,21 @@ exports.default = TextColor;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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); }
+
+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; }
 
 function TextColor(props) {
+  var style = (0, _react.useMemo)(function () {
+    return (0, _defineProperty2.default)({}, '--custom-text-color', props.color);
+  }, [props.color]);
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, props.dataAttributes, {
-    style: {
-      color: props.color
-    }
+    "data-text-custom-color": props.color,
+    className: "fabric-text-color-mark",
+    style: style
   }), props.children);
 }

package/dist/cjs/react/nodes/blockCard.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _smartCard = require("@atlaskit/smart-card");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _utils = require("../../utils");
 
@@ -49,7 +49,7 @@ function BlockCard(props) {
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
   }, /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
-    unsupportedComponent: _editorCommon.UnsupportedBlock
+    unsupportedComponent: _ui.UnsupportedBlock
   }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
     appearance: "block",
     showActions: rendererAppearance !== 'mobile',

package/dist/cjs/react/nodes/caption.js

@@ -9,12 +9,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var RenderCaption = function RenderCaption(_ref) {
   var children = _ref.children,
       dataAttributes = _ref.dataAttributes;
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.Caption, {
+  return /*#__PURE__*/_react.default.createElement(_ui.Caption, {
     hasContent: true,
     dataAttributes: dataAttributes
   }, children);

package/dist/cjs/react/nodes/copy-text-provider.js

@@ -114,7 +114,8 @@ exports.CopyTextConsumer = Consumer;
 
 var CopyArea = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+    ,
     style: {
       position: 'absolute',
       left: '-9999px',

package/dist/cjs/react/nodes/date.js

@@ -21,7 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -50,14 +52,14 @@ var Date = /*#__PURE__*/function (_PureComponent) {
           timestamp = _this$props.timestamp,
           parentIsIncompleteTask = _this$props.parentIsIncompleteTask,
           intl = _this$props.intl;
-      var className = !!parentIsIncompleteTask && (0, _editorCommon.isPastDate)(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
+      var className = !!parentIsIncompleteTask && (0, _utils.isPastDate)(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: _editorCommon.DateSharedCssClassName.DATE_WRAPPER
+        className: _styles.DateSharedCssClassName.DATE_WRAPPER
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: className,
         "data-node-type": "date",
         "data-timestamp": timestamp
-      }, parentIsIncompleteTask ? (0, _editorCommon.timestampToTaskContext)(timestamp, intl) : (0, _editorCommon.timestampToString)(timestamp, intl)));
+      }, parentIsIncompleteTask ? (0, _utils.timestampToTaskContext)(timestamp, intl) : (0, _utils.timestampToString)(timestamp, intl)));
     }
   }]);
   return Date;

package/dist/cjs/react/nodes/embedCard.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _smartCard = require("@atlaskit/smart-card");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -42,7 +42,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EmbedCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
 
 EmbedCardWrapper.displayName = 'EmbedCardWrapper';
-var ExtendedEmbedCard = (0, _styledComponents.default)(_editorCommon.MediaSingle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
+var ExtendedEmbedCard = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var layout = _ref.layout;
   return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
 });
@@ -126,7 +126,7 @@ function EmbedCard(props) {
     setAspectRatio(resolvedAspectRatio);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref3) {
+  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
     var containerWidth = _ref3.width,
         breakpoint = _ref3.breakpoint;
     var nonFullWidthSize = containerWidth;
@@ -136,7 +136,7 @@ function EmbedCard(props) {
       var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
 
       if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = (0, _editorCommon.mapBreakpointToLayoutMaxWidth)(breakpoint);
+        nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
       } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
         nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
       } else {
@@ -146,7 +146,7 @@ function EmbedCard(props) {
 
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
     return /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
-      unsupportedComponent: _editorCommon.UnsupportedBlock
+      unsupportedComponent: _ui.UnsupportedBlock
     }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight

package/dist/cjs/react/nodes/emoji.js

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _emoji = require("@atlaskit/editor-common/emoji");
 
 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); }
 
@@ -50,7 +50,7 @@ var EmojiItem = /*#__PURE__*/function (_PureComponent) {
           shortName = _this$props.shortName,
           text = _this$props.text,
           fitToHeight = _this$props.fitToHeight;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Emoji, {
+      return /*#__PURE__*/_react.default.createElement(_emoji.Emoji, {
         allowTextFallback: true,
         id: id,
         shortName: shortName,