@atlaskit/renderer 112.6.11 → 112.6.13

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.11";
+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/react/marks/link.js

@@ -10,6 +10,7 @@ import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 var anchorStyles = css({
@@ -68,5 +69,7 @@ export default function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children));
+  }, anchorProps, dataAttributes, fg('platform_editor_hyperlink_underline') && {
+    isLinkComponent: true
+  }), props.children));
 }