@atlaskit/editor-core 180.0.0 → 180.1.0

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

@@ -10,9 +10,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _ColorPalette = _interopRequireDefault(require("../ColorPalette"));
 var _common = require("../ColorPalette/Palettes/common");
@@ -26,7 +29,12 @@ var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObj
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colorPickerWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+var colorPickerWrapper = function colorPickerWrapper(theme) {
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
+  })(theme), _colors.N60A, _colors.N60A);
+};
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
@@ -36,8 +44,20 @@ var ColorPickerButton = function ColorPickerButton(props) {
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isPopupOpen = _React$useState2[0],
     setIsPopupOpen = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isPopupPositioned = _React$useState4[0],
+    setIsPopupPositioned = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isOpenedByKeyboard = _React$useState6[0],
+    setIsOpenedByKeyboard = _React$useState6[1];
   var togglePopup = function togglePopup() {
     setIsPopupOpen(!isPopupOpen);
+    if (!isPopupOpen) {
+      setIsOpenedByKeyboard(false);
+      setIsPopupPositioned(false);
+    }
   };
   _react.default.useEffect(function () {
     if (props.setDisableParentScroll) {
@@ -45,9 +65,25 @@ var ColorPickerButton = function ColorPickerButton(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPopupOpen]);
+  var focusButton = function focusButton() {
+    var _buttonRef$current;
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
+  var handleEsc = _react.default.useCallback(function () {
+    setIsOpenedByKeyboard(false);
+    setIsPopupPositioned(false);
+    setIsPopupOpen(false);
+    focusButton();
+  }, []);
+  var onPositionCalculated = _react.default.useCallback(function (position) {
+    setIsPopupPositioned(true);
+    return position;
+  }, []);
   var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
   var onColorSelected = function onColorSelected(color, label) {
+    setIsOpenedByKeyboard(false);
     setIsPopupOpen(false);
+    setIsPopupPositioned(false);
     if (props.onChange) {
       if (props.createAnalyticsEvent) {
         // fire analytics
@@ -69,11 +105,16 @@ var ColorPickerButton = function ColorPickerButton(props) {
       });
       newPalette && props.onChange(newPalette);
     }
+    focusButton();
   };
   var renderPopup = function renderPopup() {
     if (!isPopupOpen || !buttonRef.current) {
       return;
     }
+    var selectedColor = props.currentColor || null;
+    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(props.colorPalette, selectedColor, props.cols),
+      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return (0, _react2.jsx)(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
@@ -86,20 +127,34 @@ var ColorPickerButton = function ColorPickerButton(props) {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup"
+      ariaLabel: "Color picker popup",
+      onPositionCalculated: onPositionCalculated
     }, (0, _react2.jsx)("div", {
       css: colorPickerWrapper,
       "data-test-id": "color-picker-menu"
+    }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+      type: _uiMenu.ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      closeOnTab: true,
+      handleClose: function handleClose() {
+        return setIsPopupOpen(false);
+      },
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: isPopupPositioned
     }, (0, _react2.jsx)(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
-      selectedColor: props.currentColor || null,
+      selectedColor: selectedColor,
       onClick: onColorSelected,
-      handleClickOutside: togglePopup
-    })));
+      handleClickOutside: togglePopup,
+      handleEscapeKeydown: handleEsc,
+      hexToPaletteColor: props.hexToPaletteColor
+    }))));
   };
   var title = props.title || '';
-  var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), props.currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
+  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
+  var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 6px;\n    background-color: ", ";\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", "px;\n      height: ", "px;\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14, ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14);
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
   }, (0, _react2.jsx)(_tooltip.default, {
@@ -110,6 +165,13 @@ var ColorPickerButton = function ColorPickerButton(props) {
     "aria-label": title,
     spacing: "compact",
     onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     css: buttonStyle
   })), renderPopup());
 };

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -23,7 +23,7 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _analytics = require("../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _LoadingState = _interopRequireDefault(require("./LoadingState"));
 var _Header = _interopRequireDefault(require("./Header"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));

package/dist/cjs/ui/ContextPanel/context.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = void 0;
+exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = exports.ContextPanel = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,16 +15,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var _React$createContext = /*#__PURE__*/_react.default.createContext({
-    width: 0,
-    positionedOverEditor: false,
-    broadcastWidth: function broadcastWidth() {},
-    broadcastPosition: function broadcastPosition() {}
-  }),
-  Provider = _React$createContext.Provider,
-  Consumer = _React$createContext.Consumer;
-exports.ContextPanelConsumer = Consumer;
-exports.ContextPanelProvider = Provider;
+var ContextPanel = /*#__PURE__*/_react.default.createContext({
+  width: 0,
+  positionedOverEditor: false,
+  broadcastWidth: function broadcastWidth() {},
+  broadcastPosition: function broadcastPosition() {}
+});
+exports.ContextPanel = ContextPanel;
 var ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ContextPanelWidthProvider, _React$Component);
   var _super = _createSuper(ContextPanelWidthProvider);
