@atlaskit/editor-core 201.1.5 → 201.1.7

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);

package/dist/esm/presets/universal.js

@@ -200,7 +200,8 @@ export default function createUniversalPresetInternal(_ref) {
   // @ts-expect-error 2322: Type 'false | PlaceholderTextOptions | undefined'
   props.allowTemplatePlaceholders !== true ? props.allowTemplatePlaceholders : {}], Boolean(props.allowTemplatePlaceholders)).maybeAdd([layoutPlugin, _objectSpread(_objectSpread({}, _typeof(props.allowLayouts) === 'object' ? props.allowLayouts : {}), {}, {
     useLongPressSelection: false,
-    UNSAFE_allowSingleColumnLayout: _typeof(props.allowLayouts) === 'object' ? props.allowLayouts.UNSAFE_allowSingleColumnLayout : undefined
+    UNSAFE_allowSingleColumnLayout: _typeof(props.allowLayouts) === 'object' ? props.allowLayouts.UNSAFE_allowSingleColumnLayout : undefined,
+    editorAppearance: appearance
   })], Boolean(props.allowLayouts)).maybeAdd([cardPlugin, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_cards), props.smartLinks), (_props$linking = props.linking) === null || _props$linking === void 0 ? void 0 : _props$linking.smartLinks), {}, {
     fullWidthMode: appearance === 'full-width',
     linkPicker: (_props$linking2 = props.linking) === null || _props$linking2 === void 0 ? void 0 : _props$linking2.linkPicker,

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "201.1.5";
+export var version = "201.1.7";

package/dist/types/create-editor/ReactEditorView/formatFullWidthAppearance.d.ts

@@ -0,0 +1,3 @@
+import { FULL_WIDTH_MODE } from '@atlaskit/editor-common/analytics';
+import type { EditorAppearance } from '../../types';
+export declare const formatFullWidthAppearance: (appearance: EditorAppearance | undefined) => FULL_WIDTH_MODE;

package/dist/types/create-editor/ReactEditorView/getUAPrefix.d.ts

@@ -0,0 +1 @@
+export declare function getUAPrefix(): "" | "ua-chrome" | "ua-ie" | "ua-firefox" | "ua-safari";

package/dist/types/create-editor/ReactEditorView/handleEditorFocus.d.ts

@@ -0,0 +1,2 @@
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare function handleEditorFocus(view: EditorView): number | undefined;

package/dist/types/create-editor/ReactEditorView/useDispatchTransaction.d.ts

@@ -0,0 +1,12 @@
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorViewStateUpdatedCallbackProps } from '../../types/editor-config';
+import type { EditorOnChangeHandler } from '../../types/editor-onchange';
+type DispatchTransaction = (view: EditorView | undefined, tr: Transaction) => EditorState | undefined;
+export declare const useDispatchTransaction: ({ onChange, dispatchAnalyticsEvent, onEditorViewUpdated, }: {
+    onChange: EditorOnChangeHandler | undefined;
+    dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void;
+    onEditorViewUpdated: (params: EditorViewStateUpdatedCallbackProps) => void;
+}) => DispatchTransaction;
+export {};

package/dist/types/create-editor/ReactEditorView/useFireFullWidthEvent.d.ts

@@ -0,0 +1,3 @@
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { EditorAppearance } from '@atlaskit/editor-common/types';
+export declare const useFireFullWidthEvent: (appearance: EditorAppearance | undefined, dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void) => void;

package/dist/types/create-editor/ReactEditorView/usePluginPerformanceObserver.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import { type EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const usePluginPerformanceObserver: (editorState: React.MutableRefObject<EditorState>, pluginInjectionAPI: React.MutableRefObject<EditorPluginInjectionAPI>, dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void) => void;

package/dist/types/create-editor/ReactEditorViewNext.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { AllEditorPresetPluginTypes, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { PublicPluginAPI, Transformer } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { EventDispatcher } from '../event-dispatcher';
+import type { EditorConfig, EditorProps } from '../types';
+import type { EditorNextProps } from '../types/editor-props';
+export interface EditorViewProps extends WrappedComponentProps {
+    editorProps: (EditorProps | EditorNextProps) & {
+        preset?: EditorNextProps['preset'];
+    };
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    providerFactory: ProviderFactory;
+    portalProviderAPI: PortalProviderAPI;
+    disabled?: boolean;
+    render?: (props: {
+        editor: JSX.Element;
+        view?: EditorView;
+        config: EditorConfig;
+        eventDispatcher: EventDispatcher;
+        transformer?: Transformer<string>;
+        dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+        editorRef: React.RefObject<HTMLDivElement>;
+        editorAPI: PublicPluginAPI<any> | undefined;
+    }) => JSX.Element;
+    onEditorCreated: (instance: {
+        view: EditorView;
+        config: EditorConfig;
+        eventDispatcher: EventDispatcher;
+        transformer?: Transformer<string>;
+    }) => void;
+    onEditorDestroyed: (instance: {
+        view: EditorView;
+        config: EditorConfig;
+        eventDispatcher: EventDispatcher;
+        transformer?: Transformer<string>;
+    }) => void;
+    preset: EditorPresetBuilder<string[], AllEditorPresetPluginTypes[]>;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<EditorViewProps>> & {
+    WrappedComponent: React.ComponentType<EditorViewProps>;
+};
+export default _default;

package/dist/types/create-editor/create-universal-preset.d.ts

@@ -1834,7 +1834,11 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
             sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
         }, import("@atlaskit/editor-common/types").FeatureFlags>>];
         actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
-    }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+    }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+        sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+    }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorDisabled", {
+        sharedState: import("@atlaskit/editor-plugin-editor-disabled").EditorDisabledPluginState;
+    }, undefined>>];
     actions: {
         insertLayoutColumns: (inputMethod: import("@atlaskit/editor-common/types").TOOLBAR_MENU_TYPE, formatMessage?: {
             (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>> | undefined, opts?: import("intl-messageformat").Options | undefined): string;
@@ -4434,7 +4438,9 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
         };
     }, {
         mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
-    } | undefined>>];
+    } | undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorDisabled", {
+        sharedState: import("@atlaskit/editor-plugin-editor-disabled").EditorDisabledPluginState;
+    }, undefined>>];
     sharedState: Partial<import("@atlaskit/editor-plugin-breakout").BreakoutPluginState>;
 }, import("@atlaskit/editor-plugin-breakout").BreakoutPluginOptions | undefined> | undefined, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"batchAttributeUpdates", {
     actions: {