@atlaskit/jql-editor 4.0.0

package/dist/esm/state/index.js

@@ -0,0 +1,991 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import clamp from 'lodash/clamp';
+import groupBy from 'lodash/groupBy';
+import { createIntl } from 'react-intl-next';
+import { createContainer, createHook, createSelector, createStore } from 'react-sweet-state';
+import { merge } from 'rxjs/observable/merge';
+import { tap } from 'rxjs/operators/tap';
+import { v4 as uuidv4 } from 'uuid';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { computeJqlInsights, isListOperator } from '@atlaskit/jql-ast';
+import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { gridSize } from '@atlaskit/theme/constants';
+import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
+import { selectErrorCommand } from '../commands/select-error-command';
+import { JQL_EDITOR_MAIN_ID } from '../common/constants';
+import { defaultAutocompleteProvider, JQLAutocompletePluginKey } from '../plugins/autocomplete/constants';
+import { getJastFromState } from '../plugins/jql-ast';
+import { clipboardTextParser, clipboardTextSerializer, configurePlugins as _configurePlugins, defaultEditorState } from '../schema';
+import { getNodeText } from '../utils/document-text';
+import { onStartAutocompleteEvent } from './analytics';
+import { sortOperators } from './autocomplete';
+import { hydrateQuery } from './hydration';
+import { getAutocompleteOptionId, getAutocompletePosition, getFieldNodes, getReplacePositionStart, sendDebugMessage, tokensToAutocompleteOptions } from './util';
+var initialIntl = createIntl({
+  locale: 'en'
+});
+var defaultAutocompleteOptions = {
+  tokens: [],
+  fields: [],
+  operators: [],
+  values: [],
+  functions: []
+};
+export var initialState = {
+  controlledQuery: '',
+  query: '',
+  externalMessages: [],
+  isSearching: undefined,
+  editorState: defaultEditorState,
+  editorView: undefined,
+  intlRef: {
+    current: initialIntl
+  },
+  autocompleteProvider: 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;
+};
+export var 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 = getNodeText(editorState.doc, 0, editorState.doc.content.size);
+        var textBeforeSelectionStart = getNodeText(editorState.doc, 0, from);
+        var textBeforeSelectionEnd = getNodeText(editorState.doc, 0, to);
+        var textPositionStart = textBeforeSelectionStart.length;
+        var textPositionStop = textBeforeSelectionEnd.length;
+        var autocomplete = 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: tokensToAutocompleteOptions(suggestions.tokens)
+          })
+        }, editorView && {
+          replacePositionStart: 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(tap(function (data) {
+        var nextSuggestions = data.map(function (option) {
+          return _objectSpread(_objectSpread({}, option), {}, {
+            context: context,
+            matchedText: matchedText,
+            replacePosition: replacePosition,
+            type: type,
+            id: getAutocompleteOptionId(option.value)
+          });
+        });
+        var _getState3 = getState(),
+          autocomplete = _getState3.autocomplete;
+        var options = autocomplete.options;
+        setState({
+          autocomplete: _objectSpread(_objectSpread({}, autocomplete), {}, {
+            options: _objectSpread(_objectSpread({}, options), {}, _defineProperty({}, 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 ? 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$ = 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(onStartAutocompleteEvent()),
+        analyticsSubscription = _dispatch.analyticsSubscription,
+        onStopAutocompleteEvent = _dispatch.onStopAutocompleteEvent;
+      dispatch(actions.setLoading(true));
+      var hasOptions = false;
+      var subscription = 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 = 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 = _configurePlugins(editorState, onSearch ? onSearchCommand : undefined, intlRef, getScopedId(getState(), 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 = 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(hydrateQuery());
+      }
+      if (query !== updatedQuery && !transaction.getMeta(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, 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 = 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(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 EditorView(editorViewNode, {
+        state: editorState,
+        dispatchTransaction: function dispatchTransaction(transaction) {
+          return dispatch(actions.onApplyEditorTransaction(transaction));
+        },
+        clipboardTextSerializer: clipboardTextSerializer,
+        clipboardTextParser: 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;
+          }, {});
+          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 = getJastFromState(pmState);
+      var _getState12 = getState(),
+        query = _getState12.query;
+      onSearch(query, jast);
+      createAndFireAnalyticsEvent({
+        action: AnalyticsAction.CLICKED,
+        actionSubject: ActionSubject.BUTTON,
+        actionSubjectId: ActionSubjectId.EDITOR_SEARCH,
+        eventType: EventType.UI,
+        attributes: _objectSpread(_objectSpread({}, computeJqlInsights(jast)), {}, {
+          keyboardShortcut: keyboardShortcut
+        })
+      });
+
+      // Update JQL validation state
+      dispatch(actions.updateValidationState());
+
+      // Invoke command to select any errors in the query
+      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: AnalyticsAction.VIEWED,
+          actionSubject: ActionSubject.ERROR_MESSAGE,
+          actionSubjectId: ActionSubjectId.JQL_RESULT,
+          eventType: 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.';
+          sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, {
+            syntaxErrorTypes: attributes.syntaxErrorTypes.join(',')
+          });
+        }
+      }
+    };
+  },
+  createAndFireAnalyticsEvent: function createAndFireAnalyticsEvent(payload) {
+    return function (_, _ref37) {
+      var createAndFireAnalyticsEvent = _ref37.createAndFireAnalyticsEvent;
+      createAndFireAnalyticsEvent(payload);
+    };
+  }
+};
+var Store = createStore({
+  name: 'jql-editor',
+  initialState: initialState,
+  actions: actions
+});
+export var useStoreActions = createHook(Store, {
+  selector: null
+});
+export var useEditorState = createHook(Store, {
+  selector: function selector(state) {
+    return state.editorState;
+  }
+});
+export var useEditorView = createHook(Store, {
+  selector: function selector(state) {
+    return state.editorView;
+  }
+});
+export var useIsSearching = createHook(Store, {
+  selector: function selector(state) {
+    return state.isSearching;
+  }
+});
+export var useIntl = createHook(Store, {
+  selector: function selector(state) {
+    return state.intlRef.current;
+  }
+});
+export var useAutocompleteProvider = createHook(Store, {
+  selector: function selector(state) {
+    return state.autocompleteProvider;
+  }
+});
+var getScopedId = function getScopedId(state, idSuffix) {
+  return "".concat(state.idPrefix, "_").concat(idSuffix);
+};
+export var useScopedId = createHook(Store, {
+  selector: getScopedId
+});
+export var useIdPrefix = createHook(Store, {
+  selector: function selector(state) {
+    return state.idPrefix;
+  }
+});
+export var useEditorViewHasFocus = createHook(Store, {
+  selector: function selector(_ref38) {
+    var editorViewHasFocus = _ref38.editorViewHasFocus;
+    return editorViewHasFocus;
+  }
+});
+export var useLineNumbersVisible = createHook(Store, {
+  selector: function selector(_ref39) {
+    var lineNumbersVisible = _ref39.lineNumbersVisible;
+    return lineNumbersVisible;
+  }
+});
+var getAutocomplete = function getAutocomplete(state) {
+  return state.autocomplete;
+};
+export var useAutocomplete = createHook(Store, {
+  selector: getAutocomplete
+});
+
+/**
+ * Returns the JQL error from the last query that was searched, or {@code null} if there were none.
+ */
+export var useJqlError = createHook(Store, {
+  selector: function selector(state) {
+    return state.jqlError;
+  }
+});
+
+/**
+ * Returns whether there are any JQL errors in the current Prosemirror editor state.
+ */
+export var useEditorStateHasJqlError = createHook(Store, {
+  selector: function selector(state) {
+    return getJastFromState(state.editorState).errors.length > 0;
+  }
+});
+export var useExternalMessages = createHook(Store, {
+  selector: function selector(state) {
+    var byType = groupBy(state.externalMessages, 'type');
+    return {
+      errors: byType.error || [],
+      warnings: byType.warning || [],
+      infos: byType.info || []
+    };
+  }
+});
+var memoizedAutocompleteOptionsSelector = 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(_toConsumableArray(tokens), _toConsumableArray(functions), _toConsumableArray(values), _toConsumableArray(operators), _toConsumableArray(fields));
+});
+export var useAutocompleteOptions = createHook(Store, {
+  selector: memoizedAutocompleteOptionsSelector
+});
+var autocompleteIsLoadingSelector = function autocompleteIsLoadingSelector(state) {
+  return state.autocomplete.loading;
+};
+export var useAutocompleteLoading = createHook(Store, {
+  selector: autocompleteIsLoadingSelector
+});
+var memoizedAutocompleteIsOpenSelector = 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);
+});
+export var useAutocompleteIsOpen = createHook(Store, {
+  selector: memoizedAutocompleteIsOpenSelector
+});
+export var useAutocompletePosition = 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 = 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));
+      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 + gridSize();
+    var viewportTop = editorViewContainerRect !== undefined ? clamp(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 * gridSize(),
+      top: top + gridSize()
+    };
+  }
+});
+export var useHydratedValue = 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);
+  }
+});
+export var useHydratedUser = 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;
+  }
+});
+export var useHydratedDeprecations = createHook(Store, {
+  selector: function selector(state) {
+    var ast = getJastFromState(state.editorState);
+    var fieldsInQuery = getFieldNodes(ast);
+    var toReturn = [];
+    Object.entries(state.hydratedValues).forEach(function (_ref42) {
+      var _state$hydratedValues3;
+      var _ref43 = _slicedToArray(_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;
+  }
+});
+export var useRichInlineNodesEnabled = createHook(Store, {
+  selector: function selector(state) {
+    return state.enableRichInlineNodes;
+  }
+});
+export var useOnSyntaxHelp = createHook(Store, {
+  selector: function selector(state) {
+    return state.onSyntaxHelp;
+  }
+});
+export var EditorStateContainer = 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: uuidv4(),
+        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
+      });
+    };
+  }
+});