@atlaskit/editor-core 195.6.1 → 195.7.0

package/dist/es2019/ui/ContextPanel/index.js

@@ -4,55 +4,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useContext } from 'react';
+import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import { ContextPanelConsumer, WidthContext } from '@atlaskit/editor-common/ui';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
+import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N30 } from '@atlaskit/theme/colors';
-import { getChildBreakoutModes } from '../../utils/document';
-import WithEditorActions from '../WithEditorActions';
+import ContextPanelDeprecated from './deprecated';
 const ANIM_SPEED_MS = 500;
-const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
-const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
-const FULLWIDTH_MODE = 'full-width';
-const WIDE_MODE = 'wide';
-const absolutePanelStyles = css({
-  position: 'absolute',
-  right: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()})`
-});
-const checkTableExistsInDoc = editorView => {
-  const tableNodeSchema = editorView.state.schema.nodes.table;
-  let findResult = findChildrenByType(editorView.state.doc, tableNodeSchema);
-  return findResult.length > 0;
-};
-export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth, editorView) => {
-  const {
-    lineLength,
-    containerWidth = 0,
-    contentBreakoutModes
-  } = editorWidth;
-  const editorNotFullWidth = !(lineLength && lineLength > akEditorDefaultLayoutWidth);
-  const hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
-  const hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
-  if (!editorView) {
-    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
-  } else {
-    // when custom table width feature flag is on,
-    // there are scenarios when a table has attr layout default, but width is in full-width or very wide
-    // but in this case we still want the shouldPanelBePositionedOverEditor return false
-    // previous logic is returning false when table layout default
-    // but when custom table width feature flag is one, we want to return false whenever there is a table in the doc
-    const isTableInDoc = checkTableExistsInDoc(editorView);
-    return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
-  }
-};
 const panelHidden = css({
   width: 0
 });
@@ -87,13 +50,13 @@ export class SwappableContentArea extends React.PureComponent {
       currentPluginContent: undefined
     });
     _defineProperty(this, "focusEditor", () => {
+      var _editorAPI$core;
       const {
-        editorView
+        editorAPI
       } = this.props;
-      if (editorView && !editorView.hasFocus()) {
-        var _editorView$focus;
-        (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 ? void 0 : _editorView$focus.call(editorView);
-      }
+      editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 ? void 0 : _editorAPI$core.actions.focus({
+        scrollIntoView: false
+      });
     });
     _defineProperty(this, "showPluginContent", () => {
       const {
@@ -150,29 +113,16 @@ export class SwappableContentArea extends React.PureComponent {
     });
   }
   render() {
-    const {
-      editorWidth,
-      editorView
-    } = this.props;
     const width = akEditorContextPanelWidth;
     const userVisible = !!this.props.visible;
     const visible = userVisible || !!this.state.currentPluginContent;
     return jsx(ContextPanelConsumer, null, ({
-      broadcastWidth,
-      broadcastPosition,
-      positionedOverEditor
+      broadcastWidth
     }) => {
       const contextPanelWidth = visible ? width : 0;
-      const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
       broadcastWidth(contextPanelWidth);
-      (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
       return jsx("div", {
-        css: [panel, !visible && panelHidden,
-        /**
-         * Only use absolute position for panel when screen size is wide enough
-         * to accommodate breakout content and editor is not in wide mode.
-         */
-        newPosition && absolutePanelStyles],
+        css: [panel, !visible && panelHidden],
         "data-testid": "context-panel-panel",
         "aria-labelledby": "context-panel-title",
         role: "dialog"
@@ -183,76 +133,17 @@ export class SwappableContentArea extends React.PureComponent {
     });
   }
 }
-
-// TODO: ED-17837 We have this workaround because we do
-// not have access to the pluginInjectionApi at this location.
-// It might be that we need to inject the pluginInjectionApi
-// via context so that we can use it in this file (similar to
-// WithEditorActions). To be investigated further.
-
-// @ts-ignore
-const widthPluginKey = {
-  key: 'widthPlugin$',
-  getState: state => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return state['widthPlugin$'];
-  }
-};
-
-// @ts-ignore
-const contextPanelPluginKey = {
-  key: 'contextPanelPluginKey$',
-  getState: state => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return state['contextPanelPluginKey$'];
-  }
-};
-function ContextPanelWithActions({
-  actions,
-  ...props
-}) {
-  const eventDispatcher = actions._privateGetEventDispatcher();
-  const editorView = actions._privateGetEditorView();
+export function ContextPanel(props) {
+  var _contextPanelState$co;
   const {
-    width
-  } = useContext(WidthContext);
-  if (!eventDispatcher) {
-    return jsx(SwappableContentArea, _extends({
-      editorView: editorView
-    }, props));
-  }
-  return (
-    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
-    // This error was introduced after upgrading to TypeScript 5
-    jsx(WithPluginState, {
-      eventDispatcher: eventDispatcher,
-      plugins: {
-        contextPanel: contextPanelPluginKey,
-        widthState: widthPluginKey
-      },
-      render: ({
-        contextPanel,
-        widthState
-      }) => {
-        const firstContent = contextPanel && contextPanel.contents.find(Boolean);
-        const editorWidth = {
-          ...widthState,
-          containerWidth: width,
-          contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
-        };
-        return jsx(SwappableContentArea, _extends({}, props, {
-          editorView: editorView,
-          pluginContent: firstContent,
-          editorWidth: editorWidth
-        }));
-      }
-    })
-  );
+    contextPanelState
+  } = useSharedPluginState(props.editorAPI, ['contextPanel']);
+  const firstContent = contextPanelState && (contextPanelState === null || contextPanelState === void 0 ? void 0 : (_contextPanelState$co = contextPanelState.contents) === null || _contextPanelState$co === void 0 ? void 0 : _contextPanelState$co.find(Boolean));
+  return jsx(SwappableContentArea, _extends({}, props, {
+    editorAPI: props.editorAPI,
+    pluginContent: firstContent
+  }));
 }
-export default function ContextPanel(props) {
-  return jsx(WithEditorActions, {
-    render: actions => jsx(ContextPanelWithActions, _extends({
-      actions: actions
-    }, props))
-  });
+export default function ContextPanelDefault(props) {
+  return fg('platform_editor_context-panel_simplify_behaviour') ? jsx(ContextPanel, props) : jsx(ContextPanelDeprecated, props);
 }

package/dist/es2019/version-wrapper.js

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

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

@@ -79,11 +79,11 @@ function handleEditorFocus(view) {
 export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactEditorView, _React$Component);
   var _super = _createSuper(ReactEditorView);
-  function ReactEditorView(props, context) {
+  function ReactEditorView(props) {
     var _props$setEditorApi, _props$editorProps;
     var _this;
     _classCallCheck(this, ReactEditorView);
-    _this = _super.call(this, props, context);
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "editorRef", /*#__PURE__*/React.createRef());
     // ProseMirror is instantiated prior to the initial React render cycle,
     // so we allow transactions by default, to avoid discarding the initial one.
@@ -128,7 +128,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       _this.featureFlags = createFeatureFlagsFromProps(_this.props.editorProps);
       _this.editorState = _this.createEditorState({
         props: _this.props,
-        context: _this.context,
         doc: doc,
         resetting: true,
         selectionAtStart: !shouldScrollToBottom
@@ -194,9 +193,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         eventDispatcher: _this.eventDispatcher,
         providerFactory: options.props.providerFactory,
         portalProviderAPI: _this.props.portalProviderAPI,
-        reactContext: function reactContext() {
-          return options.context;
-        },
         dispatchAnalyticsEvent: _this.dispatchAnalyticsEvent,
         performanceTracking: _this.props.editorProps.performanceTracking,
         transactionTracker: _this.transactionTracker,
@@ -575,7 +571,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     _this.eventDispatcher.on('resetEditorState', _this.resetEditorState);
     _this.editorState = _this.createEditorState({
       props: props,
-      context: context,
       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)
@@ -690,9 +685,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         eventDispatcher: this.eventDispatcher,
         providerFactory: props.providerFactory,
         portalProviderAPI: props.portalProviderAPI,
-        reactContext: function reactContext() {
-          return _this2.context;
-        },
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
         performanceTracking: props.editorProps.performanceTracking,
         transactionTracker: this.transactionTracker,

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

@@ -120,7 +120,6 @@ export function createPMPlugins(config) {
       providerFactory: config.providerFactory,
       errorReporter: config.errorReporter,
       portalProviderAPI: config.portalProviderAPI,
-      reactContext: config.reactContext,
       dispatchAnalyticsEvent: config.dispatchAnalyticsEvent,
       featureFlags: config.featureFlags || {},
       getIntl: config.getIntl

package/dist/esm/index.js

@@ -7,7 +7,12 @@ export { default as WithHelpTrigger } from './ui/WithHelpTrigger';
 export { default as CollapsedEditor } from './ui/CollapsedEditor';
 export { default as ToolbarHelp } from './ui/ToolbarHelp';
 export { default as ToolbarFeedback } from './ui/ToolbarFeedback';
-export { default as ContextPanel } from './ui/ContextPanel';
+export {
+/**
+ * @deprecated
+ * DO NOT USE THIS WILL BE REMOVED SOON. This was intended for internal usage only
+ */
+default as ContextPanel } from './ui/ContextPanel/deprecated';
 export { EmojiResource } from '@atlaskit/emoji/resource';
 export { MentionResource } from '@atlaskit/mention/resource';
 export { TeamMentionResource } from '@atlaskit/mention/team-resource';

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -97,6 +97,7 @@ export var FullPageEditor = function FullPageEditor(props) {
     featureFlags: props.featureFlags,
     hideAvatarGroup: props.hideAvatarGroup
   }), jsx(FullPageContentArea, {
+    editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,
     contentComponents: props.contentComponents,

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -36,67 +36,71 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []);
   return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return jsx(ContextPanelConsumer, null, function (_ref2) {
-      var _contentAreaRef$curre;
-      var positionedOverEditor = _ref2.positionedOverEditor;
-      return jsx("div", {
-        css: [
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        contentArea,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        props.isEditorToolbarHidden && contentAreaHeightNoToolbar,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        positionedOverEditor && positionedOverEditorStyle],
-        "data-testid": CONTENT_AREA_TEST_ID,
-        ref: containerRef
-      }, jsx(ScrollContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "fabric-editor-popup-scroll-parent",
-        featureFlags: props.featureFlags,
-        ref: scrollContainerRef
-      }, jsx(ClickAreaBlock, {
-        editorView: props.editorView,
-        editorDisabled: props.disabled
-      }, jsx("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        css: editorContentAreaStyle({
-          fullWidthMode: fullWidthMode,
-          layoutMaxWidth: theme.layoutMaxWidth,
-          containerWidth: width
-        }),
-        role: "region",
-        "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-        ref: contentAreaRef
-      }, jsx("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        css: editorContentGutterStyle()
+    return (
+      // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+      jsx(ContextPanelConsumer, null, function (_ref2) {
+        var _contentAreaRef$curre;
+        var positionedOverEditor = _ref2.positionedOverEditor;
+        return jsx("div", {
+          css: [
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          contentArea,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          props.isEditorToolbarHidden && contentAreaHeightNoToolbar,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          positionedOverEditor && positionedOverEditorStyle],
+          "data-testid": CONTENT_AREA_TEST_ID,
+          ref: containerRef
+        }, jsx(ScrollContainer
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-        ref: contentAreaRef
-      }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
-        editorView: props.editorView,
-        editorActions: props.editorActions,
-        eventDispatcher: props.eventDispatcher,
-        providerFactory: props.providerFactory,
-        appearance: props.appearance,
-        items: props.contentComponents,
-        pluginHooks: props.pluginHooks,
-        contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsScrollableElement: props.popupsScrollableElement,
-        disabled: !!props.disabled,
-        containerElement: scrollContainerRef.current,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        wrapperElement: props.wrapperElement
-      }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
-        css: sidebarArea
-      }, props.contextPanel || jsx(ContextPanel, {
-        visible: false
-      })));
-    });
+        , {
+          className: "fabric-editor-popup-scroll-parent",
+          featureFlags: props.featureFlags,
+          ref: scrollContainerRef
+        }, jsx(ClickAreaBlock, {
+          editorView: props.editorView,
+          editorDisabled: props.disabled
+        }, jsx("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          css: editorContentAreaStyle({
+            fullWidthMode: fullWidthMode,
+            layoutMaxWidth: theme.layoutMaxWidth,
+            containerWidth: width
+          }),
+          role: "region",
+          "aria-label": props.intl.formatMessage(messages.editableContentLabel),
+          ref: contentAreaRef
+        }, jsx("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          css: editorContentGutterStyle()
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
+          className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+          ref: contentAreaRef
+        }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
+          editorView: props.editorView,
+          editorActions: props.editorActions,
+          eventDispatcher: props.eventDispatcher,
+          providerFactory: props.providerFactory,
+          appearance: props.appearance,
+          items: props.contentComponents,
+          pluginHooks: props.pluginHooks,
+          contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
+          popupsMountPoint: props.popupsMountPoint,
+          popupsBoundariesElement: props.popupsBoundariesElement,
+          popupsScrollableElement: props.popupsScrollableElement,
+          disabled: !!props.disabled,
+          containerElement: scrollContainerRef.current,
+          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+          wrapperElement: props.wrapperElement
+        }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
+          css: sidebarArea
+        }, props.contextPanel || jsx(ContextPanel, {
+          editorAPI: props.editorAPI,
+          visible: false
+        })));
+      })
+    );
   });
 });
 export var FullPageContentArea = injectIntl(Content, {