@atlaskit/renderer 112.6.12 → 112.6.14

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 112.6.14
+
+### Patch Changes
+
+- [#174633](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174633)
+  [`11d98912f520d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/11d98912f520d) -
+  Removed internal re-exports
+
+## 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/react/marks/annotation.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _annotations = require("../../ui/annotations");
+var _element = require("../../ui/annotations/element");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isAnnotationMark = exports.isAnnotationMark = function isAnnotationMark(mark) {
@@ -38,7 +38,7 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     // when using comment navigation to access comments on mediaInline
     _react.default.createElement("span", {
       id: id
-    }, children) : /*#__PURE__*/_react.default.createElement(_annotations.AnnotationMark, {
+    }, children) : /*#__PURE__*/_react.default.createElement(_element.MarkElement, {
       id: id,
       dataAttributes: data,
       annotationParentIds: annotationParentIds,

package/dist/cjs/react/nodes/date.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _reactIntlNext = require("react-intl-next");
-var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext");
+var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext/TaskItemsFormatContext");
 var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/react/nodes/media/index.js

@@ -34,7 +34,8 @@ var _annotation = _interopRequireDefault(require("../../marks/annotation"));
 var _context = require("../../../ui/annotations/context");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _reactIntlNext = require("react-intl-next");
-var _hooks = require("../../../ui/annotations/hooks");
+var _useInlineCommentsFilter = require("../../../ui/annotations/hooks/use-inline-comments-filter");
+var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
 var _types = require("@atlaskit/editor-common/types");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
@@ -151,8 +152,8 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     entered = _useState4[0],
     setEntered = _useState4[1];
-  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
-  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+  var updateSubscriber = (0, _useInlineCommentSubscriber.useInlineCommentSubscriberContext)();
+  var activeParentIds = (0, _useInlineCommentsFilter.useInlineCommentsFilter)({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
       return mark.attrs.id;
     })) !== null && _marks$map !== void 0 ? _marks$map : [''],
@@ -230,8 +231,8 @@ var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     entered = _useState8[0],
     setEntered = _useState8[1];
-  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
-  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+  var updateSubscriber = (0, _useInlineCommentSubscriber.useInlineCommentSubscriberContext)();
+  var activeParentIds = (0, _useInlineCommentsFilter.useInlineCommentsFilter)({
     annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
       return mark.attrs.id;
     })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],

package/dist/cjs/react/nodes/taskItem.js

@@ -18,7 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _taskItemWithProviders = _interopRequireDefault(require("./task-item-with-providers"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
-var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext");
+var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext/TaskItemsFormatContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }

package/dist/cjs/react/nodes/text-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _annotations = require("../../ui/annotations");
+var _component = require("../../ui/annotations/draft/component");
 var TextWrapper = function TextWrapper(props) {
   var startPos = props.startPos,
     endPos = props.endPos;
@@ -14,7 +14,7 @@ var TextWrapper = function TextWrapper(props) {
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_annotations.TextWithAnnotationDraft, {
+  return /*#__PURE__*/_react.default.createElement(_component.TextWithAnnotationDraft, {
     startPos: startPos,
     endPos: endPos,
     textHighlighter: props.textHighlighter,

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.14";
 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/cjs/ui/annotations/element/index.js

@@ -8,7 +8,9 @@ exports.MarkElement = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _mark = require("./mark");
-var _hooks = require("../hooks");
+var _useInlineCommentsFilter = require("../hooks/use-inline-comments-filter");
+var _useInlineCommentSubscriber = require("../hooks/use-inline-comment-subscriber");
+var _useEvents = require("../hooks/use-events");
 var _context = require("../context");
 var _types = require("@atlaskit/editor-common/types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -19,9 +21,9 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
     dataAttributes = _ref.dataAttributes,
     id = _ref.id,
     useBlockLevel = _ref.useBlockLevel;
-  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
+  var updateSubscriber = (0, _useInlineCommentSubscriber.useInlineCommentSubscriberContext)();
   var states = (0, _react.useContext)(_context.InlineCommentsStateContext);
-  var _useHasFocusEvent = (0, _hooks.useHasFocusEvent)({
+  var _useHasFocusEvent = (0, _useEvents.useHasFocusEvent)({
       id: id,
       updateSubscriber: updateSubscriber
     }),
@@ -44,7 +46,7 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
       eventTarget: eventTarget
     });
   }, [updateSubscriber, useBlockLevel]);
-  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+  var activeParentIds = (0, _useInlineCommentsFilter.useInlineCommentsFilter)({
     annotationIds: annotationParentIds,
     filter: {
       state: _adfSchema.AnnotationMarkStates.ACTIVE

package/dist/cjs/ui/annotations/hover/mounter.js

@@ -9,7 +9,7 @@ exports.Mounter = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _draft = require("../draft");
+var _dom = require("../draft/dom");
 var _types = require("@atlaskit/analytics-listeners/types");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _RendererActionsContext = require("../../RendererActionsContext");
@@ -91,7 +91,7 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
     }
     window.requestAnimationFrame(function () {
       if (options.keepNativeSelection) {
-        (0, _draft.updateWindowSelectionAroundDraft)(documentPosition);
+        (0, _dom.updateWindowSelectionAroundDraft)(documentPosition);
       } else {
         var sel = window.getSelection();
         if (sel) {

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

@@ -4,19 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AnnotationMark", {
-  enumerable: true,
-  get: function get() {
-    return _element.MarkElement;
-  }
-});
 exports.AnnotationsWrapper = exports.AnnotationsPositionContext = void 0;
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
-  enumerable: true,
-  get: function get() {
-    return _draft.TextWithAnnotationDraft;
-  }
-});
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _view = require("./view");
@@ -27,8 +15,6 @@ var _useEvents = require("./hooks/use-events");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _AnnotationRangeContext = require("./contexts/AnnotationRangeContext");
 var _AnnotationHoverContext = require("./contexts/AnnotationHoverContext");
-var _draft = require("./draft");
-var _element = require("./element");
 var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
   var adfDocument = _ref.adfDocument,
     isNestedRender = _ref.isNestedRender,

package/dist/cjs/ui/annotations/selection/mounter.js

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _draft = require("../draft");
+var _dom = require("../draft/dom");
 var _types = require("@atlaskit/analytics-listeners/types");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _getRendererRangeInlineNodeNames = require("../../../actions/get-renderer-range-inline-node-names");
@@ -130,7 +130,7 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     }
     window.requestAnimationFrame(function () {
       if (options.keepNativeSelection) {
-        (0, _draft.updateWindowSelectionAroundDraft)(documentPosition);
+        (0, _dom.updateWindowSelectionAroundDraft)(documentPosition);
       } else {
         var sel = window.getSelection();
         if (sel) {

package/dist/cjs/ui/annotations/view/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AnnotationView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _context = require("../context");
-var _hooks = require("../hooks");
+var _useEvents = require("../hooks/use-events");
 var _RendererActionsContext = require("../../../ui/RendererActionsContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -16,7 +16,7 @@ var AnnotationView = exports.AnnotationView = function AnnotationView(props) {
   var actionContext = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var inlineCommentProvider = providers && providers.inlineComment;
   var updateSubscriber = inlineCommentProvider && inlineCommentProvider.updateSubscriber || null;
-  var viewComponentProps = (0, _hooks.useAnnotationClickEvent)({
+  var viewComponentProps = (0, _useEvents.useAnnotationClickEvent)({
     updateSubscriber: updateSubscriber,
     createAnalyticsEvent: props.createAnalyticsEvent,
     isNestedRender: props.isNestedRender