@atlaskit/jql-editor 4.0.0

package/dist/cjs/state/index.js

@@ -0,0 +1,997 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStoreActions = exports.useScopedId = exports.useRichInlineNodesEnabled = exports.useOnSyntaxHelp = exports.useLineNumbersVisible = exports.useJqlError = exports.useIsSearching = exports.useIntl = exports.useIdPrefix = exports.useHydratedValue = exports.useHydratedUser = exports.useHydratedDeprecations = exports.useExternalMessages = exports.useEditorViewHasFocus = exports.useEditorView = exports.useEditorStateHasJqlError = exports.useEditorState = exports.useAutocompleteProvider = exports.useAutocompletePosition = exports.useAutocompleteOptions = exports.useAutocompleteLoading = exports.useAutocompleteIsOpen = exports.useAutocomplete = exports.initialState = exports.actions = exports.EditorStateContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clamp = _interopRequireDefault(require("lodash/clamp"));
+var _groupBy = _interopRequireDefault(require("lodash/groupBy"));
+var _reactIntlNext = require("react-intl-next");
+var _reactSweetState = require("react-sweet-state");
+var _merge = require("rxjs/observable/merge");
+var _tap = require("rxjs/operators/tap");
+var _uuid = require("uuid");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _jqlAst = require("@atlaskit/jql-ast");
+var _jqlAutocomplete = require("@atlaskit/jql-autocomplete");
+var _constants = require("@atlaskit/theme/constants");
+var _analytics = require("../analytics");
+var _selectErrorCommand = require("../commands/select-error-command");
+var _constants2 = require("../common/constants");
+var _constants3 = require("../plugins/autocomplete/constants");
+var _jqlAst2 = require("../plugins/jql-ast");
+var _schema = require("../schema");
+var _documentText = require("../utils/document-text");
+var _analytics2 = require("./analytics");
+var _autocomplete = require("./autocomplete");
+var _hydration = require("./hydration");
+var _util = require("./util");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var initialIntl = (0, _reactIntlNext.createIntl)({
+  locale: 'en'
+});
+var defaultAutocompleteOptions = {
+  tokens: [],
+  fields: [],
+  operators: [],
+  values: [],
+  functions: []
+};
+var initialState = exports.initialState = {
+  controlledQuery: '',
+  query: '',
+  externalMessages: [],
+  isSearching: undefined,
+  editorState: _schema.defaultEditorState,
+  editorView: undefined,
+  intlRef: {
+    current: initialIntl
+  },
+  autocompleteProvider: _constants3.defaultAutocompleteProvider,
+  idPrefix: '',
+  editorViewHasFocus: false,
+  editorViewBlurTimeout: null,
+  lineNumbersVisible: false,
+  jqlError: null,
+  autocomplete: {
+    // Keep autocomplete closed until user modifies query
+    shouldStayClosedOnNextUpdate: true,
+    shouldStayClosed: true,
+    selectedOptionId: undefined,
+    loading: false,
+    options: defaultAutocompleteOptions,
+    subscription: null,
+    analyticsSubscription: null,
+    container: null,
+    offsetParentRect: undefined,
+    replacePositionStart: 0
+  },
+  enableRichInlineNodes: false,
+  hydratedValues: {},
+  resizeObserver: undefined,
+  editorViewContainer: undefined,
+  editorViewContainerRect: undefined,
+  editorViewContainerScroll: 0,
+  onDebugUnsafeMessage: undefined
+};
+
+/**
+ * Line numbers should be shown if there are more than 1 paragraph blocks in the document.
+ */
+var isLineNumbersVisible = function isLineNumbersVisible(editorState) {
+  return editorState.doc.childCount > 1;
+};
+var actions = exports.actions = {
+  onEditorViewBlur: function onEditorViewBlur() {
+    return function (_ref) {
+      var setState = _ref.setState,
+        dispatch = _ref.dispatch;
+      // Set editorViewHasFocus within a timeout, to handle the scenario where a dropdown option is clicked. Without the
+      // timeout, a blur event would be fired for the editor on mousedown, which would cause the dropdown to be hidden
+      // before the click event is fired.
+      var editorViewBlurTimeout = window.setTimeout(function () {
+        setState({
+          editorViewHasFocus: false
+        });
+        dispatch(actions.setSelectedAutocompleteOptionId(undefined));
+      });
+      setState({
+        editorViewBlurTimeout: editorViewBlurTimeout
+      });
+    };
+  },
+  onEditorViewFocus: function onEditorViewFocus(event) {
+    return function (_ref2, _ref3) {
+      var setState = _ref2.setState,
+        getState = _ref2.getState;
+      var onFocus = _ref3.onFocus;
+      var _getState = getState(),
+        autocomplete = _getState.autocomplete,
+        editorViewBlurTimeout = _getState.editorViewBlurTimeout,
+        editorViewHasFocus = _getState.editorViewHasFocus;
+      editorViewBlurTimeout && clearTimeout(editorViewBlurTimeout);
+      if (!editorViewHasFocus) {
+        var _autocomplete$contain;
+        setState({
+          autocomplete: _objectSpread(_objectSpread({}, autocomplete), {}, {
+            // This is a performance optimization to avoid querying this rect on every autocomplete dropdown render.
+            // We assume that autocomplete offset parent rect is not going to change while user interacts with the editor,
+            // so we only recompute this on focus.
+            offsetParentRect: (_autocomplete$contain = autocomplete.container) === null || _autocomplete$contain === void 0 || (_autocomplete$contain = _autocomplete$contain.offsetParent) === null || _autocomplete$contain === void 0 ? void 0 : _autocomplete$contain.getBoundingClientRect()
+          }),
+          editorViewHasFocus: true
+        });
+        onFocus && onFocus(event);
+      }
+    };
+  },
+  openAutocompleteOnNextUpdate: function openAutocompleteOnNextUpdate() {
+    return function (_ref4) {
+      var setState = _ref4.setState,
+        getState = _ref4.getState;
+      var autocompleteState = getState().autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          // Schedule open for next update of autocomplete suggestions so dropdown doesn't incur in layout shifts
+          shouldStayClosedOnNextUpdate: false
+        })
+      });
+    };
+  },
+  closeAutocomplete: function closeAutocomplete() {
+    return function (_ref5) {
+      var setState = _ref5.setState,
+        getState = _ref5.getState;
+      var autocompleteState = getState().autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          // Closing autocomplete can be done immediately as it won't incur in layout shifts
+          shouldStayClosed: true,
+          shouldStayClosedOnNextUpdate: true
+        })
+      });
+    };
+  },
+  setSelectedAutocompleteOptionId: function setSelectedAutocompleteOptionId(selectedOptionId) {
+    return function (_ref6) {
+      var setState = _ref6.setState,
+        getState = _ref6.getState;
+      var autocompleteState = getState().autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          selectedOptionId: selectedOptionId
+        })
+      });
+    };
+  },
+  getAutocompleteSuggestions: function getAutocompleteSuggestions(editorState) {
+    return function (_ref7) {
+      var getState = _ref7.getState,
+        dispatch = _ref7.dispatch;
+      // No need to process suggestions if autocomplete is going to stay closed on next update
+      if (!getState().autocomplete.shouldStayClosedOnNextUpdate) {
+        var _editorState$selectio = editorState.selection,
+          from = _editorState$selectio.from,
+          to = _editorState$selectio.to;
+        var text = (0, _documentText.getNodeText)(editorState.doc, 0, editorState.doc.content.size);
+        var textBeforeSelectionStart = (0, _documentText.getNodeText)(editorState.doc, 0, from);
+        var textBeforeSelectionEnd = (0, _documentText.getNodeText)(editorState.doc, 0, to);
+        var textPositionStart = textBeforeSelectionStart.length;
+        var textPositionStop = textBeforeSelectionEnd.length;
+        var autocomplete = _jqlAutocomplete.JQLAutocomplete.fromText(text);
+        var suggestions = autocomplete.getJQLSuggestionsForCaretPosition([textPositionStart, textPositionStop]);
+        var _ref8 = suggestions,
+          rules = _ref8.rules,
+          tokens = _ref8.tokens;
+
+        // In some situations (e.g. "issuetype in "), autocomplete expects a list, but we want to display operands
+        // to the user as a shortcut – so they don't have to manually type the opening parenthesis. There is logic
+        // on autocomplete option selection that will auto-insert this opening parenthesis.
+        if (rules.list && rules.list.context && !rules.list.context.isList) {
+          if (!tokens.values.includes('EMPTY')) {
+            tokens.values.push('EMPTY');
+            tokens.context = rules.list.context;
+          }
+          if (!rules.value) {
+            rules.value = rules.list;
+          }
+          if (!rules.function) {
+            rules.function = rules.list;
+          }
+        }
+        dispatch(actions.getAutocompleteOptions(suggestions));
+      }
+    };
+  },
+  getAutocompleteOptions: function getAutocompleteOptions(suggestions) {
+    return function (_ref9) {
+      var setState = _ref9.setState,
+        getState = _ref9.getState,
+        dispatch = _ref9.dispatch;
+      var _getState2 = getState(),
+        autocomplete = _getState2.autocomplete,
+        editorView = _getState2.editorView;
+      var shouldStayClosedOnNextUpdate = autocomplete.shouldStayClosedOnNextUpdate;
+      setState({
+        autocomplete: _objectSpread(_objectSpread(_objectSpread({}, autocomplete), {}, {
+          options: _objectSpread(_objectSpread({}, defaultAutocompleteOptions), {}, {
+            tokens: (0, _util.tokensToAutocompleteOptions)(suggestions.tokens)
+          })
+        }, editorView && {
+          replacePositionStart: (0, _util.getReplacePositionStart)(suggestions)
+        }), {}, {
+          // Update autocomplete visibility in the same update as initial options to avoid visible layout shifts
+          shouldStayClosed: shouldStayClosedOnNextUpdate
+        })
+      });
+      dispatch(actions.cancelSubscription());
+      dispatch(actions.callAutocompleteProviders(suggestions));
+    };
+  },
+  appendOptionsForObservable: function appendOptionsForObservable(key, observable, rule, type) {
+    return function (_ref10) {
+      var getState = _ref10.getState,
+        setState = _ref10.setState;
+      var context = rule.context,
+        matchedText = rule.matchedText,
+        replacePosition = rule.replacePosition;
+      return observable.pipe((0, _tap.tap)(function (data) {
+        var nextSuggestions = data.map(function (option) {
+          return _objectSpread(_objectSpread({}, option), {}, {
+            context: context,
+            matchedText: matchedText,
+            replacePosition: replacePosition,
+            type: type,
+            id: (0, _util.getAutocompleteOptionId)(option.value)
+          });
+        });
+        var _getState3 = getState(),
+          autocomplete = _getState3.autocomplete;
+        var options = autocomplete.options;
+        setState({
+          autocomplete: _objectSpread(_objectSpread({}, autocomplete), {}, {
+            options: _objectSpread(_objectSpread({}, options), {}, (0, _defineProperty2.default)({}, key, options[key].concat(nextSuggestions)))
+          })
+        });
+      }));
+    };
+  },
+  cancelSubscription: function cancelSubscription() {
+    return function (_ref11) {
+      var setState = _ref11.setState,
+        getState = _ref11.getState;
+      var autocompleteState = getState().autocomplete;
+      var subscription = autocompleteState.subscription,
+        analyticsSubscription = autocompleteState.analyticsSubscription;
+      // Cancel any in-flight subscriptions
+      subscription && subscription.unsubscribe();
+      analyticsSubscription && analyticsSubscription.unsubscribe();
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          subscription: null,
+          analyticsSubscription: null,
+          // Setting loading back to false on unsubscribe as this won't call error or complete callbacks
+          // in the observer, and we don't seem to have any other way to handle this from the observer itself
+          loading: false
+        })
+      });
+    };
+  },
+  setLoading: function setLoading(loading) {
+    return function (_ref12) {
+      var setState = _ref12.setState,
+        getState = _ref12.getState;
+      var _getState4 = getState(),
+        autocomplete = _getState4.autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocomplete), {}, {
+          loading: loading
+        })
+      });
+    };
+  },
+  setAutocompleteOptions: function setAutocompleteOptions(options) {
+    return function (_ref13) {
+      var setState = _ref13.setState,
+        getState = _ref13.getState;
+      var autocompleteState = getState().autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          options: options
+        })
+      });
+    };
+  },
+  setAutocompleteContainer: function setAutocompleteContainer(container) {
+    return function (_ref14) {
+      var _container$offsetPare;
+      var setState = _ref14.setState,
+        getState = _ref14.getState;
+      var autocompleteState = getState().autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocompleteState), {}, {
+          container: container,
+          offsetParentRect: container === null || container === void 0 || (_container$offsetPare = container.offsetParent) === null || _container$offsetPare === void 0 ? void 0 : _container$offsetPare.getBoundingClientRect()
+        })
+      });
+    };
+  },
+  callAutocompleteProviders: function callAutocompleteProviders(_ref15) {
+    var rules = _ref15.rules,
+      tokens = _ref15.tokens;
+    return function (_ref16) {
+      var getState = _ref16.getState,
+        setState = _ref16.setState,
+        dispatch = _ref16.dispatch;
+      var _getState$autocomplet = getState().autocompleteProvider,
+        onFields = _getState$autocomplet.onFields,
+        onOperators = _getState$autocomplet.onOperators,
+        onValues = _getState$autocomplet.onValues,
+        onFunctions = _getState$autocomplet.onFunctions;
+      var optionTypes = [];
+      var observables = [];
+      if (rules.value || rules.function ||
+      // If EMPTY is suggested as a token, we are also in "operand mode" and we don't want to call other providers
+      // e.g. "assignee is " will return "EMPTY" token and "operator" rule as suggestions (because of "is not")
+      tokens.values.includes('EMPTY')) {
+        if (rules.value) {
+          var _rules$value$context;
+          var values$ = onValues(rules.value.matchedText, (_rules$value$context = rules.value.context) === null || _rules$value$context === void 0 ? void 0 : _rules$value$context.field);
+          optionTypes.push('values');
+          observables.push(dispatch(actions.appendOptionsForObservable('values', values$, rules.value, 'value')));
+        }
+        if (rules.function) {
+          var _rules$function$conte, _rules$function$conte2;
+          var functions$ = onFunctions(rules.function.matchedText, (_rules$function$conte = rules.function.context) === null || _rules$function$conte === void 0 ? void 0 : _rules$function$conte.field, (_rules$function$conte2 = rules.function.context) !== null && _rules$function$conte2 !== void 0 && _rules$function$conte2.operator ? (0, _jqlAst.isListOperator)(rules.function.context.operator) : false);
+          optionTypes.push('functions');
+          observables.push(dispatch(actions.appendOptionsForObservable('functions', functions$, rules.function, 'function')));
+        }
+      } else if (rules.operator) {
+        var _rules$operator = rules.operator,
+          context = _rules$operator.context,
+          matchedText = _rules$operator.matchedText;
+        var operators$ = (0, _autocomplete.sortOperators)(onOperators(matchedText, context === null || context === void 0 ? void 0 : context.field));
+        optionTypes.push('operators');
+        observables.push(dispatch(actions.appendOptionsForObservable('operators', operators$, rules.operator, 'operator')));
+      } else if (rules.field) {
+        var _rules$field = rules.field,
+          _context = _rules$field.context,
+          _matchedText = _rules$field.matchedText;
+        var fields$ = onFields(_matchedText, _context === null || _context === void 0 ? void 0 : _context.clause);
+        optionTypes.push('fields');
+        observables.push(dispatch(actions.appendOptionsForObservable('fields', fields$, rules.field, 'field')));
+      }
+      if (observables.length === 0) {
+        return;
+      }
+      var _dispatch = dispatch((0, _analytics2.onStartAutocompleteEvent)()),
+        analyticsSubscription = _dispatch.analyticsSubscription,
+        onStopAutocompleteEvent = _dispatch.onStopAutocompleteEvent;
+      dispatch(actions.setLoading(true));
+      var hasOptions = false;
+      var subscription = _merge.merge.apply(void 0, observables).subscribe({
+        next: function next() {
+          hasOptions = true;
+        },
+        error: function error() {
+          onStopAutocompleteEvent(false, optionTypes, hasOptions);
+          dispatch(actions.setLoading(false));
+        },
+        complete: function complete() {
+          onStopAutocompleteEvent(true, optionTypes, hasOptions);
+          dispatch(actions.setLoading(false));
+        }
+      });
+      var _getState5 = getState(),
+        autocomplete = _getState5.autocomplete;
+      setState({
+        autocomplete: _objectSpread(_objectSpread({}, autocomplete), {}, {
+          subscription: subscription,
+          analyticsSubscription: analyticsSubscription
+        })
+      });
+    };
+  },
+  updateValidationState: function updateValidationState() {
+    return function (_ref17) {
+      var getState = _ref17.getState,
+        setState = _ref17.setState;
+      var _getState6 = getState(),
+        editorState = _getState6.editorState;
+      var jast = (0, _jqlAst2.getJastFromState)(editorState);
+      setState({
+        jqlError: jast.errors.length > 0 ? jast.errors[0] : null
+      });
+    };
+  },
+  initialiseEditorState: function initialiseEditorState() {
+    return function (_ref18, _ref19) {
+      var dispatch = _ref18.dispatch;
+      var query = _ref19.query;
+      // Configure plugins that don't require portal rendering (these will be reconfigured later when the editor view is mounted).
+      dispatch(actions.configurePlugins(undefined));
+      dispatch(actions.resetEditorState(query, false));
+    };
+  },
+  configurePlugins: function configurePlugins(portalActions) {
+    return function (_ref20, _ref21) {
+      var getState = _ref20.getState,
+        setState = _ref20.setState,
+        dispatch = _ref20.dispatch;
+      var intlRef = _ref21.intlRef,
+        onSearch = _ref21.onSearch;
+      var state = getState();
+      var editorState = state.editorState;
+      var enableRichInlineNodes = state.enableRichInlineNodes;
+
+      // Initialise our editor using inline functions which will delegate to our sweet state actions. This prevents
+      // stale references when our functions are invoked by Prosemirror.
+      var onSearchCommand = function onSearchCommand(pmState, pmDispatch, pmView) {
+        return (
+          // Set keyboardShortcut arg to true as this action is invoked by the 'Enter' keyboard command
+          dispatch(actions.onSearchCommand(pmState, pmDispatch, pmView, true))
+        );
+      };
+      editorState = (0, _schema.configurePlugins)(editorState, onSearch ? onSearchCommand : undefined, intlRef, getScopedId(getState(), _constants2.JQL_EDITOR_MAIN_ID), portalActions, enableRichInlineNodes);
+      setState({
+        editorState: editorState
+      });
+    };
+  },
+  onApplyEditorTransaction: function onApplyEditorTransaction(transaction) {
+    return function (_ref22, _ref23) {
+      var getState = _ref22.getState,
+        setState = _ref22.setState,
+        dispatch = _ref22.dispatch;
+      var onUpdate = _ref23.onUpdate;
+      var _getState7 = getState(),
+        query = _getState7.query,
+        editorState = _getState7.editorState,
+        editorView = _getState7.editorView,
+        enableRichInlineNodes = _getState7.enableRichInlineNodes;
+      var oldSelection = editorState.selection;
+      var updatedQuery = (0, _documentText.getNodeText)(transaction.doc, 0, transaction.doc.content.size);
+      var updatedEditorState = editorState.apply(transaction);
+
+      // Update state in our editor view
+      if (editorView) {
+        editorView.updateState(updatedEditorState);
+      }
+      setState({
+        query: updatedQuery,
+        editorState: updatedEditorState,
+        lineNumbersVisible: isLineNumbersVisible(updatedEditorState)
+      });
+
+      // Hydrate query if transaction has requested it or a query fragment has been pasted
+      if (enableRichInlineNodes && (transaction.getMeta('hydrate') || transaction.getMeta('paste'))) {
+        void dispatch((0, _hydration.hydrateQuery)());
+      }
+      if (query !== updatedQuery && !transaction.getMeta(_constants3.JQLAutocompletePluginKey)) {
+        // Open autocomplete on next update if query has changed and update wasn't triggered internally
+        dispatch(actions.openAutocompleteOnNextUpdate());
+      }
+      if (query !== updatedQuery || !updatedEditorState.selection.eq(oldSelection)) {
+        // Get autocomplete suggestions for new editor state
+        dispatch(actions.getAutocompleteSuggestions(updatedEditorState));
+      }
+      if (query !== updatedQuery) {
+        // Only dispatch update event if query has changed
+        onUpdate && onUpdate(updatedQuery, (0, _jqlAst2.getJastFromState)(updatedEditorState));
+      }
+    };
+  },
+  resetEditorState: function resetEditorState(query) {
+    var addToHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    return function (_ref24) {
+      var getState = _ref24.getState,
+        dispatch = _ref24.dispatch;
+      var _getState8 = getState(),
+        editorState = _getState8.editorState,
+        enableRichInlineNodes = _getState8.enableRichInlineNodes;
+
+      // Use the clipboard text parser to get our slice to ensure new lines are split into separate paragraphs
+      var slice = (0, _schema.clipboardTextParser)(query, editorState.doc.resolve(0));
+      var resetQueryTransaction = editorState.tr.setMeta('addToHistory', addToHistory).replace(0, editorState.doc.content.size, slice);
+      dispatch(actions.onApplyEditorTransaction(resetQueryTransaction));
+      dispatch(actions.updateValidationState());
+      if (enableRichInlineNodes) {
+        void dispatch((0, _hydration.hydrateQuery)());
+      }
+    };
+  },
+  initialiseEditorView: function initialiseEditorView(editorViewNode, attributes, portalActions) {
+    return function (_ref25, _ref26) {
+      var getState = _ref25.getState,
+        setState = _ref25.setState,
+        dispatch = _ref25.dispatch;
+      var onEditorMounted = _ref26.onEditorMounted;
+      // Configure plugins that require portal rendering (i.e. autocomplete and rich inline nodes).
+      dispatch(actions.configurePlugins(portalActions));
+      var _getState9 = getState(),
+        editorState = _getState9.editorState,
+        resizeObserver = _getState9.resizeObserver;
+      var editorView = new _view.EditorView(editorViewNode, {
+        state: editorState,
+        dispatchTransaction: function dispatchTransaction(transaction) {
+          return dispatch(actions.onApplyEditorTransaction(transaction));
+        },
+        clipboardTextSerializer: _schema.clipboardTextSerializer,
+        clipboardTextParser: _schema.clipboardTextParser,
+        attributes: attributes
+      });
+
+      // Unobserve previously observed elements
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+
+      // Observe size changes to update rect
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(editorViewNode);
+      setState({
+        editorView: editorView
+      });
+      onEditorMounted && onEditorMounted();
+    };
+  },
+  updateEditorView: function updateEditorView(attributes) {
+    return function (_ref27) {
+      var getState = _ref27.getState;
+      var _getState10 = getState(),
+        editorView = _getState10.editorView,
+        onDebugUnsafeMessage = _getState10.onDebugUnsafeMessage,
+        editorState = _getState10.editorState;
+      if (editorView) {
+        try {
+          editorView.update(_objectSpread(_objectSpread({}, editorView.props), {}, {
+            attributes: attributes
+          }));
+        } catch (error) {
+          // We've observed several errors from this step but we're unsure how to reproduce it. It seems to be some type of
+          // race condition whether the view is being updated with a mismatched selection in the UI. We'll catch the error
+          // so the UI doesn't break trying to change attributes and fire a callback to debug the error.
+          var message = "Error occurred trying to update attributes on the editor view with the message: ".concat(error instanceof Error ? error.message : String(error));
+          var attributeDiff = Object.keys(attributes).reduce(function (result, key) {
+            var _editorView$props$att;
+            var prevAttr = // @ts-ignore
+            (_editorView$props$att = editorView.props.attributes) === null || _editorView$props$att === void 0 ? void 0 : _editorView$props$att[key];
+            var nextAttr = attributes[key];
+            if (nextAttr !== prevAttr) {
+              // @ts-ignore
+              result["prev_".concat(key)] = prevAttr;
+              // @ts-ignore
+              result["next_".concat(key)] = nextAttr;
+            }
+            return result;
+          }, {});
+          (0, _util.sendDebugMessage)(message, editorView, editorState, onDebugUnsafeMessage, _objectSpread({
+            stack: error instanceof Error ? error.stack : ''
+          }, attributeDiff));
+        }
+      }
+    };
+  },
+  setEditorViewContainer: function setEditorViewContainer(editorViewContainer) {
+    return function (_ref28) {
+      var setState = _ref28.setState;
+      setState({
+        editorViewContainer: editorViewContainer,
+        // Set initial rect
+        editorViewContainerRect: editorViewContainer === null || editorViewContainer === void 0 ? void 0 : editorViewContainer.getBoundingClientRect()
+      });
+    };
+  },
+  setEditorViewContainerScroll: function setEditorViewContainerScroll(scroll) {
+    return function (_ref29) {
+      var setState = _ref29.setState;
+      setState({
+        editorViewContainerScroll: scroll
+      });
+    };
+  },
+  onSearch: function onSearch() {
+    return function (_ref30) {
+      var getState = _ref30.getState,
+        dispatch = _ref30.dispatch;
+      var _getState11 = getState(),
+        editorState = _getState11.editorState,
+        editorView = _getState11.editorView;
+      dispatch(
+      // Set keyboardShortcut arg to false as this action is invoked directly by the search UI button
+      actions.onSearchCommand(editorState, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, editorView, false));
+    };
+  },
+  onSearchCommand: function onSearchCommand(pmState, pmDispatch, pmView, keyboardShortcut) {
+    return function (_ref31, _ref32) {
+      var getState = _ref31.getState,
+        dispatch = _ref31.dispatch;
+      var onSearch = _ref32.onSearch,
+        createAndFireAnalyticsEvent = _ref32.createAndFireAnalyticsEvent;
+      if (!onSearch) {
+        return true;
+      }
+      var jast = (0, _jqlAst2.getJastFromState)(pmState);
+      var _getState12 = getState(),
+        query = _getState12.query;
+      onSearch(query, jast);
+      createAndFireAnalyticsEvent({
+        action: _analytics.Action.CLICKED,
+        actionSubject: _analytics.ActionSubject.BUTTON,
+        actionSubjectId: _analytics.ActionSubjectId.EDITOR_SEARCH,
+        eventType: _analytics.EventType.UI,
+        attributes: _objectSpread(_objectSpread({}, (0, _jqlAst.computeJqlInsights)(jast)), {}, {
+          keyboardShortcut: keyboardShortcut
+        })
+      });
+
+      // Update JQL validation state
+      dispatch(actions.updateValidationState());
+
+      // Invoke command to select any errors in the query
+      (0, _selectErrorCommand.selectErrorCommand)(pmState, pmDispatch, pmView);
+      return true;
+    };
+  },
+  externalErrorMessageViewed: function externalErrorMessageViewed() {
+    return function (_ref33, _ref34) {
+      var getState = _ref33.getState;
+      var createAndFireAnalyticsEvent = _ref34.createAndFireAnalyticsEvent,
+        externalMessages = _ref34.externalMessages;
+      var _getState13 = getState(),
+        editorView = _getState13.editorView,
+        onDebugUnsafeMessage = _getState13.onDebugUnsafeMessage,
+        jqlError = _getState13.jqlError,
+        editorState = _getState13.editorState;
+      var externalErrors = externalMessages.filter(function (_ref35) {
+        var type = _ref35.type;
+        return type === 'error';
+      });
+      if (externalErrors.length > 0) {
+        var hasClientError = jqlError !== null;
+        var initialValue = {
+          hasClientError: hasClientError,
+          semanticErrorCount: 0,
+          syntaxErrorCount: 0,
+          syntaxErrorTypes: []
+        };
+        var attributes = externalErrors.reduce(function (result, _ref36) {
+          var errorType = _ref36.errorType;
+          if (typeof errorType === 'string') {
+            result.syntaxErrorCount++;
+            result.syntaxErrorTypes.push(errorType);
+          } else {
+            result.semanticErrorCount++;
+          }
+          return result;
+        }, initialValue);
+        attributes.syntaxErrorTypes.sort();
+        createAndFireAnalyticsEvent({
+          action: _analytics.Action.VIEWED,
+          actionSubject: _analytics.ActionSubject.ERROR_MESSAGE,
+          actionSubjectId: _analytics.ActionSubjectId.JQL_RESULT,
+          eventType: _analytics.EventType.UI,
+          attributes: attributes
+        });
+
+        // If we have JQL errors which have been externally provided but no errors in our JAST, then we may have gaps in
+        // our client side validation. Let's monitor any errors we weren't expecting.
+        if (editorView && !hasClientError && attributes.syntaxErrorCount > 0) {
+          var message = 'External JQL syntax error is shown without a client error.';
+          (0, _util.sendDebugMessage)(message, editorView, editorState, onDebugUnsafeMessage, {
+            syntaxErrorTypes: attributes.syntaxErrorTypes.join(',')
+          });
+        }
+      }
+    };
+  },
+  createAndFireAnalyticsEvent: function createAndFireAnalyticsEvent(payload) {
+    return function (_, _ref37) {
+      var createAndFireAnalyticsEvent = _ref37.createAndFireAnalyticsEvent;
+      createAndFireAnalyticsEvent(payload);
+    };
+  }
+};
+var Store = (0, _reactSweetState.createStore)({
+  name: 'jql-editor',
+  initialState: initialState,
+  actions: actions
+});
+var useStoreActions = exports.useStoreActions = (0, _reactSweetState.createHook)(Store, {
+  selector: null
+});
+var useEditorState = exports.useEditorState = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.editorState;
+  }
+});
+var useEditorView = exports.useEditorView = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.editorView;
+  }
+});
+var useIsSearching = exports.useIsSearching = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.isSearching;
+  }
+});
+var useIntl = exports.useIntl = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.intlRef.current;
+  }
+});
+var useAutocompleteProvider = exports.useAutocompleteProvider = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.autocompleteProvider;
+  }
+});
+var getScopedId = function getScopedId(state, idSuffix) {
+  return "".concat(state.idPrefix, "_").concat(idSuffix);
+};
+var useScopedId = exports.useScopedId = (0, _reactSweetState.createHook)(Store, {
+  selector: getScopedId
+});
+var useIdPrefix = exports.useIdPrefix = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.idPrefix;
+  }
+});
+var useEditorViewHasFocus = exports.useEditorViewHasFocus = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(_ref38) {
+    var editorViewHasFocus = _ref38.editorViewHasFocus;
+    return editorViewHasFocus;
+  }
+});
+var useLineNumbersVisible = exports.useLineNumbersVisible = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(_ref39) {
+    var lineNumbersVisible = _ref39.lineNumbersVisible;
+    return lineNumbersVisible;
+  }
+});
+var getAutocomplete = function getAutocomplete(state) {
+  return state.autocomplete;
+};
+var useAutocomplete = exports.useAutocomplete = (0, _reactSweetState.createHook)(Store, {
+  selector: getAutocomplete
+});
+
+/**
+ * Returns the JQL error from the last query that was searched, or {@code null} if there were none.
+ */
+var useJqlError = exports.useJqlError = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.jqlError;
+  }
+});
+
+/**
+ * Returns whether there are any JQL errors in the current Prosemirror editor state.
+ */
+var useEditorStateHasJqlError = exports.useEditorStateHasJqlError = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return (0, _jqlAst2.getJastFromState)(state.editorState).errors.length > 0;
+  }
+});
+var useExternalMessages = exports.useExternalMessages = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    var byType = (0, _groupBy.default)(state.externalMessages, 'type');
+    return {
+      errors: byType.error || [],
+      warnings: byType.warning || [],
+      infos: byType.info || []
+    };
+  }
+});
+var memoizedAutocompleteOptionsSelector = (0, _reactSweetState.createSelector)(function (state) {
+  return state.autocomplete.options.tokens;
+}, function (state) {
+  return state.autocomplete.options.functions;
+}, function (state) {
+  return state.autocomplete.options.values;
+}, function (state) {
+  return state.autocomplete.options.operators;
+}, function (state) {
+  return state.autocomplete.options.fields;
+}, function (tokens, functions, values, operators, fields) {
+  return [].concat((0, _toConsumableArray2.default)(tokens), (0, _toConsumableArray2.default)(functions), (0, _toConsumableArray2.default)(values), (0, _toConsumableArray2.default)(operators), (0, _toConsumableArray2.default)(fields));
+});
+var useAutocompleteOptions = exports.useAutocompleteOptions = (0, _reactSweetState.createHook)(Store, {
+  selector: memoizedAutocompleteOptionsSelector
+});
+var autocompleteIsLoadingSelector = function autocompleteIsLoadingSelector(state) {
+  return state.autocomplete.loading;
+};
+var useAutocompleteLoading = exports.useAutocompleteLoading = (0, _reactSweetState.createHook)(Store, {
+  selector: autocompleteIsLoadingSelector
+});
+var memoizedAutocompleteIsOpenSelector = (0, _reactSweetState.createSelector)(function (state) {
+  return state.editorViewHasFocus;
+}, memoizedAutocompleteOptionsSelector, autocompleteIsLoadingSelector, function (state) {
+  return state.autocomplete.shouldStayClosed;
+}, function (hasFocus, options, loading, shouldStayClosed) {
+  return !shouldStayClosed && hasFocus && (options.length > 0 || loading);
+});
+var useAutocompleteIsOpen = exports.useAutocompleteIsOpen = (0, _reactSweetState.createHook)(Store, {
+  selector: memoizedAutocompleteIsOpenSelector
+});
+var useAutocompletePosition = exports.useAutocompletePosition = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    var _offsetParentRect$lef, _offsetParentRect$top;
+    var autocomplete = state.autocomplete,
+      editorView = state.editorView,
+      editorViewContainerRect = state.editorViewContainerRect,
+      onDebugUnsafeMessage = state.onDebugUnsafeMessage,
+      editorState = state.editorState;
+    var replacePositionStart = autocomplete.replacePositionStart,
+      offsetParentRect = autocomplete.offsetParentRect;
+    if (!editorView) {
+      // Should never™ happen
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+    var docTop;
+    var docLeft;
+    try {
+      var autocompletePosition = (0, _util.getAutocompletePosition)(editorView, replacePositionStart);
+      docTop = autocompletePosition.top;
+      docLeft = autocompletePosition.left;
+    } catch (error) {
+      var _editorViewContainerR, _editorViewContainerR2;
+      // We've observed several 'Invalid position: x' errors from this step but we're unsure how to reproduce it. It
+      // seems to be some type of race condition whether the view is being updated with a mismatched selection in the
+      // UI. We'll catch the error so the UI doesn't break and fire a callback to debug the error.
+      var message = "Error occurred trying to get autocomplete position with the message: ".concat(error instanceof Error ? error.message : String(error));
+      (0, _util.sendDebugMessage)(message, editorView, editorState, onDebugUnsafeMessage, {
+        stack: error instanceof Error ? error.stack : ''
+      });
+
+      // Fallback to showing autocomplete at bottom left of editor view if we were unable to calculate the position.
+      docTop = (_editorViewContainerR = editorViewContainerRect === null || editorViewContainerRect === void 0 ? void 0 : editorViewContainerRect.bottom) !== null && _editorViewContainerR !== void 0 ? _editorViewContainerR : 0;
+      docLeft = (_editorViewContainerR2 = editorViewContainerRect === null || editorViewContainerRect === void 0 ? void 0 : editorViewContainerRect.left) !== null && _editorViewContainerR2 !== void 0 ? _editorViewContainerR2 : 0;
+    }
+
+    // In some situations, we can get an autocompleteTop that exceeds editor view container top/bottom boundaries,
+    // e.g. when editor content overflows editor view container and selection start/end is not visible. To prevent
+    // situations where autocomplete dropdown greatly overflows editor view container, we clamp this position.
+    // We also offset top position returned by ProseMirror to ensure autocomplete is positioned consistently at
+    // a grid size distance from editor input bottom in all situations where autocomplete is outside of the editor.
+    var autocompleteTop = docTop + (0, _constants.gridSize)();
+    var viewportTop = editorViewContainerRect !== undefined ? (0, _clamp.default)(autocompleteTop, editorViewContainerRect.top, editorViewContainerRect.bottom) : autocompleteTop;
+    var left = docLeft - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0);
+    var top = viewportTop - ((_offsetParentRect$top = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) !== null && _offsetParentRect$top !== void 0 ? _offsetParentRect$top : 0);
+    return {
+      // Left position from ProseMirror - autocomplete option padding so texts are vertically aligned
+      left: left - 5 / 4 * (0, _constants.gridSize)(),
+      top: top + (0, _constants.gridSize)()
+    };
+  }
+});
+var useHydratedValue = exports.useHydratedValue = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state, _ref40) {
+    var _state$hydratedValues;
+    var id = _ref40.id,
+      fieldName = _ref40.fieldName;
+    return (_state$hydratedValues = state.hydratedValues[fieldName]) === null || _state$hydratedValues === void 0 ? void 0 : _state$hydratedValues.get(id);
+  }
+});
+var useHydratedUser = exports.useHydratedUser = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state, _ref41) {
+    var _state$hydratedValues2;
+    var id = _ref41.id,
+      fieldName = _ref41.fieldName;
+    var user = (_state$hydratedValues2 = state.hydratedValues[fieldName]) === null || _state$hydratedValues2 === void 0 ? void 0 : _state$hydratedValues2.get(id);
+    return user && user.type === 'user' ? user : undefined;
+  }
+});
+var useHydratedDeprecations = exports.useHydratedDeprecations = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    var ast = (0, _jqlAst2.getJastFromState)(state.editorState);
+    var fieldsInQuery = (0, _util.getFieldNodes)(ast);
+    var toReturn = [];
+    Object.entries(state.hydratedValues).forEach(function (_ref42) {
+      var _state$hydratedValues3;
+      var _ref43 = (0, _slicedToArray2.default)(_ref42, 1),
+        fieldName = _ref43[0];
+      (_state$hydratedValues3 = state.hydratedValues[fieldName]) === null || _state$hydratedValues3 === void 0 || _state$hydratedValues3.forEach(function (value) {
+        if (value.type === 'deprecated-field') {
+          if (fieldsInQuery.has(value.id.toLowerCase())) {
+            toReturn.push(value);
+          }
+        }
+      });
+    });
+    return toReturn;
+  }
+});
+var useRichInlineNodesEnabled = exports.useRichInlineNodesEnabled = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.enableRichInlineNodes;
+  }
+});
+var useOnSyntaxHelp = exports.useOnSyntaxHelp = (0, _reactSweetState.createHook)(Store, {
+  selector: function selector(state) {
+    return state.onSyntaxHelp;
+  }
+});
+var EditorStateContainer = exports.EditorStateContainer = (0, _reactSweetState.createContainer)(Store, {
+  onInit: function onInit() {
+    return function (_ref44, _ref45) {
+      var getState = _ref44.getState,
+        setState = _ref44.setState,
+        dispatch = _ref44.dispatch;
+      var intlRef = _ref45.intlRef,
+        query = _ref45.query,
+        isSearching = _ref45.isSearching,
+        autocompleteProvider = _ref45.autocompleteProvider,
+        externalMessages = _ref45.externalMessages,
+        enableRichInlineNodes = _ref45.enableRichInlineNodes,
+        onDebugUnsafeMessage = _ref45.onDebugUnsafeMessage,
+        onSyntaxHelp = _ref45.onSyntaxHelp;
+      setState({
+        controlledQuery: query,
+        query: query,
+        externalMessages: externalMessages,
+        isSearching: isSearching,
+        intlRef: intlRef,
+        autocompleteProvider: autocompleteProvider,
+        enableRichInlineNodes: enableRichInlineNodes,
+        // Generate unique identifiers for each JQL editor instance
+        idPrefix: (0, _uuid.v4)(),
+        resizeObserver: window.ResizeObserver !== undefined ? new window.ResizeObserver(function () {
+          var _getState$editorViewC;
+          setState({
+            // We assume editor view container is the only element using the observer to avoid extra processing.
+            // If this instance is reused to observe more elements (which is a good practice to optimize performance),
+            // we would need to adjust this logic.
+            editorViewContainerRect: (_getState$editorViewC = getState().editorViewContainer) === null || _getState$editorViewC === void 0 ? void 0 : _getState$editorViewC.getBoundingClientRect()
+          });
+        }) : undefined,
+        onDebugUnsafeMessage: onDebugUnsafeMessage,
+        onSyntaxHelp: onSyntaxHelp
+      });
+      dispatch(actions.initialiseEditorState());
+    };
+  },
+  onUpdate: function onUpdate() {
+    return function (_ref46, _ref47) {
+      var getState = _ref46.getState,
+        setState = _ref46.setState,
+        dispatch = _ref46.dispatch;
+      var controlledQueryProp = _ref47.query,
+        isSearching = _ref47.isSearching,
+        autocompleteProvider = _ref47.autocompleteProvider,
+        externalMessages = _ref47.externalMessages,
+        enableRichInlineNodes = _ref47.enableRichInlineNodes,
+        onDebugUnsafeMessage = _ref47.onDebugUnsafeMessage,
+        onSyntaxHelp = _ref47.onSyntaxHelp;
+      var _getState14 = getState(),
+        controlledQuery = _getState14.controlledQuery,
+        query = _getState14.query;
+
+      // Track changes to our controlledQuery state
+      if (controlledQuery !== controlledQueryProp) {
+        setState({
+          controlledQuery: controlledQueryProp
+        });
+
+        // If the controlled query prop has changed and it doesn't match the query in our editor then we need to reset
+        // the editor state.
+        if (controlledQueryProp !== query) {
+          dispatch(actions.resetEditorState(controlledQueryProp));
+        }
+      }
+      setState({
+        externalMessages: externalMessages,
+        isSearching: isSearching,
+        autocompleteProvider: autocompleteProvider,
+        enableRichInlineNodes: enableRichInlineNodes,
+        onDebugUnsafeMessage: onDebugUnsafeMessage,
+        onSyntaxHelp: onSyntaxHelp
+      });
+    };
+  }
+});