@atlaskit/renderer 97.0.0 → 99.0.0

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

@@ -35,7 +35,6 @@ import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
 import AnalyticsContext from '../../analytics/analyticsContext';
-import { CopyTextProvider } from '../../react/nodes/copy-text-provider';
 import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
 import { name, version } from '../../version.json';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
@@ -205,6 +204,10 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
       var annotationProvider = props.annotationProvider;
       var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+
+      var _this$featureFlags = this.featureFlags(props.featureFlags),
+          featureFlags = _this$featureFlags.featureFlags;
+
       return {
         providers: this.providerFactory,
         eventHandlers: props.eventHandlers,
@@ -231,7 +234,10 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
-        allowPlaceholderText: props.allowPlaceholderText
+        allowPlaceholderText: props.allowPlaceholderText,
+        nodeComponents: props.nodeComponents,
+        // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
+        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
       };
     }
   }, {
@@ -301,7 +307,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       };
 
       try {
-        var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+        var _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
 
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
 
@@ -316,7 +322,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         var rendererOutput = jsx(RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
-        }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
+        }, jsx(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
         }, jsx(AnalyticsContext.Provider, {
           value: {
@@ -338,12 +344,12 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))));
+        }, result))))));
         var rendererResult = truncated ? jsx(TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
-        var rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[ACTION_SUBJECT.RENDERER];
+        var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 ? void 0 : (_this$featureFlags2$f = _this$featureFlags2.featureFlags) === null || _this$featureFlags2$f === void 0 ? void 0 : (_this$featureFlags2$f2 = _this$featureFlags2$f.rendererRenderTracking) === null || _this$featureFlags2$f2 === void 0 ? void 0 : _this$featureFlags2$f2[ACTION_SUBJECT.RENDERER];
         var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
           componentProps: this.props,
           action: ACTION.RE_RENDERED,

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

@@ -14,6 +14,7 @@ import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEdito
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
+import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 export var FullPagePadding = 32;
 
 var getLineHeight = function getLineHeight(fontCode) {
@@ -99,7 +100,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n\n      .", "\n        .", " {\n        display: flex;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      &\n        .", ",\n        &\n        .", " {\n        height: calc(100% - ", "px);\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-of-type {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), editorFontSize(themeProps), themed({
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n\n      .", "\n        .", " {\n        display: flex;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      &\n        .", ",\n        &\n        .", " {\n        height: calc(100% - ", "px);\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-of-type {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", "\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), editorFontSize(themeProps), themed({
       light: token('color.text', colors.N800),
       dark: token('color.text', '#B8C7E0')
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), token('color.link', colors.B400), token('color.link', colors.B300), token('color.link.pressed', colors.B500), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
@@ -135,6 +136,6 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), themed({
       light: token('color.border', akEditorTableToolbar),
       dark: token('color.border', akEditorTableToolbarDark)
-    })(themeProps), borderRadius(), blockNodesVerticalMargin, columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth);
+    })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth);
   };
 };

package/dist/esm/version.json

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

package/dist/types/react/hooks/use-bidi-warnings.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface Config {
+    enableWarningTooltip: boolean;
+}
+interface Result {
+    renderBidiWarnings: (text: string) => ReactNode;
+    warningLabel: string;
+}
+export declare const useBidiWarnings: ({ enableWarningTooltip, }: Config) => Result;
+export {};

package/dist/types/react/hooks/use-in-viewport.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useInViewport: <RefType extends Element>() => {
+    isInViewport: boolean;
+    trackingRef: import("react").MutableRefObject<RefType | null>;
+};

package/dist/types/react/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Fragment, Mark, Node } from 'prosemirror-model';
 import { Serializer } from '../';
-import { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps } from '../ui/Renderer/types';
+import { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
 import { AnalyticsEventPayload } from '../analytics/events';
 import { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -34,6 +34,8 @@ export interface ReactSerializerInit {
     allowCustomPanels?: boolean;
     allowAnnotations?: boolean;
     allowSelectAllTrap?: boolean;
+    nodeComponents?: NodeComponentsProps;
+    allowWindowedCodeBlock?: boolean;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -75,6 +77,8 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private smartLinks?;
     private allowAnnotations;
     private allowSelectAllTrap?;
+    private nodeComponents?;
+    private allowWindowedCodeBlock?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types/react/nodes/{codeBlock.d.ts → codeBlock/codeBlock.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
-import { SupportedLanguages } from '@atlaskit/code';
+import type { SupportedLanguages } from '@atlaskit/code';
 export interface Props {
     text: string;
     language: SupportedLanguages;

package/dist/types/react/nodes/codeBlock/components/codeBlockContainer.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import type { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import { Props as CodeBlockProps } from '../codeBlock';
+interface ContainerProps {
+    className?: string;
+    text: CodeBlockProps['text'];
+    children: ReactNode;
+    allowCopyToClipboard?: boolean;
+}
+declare const CodeBlockContainer: ({ text, className, allowCopyToClipboard, children, }: ContainerProps) => jsx.JSX.Element;
+export default CodeBlockContainer;

package/dist/types/react/nodes/codeBlock/components/lightWeightCodeBlock.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import React from 'react';
+import type { Props as CodeBlockProps } from '../codeBlock';
+export declare const LightWeightCodeBlockCssClassName: {
+    CONTAINER: string;
+};
+export declare const getLightWeightCodeBlockStylesForRootRendererStyleSheet: () => import("@emotion/react").SerializedStyles;
+declare const LightWeightCodeBlock: React.ForwardRefExoticComponent<Pick<CodeBlockProps, "text" | "className" | "codeBidiWarningTooltipEnabled"> & React.RefAttributes<HTMLDivElement>>;
+export default LightWeightCodeBlock;

package/dist/types/react/nodes/codeBlock/windowedCodeBlock.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import type { Props as CodeBlockProps } from './codeBlock';
+declare const WindowedCodeBlock: ({ text, language, allowCopyToClipboard, codeBidiWarningTooltipEnabled, className: rootClassName, }: CodeBlockProps) => jsx.JSX.Element;
+export default WindowedCodeBlock;

package/dist/types/react/nodes/index.d.ts

@@ -21,7 +21,9 @@ import Table from './table';
 import { TableCell } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+import { NodeComponentsProps } from '../../ui/Renderer/types';
+declare const WindowedCodeBlock: React.ComponentType<import("./codeBlock/codeBlock").Props> & Loadable.LoadableComponent;
+declare const CodeBlock: React.ComponentType<import("react-intl-next").WithIntlProps<import("./codeBlock/codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const TaskList: React.ComponentType<import("./taskList").Props> & Loadable.LoadableComponent;
 declare const TaskItem: React.ComponentType<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent;
 declare const DecisionList: React.ComponentType<import("./decisionList").Props> & Loadable.LoadableComponent;
@@ -39,7 +41,7 @@ declare const EmbedCard: React.ComponentType<{
     originalWidth?: number | undefined;
     width?: number | undefined;
     layout: import("@atlaskit/adf-schema").RichMediaLayout;
-    rendererAppearance?: import("../..").RendererAppearance;
+    rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     isInsideOfBlockNode?: boolean | undefined;
 }> & Loadable.LoadableComponent;
 declare const InlineCard: React.ComponentType<import("@atlaskit/editor-common/utils").Diff<import("./inlineCard").InlineCardProps & import("../../ui/SmartCardStorage").WithSmartCardStorageProps, import("../../ui/SmartCardStorage").WithSmartCardStorageProps>> & Loadable.LoadableComponent;
@@ -48,7 +50,7 @@ declare const BlockCard: React.ComponentType<{
     data?: object | undefined;
     eventHandlers?: import("@atlaskit/editor-common/ui").EventHandlers | undefined;
     portal?: HTMLElement | undefined;
-    rendererAppearance?: import("../..").RendererAppearance;
+    rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
@@ -61,8 +63,9 @@ export declare const nodeToReact: {
 };
 export interface ToReactFlags {
     allowSelectAllTrap?: boolean;
+    allowWindowedCodeBlock?: boolean;
 }
-export declare const toReact: (node: Node, flags?: ToReactFlags | undefined) => React.ComponentType<any>;
+export declare const toReact: (node: Node, flags?: ToReactFlags | undefined, nodeComponents?: NodeComponentsProps | undefined) => React.ComponentType<any>;
 export interface TextWrapper {
     type: {
         name: 'textWrapper';
@@ -87,5 +90,5 @@ export declare function isTextNode(node: Node | Mark): node is Node;
  * whose content satisfies the condition for an emoji block
  */
 export declare const isEmojiDoc: (doc: Fragment) => boolean;
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
 export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps };

package/dist/types/react/utils/clipboard.d.ts

@@ -0,0 +1 @@
+export declare const copyTextToClipboard: (text: string) => Promise<void>;

package/dist/types/ui/Renderer/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type RendererAppearance = 'comment' | 'full-page' | 'full-width' | 'mobile' | undefined;
 export declare type StickyHeaderConfig = {
     offsetTop?: number;
@@ -9,4 +10,7 @@ export declare type HeadingAnchorLinksConfig = {
     activeHeadingId?: string;
     allowNestedHeaderLinks?: boolean;
 };
+export declare type NodeComponentsProps = {
+    [key: string]: React.ComponentType<any>;
+};
 export declare type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;

package/dist/types/ui/renderer-props.d.ts

@@ -9,7 +9,7 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { RendererContext } from '../';
 import { RenderOutputStat } from '../render-document';
-import { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps } from './Renderer/types';
+import { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps, NodeComponentsProps } from './Renderer/types';
 import { MediaOptions } from '../types/mediaOptions';
 import { SmartLinksOptions } from '../types/smartLinksOptions';
 import { ACTION_SUBJECT } from '../analytics/enums';
@@ -67,6 +67,7 @@ export interface RendererProps {
     allowUgcScrubber?: boolean;
     allowSelectAllTrap?: boolean;
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
+    nodeComponents?: NodeComponentsProps;
     /**
      * @default undefined
      * @description

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "97.0.0",
+  "version": "99.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,16 +31,16 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
-    "@atlaskit/editor-common": "^68.0.0",
+    "@atlaskit/editor-common": "^69.0.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-card": "^73.8.0",
-    "@atlaskit/media-client": "^17.0.0",
+    "@atlaskit/media-card": "^74.0.0",
+    "@atlaskit/media-client": "^17.1.0",
     "@atlaskit/media-common": "^2.15.0",
-    "@atlaskit/media-filmstrip": "^44.0.0",
+    "@atlaskit/media-filmstrip": "^45.0.0",
     "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^46.5.0",
+    "@atlaskit/media-viewer": "^47.0.0",
     "@atlaskit/status": "^1.1.0",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
@@ -58,8 +58,8 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^33.0.0",
-    "@atlaskit/smart-card": "^19.2.0",
+    "@atlaskit/media-core": "^33.0.1",
+    "@atlaskit/smart-card": "^20.1.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^3.2.6"
@@ -69,20 +69,20 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^168.0.0",
-    "@atlaskit/editor-test-helpers": "^17.0.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/editor-core": "^170.0.0",
+    "@atlaskit/editor-test-helpers": "^17.1.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^16.9.0",
+    "@atlaskit/profilecard": "^16.10.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/smart-card": "^19.2.0",
+    "@atlaskit/smart-card": "^20.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.3.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -97,7 +97,8 @@
     "puppeteer": "13.7.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-live-clock": "^4.0.0",
+    "react-live-clock": "^5.0.0",
+    "react-moment": "^1.1.2",
     "react-test-renderer": "^16.8.0",
     "rxjs": "^5.5.0",
     "sinon": "^2.2.0",