@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
157 lines (153 loc) • 7.75 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 { useCallback, useMemo, useRef, Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { jsx } from '@emotion/react';
import isEqual from 'lodash/isEqual';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
import { getAnalyticsAppearance } from '@atlaskit/editor-common/utils/analytics';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import EditorActions from '../actions';
import { useEditorContext } from '../ui/EditorContext';
import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
import measurements from '../utils/performance/measure-enum';
import { name, version } from '../version-wrapper';
import { EditorINPMetrics } from './editor-inp-metrics';
import { EditorInternal } from './editor-internal';
import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import useMemoEditorProps from './hooks/useMemoEditorProps';
import useProviderFactory from './hooks/useProviderFactory';
import sendDurationAnalytics from './utils/sendDurationAnalytics';
/**
* Editor wrapper that deals with the lifecycle logic of the editor
* @param passedProps
* @example
*/
function Editor(passedProps) {
var propsRef = useRef(passedProps);
var props = useMemoEditorProps(passedProps);
useMemo(function () {
propsRef.current = props;
}, [props]);
var editorContext = useEditorContext();
var editorActionsPlaceholderInstance = useMemo(function () {
return new EditorActions();
}, []);
var editorActions = editorContext.editorActions || editorActionsPlaceholderInstance;
var _useAnalyticsEvents = useAnalyticsEvents(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
var handleAnalyticsEvent = useCallback(function (data) {
fireAnalyticsEvent(createAnalyticsEvent)(data);
}, [createAnalyticsEvent]);
var getFeatureFlagsFromRef = useCallback(function () {
var _propsRef$current$col, _propsRef$current$col2;
return _objectSpread(_objectSpread({}, createFeatureFlagsFromProps(propsRef.current.featureFlags)), {}, {
useNativeCollabPlugin: Boolean(typeof ((_propsRef$current$col = propsRef.current.collabEdit) === null || _propsRef$current$col === void 0 ? void 0 : _propsRef$current$col.useNativePlugin) === 'boolean' ? !!((_propsRef$current$col2 = propsRef.current.collabEdit) !== null && _propsRef$current$col2 !== void 0 && _propsRef$current$col2.useNativePlugin) : false)
});
}, []);
var onEditorCreated = useCallback(function (instance) {
var _propsRef$current = propsRef.current,
contextIdentifierProvider = _propsRef$current.contextIdentifierProvider,
onEditorReady = _propsRef$current.onEditorReady,
featureFlags = _propsRef$current.featureFlags;
editorActions._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, getFeatureFlagsFromRef);
if (onEditorReady) {
startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
onEditorReady(editorActions);
stopMeasure(measurements.ON_EDITOR_READY_CALLBACK, sendDurationAnalytics(ACTION.ON_EDITOR_READY_CALLBACK, {
contextIdentifierProvider: contextIdentifierProvider,
featureFlags: featureFlags
}, createAnalyticsEvent));
}
}, [editorActions, createAnalyticsEvent, getFeatureFlagsFromRef, propsRef]);
var onEditorDestroyed = useCallback(function (_instance) {
var onDestroy = propsRef.current.onDestroy;
editorActions._privateUnregisterEditor();
if (onDestroy) {
onDestroy();
}
}, [editorActions, propsRef]);
useMeasureEditorMountTime(props, createAnalyticsEvent);
var providerFactory = useProviderFactory(props, editorActions, createAnalyticsEvent);
var onSaveFromProps = props.onSave;
var handleSave = useCallback(function (view) {
if (onSaveFromProps) {
onSaveFromProps(view);
}
}, [onSaveFromProps]);
var isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width'].concat(_toConsumableArray(editorExperiment('platform_synced_block', true) ? ['max'] : [])).includes(props.appearance));
return jsx(Fragment, null, isFullPageAppearance ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
props: props,
handleAnalyticsEvent: handleAnalyticsEvent,
createAnalyticsEvent: createAnalyticsEvent,
preset: props.preset,
handleSave: handleSave,
editorActions: editorActions,
onEditorCreated: onEditorCreated,
onEditorDestroyed: onEditorDestroyed,
providerFactory: providerFactory,
AppearanceComponent: props.AppearanceComponent
}));
}
var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
var ffRef = useRef(featureFlags);
if (!isEqual(ffRef.current, featureFlags)) {
ffRef.current = featureFlags;
}
return ffRef.current;
};
/**
*
* @param props
* @example
*/
export function CoreEditor(props) {
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var editorSessionId = useRef(uuid());
var data = useMemo(function () {
return {
packageName: name,
packageVersion: version,
componentName: 'editorCore',
appearance: getAnalyticsAppearance(props.appearance),
editorSessionId: editorSessionId.current
};
}, [props.appearance]);
var memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
return jsx(FabricEditorAnalyticsContext
// @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
, {
data: data
}, jsx(Editor
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, props, {
featureFlags: memodEditorFeatureFlags
})));
}
// eslint-disable-next-line @typescript-eslint/no-namespace
CoreEditor.propTypes = {
minHeight: function minHeight(_ref) {
var appearance = _ref.appearance,
_minHeight = _ref.minHeight;
if (_minHeight && appearance && !['comment', 'chromeless'].includes(appearance)) {
return new Error('minHeight only supports editor appearance chromeless and comment for Editor');
}
return null;
}
};
export default CoreEditor;