@atlaskit/renderer 114.4.1 → 114.4.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 114.4.2
+
+### Patch Changes
+
+- [#130002](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130002)
+  [`e273880dffa90`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e273880dffa90) -
+  Clean up feature flag platform_editor_nested_table_in_nested_parent_fix
+- Updated dependencies
+
 ## 114.4.1
 
 ### Patch Changes

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

@@ -84,7 +84,7 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
   // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
   // if the table is rendered inside another node, is to check if the Renderer itself is nested.
-  var isRendererNested = isTopLevelRenderer === false && (0, _platformFeatureFlags.fg)('platform_editor_nested_table_in_nested_parent_fix');
+  var isRendererNested = isTopLevelRenderer === false;
 
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment

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

@@ -43,8 +43,6 @@ var LAYOUT_BREAKPOINT_RENDERER = 629;
 // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 var tableRowHeight = 44;
-var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
-  typography = _getGlobalTheme.typography;
 var isBackgroundClipBrowserFixNeeded = function isBackgroundClipBrowserFixNeeded() {
   return _browser.browser.isGecko || _browser.browser.isIE || _browser.browser.isMac && _browser.browser.isChrome;
 };
@@ -326,62 +324,70 @@ var headingsSharedStyles = (0, _react.css)({
     textTransform: 'none'
   }
 });
-
-// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
-// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-// TODO: emotion refactor - check if we need UGC token?
 var headingsSharedStylesWithEditorUGC = (0, _react.css)({
   '& h1': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h1', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h1)",
     marginBottom: 0,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     },
     '&::before': {}
   },
   '& h2': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h2', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h2)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.4em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h3': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h3', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h3)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.31249em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h4': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h4', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h4)",
     marginTop: "var(--ds-space-250, 1.25em)",
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h5': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h5', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h5)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h6': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.heading.h6', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h6)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.59091em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: (0, _ugcTokens.editorUGCToken)('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   }
 });
@@ -440,7 +446,8 @@ var ruleSharedStyles = (0, _react.css)({
 });
 var paragraphSharedStylesWithEditorUGC = (0, _react.css)({
   '& p': {
-    font: (0, _ugcTokens.editorUGCToken)('editor.font.body', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-normal-text)",
     marginTop: _editorSharedStyles.blockNodesVerticalMargin,
     marginBottom: 0
   }
@@ -1345,6 +1352,8 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
+  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
+    typography = _getGlobalTheme.typography;
   if ((0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1353,7 +1362,14 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         onClick: onClick,
         onMouseDown: onMouseDown,
         style: {
-          '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px")
+          '--ak-renderer-base-font-size': "".concat((0, _getBaseFontSize.getBaseFontSize)(appearance), "px"),
+          '--ak-renderer-editor-font-heading-h1': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h1', typography)),
+          '--ak-renderer-editor-font-heading-h2': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h2', typography)),
+          '--ak-renderer-editor-font-heading-h3': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h3', typography)),
+          '--ak-renderer-editor-font-heading-h4': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h4', typography)),
+          '--ak-renderer-editor-font-heading-h5': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h5', typography)),
+          '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6', typography)),
+          '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body', typography))
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.4.1";
+var packageVersion = "114.4.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -72,7 +72,7 @@ const renderScaleDownColgroup = props => {
   // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
   // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
   // if the table is rendered inside another node, is to check if the Renderer itself is nested.
-  const isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+  const isRendererNested = isTopLevelRenderer === false;
 
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment

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

@@ -34,9 +34,6 @@ const LAYOUT_BREAKPOINT_RENDERER = 629;
 // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 const tableRowHeight = 44;
-const {
-  typography
-} = getGlobalTheme();
 const isBackgroundClipBrowserFixNeeded = () => browser.isGecko || browser.isIE || browser.isMac && browser.isChrome;
 
 // styles are copied from ./style.tsx
@@ -388,62 +385,70 @@ const headingsSharedStyles = css({
     textTransform: 'none'
   }
 });
-
-// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
-// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-// TODO: emotion refactor - check if we need UGC token?
 const headingsSharedStylesWithEditorUGC = css({
   '& h1': {
-    font: editorUGCToken('editor.font.heading.h1', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h1)`,
     marginBottom: 0,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     },
     '&::before': {}
   },
   '& h2': {
-    font: editorUGCToken('editor.font.heading.h2', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h2)`,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.4em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h3': {
-    font: editorUGCToken('editor.font.heading.h3', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h3)`,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.31249em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h4': {
-    font: editorUGCToken('editor.font.heading.h4', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h4)`,
     marginTop: "var(--ds-space-250, 1.25em)",
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h5': {
-    font: editorUGCToken('editor.font.heading.h5', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h5)`,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h6': {
-    font: editorUGCToken('editor.font.heading.h6', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-heading-h6)`,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.59091em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   }
 });