@@ -70,4 +67,8 @@ var ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
   }]);
   return ContextPanelWidthProvider;
 }(_react.default.Component);
-exports.ContextPanelWidthProvider = ContextPanelWidthProvider;
+exports.ContextPanelWidthProvider = ContextPanelWidthProvider;
+var Provider = ContextPanel.Provider,
+  Consumer = ContextPanel.Consumer;
+exports.ContextPanelConsumer = Consumer;
+exports.ContextPanelProvider = Provider;

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

@@ -6,21 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _react = _interopRequireWildcard(require("react"));
 var _ToolbarArrowKeyNavigationProvider = require("../ToolbarArrowKeyNavigationProvider");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Dropdown = /*#__PURE__*/_react.default.memo(function (_ref) {
   var props = (0, _extends2.default)({}, _ref);
-  var keydownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
+  var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
   return (
     /*#__PURE__*/
     //This context is to handle the tab, Arrow Right/Left key events for dropdown.
     //Default context has the void callbacks for above key events
     _react.default.createElement(_uiMenu.Dropdown, (0, _extends2.default)({
-      keyDownHandlerContext: keydownHandlerContext
+      arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+        keyDownHandlerContext: keyDownHandlerContext
+      })
     }, props))
   );
 });

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

@@ -6,19 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _react = _interopRequireWildcard(require("react"));
 var _ToolbarArrowKeyNavigationProvider = require("../ToolbarArrowKeyNavigationProvider");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var props = (0, _extends2.default)({}, _ref);
-  var keydownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
+  var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
   //This context is to handle the tab, Arrow Right/Left key events for dropdown.
   //Default context has the void callbacks for above key events
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, (0, _extends2.default)({
-    keyDownHandlerContext: keydownHandlerContext
+    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+      keyDownHandlerContext: keyDownHandlerContext
+    })
   }, props));
 });
 var _default = DropdownMenu;

package/dist/cjs/ui/ElementBrowser/components/CategoryList.js

@@ -18,7 +18,7 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _constants = require("../constants");
 var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
-var _analytics = require("../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _templateObject;
 var _excluded = ["categories"],
   _excluded2 = ["buttonStyles"];

package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -20,7 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _fallback = _interopRequireDefault(require("../../../../plugins/quick-insert/assets/fallback"));
 var _TypeAheadListItem = require("../../../../plugins/type-ahead/ui/TypeAheadListItem");
 var _styles = require("../../../styles");

package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
 var _CategoryList = _interopRequireDefault(require("./CategoryList"));
 var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));

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

@@ -92,11 +92,11 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
   (0, _createClass2.default)(PanelTextInput, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.defaultValue !== this.props.defaultValue) {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.defaultValue !== this.props.defaultValue) {
         this.setState({
-          value: nextProps.defaultValue
+          value: this.props.defaultValue
         });
       }
     }

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

@@ -18,7 +18,7 @@ var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _analyticsNextStableReactContext = _interopRequireDefault(require("@atlaskit/analytics-next-stable-react-context"));
 var _eventDispatcher = require("../../event-dispatcher");
-var _enums = require("../../plugins/analytics/types/enums");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _reactIntlNext = require("react-intl-next");
 var _components = require("@atlaskit/theme/components");
 var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
@@ -112,9 +112,9 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
         if (this.onAnalyticsEvent) {
           this.onAnalyticsEvent({
             payload: {
-              action: _enums.ACTION.FAILED_TO_UNMOUNT,
-              actionSubject: _enums.ACTION_SUBJECT.EDITOR,
-              actionSubjectId: _enums.ACTION_SUBJECT_ID.REACT_NODE_VIEW,
+              action: _analytics.ACTION.FAILED_TO_UNMOUNT,
+              actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.REACT_NODE_VIEW,
               attributes: {
                 error: error,
                 domNodes: {
@@ -122,7 +122,7 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
                   child: container.firstElementChild ? container.firstElementChild.className : undefined
                 }
               },
-              eventType: _enums.EVENT_TYPE.OPERATIONAL
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
             }
           });
         }

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

@@ -1,48 +1,42 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _width = require("../../plugins/width");
 var _ui = require("@atlaskit/editor-common/ui");
 var _context = require("../ContextPanel/context");
