@atlaskit/editor-core 164.0.3 → 164.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 164.0.4
+
+### Patch Changes
+
+- [`798c0d0b9c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/798c0d0b9c3) - [ux] Fixes an issue where some editor nodes did not work with dark mode (which is only used on mobile). When the environment is detected to be mobile, this adds a Atlaskit Theme Provider and a styled-components theme provider to the top of the editors "portals" (not react portals), which allows theming to work.
+
 ## 164.0.3
 
 ### Patch Changes

package/dist/cjs/editor.js

@@ -77,6 +77,8 @@ var _featureFlagsFromProps = require("./plugins/feature-flags-context/feature-fl
 
 var _RenderTracking = require("./utils/performance/components/RenderTracking");
 
+var _checkIfMobileBridge = require("./utils/check-if-mobile-bridge");
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -557,6 +559,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       var renderTracking = (_this$props$performan = this.props.performanceTracking) === null || _this$props$performan === void 0 ? void 0 : (_this$props$performan2 = _this$props$performan.renderTracking) === null || _this$props$performan2 === void 0 ? void 0 : _this$props$performan2.editor;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
+      /**
+       * The PortalProviderWithThemeProviders renders portals with atlaskit
+       * and the deprecated styled components theme providers.
+       *
+       * Without this the node views react trees;
+       * - do not have access to the atlaskit theme via the `useGlobalTheme` hook
+       * - do not have access to the theme when using the `styled`${({theme}) => theme.}` api.
+       *
+       * Added for a mobile regression, which needed to be fixed on master.
+       * Once this makes it's way to develop, we should consider making it the default
+       * behaviour.
+       *
+       * https://product-fabric.atlassian.net/browse/ED-14204
+       */
+
+      var EnvironmentDrivenPortalProvider = (0, _checkIfMobileBridge.checkIfMobileBridge)() ? _PortalProvider.PortalProviderWithThemeProviders : _PortalProvider.PortalProvider;
       return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
         data: {
           packageName: _versionWrapper.name,
@@ -581,7 +599,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
             css: fullHeight
           }, (0, _react2.jsx)(_EditorContext.default, {
             editorActions: _this5.editorActions
-          }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_PortalProvider.PortalProvider, {
+          }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(EnvironmentDrivenPortalProvider, {
             onAnalyticsEvent: _this5.handleAnalyticsEvent,
             useAnalyticsContext: _this5.props.UNSAFE_useAnalyticsContext,
             render: function render(portalProviderAPI) {

package/dist/cjs/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PortalProviderThemeProviders = PortalProviderThemeProviders;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _react2 = require("@emotion/react");
+
+var _styledComponents = require("styled-components");
+
+function PortalProviderThemeProviders(props) {
+  var children = props.children,
+      mode = props.mode;
+
+  var styledComponentsAndEmotionTheme = _react.default.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  function () {
+    var _ref;
+
+    return _ref = {}, (0, _defineProperty2.default)(_ref, _constants.CHANNEL, {
+      mode: mode
+    }), (0, _defineProperty2.default)(_ref, "theme", (0, _defineProperty2.default)({}, _constants.CHANNEL, {
+      mode: mode
+    })), _ref;
+  }, [mode]);
+
+  var atlaskitTheme = _react.default.useCallback(function () {
+    return {
+      mode: mode
+    };
+  }, [mode]);
+
+  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/_react.default.createElement(_components.default.Provider, {
+    value: atlaskitTheme
+  }, children)));
+}

package/dist/cjs/ui/PortalProvider/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PortalRenderer = exports.PortalProviderAPI = exports.PortalProvider = void 0;
+exports.PortalRenderer = exports.PortalProviderWithThemeProviders = exports.PortalProviderAPI = exports.PortalProvider = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -37,6 +37,10 @@ var _enums = require("../../plugins/analytics/types/enums");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _components = require("@atlaskit/theme/components");
+
+var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
+
 var _class;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -48,7 +52,7 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
 
   var _super = _createSuper(PortalProviderAPI);
 
-  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext) {
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
     var _this;
 
     (0, _classCallCheck2.default)(this, PortalProviderAPI);
@@ -60,14 +64,43 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
     _this.intl = intl;
     _this.onAnalyticsEvent = onAnalyticsEvent;
     _this.useAnalyticsContext = analyticsContext;
+    _this.themeMode = themeMode;
     return _this;
   }
 
   (0, _createClass2.default)(PortalProviderAPI, [{
     key: "render",
     value: function render(children, container) {
+      var _this2 = this;
+
       var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+      if (this.themeMode) {
+        var childrenWithThemeProviders = function childrenWithThemeProviders() {
+          return /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
+            mode: _this2.themeMode
+          }, children());
+        };
+
+        this.portals.set(container, {
+          children: childrenWithThemeProviders,
+          hasAnalyticsContext: hasAnalyticsContext,
+          hasIntlContext: hasIntlContext
+        });
+
+        var _wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+        if (hasIntlContext) {
+          _wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
+            value: this.intl
+          }, _wrappedChildren);
+        }
+
+        (0, _reactDom.unstable_renderSubtreeIntoContainer)(this.context, _wrappedChildren, container);
+        return;
+      }
+
       this.portals.set(container, {
         children: children,
         hasAnalyticsContext: hasAnalyticsContext,
@@ -89,28 +122,28 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   }, {
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
-      var _this2 = this;
+      var _this3 = this;
 
       var intl = _ref.intl;
       this.intl = intl;
       this.portals.forEach(function (portal, container) {
-        if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
+        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
 
         var wrappedChildren = portal.children();
 
-        if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
+        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
           wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, wrappedChildren);
         }
 
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
-            value: _this2.intl
+            value: _this3.intl
           }, wrappedChildren);
         }
 
