@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/cjs/plugins/type-ahead/ui/hooks/use-resize-observer.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = exports.ResizeObserverProvider = exports.ResizeObserverContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+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; }
+
+var Context = /*#__PURE__*/(0, _react.createContext)(null);
+var ResizeObserverContext = Context;
+exports.ResizeObserverContext = ResizeObserverContext;
+
+var ResizeObserverProvider = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var children = _ref.children;
+  var instance = (0, _react.useMemo)(function () {
+    if (!_editorCommon.browser.supportsResizeObserver) {
+      return null;
+    }
+
+    return new window.ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var onResize = entry.target.onResize;
+
+        if (onResize) {
+          onResize(entry);
+        }
+      });
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (instance) {
+        instance.disconnect();
+      }
+    };
+  }, [instance]);
+  return /*#__PURE__*/_react.default.createElement(Context.Provider, {
+    value: instance
+  }, children);
+});
+
+exports.ResizeObserverProvider = ResizeObserverProvider;
+
+var useResizeObserver = function useResizeObserver(targetRef, onResize) {
+  var resizeObserver = (0, _react.useContext)(Context);
+  (0, _react.useLayoutEffect)(function () {
+    if (!targetRef || !targetRef.current || resizeObserver === null) {
+      return;
+    }
+
+    var target = targetRef.current;
+    target.onResize = onResize;
+    resizeObserver.observe(target);
+    return function () {
+      resizeObserver.unobserve(target);
+      delete target.onResize;
+    };
+  }, [targetRef, resizeObserver, onResize]);
+};
+
+exports.useResizeObserver = useResizeObserver;

package/dist/cjs/plugins/type-ahead/utils.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveSelectedIndex = exports.findHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadHandler = exports.getPluginState = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.findTypeAheadDecorations = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorView = require("prosemirror-view");
+
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
+var _key = require("./pm-plugins/key");
+
+var _updateSelectedIndex = require("./commands/update-selected-index");
+
+var _statsModifier = require("./stats-modifier");
+
+var findTypeAheadDecorations = function findTypeAheadDecorations(state) {
+  var selection = state.selection;
+
+  var _typeAheadPluginKey$g = _key.pluginKey.getState(state),
+      decorationSet = _typeAheadPluginKey$g.decorationSet;
+
+  if (!decorationSet || decorationSet === _prosemirrorView.DecorationSet.empty || !(selection instanceof _prosemirrorState.TextSelection) || !selection.$cursor) {
+    return null;
+  }
+
+  var pos = selection.$cursor.pos;
+  var decoration = decorationSet.find(pos, pos, function (spec) {
+    return spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration;
+  });
+
+  if (!decoration || decoration.length !== 1) {
+    return null;
+  }
+
+  return decoration[0];
+};
+
+exports.findTypeAheadDecorations = findTypeAheadDecorations;
+
+var isTypeAheadHandler = function isTypeAheadHandler(handler) {
+  return handler && Object.values(_typeAhead.TypeAheadAvailableNodes).includes(handler.id) && typeof handler.trigger === 'string' && typeof handler.selectItem === 'function' && typeof handler.getItems === 'function';
+};
+
+exports.isTypeAheadHandler = isTypeAheadHandler;
+
+var isTypeAheadOpen = function isTypeAheadOpen(editorState) {
+  var _typeAheadPluginKey$g2, _typeAheadPluginKey$g3;
+
+  return (_key.pluginKey === null || _key.pluginKey === void 0 ? void 0 : (_typeAheadPluginKey$g2 = _key.pluginKey.getState(editorState)) === null || _typeAheadPluginKey$g2 === void 0 ? void 0 : (_typeAheadPluginKey$g3 = _typeAheadPluginKey$g2.decorationSet) === null || _typeAheadPluginKey$g3 === void 0 ? void 0 : _typeAheadPluginKey$g3.find().length) > 0;
+};
+
+exports.isTypeAheadOpen = isTypeAheadOpen;
+
+var getPluginState = function getPluginState(editorState) {
+  return _key.pluginKey.getState(editorState);
+};
+
+exports.getPluginState = getPluginState;
+
+var getTypeAheadHandler = function getTypeAheadHandler(editorState) {
+  return _key.pluginKey.getState(editorState).triggerHandler;
+};
+
+exports.getTypeAheadHandler = getTypeAheadHandler;
+
+var getTypeAheadQuery = function getTypeAheadQuery(editorState) {
+  return _key.pluginKey.getState(editorState).query;
+};
+
+exports.getTypeAheadQuery = getTypeAheadQuery;
+
+var isTypeAheadAllowed = function isTypeAheadAllowed(state) {
+  var isOpen = isTypeAheadOpen(state); // if the TypeAhead is open
+  // we should not allow it
+
+  return !isOpen;
+};
+
+exports.isTypeAheadAllowed = isTypeAheadAllowed;
+
+var findHandler = function findHandler(id, state) {
+  var pluginState = _key.pluginKey.getState(state);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  var typeAheadHandlers = pluginState.typeAheadHandlers;
+  return typeAheadHandlers.find(function (h) {
+    return h.id === id;
+  }) || null;
+};
+
+exports.findHandler = findHandler;
+
+var moveSelectedIndex = function moveSelectedIndex(_ref) {
+  var editorView = _ref.editorView,
+      direction = _ref.direction;
+  return function () {
+    var typeAheadState = getPluginState(editorView.state);
+
+    if (!typeAheadState) {
+      return;
+    }
+
+    var selectedIndex = typeAheadState.selectedIndex,
+        items = typeAheadState.items;
+    var stats = typeAheadState.stats instanceof _statsModifier.StatsModifier ? typeAheadState.stats : new _statsModifier.StatsModifier();
+    var nextIndex = 0;
+
+    if (direction === 'next') {
+      stats.increaseArrowDown();
+      nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
+    } else {
+      stats.increaseArrowUp();
+      nextIndex = selectedIndex === 0 ? items.length - 1 : selectedIndex - 1;
+    }
+
+    (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex)(editorView.state, editorView.dispatch);
+  };
+};
+
+exports.moveSelectedIndex = moveSelectedIndex;

