@atlaskit/renderer
Version:
Renderer component
841 lines (817 loc) • 42.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["portal"];
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) { _defineProperty(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; }
/**
* @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 var NORMAL_SEVERITY_THRESHOLD = 2000;
export var 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
var TABLE_INFO_TIMEOUT = 10000;
var RENDER_EVENT_SAMPLE_RATE = 0.2;
var packageName = "@atlaskit/renderer";
var packageVersion = "132.0.1";
var setAsQueryContainerStyles = css({
containerName: 'ak-renderer-wrapper',
containerType: 'inline-size'
});
var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
var _parentElement, _parentElement2;
var browser = getBrowserInfo();
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;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = event.target;
var tableCell = target.closest('td,th');
var clickedInCell = Boolean(tableCell);
if (!clickedInCell) {
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var anchorInCell = tableCell.contains(anchorNode);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
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 ? // 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
*/
var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDownSelection) {
var _props$eventHandlers;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
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;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
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);
}
};
export var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
var createAnalyticsEvent = props.createAnalyticsEvent;
var mouseDownSelection = useRef(undefined);
var providerFactory = useMemo(function () {
return props.dataProviders || new ProviderFactory();
}, [props.dataProviders]);
var _useRendererContext = useRendererContext(),
nestedRendererType = _useRendererContext.nestedRendererType;
var createRendererContext = useMemo(function () {
return function (featureFlags, isTopLevelRenderer) {
var 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
};
};
}, [nestedRendererType]);
var fireAnalyticsEventOld = useCallback(function (event) {
var createAnalyticsEvent = props.createAnalyticsEvent;
if (createAnalyticsEvent) {
var channel = FabricChannel.editor;
createAnalyticsEvent(event).fire(channel);
}
}, [props]);
var fireAnalyticsEventNew = useCallback(function (event) {
if (createAnalyticsEvent) {
var channel = FabricChannel.editor;
createAnalyticsEvent(event).fire(channel);
}
}, [createAnalyticsEvent]);
var _fireAnalyticsEvent = editorExperiment('platform_renderer_fix_analytics_memo_callback', true, {
exposure: true
}) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
var deriveSerializerProps = useCallback(function (props) {
var _props$startPos;
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 = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
providers: providerFactory,
eventHandlers: props.eventHandlers,
extensionHandlers: props.extensionHandlers,
portal: props.portal,
objectContext: _objectSpread(_objectSpread({
adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,
schema: props.schema
}, props.rendererContext), {}, {
nestedRendererType: 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: 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]);
var serializer = useMemoFromPropsDerivative(function (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);
var localRef = useRef(null);
var editorRef = props.innerRef || localRef;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
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) {
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- anchor navigation uses document.getElementById for hash targets
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 heightWidthAnalyticsSetTimeoutID;
var heightWidthAnalyticsRicID;
var heightWidthAnalyticsRafID;
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 _analyticsEventSeveri, _analyticsEventSeveri2;
var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
var 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;
var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
if (!isTTRTrackingExplicitlyDisabled) {
var event = {
action: ACTION.RENDERED,
actionSubject: ACTION_SUBJECT.RENDERER,
attributes: {
platform: PLATFORM.WEB,
duration: 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: severity
},
eventType: EVENT_TYPE.OPERATIONAL
};
_fireAnalyticsEvent(event);
if (expValEquals('platform_editor_sample_renderer_rendered_event', 'isEnabled', true) && Math.random() < RENDER_EVENT_SAMPLE_RATE) {
_fireAnalyticsEvent(_objectSpread(_objectSpread({}, 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(function () {
var requestIdleCallbackFn = function requestIdleCallbackFn() {
var _props$innerRef;
var renderer = (_props$innerRef = props.innerRef) === null || _props$innerRef === void 0 || (_props$innerRef = _props$innerRef.current) === null || _props$innerRef === void 0 ? void 0 : _props$innerRef.querySelector('.ak-renderer-document');
if (renderer) {
var payload = getWidthInfoPayload(renderer);
if (payload) {
_fireAnalyticsEvent(payload);
}
if (fg('platform_editor_table_height_analytics_event')) {
var 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 function () {
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
}, []);
var rendererContext = useMemo(function () {
return _objectSpread(_objectSpread({}, 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;
var schema = getSchema(props.schema, props.adfStage);
var allowTableInPanel = isPanelNestingTableSupported(schema);
var validationOverrides = allowTableInPanel ? _objectSpread(_objectSpread({}, props.validationOverrides), {}, {
allowTableInPanel: true
}) : props.validationOverrides;
var _renderDocument = 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),
result = _renderDocument.result,
stat = _renderDocument.stat,
pmDoc = _renderDocument.pmDoc;
if (props.onComplete) {
props.onComplete(stat);
}
var 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: function fireAnalyticsEvent(event) {
return _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: 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: 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)))))));
var 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: function onClick(event) {
return handleWrapperOnClick(event, props, mouseDownSelection);
},
isTopLevelRenderer: rendererContext.isTopLevelRenderer,
allowRendererContainerStyles: props.allowRendererContainerStyles
}, jsx(UnsupportedBlock, null));
}
};
var RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
var RendererFunctionalComponentWithPortalContext = /*#__PURE__*/React.memo(function (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);
}
var portal = props.portal,
propsWithoutPortal = _objectWithoutProperties(props, _excluded);
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;
var _React$useContext = React.useContext(AnnotationsPositionContext),
startPos = _React$useContext.startPos;
var _useRendererContext2 = useRendererContext(),
isTopLevelRenderer = _useRendererContext2.isTopLevelRenderer;
var _ref = useContext(ValidationContext) || {},
skipValidation = _ref.skipValidation,
allowNestedTables = _ref.allowNestedTables;
var validationOverrides = useMemo(function () {
return {
allowNestedTables: 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 var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
return 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: packageName,
packageVersion: 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: function 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
}))));
}
}));
});
var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
var allowColumnSorting = props.allowColumnSorting,
allowNestedHeaderLinks = props.allowNestedHeaderLinks,
innerRef = props.innerRef,
appearance = props.appearance,
contentMode = props.contentMode,
children = props.children,
onClick = props.onClick,
onMouseDown = props.onMouseDown,
useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
addTelepointer = props.addTelepointer,
ssr = props.ssr,
isInsideOfInlineExtension = props.isInsideOfInlineExtension,
allowTableResizing = props.allowTableResizing,
isTopLevelRenderer = props.isTopLevelRenderer,
allowRendererContainerStyles = props.allowRendererContainerStyles;
var createTelepointer = function createTelepointer() {
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- telepointer span for collaborative presence
var telepointer = document.createElement('span');
telepointer.textContent = "\u200B";
telepointer.id = TELEPOINTER_ID;
return telepointer;
};
var initialUpdate = React.useRef(true);
var _useRendererContext3 = useRendererContext(),
nestedRendererType = _useRendererContext3.nestedRendererType;
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) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var _renderer = innerRef.current.querySelector('.ak-renderer-document');
if (initialUpdate.current) {
var lastChild = _renderer.lastChild;
lastChild && lastChild.appendChild(createTelepointer());
}
var mutateTelepointer = function mutateTelepointer(mutations) {
mutations.forEach(function (mutation, _index) {
var _mutation$addedNodes$, _mutation$removedNode;
if (initialUpdate.current) {
var oldTelepointer = _renderer.querySelector("#".concat(TELEPOINTER_ID));
if (oldTelepointer) {
oldTelepointer.remove();
}
var _lastChild = _renderer.lastChild;
_lastChild && _lastChild.appendChild(createTelepointer());
initialUpdate.current = false;
}
if (mutation.type === 'characterData') {
var parentNode = mutation.target.parentElement;
if (parentNode) {
var _oldTelepointer = _renderer.querySelector("#".concat(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)) {
var _lastChild2 = _renderer.lastChild;
if (_lastChild2) {
/**
* We want to place telepointer inside content (which has data-renderer-start-pos) and
* inside lines in codeblocks (which have data-ds--code--row).
*/
var contentElements = _lastChild2.querySelectorAll('[data-renderer-start-pos],[data-ds--code--row]');
var lastElement = contentElements[contentElements.length - 1];
var _oldTelepointer2 = _renderer.querySelector("#".concat(TELEPOINTER_ID));
if (lastElement) {
_oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
lastElement === null || lastElement === void 0 || lastElement.appendChild(createTelepointer());
} else {
_oldTelepointer2 === null || _oldTelepointer2 === void 0 || _oldTelepointer2.remove();
_lastChild2 === null || _lastChild2 === void 0 || _lastChild2.appendChild(createTelepointer());
}
}
}
});
};
var observer = new MutationObserver(mutateTelepointer);
observer.observe(innerRef.current, {
characterData: true,
attributes: false,
childList: true,
subtree: true
});
return function () {
return observer.disconnect();
};
}
}, [innerRef, addTelepointer]);
var 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-".concat(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;
});
var RootRendererContext = /*#__PURE__*/React.createContext(null);
function RendererActionsInternalUpdater(_ref2) {
var children = _ref2.children,
doc = _ref2.doc,
schema = _ref2.schema,
onAnalyticsEvent = _ref2.onAnalyticsEvent;
var rootRendererContextValue = React.useContext(RootRendererContext);
var actions = useContext(ActionsContext);
var 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).
var _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(function () {
if (_doc) {
actions._privateRegisterRenderer(rendererRef, _doc, schema, onAnalyticsEvent);
} else {
actions._privateUnregisterRenderer();
}
return function () {
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
var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(props) {
var allowAnnotations = props.allowAnnotations,
adfDocument = props.document;
var localRef = React.useRef(null);
var 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;