@atlaskit/editor-core 201.1.4 → 201.1.6

package/dist/esm/create-editor/ReactEditorView/useDispatchTransaction.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { findChangedNodesFromTransaction } from '../../utils/findChangedNodesFromTransaction';
+import { freezeUnsafeTransactionProperties } from '../../utils/performance/safer-transactions';
+import { EVENT_NAME_ON_CHANGE } from '../../utils/performance/track-transactions';
+import { validateNodes, validNode } from '../../utils/validateNodes';
+export var useDispatchTransaction = function useDispatchTransaction(_ref) {
+  var onChange = _ref.onChange,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    onEditorViewUpdated = _ref.onEditorViewUpdated;
+  // We need to have a ref to the latest `onChange` since the `dispatchTransaction` gets captured
+  var onChangeRef = useRef(onChange);
+  useEffect(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  var dispatchTransaction = useCallback(function (view, unsafeTransaction) {
+    if (!view) {
+      return;
+    }
+    var nodes = findChangedNodesFromTransaction(unsafeTransaction);
+    var changedNodesValid = validateNodes(nodes);
+    var transaction = new Proxy(unsafeTransaction, freezeUnsafeTransactionProperties({
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginKey: 'unknown-reacteditorview'
+    }));
+    if (changedNodesValid) {
+      var oldEditorState = view.state;
+
+      // go ahead and update the state now we know the transaction is good
+      var _view$state$applyTran = view.state.applyTransaction(transaction),
+        newEditorState = _view$state$applyTran.state,
+        transactions = _view$state$applyTran.transactions;
+      if (newEditorState === oldEditorState) {
+        return;
+      }
+      view.updateState(newEditorState);
+      onEditorViewUpdated({
+        originalTransaction: transaction,
+        transactions: transactions,
+        oldEditorState: oldEditorState,
+        newEditorState: newEditorState
+      });
+      if (onChangeRef.current && transaction.docChanged) {
+        var source = transaction.getMeta('isRemote') ? 'remote' : 'local';
+        startMeasure(EVENT_NAME_ON_CHANGE);
+        onChangeRef.current(view, {
+          source: source
+        });
+        stopMeasure(EVENT_NAME_ON_CHANGE, function (duration, startTime) {
+          dispatchAnalyticsEvent({
+            action: ACTION.ON_CHANGE_CALLBACK,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration: duration,
+              startTime: startTime
+            }
+          });
+        });
+      }
+      return newEditorState;
+    } else {
+      var invalidNodes = nodes.filter(function (node) {
+        return !validNode(node);
+      }).map(function (node) {
+        return getDocStructure(node, {
+          compact: true
+        });
+      });
+      dispatchAnalyticsEvent({
+        action: ACTION.DISPATCHED_INVALID_TRANSACTION,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
+          invalidNodes: invalidNodes
+        }
+      });
+    }
+  }, [dispatchAnalyticsEvent, onEditorViewUpdated]);
+  return dispatchTransaction;
+};

package/dist/esm/create-editor/ReactEditorView/useFireFullWidthEvent.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { formatFullWidthAppearance } from './formatFullWidthAppearance';
+export var useFireFullWidthEvent = function useFireFullWidthEvent(appearance, dispatchAnalyticsEvent) {
+  var previousAppearance = usePreviousState(appearance);
+  useEffect(function () {
+    if (appearance !== previousAppearance) {
+      if (appearance === 'full-width' || previousAppearance === 'full-width') {
+        dispatchAnalyticsEvent({
+          action: ACTION.CHANGED_FULL_WIDTH_MODE,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            previousMode: formatFullWidthAppearance(previousAppearance),
+            newMode: formatFullWidthAppearance(appearance)
+          }
+        });
+      }
+    }
+  }, [appearance, previousAppearance, dispatchAnalyticsEvent]);
+};

package/dist/esm/create-editor/ReactEditorView/usePluginPerformanceObserver.js

