@atlaskit/editor-core 201.1.4 → 201.1.6

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

@@ -0,0 +1,515 @@
+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';
+const EDIT_AREA_ID = 'ak-editor-textarea';
+function ReactEditorView(props) {
+  var _media, _linking, _linking$smartLinks, _props$render, _props$render2;
+  const {
+    preset,
+    editorProps: {
+      appearance: nextAppearance,
+      disabled
+    }
+  } = props;
+  const [editorAPI, setEditorAPI] = useState(undefined);
+  const editorRef = useRef(null);
+  const viewRef = useRef();
+  const focusTimeoutId = useRef();
+  // ProseMirror is instantiated prior to the initial React render cycle,
+  // so we allow transactions by default, to avoid discarding the initial one.
+  const canDispatchTransactions = useRef(true);
+  const editorId = useRef(uuid());
+  const eventDispatcher = useMemo(() => new EventDispatcher(), []);
+  const config = useRef({
+    nodes: [],
+    marks: [],
+    pmPlugins: [],
+    contentComponents: [],
+    pluginHooks: [],
+    primaryToolbarComponents: [],
+    secondaryToolbarComponents: [],
+    onEditorViewStateUpdatedCallbacks: []
+  });
+  const contentTransformer = useRef(undefined);
+  const featureFlags = useRef(createFeatureFlagsFromProps(props.editorProps));
+  const getEditorState = useCallback(() => {
+    var _viewRef$current;
+    return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
+  }, []);
+  const getEditorView = useCallback(() => viewRef.current, []);
+  const dispatch = useMemo(() => createDispatch(eventDispatcher), [eventDispatcher]);
+  const errorReporter = useRef(createErrorReporter(props.editorProps.errorReporterHandler));
+  const handleAnalyticsEvent = useCallback(payload => {
+    fireAnalyticsEvent(props.createAnalyticsEvent)(payload);
+  }, [props.createAnalyticsEvent]);
+  const dispatchAnalyticsEvent = useCallback(payload => {
+    const dispatch = createDispatch(eventDispatcher);
+    dispatch(analyticsEventKey, {
+      payload
+    });
+  }, [eventDispatcher]);
+  const pluginInjectionAPI = useRef(new EditorPluginInjectionAPI({
+    getEditorState: getEditorState,
+    getEditorView: getEditorView
+  }));
+  useLayoutEffect(() => {
+    setEditorAPI(pluginInjectionAPI.current.api());
+  }, []);
+  const blur = useCallback(() => {
+    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
+    const sel = viewRef.current.root.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, []);
+  const createEditorState = useCallback(options => {
+    var _api$editorViewMode;
+    let 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);
+    }
+    const {
+      contentTransformerProvider
+    } = options.props.editorProps;
+    const plugins = createPMPlugins({
+      schema,
+      dispatch: dispatch,
+      errorReporter: errorReporter.current,
+      editorConfig: config.current,
+      eventDispatcher: eventDispatcher,
+      providerFactory: options.props.providerFactory,
+      portalProviderAPI: props.portalProviderAPI,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      featureFlags: featureFlags.current,
+      getIntl: () => props.intl
+    });
+    contentTransformer.current = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
+    const api = pluginInjectionAPI.current.api();
+
+    // If we have a doc prop, we need to process it into a PMNode
+    let 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);
+      }
+    }
+    const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
+    let selection;
+    if (doc) {
+      if (isViewMode) {
+        const emptySelection = new TextSelection(doc.resolve(0));
+        return EditorState.create({
+          schema,
+          plugins: plugins,
+          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
+    const patchedSelection = selection ? Selection.findFrom(selection.$head, -1, true) || undefined : undefined;
+    return EditorState.create({
+      schema,
+      plugins: plugins,
+      doc,
+      selection: patchedSelection
+    });
+  }, [props.intl, props.portalProviderAPI, props.editorProps, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  const resetEditorState = useCallback(({
+    doc,
+    shouldScrollToBottom
+  }) => {
+    var _props$editorProps$on, _props$editorProps;
+    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);
+    const newEditorState = createEditorState({
+      props: props,
+      doc: doc,
+      resetting: true,
+      selectionAtStart: !shouldScrollToBottom
+    });
+    editorState.current = newEditorState;
+    viewRef.current.updateState(newEditorState);
+    (_props$editorProps$on = (_props$editorProps = props.editorProps).onChange) === null || _props$editorProps$on === void 0 ? void 0 : _props$editorProps$on.call(_props$editorProps, viewRef.current, {
+      source: 'local'
+    });
+  }, [blur, createEditorState, props]);
+
+  // Initialise phase
+  // Using constructor hook so we setup and dispatch analytics before anything else
+  useConstructor(() => {
+    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(() => {
+    return () => {
+      const focusTimeoutIdCurrent = focusTimeoutId.current;
+      if (focusTimeoutIdCurrent) {
+        clearTimeout(focusTimeoutIdCurrent);
+      }
+      if (viewRef.current) {
+        // Destroy the state if the Editor is being unmounted
+        const editorState = viewRef.current.state;
+        editorState.plugins.forEach(plugin => {
+          const state = plugin.getState(editorState);
+          if (state && state.destroy) {
+            state.destroy();
+          }
+        });
+      }
+      eventDispatcher.destroy();
+      // this.view will be destroyed when React unmounts in handleEditorViewRef
+    };
+  }, [eventDispatcher]);
+  const reconfigureState = useCallback(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();
+    const editorPlugins = createPluginsList(props.preset, props.editorProps, pluginInjectionAPI.current);
+    config.current = processPluginsList(editorPlugins);
+    const state = editorState.current;
+    const 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: () => props.intl
+    });
+    const 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({
+      ...viewRef.current.props,
+      state: newState
+    });
+  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  const onEditorViewUpdated = useCallback(({
+    originalTransaction,
+    transactions,
+    oldEditorState,
+    newEditorState
+  }) => {
+    var _config$current;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState,
+      oldEditorState
+    });
+    (_config$current = config.current) === null || _config$current === void 0 ? void 0 : _config$current.onEditorViewStateUpdatedCallbacks.forEach(entry => {
+      entry.callback({
+        originalTransaction,
+        transactions,
+        oldEditorState,
+        newEditorState
+      });
+    });
+  }, []);
+  const dispatchTransaction = useDispatchTransaction({
+    onChange: props.editorProps.onChange,
+    dispatchAnalyticsEvent,
+    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
+  const UNSAFE_cards = props.editorProps.UNSAFE_cards;
+  const 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 ? void 0 : (_linking$smartLinks = _linking.smartLinks) === null || _linking$smartLinks === void 0 ? void 0 : _linking$smartLinks.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
+    emojiProvider: props.editorProps.emojiProvider,
+    autoformattingProvider: props.editorProps.autoformattingProvider,
+    taskDecisionProvider: props.editorProps.taskDecisionProvider
+  });
+  const getDirectEditorProps = useCallback(state => {
+    return {
+      state: state || editorState.current,
+      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) {
+          const newState = dispatchTransaction(viewRef.current, tr);
+          if (newState) {
+            editorState.current = newState;
+          }
+        }
+      },
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      editable: _state => !disabled,
+      attributes: {
+        'data-gramm': 'false'
+      }
+    };
+  }, [dispatchTransaction, disabled]);
+  const createEditorView = useCallback(node => {
+    measureRender(measurements.PROSEMIRROR_RENDERED, ({
+      duration,
+      startTime,
+      distortedDuration
+    }) => {
+      const proseMirrorRenderedSeverity = getAnalyticsEventSeverity(duration, PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD);
+      if (viewRef.current) {
+        var _pluginInjectionAPI$c;
+        const nodes = getNodesCount(viewRef.current.state.doc);
+        const ttfb = getResponseEndTime();
+        const 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,
+            startTime,
+            nodes,
+            ttfb,
+            severity: proseMirrorRenderedSeverity,
+            objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
+            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.
+    const view = new EditorView({
+      mount: node
+    }, getDirectEditorProps());
+    viewRef.current = view;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState: viewRef.current.state,
+      oldEditorState: undefined
+    });
+    return view;
+  }, [getDirectEditorProps, dispatchAnalyticsEvent]);
+  const [_, setEditorView] = useState(undefined);
+  const {
+    onEditorCreated,
+    onEditorDestroyed,
+    editorProps: {
+      shouldFocus
+    }
+  } = props;
+  const handleEditorViewRef = useCallback(node => {
+    if (!viewRef.current && node) {
+      const view = createEditorView(node);
+      onEditorCreated({
+        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
+      });
+      const 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]);
+  const createEditor = useCallback((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]);
+  const previousPreset = usePreviousState(preset);
+  useLayoutEffect(() => {
+    if (previousPreset && previousPreset !== preset) {
+      reconfigureState(props);
+    }
+  }, [reconfigureState, previousPreset, preset, props]);
+  const previousDisabledState = usePreviousState(disabled);
+  useLayoutEffect(() => {
+    if (viewRef.current && previousDisabledState !== disabled) {
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      viewRef.current.setProps({
+        editable: _state => !disabled
+      });
+      if (!disabled && shouldFocus) {
+        focusTimeoutId.current = handleEditorFocus(viewRef.current);
+      }
+    }
+  }, [disabled, shouldFocus, previousDisabledState]);
+  useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);
+  const editorState = useRef(createEditorState({
+    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);
+  const editor = useMemo(() => 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,
+    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/es2019/presets/universal.js

@@ -204,7 +204,8 @@ export default function createUniversalPresetInternal({
   props.allowTemplatePlaceholders !== true ? props.allowTemplatePlaceholders : {}], Boolean(props.allowTemplatePlaceholders)).maybeAdd([layoutPlugin, {
     ...(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, {
     ...props.UNSAFE_cards,
     ...props.smartLinks,

package/dist/es2019/ui/Addon/click-area-helper.js

@@ -111,7 +111,6 @@ const outsideProsemirrorEditorClickHandler = (view, event) => {
     dispatch(tr);
   }
   view.focus();
-  event.stopPropagation();
   event.preventDefault();
 };
 export { clickAreaClickHandler };

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "201.1.4";
+export const version = "201.1.6";

package/dist/esm/composable-editor/editor-internal.js

@@ -13,9 +13,11 @@ import { Fragment, memo, useState } from 'react';
 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 ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
+import ReactEditorViewNext from '../create-editor/ReactEditorViewNext';
 import { ContextAdapter } from '../nodeviews/context-adapter';
 import EditorContext from '../ui/EditorContext';
 import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
@@ -72,7 +74,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     css: editorContainerStyles
   }, jsx(EditorContext, {
     editorActions: editorActions
-  }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewContextWrapper, {
+  }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, fg('platform_editor_react_editor_view_react_18') ? jsx(ReactEditorViewNext, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -126,6 +128,60 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         pluginHooks: config.pluginHooks
       }));
     }
+  }) : jsx(ReactEditorViewContextWrapper, {
+    editorProps: overriddenEditorProps,
+    createAnalyticsEvent: createAnalyticsEvent,
+    portalProviderAPI: portalProviderAPI,
+    providerFactory: providerFactory,
+    onEditorCreated: onEditorCreated,
+    onEditorDestroyed: onEditorDestroyed,
+    disabled: props.disabled,
+    preset: preset,
+    render: function render(_ref3) {
+      var _props$featureFlags3, _props$featureFlags4;
+      var editor = _ref3.editor,
+        view = _ref3.view,
+        eventDispatcher = _ref3.eventDispatcher,
+        config = _ref3.config,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+        editorRef = _ref3.editorRef,
+        editorAPI = _ref3.editorAPI;
+      return jsx(BaseThemeWrapper, {
+        baseFontSize: getBaseFontSize(props.appearance)
+      }, jsx(AppearanceComponent, {
+        innerRef: editorRef,
+        editorAPI: editorAPI,
+        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,
+        popupsMountPoint: props.popupsMountPoint,
+        popupsBoundariesElement: props.popupsBoundariesElement,
+        popupsScrollableElement: props.popupsScrollableElement,
+        contentComponents: config.contentComponents,
+        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$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
+        useStickyToolbar: props.useStickyToolbar,
+        featureFlags: featureFlags,
+        pluginHooks: config.pluginHooks
+      }));
+    }
   }), jsx(PortalRenderer, null))))))));
 });
 function ReactEditorViewContextWrapper(props) {

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

@@ -0,0 +1,7 @@
+import { FULL_WIDTH_MODE } from '@atlaskit/editor-common/analytics';
+export var formatFullWidthAppearance = function formatFullWidthAppearance(appearance) {
+  if (appearance === 'full-width') {
+    return FULL_WIDTH_MODE.FULL_WIDTH;
+  }
+  return FULL_WIDTH_MODE.FIXED_WIDTH;
+};

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

@@ -0,0 +1,13 @@
+import { browser } from '@atlaskit/editor-common/browser';
+export function getUAPrefix() {
+  if (browser.chrome) {
+    return 'ua-chrome';
+  } else if (browser.ie) {
+    return 'ua-ie';
+  } else if (browser.gecko) {
+    return 'ua-firefox';
+  } else if (browser.safari) {
+    return 'ua-safari';
+  }
+  return '';
+}

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

@@ -0,0 +1,38 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export function handleEditorFocus(view) {
+  if (view.hasFocus()) {
+    return;
+  }
+  return window.setTimeout(function () {
+    if (view.hasFocus()) {
+      return;
+    }
+    if (!window.getSelection) {
+      view.focus();
+      return;
+    }
+    var domSelection = window.getSelection();
+    if (!domSelection || domSelection.rangeCount === 0) {
+      view.focus();
+      return;
+    }
+    var range = domSelection.getRangeAt(0);
+    // if selection is outside editor focus and exit
+    if (range.startContainer.contains(view.dom)) {
+      view.focus();
+      return;
+    }
+    // set cursor/selection and focus
+    var anchor = view.posAtDOM(range.startContainer, range.startOffset);
+    var head = view.posAtDOM(range.endContainer, range.endOffset);
+    // if anchor or head < 0 focus and exit
+    if (anchor < 0 || head < 0) {
+      view.focus();
+      return;
+    }
+    var selection = TextSelection.create(view.state.doc, anchor, head);
+    var tr = view.state.tr.setSelection(selection);
+    view.dispatch(tr);
+    view.focus();
+  }, 0);
+}