@atlaskit/renderer 112.6.11 → 112.6.13

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.11";
+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.11",
+	"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",
@@ -152,6 +152,12 @@
 		},
 		"platform_editor_hide_external_media_badge": {
 			"type": "boolean"
+		},
+		"platform_editor_hyperlink_underline": {
+			"type": "boolean"
+		},
+		"platform_editor_react18_renderer": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {