@atlaskit/editor-plugin-type-ahead 1.11.3 → 1.11.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 1.11.4
+
+### Patch Changes
+
+- [#101866](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101866)
+  [`f22dfbe75b007`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f22dfbe75b007) -
+  [ux] Fix first typeahead item inserting in an inconsistent manner while offline
+
 ## 1.11.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/actions.js

@@ -11,6 +11,7 @@ var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS["INSERT_ITEM"] = "INSERT_ITEM";
   ACTIONS["INSERT_RAW_QUERY"] = "INSERT_RAW_QUERY";
   ACTIONS["UPDATE_LIST_ITEMS"] = "UPDATE_LIST_ITEMS";
+  ACTIONS["UPDATE_LIST_ERROR"] = "UPDATE_LIST_ERROR";
   ACTIONS["UPDATE_SELECTED_INDEX"] = "UPDATE_SELECTED_INDEX";
   return ACTIONS;
 }({});

package/dist/cjs/pm-plugins/commands/update-list-error.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateListError = void 0;
+var _actions = require("../actions");
+var _key = require("../key");
+var updateListError = exports.updateListError = function updateListError(errorInfo) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.UPDATE_LIST_ERROR,
+      params: {
+        errorInfo: errorInfo,
+        items: []
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/cjs/pm-plugins/main.js

@@ -58,6 +58,7 @@ function createPlugin(_ref) {
           decorationSet: _view.DecorationSet.empty,
           decorationElement: null,
           items: [],
+          errorInfo: null,
           selectedIndex: -1,
           stats: null,
           inputMethod: null

package/dist/cjs/pm-plugins/reducer.js

@@ -109,6 +109,7 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
     var shouldCloseMenu = [_actions.ACTIONS.CLOSE_TYPE_AHEAD, _actions.ACTIONS.INSERT_ITEM].includes(action) || selectionChanged;
     var shouldUpdateQuery = action === _actions.ACTIONS.CHANGE_QUERY;
     var shouldUpdateListItems = action === _actions.ACTIONS.UPDATE_LIST_ITEMS;
+    var shouldUpdateListError = action === _actions.ACTIONS.UPDATE_LIST_ERROR;
     var shouldUpdateSelectedIndex = action === _actions.ACTIONS.UPDATE_SELECTED_INDEX;
     if (shouldOpenMenu) {
       return openMenu(currentPluginState, {
@@ -123,6 +124,13 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         query: params.query
       });
+    } else if (shouldUpdateListError) {
+      var errorInfo = params.errorInfo;
+      return _objectSpread(_objectSpread({}, currentPluginState), {}, {
+        errorInfo: errorInfo,
+        items: [],
+        selectedIndex: -1
+      });
     } else if (shouldUpdateListItems) {
       var items = params.items;
       var selectedIndex = currentPluginState.selectedIndex;

package/dist/cjs/pm-plugins/utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.skipForwardToSafeItem = exports.skipBackwardToSafeItem = exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _updateSelectedIndex = require("./commands/update-selected-index");
 var _itemIsDisabled = require("./item-is-disabled");
 var _key = require("./key");
@@ -45,32 +46,56 @@ var findHandler = exports.findHandler = function findHandler(id, state) {
     return h.id === id;
   }) || null;
 };
-var skipForwardToSafeItem = exports.skipForwardToSafeItem = function skipForwardToSafeItem(currentIndex, nextIndex, listSize, itemIsDisabled
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
-) {
+var skipForwardToSafeItem = exports.skipForwardToSafeItem = function skipForwardToSafeItem(_ref) {
+  var currentIndex = _ref.currentIndex,
+    nextIndex = _ref.nextIndex,
+    listSize = _ref.listSize,
+    itemIsDisabled = _ref.itemIsDisabled;
   // Use a loop to find the next selectable item
   for (var idx = nextIndex; idx < listSize; idx++) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the end of the list ^, now try from the start
+  if ((0, _platformFeatureFlags.fg)('platform_editor_offline_editing_ga')) {
+    for (var _idx = 0; _idx < nextIndex; _idx++) {
+      if (!itemIsDisabled(_idx)) {
+        return _idx;
+      }
+    }
+  }
+
   // If no selectable items are found, return currentIndex
   return currentIndex;
 };
-var skipBackwardToSafeItem = exports.skipBackwardToSafeItem = function skipBackwardToSafeItem(currentIndex, nextIndex, itemIsDisabled) {
+var skipBackwardToSafeItem = exports.skipBackwardToSafeItem = function skipBackwardToSafeItem(_ref2) {
+  var currentIndex = _ref2.currentIndex,
+    nextIndex = _ref2.nextIndex,
+    listSize = _ref2.listSize,
+    itemIsDisabled = _ref2.itemIsDisabled;
   // Use a loop to find the next non-selectable item when going backwards
   for (var idx = nextIndex; idx >= 0; idx--) {
     if (!itemIsDisabled(idx)) {
       return idx;
     }
   }
+
+  // We got to the start of the list ^, now try from the end
+  if ((0, _platformFeatureFlags.fg)('platform_editor_offline_editing_ga')) {
+    for (var _idx2 = listSize; _idx2 > nextIndex; _idx2--) {
+      if (!itemIsDisabled(_idx2)) {
+        return _idx2;
+      }
+    }
+  }
   // If no non-selectable items are found, return currentIndex
   return currentIndex;
 };
-var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerByTrigger(_ref) {
-  var trigger = _ref.trigger,
-    editorState = _ref.editorState;
+var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerByTrigger(_ref3) {
+  var trigger = _ref3.trigger,
+    editorState = _ref3.editorState;
   var pluginState = _key.pluginKey.getState(editorState);
   if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
     return null;
@@ -80,10 +105,10 @@ var findHandlerByTrigger = exports.findHandlerByTrigger = function findHandlerBy
     return h.trigger === trigger;
   }) || null;
 };
-var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_ref2) {
-  var editorView = _ref2.editorView,
-    direction = _ref2.direction,
-    api = _ref2.api;
+var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_ref4) {
+  var editorView = _ref4.editorView,
+    direction = _ref4.direction,
+    api = _ref4.api;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
     if (!typeAheadState) {
@@ -117,11 +142,21 @@ var moveSelectedIndex = exports.moveSelectedIndex = function moveSelectedIndex(_
       } else {
         nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
       }
-      nextIndex = skipForwardToSafeItem(selectedIndex, nextIndex, items.length, isDisabled);
+      nextIndex = skipForwardToSafeItem({
+        currentIndex: selectedIndex,
+        nextIndex: nextIndex,
+        listSize: items.length,
+        itemIsDisabled: isDisabled
+      });
     } else {
       stats.increaseArrowUp();
       nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
-      nextIndex = skipBackwardToSafeItem(selectedIndex, nextIndex, isDisabled);
+      nextIndex = skipBackwardToSafeItem({
+        currentIndex: selectedIndex,
+        nextIndex: nextIndex,
+        listSize: items.length,
+        itemIsDisabled: isDisabled
+      });
     }
     (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
   };

package/dist/cjs/typeAheadPlugin.js

@@ -201,7 +201,7 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -212,6 +212,7 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          errorInfo: null,
           selectedIndex: 0
         };
       }
@@ -226,6 +227,7 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };
     },

package/dist/cjs/ui/TypeAheadErrorFallback/EmptyState.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
+var containerStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.600',
+  marginBlockEnd: 'space.600',
+  textAlign: 'center'
+});
+var EmptyState = exports.EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: containerStyles,
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    gap: "space.300"
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    direction: "column",
+    alignItems: "center",
+    gap: "space.200"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium",
+    as: "h2"
+  }, header), description && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    as: "p",
+    color: "color.text"
+  }, description)));
+};

package/dist/cjs/ui/TypeAheadErrorFallback/GenericErrorSVG.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenericErrorSVG = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var HEIGHT = 90;
+var genericErrorStyles = (0, _react.css)({
+  height: "".concat(HEIGHT, "px"),
+  display: 'block'
+});
+var GenericErrorSVG = exports.GenericErrorSVG = function GenericErrorSVG(props) {
+  var id = 'link-picker-ui-generic-error-svg';
+  return (0, _react.jsx)("svg", (0, _extends2.default)({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: genericErrorStyles
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), (0, _react.jsx)("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: "url(#".concat(id, ")")
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react.jsx)("stop", {
+    stopColor: "#C1C7D0"
+  }), (0, _react.jsx)("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), (0, _react.jsx)("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), (0, _react.jsx)("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/cjs/ui/TypeAheadErrorFallback/MinHeightContainer.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.minHeightComponentStyles = exports.MinHeightContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["minHeight"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var minHeightComponentStyles = exports.minHeightComponentStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  minHeight: 'var(--link-picker-min-height)'
+});
+var MinHeightContainer = exports.MinHeightContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var minHeight = _ref.minHeight,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: minHeightComponentStyles
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props, {
+    style: (0, _defineProperty2.default)({}, '--link-picker-min-height', minHeight)
+  }));
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadErrorFallback = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _EmptyState = require("./EmptyState");
+var _GenericErrorSVG = require("./GenericErrorSVG");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var minHeightComponentStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  minHeight: '290px'
+});
+var TypeAheadErrorFallback = exports.TypeAheadErrorFallback = function TypeAheadErrorFallback() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var header = intl.formatMessage(_typeAhead.typeAheadListMessages.offlineErrorFallbackHeading);
+  var description = intl.formatMessage(_typeAhead.typeAheadListMessages.offlineErrorFallbackDesc);
+  return (0, _react.jsx)("div", {
+    "data-testid": "mentions-typeahead-error-boundary-ui",
+    css: minHeightComponentStyles
+  }, (0, _react.jsx)(_EmptyState.EmptyState, {
+    header: header,
+    renderImage: function renderImage() {
+      return (0, _react.jsx)(_GenericErrorSVG.GenericErrorSVG, null);
+    },
+    description: description
+  }));
+};