@@ -0,0 +1,42 @@
+import { useCallback, useLayoutEffect, useMemo } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { countNodes } from '@atlaskit/editor-common/count-nodes';
+import { PluginPerformanceObserver } from '../../utils/performance/plugin-performance-observer';
+export var usePluginPerformanceObserver = function usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
+  var onPluginObservation = useCallback(function (report) {
+    var _pluginInjectionAPI$c;
+    dispatchAnalyticsEvent({
+      action: ACTION.TRANSACTION_DISPATCHED,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        report: report,
+        participants: ((_pluginInjectionAPI$c = pluginInjectionAPI.current) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.api().collabEdit) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.sharedState.currentState()) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.participants) === null || _pluginInjectionAPI$c === void 0 ? void 0 : _pluginInjectionAPI$c.size()) || 1
+      }
+    });
+  }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
+  var getPluginNames = useCallback(function () {
+    var _editorState$current;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (_editorState$current = editorState.current) === null || _editorState$current === void 0 ? void 0 : _editorState$current.plugins.map(function (p) {
+      return p.key;
+    });
+  }, [editorState]);
+  var pluginPerformanceObserver = useMemo(function () {
+    return new PluginPerformanceObserver(function (report) {
+      return onPluginObservation(report);
+    }).withPlugins(function () {
+      return getPluginNames();
+    }).withNodeCounts(function () {
+      return editorState.current ? countNodes(editorState.current) : {
+        nodeCount: {},
+        extensionNodeCount: {}
+      };
+    });
+  }, [onPluginObservation, getPluginNames, editorState]);
+  useLayoutEffect(function () {
+    return function () {
+      pluginPerformanceObserver.disconnect();
+    };
+  }, [pluginPerformanceObserver]);
+};

package/dist/esm/create-editor/ReactEditorViewNext.js