@@ -502,7 +507,8 @@ const ruleSharedStyles = css({
 });
 const paragraphSharedStylesWithEditorUGC = css({
   '& p': {
-    font: editorUGCToken('editor.font.body', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: `var(--ak-renderer-editor-font-normal-text)`,
     marginTop: blockNodesVerticalMargin,
     marginBottom: 0
   }
@@ -1720,6 +1726,9 @@ export const RendererStyleContainer = props => {
     testId
   } = props;
   const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
+  const {
+    typography
+  } = getGlobalTheme();
   if (fg('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1728,7 +1737,14 @@ export const RendererStyleContainer = props => {
         onClick: onClick,
         onMouseDown: onMouseDown,
         style: {
-          '--ak-renderer-base-font-size': `${getBaseFontSize(appearance)}px`
+          '--ak-renderer-base-font-size': `${getBaseFontSize(appearance)}px`,
+          '--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1', typography)}`,
+          '--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2', typography)}`,
+          '--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3', typography)}`,
+          '--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4', typography)}`,
+          '--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5', typography)}`,
+          '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6', typography)}`,
+          '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body', typography)}`
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, fg('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.4.1";
+const packageVersion = "114.4.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/esm/react/nodes/table/colgroup.js

@@ -78,7 +78,7 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
   // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
   // if the table is rendered inside another node, is to check if the Renderer itself is nested.
-  var isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+  var isRendererNested = isTopLevelRenderer === false;
 
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -36,8 +36,6 @@ var LAYOUT_BREAKPOINT_RENDERER = 629;
 // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 var tableRowHeight = 44;
-var _getGlobalTheme = getGlobalTheme(),
-  typography = _getGlobalTheme.typography;
 var isBackgroundClipBrowserFixNeeded = function isBackgroundClipBrowserFixNeeded() {
   return browser.isGecko || browser.isIE || browser.isMac && browser.isChrome;
 };
@@ -319,62 +317,70 @@ var headingsSharedStyles = css({
     textTransform: 'none'
   }
 });
-
-// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
-// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-// TODO: emotion refactor - check if we need UGC token?
 var headingsSharedStylesWithEditorUGC = css({
   '& h1': {
-    font: editorUGCToken('editor.font.heading.h1', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h1)",
     marginBottom: 0,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     },
     '&::before': {}
   },
   '& h2': {
-    font: editorUGCToken('editor.font.heading.h2', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h2)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.4em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h3': {
-    font: editorUGCToken('editor.font.heading.h3', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h3)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.31249em',
     marginBottom: 0,
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h4': {
-    font: editorUGCToken('editor.font.heading.h4', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h4)",
     marginTop: "var(--ds-space-250, 1.25em)",
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h5': {
-    font: editorUGCToken('editor.font.heading.h5', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h5)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.45833em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   },
   '& h6': {
-    font: editorUGCToken('editor.font.heading.h6', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-heading-h6)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.59091em',
     textTransform: 'none',
     '& strong': {
-      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+      // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
+      fontWeight: "var(--ds-font-weight-bold, 700)"
     }
   }
 });
@@ -433,7 +439,8 @@ var ruleSharedStyles = css({
 });
 var paragraphSharedStylesWithEditorUGC = css({
   '& p': {
-    font: editorUGCToken('editor.font.body', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: "var(--ak-renderer-editor-font-normal-text)",
     marginTop: blockNodesVerticalMargin,
     marginBottom: 0
   }
@@ -1338,6 +1345,8 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     innerRef = props.innerRef,
     testId = props.testId;
   var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
+  var _getGlobalTheme = getGlobalTheme(),
+    typography = _getGlobalTheme.typography;
   if (fg('platform_editor_emotion_refactor_renderer')) {
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -1346,7 +1355,14 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         onClick: onClick,
         onMouseDown: onMouseDown,
         style: {
-          '--ak-renderer-base-font-size': "".concat(getBaseFontSize(appearance), "px")
+          '--ak-renderer-base-font-size': "".concat(getBaseFontSize(appearance), "px"),
+          '--ak-renderer-editor-font-heading-h1': "".concat(editorUGCToken('editor.font.heading.h1', typography)),
+          '--ak-renderer-editor-font-heading-h2': "".concat(editorUGCToken('editor.font.heading.h2', typography)),
+          '--ak-renderer-editor-font-heading-h3': "".concat(editorUGCToken('editor.font.heading.h3', typography)),
+          '--ak-renderer-editor-font-heading-h4': "".concat(editorUGCToken('editor.font.heading.h4', typography)),
+          '--ak-renderer-editor-font-heading-h5': "".concat(editorUGCToken('editor.font.heading.h5', typography)),
+          '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6', typography)),
+          '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body', typography))
         },
         css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, fg('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.4.1";
+var packageVersion = "114.4.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.4.1",
+	"version": "114.4.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/code": "^16.0.0",
-		"@atlaskit/editor-common": "^102.11.0",
+		"@atlaskit/editor-common": "^102.12.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -39,13 +39,13 @@
 		"@atlaskit/emoji": "^69.0.0",
 		"@atlaskit/feature-gate-js-client": "^4.26.0",
 		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/link-datasource": "^4.0.0",
+		"@atlaskit/link-datasource": "^4.1.0",
 		"@atlaskit/media-card": "^79.0.0",
 		"@atlaskit/media-client": "^32.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/media-common": "^12.0.0",
 		"@atlaskit/media-filmstrip": "^49.0.0",
-		"@atlaskit/media-ui": "^28.0.0",
+		"@atlaskit/media-ui": "^28.1.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
@@ -147,9 +147,6 @@
 		"platform_editor_allow_annotation_triple_click": {
 			"type": "boolean"
 		},
-		"platform_editor_nested_table_in_nested_parent_fix": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		},