package/dist/cjs/ui/TypeAheadListItem.js

@@ -67,6 +67,7 @@ var itemText = (0, _react2.css)({
   color: "".concat("var(--ds-text, ".concat(_colors.N800, ")"))
 });
 var itemTitle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4'
 });
 var itemTitleOverride = (0, _react2.css)({

package/dist/cjs/ui/TypeAheadMenu.js

@@ -20,6 +20,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
   var isOpen = typeAheadState.decorationSet.find().length > 0;
   var triggerHandler = typeAheadState.triggerHandler,
     items = typeAheadState.items,
+    errorInfo = typeAheadState.errorInfo,
     selectedIndex = typeAheadState.selectedIndex,
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
@@ -76,7 +77,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
       return;
     }
   }, [isOpen, query, onItemMatch]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_TypeAheadPopup.TypeAheadPopup, {
@@ -87,6 +88,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     anchorElement: decorationElement,
     triggerHandler: triggerHandler,
     items: items,
+    errorInfo: errorInfo,
     selectedIndex: selectedIndex,
     setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,

package/dist/cjs/ui/TypeAheadPopup.js

@@ -17,6 +17,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../pm-plugins/constants");
+var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
 var _TypeAheadList = require("./TypeAheadList");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -61,6 +62,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
     items = props.items,
+    errorInfo = props.errorInfo,
     selectedIndex = props.selectedIndex,
     onItemInsert = props.onItemInsert,
     isEmptyQuery = props.isEmptyQuery,
@@ -260,7 +262,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     ,
     className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
     ref: ref
-  }, (0, _react2.jsx)(Highlight, {
+  }, errorInfo ? (0, _react2.jsx)(_TypeAheadErrorFallback.TypeAheadErrorFallback, null) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
   }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
@@ -273,6 +275,6 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api
-  })));
+  }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _updateQuery = require("../pm-plugins/commands/update-query");
-var _itemIsDisabled = require("../pm-plugins/item-is-disabled");
+var _itemIsDisabled2 = require("../pm-plugins/item-is-disabled");
 var _utils = require("../pm-plugins/utils");
 var _useItemInsert3 = require("./hooks/use-item-insert");
 var _useLoadItems = require("./hooks/use-load-items");
@@ -84,8 +84,13 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     var _ref3 = (0, _utils.getPluginState)(view.state),
       selectedIndex = _ref3.selectedIndex;
