@atlaskit/jql-editor 4.0.0

package/dist/es2019/state/index.js

@@ -0,0 +1,968 @@
+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, 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';
+const initialIntl = createIntl({
+  locale: 'en'
+});
+const defaultAutocompleteOptions = {
+  tokens: [],
+  fields: [],
+  operators: [],
+  values: [],
+  functions: []
+};
+export const 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.
+ */
+const isLineNumbersVisible = editorState => editorState.doc.childCount > 1;
+export const actions = {
+  onEditorViewBlur: () => ({
+    setState,
+    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.
+    const editorViewBlurTimeout = window.setTimeout(() => {
+      setState({
+        editorViewHasFocus: false
+      });
+      dispatch(actions.setSelectedAutocompleteOptionId(undefined));
+    });
+    setState({
+      editorViewBlurTimeout
+    });
+  },
+  onEditorViewFocus: event => ({
+    setState,
+    getState
+  }, {
+    onFocus
+  }) => {
+    const {
+      autocomplete,
+      editorViewBlurTimeout,
+      editorViewHasFocus
+    } = getState();
+    editorViewBlurTimeout && clearTimeout(editorViewBlurTimeout);
+    if (!editorViewHasFocus) {
+      var _autocomplete$contain, _autocomplete$contain2;
+      setState({
+        autocomplete: {
+          ...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 ? void 0 : (_autocomplete$contain2 = _autocomplete$contain.offsetParent) === null || _autocomplete$contain2 === void 0 ? void 0 : _autocomplete$contain2.getBoundingClientRect()
+        },
+        editorViewHasFocus: true
+      });
+      onFocus && onFocus(event);
+    }
+  },
+  openAutocompleteOnNextUpdate: () => ({
+    setState,
+    getState
+  }) => {
+    const autocompleteState = getState().autocomplete;
+    setState({
+      autocomplete: {
+        ...autocompleteState,
+        // Schedule open for next update of autocomplete suggestions so dropdown doesn't incur in layout shifts
+        shouldStayClosedOnNextUpdate: false
+      }
+    });
+  },
+  closeAutocomplete: () => ({
+    setState,
+    getState
+  }) => {
+    const autocompleteState = getState().autocomplete;
+    setState({
+      autocomplete: {
+        ...autocompleteState,
+        // Closing autocomplete can be done immediately as it won't incur in layout shifts
+        shouldStayClosed: true,
+        shouldStayClosedOnNextUpdate: true
+      }
+    });
+  },
+  setSelectedAutocompleteOptionId: selectedOptionId => ({
+    setState,
+    getState
+  }) => {
+    const autocompleteState = getState().autocomplete;
+    setState({
+      autocomplete: {
+        ...autocompleteState,
+        selectedOptionId
+      }
+    });
+  },
+  getAutocompleteSuggestions: editorState => ({
+    getState,
+    dispatch
+  }) => {
+    // No need to process suggestions if autocomplete is going to stay closed on next update
+    if (!getState().autocomplete.shouldStayClosedOnNextUpdate) {
+      const {
+        from,
+        to
+      } = editorState.selection;
+      const text = getNodeText(editorState.doc, 0, editorState.doc.content.size);
+      const textBeforeSelectionStart = getNodeText(editorState.doc, 0, from);
+      const textBeforeSelectionEnd = getNodeText(editorState.doc, 0, to);
+      const textPositionStart = textBeforeSelectionStart.length;
+      const textPositionStop = textBeforeSelectionEnd.length;
+      const autocomplete = JQLAutocomplete.fromText(text);
+      const suggestions = autocomplete.getJQLSuggestionsForCaretPosition([textPositionStart, textPositionStop]);
+      const {
+        rules,
+        tokens
+      } = suggestions;
+
+      // 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: suggestions => ({
+    setState,
+    getState,
+    dispatch
+  }) => {
+    const {
+      autocomplete,
+      editorView
+    } = getState();
+    const {
+      shouldStayClosedOnNextUpdate
+    } = autocomplete;
+    setState({
+      autocomplete: {
+        ...autocomplete,
+        options: {
+          ...defaultAutocompleteOptions,
+          tokens: tokensToAutocompleteOptions(suggestions.tokens)
+        },
+        // Set replace position start in the same update as initial options to avoid visible layout shifts
+        ...(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: (key, observable, rule, type) => ({
+    getState,
+    setState
+  }) => {
+    const {
+      context,
+      matchedText,
+      replacePosition
+    } = rule;
+    return observable.pipe(tap(data => {
+      const nextSuggestions = data.map(option => ({
+        ...option,
+        context,
+        matchedText,
+        replacePosition,
+        type,
+        id: getAutocompleteOptionId(option.value)
+      }));
+      const {
+        autocomplete
+      } = getState();
+      const {
+        options
+      } = autocomplete;
+      setState({
+        autocomplete: {
+          ...autocomplete,
+          options: {
+            ...options,
+            [key]: options[key].concat(nextSuggestions)
+          }
+        }
+      });
+    }));
+  },
+  cancelSubscription: () => ({
+    setState,
+    getState
+  }) => {
+    const autocompleteState = getState().autocomplete;
+    const {
+      subscription,
+      analyticsSubscription
+    } = autocompleteState;
+    // Cancel any in-flight subscriptions
+    subscription && subscription.unsubscribe();
+    analyticsSubscription && analyticsSubscription.unsubscribe();
+    setState({
+      autocomplete: {
+        ...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: loading => ({
+    setState,
+    getState
+  }) => {
+    const {
+      autocomplete
+    } = getState();
+    setState({
+      autocomplete: {
+        ...autocomplete,
+        loading
+      }
+    });
+  },
+  setAutocompleteOptions: options => ({
+    setState,
+    getState
+  }) => {
+    const autocompleteState = getState().autocomplete;
+    setState({
+      autocomplete: {
+        ...autocompleteState,
+        options
+      }
+    });
+  },
+  setAutocompleteContainer: container => ({
+    setState,
+    getState
+  }) => {
+    var _container$offsetPare;
+    const autocompleteState = getState().autocomplete;
+    setState({
+      autocomplete: {
+        ...autocompleteState,
+        container,
+        offsetParentRect: container === null || container === void 0 ? void 0 : (_container$offsetPare = container.offsetParent) === null || _container$offsetPare === void 0 ? void 0 : _container$offsetPare.getBoundingClientRect()
+      }
+    });
+  },
+  callAutocompleteProviders: ({
+    rules,
+    tokens
+  }) => ({
+    getState,
+    setState,
+    dispatch
+  }) => {
+    const {
+      onFields,
+      onOperators,
+      onValues,
+      onFunctions
+    } = getState().autocompleteProvider;
+    const optionTypes = [];
+    const 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;
+        const 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;
+        const 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) {
+      const {
+        context,
+        matchedText
+      } = rules.operator;
+      const 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) {
+      const {
+        context,
+        matchedText
+      } = rules.field;
+      const 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;
+    }
+    const {
+      analyticsSubscription,
+      onStopAutocompleteEvent
+    } = dispatch(onStartAutocompleteEvent());
+    dispatch(actions.setLoading(true));
+    let hasOptions = false;
+    const subscription = merge(...observables).subscribe({
+      next() {
+        hasOptions = true;
+      },
+      error() {
+        onStopAutocompleteEvent(false, optionTypes, hasOptions);
+        dispatch(actions.setLoading(false));
+      },
+      complete() {
+        onStopAutocompleteEvent(true, optionTypes, hasOptions);
+        dispatch(actions.setLoading(false));
+      }
+    });
+    const {
+      autocomplete
+    } = getState();
+    setState({
+      autocomplete: {
+        ...autocomplete,
+        subscription,
+        analyticsSubscription
+      }
+    });
+  },
+  updateValidationState: () => ({
+    getState,
+    setState
+  }) => {
+    const {
+      editorState
+    } = getState();
+    const jast = getJastFromState(editorState);
+    setState({
+      jqlError: jast.errors.length > 0 ? jast.errors[0] : null
+    });
+  },
+  initialiseEditorState: () => ({
+    dispatch
+  }, {
+    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: portalActions => ({
+    getState,
+    setState,
+    dispatch
+  }, {
+    intlRef,
+    onSearch
+  }) => {
+    const state = getState();
+    let {
+      editorState
+    } = state;
+    const {
+      enableRichInlineNodes
+    } = state;
+
+    // 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.
+    const onSearchCommand = (pmState, pmDispatch, pmView) =>
+    // 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
+    });
+  },
+  onApplyEditorTransaction: transaction => ({
+    getState,
+    setState,
+    dispatch
+  }, {
+    onUpdate
+  }) => {
+    const {
+      query,
+      editorState,
+      editorView,
+      enableRichInlineNodes
+    } = getState();
+    const oldSelection = editorState.selection;
+    const updatedQuery = getNodeText(transaction.doc, 0, transaction.doc.content.size);
+    const 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: (query, addToHistory = true) => ({
+    getState,
+    dispatch
+  }) => {
+    const {
+      editorState,
+      enableRichInlineNodes
+    } = getState();
+
+    // Use the clipboard text parser to get our slice to ensure new lines are split into separate paragraphs
+    const slice = clipboardTextParser(query, editorState.doc.resolve(0));
+    const 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: (editorViewNode, attributes, portalActions) => ({
+    getState,
+    setState,
+    dispatch
+  }, {
+    onEditorMounted
+  }) => {
+    // Configure plugins that require portal rendering (i.e. autocomplete and rich inline nodes).
+    dispatch(actions.configurePlugins(portalActions));
+    const {
+      editorState,
+      resizeObserver
+    } = getState();
+    const editorView = new EditorView(editorViewNode, {
+      state: editorState,
+      dispatchTransaction: transaction => dispatch(actions.onApplyEditorTransaction(transaction)),
+      clipboardTextSerializer,
+      clipboardTextParser,
+      attributes
+    });
+
+    // Unobserve previously observed elements
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+
+    // Observe size changes to update rect
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(editorViewNode);
+    setState({
+      editorView
+    });
+    onEditorMounted && onEditorMounted();
+  },
+  updateEditorView: attributes => ({
+    getState
+  }) => {
+    const {
+      editorView,
+      onDebugUnsafeMessage,
+      editorState
+    } = getState();
+    if (editorView) {
+      try {
+        editorView.update({
+          ...editorView.props,
+          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.
+        const message = `Error occurred trying to update attributes on the editor view with the message: ${error instanceof Error ? error.message : String(error)}`;
+        const attributeDiff = Object.keys(attributes).reduce((result, key) => {
+          var _editorView$props$att;
+          const prevAttr = // @ts-ignore
+          (_editorView$props$att = editorView.props.attributes) === null || _editorView$props$att === void 0 ? void 0 : _editorView$props$att[key];
+          const nextAttr = attributes[key];
+          if (nextAttr !== prevAttr) {
+            // @ts-ignore
+            result[`prev_${key}`] = prevAttr;
+            // @ts-ignore
+            result[`next_${key}`] = nextAttr;
+          }
+          return result;
+        }, {});
+        sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, {
+          stack: error instanceof Error ? error.stack : '',
+          ...attributeDiff
+        });
+      }
+    }
+  },
+  setEditorViewContainer: editorViewContainer => ({
+    setState
+  }) => {
+    setState({
+      editorViewContainer,
+      // Set initial rect
+      editorViewContainerRect: editorViewContainer === null || editorViewContainer === void 0 ? void 0 : editorViewContainer.getBoundingClientRect()
+    });
+  },
+  setEditorViewContainerScroll: scroll => ({
+    setState
+  }) => {
+    setState({
+      editorViewContainerScroll: scroll
+    });
+  },
+  onSearch: () => ({
+    getState,
+    dispatch
+  }) => {
+    const {
+      editorState,
+      editorView
+    } = getState();
+    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: (pmState, pmDispatch, pmView, keyboardShortcut) => ({
+    getState,
+    dispatch
+  }, {
+    onSearch,
+    createAndFireAnalyticsEvent
+  }) => {
+    if (!onSearch) {
+      return true;
+    }
+    const jast = getJastFromState(pmState);
+    const {
+      query
+    } = getState();
+    onSearch(query, jast);
+    createAndFireAnalyticsEvent({
+      action: AnalyticsAction.CLICKED,
+      actionSubject: ActionSubject.BUTTON,
+      actionSubjectId: ActionSubjectId.EDITOR_SEARCH,
+      eventType: EventType.UI,
+      attributes: {
+        ...computeJqlInsights(jast),
+        keyboardShortcut
+      }
+    });
+
+    // Update JQL validation state
+    dispatch(actions.updateValidationState());
+
+    // Invoke command to select any errors in the query
+    selectErrorCommand(pmState, pmDispatch, pmView);
+    return true;
+  },
+  externalErrorMessageViewed: () => ({
+    getState
+  }, {
+    createAndFireAnalyticsEvent,
+    externalMessages
+  }) => {
+    const {
+      editorView,
+      onDebugUnsafeMessage,
+      jqlError,
+      editorState
+    } = getState();
+    const externalErrors = externalMessages.filter(({
+      type
+    }) => type === 'error');
+    if (externalErrors.length > 0) {
+      const hasClientError = jqlError !== null;
+      const initialValue = {
+        hasClientError,
+        semanticErrorCount: 0,
+        syntaxErrorCount: 0,
+        syntaxErrorTypes: []
+      };
+      const attributes = externalErrors.reduce((result, {
+        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
+      });
+
+      // 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) {
+        const message = 'External JQL syntax error is shown without a client error.';
+        sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, {
+          syntaxErrorTypes: attributes.syntaxErrorTypes.join(',')
+        });
+      }
+    }
+  },
+  createAndFireAnalyticsEvent: payload => (_, {
+    createAndFireAnalyticsEvent
+  }) => {
+    createAndFireAnalyticsEvent(payload);
+  }
+};
+const Store = createStore({
+  name: 'jql-editor',
+  initialState,
+  actions
+});
+export const useStoreActions = createHook(Store, {
+  selector: null
+});
+export const useEditorState = createHook(Store, {
+  selector: state => state.editorState
+});
+export const useEditorView = createHook(Store, {
+  selector: state => state.editorView
+});
+export const useIsSearching = createHook(Store, {
+  selector: state => state.isSearching
+});
+export const useIntl = createHook(Store, {
+  selector: state => state.intlRef.current
+});
+export const useAutocompleteProvider = createHook(Store, {
+  selector: state => state.autocompleteProvider
+});
+const getScopedId = (state, idSuffix) => `${state.idPrefix}_${idSuffix}`;
+export const useScopedId = createHook(Store, {
+  selector: getScopedId
+});
+export const useIdPrefix = createHook(Store, {
+  selector: state => state.idPrefix
+});
+export const useEditorViewHasFocus = createHook(Store, {
+  selector: ({
+    editorViewHasFocus
+  }) => editorViewHasFocus
+});
+export const useLineNumbersVisible = createHook(Store, {
+  selector: ({
+    lineNumbersVisible
+  }) => lineNumbersVisible
+});
+const getAutocomplete = state => state.autocomplete;
+export const useAutocomplete = createHook(Store, {
+  selector: getAutocomplete
+});
+
+/**
+ * Returns the JQL error from the last query that was searched, or {@code null} if there were none.
+ */
+export const useJqlError = createHook(Store, {
+  selector: state => state.jqlError
+});
+
+/**
+ * Returns whether there are any JQL errors in the current Prosemirror editor state.
+ */
+export const useEditorStateHasJqlError = createHook(Store, {
+  selector: state => getJastFromState(state.editorState).errors.length > 0
+});
+export const useExternalMessages = createHook(Store, {
+  selector: state => {
+    const byType = groupBy(state.externalMessages, 'type');
+    return {
+      errors: byType.error || [],
+      warnings: byType.warning || [],
+      infos: byType.info || []
+    };
+  }
+});
+const memoizedAutocompleteOptionsSelector = createSelector(state => state.autocomplete.options.tokens, state => state.autocomplete.options.functions, state => state.autocomplete.options.values, state => state.autocomplete.options.operators, state => state.autocomplete.options.fields, (tokens, functions, values, operators, fields) => [...tokens, ...functions, ...values, ...operators, ...fields]);
+export const useAutocompleteOptions = createHook(Store, {
+  selector: memoizedAutocompleteOptionsSelector
+});
+const autocompleteIsLoadingSelector = state => state.autocomplete.loading;
+export const useAutocompleteLoading = createHook(Store, {
+  selector: autocompleteIsLoadingSelector
+});
+const memoizedAutocompleteIsOpenSelector = createSelector(state => state.editorViewHasFocus, memoizedAutocompleteOptionsSelector, autocompleteIsLoadingSelector, state => state.autocomplete.shouldStayClosed, (hasFocus, options, loading, shouldStayClosed) => !shouldStayClosed && hasFocus && (options.length > 0 || loading));
+export const useAutocompleteIsOpen = createHook(Store, {
+  selector: memoizedAutocompleteIsOpenSelector
+});
+export const useAutocompletePosition = createHook(Store, {
+  selector: state => {
+    var _offsetParentRect$lef, _offsetParentRect$top;
+    const {
+      autocomplete,
+      editorView,
+      editorViewContainerRect,
+      onDebugUnsafeMessage,
+      editorState
+    } = state;
+    const {
+      replacePositionStart,
+      offsetParentRect
+    } = autocomplete;
+    if (!editorView) {
+      // Should never™ happen
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+    let docTop;
+    let docLeft;
+    try {
+      const 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.
+      const message = `Error occurred trying to get autocomplete position with the message: ${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.
+    const autocompleteTop = docTop + gridSize();
+    const viewportTop = editorViewContainerRect !== undefined ? clamp(autocompleteTop, editorViewContainerRect.top, editorViewContainerRect.bottom) : autocompleteTop;
+    const left = docLeft - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0);
+    const 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 const useHydratedValue = createHook(Store, {
+  selector: (state, {
+    id,
+    fieldName
+  }) => {
+    var _state$hydratedValues;
+    return (_state$hydratedValues = state.hydratedValues[fieldName]) === null || _state$hydratedValues === void 0 ? void 0 : _state$hydratedValues.get(id);
+  }
+});
+export const useHydratedUser = createHook(Store, {
+  selector: (state, {
+    id,
+    fieldName
+  }) => {
+    var _state$hydratedValues2;
+    const 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 const useHydratedDeprecations = createHook(Store, {
+  selector: state => {
+    const ast = getJastFromState(state.editorState);
+    const fieldsInQuery = getFieldNodes(ast);
+    const toReturn = [];
+    Object.entries(state.hydratedValues).forEach(([fieldName]) => {
+      var _state$hydratedValues3;
+      (_state$hydratedValues3 = state.hydratedValues[fieldName]) === null || _state$hydratedValues3 === void 0 ? void 0 : _state$hydratedValues3.forEach(value => {
+        if (value.type === 'deprecated-field') {
+          if (fieldsInQuery.has(value.id.toLowerCase())) {
+            toReturn.push(value);
+          }
+        }
+      });
+    });
+    return toReturn;
+  }
+});
+export const useRichInlineNodesEnabled = createHook(Store, {
+  selector: state => state.enableRichInlineNodes
+});
+export const useOnSyntaxHelp = createHook(Store, {
+  selector: state => state.onSyntaxHelp
+});
+export const EditorStateContainer = createContainer(Store, {
+  onInit: () => ({
+    getState,
+    setState,
+    dispatch
+  }, {
+    intlRef,
+    query,
+    isSearching,
+    autocompleteProvider,
+    externalMessages,
+    enableRichInlineNodes,
+    onDebugUnsafeMessage,
+    onSyntaxHelp
+  }) => {
+    setState({
+      controlledQuery: query,
+      query,
+      externalMessages,
+      isSearching,
+      intlRef,
+      autocompleteProvider,
+      enableRichInlineNodes,
+      // Generate unique identifiers for each JQL editor instance
+      idPrefix: uuidv4(),
+      resizeObserver: window.ResizeObserver !== undefined ? new window.ResizeObserver(() => {
+        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,
+      onSyntaxHelp
+    });
+    dispatch(actions.initialiseEditorState());
+  },
+  onUpdate: () => ({
+    getState,
+    setState,
+    dispatch
+  }, {
+    query: controlledQueryProp,
+    isSearching,
+    autocompleteProvider,
+    externalMessages,
+    enableRichInlineNodes,
+    onDebugUnsafeMessage,
+    onSyntaxHelp
+  }) => {
+    const {
+      controlledQuery,
+      query
+    } = getState();
+
+    // 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,
+      isSearching,
+      autocompleteProvider,
+      enableRichInlineNodes,
+      onDebugUnsafeMessage,
+      onSyntaxHelp
+    });
+  }
+});