@atlaskit/renderer 93.0.3 → 95.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/renderer
 
+## 95.0.0
+
+### Minor Changes
+
+- [`bd24b9d71d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd24b9d71d2) - [ux] Instrumented `@atlaskit/renderer` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`ccde3d9eb43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ccde3d9eb43) - [ux] ED-10335: memoize schema, validation and serialization for Renderer
+- [`59e17ae76c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e17ae76c1) - [ux] ED-14961-table-sticky-header-overlap-popup
+- [`47a59c220af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47a59c220af) - [ux] ED-10334: memoised schema.nodeFromJSON() and node.check() in Renderer.renderDocument()
+- [`08edcd36c6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08edcd36c6f) - [ux] Convert RGB color usage to Design Tokens. This change is backwards compatible with existing theming
+- Updated dependencies
+
+## 94.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 93.0.4
+
+### Patch Changes
+
+- [`42d1107698a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/42d1107698a) - [ux] ED-14913 Fix expand text in renderer dark mode
+
 ## 93.0.3
 
 ### Patch Changes

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

@@ -25,13 +25,15 @@ var _events = require("../../analytics/events");
 
 var _enums = require("../../analytics/enums");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 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; }
 
-var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
+var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), (0, _tokens.token)('color.link', _colors.B400), (0, _tokens.token)('color.link', _colors.B300), (0, _tokens.token)('color.link.pressed', _colors.B500));
 
 function Link(props) {
   var href = props.href,

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

@@ -31,6 +31,9 @@ var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton
 
 var _templateObject;
 
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyle = function codeBlockStyle(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    [data-ds--code--code-block] {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
@@ -40,6 +43,8 @@ var codeBlockStyle = function codeBlockStyle(props) {
     width: "".concat((0, _constants.gridSize)(), "px")
   }));
 };
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   var text = props.text,

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

@@ -31,13 +31,15 @@ var _copyTextProvider = require("./copy-text-provider");
 
 var _messages = require("../../messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 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; }
 
-var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #fff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #fff !important;\n  }\n"])), _colors.N20, _colors.N30, _colors.N700);
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.icon', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.background.neutral.hovered', _colors.N30), (0, _tokens.token)('color.background.neutral.bold.pressed', _colors.N700), (0, _tokens.token)('color.icon.inverse', '#fff'));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

package/dist/cjs/react/nodes/heading-anchor.js

@@ -45,6 +45,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var _excluded = ["children"];
@@ -65,7 +67,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (
   }), children);
 });
 
-var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
+var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), (0, _tokens.token)('color.icon', _colors.N500));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
@@ -148,7 +150,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? _colors.B400 : _colors.N200
+        primaryColor: _this.state.isClicked ? (0, _tokens.token)('color.icon.selected', _colors.B400) : (0, _tokens.token)('color.icon.subtle', _colors.N200)
       }));
     });
     return _this;

package/dist/cjs/react/nodes/table/sticky.js

@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,46 +27,46 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("../../../utils");
 
 var _table = require("./table");
 
 var _injectProps = require("../../utils/inject-props");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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; }
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var N40A = colors.N40A;
 var tableStickyPadding = 8;
 exports.tableStickyPadding = tableStickyPadding;