package/dist/cjs/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -35,6 +35,8 @@ var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButt
 
 var _messages = require("../../messages");
 
+var _api = require("../../../type-ahead/api");
+
 var _commands = require("../../commands");
 
 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); }
@@ -45,6 +47,35 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 closeTypeAheadAndRunCommand = function closeTypeAheadAndRunCommand(editorView) {
+  return function (command) {
+    if (!editorView) {
+      return;
+    }
+
+    var tool = (0, _api.createTypeAheadTools)(editorView);
+
+    if (tool.isOpen()) {
+      tool.close({
+        attachCommand: command,
+        insertCurrentQueryAsRawText: false
+      });
+    } else {
+      command(editorView.state, editorView.dispatch);
+    }
+  };
+};
+
+var forceFocus = function forceFocus(editorView) {
+  return function (command) {
+    closeTypeAheadAndRunCommand(editorView)(command);
+
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  };
+};
+
 var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ToolbarUndoRedo, _PureComponent);
 
@@ -66,11 +97,11 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           formatMessage = _this$props.intl.formatMessage;
 
       var handleUndo = function handleUndo() {
-        (0, _commands.undoFromToolbar)(editorView.state, editorView.dispatch);
+        forceFocus(editorView)(_commands.undoFromToolbar);
       };
 
       var handleRedo = function handleRedo() {
-        (0, _commands.redoFromToolbar)(editorView.state, editorView.dispatch);
+        forceFocus(editorView)(_commands.redoFromToolbar);
       };
 
       var labelUndo = formatMessage(_messages.messages.undo);

package/dist/cjs/plugins/view-update-subscription/index.js

