@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
140 lines (138 loc) • 6.47 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { Fragment, memo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
import { usePortalProvider } from '@atlaskit/editor-common/portal';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import ErrorBoundary from '../create-editor/ErrorBoundary';
import ReactEditorViewNext from '../create-editor/ReactEditorView';
import EditorContext from '../ui/EditorContext';
import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
import { RenderTracking } from '../utils/performance/components/RenderTracking';
import { BaseThemeWrapper } from './BaseThemeWrapper';
import { getBaseFontSize } from './utils/getBaseFontSize';
const editorContainerStyles = css({
position: 'relative',
width: '100%',
height: '100%'
});
const DEFAULT_VALUE_PROP_TO_IGNORE = ['defaultValue'];
/**
* EditorInternalComponent is used to capture the common component
* from the `render` method of `Editor` and share it with `EditorNext`.
*/
export const EditorInternal = /*#__PURE__*/memo(({
props,
handleAnalyticsEvent,
createAnalyticsEvent,
handleSave,
editorActions,
providerFactory,
onEditorCreated,
onEditorDestroyed,
preset,
AppearanceComponent
}) => {
const overriddenEditorProps = {
...props,
onSave: props.onSave ? handleSave : undefined,
// noop all analytic events, even if a handler is still passed.
analyticsHandler: undefined
};
const featureFlags = createFeatureFlagsFromProps(props.featureFlags);
// Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
// Also firing too many events for the legacy content macro, so disabling for now. See - https://product-fabric.atlassian.net/browse/ED-26650
const renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira') && !featureFlags.lcmPreventRenderTracking;
const useShallow = false;
const [portalProviderAPI, PortalRenderer] = usePortalProvider();
const [nodeViewPortalProviderAPI, NodeViewPortalRenderer] = usePortalProvider();
const propsToIgnore = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? DEFAULT_VALUE_PROP_TO_IGNORE : ['defaultValue'];
return jsx(Fragment, null, renderTrackingEnabled && jsx(RenderTracking, {
componentProps: props,
action: ACTION.RE_RENDERED,
actionSubject: ACTION_SUBJECT.EDITOR,
handleAnalyticsEvent: handleAnalyticsEvent,
propsToIgnore: propsToIgnore,
useShallow: useShallow
}), jsx(ErrorBoundary, {
errorTracking: true,
createAnalyticsEvent: createAnalyticsEvent,
contextIdentifierProvider: props.contextIdentifierProvider,
featureFlags: featureFlags
}, jsx("div", {
css: editorContainerStyles
}, jsx(EditorContext, {
editorActions: editorActions
}, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewNext, {
editorProps: overriddenEditorProps,
createAnalyticsEvent: createAnalyticsEvent,
portalProviderAPI: portalProviderAPI,
nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
providerFactory: providerFactory,
onEditorCreated: onEditorCreated,
onEditorDestroyed: onEditorDestroyed,
disabled: props.disabled,
preset: preset
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017: this callback closes over the full props object and derived featureFlags; memoization is ineffective because ReactEditorViewNext is not memo()'d and deps (props, featureFlags) change every render
,
render: ({
editor,
view,
eventDispatcher,
config,
dispatchAnalyticsEvent,
editorRef,
editorAPI
}) => {
var _props$featureFlags, _props$featureFlags2;
return jsx(BaseThemeWrapper, {
baseFontSize: getBaseFontSize(props.appearance, props.contentMode)
}, jsx(AppearanceComponent, {
innerRef: editorRef,
editorAPI: editorAPI
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
appearance: props.appearance,
disabled: props.disabled,
editorActions: editorActions,
editorDOMElement: editor,
editorView: view,
providerFactory: providerFactory,
eventDispatcher: eventDispatcher,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
maxHeight: props.maxHeight,
minHeight: props.minHeight,
onSave: props.onSave ? handleSave : undefined,
onCancel: props.onCancel,
onSSRMeasure: props.onSSRMeasure,
popupsMountPoint: props.popupsMountPoint,
popupsBoundariesElement: props.popupsBoundariesElement,
popupsScrollableElement: props.popupsScrollableElement,
contentComponents: config.contentComponents,
contentMode: props.contentMode,
primaryToolbarComponents: config.primaryToolbarComponents,
primaryToolbarIconBefore: props.primaryToolbarIconBefore,
secondaryToolbarComponents: config.secondaryToolbarComponents,
customContentComponents: props.contentComponents,
customPrimaryToolbarComponents: props.primaryToolbarComponents,
customSecondaryToolbarComponents: props.secondaryToolbarComponents,
contextPanel: props.contextPanel,
collabEdit: props.collabEdit,
persistScrollGutter: props.persistScrollGutter,
enableToolbarMinWidth: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
useStickyToolbar: props.useStickyToolbar,
featureFlags: featureFlags,
pluginHooks: config.pluginHooks,
__livePage: props.__livePage,
preset: preset
}));
}
}), jsx(PortalRenderer, null), jsx(NodeViewPortalRenderer, null)))))));
});