-    var safeSelectedIndex = (0, _utils.skipForwardToSafeItem)(selectedIndex, 1, items.length, function (idx) {
-      return (0, _itemIsDisabled.itemIsDisabled)(items[idx], api);
+    var safeSelectedIndex = (0, _utils.skipForwardToSafeItem)({
+      currentIndex: selectedIndex,
+      nextIndex: 1,
+      listSize: items.length,
+      itemIsDisabled: function itemIsDisabled(idx) {
+        return (0, _itemIsDisabled2.itemIsDisabled)(items[idx], api);
+      }
     });
     // If the only safe index is -1 then none are safe - do not insert item
     if (safeSelectedIndex === -1) {
@@ -122,8 +127,11 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
   if (closed) {
     return null;
   }
+  if (!triggerHandler) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
-    triggerQueryPrefix: triggerHandler.trigger,
+    triggerQueryPrefix: triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger,
     onQueryChange: setQuery,
     onItemSelect: insertSelectedItem,
     selectNextItem: selectNextItem,

package/dist/cjs/ui/hooks/use-load-items.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useLoadItems = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _updateListError = require("../../pm-plugins/commands/update-list-error");
 var _updateListItems = require("../../pm-plugins/commands/update-list-items");
 var EMPTY_LIST_ITEM = [];
 var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query) {
@@ -35,6 +37,17 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
       queueMicrotask(function () {
         (0, _updateListItems.updateListItem)(list)(view.state, view.dispatch);
       });
+    }).catch(function (e) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_offline_editing_ga')) {
+        if (e) {
+          if (componentIsMounted.current) {
+            setItems(EMPTY_LIST_ITEM);
+          }
+          queueMicrotask(function () {
+            (0, _updateListError.updateListError)(e)(view.state, view.dispatch);
+          });
+        }
+      }
     });
 
     // ignore because EditorView is mutable but we don't want to

package/dist/es2019/pm-plugins/actions.js

@@ -5,6 +5,7 @@ export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS["INSERT_ITEM"] = "INSERT_ITEM";
   ACTIONS["INSERT_RAW_QUERY"] = "INSERT_RAW_QUERY";
   ACTIONS["UPDATE_LIST_ITEMS"] = "UPDATE_LIST_ITEMS";
+  ACTIONS["UPDATE_LIST_ERROR"] = "UPDATE_LIST_ERROR";
   ACTIONS["UPDATE_SELECTED_INDEX"] = "UPDATE_SELECTED_INDEX";
   return ACTIONS;
 }({});

package/dist/es2019/pm-plugins/commands/update-list-error.js

@@ -0,0 +1,18 @@
+import { ACTIONS } from '../actions';
+import { pluginKey as typeAheadPluginKey } from '../key';
+export const updateListError = errorInfo => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_LIST_ERROR,
+      params: {
+        errorInfo,
+        items: []
+      }
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};

package/dist/es2019/pm-plugins/main.js

@@ -52,6 +52,7 @@ export function createPlugin({
           decorationSet: DecorationSet.empty,
           decorationElement: null,
           items: [],
+          errorInfo: null,
           selectedIndex: -1,
           stats: null,
           inputMethod: null

package/dist/es2019/pm-plugins/reducer.js

@@ -101,6 +101,7 @@ export const createReducer = ({
     const shouldCloseMenu = [ACTIONS.CLOSE_TYPE_AHEAD, ACTIONS.INSERT_ITEM].includes(action) || selectionChanged;
     const shouldUpdateQuery = action === ACTIONS.CHANGE_QUERY;
     const shouldUpdateListItems = action === ACTIONS.UPDATE_LIST_ITEMS;
+    const shouldUpdateListError = action === ACTIONS.UPDATE_LIST_ERROR;
     const shouldUpdateSelectedIndex = action === ACTIONS.UPDATE_SELECTED_INDEX;
     if (shouldOpenMenu) {
       return openMenu(currentPluginState, {
@@ -116,6 +117,16 @@ export const createReducer = ({
         ...currentPluginState,
         query: params.query
       };
+    } else if (shouldUpdateListError) {
+      const {
+        errorInfo
+      } = params;
+      return {
+        ...currentPluginState,
+        errorInfo,
+        items: [],
+        selectedIndex: -1
+      };
     } else if (shouldUpdateListItems) {
       const {
         items