-var fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-var getModeSpecificStyles = function getModeSpecificStyles(mode) {
-  if (mode === 'none') {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
-  } else {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
-  }
-};
+var modeSpecficStyles = {
+  none: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: none;\n  "]))),
+  stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
+  'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), top, width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
       wrapperWidth = props.wrapperWidth,
       mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return (0, _react2.jsx)("div", {
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  var attrs = {
+    mode: mode
+  };
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 
 exports.FixedTableDiv = FixedTableDiv;

package/dist/cjs/render-document.js

@@ -1,10 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDocument = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
 var _validator = require("@atlaskit/editor-common/validator");
@@ -32,6 +38,138 @@ var withStopwatch = function withStopwatch(cb) {
   };
 };
 
+var _validation = function _validation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent) {
+  var result;
+
+  if (useSpecBasedValidator) {
+    // link mark on mediaSingle is deprecated, need to move link mark to child media node
+    // https://product-fabric.atlassian.net/browse/ED-14043
+    var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
+        transformedAdf = _transformMediaLinkMa.transformedAdf,
+        isTransformed = _transformMediaLinkMa.isTransformed;
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+        eventType: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    result = (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
+  } else {
+    result = (0, _validator.getValidDocument)(doc, schema, adfStage);
+  }
+
+  if (!result) {
+    return result;
+  } // ProseMirror always require a child under doc
+
+
+  if (result.type === 'doc' && useSpecBasedValidator) {
+    if (Array.isArray(result.content) && result.content.length === 0) {
+      result.content.push({
+        type: 'paragraph',
+        content: []
+      });
+    } // Just making sure doc is always valid
+
+
+    if (!result.version) {
+      result.version = 1;
+    }
+  }
+
+  return result;
+};
+
+var memoValidation = (0, _memoizeOne.default)(_validation, function (newArgs, lastArgs) {
+  var _newArgs = (0, _slicedToArray2.default)(newArgs, 4),
+      newDoc = _newArgs[0],
+      newSchema = _newArgs[1],
+      newADFStage = _newArgs[2],
+      newUseSpecValidator = _newArgs[3];
+
+  var _lastArgs = (0, _slicedToArray2.default)(lastArgs, 4),
+      oldDoc = _lastArgs[0],
+      oldSchema = _lastArgs[1],
+      oldADFStage = _lastArgs[2],
+      oldUseSpecValidator = _lastArgs[3]; // we're ignoring changes to dispatchAnalyticsEvent in this check
+
+
+  var result = areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator;
+  return result;
+});
+
+var areDocsEqual = function areDocsEqual(docA, docB) {
+  if (docA === docB) {
+    return true;
+  }
+
+  if (typeof docA === 'string' && typeof docB === 'string') {
+    return docA === docB;
+  } // PMNode
+
+
+  if (docA.type && docA.toJSON && docB.type && docB.toJSON) {
+    return JSON.stringify(docA.toJSON()) === JSON.stringify(docB.toJSON());
+  } // Object
+
+
+  return JSON.stringify(docA) === JSON.stringify(docB);
+};
+
+var _serializeFragment = function _serializeFragment(serializer, doc) {
+  return serializer.serializeFragment(doc.content);
+};
+
+var memoSerializeFragment = (0, _memoizeOne.default)(_serializeFragment, function (newArgs, lastArgs) {
+  var _newArgs2 = (0, _slicedToArray2.default)(newArgs, 2),
+      newSerializer = _newArgs2[0],
+      newDoc = _newArgs2[1];
+
+  var _lastArgs2 = (0, _slicedToArray2.default)(lastArgs, 2),
+      oldSerializer = _lastArgs2[0],
+      oldDoc = _lastArgs2[1];
+
+  return newSerializer === oldSerializer && areDocsEqual(newDoc, oldDoc);
+});
+
+var _createNodeAndCheck = function _createNodeAndCheck(schema, doc, dispatchAnalyticsEvent) {
+  var pmNode = schema.nodeFromJSON(doc);
+
+  try {
+    pmNode.check();
+  } catch (err) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _enums.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+        actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: _events.PLATFORM.WEB,
+          error: err === null || err === void 0 ? void 0 : err.toString()
+        },
+        eventType: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    }
+  }
+
+  return pmNode;
+};
+
+var memoCreateNodeAndCheck = (0, _memoizeOne.default)(_createNodeAndCheck, function (newArgs, lastArgs) {
+  // ignore dispatchAnalyticsEvent
+  var _newArgs3 = (0, _slicedToArray2.default)(newArgs, 2),
+      newSchema = _newArgs3[0],
+      newDoc = _newArgs3[1];
+
+  var _lastArgs3 = (0, _slicedToArray2.default)(lastArgs, 2),
+      oldSchema = _lastArgs3[0],
+      oldDoc = _lastArgs3[1];
+
+  return newSchema === oldSchema && areDocsEqual(newDoc, oldDoc);
+});
+
 var renderDocument = function renderDocument(doc, serializer) {
   var schema = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'final';
@@ -45,25 +183,7 @@ var renderDocument = function renderDocument(doc, serializer) {
   };
 
   var _withStopwatch = withStopwatch(function () {
-    if (useSpecBasedValidator) {
-      // link mark on mediaSingle is deprecated, need to move link mark to child media node
-      // https://product-fabric.atlassian.net/browse/ED-14043
-      var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
-          transformedAdf = _transformMediaLinkMa.transformedAdf,
-          isTransformed = _transformMediaLinkMa.isTransformed;
-
-      if (isTransformed && dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
-          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
-          eventType: _enums.EVENT_TYPE.OPERATIONAL
-        });
-      }
-
-      return (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
-    }
-
-    return (0, _validator.getValidDocument)(doc, schema, adfStage);
+    return memoValidation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent);
   }),
       validDoc = _withStopwatch.output,
       sanitizeTime = _withStopwatch.time; // save sanitize time to stats
@@ -76,43 +196,10 @@ var renderDocument = function renderDocument(doc, serializer) {
       stat: stat,
       result: null
     };