@@ -0,0 +1,528 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import uuid from 'uuid/v4';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, PLATFORMS } from '@atlaskit/editor-common/analytics';
+import { useConstructor, usePreviousState } from '@atlaskit/editor-common/hooks';
+import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
+import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
+import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
+import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
+import { processRawValue, processRawValueWithoutTransformation } from '@atlaskit/editor-common/process-raw-value';
+import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
+import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useProviders } from '../composable-editor/hooks/useProviders';
+import { createDispatch, EventDispatcher } from '../event-dispatcher';
+import { getNodesCount } from '../utils/getNodesCount';
+import { isFullPage } from '../utils/is-full-page';
+import { RenderTracking } from '../utils/performance/components/RenderTracking';
+import measurements from '../utils/performance/measure-enum';
+import { PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD } from './consts';
+import { createErrorReporter, createPMPlugins, processPluginsList } from './create-editor';
+import createPluginsList from './create-plugins-list';
+import { createSchema } from './create-schema';
+import { createFeatureFlagsFromProps } from './feature-flags-from-props';
+import { editorMessages } from './messages';
+import { getUAPrefix } from './ReactEditorView/getUAPrefix';
+import { handleEditorFocus } from './ReactEditorView/handleEditorFocus';
+import { useDispatchTransaction } from './ReactEditorView/useDispatchTransaction';
+import { useFireFullWidthEvent } from './ReactEditorView/useFireFullWidthEvent';
+import { usePluginPerformanceObserver } from './ReactEditorView/usePluginPerformanceObserver';
+import ReactEditorViewContext from './ReactEditorViewContext';
+var EDIT_AREA_ID = 'ak-editor-textarea';
+function ReactEditorView(props) {
+  var _media, _linking, _props$render, _props$render2;
+  var preset = props.preset,
+    _props$editorProps = props.editorProps,
+    nextAppearance = _props$editorProps.appearance,
+    disabled = _props$editorProps.disabled;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorAPI = _useState2[0],
+    setEditorAPI = _useState2[1];
+  var editorRef = useRef(null);
+  var viewRef = useRef();
+  var focusTimeoutId = useRef();
+  // ProseMirror is instantiated prior to the initial React render cycle,
+  // so we allow transactions by default, to avoid discarding the initial one.
+  var canDispatchTransactions = useRef(true);
+  var editorId = useRef(uuid());
+  var eventDispatcher = useMemo(function () {
+    return new EventDispatcher();
+  }, []);
+  var config = useRef({
+    nodes: [],
+    marks: [],
+    pmPlugins: [],
+    contentComponents: [],
+    pluginHooks: [],
+    primaryToolbarComponents: [],
+    secondaryToolbarComponents: [],
+    onEditorViewStateUpdatedCallbacks: []
+  });
+  var contentTransformer = useRef(undefined);
+  var featureFlags = useRef(createFeatureFlagsFromProps(props.editorProps));
+  var getEditorState = useCallback(function () {
+    var _viewRef$current;
+    return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
+  }, []);
+  var getEditorView = useCallback(function () {
+    return viewRef.current;
+  }, []);
+  var dispatch = useMemo(function () {
+    return createDispatch(eventDispatcher);
+  }, [eventDispatcher]);
+  var errorReporter = useRef(createErrorReporter(props.editorProps.errorReporterHandler));
+  var handleAnalyticsEvent = useCallback(function (payload) {
+    fireAnalyticsEvent(props.createAnalyticsEvent)(payload);
+  }, [props.createAnalyticsEvent]);
+  var dispatchAnalyticsEvent = useCallback(function (payload) {
+    var dispatch = createDispatch(eventDispatcher);
+    dispatch(analyticsEventKey, {
+      payload: payload
+    });
+  }, [eventDispatcher]);
+  var pluginInjectionAPI = useRef(new EditorPluginInjectionAPI({
+    getEditorState: getEditorState,
+    getEditorView: getEditorView
+  }));
+  useLayoutEffect(function () {
+    setEditorAPI(pluginInjectionAPI.current.api());
+  }, []);
+  var blur = useCallback(function () {
+    if (!viewRef.current) {
+      return;
+    }
+    if (viewRef.current.dom instanceof HTMLElement && viewRef.current.hasFocus()) {
+      viewRef.current.dom.blur();
+    }
+
+    // The selectionToDOM method uses the document selection to determine currently selected node
+    // We need to mimic blurring this as it seems doing the above is not enough.
+    // @ts-expect-error
+    var sel = viewRef.current.root.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, []);
+  var createEditorState = useCallback(function (options) {
+    var _api$editorViewMode;
+    var schema;
+    if (viewRef.current) {
+      if (options.resetting) {
+        /**
+         * ReactEditorView currently does NOT handle dynamic schema,
+         * We are reusing the existing schema, and rely on #reconfigureState
+         * to update `this.config`
+         */
+        schema = viewRef.current.state.schema;
+      } else {
+        /**
+         * There's presently a number of issues with changing the schema of a
+         * editor inflight. A significant issue is that we lose the ability
+         * to keep track of a user's history as the internal plugin state
+         * keeps a list of Steps to undo/redo (which are tied to the schema).
+         * Without a good way to do work around this, we prevent this for now.
+         */
+        // eslint-disable-next-line no-console
+        console.warn('The editor does not support changing the schema dynamically.');
+        return viewRef.current.state;
+      }
+    } else {
+      config.current = processPluginsList(createPluginsList(options.props.preset, props.editorProps, pluginInjectionAPI.current));
+      schema = createSchema(config.current);
+    }
+    var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
+    var plugins = createPMPlugins({
+      schema: schema,
+      dispatch: dispatch,
+      errorReporter: errorReporter.current,
+      editorConfig: config.current,
+      eventDispatcher: eventDispatcher,
+      providerFactory: options.props.providerFactory,
+      portalProviderAPI: props.portalProviderAPI,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      featureFlags: featureFlags.current,
+      getIntl: function getIntl() {
+        return props.intl;
+      }
+    });
+    contentTransformer.current = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
+    var api = pluginInjectionAPI.current.api();
+
+    // If we have a doc prop, we need to process it into a PMNode
+    var doc;
+    if (options.doc) {
+      // if the collabEdit API is set, skip this validation due to potential pm validation errors
+      // from docs that end up with invalid marks after processing (See #hot-111702 for more details)
+      if ((api === null || api === void 0 ? void 0 : api.collabEdit) !== undefined && fg('editor_load_conf_collab_docs_without_checks')) {
+        doc = processRawValueWithoutTransformation(schema, options.doc);
+      } else {
+        doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, contentTransformer.current, dispatchAnalyticsEvent);
+      }
+    }
+    var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
+    var selection;
+    if (doc) {
+      if (isViewMode) {
+        var emptySelection = new TextSelection(doc.resolve(0));
+        return EditorState.create({
+          schema: schema,
+          plugins: plugins,
+          doc: doc,
+          selection: emptySelection
+        });
+      } else {
+        selection = options.selectionAtStart ? Selection.atStart(doc) : Selection.atEnd(doc);
+      }
+    }
+    // Workaround for ED-3507: When media node is the last element, scrollIntoView throws an error
+    var patchedSelection = selection ? Selection.findFrom(selection.$head, -1, true) || undefined : undefined;
+    return EditorState.create({
+      schema: schema,
+      plugins: plugins,
+      doc: doc,
+      selection: patchedSelection
+    });
+  }, [props.intl, props.portalProviderAPI, props.editorProps, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  var resetEditorState = useCallback(function (_ref) {
+    var _props$editorProps$on, _props$editorProps2;
+    var doc = _ref.doc,
+      shouldScrollToBottom = _ref.shouldScrollToBottom;
+    if (!viewRef.current) {
+      return;
+    }
+
+    // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+    // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+    // nodes that haven't been re-rendered to the document yet.
+    blur();
+    featureFlags.current = createFeatureFlagsFromProps(props.editorProps);
+    var newEditorState = createEditorState({
+      props: props,
+      doc: doc,
+      resetting: true,
+      selectionAtStart: !shouldScrollToBottom
+    });
+    editorState.current = newEditorState;
+    viewRef.current.updateState(newEditorState);
+    (_props$editorProps$on = (_props$editorProps2 = props.editorProps).onChange) === null || _props$editorProps$on === void 0 || _props$editorProps$on.call(_props$editorProps2, viewRef.current, {
+      source: 'local'
+    });
+  }, [blur, createEditorState, props]);
+
+  // Initialise phase
+  // Using constructor hook so we setup and dispatch analytics before anything else
+  useConstructor(function () {
+    dispatchAnalyticsEvent({
+      action: ACTION.STARTED,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        featureFlags: featureFlags.current ? getEnabledFeatureFlagKeys(featureFlags.current) : []
+      },
+      eventType: EVENT_TYPE.UI
+    });
+    // Transaction dispatching is already enabled by default prior to
+    // mounting, but we reset it here, just in case the editor view
+    // instance is ever recycled (mounted again after unmounting) with
+    // the same key.
+    // Although storing mounted state is an anti-pattern in React,
+    // we do so here so that we can intercept and abort asynchronous
+    // ProseMirror transactions when a dismount is imminent.
+    canDispatchTransactions.current = true;
+    // This needs to be before initialising editorState because
+    // we dispatch analytics events in plugin initialisation
+    eventDispatcher.on(analyticsEventKey, handleAnalyticsEvent);
+    eventDispatcher.on('resetEditorState', resetEditorState);
+  });
+
+  // Cleanup
+  useLayoutEffect(function () {
+    return function () {
+      var focusTimeoutIdCurrent = focusTimeoutId.current;
+      if (focusTimeoutIdCurrent) {
+        clearTimeout(focusTimeoutIdCurrent);
+      }
+      if (viewRef.current) {
+        // Destroy the state if the Editor is being unmounted
+        var _editorState = viewRef.current.state;
+        _editorState.plugins.forEach(function (plugin) {
+          var state = plugin.getState(_editorState);
+          if (state && state.destroy) {
+            state.destroy();
+          }
+        });
+      }
+      eventDispatcher.destroy();
+      // this.view will be destroyed when React unmounts in handleEditorViewRef
+    };
+  }, [eventDispatcher]);
+  var reconfigureState = useCallback(function (props) {
+    if (!viewRef.current) {
+      return;
+    }
+
+    // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+    // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+    // nodes that haven't been re-rendered to the document yet.
+    blur();
+    var editorPlugins = createPluginsList(props.preset, props.editorProps, pluginInjectionAPI.current);
+    config.current = processPluginsList(editorPlugins);
+    var state = editorState.current;
+    var plugins = createPMPlugins({
+      schema: state.schema,
+      dispatch: dispatch,
+      errorReporter: errorReporter.current,
+      editorConfig: config.current,
+      eventDispatcher: eventDispatcher,
+      providerFactory: props.providerFactory,
+      portalProviderAPI: props.portalProviderAPI,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      featureFlags: createFeatureFlagsFromProps(props.editorProps),
+      getIntl: function getIntl() {
+        return props.intl;
+      }
+    });
+    var newState = state.reconfigure({
+      plugins: plugins
+    });
+
+    // need to update the state first so when the view builds the nodeviews it is
+    // using the latest plugins
+    viewRef.current.updateState(newState);
+    return viewRef.current.update(_objectSpread(_objectSpread({}, viewRef.current.props), {}, {
+      state: newState
+    }));
+  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  var onEditorViewUpdated = useCallback(function (_ref2) {
+    var _config$current;
+    var originalTransaction = _ref2.originalTransaction,
+      transactions = _ref2.transactions,
+      oldEditorState = _ref2.oldEditorState,
+      newEditorState = _ref2.newEditorState;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState: newEditorState,
+      oldEditorState: oldEditorState
+    });
+    (_config$current = config.current) === null || _config$current === void 0 || _config$current.onEditorViewStateUpdatedCallbacks.forEach(function (entry) {
+      entry.callback({
+        originalTransaction: originalTransaction,
+        transactions: transactions,
+        oldEditorState: oldEditorState,
+        newEditorState: newEditorState
+      });
+    });
+  }, []);
+  var _dispatchTransaction = useDispatchTransaction({
+    onChange: props.editorProps.onChange,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEditorViewUpdated: onEditorViewUpdated
+  });
+
+  // TODO: Remove these when we deprecate these props from editor-props - smartLinks is unfortunately still used in some places, we can sidestep this problem if we move everyone across to ComposableEditor and deprecate Editor
+  var UNSAFE_cards = props.editorProps.UNSAFE_cards;
+  var smartLinks = props.editorProps.smartLinks;
+
+  // Temporary to replace provider factory while migration to `ComposableEditor` occurs
+  useProviders({
+    editorApi: editorAPI,
+    contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
+    mediaProvider: (_media = props.editorProps.media) === null || _media === void 0 ? void 0 : _media.provider,
+    cardProvider: ((_linking = props.editorProps.linking) === null || _linking === void 0 || (_linking = _linking.smartLinks) === null || _linking === void 0 ? void 0 : _linking.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
+    emojiProvider: props.editorProps.emojiProvider,
+    autoformattingProvider: props.editorProps.autoformattingProvider,
+    taskDecisionProvider: props.editorProps.taskDecisionProvider
+  });
+  var getDirectEditorProps = useCallback(function (state) {
+    return {
+      state: state || editorState.current,
+      dispatchTransaction: function dispatchTransaction(tr) {
+        // Block stale transactions:
+        // Prevent runtime exeptions from async transactions that would attempt to
+        // update the DOM after React has unmounted the Editor.
+        if (canDispatchTransactions.current) {
+          var newState = _dispatchTransaction(viewRef.current, tr);
+          if (newState) {
+            editorState.current = newState;
+          }
+        }
+      },
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      editable: function editable(_state) {
+        return !disabled;
+      },
+      attributes: {
+        'data-gramm': 'false'
+      }
+    };
+  }, [_dispatchTransaction, disabled]);
+  var createEditorView = useCallback(function (node) {
+    measureRender(measurements.PROSEMIRROR_RENDERED, function (_ref3) {
+      var duration = _ref3.duration,
+        startTime = _ref3.startTime,
+        distortedDuration = _ref3.distortedDuration;
+      var proseMirrorRenderedSeverity = getAnalyticsEventSeverity(duration, PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD);
+      if (viewRef.current) {
+        var _pluginInjectionAPI$c;
+        var nodes = getNodesCount(viewRef.current.state.doc);
+        var ttfb = getResponseEndTime();
+        var contextIdentifier = (_pluginInjectionAPI$c = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c === void 0 ? void 0 : _pluginInjectionAPI$c.sharedState.currentState();
+        dispatchAnalyticsEvent({
+          action: ACTION.PROSEMIRROR_RENDERED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          attributes: {
+            duration: duration,
+            startTime: startTime,
+            nodes: nodes,
+            ttfb: ttfb,
+            severity: proseMirrorRenderedSeverity,
+            objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
+            distortedDuration: distortedDuration
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+    });
+
+    // Creates the editor-view from this.editorState. If an editor has been mounted
+    // previously, this will contain the previous state of the editor.
+    var view = new EditorView({
+      mount: node
+    }, getDirectEditorProps());
+    viewRef.current = view;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState: viewRef.current.state,
+      oldEditorState: undefined
+    });
+    return view;
+  }, [getDirectEditorProps, dispatchAnalyticsEvent]);
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _ = _useState4[0],
+    setEditorView = _useState4[1];
+  var onEditorCreated = props.onEditorCreated,
+    onEditorDestroyed = props.onEditorDestroyed,
+    shouldFocus = props.editorProps.shouldFocus;
+  var handleEditorViewRef = useCallback(function (node) {
+    if (!viewRef.current && node) {
+      var view = createEditorView(node);
+      onEditorCreated({
+        view: view,
+        config: config.current,
+        eventDispatcher: eventDispatcher,
+        transformer: contentTransformer.current
+      });
+      if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
+        focusTimeoutId.current = handleEditorFocus(view);
+      }
+
+      // Force React to re-render so consumers get a reference to the editor view
+      setEditorView(view);
+    } else if (viewRef.current && !node) {
+      // When the appearance is changed, React will call handleEditorViewRef with node === null
+      // to destroy the old EditorView, before calling this method again with node === div to
+      // create the new EditorView
+      onEditorDestroyed({
+        view: viewRef.current,
+        config: config.current,
+        eventDispatcher: eventDispatcher,
+        transformer: contentTransformer.current
+      });
+      var wasAnalyticsDisconnected = !eventDispatcher.has(analyticsEventKey, handleAnalyticsEvent);
+      // If we disabled event listening for some reason we should re-enable it temporarily while we destroy
+      // the view for any analytics that occur there.
+      if (wasAnalyticsDisconnected) {
+        eventDispatcher.on(analyticsEventKey, handleAnalyticsEvent);
+        viewRef.current.destroy(); // Destroys the dom node & all node views
+        eventDispatcher.off(analyticsEventKey, handleAnalyticsEvent);
+      } else {
+        viewRef.current.destroy(); // Destroys the dom node & all node views
+      }
+      viewRef.current = undefined;
+    }
+  }, [createEditorView, handleAnalyticsEvent, onEditorDestroyed, onEditorCreated, shouldFocus, eventDispatcher]);
+  var createEditor = useCallback(function (assistiveLabel, assistiveDescribedBy) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: getUAPrefix(),
+      key: "ProseMirror",
+      ref: handleEditorViewRef,
+      "aria-label": assistiveLabel || props.intl.formatMessage(editorMessages.editorAssistiveLabel)
+      // setting aria-multiline to true when not mobile appearance.
+      //  because somehow mobile tests are failing when it set.
+      //  don't know why that is happening.
+      // Created https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-1675
+      //  to investigate further.
+      ,
+      "aria-multiline": true,
+      role: "textbox",
+      id: EDIT_AREA_ID,
+      "aria-describedby": assistiveDescribedBy,
+      "data-editor-id": editorId.current
+    });
+  }, [handleEditorViewRef, props.intl]);
+  var previousPreset = usePreviousState(preset);
+  useLayoutEffect(function () {
+    if (previousPreset && previousPreset !== preset) {
+      reconfigureState(props);
+    }
+  }, [reconfigureState, previousPreset, preset, props]);
+  var previousDisabledState = usePreviousState(disabled);
+  useLayoutEffect(function () {
+    if (viewRef.current && previousDisabledState !== disabled) {
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      viewRef.current.setProps({
+        editable: function editable(_state) {
+          return !disabled;
+        }
+      });
+      if (!disabled && shouldFocus) {
+        focusTimeoutId.current = handleEditorFocus(viewRef.current);
+      }
+    }
+  }, [disabled, shouldFocus, previousDisabledState]);
+  useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);
+  var editorState = useRef(createEditorState({
+    props: props,
+    doc: props.editorProps.defaultValue,
+    // ED-4759: Don't set selection at end for full-page editor - should be at start.
+    selectionAtStart: isFullPage(props.editorProps.appearance)
+  }));
+  usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent);
+  var editor = useMemo(function () {
+    return createEditor(props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy);
+  },
+  // `createEditor` changes a little too frequently - we don't want to recreate the editor view in this case
+  // We should follow-up
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy]);
+  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
+    value: {
+      editorRef: editorRef,
+      editorView: viewRef.current,
+      popupsMountPoint: props.editorProps.popupsMountPoint
+    }
+  }, /*#__PURE__*/React.createElement(RenderTracking, {
+    componentProps: props,
+    action: ACTION.RE_RENDERED,
+    actionSubject: ACTION_SUBJECT.REACT_EDITOR_VIEW,
+    handleAnalyticsEvent: handleAnalyticsEvent,
+    useShallow: true
+  }), props.render ? (_props$render = (_props$render2 = props.render) === null || _props$render2 === void 0 ? void 0 : _props$render2.call(props, {
+    editor: editor,
+    view: viewRef.current,
+    config: config.current,
+    eventDispatcher: eventDispatcher,
+    transformer: contentTransformer.current,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorRef: editorRef,
+    editorAPI: editorAPI
+  })) !== null && _props$render !== void 0 ? _props$render : editor : editor);
+}
+export default injectIntl(ReactEditorView);