@atlaskit/editor-common 93.4.3 → 93.5.0

package/dist/es2019/with-plugin-state/index.js

@@ -1,9 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { createDispatch } from '../event-dispatcher';
 import { startMeasure, stopMeasure } from '../performance-measures';
+import { EditorContext } from '../ui/EditorContext';
 import { analyticsEventKey } from '../utils';
 const DEFAULT_SAMPLING_RATE = 100;
 const DEFAULT_SLOW_THRESHOLD = 4;
@@ -50,6 +53,215 @@ const DEFAULT_SLOW_THRESHOLD = 4;
  *
  */
 class WithPluginState extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    if (fg('platform_editor_react18_phase2')) {
+      return /*#__PURE__*/React.createElement(WithPluginStateNew, this.props);
+    }
+    return /*#__PURE__*/React.createElement(WithPluginStateOld, this.props);
+  }
+}
+function WithPluginStateNew(props) {
+  const context = React.useContext(EditorContext);
+  return /*#__PURE__*/React.createElement(WithPluginStateInner, _extends({}, props, {
+    editorActions: context === null || context === void 0 ? void 0 : context.editorActions
+  }));
+}
+export class WithPluginStateInner extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "listeners", {});
+    _defineProperty(this, "debounce", null);
+    _defineProperty(this, "notAppliedState", {});
+    _defineProperty(this, "isSubscribed", false);
+    _defineProperty(this, "callsCount", 0);
+    _defineProperty(this, "handlePluginStateChange", (propName, pluginName, performanceOptions, skipEqualityCheck) => pluginState => {
+      // skipEqualityCheck is being used for old plugins since they are mutating plugin state instead of creating a new one
+      if (this.state[propName] !== pluginState || skipEqualityCheck) {
+        this.updateState({
+          stateSubset: {
+            [propName]: pluginState
+          },
+          pluginName,
+          performanceOptions
+        });
+      }
+    });
+    /**
+     * Debounces setState calls in order to reduce number of re-renders caused by several plugin state changes.
+     */
+    _defineProperty(this, "updateState", ({
+      stateSubset,
+      pluginName,
+      performanceOptions
+    }) => {
+      this.notAppliedState = {
+        ...this.notAppliedState,
+        ...stateSubset
+      };
+      if (this.debounce) {
+        window.clearTimeout(this.debounce);
+      }
+      const debounce = this.props.debounce !== false ? fn => window.setTimeout(fn, 0) : fn => fn();
+      this.debounce = debounce(() => {
+        const measure = `🦉${pluginName}::WithPluginState`;
+        performanceOptions.trackingEnabled && startMeasure(measure);
+        this.setState(this.notAppliedState, () => {
+          performanceOptions.trackingEnabled && stopMeasure(measure, duration => {
+            // Each WithPluginState component will fire analytics event no more than once every `samplingLimit` times
+            if (++this.callsCount % performanceOptions.samplingRate === 0 && duration > performanceOptions.slowThreshold) {
+              this.dispatchAnalyticsEvent({
+                action: ACTION.WITH_PLUGIN_STATE_CALLED,
+                actionSubject: ACTION_SUBJECT.EDITOR,
+                eventType: EVENT_TYPE.OPERATIONAL,
+                attributes: {
+                  plugin: pluginName,
+                  duration
+                }
+              });
+            }
+          });
+        });
+        this.debounce = null;
+        this.notAppliedState = {};
+      });
+    });
+    _defineProperty(this, "dispatchAnalyticsEvent", payload => {
+      const eventDispatcher = this.getEventDispatcher();
+      if (eventDispatcher) {
+        const dispatch = createDispatch(eventDispatcher);
+        dispatch(analyticsEventKey, {
+          payload
+        });
+      }
+    });
+    this.state = this.getPluginsStates(this.props.plugins, this.getEditorView(props));
+  }
+  getEditorView(maybeProps) {
+    const props = maybeProps || this.props;
+    const editorActions = props.editorActions;
+    return props.editorView || (editorActions === null || editorActions === void 0 ? void 0 : editorActions._privateGetEditorView());
+  }
+  getEventDispatcher(maybeProps) {
+    var _props$editorActions;
+    const props = maybeProps || this.props;
+    return props.eventDispatcher || ((_props$editorActions = props.editorActions) === null || _props$editorActions === void 0 ? void 0 : _props$editorActions._privateGetEventDispatcher());
+  }
+  getPluginsStates(plugins, editorView) {
+    if (!editorView || !plugins) {
+      return {};
+    }
+    const keys = Object.keys(plugins);
+    return keys.reduce((acc, propName) => {
+      const pluginKey = plugins[propName];
+      if (!pluginKey) {
+        return acc;
+      }
+      acc[propName] = pluginKey.getState(editorView.state);
+      return acc;
+    }, {});
+  }
+  subscribe(props) {
+    var _uiTracking$samplingR, _uiTracking$slowThres;
+    const plugins = props.plugins;
+    const eventDispatcher = this.getEventDispatcher(props);
+    const editorView = this.getEditorView(props);
+    if (!eventDispatcher || !editorView || this.isSubscribed) {
+      return;
+    }
+
+    // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+    const fakePluginKey = {
+      key: 'analyticsPlugin$',
+      getState: state => {
+        return state['analyticsPlugin$'];
+      }
+    };
+    const analyticsPlugin = fakePluginKey.getState(editorView.state);
+    const uiTracking = analyticsPlugin && analyticsPlugin.performanceTracking ? analyticsPlugin.performanceTracking.uiTracking || {} : {};
+    const trackingEnabled = uiTracking.enabled === true;
+    const samplingRate = (_uiTracking$samplingR = uiTracking.samplingRate) !== null && _uiTracking$samplingR !== void 0 ? _uiTracking$samplingR : DEFAULT_SAMPLING_RATE;
+    const slowThreshold = (_uiTracking$slowThres = uiTracking.slowThreshold) !== null && _uiTracking$slowThres !== void 0 ? _uiTracking$slowThres : DEFAULT_SLOW_THRESHOLD;
+    this.isSubscribed = true;
+    const pluginsStates = this.getPluginsStates(plugins, editorView);
+    this.setState(pluginsStates);
+    Object.keys(plugins).forEach(propName => {
+      const pluginKey = plugins[propName];
+      if (!pluginKey) {
+        return;
+      }
+      const pluginName = pluginKey.key;
+      const pluginState = pluginsStates[propName];
+      const isPluginWithSubscribe = pluginState && pluginState.subscribe;
+      const handler = this.handlePluginStateChange(propName, pluginName, {
+        samplingRate,
+        slowThreshold,
+        trackingEnabled
+      }, isPluginWithSubscribe);
+      if (isPluginWithSubscribe) {
+        pluginState.subscribe(handler);
+      } else {
+        eventDispatcher.on(pluginKey.key, handler);
+      }
+      this.listeners[pluginKey.key] = {
+        handler,
+        pluginKey
+      };
+    });
+  }
+  unsubscribe() {
+    const eventDispatcher = this.getEventDispatcher();
+    const editorView = this.getEditorView();
+    if (!eventDispatcher || !editorView || !this.isSubscribed) {
+      return;
+    }
+    Object.keys(this.listeners).forEach(key => {
+      const pluginState = this.listeners[key].pluginKey.getState(editorView.state);
+      if (pluginState && pluginState.unsubscribe) {
+        pluginState.unsubscribe(this.listeners[key].handler);
+      } else {
+        eventDispatcher.off(key, this.listeners[key].handler);
+      }
+    });
+    this.listeners = [];
+  }
+  subscribeToContextUpdates() {
+    var _this$props$editorAct;
+    (_this$props$editorAct = this.props.editorActions) === null || _this$props$editorAct === void 0 ? void 0 : _this$props$editorAct._privateSubscribe(() => this.subscribe(this.props));
+  }
+  unsubscribeFromContextUpdates() {
+    var _this$props$editorAct2;
+    (_this$props$editorAct2 = this.props.editorActions) === null || _this$props$editorAct2 === void 0 ? void 0 : _this$props$editorAct2._privateUnsubscribe(() => this.subscribe(this.props));
+  }
+  componentDidMount() {
+    this.subscribe(this.props);
+    this.subscribeToContextUpdates();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.isSubscribed) {
+      this.subscribe(nextProps);
+    }
+  }
+  componentWillUnmount() {
+    if (this.debounce) {
+      window.clearTimeout(this.debounce);
+    }
+    this.unsubscribeFromContextUpdates();
+    this.unsubscribe();
+  }
+  render() {
+    const {
+      render
+    } = this.props;
+    return render(this.state);
+  }
+}
+_defineProperty(WithPluginStateInner, "displayName", 'WithPluginState');
+export class WithPluginStateOld extends React.Component {
   constructor(props, context) {
     super(props, context);
     _defineProperty(this, "listeners", {});
@@ -146,7 +358,7 @@ class WithPluginState extends React.Component {
     }, {});
   }
   subscribe(props) {
-    var _uiTracking$samplingR, _uiTracking$slowThres;
+    var _uiTracking$samplingR2, _uiTracking$slowThres2;
     const plugins = props.plugins;
     const eventDispatcher = this.getEventDispatcher(props);
     const editorView = this.getEditorView(props);
@@ -166,8 +378,8 @@ class WithPluginState extends React.Component {
     const analyticsPlugin = fakePluginKey.getState(editorView.state);
     const uiTracking = analyticsPlugin && analyticsPlugin.performanceTracking ? analyticsPlugin.performanceTracking.uiTracking || {} : {};
     const trackingEnabled = uiTracking.enabled === true;
-    const samplingRate = (_uiTracking$samplingR = uiTracking.samplingRate) !== null && _uiTracking$samplingR !== void 0 ? _uiTracking$samplingR : DEFAULT_SAMPLING_RATE;
-    const slowThreshold = (_uiTracking$slowThres = uiTracking.slowThreshold) !== null && _uiTracking$slowThres !== void 0 ? _uiTracking$slowThres : DEFAULT_SLOW_THRESHOLD;
+    const samplingRate = (_uiTracking$samplingR2 = uiTracking.samplingRate) !== null && _uiTracking$samplingR2 !== void 0 ? _uiTracking$samplingR2 : DEFAULT_SAMPLING_RATE;
+    const slowThreshold = (_uiTracking$slowThres2 = uiTracking.slowThreshold) !== null && _uiTracking$slowThres2 !== void 0 ? _uiTracking$slowThres2 : DEFAULT_SLOW_THRESHOLD;
     this.isSubscribed = true;
     const pluginsStates = this.getPluginsStates(plugins, editorView);
     this.setState(pluginsStates);
@@ -244,8 +456,8 @@ class WithPluginState extends React.Component {
     return render(this.state);
   }
 }
-_defineProperty(WithPluginState, "displayName", 'WithPluginState');
-_defineProperty(WithPluginState, "contextTypes", {
+_defineProperty(WithPluginStateOld, "displayName", 'WithPluginState');
+_defineProperty(WithPluginStateOld, "contextTypes", {
   editorActions: PropTypes.object,
   editorSharedConfig: PropTypes.object
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "93.4.3";
+var packageVersion = "93.5.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "93.4.3";
+var packageVersion = "93.5.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/EditorContext/index.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var EditorContext = /*#__PURE__*/React.createContext({});

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -10,7 +10,9 @@ import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -23,8 +25,11 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 var colorPickerButtonWrapper = css({
   position: 'relative'
 });
-var colorPickerExpandContainer = css({
-  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+var colorPickerExpandContainer = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.0',
+  marginLeft: 'space.negative.050',
+  marginRight: 'space.negative.050'
 });
 
 // Control the size of color picker buttons and preview
@@ -221,10 +226,13 @@ var ColorPickerButton = function ColorPickerButton(props) {
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     ,
     css: buttonStyle,
-    iconAfter: jsx("span", {
-      css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
-      label: ""
+    iconAfter: jsx(Box, {
+      xcss: colorPickerExpandContainer
+    }, jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyExpandIcon,
+      label: "color-picker-chevron-down"
     })),
     "data-selected-color": props.currentColor
   })), renderPopup());

package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -2,14 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/* eslint-disable no-console */
 
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
-import { fullPageMessages as messages } from '../../messages';
+import { fullPageMessages } from '../../messages';
+import { mediaInsertMessages } from '../../messages/media-insert';
 import { EDIT_AREA_ID } from '../../ui';
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -135,6 +135,11 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
         return;
       }
+
+      // If the target element is the media picker then navigation is handled by the media picker
+      if (targetElement instanceof HTMLElement && targetElement.closest("[aria-label=\"".concat(intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel), "\"]"))) {
+        return;
+      }
       if (targetElement instanceof HTMLElement && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(targetElement))) {
         selectedItemIndex.current = -1;
       } else {
@@ -187,7 +192,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
         editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
       }
     };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar, intl]);
   return jsx("div", {
     css: editorAppearance === 'comment' && centeredToolbarContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -195,7 +200,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
     className: "custom-key-handler-wrapper",
     ref: wrapperRef,
     role: "toolbar",
-    "aria-label": intl.formatMessage(messages.toolbarLabel),
+    "aria-label": intl.formatMessage(fullPageMessages.toolbarLabel),
     "aria-controls": EDIT_AREA_ID
   }, jsx(KeyDownHandlerContext.Provider, {
     value: submenuKeydownHandleContext