-  } // ProseMirror always require a child under doc
-
-
-  if (validDoc.type === 'doc' && useSpecBasedValidator) {
-    if (Array.isArray(validDoc.content) && validDoc.content.length === 0) {
-      validDoc.content.push({
-        type: 'paragraph',
-        content: []
-      });
-    } // Just making sure doc is always valid
-
-
-    if (!validDoc.version) {
-      validDoc.version = 1;
-    }
   }
 
   var _withStopwatch2 = withStopwatch(function () {
-    var pmNode = schema.nodeFromJSON(validDoc);
-
-    try {
-      pmNode.check();
-    } catch (err) {
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: _enums.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
-          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
-          attributes: {
-            platform: _events.PLATFORM.WEB,
-            error: err === null || err === void 0 ? void 0 : err.toString()
-          },
-          eventType: _enums.EVENT_TYPE.OPERATIONAL
-        });
-      }
-    }
-
-    return pmNode;
+    return memoCreateNodeAndCheck(schema, validDoc, dispatchAnalyticsEvent);
   }),
       node = _withStopwatch2.output,
       buildTreeTime = _withStopwatch2.time; // save build tree time to stats
@@ -121,7 +208,7 @@ var renderDocument = function renderDocument(doc, serializer) {
   stat.buildTreeTime = buildTreeTime;
 
   var _withStopwatch3 = withStopwatch(function () {
-    return serializer.serializeFragment(node.content);
+    return memoSerializeFragment(serializer, node);
   }),
       result = _withStopwatch3.output,
       serializeTime = _withStopwatch3.time; // save serialize tree time to stats

package/dist/cjs/ui/Expand.js

@@ -53,7 +53,9 @@ var Container = function Container(props) {
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
 
   var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(themeProps), paddingBottom);
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
+      theme: themeProps
+    }), paddingBottom);
   };
 
   return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -65,7 +67,9 @@ var TitleContainer = function TitleContainer(props) {
   var paddingBottom = "".concat(!props.expanded ? (0, _constants.gridSize)() : 0, "px");
 
   var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(themeProps), (0, _constants.gridSize)(), paddingBottom);
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles({
+      theme: themeProps
+    }), (0, _constants.gridSize)(), paddingBottom);
   };
 
   return (0, _react2.jsx)("button", (0, _extends2.default)({
@@ -81,7 +85,9 @@ var ContentContainer = function ContentContainer(props) {
   var visibility = props.expanded ? 'visible' : 'hidden';
 
   var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(themeProps), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
+      theme: themeProps
+    }), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
   };
 
   return (0, _react2.jsx)("div", (0, _extends2.default)({

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

@@ -132,17 +132,13 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         createAnalyticsEvent(event).fire(channel);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSchema", function () {
-      var _this$props = _this.props,
-          schema = _this$props.schema,
-          adfStage = _this$props.adfStage;
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSchema", (0, _memoizeOne.default)(function (schema, adfStage) {
       if (schema) {
         return schema;
       }
 
       return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
-    });
+    }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDownEditView", function () {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
       // the current selection, by the time the onclick handler is called the window.getSelection()
@@ -293,22 +289,22 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this3 = this;
 
-      var _this$props2 = this.props,
-          document = _this$props2.document,
-          onComplete = _this$props2.onComplete,
-          onError = _this$props2.onError,
-          appearance = _this$props2.appearance,
-          adfStage = _this$props2.adfStage,
-          allowDynamicTextSizing = _this$props2.allowDynamicTextSizing,
-          truncated = _this$props2.truncated,
-          maxHeight = _this$props2.maxHeight,
-          fadeOutHeight = _this$props2.fadeOutHeight,
-          enableSsrInlineScripts = _this$props2.enableSsrInlineScripts,
-          allowHeadingAnchorLinks = _this$props2.allowHeadingAnchorLinks,
-          allowPlaceholderText = _this$props2.allowPlaceholderText,
-          allowColumnSorting = _this$props2.allowColumnSorting,
-          allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          allowCustomPanels = _this$props2.allowCustomPanels;
+      var _this$props = this.props,
+          document = _this$props.document,
+          onComplete = _this$props.onComplete,
+          onError = _this$props.onError,
+          appearance = _this$props.appearance,
+          adfStage = _this$props.adfStage,
+          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
+          truncated = _this$props.truncated,
+          maxHeight = _this$props.maxHeight,
+          fadeOutHeight = _this$props.fadeOutHeight,
+          enableSsrInlineScripts = _this$props.enableSsrInlineScripts,
+          allowHeadingAnchorLinks = _this$props.allowHeadingAnchorLinks,
+          allowPlaceholderText = _this$props.allowPlaceholderText,
+          allowColumnSorting = _this$props.allowColumnSorting,
+          allowCopyToClipboard = _this$props.allowCopyToClipboard,
+          allowCustomPanels = _this$props.allowCustomPanels;
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -358,7 +354,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       try {
         var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-        var schema = this.getSchema();
+        var schema = this.getSchema(this.props.schema, this.props.adfStage);
 
         var _renderDocument = (0, _.renderDocument)(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
             result = _renderDocument.result,