@atlaskit/renderer 93.0.4 → 95.0.1

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -23,6 +23,8 @@ var _react = require("@emotion/react");
 
 var _react2 = require("react");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -30,7 +32,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      rgba(255, 255, 255, 0),\n      ", "\n    );\n  }\n"])), maxHeight, top, backgroundColor);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, (0, _tokens.token)('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)'), backgroundColor);
 };
 
 var FadeOut = function FadeOut(props) {
@@ -53,7 +55,8 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
   function TruncatedWrapper(props) {
     (0, _classCallCheck2.default)(this, TruncatedWrapper);
     return _super.call(this, props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   (0, _createClass2.default)(TruncatedWrapper, [{
     key: "render",
@@ -64,7 +67,7 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$fadeHeigh = _this$props.fadeHeight,
           fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
           _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? 'white' : _this$props$backgroun,
+          backgroundColor = _this$props$backgroun === void 0 ? (0, _tokens.token)('elevation.surface', 'white') : _this$props$backgroun,
           children = _this$props.children;
       return (0, _react.jsx)(FadeOut, {
         height: height,

package/dist/cjs/ui/SortingIcon.js

@@ -23,15 +23,19 @@ var _messages = require("../messages");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
 var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
 exports.TableSortIconDataUrl = TableSortIconDataUrl;
 var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-var StatusClassNames;
+var StatusClassNames; // TODO: get design to check border
+
 exports.StatusClassNames = StatusClassNames;
 
 (function (StatusClassNames) {
@@ -41,7 +45,7 @@ exports.StatusClassNames = StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
 
-var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30), StatusClassNames.SORTING_NOT_ALLOWED);
 var tableSortingIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
 
 var getClassName = function getClassName(status) {

package/dist/cjs/ui/annotations/draft/component.js

@@ -36,7 +36,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 markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
 };
 
 var AnnotationDraft = function AnnotationDraft(_ref) {

package/dist/cjs/ui/annotations/element/mark.js

@@ -36,7 +36,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
     theme: props
   }).blur, (0, _styles.AnnotationSharedCSSByState)({
     theme: props

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "93.0.4",
+	"version": "95.0.1",
 	"sideEffects": false
 }

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

@@ -3,17 +3,22 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { B400, B300 } from '@atlaskit/theme/colors';
+import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
+import { token } from '@atlaskit/tokens';
 const anchorStyles = css`
-  color: ${B400};
+  color: ${token('color.link', B400)};
 
   &:hover {
-    color: ${B300};
+    color: ${token('color.link', B300)};
     text-decoration: underline;
   }
+
+  &:active {
+    color: ${token('color.link.pressed', B500)};
+  }
 `;
 export default function Link(props) {
   const {

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

@@ -10,6 +10,9 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const codeBlockStyle = props => css`
     tab-size: 4;
     [data-ds--code--code-block] {
@@ -26,6 +29,8 @@ const codeBlockStyle = props => css`
       background-position: 100% 0, 100% 0, 0 0;
     }
   `;
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   const {

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

@@ -8,6 +8,7 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { CopyTextConsumer } from './copy-text-provider';
 import { codeBlockCopyButtonMessages } from '../../messages';
+import { token } from '@atlaskit/tokens';
 const copyButtonWrapperStyles = css`
   display: flex;
   position: sticky;
@@ -25,19 +26,19 @@ const copyButtonWrapperStyles = css`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid #fff;
+    border: 2px solid ${token('color.border.inverse', '#fff')};
     border-radius: 4px;
-    background-color: ${N20};
-    color: rgb(66, 82, 110);
+    background-color: ${token('color.background.neutral.subtle', N20)};
+    color: ${token('color.icon', 'rgb(66, 82, 110)')};
   }
 
   button:hover {
-    background-color: ${N30};
+    background-color: ${token('color.background.neutral.hovered', N30)};
   }
 
   button.clicked {
-    background-color: ${N700};
-    color: #fff !important;
+    background-color: ${token('color.background.neutral.bold.pressed', N700)};
+    color: ${token('color.icon.inverse', '#fff')} !important;
   }
 `;
 

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

@@ -9,6 +9,7 @@ import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
+import { token } from '@atlaskit/tokens';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -25,7 +26,7 @@ const copyAnchorButtonStyles = css`
   outline: none;
   background-color: transparent;
   border: none;
-  color: ${N500};
+  color: ${token('color.icon', N500)};
   cursor: pointer;
   right: 0;
 `;
@@ -82,7 +83,7 @@ class HeadingAnchor extends React.PureComponent {
       }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
         size: this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: this.state.isClicked ? B400 : N200
+        primaryColor: this.state.isClicked ? token('color.icon.selected', B400) : token('color.icon.subtle', N200)
       }));
     });
   }

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

@@ -1,35 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import * as colors from '@atlaskit/theme/colors';
+import * as colors from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
 const {
   N40A
 } = colors;
+import { token } from '@atlaskit/tokens';
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
-const fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-const getModeSpecificStyles = mode => {
-  if (mode === 'none') {
-    return css`
-      display: none;
-    `;
-  } else {
-    return css`
-      position: ${fixedTableDivModeToPosition[mode]};
-    `;
-  }
-};
+const modeSpecficStyles = {
+  none: css`
+    display: none;
+  `,
+  stick: css`
+    position: fixed;
+  `,
+  'pin-bottom': css`
+    position: absolute;
+  `
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 const fixedTableDivStaticStyles = (top, width) => css`
-  top: ${top}px;
+  ${typeof top === 'number' && `top: ${top}px;`}
   width: ${width}px;
   z-index: ${akEditorStickyHeaderZIndex};
   &
@@ -41,9 +40,10 @@ const fixedTableDivStaticStyles = (top, width) => css`
     margin-bottom: 0;
   }
 
-  border-top: ${tableStickyPadding}px solid white;
-  background: white;
-  box-shadow: 0 6px 4px -4px ${N40A};
+  border-top: ${tableStickyPadding}px solid
+    ${token('elevation.surface', 'white')};
+  background: ${token('elevation.surface.overlay', 'white')};
+  box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
 
   div[data-expanded='false'] & {
     display: none;
@@ -64,10 +64,14 @@ export const FixedTableDiv = props => {
     wrapperWidth,
     mode
   } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return jsx("div", {
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  const attrs = {
+    mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 export const StickyTable = ({
   top,

package/dist/es2019/render-document.js

@@ -1,3 +1,4 @@
+import memoizeOne from 'memoize-one';
 import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
@@ -18,6 +19,116 @@ const withStopwatch = cb => {
   };
 };
 
+const _validation = (doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent) => {
+  let 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
+    const {
+      transformedAdf,
+      isTransformed
+    } = transformMediaLinkMarks(doc);
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    result = validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
+  } else {
+    result = 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;
+};
+
+const memoValidation = memoizeOne(_validation, (newArgs, lastArgs) => {
+  const [newDoc, newSchema, newADFStage, newUseSpecValidator] = newArgs;
+  const [oldDoc, oldSchema, oldADFStage, oldUseSpecValidator] = lastArgs; // we're ignoring changes to dispatchAnalyticsEvent in this check
+
+  const result = areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator;
+  return result;
+});
+
+const 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);
+};
+
+const _serializeFragment = (serializer, doc) => {
+  return serializer.serializeFragment(doc.content);
+};
+
+const memoSerializeFragment = memoizeOne(_serializeFragment, (newArgs, lastArgs) => {
+  const [newSerializer, newDoc] = newArgs;
+  const [oldSerializer, oldDoc] = lastArgs;
+  return newSerializer === oldSerializer && areDocsEqual(newDoc, oldDoc);
+});
+
+const _createNodeAndCheck = (schema, doc, dispatchAnalyticsEvent) => {
+  const pmNode = schema.nodeFromJSON(doc);
+
+  try {
+    pmNode.check();
+  } catch (err) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: PLATFORM.WEB,
+          error: err === null || err === void 0 ? void 0 : err.toString()
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+  }
+
+  return pmNode;
+};
+
+const memoCreateNodeAndCheck = memoizeOne(_createNodeAndCheck, (newArgs, lastArgs) => {
+  // ignore dispatchAnalyticsEvent
+  const [newSchema, newDoc] = newArgs;
+  const [oldSchema, oldDoc] = lastArgs;
+  return newSchema === oldSchema && areDocsEqual(newDoc, oldDoc);
+});
 export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage = 'final', useSpecBasedValidator = false, rendererId = 'noid', dispatchAnalyticsEvent, unsupportedContentLevelsTracking, appearance) => {
   const stat = {
     sanitizeTime: 0
@@ -26,26 +137,7 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
     output: validDoc,
     time: sanitizeTime
   } = withStopwatch(() => {
-    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
-      const {
-        transformedAdf,
-        isTransformed
-      } = transformMediaLinkMarks(doc);
-
-      if (isTransformed && dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: ACTION.MEDIA_LINK_TRANSFORMED,
-          actionSubject: ACTION_SUBJECT.RENDERER,
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
-      }
-
-      return validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
-    }
-
-    return getValidDocument(doc, schema, adfStage);
+    return memoValidation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent);
   }); // save sanitize time to stats
 
   stat.sanitizeTime = sanitizeTime;
@@ -55,53 +147,22 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
       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;
-    }
   }
 
   const {
     output: node,
     time: buildTreeTime
   } = withStopwatch(() => {
-    const pmNode = schema.nodeFromJSON(validDoc);
-
-    try {
-      pmNode.check();
-    } catch (err) {
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
-          actionSubject: ACTION_SUBJECT.RENDERER,
-          attributes: {
-            platform: PLATFORM.WEB,
-            error: err === null || err === void 0 ? void 0 : err.toString()
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
-      }
-    }
-
-    return pmNode;
+    return memoCreateNodeAndCheck(schema, validDoc, dispatchAnalyticsEvent);
   }); // save build tree time to stats
 
   stat.buildTreeTime = buildTreeTime;
   const {
     output: result,
     time: serializeTime
-  } = withStopwatch(() => serializer.serializeFragment(node.content)); // save serialize tree time to stats
+  } = withStopwatch(() => {
+    return memoSerializeFragment(serializer, node);
+  }); // save serialize tree time to stats
 
   stat.serializeTime = serializeTime;
 

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

@@ -61,18 +61,13 @@ export class Renderer extends PureComponent {
       }
     });
 
-    _defineProperty(this, "getSchema", () => {
-      const {
-        schema,
-        adfStage
-      } = this.props;
-
+    _defineProperty(this, "getSchema", memoizeOne((schema, adfStage) => {
       if (schema) {
         return schema;
       }
 
       return getSchemaBasedOnStage(adfStage);
-    });
+    }));
 
     _defineProperty(this, "onMouseDownEditView", () => {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
@@ -283,7 +278,7 @@ export class Renderer extends PureComponent {
     try {
       var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-      const schema = this.getSchema();
+      const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
         stat,