@@ -41,7 +41,7 @@ var Tracker = function Tracker() {
 var pluginKey = new _prosemirrorState.PluginKey('viewUpdateSubscriptionKey');
 
 var createViewUpdateSubscriptionPlugin = function createViewUpdateSubscriptionPlugin() {
-  var tracker = new Tracker();
+  var tracker;
   var lastUpdateRef = {
     current: null,
     initial: null,
@@ -55,12 +55,14 @@ var createViewUpdateSubscriptionPlugin = function createViewUpdateSubscriptionPl
         return new _prosemirrorState.Plugin({
           key: pluginKey,
           view: function view(editorView) {
-            trackerStore.set(editorView, tracker);
-            return {
-              destroy: function destroy() {
-                trackerStore.delete(editorView);
-              }
-            };
+            tracker = trackerStore.get(editorView);
+
+            if (!tracker) {
+              tracker = new Tracker();
+              trackerStore.set(editorView, tracker);
+            }
+
+            return {};
           }
         });
       };
@@ -81,17 +83,20 @@ var createViewUpdateSubscriptionPlugin = function createViewUpdateSubscriptionPl
         lastUpdateRef.initial = props;
         lastUpdateRef.queued = true;
         queueMicrotask(function () {
-          var _lastUpdateRef$initia;
-
           if (!lastUpdateRef.current || !lastUpdateRef.initial) {
             return;
           }
 
-          tracker.update({
-            newEditorState: lastUpdateRef.current.newEditorState,
-            oldEditorState: (_lastUpdateRef$initia = lastUpdateRef.initial) === null || _lastUpdateRef$initia === void 0 ? void 0 : _lastUpdateRef$initia.oldEditorState,
-            transactions: lastUpdateRef.transactions
-          });
+          if (tracker) {
+            var _lastUpdateRef$initia;
+
+            tracker.update({
+              newEditorState: lastUpdateRef.current.newEditorState,
+              oldEditorState: (_lastUpdateRef$initia = lastUpdateRef.initial) === null || _lastUpdateRef$initia === void 0 ? void 0 : _lastUpdateRef$initia.oldEditorState,
+              transactions: lastUpdateRef.transactions
+            });
+          }
+
           lastUpdateRef.queued = false;
           lastUpdateRef.current = null;
           lastUpdateRef.transactions = [];

package/dist/cjs/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js

@@ -13,6 +13,8 @@ var _pluginKey2 = require("../../status/plugin-key");
 
 var _Toolbar = require("../../floating-toolbar/ui/Toolbar");
 
+var _utils = require("../../type-ahead/utils");
+
 var _ = require("..");
 
 var areToolbarsSame = function areToolbarsSame(left, right) {
@@ -46,6 +48,13 @@ var subscribeToToolbarAndPickerUpdates = function subscribeToToolbarAndPickerUpd
   var subscription = function subscription(_ref) {
     var newEditorState = _ref.newEditorState;
 
+    // TypeAhead has priority in the mobile-bridge
+    // In case it is open we don't need to send
+    // any toolbar updates don't need to be send
+    if ((0, _utils.isTypeAheadOpen)(newEditorState)) {
+      return;
+    }
+
     var dateState = _pluginKey.pluginKey.getState(newEditorState);
 
     var statusState = _pluginKey2.pluginKey.getState(newEditorState);
@@ -67,9 +76,7 @@ var subscribeToToolbarAndPickerUpdates = function subscribeToToolbarAndPickerUpd
       var oldToolbarConfig = getOldConfigWithNodeInfo(lastUpdatedState);
       var isToolbarEqual = areToolbarsSame(toolbarConfig, oldToolbarConfig);
 
-      if (dateState !== oldDateState || statusState !== oldStatusState || // Sometimes the toolbar changes while a picker is open, we dont care about this
-      // EG A nested status or date node in a table
-      !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
+      if (dateState !== oldDateState || statusState !== oldStatusState || !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
         shouldCallback = true;
       }
     } else {

package/dist/cjs/plugins/view-update-subscription/subscribe/type-ahead-updates.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeTypeAheadUpdates = void 0;
+
+var _ = require("..");
+
+var _key = require("../../type-ahead/pm-plugins/key");
+
+var subscribeTypeAheadUpdates = function subscribeTypeAheadUpdates(editorView, cb) {
+  var subscription = function subscription(_ref) {
+    var newEditorState = _ref.newEditorState,
+        oldEditorState = _ref.oldEditorState;
+
+    var newPluginState = _key.pluginKey.getState(newEditorState);
+
+    var oldPluginState = _key.pluginKey.getState(oldEditorState);
+
+    if (!oldPluginState || !newPluginState) {
+      return;
+    }
+
+    cb({
+      oldPluginState: oldPluginState,
+      newPluginState: newPluginState
+    });
+  };
+
+  var tracker = _.trackerStore.get(editorView);
+
+  if (tracker) {
+    tracker.add(subscription);
+  }
+
+  return function () {
+    var tracker = _.trackerStore.get(editorView);
+
+    if (tracker) {
+      tracker.remove(subscription);
+    }
+  };
+};
+
+exports.subscribeTypeAheadUpdates = subscribeTypeAheadUpdates;

package/dist/cjs/test-utils.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFireAnalytics = getFireAnalytics;
 exports.setTextSelection = setTextSelection;
 Object.defineProperty(exports, "Preset", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "Preset", {
     return _preset.Preset;
   }
 });
+Object.defineProperty(exports, "createTypeAheadTools", {
+  enumerable: true,
+  get: function get() {
+    return _api.createTypeAheadTools;
+  }
+});
 Object.defineProperty(exports, "PortalProviderAPI", {
   enumerable: true,
   get: function get() {
@@ -52,6 +59,10 @@ var _createSchema = require("./create-editor/create-schema");
 
 var _base = _interopRequireDefault(require("./plugins/base"));
 
+var _pluginKey = require("./plugins/analytics/plugin-key");
+
+var _api = require("./plugins/type-ahead/api");
+
 var _PortalProvider = require("./ui/PortalProvider");
 
 var _eventDispatcher = require("./event-dispatcher");
@@ -62,6 +73,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function getFireAnalytics(editorView) {
+  var _analyticsPluginKey$g;
+
+  return _pluginKey.analyticsPluginKey === null || _pluginKey.analyticsPluginKey === void 0 ? void 0 : (_analyticsPluginKey$g = _pluginKey.analyticsPluginKey.getState(editorView.state)) === null || _analyticsPluginKey$g === void 0 ? void 0 : _analyticsPluginKey$g.fireAnalytics;
+}
+
 function lightProcessPluginsList(editorPlugins) {
   /**
    * First pass to collect pluginsOptions

package/dist/cjs/types/empty-state-handler.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -2,20 +2,16 @@
 
 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = require("@atlaskit/form");
 
@@ -37,10 +33,6 @@ var _ColorPickerButton = _interopRequireDefault(require("../../ColorPickerButton
 
 var _templateObject, _templateObject2;
 
-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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -147,7 +139,6 @@ var ColorPicker = function ColorPicker(props) {
       title = props.title,
       currentColor = props.currentColor,
       colorPalette = props.colorPalette,
-      fieldProps = props.fieldProps,
       onChange = props.onChange,
       onFieldChange = props.onFieldChange;
 
@@ -159,7 +150,6 @@ var ColorPicker = function ColorPicker(props) {
     }
 
     onChange(colorValue);
-    fieldProps.onChange(colorValue);
     onFieldChange(name, currentColor !== colorValue);
   };
 
@@ -185,16 +175,10 @@ var ColorPickerField = function ColorPickerField(_ref) {
   var label = field.label,
       defaultValue = field.defaultValue,
       isRequired = field.isRequired;
-
-  var _useState = (0, _react.useState)(defaultValue || ''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      currentColor = _useState2[0],
-      setCurrentColor = _useState2[1];
-
   return /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: name,
     isRequired: isRequired,
-    defaultValue: currentColor,
+    defaultValue: defaultValue,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     }
@@ -206,10 +190,9 @@ var ColorPickerField = function ColorPickerField(_ref) {
     }, "*")), /*#__PURE__*/_react.default.createElement(ColorPicker, {
       name: name,
       title: label,
-      currentColor: currentColor,
+      currentColor: fieldProps.value,
       colorPalette: colorPalette,
-      fieldProps: fieldProps,
-      onChange: setCurrentColor,
+      onChange: fieldProps.onChange,
       onFieldChange: onFieldChange
     })), error && /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
       error: error,

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

@@ -142,7 +142,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
           onSelectItem = _this$props.onSelectItem,
           showSearch = _this$props.showSearch,
           showCategories = _this$props.showCategories,
-          mode = _this$props.mode;
+          mode = _this$props.mode,
+          emptyStateHandler = _this$props.emptyStateHandler;
       var _this$state2 = this.state,
           categories = _this$state2.categories,
           searchTerm = _this$state2.searchTerm,
@@ -159,7 +160,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         showSearch: showSearch,
         showCategories: showCategories,
         mode: mode,
-        searchTerm: searchTerm
+        searchTerm: searchTerm,
+        emptyStateHandler: emptyStateHandler
       });
     }
   }]);

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -113,6 +113,7 @@ var InsertMenu = function InsertMenu(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_ElementBrowserLoader.default, {
       mode: "inline",
       getItems: getItems(quickInsertState),
+      emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
       onInsertItem: onInsertItem,
       showSearch: true,
       showCategories: false // On page resize we want the InlineElementBrowser to show updated tools/overflow items

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -41,7 +39,7 @@ var _constants2 = require("./constants");
 
 var _messages = require("./messages");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
 
@@ -61,13 +59,13 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
   var onInsertItem = (0, _react.useCallback)(function (item) {
     props.onInsertItem(item);
   }, [props]);
-  var RenderFooter = (0, _react.useCallback)(function (footerProps) {
-    return /*#__PURE__*/_react.default.createElement(Footer, (0, _extends2.default)({}, footerProps, {
+  var RenderFooter = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(Footer, {
       onInsert: function onInsert() {
         return onInsertItem(selectedItem);
       },
       beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(_messages.messages.help)) : undefined
-    }));
+    });
   }, [onInsertItem, selectedItem, helpUrl, intl]); // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
 
   var onKeyDown = (0, _react.useCallback)(function (e) {
@@ -83,13 +81,10 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       showCategories: true,
       mode: "full",
       onSelectItem: onSelectItem,
-      onInsertItem: onInsertItem
+      onInsertItem: onInsertItem,
+      emptyStateHandler: props.emptyStateHandler
     }));
-  }, [props.intl, props.getItems, onSelectItem, onInsertItem]);
-  var components = {
-    Body: RenderBody,
-    Footer: RenderFooter
-  };
+  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-popup": true,
     onClick: onModalClick,
@@ -102,12 +97,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     onClose: props.onClose,
     height: "664px",
     width: "x-large",
-    autoFocus: false,
-    components: components // defaults to true and doesn't work along with stackIndex=1.
+    autoFocus: false // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
     shouldCloseOnEscapePress: false
-  })));
+  }, /*#__PURE__*/_react.default.createElement(RenderBody, null), /*#__PURE__*/_react.default.createElement(RenderFooter, null))));
 };
 
 ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
@@ -118,15 +112,12 @@ var onModalClick = function onModalClick(e) {
 
 var Footer = function Footer(_ref) {
   var onInsert = _ref.onInsert,
-      onClose = _ref.onClose,
-      showKeyline = _ref.showKeyline,
       beforeElement = _ref.beforeElement;
-  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, {
-    showKeyline: showKeyline,
-    style: {
-      padding: _constants2.MODAL_WRAPPER_PADDING
-    }
-  }, beforeElement ? beforeElement : /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(ActionItem, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+
+  var _useModal = (0, _modalDialog.useModal)(),
+      onClose = _useModal.onClose;
+
+  return /*#__PURE__*/_react.default.createElement(ModalFooter, null, beforeElement ? beforeElement : /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(ActionItem, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     appearance: "primary",
     onClick: onInsert,
     testId: "ModalElementBrowser__insert-button"
@@ -159,6 +150,8 @@ var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject
   dark: _colors.DN50
 })(), (0, _constants.borderRadius)());
 
+var ModalFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
+
 var _default = (0, _reactIntl.injectIntl)(ModalElementBrowser);
 
 exports.default = _default;