@atlaskit/renderer 112.6.12 → 112.6.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 112.6.13
+
+### Patch Changes
+
+- [#156429](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156429)
+  [`01453825d9537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01453825d9537) -
+  added renderer functional component behind FF as part of React18 upgrade
+
 ## 112.6.12
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -210,6 +210,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       }
     }
 
+    // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
     /**
      * This is replaced by `isRangeAnnotatable`.
      *

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

@@ -65,7 +65,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 = "112.6.12";
+var packageVersion = "112.6.13";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -76,6 +76,7 @@ var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 /**
  * Exported due to enzyme test reliance on this component.
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(__RendererClassComponent, _PureComponent);
   var _super = _createSuper(__RendererClassComponent);
@@ -445,18 +446,357 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
   }]);
   return __RendererClassComponent;
 }(_react.PureComponent);
+var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
+  var _parentElement3, _parentElement4;
+  if (_browser.browser.ios || _browser.browser.android) {
+    return;
+  }
+  var badBrowser = _browser.browser.chrome || _browser.browser.safari;
+  var tripleClick = event.detail >= 3;
+  if (!(badBrowser && tripleClick)) {
+    return;
+  }
+  var selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  var type = selection.type,
+    anchorNode = selection.anchorNode,
+    focusNode = selection.focusNode;
+  var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
+  if (!rangeSelection) {
+    return;
+  }
+  var target = event.target;
+  var tableCell = target.closest('td,th');
+  var clickedInCell = Boolean(tableCell);
+  if (!clickedInCell) {
+    return;
+  }
+  var anchorInCell = tableCell.contains(anchorNode);
+  var focusInCell = tableCell.contains(focusNode);
+  var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
+  if (!selectionStartsOrEndsOutsideClickedCell) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+
+  var elementToSelect = anchorInCell ? (_parentElement3 = anchorNode.parentElement) === null || _parentElement3 === void 0 ? void 0 : _parentElement3.closest('div,p') : focusInCell ? (_parentElement4 = focusNode.parentElement) === null || _parentElement4 === void 0 ? void 0 : _parentElement4.closest('div,p') : tableCell;
+  if (elementToSelect) {
+    selection.selectAllChildren(elementToSelect);
+  }
+};
+
+/**
+ * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
+ * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
+ * renderer out for the editor).
+ * @param event Click event anywhere inside renderer
+ */
+var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDownSelection) {
+  var _props$eventHandlers;
+  var targetElement = event.target;
+  handleMouseTripleClickInTables(event);
+
+  // ED-14862: When a user triple clicks to select a line of content inside a
+  // a table cell, but the browser incorrectly moves the selection start or end into
+  // a different table cell, we manually set the selection back to within the original
+  // table cell the user intended to target
+  if (!((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && _props$eventHandlers.onUnhandledClick)) {
+    return;
+  }
+  if (!(targetElement instanceof window.Element)) {
+    return;
+  }
+  var rendererWrapper = event.currentTarget;
+  var isInteractiveElementInTree = (0, _utils2.findInTree)(targetElement, rendererWrapper, _clickToEdit.isInteractiveElement);
+  if (isInteractiveElementInTree) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+  var windowSelection = window.getSelection();
+  var selection = windowSelection !== null ? windowSelection.toString() : undefined;
+  var hasSelection = selection && selection.length !== 0;
+  var hasSelectionMouseDown = mouseDownSelection.current && mouseDownSelection.current.length !== 0;
+  var allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
+  if (allowEditBasedOnSelection) {
+    props.eventHandlers.onUnhandledClick(event);
+  }
+};
+var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
+  var mouseDownSelection = (0, _react.useRef)(undefined);
+  var providerFactory = (0, _react.useMemo)(function () {
+    return props.dataProviders || new _providerFactory.ProviderFactory();
+  }, [props.dataProviders]);
+  var createRendererContext = (0, _react.useMemo)(function () {
+    return function (featureFlags, isTopLevelRenderer) {
+      var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags);
+      return {
+        featureFlags: normalizedFeatureFlags,
+        isTopLevelRenderer: isTopLevelRenderer === undefined
+      };
+    };
+  }, []);
+  var _fireAnalyticsEvent = (0, _react.useCallback)(function (event) {
+    var createAnalyticsEvent = props.createAnalyticsEvent;
+    if (createAnalyticsEvent) {
+      var channel = _types.FabricChannel.editor;
+      createAnalyticsEvent(event).fire(channel);
+    }
+  }, [props]);
+  var deriveSerializerProps = (0, _react.useCallback)(function (props) {
+    var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
+    var annotationProvider = props.annotationProvider;
+    var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+    var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
+      featureFlags = _createRendererContex.featureFlags;
+    return {
+      startPos: props.startPos,
+      providers: providerFactory,
+      eventHandlers: props.eventHandlers,
+      extensionHandlers: props.extensionHandlers,
+      portal: props.portal,
+      objectContext: _objectSpread({
+        adDoc: props.document,
+        schema: props.schema
+      }, props.rendererContext),
+      appearance: props.appearance,
+      disableHeadingIDs: props.disableHeadingIDs,
+      disableActions: props.disableActions,
+      allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      allowColumnSorting: props.allowColumnSorting,
+      fireAnalyticsEvent: _fireAnalyticsEvent,
+      shouldOpenMediaViewer: props.shouldOpenMediaViewer,
+      allowAltTextOnImages: props.allowAltTextOnImages,
+      stickyHeaders: stickyHeaders,
+      allowMediaLinking: props.media && props.media.allowLinking,
+      surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
+      media: props.media,
+      emojiResourceConfig: props.emojiResourceConfig,
+      smartLinks: props.smartLinks,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowAnnotations: props.allowAnnotations,
+      allowSelectAllTrap: props.allowSelectAllTrap,
+      allowPlaceholderText: props.allowPlaceholderText,
+      nodeComponents: props.nodeComponents,
+      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      textHighlighter: props.UNSTABLE_textHighlighter,
+      allowTableAlignment: props.UNSTABLE_allowTableAlignment,
+      allowTableResizing: props.UNSTABLE_allowTableResizing
+    };
+  }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
+  var serializer = (0, _react.useMemo)(function () {
+    var _props$startPos;
+    return new _.ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
+    })));
+  }, [deriveSerializerProps, props]);
+  var localRef = (0, _react.useRef)(null);
+  var editorRef = props.innerRef || localRef;
+  var id = (0, _react.useMemo)(function () {
+    return (0, _v.default)();
+  }, []);
+  var renderedMeasurementDistortedDurationMonitor = (0, _react.useMemo)(function () {
+    return (0, _measureRender.getDistortedDurationMonitor)();
+  }, []);
+
+  // we are doing this to ensure it runs as
+  // early as possible in the React lifecycle
+  // to avoid any other side effects
+  var measureStarted = (0, _react.useRef)(false);
+  var startAnalyticsMeasure = function startAnalyticsMeasure() {
+    (0, _performanceMeasures.startMeasure)("Renderer Render Time: ".concat(id));
+  };
+  if (!measureStarted.current) {
+    startAnalyticsMeasure();
+    measureStarted.current = true;
+  }
+  var anchorLinkAnalytics = (0, _react.useCallback)(function () {
+    var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
+    var disableHeadingIDs = props.disableHeadingIDs;
+    if (!disableHeadingIDs && hash && editorRef && editorRef.current instanceof HTMLElement) {
+      var anchorLinkElement = document.getElementById(hash);
+      if (anchorLinkElement && editorRef.current.contains(anchorLinkElement)) {
+        _fireAnalyticsEvent({
+          action: _analytics.ACTION.VIEWED,
+          actionSubject: _analytics.ACTION_SUBJECT.ANCHOR_LINK,
+          attributes: {
+            platform: _events.PLATFORM.WEB,
+            mode: _events.MODE.RENDERER
+          },
+          eventType: _analytics.EVENT_TYPE.UI
+        });
+      }
+    }
+  }, [props.disableHeadingIDs, editorRef, _fireAnalyticsEvent]);
+  var getSchema = (0, _react.useMemo)(function () {
+    return function (schema, adfStage) {
+      if (schema) {
+        return schema;
+      }
+      return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
+    };
+  }, []);
+  var onMouseDownEditView = function onMouseDownEditView() {
+    var windowSelection = window.getSelection();
+    mouseDownSelection.current = windowSelection !== null ? windowSelection.toString() : undefined;
+  };
+  var dataProviders = props.dataProviders,
+    analyticsEventSeverityTracking = props.analyticsEventSeverityTracking;
+  (0, _react.useEffect)(function () {
+    var rafID;
+    var handleAnalytics = function handleAnalytics() {
+      _fireAnalyticsEvent({
+        action: _analytics.ACTION.STARTED,
+        actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: _events.PLATFORM.WEB
+        },
+        eventType: _analytics.EVENT_TYPE.UI
+      });
+      rafID = requestAnimationFrame(function () {
+        (0, _performanceMeasures.stopMeasure)("Renderer Render Time: ".concat(id), function (duration) {
+          var _analyticsEventSeveri3, _analyticsEventSeveri4;
+          var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
+          var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri3 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri3 !== void 0 ? _analyticsEventSeveri3 : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri4 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri4 !== void 0 ? _analyticsEventSeveri4 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
+          var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+          if (!isTTRTrackingExplicitlyDisabled) {
+            _fireAnalyticsEvent({
+              action: _analytics.ACTION.RENDERED,
+              actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
+              attributes: {
+                platform: _events.PLATFORM.WEB,
+                duration: duration,
+                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
+                ttfb: (0, _navigation.getResponseEndTime)(),
+                nodes: (0, _countNodes.countNodes)(props.document),
+                severity: severity
+              },
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            });
+          }
+          renderedMeasurementDistortedDurationMonitor.cleanup();
+        });
+        anchorLinkAnalytics();
+      });
+    };
+    handleAnalytics();
+    return function () {
+      if (rafID) {
+        window.cancelAnimationFrame(rafID);
+      }
+      if (dataProviders) {
+        providerFactory.destroy();
+      }
+    };
+    // we are going to ignore this because I'm doing this on purpose
+    // having a dependency array means we run stopMeasure twice per render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  try {
+    var _createRendererContex2, _props$media;
+    var schema = getSchema(props.schema, props.adfStage);
+    var _renderDocument2 = (0, _.renderDocument)(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats),
+      result = _renderDocument2.result,
+      stat = _renderDocument2.stat,
+      pmDoc = _renderDocument2.pmDoc;
+    if (props.onComplete) {
+      props.onComplete(stat);
+    }
+    var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
+      value: createRendererContext(props.featureFlags, props.isTopLevelRenderer)
+    }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
+      value: (0, _links.getActiveHeadingId)(props.allowHeadingAnchorLinks)
+    }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
+      value: {
+        fireAnalyticsEvent: function fireAnalyticsEvent(event) {
+          return _fireAnalyticsEvent(event);
+        }
+      }
+    }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(_providerFactory.ProviderFactoryProvider, {
+      value: providerFactory
+    }, (0, _react2.jsx)(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowNestedHeaderLinks: (0, _links.isNestedHeaderLinksEnabled)(props.allowHeadingAnchorLinks),
+      allowColumnSorting: props.allowColumnSorting,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowPlaceholderText: props.allowPlaceholderText,
+      useBlockRenderForCodeBlock: (_createRendererContex2 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex2 !== void 0 ? _createRendererContex2 : true,
+      addTelepointer: props.addTelepointer,
+      innerRef: editorRef,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      onMouseDown: onMouseDownEditView,
+      ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, props.enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
+      doc: pmDoc,
+      schema: schema,
+      onAnalyticsEvent: _fireAnalyticsEvent
+    }, result)))))));
+    var rendererResult = props.truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
+      height: props.maxHeight,
+      fadeHeight: props.fadeOutHeight
+    }, rendererOutput) : rendererOutput;
+    return (0, _react2.jsx)(_react.Fragment, null, rendererResult);
+  } catch (e) {
+    var _createRendererContex3;
+    if (props.onError) {
+      props.onError(e);
+    }
+    return (0, _react2.jsx)(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowPlaceholderText: props.allowPlaceholderText,
+      allowColumnSorting: props.allowColumnSorting,
+      allowNestedHeaderLinks: (0, _links.isNestedHeaderLinksEnabled)(props.allowHeadingAnchorLinks),
+      useBlockRenderForCodeBlock: (_createRendererContex3 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex3 !== void 0 ? _createRendererContex3 : true,
+      addTelepointer: props.addTelepointer,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
+  }
+};
 function Renderer(props) {
   var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
   var _useRendererContext = (0, _rendererContext.useRendererContext)(),
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
-  return (
-    // eslint-disable-next-line react/jsx-pascal-case
-    (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
-      startPos: startPos,
-      isTopLevelRenderer: isTopLevelRenderer
-    }))
-  );
+  return (0, _platformFeatureFlags.fg)('platform_editor_react18_renderer') ? (0, _react2.jsx)(RendererFunctionalComponent, (0, _extends2.default)({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  })) :
+  // eslint-disable-next-line react/jsx-pascal-case
+  (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  }));
 }
 
 // Usage notes:
@@ -506,7 +846,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     return telepointer;
   };
   var initialUpdate = _react.default.useRef(true);
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
@@ -660,5 +1000,6 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   }))));
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /* @deprecated using this version of the renderer causes the RendererActions to inaccessible from any consumers */
 var _default = exports.default = RendererWithAnnotationSelection;

package/dist/es2019/actions/index.js

@@ -188,6 +188,7 @@ export default class RendererActions {
     }
   }
 
+  // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
   /**
    * This is replaced by `isRangeAnnotatable`.
    *

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent, useCallback, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.6.12";
+const packageVersion = "112.6.13";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -56,6 +56,7 @@ export const defaultNodeComponents = nodeToReact;
 /**
  * Exported due to enzyme test reliance on this component.
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class __RendererClassComponent extends PureComponent {
   constructor(props) {
     super(props);
@@ -418,6 +419,341 @@ export class __RendererClassComponent extends PureComponent {
     }
   }
 }
+const handleMouseTripleClickInTables = event => {
+  var _parentElement3, _parentElement4;
+  if (browser.ios || browser.android) {
+    return;
+  }
+  const badBrowser = browser.chrome || browser.safari;
+  const tripleClick = event.detail >= 3;
+  if (!(badBrowser && tripleClick)) {
+    return;
+  }
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  const {
+    type,
+    anchorNode,
+    focusNode
+  } = selection;
+  const rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
+  if (!rangeSelection) {
+    return;
+  }
+  const target = event.target;
+  const tableCell = target.closest('td,th');
+  const clickedInCell = Boolean(tableCell);
+  if (!clickedInCell) {
+    return;
+  }
+  const anchorInCell = tableCell.contains(anchorNode);
+  const focusInCell = tableCell.contains(focusNode);
+  const selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
+  if (!selectionStartsOrEndsOutsideClickedCell) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+
+  const elementToSelect = anchorInCell ? (_parentElement3 = anchorNode.parentElement) === null || _parentElement3 === void 0 ? void 0 : _parentElement3.closest('div,p') : focusInCell ? (_parentElement4 = focusNode.parentElement) === null || _parentElement4 === void 0 ? void 0 : _parentElement4.closest('div,p') : tableCell;
+  if (elementToSelect) {
+    selection.selectAllChildren(elementToSelect);
+  }
+};
+
+/**
+ * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
+ * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
+ * renderer out for the editor).
+ * @param event Click event anywhere inside renderer
+ */
+const handleWrapperOnClick = (event, props, mouseDownSelection) => {
+  var _props$eventHandlers;
+  const targetElement = event.target;
+  handleMouseTripleClickInTables(event);
+
+  // ED-14862: When a user triple clicks to select a line of content inside a
+  // a table cell, but the browser incorrectly moves the selection start or end into
+  // a different table cell, we manually set the selection back to within the original
+  // table cell the user intended to target
+  if (!((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && _props$eventHandlers.onUnhandledClick)) {
+    return;
+  }
+  if (!(targetElement instanceof window.Element)) {
+    return;
+  }
+  const rendererWrapper = event.currentTarget;
+  const isInteractiveElementInTree = findInTree(targetElement, rendererWrapper, isInteractiveElement);
+  if (isInteractiveElementInTree) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+  const windowSelection = window.getSelection();
+  const selection = windowSelection !== null ? windowSelection.toString() : undefined;
+  const hasSelection = selection && selection.length !== 0;
+  const hasSelectionMouseDown = mouseDownSelection.current && mouseDownSelection.current.length !== 0;
+  const allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
+  if (allowEditBasedOnSelection) {
+    props.eventHandlers.onUnhandledClick(event);
+  }
+};
+const RendererFunctionalComponent = props => {
+  let mouseDownSelection = useRef(undefined);
+  const providerFactory = useMemo(() => props.dataProviders || new ProviderFactory(), [props.dataProviders]);
+  const createRendererContext = useMemo(() => (featureFlags, isTopLevelRenderer) => {
+    const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
+    return {
+      featureFlags: normalizedFeatureFlags,
+      isTopLevelRenderer: isTopLevelRenderer === undefined
+    };
+  }, []);
+  const fireAnalyticsEvent = useCallback(event => {
+    const {
+      createAnalyticsEvent
+    } = props;
+    if (createAnalyticsEvent) {
+      const channel = FabricChannel.editor;
+      createAnalyticsEvent(event).fire(channel);
+    }
+  }, [props]);
+  const deriveSerializerProps = useCallback(props => {
+    const stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
+    const {
+      annotationProvider
+    } = props;
+    const allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+    const {
+      featureFlags
+    } = createRendererContext(props.featureFlags, props.isTopLevelRenderer);
+    return {
+      startPos: props.startPos,
+      providers: providerFactory,
+      eventHandlers: props.eventHandlers,
+      extensionHandlers: props.extensionHandlers,
+      portal: props.portal,
+      objectContext: {
+        adDoc: props.document,
+        schema: props.schema,
+        ...props.rendererContext
+      },
+      appearance: props.appearance,
+      disableHeadingIDs: props.disableHeadingIDs,
+      disableActions: props.disableActions,
+      allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      allowColumnSorting: props.allowColumnSorting,
+      fireAnalyticsEvent: fireAnalyticsEvent,
+      shouldOpenMediaViewer: props.shouldOpenMediaViewer,
+      allowAltTextOnImages: props.allowAltTextOnImages,
+      stickyHeaders,
+      allowMediaLinking: props.media && props.media.allowLinking,
+      surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
+      media: props.media,
+      emojiResourceConfig: props.emojiResourceConfig,
+      smartLinks: props.smartLinks,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowAnnotations: props.allowAnnotations,
+      allowSelectAllTrap: props.allowSelectAllTrap,
+      allowPlaceholderText: props.allowPlaceholderText,
+      nodeComponents: props.nodeComponents,
+      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      textHighlighter: props.UNSTABLE_textHighlighter,
+      allowTableAlignment: props.UNSTABLE_allowTableAlignment,
+      allowTableResizing: props.UNSTABLE_allowTableResizing
+    };
+  }, [createRendererContext, providerFactory, fireAnalyticsEvent]);
+  const serializer = useMemo(() => {
+    var _props$startPos;
+    return new ReactSerializer(deriveSerializerProps({
+      ...props,
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
+    }));
+  }, [deriveSerializerProps, props]);
+  const localRef = useRef(null);
+  const editorRef = props.innerRef || localRef;
+  const id = useMemo(() => uuid(), []);
+  const renderedMeasurementDistortedDurationMonitor = useMemo(() => getDistortedDurationMonitor(), []);
+
+  // we are doing this to ensure it runs as
+  // early as possible in the React lifecycle
+  // to avoid any other side effects
+  const measureStarted = useRef(false);
+  const startAnalyticsMeasure = () => {
+    startMeasure(`Renderer Render Time: ${id}`);
+  };
+  if (!measureStarted.current) {
+    startAnalyticsMeasure();
+    measureStarted.current = true;
+  }
+  const anchorLinkAnalytics = useCallback(() => {
+    const hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
+    const disableHeadingIDs = props.disableHeadingIDs;
+    if (!disableHeadingIDs && hash && editorRef && editorRef.current instanceof HTMLElement) {
+      const anchorLinkElement = document.getElementById(hash);
+      if (anchorLinkElement && editorRef.current.contains(anchorLinkElement)) {
+        fireAnalyticsEvent({
+          action: ACTION.VIEWED,
+          actionSubject: ACTION_SUBJECT.ANCHOR_LINK,
+          attributes: {
+            platform: PLATFORM.WEB,
+            mode: MODE.RENDERER
+          },
+          eventType: EVENT_TYPE.UI
+        });
+      }
+    }
+  }, [props.disableHeadingIDs, editorRef, fireAnalyticsEvent]);
+  const getSchema = useMemo(() => {
+    return (schema, adfStage) => {
+      if (schema) {
+        return schema;
+      }
+      return getSchemaBasedOnStage(adfStage);
+    };
+  }, []);
+  const onMouseDownEditView = () => {
+    const windowSelection = window.getSelection();
+    mouseDownSelection.current = windowSelection !== null ? windowSelection.toString() : undefined;
+  };
+  const {
+    dataProviders,
+    analyticsEventSeverityTracking
+  } = props;
+  useEffect(() => {
+    let rafID;
+    const handleAnalytics = () => {
+      fireAnalyticsEvent({
+        action: ACTION.STARTED,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: PLATFORM.WEB
+        },
+        eventType: EVENT_TYPE.UI
+      });
+      rafID = requestAnimationFrame(() => {
+        stopMeasure(`Renderer Render Time: ${id}`, duration => {
+          var _analyticsEventSeveri3, _analyticsEventSeveri4;
+          const forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
+          const severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri3 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri3 !== void 0 ? _analyticsEventSeveri3 : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri4 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri4 !== void 0 ? _analyticsEventSeveri4 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
+          const isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+          if (!isTTRTrackingExplicitlyDisabled) {
+            fireAnalyticsEvent({
+              action: ACTION.RENDERED,
+              actionSubject: ACTION_SUBJECT.RENDERER,
+              attributes: {
+                platform: PLATFORM.WEB,
+                duration,
+                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
+                ttfb: getResponseEndTime(),
+                nodes: countNodes(props.document),
+                severity
+              },
+              eventType: EVENT_TYPE.OPERATIONAL
+            });
+          }
+          renderedMeasurementDistortedDurationMonitor.cleanup();
+        });
+        anchorLinkAnalytics();
+      });
+    };
+    handleAnalytics();
+    return () => {
+      if (rafID) {
+        window.cancelAnimationFrame(rafID);
+      }
+      if (dataProviders) {
+        providerFactory.destroy();
+      }
+    };
+    // we are going to ignore this because I'm doing this on purpose
+    // having a dependency array means we run stopMeasure twice per render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  try {
+    var _createRendererContex, _props$media;
+    const schema = getSchema(props.schema, props.adfStage);
+    const {
+      result,
+      stat,
+      pmDoc
+    } = renderDocument(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats);
+    if (props.onComplete) {
+      props.onComplete(stat);
+    }
+    const rendererOutput = jsx(RendererContextProvider, {
+      value: createRendererContext(props.featureFlags, props.isTopLevelRenderer)
+    }, jsx(ActiveHeaderIdProvider, {
+      value: getActiveHeadingId(props.allowHeadingAnchorLinks)
+    }, jsx(AnalyticsContext.Provider, {
+      value: {
+        fireAnalyticsEvent: event => fireAnalyticsEvent(event)
+      }
+    }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
+      value: providerFactory
+    }, jsx(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
+      allowColumnSorting: props.allowColumnSorting,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowPlaceholderText: props.allowPlaceholderText,
+      useBlockRenderForCodeBlock: (_createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex !== void 0 ? _createRendererContex : true,
+      addTelepointer: props.addTelepointer,
+      innerRef: editorRef,
+      onClick: event => handleWrapperOnClick(event, props, mouseDownSelection),
+      onMouseDown: onMouseDownEditView,
+      ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, props.enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
+      doc: pmDoc,
+      schema: schema,
+      onAnalyticsEvent: fireAnalyticsEvent
+    }, result)))))));
+    let rendererResult = props.truncated ? jsx(TruncatedWrapper, {
+      height: props.maxHeight,
+      fadeHeight: props.fadeOutHeight
+    }, rendererOutput) : rendererOutput;
+    return jsx(Fragment, null, rendererResult);
+  } catch (e) {
+    var _createRendererContex2;
+    if (props.onError) {
+      props.onError(e);
+    }
+    return jsx(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowPlaceholderText: props.allowPlaceholderText,
+      allowColumnSorting: props.allowColumnSorting,
+      allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
+      useBlockRenderForCodeBlock: (_createRendererContex2 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex2 !== void 0 ? _createRendererContex2 : true,
+      addTelepointer: props.addTelepointer,
+      onClick: event => handleWrapperOnClick(event, props, mouseDownSelection),
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, jsx(UnsupportedBlock, null));
+  }
+};
 export function Renderer(props) {
   const {
     startPos
@@ -425,13 +761,15 @@ export function Renderer(props) {
   const {
     isTopLevelRenderer
   } = useRendererContext();
-  return (
-    // eslint-disable-next-line react/jsx-pascal-case
-    jsx(__RendererClassComponent, _extends({}, props, {
-      startPos: startPos,
-      isTopLevelRenderer: isTopLevelRenderer
-    }))
-  );
+  return fg('platform_editor_react18_renderer') ? jsx(RendererFunctionalComponent, _extends({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  })) :
+  // eslint-disable-next-line react/jsx-pascal-case
+  jsx(__RendererClassComponent, _extends({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  }));
 }
 
 // Usage notes:
@@ -481,7 +819,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     return telepointer;
   };
   const initialUpdate = React.useRef(true);
-  React.useEffect(() => {
+  useEffect(() => {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
@@ -634,5 +972,6 @@ const RendererWithAnnotationSelection = props => {
   }))));
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /* @deprecated using this version of the renderer causes the RendererActions to inaccessible from any consumers */
 export default RendererWithAnnotationSelection;

package/dist/esm/actions/index.js

@@ -203,6 +203,7 @@ var RendererActions = /*#__PURE__*/function () {
       }
     }
 
+    // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
     /**
      * This is replaced by `isRangeAnnotatable`.
      *

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent, useCallback, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.6.12";
+var packageVersion = "112.6.13";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -66,6 +66,7 @@ export var defaultNodeComponents = nodeToReact;
 /**
  * Exported due to enzyme test reliance on this component.
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
   _inherits(__RendererClassComponent, _PureComponent);
   var _super = _createSuper(__RendererClassComponent);
@@ -435,18 +436,357 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
   }]);
   return __RendererClassComponent;
 }(PureComponent);
+var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
+  var _parentElement3, _parentElement4;
+  if (browser.ios || browser.android) {
+    return;
+  }
+  var badBrowser = browser.chrome || browser.safari;
+  var tripleClick = event.detail >= 3;
+  if (!(badBrowser && tripleClick)) {
+    return;
+  }
+  var selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  var type = selection.type,
+    anchorNode = selection.anchorNode,
+    focusNode = selection.focusNode;
+  var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
+  if (!rangeSelection) {
+    return;
+  }
+  var target = event.target;
+  var tableCell = target.closest('td,th');
+  var clickedInCell = Boolean(tableCell);
+  if (!clickedInCell) {
+    return;
+  }
+  var anchorInCell = tableCell.contains(anchorNode);
+  var focusInCell = tableCell.contains(focusNode);
+  var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
+  if (!selectionStartsOrEndsOutsideClickedCell) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+
+  var elementToSelect = anchorInCell ? (_parentElement3 = anchorNode.parentElement) === null || _parentElement3 === void 0 ? void 0 : _parentElement3.closest('div,p') : focusInCell ? (_parentElement4 = focusNode.parentElement) === null || _parentElement4 === void 0 ? void 0 : _parentElement4.closest('div,p') : tableCell;
+  if (elementToSelect) {
+    selection.selectAllChildren(elementToSelect);
+  }
+};
+
+/**
+ * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
+ * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
+ * renderer out for the editor).
+ * @param event Click event anywhere inside renderer
+ */
+var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDownSelection) {
+  var _props$eventHandlers;
+  var targetElement = event.target;
+  handleMouseTripleClickInTables(event);
+
+  // ED-14862: When a user triple clicks to select a line of content inside a
+  // a table cell, but the browser incorrectly moves the selection start or end into
+  // a different table cell, we manually set the selection back to within the original
+  // table cell the user intended to target
+  if (!((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && _props$eventHandlers.onUnhandledClick)) {
+    return;
+  }
+  if (!(targetElement instanceof window.Element)) {
+    return;
+  }
+  var rendererWrapper = event.currentTarget;
+  var isInteractiveElementInTree = findInTree(targetElement, rendererWrapper, isInteractiveElement);
+  if (isInteractiveElementInTree) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+  var windowSelection = window.getSelection();
+  var selection = windowSelection !== null ? windowSelection.toString() : undefined;
+  var hasSelection = selection && selection.length !== 0;
+  var hasSelectionMouseDown = mouseDownSelection.current && mouseDownSelection.current.length !== 0;
+  var allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
+  if (allowEditBasedOnSelection) {
+    props.eventHandlers.onUnhandledClick(event);
+  }
+};
+var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
+  var mouseDownSelection = useRef(undefined);
+  var providerFactory = useMemo(function () {
+    return props.dataProviders || new ProviderFactory();
+  }, [props.dataProviders]);
+  var createRendererContext = useMemo(function () {
+    return function (featureFlags, isTopLevelRenderer) {
+      var normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
+      return {
+        featureFlags: normalizedFeatureFlags,
+        isTopLevelRenderer: isTopLevelRenderer === undefined
+      };
+    };
+  }, []);
+  var _fireAnalyticsEvent = useCallback(function (event) {
+    var createAnalyticsEvent = props.createAnalyticsEvent;
+    if (createAnalyticsEvent) {
+      var channel = FabricChannel.editor;
+      createAnalyticsEvent(event).fire(channel);
+    }
+  }, [props]);
+  var deriveSerializerProps = useCallback(function (props) {
+    var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
+    var annotationProvider = props.annotationProvider;
+    var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+    var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
+      featureFlags = _createRendererContex.featureFlags;
+    return {
+      startPos: props.startPos,
+      providers: providerFactory,
+      eventHandlers: props.eventHandlers,
+      extensionHandlers: props.extensionHandlers,
+      portal: props.portal,
+      objectContext: _objectSpread({
+        adDoc: props.document,
+        schema: props.schema
+      }, props.rendererContext),
+      appearance: props.appearance,
+      disableHeadingIDs: props.disableHeadingIDs,
+      disableActions: props.disableActions,
+      allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      allowColumnSorting: props.allowColumnSorting,
+      fireAnalyticsEvent: _fireAnalyticsEvent,
+      shouldOpenMediaViewer: props.shouldOpenMediaViewer,
+      allowAltTextOnImages: props.allowAltTextOnImages,
+      stickyHeaders: stickyHeaders,
+      allowMediaLinking: props.media && props.media.allowLinking,
+      surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
+      media: props.media,
+      emojiResourceConfig: props.emojiResourceConfig,
+      smartLinks: props.smartLinks,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowAnnotations: props.allowAnnotations,
+      allowSelectAllTrap: props.allowSelectAllTrap,
+      allowPlaceholderText: props.allowPlaceholderText,
+      nodeComponents: props.nodeComponents,
+      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      textHighlighter: props.UNSTABLE_textHighlighter,
+      allowTableAlignment: props.UNSTABLE_allowTableAlignment,
+      allowTableResizing: props.UNSTABLE_allowTableResizing
+    };
+  }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
+  var serializer = useMemo(function () {
+    var _props$startPos;
+    return new ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
+    })));
+  }, [deriveSerializerProps, props]);
+  var localRef = useRef(null);
+  var editorRef = props.innerRef || localRef;
+  var id = useMemo(function () {
+    return uuid();
+  }, []);
+  var renderedMeasurementDistortedDurationMonitor = useMemo(function () {
+    return getDistortedDurationMonitor();
+  }, []);
+
+  // we are doing this to ensure it runs as
+  // early as possible in the React lifecycle
+  // to avoid any other side effects
+  var measureStarted = useRef(false);
+  var startAnalyticsMeasure = function startAnalyticsMeasure() {
+    startMeasure("Renderer Render Time: ".concat(id));
+  };
+  if (!measureStarted.current) {
+    startAnalyticsMeasure();
+    measureStarted.current = true;
+  }
+  var anchorLinkAnalytics = useCallback(function () {
+    var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
+    var disableHeadingIDs = props.disableHeadingIDs;
+    if (!disableHeadingIDs && hash && editorRef && editorRef.current instanceof HTMLElement) {
+      var anchorLinkElement = document.getElementById(hash);
+      if (anchorLinkElement && editorRef.current.contains(anchorLinkElement)) {
+        _fireAnalyticsEvent({
+          action: ACTION.VIEWED,
+          actionSubject: ACTION_SUBJECT.ANCHOR_LINK,
+          attributes: {
+            platform: PLATFORM.WEB,
+            mode: MODE.RENDERER
+          },
+          eventType: EVENT_TYPE.UI
+        });
+      }
+    }
+  }, [props.disableHeadingIDs, editorRef, _fireAnalyticsEvent]);
+  var getSchema = useMemo(function () {
+    return function (schema, adfStage) {
+      if (schema) {
+        return schema;
+      }
+      return getSchemaBasedOnStage(adfStage);
+    };
+  }, []);
+  var onMouseDownEditView = function onMouseDownEditView() {
+    var windowSelection = window.getSelection();
+    mouseDownSelection.current = windowSelection !== null ? windowSelection.toString() : undefined;
+  };
+  var dataProviders = props.dataProviders,
+    analyticsEventSeverityTracking = props.analyticsEventSeverityTracking;
+  useEffect(function () {
+    var rafID;
+    var handleAnalytics = function handleAnalytics() {
+      _fireAnalyticsEvent({
+        action: ACTION.STARTED,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: PLATFORM.WEB
+        },
+        eventType: EVENT_TYPE.UI
+      });
+      rafID = requestAnimationFrame(function () {
+        stopMeasure("Renderer Render Time: ".concat(id), function (duration) {
+          var _analyticsEventSeveri3, _analyticsEventSeveri4;
+          var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
+          var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri3 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri3 !== void 0 ? _analyticsEventSeveri3 : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri4 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri4 !== void 0 ? _analyticsEventSeveri4 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
+          var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+          if (!isTTRTrackingExplicitlyDisabled) {
+            _fireAnalyticsEvent({
+              action: ACTION.RENDERED,
+              actionSubject: ACTION_SUBJECT.RENDERER,
+              attributes: {
+                platform: PLATFORM.WEB,
+                duration: duration,
+                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
+                ttfb: getResponseEndTime(),
+                nodes: countNodes(props.document),
+                severity: severity
+              },
+              eventType: EVENT_TYPE.OPERATIONAL
+            });
+          }
+          renderedMeasurementDistortedDurationMonitor.cleanup();
+        });
+        anchorLinkAnalytics();
+      });
+    };
+    handleAnalytics();
+    return function () {
+      if (rafID) {
+        window.cancelAnimationFrame(rafID);
+      }
+      if (dataProviders) {
+        providerFactory.destroy();
+      }
+    };
+    // we are going to ignore this because I'm doing this on purpose
+    // having a dependency array means we run stopMeasure twice per render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  try {
+    var _createRendererContex2, _props$media;
+    var schema = getSchema(props.schema, props.adfStage);
+    var _renderDocument2 = renderDocument(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats),
+      result = _renderDocument2.result,
+      stat = _renderDocument2.stat,
+      pmDoc = _renderDocument2.pmDoc;
+    if (props.onComplete) {
+      props.onComplete(stat);
+    }
+    var rendererOutput = jsx(RendererContextProvider, {
+      value: createRendererContext(props.featureFlags, props.isTopLevelRenderer)
+    }, jsx(ActiveHeaderIdProvider, {
+      value: getActiveHeadingId(props.allowHeadingAnchorLinks)
+    }, jsx(AnalyticsContext.Provider, {
+      value: {
+        fireAnalyticsEvent: function fireAnalyticsEvent(event) {
+          return _fireAnalyticsEvent(event);
+        }
+      }
+    }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
+      value: providerFactory
+    }, jsx(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
+      allowColumnSorting: props.allowColumnSorting,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowPlaceholderText: props.allowPlaceholderText,
+      useBlockRenderForCodeBlock: (_createRendererContex2 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex2 !== void 0 ? _createRendererContex2 : true,
+      addTelepointer: props.addTelepointer,
+      innerRef: editorRef,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      onMouseDown: onMouseDownEditView,
+      ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, props.enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
+      doc: pmDoc,
+      schema: schema,
+      onAnalyticsEvent: _fireAnalyticsEvent
+    }, result)))))));
+    var rendererResult = props.truncated ? jsx(TruncatedWrapper, {
+      height: props.maxHeight,
+      fadeHeight: props.fadeOutHeight
+    }, rendererOutput) : rendererOutput;
+    return jsx(Fragment, null, rendererResult);
+  } catch (e) {
+    var _createRendererContex3;
+    if (props.onError) {
+      props.onError(e);
+    }
+    return jsx(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowPlaceholderText: props.allowPlaceholderText,
+      allowColumnSorting: props.allowColumnSorting,
+      allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
+      useBlockRenderForCodeBlock: (_createRendererContex3 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex3 !== void 0 ? _createRendererContex3 : true,
+      addTelepointer: props.addTelepointer,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, jsx(UnsupportedBlock, null));
+  }
+};
 export function Renderer(props) {
   var _React$useContext = React.useContext(AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
   var _useRendererContext = useRendererContext(),
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
-  return (
-    // eslint-disable-next-line react/jsx-pascal-case
-    jsx(__RendererClassComponent, _extends({}, props, {
-      startPos: startPos,
-      isTopLevelRenderer: isTopLevelRenderer
-    }))
-  );
+  return fg('platform_editor_react18_renderer') ? jsx(RendererFunctionalComponent, _extends({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  })) :
+  // eslint-disable-next-line react/jsx-pascal-case
+  jsx(__RendererClassComponent, _extends({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  }));
 }
 
 // Usage notes:
@@ -496,7 +836,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     return telepointer;
   };
   var initialUpdate = React.useRef(true);
-  React.useEffect(function () {
+  useEffect(function () {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
@@ -650,5 +990,6 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   }))));
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /* @deprecated using this version of the renderer causes the RendererActions to inaccessible from any consumers */
 export default RendererWithAnnotationSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "112.6.12",
+	"version": "112.6.13",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^96.0.0",
+		"@atlaskit/editor-common": "^96.1.0",
 		"@atlaskit/editor-json-transformer": "^8.21.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-prosemirror": "6.2.1",
@@ -77,7 +77,7 @@
 		"@atlaskit/linking-common": "^6.0.0",
 		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
-		"@atlaskit/media-test-helpers": "^34.6.0",
+		"@atlaskit/media-test-helpers": "^34.7.0",
 		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/navigation-next": "^9.0.0",
 		"@atlaskit/util-data-test": "^17.13.0",
@@ -155,6 +155,9 @@
 		},
 		"platform_editor_hyperlink_underline": {
 			"type": "boolean"
+		},
+		"platform_editor_react18_renderer": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {