@atlaskit/renderer 93.0.4 → 95.0.1

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

@@ -3,6 +3,7 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -213,7 +214,7 @@ const tableSortableColumnStyle = ({
             outline: unset;
           }
           &:focus-visible {
-            border-color: ${colors.B300};
+            border-color: ${token('color.border.focused', colors.B300)};
           }
         }
 
@@ -288,8 +289,8 @@ export const rendererStyles = wrapperProps => theme => {
     font-size: ${editorFontSize(themeProps)}px;
     line-height: 1.5rem;
     color: ${themed({
-    light: colors.N800,
-    dark: '#B8C7E0'
+    light: token('color.text', colors.N800),
+    dark: token('color.text', '#B8C7E0')
   })(themeProps)};
 
     .${RendererCssClassName.DOCUMENT}::after {
@@ -331,13 +332,17 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.akActionMark {
-      color: ${colors.B400};
+      color: ${token('color.link', colors.B400)};
       text-decoration: none;
 
       &:hover {
-        color: ${colors.B300};
+        color: ${token('color.link', colors.B300)};
         text-decoration: underline;
       }
+
+      &:active {
+        color: ${token('color.link.pressed', colors.B500)};
+      }
     }
 
     & span.akActionMark {
@@ -373,13 +378,13 @@ export const rendererStyles = wrapperProps => theme => {
 
     & span.date-node {
       background: ${themed({
-    light: colors.N30A,
-    dark: colors.DN70
+    light: token('color.background.neutral', colors.N30A),
+    dark: token('color.background.neutral', colors.DN70)
   })(themeProps)};
       border-radius: ${borderRadius()}px;
       color: ${themed({
-    light: colors.N800,
-    dark: colors.DN600
+    light: token('color.text', colors.N800),
+    dark: token('color.text', colors.DN600)
   })(themeProps)};
       padding: 2px 4px;
       margin: 0 1px;
@@ -387,8 +392,8 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.date-node-highlighted {
-      background: ${colors.R50};
-      color: ${colors.R500};
+      background: ${token('color.background.danger', colors.R50)};
+      color: ${token('color.text.danger', colors.R500)};
     }
 
     & .renderer-image {
@@ -506,19 +511,19 @@ export const rendererStyles = wrapperProps => theme => {
       table[data-number-column='true'] {
         .${RendererCssClassName.NUMBER_COLUMN} {
           background-color: ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.background.neutral', akEditorTableToolbar),
+    dark: token('color.background.neutral', akEditorTableToolbarDark)
   })(themeProps)};
           border-right: 1px solid
             ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
           width: ${akEditorTableNumberColumnWidth}px;
           text-align: center;
           color: ${themed({
-    light: colors.N200,
-    dark: colors.DN400
+    light: token('color.text.subtlest', colors.N200),
+    dark: token('color.text.subtlest', colors.DN400)
   })(themeProps)};
           font-size: ${relativeFontSizeToBase16(fontSize())};
         }
@@ -537,13 +542,13 @@ export const rendererStyles = wrapperProps => theme => {
 
       border-right: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
       border-bottom: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
 
       /* this is to compensate for the table border */
@@ -569,20 +574,20 @@ export const rendererStyles = wrapperProps => theme => {
     .sticky td {
       box-shadow: 0px 1px
           ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         0px -0.5px ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         inset -1px 0px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)},
         0px -1px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)};
     }
 

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { token } from '@atlaskit/tokens';
 
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
@@ -14,7 +15,7 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
     left: 0;
     right: 0;
     background-image: linear-gradient(
-      rgba(255, 255, 255, 0),
+      ${token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)')},
       ${backgroundColor}
     );
   }
@@ -37,13 +38,14 @@ const FadeOut = props => {
 export class TruncatedWrapper extends Component {
   constructor(props) {
     super(props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   render() {
     const {
       height = 95,
       fadeHeight = 24,
-      backgroundColor = 'white',
+      backgroundColor = token('elevation.surface', 'white'),
       children
     } = this.props;
     return jsx(FadeOut, {

package/dist/es2019/ui/SortingIcon.js

@@ -5,13 +5,15 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
-import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
+import { injectIntl } from 'react-intl-next';
+import { token } from '@atlaskit/tokens'; // 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
 
 export const TableSortIconDataUrl = `data:image/svg+xml;utf8,${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>`)}`;
 const TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export let StatusClassNames;
+export let StatusClassNames; // TODO: get design to check border
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -28,14 +30,14 @@ const wrapperStyles = css`
   margin: 6px;
   right: 0;
   top: 0;
-  border: 2px solid #fff;
+  border: 2px solid ${token('color.border.inverse', '#fff')};
   border-radius: ${gridSize() / 2}px;
-  background-color: ${N20};
+  background-color: ${token('color.background.neutral.subtle', N20)};
   justify-content: center;
   align-items: center;
 
   &:hover {
-    background-color: ${N30};
+    background-color: ${token('color.background.neutral.subtle.hovered', N30)};
   }
 
   &.${StatusClassNames.SORTING_NOT_ALLOWED} {

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

@@ -13,7 +13,7 @@ import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   ${AnnotationSharedCSSByState(props).focus};
 `;

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

@@ -9,7 +9,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
     ${AnnotationSharedCSSByState({

package/dist/es2019/version.json

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

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

@@ -6,11 +6,12 @@ var _templateObject;
 /** @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';
-var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), B400, B300);
+import { token } from '@atlaskit/tokens';
+var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), token('color.link', B400), token('color.link', B300), token('color.link.pressed', B500));
 export default function Link(props) {
   var href = props.href,
       target = props.target,

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

@@ -14,6 +14,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 */
 var codeBlockStyle = function codeBlockStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  "])), relativeFontSizeToBase16(fontSize()), overflowShadow({
     background: themed({
@@ -23,6 +26,8 @@ var codeBlockStyle = function codeBlockStyle(props) {
     width: "".concat(gridSize(), "px")
   }));
 };
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   var text = props.text,

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

@@ -13,7 +13,8 @@ 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';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N20, N30, N700);
+import { token } from '@atlaskit/tokens';
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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

@@ -27,6 +27,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 var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -37,7 +38,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), N500);
+var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), token('color.icon', N500));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
@@ -126,7 +127,7 @@ var HeadingAnchor = /*#__PURE__*/function (_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/esm/react/nodes/table/sticky.js

@@ -1,45 +1,45 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @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
+
 var N40A = colors.N40A;
+import { token } from '@atlaskit/tokens';
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
-var fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-var getModeSpecificStyles = function getModeSpecificStyles(mode) {
-  if (mode === 'none') {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "])));
-  } else {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
-  }
-};
+var modeSpecficStyles = {
+  none: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))),
+  stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
+  'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, token('elevation.surface', 'white'), token('elevation.surface.overlay', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
       wrapperWidth = props.wrapperWidth,
       mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return jsx("div", {
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  var attrs = {
+    mode: mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 export var StickyTable = function StickyTable(_ref) {
   var top = _ref.top,

package/dist/esm/render-document.js

@@ -1,3 +1,5 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 +20,137 @@ 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 = transformMediaLinkMarks(doc),
+        transformedAdf = _transformMediaLinkMa.transformedAdf,
+        isTransformed = _transformMediaLinkMa.isTransformed;
+
+    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;
+};
+
+var memoValidation = memoizeOne(_validation, function (newArgs, lastArgs) {
+  var _newArgs = _slicedToArray(newArgs, 4),
+      newDoc = _newArgs[0],
+      newSchema = _newArgs[1],
+      newADFStage = _newArgs[2],
+      newUseSpecValidator = _newArgs[3];
+
+  var _lastArgs = _slicedToArray(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 = memoizeOne(_serializeFragment, function (newArgs, lastArgs) {
+  var _newArgs2 = _slicedToArray(newArgs, 2),
+      newSerializer = _newArgs2[0],
+      newDoc = _newArgs2[1];
+
+  var _lastArgs2 = _slicedToArray(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: 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;
+};
+
+var memoCreateNodeAndCheck = memoizeOne(_createNodeAndCheck, function (newArgs, lastArgs) {
+  // ignore dispatchAnalyticsEvent
+  var _newArgs3 = _slicedToArray(newArgs, 2),
+      newSchema = _newArgs3[0],
+      newDoc = _newArgs3[1];
+
+  var _lastArgs3 = _slicedToArray(lastArgs, 2),
+      oldSchema = _lastArgs3[0],
+      oldDoc = _lastArgs3[1];
+
+  return newSchema === oldSchema && areDocsEqual(newDoc, oldDoc);
+});
 export var renderDocument = function renderDocument(doc, serializer) {
   var schema = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultSchema;
   var adfStage = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'final';
@@ -31,25 +164,7 @@ export 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 = transformMediaLinkMarks(doc),
-          transformedAdf = _transformMediaLinkMa.transformedAdf,
-          isTransformed = _transformMediaLinkMa.isTransformed;
-
-      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);
   }),
       validDoc = _withStopwatch.output,
       sanitizeTime = _withStopwatch.time; // save sanitize time to stats
@@ -62,43 +177,10 @@ export 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: 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);
   }),
       node = _withStopwatch2.output,
       buildTreeTime = _withStopwatch2.time; // save build tree time to stats
@@ -107,7 +189,7 @@ export 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