-function useCreateWidthCallbacks(_ref) {
-  var setContextPanelWidth = _ref.setContextPanelWidth,
-    setContainerWidth = _ref.setContainerWidth;
-  var contextPanelWidthCallback = _react.default.useCallback(function (_ref2) {
-    var width = _ref2.width;
-    setContextPanelWidth(width);
-    return null;
-  }, [setContextPanelWidth]);
-  var containerWidthCallback = _react.default.useCallback(function (_ref3) {
-    var width = _ref3.width;
-    setContainerWidth(width);
-    return null;
-  }, [setContainerWidth]);
-  return [contextPanelWidthCallback, containerWidthCallback];
-}
-var WidthEmitter = function WidthEmitter(_ref4) {
-  var editorView = _ref4.editorView;
-  var _React$useState = _react.default.useState(0),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    contextPanelWidth = _React$useState2[0],
-    setContextPanelWidth = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(0),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    containerWidth = _React$useState4[0],
-    setContainerWidth = _React$useState4[1];
-  var _useCreateWidthCallba = useCreateWidthCallbacks({
-      setContextPanelWidth: setContextPanelWidth,
-      setContainerWidth: setContainerWidth
-    }),
-    _useCreateWidthCallba2 = (0, _slicedToArray2.default)(_useCreateWidthCallba, 2),
-    contextPanelWidthCallback = _useCreateWidthCallba2[0],
-    containerWidthCallback = _useCreateWidthCallba2[1];
-  _react.default.useEffect(function () {
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Why do we need this? Why not just use the width from the context directly rather than this?
+// Well my friend - some of the VR tests break, seemingly due to the fact that existing behaviour
+// assumes the initial value is 0, the width from context may not start from 0 however.
+// We should investigate further if we can remove this entirely but for now we'll do this
+// awkward workaround to keep the behaviour consistent.
+var useListener = function useListener(contextValue) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setValue(contextValue);
+  }, [contextValue]);
+  return value;
+};
+var WidthEmitter = function WidthEmitter(_ref) {
+  var editorView = _ref.editorView;
+  var _useContext = (0, _react.useContext)(_context.ContextPanel),
+    contextPanelWidthContext = _useContext.width;
+  var _useContext2 = (0, _react.useContext)(_ui.WidthContext),
+    containerWidthContext = _useContext2.width;
+  var containerWidth = useListener(containerWidthContext);
+  var contextPanelWidth = useListener(contextPanelWidthContext);
+  (0, _react.useEffect)(function () {
     var width = containerWidth - contextPanelWidth;
     if (width <= 0 || isNaN(width) || !editorView) {
       return;
@@ -58,7 +52,7 @@ var WidthEmitter = function WidthEmitter(_ref4) {
     dispatch(tr);
     return function () {};
   }, [editorView, contextPanelWidth, containerWidth]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, contextPanelWidthCallback), /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, containerWidthCallback));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
 var _default = WidthEmitter;
 exports.default = _default;

package/dist/cjs/utils/document.js

@@ -20,6 +20,7 @@ exports.isNodeEmpty = isNodeEmpty;
 exports.isProseMirrorSchemaCheckError = isProseMirrorSchemaCheckError;
 exports.isSelectionEndOfParagraph = void 0;
 exports.nodesBetweenChanged = nodesBetweenChanged;
+exports.processRawFragmentValue = processRawFragmentValue;
 exports.processRawValue = processRawValue;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorModel = require("prosemirror-model");
@@ -129,6 +130,20 @@ function bracketTyped(state) {
   }
   return false;
 }
+function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  var adfEntities = value.map(function (item) {
+    return processRawValue(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
+  }).filter(function (item) {
+    return Boolean(item);
+  });
+  if (adfEntities.length === 0) {
+    return;
+  }
+  return _prosemirrorModel.Fragment.from(adfEntities);
+}
 function processRawValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
   if (!value) {
     return;

package/dist/cjs/utils/extensions.js

@@ -12,8 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _providerHelpers = require("@atlaskit/editor-common/provider-helpers");
-var _enums = require("../plugins/analytics/types/enums");
-var _analytics = require("../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 /**
  * Utils to send analytics event when a extension is inserted using quickInsert
  */
@@ -21,15 +20,15 @@ function sendExtensionQuickInsertAnalytics(item, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
       payload: {
-        action: _enums.ACTION.INSERTED,
-        actionSubject: _enums.ACTION_SUBJECT.DOCUMENT,
-        actionSubjectId: _enums.ACTION_SUBJECT_ID.EXTENSION,
+        action: _analytics.ACTION.INSERTED,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.EXTENSION,
         attributes: {
           extensionType: item.extensionType,
           key: item.key,
-          inputMethod: _enums.INPUT_METHOD.QUICK_INSERT
+          inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
         },
-        eventType: _enums.EVENT_TYPE.TRACK
+        eventType: _analytics.EVENT_TYPE.TRACK
       }
     });
   }