-        (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this2.context, wrappedChildren, container);
+        (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this3.context, wrappedChildren, container);
       });
     }
   }, {
@@ -157,12 +190,12 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
   var _super2 = _createSuper(BasePortalProvider);
 
   function BasePortalProvider(props) {
-    var _this3;
+    var _this4;
 
     (0, _classCallCheck2.default)(this, BasePortalProvider);
-    _this3 = _super2.call(this, props);
-    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
-    return _this3;
+    _this4 = _super2.call(this, props);
+    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this4;
   }
 
   (0, _createClass2.default)(BasePortalProvider, [{
@@ -185,27 +218,41 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
 var PortalProvider = (0, _reactIntlNext.injectIntl)(BasePortalProvider);
 exports.PortalProvider = PortalProvider;
 
+var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var globalTheme = (0, _components.useGlobalTheme)();
+  return /*#__PURE__*/_react.default.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
+
+exports.PortalProviderWithThemeProviders = PortalProviderWithThemeProviders;
+
 var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
   (0, _inherits2.default)(PortalRenderer, _React$Component2);
 
   var _super3 = _createSuper(PortalRenderer);
 
   function PortalRenderer(props) {
-    var _this4;
+    var _this5;
 
     (0, _classCallCheck2.default)(this, PortalRenderer);
-    _this4 = _super3.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this4), "handleUpdate", function (portals) {
-      return _this4.setState({
+    _this5 = _super3.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this5), "handleUpdate", function (portals) {
+      return _this5.setState({
         portals: portals
       });
     });
-    props.portalProviderAPI.setContext((0, _assertThisInitialized2.default)(_this4));
-    props.portalProviderAPI.on('update', _this4.handleUpdate);
-    _this4.state = {
+    props.portalProviderAPI.setContext((0, _assertThisInitialized2.default)(_this5));
+    props.portalProviderAPI.on('update', _this5.handleUpdate);
+    _this5.state = {
       portals: new Map()
     };
-    return _this4;
+    return _this5;
   }
 
   (0, _createClass2.default)(PortalRenderer, [{

package/dist/cjs/utils/check-if-mobile-bridge.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIfMobileBridge = checkIfMobileBridge;
+
+function checkIfMobileBridge() {
+  /**
+   * This variable is setup on mobile prior to the editor being
+   * rendered.
+   *
+   * -- packages/editor/editor-mobile-bridge/src/editor/native-to-web/bridge-initialiser.ts
+   * - packages/editor/editor-mobile-bridge/src/__tests__/integration-webview/_mocks/editor-component.tsx
+   */
+  var isMobileBridge = typeof window !== 'undefined' && 'bridge' in window && // @ts-ignore
+  'mediaMap' in window.bridge;
+  return isMobileBridge;
+}

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "164.0.3";
+var version = "164.0.4";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "164.0.3",
+	"version": "164.0.4",
 	"sideEffects": false
 }

package/dist/es2019/editor.js

@@ -18,7 +18,7 @@ import { getUiComponent } from './create-editor';
 import EditorActions from './actions';
 import { ReactEditorView } from './create-editor';
 import EditorContext from './ui/EditorContext';
-import { PortalProvider, PortalRenderer } from './ui/PortalProvider';
+import { PortalProvider, PortalProviderWithThemeProviders, PortalRenderer } from './ui/PortalProvider';
 import { nextMajorVersion } from './version-wrapper';
 import { ContextAdapter } from './nodeviews/context-adapter';
 import measurements from './utils/performance/measure-enum';
@@ -27,6 +27,7 @@ import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from './plugin
 import ErrorBoundary from './create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from './plugins/feature-flags-context/feature-flags-from-props';
 import { RenderTracking } from './utils/performance/components/RenderTracking';
+import { checkIfMobileBridge } from './utils/check-if-mobile-bridge';
 const fullHeight = css`
   height: 100%;
 `;
@@ -423,6 +424,22 @@ export default class Editor extends React.Component {
     const renderTracking = (_this$props$performan3 = this.props.performanceTracking) === null || _this$props$performan3 === void 0 ? void 0 : (_this$props$performan4 = _this$props$performan3.renderTracking) === null || _this$props$performan4 === void 0 ? void 0 : _this$props$performan4.editor;
     const renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
     const useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
+    /**
+     * The PortalProviderWithThemeProviders renders portals with atlaskit
+     * and the deprecated styled components theme providers.
+     *
+     * Without this the node views react trees;
+     * - do not have access to the atlaskit theme via the `useGlobalTheme` hook
+     * - do not have access to the theme when using the `styled`${({theme}) => theme.}` api.
+     *
+     * Added for a mobile regression, which needed to be fixed on master.
+     * Once this makes it's way to develop, we should consider making it the default
+     * behaviour.
+     *
+     * https://product-fabric.atlassian.net/browse/ED-14204
+     */
+
+    const EnvironmentDrivenPortalProvider = checkIfMobileBridge() ? PortalProviderWithThemeProviders : PortalProvider;
     return jsx(FabricEditorAnalyticsContext, {
       data: {
         packageName: name,
@@ -446,7 +463,7 @@ export default class Editor extends React.Component {
         css: fullHeight
       }, jsx(EditorContext, {
         editorActions: this.editorActions
-      }, jsx(ContextAdapter, null, jsx(PortalProvider, {
+      }, jsx(ContextAdapter, null, jsx(EnvironmentDrivenPortalProvider, {
         onAnalyticsEvent: this.handleAnalyticsEvent,
         useAnalyticsContext: this.props.UNSAFE_useAnalyticsContext,
         render: portalProviderAPI => jsx(Fragment, null, jsx(ReactEditorView, {

package/dist/es2019/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+export function PortalProviderThemeProviders(props) {
+  const {
+    children,
+    mode
+  } = props;
+  const styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  () => ({
+    [CHANNEL]: {
+      mode
+    },
+    theme: {
+      [CHANNEL]: {
+        mode
+      }
+    }
+  }), [mode]);
+  const atlaskitTheme = React.useCallback(() => ({
+    mode
+  }), [mode]);
+  return /*#__PURE__*/React.createElement(DeprectateStyledComponentsProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+    value: atlaskitTheme
+  }, children)));
+}

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

@@ -8,9 +8,11 @@ import PropTypes from 'prop-types';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
 import { EventDispatcher } from '../../event-dispatcher';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types/enums';
-import { injectIntl, RawIntlProvider } from 'react-intl-next';
+import { useIntl, RawIntlProvider, injectIntl } from 'react-intl-next';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export class PortalProviderAPI extends EventDispatcher {
-  constructor(intl, onAnalyticsEvent, analyticsContext) {
+  constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
     super();
 
     _defineProperty(this, "portals", new Map());
@@ -22,9 +24,32 @@ export class PortalProviderAPI extends EventDispatcher {
     this.intl = intl;
     this.onAnalyticsEvent = onAnalyticsEvent;
     this.useAnalyticsContext = analyticsContext;
+    this.themeMode = themeMode;
   }
 
   render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
+    if (this.themeMode) {
+      const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+        mode: this.themeMode
+      }, children());
+
+      this.portals.set(container, {
+        children: childrenWithThemeProviders,
+        hasAnalyticsContext,
+        hasIntlContext
+      });
+      let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+      if (hasIntlContext) {
+        wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+          value: this.intl
+        }, wrappedChildren);
+      }
+
+      unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
+      return;
+    }
+
     this.portals.set(container, {
       children,
       hasAnalyticsContext,
@@ -105,7 +130,7 @@ export class PortalProviderAPI extends EventDispatcher {
 class BasePortalProvider extends React.Component {
   constructor(props) {
     super(props);
-    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
+    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
   }
 
   render() {
@@ -123,6 +148,17 @@ class BasePortalProvider extends React.Component {
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
 
 export const PortalProvider = injectIntl(BasePortalProvider);
+export const PortalProviderWithThemeProviders = props => {
+  const intl = useIntl();
+  const globalTheme = useGlobalTheme();
+  return /*#__PURE__*/React.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
 export class PortalRenderer extends React.Component {
   constructor(props) {
     super(props);

package/dist/es2019/utils/check-if-mobile-bridge.js

@@ -0,0 +1,12 @@
+export function checkIfMobileBridge() {
+  /**
+   * This variable is setup on mobile prior to the editor being
+   * rendered.
+   *
+   * -- packages/editor/editor-mobile-bridge/src/editor/native-to-web/bridge-initialiser.ts
+   * - packages/editor/editor-mobile-bridge/src/__tests__/integration-webview/_mocks/editor-component.tsx
+   */
+  const isMobileBridge = typeof window !== 'undefined' && 'bridge' in window && // @ts-ignore
+  'mediaMap' in window.bridge;
+  return isMobileBridge;
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "164.0.3";
+export const version = "164.0.4";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "164.0.3",
+	"version": "164.0.4",
 	"sideEffects": false
 }

package/dist/esm/editor.js

@@ -37,7 +37,7 @@ import { getUiComponent } from './create-editor';
 import EditorActions from './actions';
 import { ReactEditorView } from './create-editor';
 import EditorContext from './ui/EditorContext';
-import { PortalProvider, PortalRenderer } from './ui/PortalProvider';
+import { PortalProvider, PortalProviderWithThemeProviders, PortalRenderer } from './ui/PortalProvider';
 import { nextMajorVersion } from './version-wrapper';
 import { ContextAdapter } from './nodeviews/context-adapter';
 import measurements from './utils/performance/measure-enum';
@@ -46,6 +46,7 @@ import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from './plugin
 import ErrorBoundary from './create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from './plugins/feature-flags-context/feature-flags-from-props';
 import { RenderTracking } from './utils/performance/components/RenderTracking';
+import { checkIfMobileBridge } from './utils/check-if-mobile-bridge';
 var fullHeight = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
 
 var Editor = /*#__PURE__*/function (_React$Component) {
@@ -518,6 +519,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       var renderTracking = (_this$props$performan = this.props.performanceTracking) === null || _this$props$performan === void 0 ? void 0 : (_this$props$performan2 = _this$props$performan.renderTracking) === null || _this$props$performan2 === void 0 ? void 0 : _this$props$performan2.editor;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
+      /**
+       * The PortalProviderWithThemeProviders renders portals with atlaskit
+       * and the deprecated styled components theme providers.
+       *
+       * Without this the node views react trees;
+       * - do not have access to the atlaskit theme via the `useGlobalTheme` hook
+       * - do not have access to the theme when using the `styled`${({theme}) => theme.}` api.
+       *
+       * Added for a mobile regression, which needed to be fixed on master.
+       * Once this makes it's way to develop, we should consider making it the default
+       * behaviour.
+       *
+       * https://product-fabric.atlassian.net/browse/ED-14204
+       */
+
+      var EnvironmentDrivenPortalProvider = checkIfMobileBridge() ? PortalProviderWithThemeProviders : PortalProvider;
       return jsx(FabricEditorAnalyticsContext, {
         data: {
           packageName: name,
@@ -542,7 +559,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
             css: fullHeight
           }, jsx(EditorContext, {
             editorActions: _this5.editorActions
-          }, jsx(ContextAdapter, null, jsx(PortalProvider, {
+          }, jsx(ContextAdapter, null, jsx(EnvironmentDrivenPortalProvider, {
             onAnalyticsEvent: _this5.handleAnalyticsEvent,
             useAnalyticsContext: _this5.props.UNSAFE_useAnalyticsContext,
             render: function render(portalProviderAPI) {

package/dist/esm/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+export function PortalProviderThemeProviders(props) {
+  var children = props.children,
+      mode = props.mode;
+  var styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  function () {
+    var _ref;
+
+    return _ref = {}, _defineProperty(_ref, CHANNEL, {
+      mode: mode
+    }), _defineProperty(_ref, "theme", _defineProperty({}, CHANNEL, {
+      mode: mode
+    })), _ref;
+  }, [mode]);
+  var atlaskitTheme = React.useCallback(function () {
+    return {
+      mode: mode
+    };
+  }, [mode]);
+  return /*#__PURE__*/React.createElement(DeprectateStyledComponentsProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+    value: atlaskitTheme
+  }, children)));
+}

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

@@ -19,13 +19,15 @@ import PropTypes from 'prop-types';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
 import { EventDispatcher } from '../../event-dispatcher';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types/enums';
-import { injectIntl, RawIntlProvider } from 'react-intl-next';
+import { useIntl, RawIntlProvider, injectIntl } from 'react-intl-next';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   _inherits(PortalProviderAPI, _EventDispatcher);
 
   var _super = _createSuper(PortalProviderAPI);
 
-  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext) {
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
     var _this;
 
     _classCallCheck(this, PortalProviderAPI);
@@ -41,14 +43,43 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
     _this.intl = intl;
     _this.onAnalyticsEvent = onAnalyticsEvent;
     _this.useAnalyticsContext = analyticsContext;
+    _this.themeMode = themeMode;
     return _this;
   }
 
   _createClass(PortalProviderAPI, [{
     key: "render",
     value: function render(children, container) {
+      var _this2 = this;
+
       var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+      if (this.themeMode) {
+        var childrenWithThemeProviders = function childrenWithThemeProviders() {
+          return /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+            mode: _this2.themeMode
+          }, children());
+        };
+
+        this.portals.set(container, {
+          children: childrenWithThemeProviders,
+          hasAnalyticsContext: hasAnalyticsContext,
+          hasIntlContext: hasIntlContext
+        });
+
+        var _wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+        if (hasIntlContext) {
+          _wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+            value: this.intl
+          }, _wrappedChildren);
+        }
+
+        unstable_renderSubtreeIntoContainer(this.context, _wrappedChildren, container);
+        return;
+      }
+
       this.portals.set(container, {
         children: children,
         hasAnalyticsContext: hasAnalyticsContext,
@@ -70,28 +101,28 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   }, {
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
-      var _this2 = this;
+      var _this3 = this;
 
       var intl = _ref.intl;
       this.intl = intl;
       this.portals.forEach(function (portal, container) {
-        if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
+        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
 
         var wrappedChildren = portal.children();
 
-        if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
+        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
           wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, wrappedChildren);
         }
 
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
-            value: _this2.intl
+            value: _this3.intl
           }, wrappedChildren);
         }
 
-        unstable_renderSubtreeIntoContainer(_this2.context, wrappedChildren, container);
+        unstable_renderSubtreeIntoContainer(_this3.context, wrappedChildren, container);
       });
     }
   }, {
@@ -137,13 +168,13 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
   var _super2 = _createSuper(BasePortalProvider);
 
   function BasePortalProvider(props) {
-    var _this3;
+    var _this4;
 
     _classCallCheck(this, BasePortalProvider);
 
-    _this3 = _super2.call(this, props);
-    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
-    return _this3;
+    _this4 = _super2.call(this, props);
+    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this4;
   }
 
   _createClass(BasePortalProvider, [{
@@ -166,30 +197,41 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
 
 export var PortalProvider = injectIntl(BasePortalProvider);
+export var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+  var intl = useIntl();
+  var globalTheme = useGlobalTheme();
+  return /*#__PURE__*/React.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
 export var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
   _inherits(PortalRenderer, _React$Component2);
 
   var _super3 = _createSuper(PortalRenderer);
 
   function PortalRenderer(props) {
-    var _this4;
+    var _this5;
 
     _classCallCheck(this, PortalRenderer);
 
-    _this4 = _super3.call(this, props);
+    _this5 = _super3.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this4), "handleUpdate", function (portals) {
-      return _this4.setState({
+    _defineProperty(_assertThisInitialized(_this5), "handleUpdate", function (portals) {
+      return _this5.setState({
         portals: portals
       });
     });
 
-    props.portalProviderAPI.setContext(_assertThisInitialized(_this4));
-    props.portalProviderAPI.on('update', _this4.handleUpdate);
-    _this4.state = {
+    props.portalProviderAPI.setContext(_assertThisInitialized(_this5));
+    props.portalProviderAPI.on('update', _this5.handleUpdate);
+    _this5.state = {
       portals: new Map()
     };
-    return _this4;
+    return _this5;
   }
 
   _createClass(PortalRenderer, [{

package/dist/esm/utils/check-if-mobile-bridge.js

@@ -0,0 +1,12 @@
+export function checkIfMobileBridge() {
+  /**
+   * This variable is setup on mobile prior to the editor being
+   * rendered.
+   *
+   * -- packages/editor/editor-mobile-bridge/src/editor/native-to-web/bridge-initialiser.ts
+   * - packages/editor/editor-mobile-bridge/src/__tests__/integration-webview/_mocks/editor-component.tsx
+   */
+  var isMobileBridge = typeof window !== 'undefined' && 'bridge' in window && // @ts-ignore
+  'mediaMap' in window.bridge;
+  return isMobileBridge;
+}

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "164.0.3";
+export var version = "164.0.4";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "164.0.3",
+	"version": "164.0.4",
 	"sideEffects": false
 }

package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts

@@ -19,6 +19,7 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
     'aria-haspopup'?: boolean | "dialog" | "menu" | "false" | "true" | "listbox" | "tree" | "grid" | undefined;
     children?: import("react").ReactNode;
     ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+    theme?: any;
     pattern?: string | undefined;
     value?: string | number | string[] | undefined;
     type?: string | undefined;
@@ -364,8 +365,7 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     css?: import("@emotion/core").InterpolationWithTheme<any>;
-    theme?: any;
-}, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "theme"> & import("react").RefAttributes<HTMLDivElement>>;
+}, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "theme" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const positionedOverEditorStyle: import("@emotion/react").SerializedStyles;
 export declare const contentArea: import("@emotion/react").SerializedStyles;
 export declare const sidebarArea: import("@emotion/react").SerializedStyles;

package/dist/types/ui/ContentStyles/index.d.ts

@@ -7,6 +7,6 @@ declare type ContentStylesProps = {
     featureFlags?: FeatureFlags;
 };
 declare type Props = Omit<ContentStylesProps & React.HTMLProps<HTMLDivElement>, 'featureFlags'>;
-export declare const createEditorContentStyle: (styles?: SerializedStyles | undefined) => React.ForwardRefExoticComponent<Pick<Props, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "theme"> & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "theme"> & React.RefAttributes<HTMLDivElement>>;
+export declare const createEditorContentStyle: (styles?: SerializedStyles | undefined) => React.ForwardRefExoticComponent<Pick<Props, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "theme" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "default" | "mediaGroup" | "media" | "content" | "aria-label" | "aria-haspopup" | "children" | "theme" | "pattern" | "value" | "type" | "width" | "accessKey" | "draggable" | "hidden" | "lang" | "className" | "id" | "prefix" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "defaultValue" | "onError" | "onChange" | "open" | "onFocus" | "onBlur" | "placeholder" | "autoFocus" | "color" | "name" | "key" | "action" | "disabled" | "height" | "target" | "start" | "onClick" | "onMouseEnter" | "onMouseLeave" | "selected" | "href" | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/types/ui/PortalProvider/PortalProviderThemesProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ThemeModes } from '@atlaskit/theme/types';
+export declare function PortalProviderThemeProviders(props: {
+    mode: ThemeModes;
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/types/ui/PortalProvider/index.d.ts

@@ -2,10 +2,12 @@ import React from 'react';
 import { EventDispatcher } from '../../event-dispatcher';
 import { FireAnalyticsCallback } from '../../plugins/analytics/fire-analytics-event';
 import { IntlShape, WrappedComponentProps } from 'react-intl-next';
+import type { ThemeModes } from '@atlaskit/theme/types';
 export declare type BasePortalProviderProps = {
     render: (portalProviderAPI: PortalProviderAPI) => React.ReactChild | JSX.Element | null;
     onAnalyticsEvent?: FireAnalyticsCallback;
     useAnalyticsContext?: boolean;
+    themeMode?: ThemeModes;
 } & WrappedComponentProps;
 export declare type Portals = Map<HTMLElement, React.ReactChild>;
 export declare type PortalRendererState = {
@@ -22,7 +24,8 @@ export declare class PortalProviderAPI extends EventDispatcher {
     intl: IntlShape;
     onAnalyticsEvent?: FireAnalyticsCallback;
     useAnalyticsContext?: boolean;
-    constructor(intl: IntlShape, onAnalyticsEvent?: FireAnalyticsCallback, analyticsContext?: boolean);
+    themeMode?: ThemeModes;
+    constructor(intl: IntlShape, onAnalyticsEvent?: FireAnalyticsCallback, analyticsContext?: boolean, themeMode?: ThemeModes);
     setContext: (context: any) => void;
     render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, hasAnalyticsContext?: boolean, hasIntlContext?: boolean): void;
     forceUpdate({ intl }: {
@@ -33,6 +36,7 @@ export declare class PortalProviderAPI extends EventDispatcher {
 export declare const PortalProvider: React.FC<import("react-intl-next").WithIntlProps<BasePortalProviderProps>> & {
     WrappedComponent: React.ComponentType<BasePortalProviderProps>;
 };
+export declare const PortalProviderWithThemeProviders: (props: Omit<BasePortalProviderProps, 'intl' | 'themeMode'>) => JSX.Element;
 export declare class PortalRenderer extends React.Component<{
     portalProviderAPI: PortalProviderAPI;
 }, PortalRendererState> {

package/dist/types/utils/check-if-mobile-bridge.d.ts

@@ -0,0 +1 @@
+export declare function checkIfMobileBridge(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "164.0.3",
+  "version": "164.0.4",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -131,7 +131,8 @@
     "@atlaskit/smart-card": "^18.0.14",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1"
+    "react-intl-next": "npm:react-intl@^5.18.1",
+    "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/atlassian-navigation": "^2.1.0",