@atlaskit/renderer
Version:
Renderer component
839 lines (815 loc) • 40.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
import { BaseTheme, IntlErrorBoundary, UnsupportedBlock, WidthProvider, WithCreateAnalyticsEvent } from '@atlaskit/editor-common/ui';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
// eslint-disable-next-line @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- emotion jsx pragma; go/DSP-18766
import { css, jsx } from '@emotion/react'; // oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { isPanelNestingTableSupported } from '@atlaskit/editor-common/nesting';
import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance/measure-render';
import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
import { useScrollToBlock } from '../hooks/useScrollToBlock';
import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
import { fg } from '@atlaskit/platform-feature-flags';
import { FabricChannel } from '@atlaskit/analytics-listeners/types';
import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { ReactSerializer, renderDocument } from '../../';
import AnalyticsContext from '../../analytics/analyticsContext';
import { MODE, PLATFORM } from '../../analytics/events';
import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientProvider';
import { getActiveHeadingId, isNestedHeaderLinksEnabled } from '../../react/utils/links';
import { RendererContextProvider, useRendererContext } from '../../renderer-context';
import { findInTree } from '../../utils';
import { RendererContext as ActionsContext, RendererActionsContext } from '../RendererActionsContext';
import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
import { ActiveHeaderIdProvider } from '../active-header-id-provider';
import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
import { ErrorBoundary } from './ErrorBoundary';
import { BreakoutSSRInlineScript } from './breakout-ssr';
import { isInteractiveElement } from './click-to-edit';
import { countNodes } from './count-nodes';
import { TELEPOINTER_ID } from './style';
import { TruncatedWrapper } from './truncated-wrapper';
import { ValidationContext } from './ValidationContext';
import { RendererStyleContainer } from './RendererStyleContainer';
import { getBaseFontSize } from './get-base-font-size';
import { removeEmptySpaceAroundContent } from './rendererHelper';
import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
import { PortalContext } from './PortalContext';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getHeightInfoPayload, getWidthInfoPayload } from './analytics-utils';
export const NORMAL_SEVERITY_THRESHOLD = 2000;
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
// we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
const TABLE_INFO_TIMEOUT = 10000;
const RENDER_EVENT_SAMPLE_RATE = 0.2;
const packageName = "@atlaskit/renderer";
const packageVersion = "132.0.1";
const setAsQueryContainerStyles = css({
containerName: 'ak-renderer-wrapper',
containerType: 'inline-size'
});
const handleMouseTripleClickInTables = event => {
var _parentElement, _parentElement2;
const browser = getBrowserInfo();
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;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
const target = event.target;
const tableCell = target.closest('td,th');
const clickedInCell = Boolean(tableCell);
if (!clickedInCell) {
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const anchorInCell = tableCell.contains(anchorNode);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
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 ? // Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? // Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.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
* @param props
* @param mouseDownSelection
* @example
*/
const handleWrapperOnClick = (event, props, mouseDownSelection) => {
var _props$eventHandlers;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
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;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
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);
}
};
export const RendererFunctionalComponent = props => {
const {
createAnalyticsEvent
} = props;
const mouseDownSelection = useRef(undefined);
const providerFactory = useMemo(() => props.dataProviders || new ProviderFactory(), [props.dataProviders]);
const {
nestedRendererType
} = useRendererContext();
const createRendererContext = useMemo(() => (featureFlags, isTopLevelRenderer) => {
const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
return {
featureFlags: normalizedFeatureFlags,
isTopLevelRenderer: isTopLevelRenderer === undefined,
// Propagate nestedRendererType into the inner RendererContextProvider so that
// React components inside the renderer (e.g. Colgroup) can read it via
// useRendererContext(). Without this, the inner provider overwrites the outer
// AKRendererWrapper context and nestedRendererType becomes undefined.
nestedRendererType
};
}, [nestedRendererType]);
const fireAnalyticsEventOld = useCallback(event => {
const {
createAnalyticsEvent
} = props;
if (createAnalyticsEvent) {
const channel = FabricChannel.editor;
createAnalyticsEvent(event).fire(channel);
}
}, [props]);
const fireAnalyticsEventNew = useCallback(event => {
if (createAnalyticsEvent) {
const channel = FabricChannel.editor;
createAnalyticsEvent(event).fire(channel);
}
}, [createAnalyticsEvent]);
const fireAnalyticsEvent = editorExperiment('platform_renderer_fix_analytics_memo_callback', true, {
exposure: true
}) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
const deriveSerializerProps = useCallback(props => {
var _props$startPos;
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 = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
providers: providerFactory,
eventHandlers: props.eventHandlers,
extensionHandlers: props.extensionHandlers,
portal: props.portal,
objectContext: {
adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,
schema: props.schema,
...props.rendererContext,
nestedRendererType
},
appearance: props.appearance,
contentMode: props.contentMode,
onSetLinkTarget: props.onSetLinkTarget,
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,
extensionViewportSizes: props.extensionViewportSizes,
getExtensionHeight: props.getExtensionHeight,
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,
isPresentational: props.UNSTABLE_isPresentational,
textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
allowTableAlignment: props.UNSTABLE_allowTableAlignment,
allowTableResizing: props.UNSTABLE_allowTableResizing,
disableTableOverflowShadow: props.disableTableOverflowShadow,
allowFixedColumnWidthOption: props.allowFixedColumnWidthOption,
shouldDisplayExtensionAsInline: props.shouldDisplayExtensionAsInline
};
}, [createRendererContext, providerFactory, fireAnalyticsEvent, nestedRendererType]);
const serializer = useMemoFromPropsDerivative(serializerProps => {
var _props$createSerializ, _props$createSerializ2;
return (_props$createSerializ = (_props$createSerializ2 = props.createSerializer) === null || _props$createSerializ2 === void 0 ? void 0 : _props$createSerializ2.call(props, serializerProps)) !== null && _props$createSerializ !== void 0 ? _props$createSerializ : new ReactSerializer(serializerProps);
}, deriveSerializerProps, props);
const localRef = useRef(null);
const editorRef = props.innerRef || localRef;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
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) {
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- anchor navigation uses document.getElementById for hash targets
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;
let heightWidthAnalyticsSetTimeoutID;
let heightWidthAnalyticsRicID;
let heightWidthAnalyticsRafID;
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 _analyticsEventSeveri, _analyticsEventSeveri2;
const forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
const severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
const isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
if (!isTTRTrackingExplicitlyDisabled) {
const event = {
action: ACTION.RENDERED,
actionSubject: ACTION_SUBJECT.RENDERER,
attributes: {
platform: PLATFORM.WEB,
duration,
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
ttfb: getResponseEndTime(),
nodes: countNodes(props.document),
nestedRendererType: editorExperiment('platform_synced_block', true) ? nestedRendererType : undefined,
severity
},
eventType: EVENT_TYPE.OPERATIONAL
};
fireAnalyticsEvent(event);
if (expValEquals('platform_editor_sample_renderer_rendered_event', 'isEnabled', true) && Math.random() < RENDER_EVENT_SAMPLE_RATE) {
fireAnalyticsEvent({
...event,
action: ACTION.RENDERED_SAMPLED
});
}
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
renderedMeasurementDistortedDurationMonitor.cleanup();
});
anchorLinkAnalytics();
});
// send statistics about the heights/widths of the tables on the page for alerting
heightWidthAnalyticsSetTimeoutID = setTimeout(() => {
const requestIdleCallbackFn = () => {
var _props$innerRef, _props$innerRef$curre;
const renderer = (_props$innerRef = props.innerRef) === null || _props$innerRef === void 0 ? void 0 : (_props$innerRef$curre = _props$innerRef.current) === null || _props$innerRef$curre === void 0 ? void 0 : _props$innerRef$curre.querySelector('.ak-renderer-document');
if (renderer) {
const payload = getWidthInfoPayload(renderer);
if (payload) {
fireAnalyticsEvent(payload);
}
if (fg('platform_editor_table_height_analytics_event')) {
const payloadHeight = getHeightInfoPayload(renderer);
if (payloadHeight) {
fireAnalyticsEvent(payloadHeight);
}
}
}
};
if (window && typeof window.requestIdleCallback === 'function') {
heightWidthAnalyticsRicID = window.requestIdleCallback(requestIdleCallbackFn);
} else if (window && typeof window.requestAnimationFrame === 'function') {
// requestIdleCallback is not supported in safari, fallback to requestAnimationFrame
heightWidthAnalyticsRafID = window.requestAnimationFrame(requestIdleCallbackFn);
}
}, TABLE_INFO_TIMEOUT);
};
handleAnalytics();
return () => {
if (rafID) {
window.cancelAnimationFrame(rafID);
}
if (heightWidthAnalyticsSetTimeoutID) {
window.clearTimeout(heightWidthAnalyticsSetTimeoutID);
}
if (heightWidthAnalyticsRafID) {
window.cancelAnimationFrame(heightWidthAnalyticsRafID);
}
if (heightWidthAnalyticsRicID) {
window.cancelIdleCallback(heightWidthAnalyticsRicID);
}
// if this is the ProviderFactory which was created in constructor
// it's safe to destroy it on Renderer unmount
// updated to match existing class component
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
}, []);
const rendererContext = useMemo(() => ({
...createRendererContext(props.featureFlags, props.isTopLevelRenderer),
timeZone: props.timeZone
}), [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
useScrollToBlock(editorRef, props.document, props.scrollToBlock);
try {
var _rendererContext$feat, _props$media;
const schema = getSchema(props.schema, props.adfStage);
const allowTableInPanel = isPanelNestingTableSupported(schema);
const validationOverrides = allowTableInPanel ? {
...props.validationOverrides,
allowTableInPanel: true
} : props.validationOverrides;
const {
result,
stat,
pmDoc
} = renderDocument(props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation, validationOverrides);
if (props.onComplete) {
props.onComplete(stat);
}
const rendererOutput = jsx(RendererContextProvider, {
value: rendererContext
}, jsx(ActiveHeaderIdProvider, {
value: getActiveHeadingId(props.allowHeadingAnchorLinks)
}, jsx(AnalyticsContext.Provider, {
// eslint-disable-next-line @atlassian/perf-linting/no-inline-context-value, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
value: {
fireAnalyticsEvent: event => fireAnalyticsEvent(event)
}
}, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
value: providerFactory
}, jsx(RendererWrapper, {
allowAnnotations: props.allowAnnotations,
appearance: props.appearance,
contentMode: props.contentMode || 'standard',
allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
allowColumnSorting: props.allowColumnSorting,
allowCopyToClipboard: props.allowCopyToClipboard,
allowWrapCodeBlock: props.allowWrapCodeBlock,
allowCustomPanels: props.allowCustomPanels,
allowPlaceholderText: props.allowPlaceholderText,
useBlockRenderForCodeBlock: (_rendererContext$feat = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat !== void 0 ? _rendererContext$feat : true,
addTelepointer: props.addTelepointer,
innerRef: editorRef
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
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: rendererContext.isTopLevelRenderer,
shouldRemoveEmptySpaceAroundContent: props.shouldRemoveEmptySpaceAroundContent,
allowRendererContainerStyles: props.allowRendererContainerStyles
}, props.enableSsrInlineScripts || props.noOpSSRInlineScript ? jsx(BreakoutSSRInlineScript, {
noOpSSRInlineScript: Boolean(props.noOpSSRInlineScript)
}) : null, jsx(RendererActionsInternalUpdater, {
doc: pmDoc,
schema: schema,
onAnalyticsEvent: fireAnalyticsEvent
}, result)))))));
const rendererResult = props.truncated ? jsx(TruncatedWrapper, {
height: props.maxHeight,
fadeHeight: props.fadeOutHeight
}, rendererOutput) : rendererOutput;
return jsx(Fragment, null, rendererResult);
} catch (e) {
var _rendererContext$feat2;
if (props.onError) {
props.onError(e);
}
return jsx(RendererWrapper, {
allowAnnotations: props.allowAnnotations,
appearance: props.appearance,
contentMode: props.contentMode || 'standard',
allowCopyToClipboard: props.allowCopyToClipboard,
allowWrapCodeBlock: props.allowWrapCodeBlock,
allowPlaceholderText: props.allowPlaceholderText,
allowColumnSorting: props.allowColumnSorting,
allowNestedHeaderLinks: isNestedHeaderLinksEnabled(props.allowHeadingAnchorLinks),
useBlockRenderForCodeBlock: (_rendererContext$feat2 = rendererContext.featureFlags.useBlockRenderForCodeBlock) !== null && _rendererContext$feat2 !== void 0 ? _rendererContext$feat2 : true,
addTelepointer: props.addTelepointer
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: event => handleWrapperOnClick(event, props, mouseDownSelection),
isTopLevelRenderer: rendererContext.isTopLevelRenderer,
allowRendererContainerStyles: props.allowRendererContainerStyles
}, jsx(UnsupportedBlock, null));
}
};
const RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
const RendererFunctionalComponentWithPortalContext = /*#__PURE__*/React.memo(props => {
// If nodeComponents are provided, we don't remove portal from props and use context instead,
// because we can't guarantee compatibility with existing Atlaskit Renderer consumers.
if (props.nodeComponents) {
return /*#__PURE__*/React.createElement(RendererFunctionalComponentMemoized, props);
}
const {
portal,
...propsWithoutPortal
} = props;
return jsx(PortalContext.Provider, {
value: portal
}, /*#__PURE__*/React.createElement(RendererFunctionalComponent, propsWithoutPortal));
});
/**
* Top-level ADF renderer: renders document content with analytics and validation context.
* @param props Renderer configuration and document tree.
*/
export function Renderer(props) {
var _props$isTopLevelRend;
const {
startPos
} = React.useContext(AnnotationsPositionContext);
const {
isTopLevelRenderer
} = useRendererContext();
const {
skipValidation,
allowNestedTables
} = useContext(ValidationContext) || {};
const validationOverrides = useMemo(() => ({
allowNestedTables
}), [allowNestedTables]);
return jsx(RendererFunctionalComponentWithPortalContext
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, props, {
startPos: startPos,
isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
skipValidation: skipValidation,
validationOverrides: validationOverrides
}));
}
// Usage notes:
// Used by Confluence for View page renderer
// For the nested renderers - see RendererWithAnnotationSelection.
export const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
data: {
appearance: getAnalyticsAppearance(props.appearance),
packageName,
packageVersion,
componentName: 'renderer',
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
editorSessionId: uuid()
}
}, jsx(WithCreateAnalyticsEvent
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
render: createAnalyticsEvent => {
// `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
return jsx(ErrorBoundary, {
component: ACTION_SUBJECT.RENDERER,
rethrowError: true,
fallbackComponent: null,
createAnalyticsEvent: createAnalyticsEvent
}, jsx(IntlErrorBoundary, null, jsx(Renderer
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, props, {
createAnalyticsEvent: createAnalyticsEvent
}))));
}
})));
const RendererWrapper = /*#__PURE__*/React.memo(props => {
const {
allowColumnSorting,
allowNestedHeaderLinks,
innerRef,
appearance,
contentMode,
children,
onClick,
onMouseDown,
useBlockRenderForCodeBlock,
addTelepointer,
ssr,
isInsideOfInlineExtension,
allowTableResizing,
isTopLevelRenderer,
allowRendererContainerStyles
} = props;
const createTelepointer = () => {
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- telepointer span for collaborative presence
const telepointer = document.createElement('span');
telepointer.textContent = '\u200b';
telepointer.id = TELEPOINTER_ID;
return telepointer;
};
const initialUpdate = React.useRef(true);
const {
nestedRendererType
} = useRendererContext();
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) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const renderer = innerRef.current.querySelector('.ak-renderer-document');
if (initialUpdate.current) {
const lastChild = renderer.lastChild;
lastChild && lastChild.appendChild(createTelepointer());
}
const mutateTelepointer = mutations => {
mutations.forEach((mutation, _index) => {
var _mutation$addedNodes$, _mutation$removedNode;
if (initialUpdate.current) {
const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
if (oldTelepointer) {
oldTelepointer.remove();
}
const lastChild = renderer.lastChild;
lastChild && lastChild.appendChild(createTelepointer());
initialUpdate.current = false;
}
if (mutation.type === 'characterData') {
const parentNode = mutation.target.parentElement;
if (parentNode) {
const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
if (oldTelepointer) {
oldTelepointer.remove();
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
parentNode.appendChild(createTelepointer());
}
}
/**
* When streaming ADF content, we may receive mutations where nodes get
* replaced, rather than have characterData updated.
*
* Telepointer changes will also cause a childList mutation, so we manually ignore it.
* Telepointer changes are always a singular node-adds or node-removes.
*/
if (mutation.type === 'childList' && !(mutation.addedNodes.length === 1 && ((_mutation$addedNodes$ = mutation.addedNodes[0]) === null || _mutation$addedNodes$ === void 0 ? void 0 : _mutation$addedNodes$.id) === TELEPOINTER_ID || mutation.removedNodes.length === 1 && ((_mutation$removedNode = mutation.removedNodes[0]) === null || _mutation$removedNode === void 0 ? void 0 : _mutation$removedNode.id) === TELEPOINTER_ID)) {
const lastChild = renderer.lastChild;
if (lastChild) {
/**
* We want to place telepointer inside content (which has data-renderer-start-pos) and
* inside lines in codeblocks (which have data-ds--code--row).
*/
const contentElements = lastChild.querySelectorAll('[data-renderer-start-pos],[data-ds--code--row]');
const lastElement = contentElements[contentElements.length - 1];
const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
if (lastElement) {
oldTelepointer === null || oldTelepointer === void 0 ? void 0 : oldTelepointer.remove();
lastElement === null || lastElement === void 0 ? void 0 : lastElement.appendChild(createTelepointer());
} else {
oldTelepointer === null || oldTelepointer === void 0 ? void 0 : oldTelepointer.remove();
lastChild === null || lastChild === void 0 ? void 0 : lastChild.appendChild(createTelepointer());
}
}
}
});
};
const observer = new MutationObserver(mutateTelepointer);
observer.observe(innerRef.current, {
characterData: true,
attributes: false,
childList: true,
subtree: true
});
return () => observer.disconnect();
}
}, [innerRef, addTelepointer]);
const renderer = jsx(WidthProvider
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop -- legacy renderer wrapper appearance classes
, {
className: `ak-renderer-wrapper is-${appearance}`,
"data-appearance": appearance,
shouldCheckExistingValue: isInsideOfInlineExtension
}, jsx(BaseTheme, {
baseFontSize: getBaseFontSize(appearance, contentMode)
}, jsx(EditorMediaClientProvider, {
ssr: ssr
}, jsx(RendererStyleContainer, {
innerRef: innerRef,
onClick: onClick,
onMouseDown: onMouseDown,
appearance: appearance,
contentMode: contentMode,
allowNestedHeaderLinks: allowNestedHeaderLinks,
allowColumnSorting: !!allowColumnSorting,
useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
allowAnnotations: props.allowAnnotations,
allowTableResizing: allowTableResizing,
allowRendererContainerStyles: allowRendererContainerStyles,
isInsideSyncBlock: nestedRendererType === 'syncedBlock'
}, children))));
// We can only make the wrapper div query container when we have a known width.
// This is also required for SSR to work correctly. As WidthProvider/WithConsumer will not have the correct width during SSR.
//
// allowRendererContainerStyles is not needed for comment container styling as container should always be set for comments
if (appearance === 'comment' && isTopLevelRenderer && fg('platform-ssr-table-resize')) {
return jsx("div", {
css: setAsQueryContainerStyles
}, renderer);
}
// We are setting this wrapper div as query container conditionally.
// Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
// Otherwise when appearance is unspecified the renderer size is decided by the content.
// In this case we can't set the container-type = inline-size as it will collapse width to 0.
return (appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max') &&
// In case of having excerpt-include on page there are multiple renderers nested.
// Make sure only the root renderer is set to be query container.
isTopLevelRenderer && allowRendererContainerStyles && fg('platform-ssr-table-resize') ? jsx("div", {
css: setAsQueryContainerStyles
}, renderer) : renderer;
});
const RootRendererContext = /*#__PURE__*/React.createContext(null);
function RendererActionsInternalUpdater({
children,
doc,
schema,
onAnalyticsEvent
}) {
const rootRendererContextValue = React.useContext(RootRendererContext);
const actions = useContext(ActionsContext);
const rendererRef = useRef(null);
// This doc is used by the renderer actions when applying comments to the document.
// (via hand crafted steps based on non prosemirror based position calculations)
// It is set to the root renderer's doc as otherwise the resulting document will
// be incorrect (nested renderers use a fake document which represents a subset
// of the actual document).
let _doc;
if (editorExperiment('comment_on_bodied_extensions', true) && rootRendererContextValue) {
// If rootRendererContextValue is set -- we are inside a nested renderer
// and should always use the doc from the root renderer
_doc = rootRendererContextValue.doc;
} else {
// If rootRendererContextValue is not set -- we are in the root renderer
// and set the doc to the current doc.
_doc = doc;
}
useLayoutEffect(() => {
if (_doc) {
actions._privateRegisterRenderer(rendererRef, _doc, schema, onAnalyticsEvent);
} else {
actions._privateUnregisterRenderer();
}
return () => actions._privateUnregisterRenderer();
}, [actions, schema, _doc, onAnalyticsEvent]);
if (editorExperiment('comment_on_bodied_extensions', true)) {
return (
// eslint-disable-next-line @atlassian/perf-linting/no-inline-context-value, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
jsx(RootRendererContext.Provider, {
value: {
doc: _doc
}
}, children)
);
}
return children;
}
// Usage notes:
// Used by Confluence for nested renderers
// For the View page renderer - see RendererWithAnalytics
const RendererWithAnnotationSelection = props => {
const {
allowAnnotations,
document: adfDocument
} = props;
const localRef = React.useRef(null);
const innerRef = props.innerRef || localRef;
// @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
if (props.appearance === 'max' && !expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && !expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
props.appearance = 'full-width';
}
if (!allowAnnotations) {
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
return jsx(RendererWithAnalytics, _extends({
innerRef: innerRef
}, props));
}
return jsx(RendererActionsContext, null, jsx(AnnotationsWrapper, {
rendererRef: innerRef,
adfDocument: adfDocument,
annotationProvider: props.annotationProvider,
isNestedRender: true
}, jsx(RendererWithAnalytics, _extends({
innerRef: innerRef
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props, {
featureFlags: props.featureFlags
}))));
};
// 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;