package/dist/cjs/utils/get-editor-plugins.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _api = require("../selection-api/api");
+var _createPluginsList = _interopRequireDefault(require("../create-editor/create-plugins-list"));
+/**
+ *
+ * Retrieve the editor props using createPluginList default behaviour.
+ *
+ * @param GetEditorPlugins props used to initialise the plugins
+ * @returns list of editor plugins
+ */
+var getEditorPlugins = function getEditorPlugins(_ref) {
+  var _props$dangerouslyApp, _props$dangerouslyApp2;
+  var props = _ref.props,
+    prevAppearance = _ref.prevAppearance,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    insertNodeAPI = _ref.insertNodeAPI,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var dangerouslyAppendedPlugins = (_props$dangerouslyApp = (_props$dangerouslyApp2 = props.dangerouslyAppendPlugins) === null || _props$dangerouslyApp2 === void 0 ? void 0 : _props$dangerouslyApp2.__plugins) !== null && _props$dangerouslyApp !== void 0 ? _props$dangerouslyApp : [];
+  var selectionAPI = (0, _api.createEditorSelectionAPI)();
+  return [].concat((0, _toConsumableArray2.default)((0, _createPluginsList.default)(props, {
+    appearance: prevAppearance
+  }, createAnalyticsEvent, insertNodeAPI, editorAnalyticsAPI, selectionAPI)), (0, _toConsumableArray2.default)(dangerouslyAppendedPlugins));
+};
+var _default = getEditorPlugins;
+exports.default = _default;

package/dist/cjs/utils/linking-utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unlinkPayload = exports.buildVisitedLinkPayload = exports.buildOpenedSettingsPayload = exports.buildEditLinkPayload = void 0;
-var _analytics = require("../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var buildEditLinkPayload = function buildEditLinkPayload(type) {
   return {
     action: _analytics.ACTION.CLICKED,

package/dist/cjs/utils/performance/components/RenderTracking.js

@@ -8,7 +8,7 @@ exports.RenderTracking = RenderTracking;
 var _react = require("react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _utils = require("@atlaskit/editor-common/utils");
-var _analytics = require("../../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 function RenderTracking(props) {
   var debouncedHandleAnalyticsEvent = (0, _react.useMemo)(function () {
     return (0, _debounce.default)(props.handleAnalyticsEvent, 500);

package/dist/cjs/utils/performance/safer-transactions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.freezeUnsafeTransactionProperties = exports.UNSAFE_PROPERTY_SET_ERROR = void 0;
-var _analytics = require("../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var UNSAFE_PROPERTY_SET_ERROR = 'Setting an unsafe property on transaction after dispatch!';
 
 // since selection uses curSelection under the hood, we guard setSelection instead

package/dist/cjs/utils/prepare-extension-provider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+function prepareExtensionProvidersInternal(editorActions, extensionProviders) {
+  if (!extensionProviders) {
+    return;
+  }
+  if (typeof extensionProviders === 'function') {
+    return (0, _extensions.combineExtensionProviders)(extensionProviders(editorActions));
+  }
+  return (0, _extensions.combineExtensionProviders)(extensionProviders);
+}
+var prepareExtensionProvider = function prepareExtensionProvider(getEditorActions) {
+  return (0, _memoizeOne.default)(function (extensionProviders) {
+    return prepareExtensionProvidersInternal(getEditorActions(), extensionProviders);
+  });
+};
+var _default = prepareExtensionProvider;
+exports.default = _default;

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 = "180.0.0";
+var version = "180.1.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

package/dist/es2019/actions/index.js

@@ -3,7 +3,7 @@ import { Node } from 'prosemirror-model';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { findParentNode } from 'prosemirror-utils';
 import { toJSON } from '../utils';
-import { processRawValue, isEmptyDocument } from '../utils/document';
+import { processRawValue, isEmptyDocument, processRawFragmentValue } from '../utils/document';
 import { getEditorValueWithMedia, __temporaryFixForConfigPanel } from '../utils/action';
 import { createDispatch } from '../event-dispatcher';
 import { safeInsert } from 'prosemirror-utils';
@@ -225,7 +225,7 @@ export default class EditorActions {
     const {
       schema
     } = state;
-    const content = processRawValue(schema, rawValue);
+    const content = Array.isArray(rawValue) ? processRawFragmentValue(schema, rawValue) : processRawValue(schema, rawValue);
     if (!content) {
       return false;
     }