@atlaskit/jql-editor 4.0.0

package/dist/esm/plugins/jql-ast/error-handlers/FieldRuleErrorHandler.js

@@ -0,0 +1,15 @@
+import { JQLLexer } from '@atlaskit/jql-parser';
+import { errorMessages } from '../messages';
+
+/**
+ * Show the appropriate error message when parsing JQL fails and a field rule was expected.
+ */
+export var handleFieldRuleError = function handleFieldRuleError(currentToken, intl) {
+  var isEOF = currentToken.type === JQLLexer.EOF;
+  if (currentToken.type === JQLLexer.LBRACKET) {
+    return intl.formatMessage(errorMessages.expectingCFButReceived);
+  }
+  return isEOF ? intl.formatMessage(errorMessages.expectingFieldBeforeEOF) : intl.formatMessage(errorMessages.expectingFieldButReceived, {
+    received: currentToken.text
+  });
+};

package/dist/esm/plugins/jql-ast/error-handlers/FunctionArgumentRuleErrorHandler.js

@@ -0,0 +1,12 @@
+import { JQLLexer } from '@atlaskit/jql-parser';
+import { errorMessages } from '../messages';
+
+/**
+ * Show the appropriate error message when parsing JQL fails and a function argument rule was expected.
+ */
+export var handleFunctionArgumentRuleError = function handleFunctionArgumentRuleError(currentToken, intl) {
+  var isEOF = currentToken.type === JQLLexer.EOF;
+  return isEOF ? intl.formatMessage(errorMessages.expectingFunctionArgBeforeEOF) : intl.formatMessage(errorMessages.expectingFunctionArgButReceived, {
+    received: currentToken.text
+  });
+};

package/dist/esm/plugins/jql-ast/error-handlers/OperandRuleErrorHandler.js

@@ -0,0 +1,61 @@
+import { JQLLexer } from '@atlaskit/jql-parser';
+import { errorMessages } from '../messages';
+import { getExpectedTokensFromParserOrException, getTokenDisplayNames } from '../utils';
+import { handleExpectedTokensError } from './ExpectedTokensErrorHandler';
+
+/**
+ * Show the appropriate error message when parsing JQL fails and an operand rule was expected.
+ */
+export var handleOperandRuleError = function handleOperandRuleError(recognizer, currentToken, expectedTokens, rules, intl, exception) {
+  // If there are no expected autocomplete tokens, then attempt to find viable tokens from the exception/parser.
+  if (expectedTokens.length === 0) {
+    expectedTokens = getTokenDisplayNames(recognizer, getExpectedTokensFromParserOrException(recognizer, exception));
+  }
+  var isEOF = currentToken.type === JQLLexer.EOF;
+  if (rules.value && rules.list && rules.function) {
+    return isEOF ? intl.formatMessage(errorMessages.expectingOperandBeforeEOF) : intl.formatMessage(errorMessages.expectingOperandButReceived, {
+      received: currentToken.text
+    });
+  }
+  if (rules.value && rules.function) {
+    return isEOF ? intl.formatMessage(errorMessages.expectingValueOrFunctionBeforeEOF) : intl.formatMessage(errorMessages.expectingValueOrFunctionButReceived, {
+      received: currentToken.text
+    });
+  }
+  if (rules.list && rules.function) {
+    // Lists and functions are the only operands that contain structural tokens (i.e. LPAREN, RPAREN and COMMA).
+    // So, if there are specific expected tokens, we prioritize those over generic rule messages.
+    if (expectedTokens.length) {
+      return handleExpectedTokensError(recognizer, currentToken, expectedTokens, intl, exception);
+    }
+    return isEOF ? intl.formatMessage(errorMessages.expectingListOrFunctionBeforeEOF) : intl.formatMessage(errorMessages.expectingListOrFunctionButReceived, {
+      received: currentToken.text
+    });
+  }
+
+  // Value or list combination is not possible with current grammar definition
+
+  if (rules.function) {
+    // Lists and functions are the only operands that contain structural tokens (i.e. LPAREN, RPAREN and COMMA).
+    // So, if there are specific expected tokens, we prioritize those over generic rule messages.
+    if (expectedTokens.length) {
+      return handleExpectedTokensError(recognizer, currentToken, expectedTokens, intl, exception);
+    }
+    return isEOF ? intl.formatMessage(errorMessages.expectingFunctionBeforeEOF) : intl.formatMessage(errorMessages.expectingFunctionButReceived, {
+      received: currentToken.text
+    });
+  }
+  if (rules.list) {
+    // Lists and functions are the only operands that contain structural tokens (i.e. LPAREN, RPAREN and COMMA).
+    // So, if there are specific expected tokens, we prioritize those over generic rule messages.
+    if (expectedTokens.length) {
+      return handleExpectedTokensError(recognizer, currentToken, expectedTokens, intl, exception);
+    }
+    return isEOF ? intl.formatMessage(errorMessages.expectingListBeforeEOF) : intl.formatMessage(errorMessages.expectingListButReceived, {
+      received: currentToken.text
+    });
+  }
+  return isEOF ? intl.formatMessage(errorMessages.expectingValueBeforeEOF) : intl.formatMessage(errorMessages.expectingValueButReceived, {
+    received: currentToken.text
+  });
+};

package/dist/esm/plugins/jql-ast/error-handlers/OperatorRuleErrorHandler.js

@@ -0,0 +1,13 @@
+import { JQLLexer } from '@atlaskit/jql-parser';
+import { errorMessages } from '../messages';
+
+// TODO: Figure out if we can show a message without hardcoded operators
+/**
+ * Show the appropriate error message when parsing JQL fails and an operator rule was expected.
+ */
+export var handleOperatorRuleError = function handleOperatorRuleError(currentToken, intl) {
+  var isEOF = currentToken.type === JQLLexer.EOF;
+  return isEOF ? intl.formatMessage(errorMessages.expectingOperatorBeforeEOF) : intl.formatMessage(errorMessages.expectingOperatorButReceived, {
+    received: currentToken.text
+  });
+};

package/dist/esm/plugins/jql-ast/index.js

@@ -0,0 +1,39 @@
+import { Plugin, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { JastBuilder } from '@atlaskit/jql-ast';
+import { getNodeText } from '../../utils/document-text';
+import JQLEditorErrorStrategy from './JQLEditorErrorStrategy';
+var JQLAstPluginKey = new PluginKey('jql-ast-plugin');
+export var getJastFromState = function getJastFromState(state) {
+  var jast = JQLAstPluginKey.getState(state);
+  // This should never happen as the JQLAstPlugin will always be configured but we'll handle this case anyway to keep TS happy.
+  if (jast == null) {
+    // eslint-disable-next-line no-console
+    console.error('Unable to get state from the JQLAstPlugin as it has not been configured.');
+    return {
+      query: undefined,
+      represents: '',
+      errors: []
+    };
+  }
+  return jast;
+};
+var jqlAstPlugin = function jqlAstPlugin(intlRef) {
+  var jastBuilder = new JastBuilder().setErrorHandler(new JQLEditorErrorStrategy(intlRef));
+  return new Plugin({
+    key: JQLAstPluginKey,
+    state: {
+      init: function init(_, _ref) {
+        var doc = _ref.doc;
+        return jastBuilder.build(getNodeText(doc, 0, doc.content.size));
+      },
+      // @ts-ignore
+      apply: function apply(tr, value, oldState) {
+        var text = getNodeText(tr.doc, 0, tr.doc.content.size);
+        var oldText = getNodeText(oldState.doc, 0, oldState.doc.content.size);
+        // Only update the AST if textContent has changed
+        return text !== oldText ? jastBuilder.build(text) : value;
+      }
+    }
+  });
+};
+export default jqlAstPlugin;

package/dist/esm/plugins/jql-ast/messages.js

@@ -0,0 +1,173 @@
+import { defineMessages } from 'react-intl-next';
+export var errorMessages = defineMessages({
+  expectingOperatorButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingOperatorButReceived',
+    defaultMessage: "Expecting an operator but got ''{received}''. The valid operators are '=', '!=', '<', '>', '<=', '>=', '~', '!~', 'IN', 'NOT IN', 'IS' and 'IS NOT'.",
+    description: 'When an operator was expected but another token was received.'
+  },
+  expectingOperatorBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingOperatorBeforeEOF',
+    defaultMessage: "Expecting an operator before the end of the query. The valid operators are '=', '!=', '<', '>', '<=', '>=', '~', '!~', 'IN', 'NOT IN', 'IS' and 'IS NOT'.",
+    description: 'When an operator was expected before the end of the query.'
+  },
+  expectingFieldButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFieldButReceived',
+    defaultMessage: "Expecting a field name but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a field name.",
+    description: 'When a field was expected but another token was received.'
+  },
+  expectingFieldBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFieldBeforeEOF',
+    defaultMessage: 'Expecting a field name before the end of the query.',
+    description: 'When a field was expected before the end of the query.'
+  },
+  expectingCFButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingCFButReceived',
+    defaultMessage: "Expecting a field name but got '['. Did you mean 'cf['?",
+    description: "When a field was expected but a left bracket was received without a 'cf' prefix."
+  },
+  expectingCustomFieldId: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingCustomFieldId',
+    defaultMessage: "Expecting a custom field id enclosed by '[ ]' after 'cf'. Example: 'cf[10021]'.",
+    description: 'When a custom field id was expected before the end of the query. Text wrapped in single quotes in our message refer to specific tokens in the query so they should not be translated.'
+  },
+  expectingOperandButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingOperandButReceived',
+    defaultMessage: "Expecting either a value, list or function but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When an operand was expected but another token was received.'
+  },
+  expectingOperandBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingOperandBeforeEOF',
+    defaultMessage: 'Expecting either a value, list or function before the end of the query.',
+    description: 'When an operand was expected before the end of the query.'
+  },
+  expectingValueOrFunctionButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionButReceived',
+    defaultMessage: "Expecting a value or function but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a value or function was expected but another token was received.'
+  },
+  expectingValueOrFunctionBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingValueOrFunctionBeforeEOF',
+    defaultMessage: 'Expecting a value or function before the end of the query.',
+    description: 'When a value or function was expected before the end of the query.'
+  },
+  expectingListOrFunctionButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionButReceived',
+    defaultMessage: "Expecting a list or function but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a list or function was expected but another token was received.'
+  },
+  expectingListOrFunctionBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingListOrFunctionBeforeEOF',
+    defaultMessage: 'Expecting a list or function before the end of the query.',
+    description: 'When a list or function was expected before the end of the query.'
+  },
+  expectingValueButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingValueButReceived',
+    defaultMessage: "Expecting a value but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a value was expected but another token was received.'
+  },
+  expectingValueBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingValueBeforeEOF',
+    defaultMessage: 'Expecting a value before the end of the query.',
+    description: 'When a value was expected before the end of the query.'
+  },
+  expectingListButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingListButReceived',
+    defaultMessage: "Expecting a list but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a list was expected but another token was received.'
+  },
+  expectingListBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingListBeforeEOF',
+    defaultMessage: 'Expecting a list before the end of the query.',
+    description: 'When a list was expected before the end of the query.'
+  },
+  expectingFunctionButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFunctionButReceived',
+    defaultMessage: "Expecting a function but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a function was expected but another token was received.'
+  },
+  expectingFunctionBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFunctionBeforeEOF',
+    defaultMessage: 'Expecting a function before the end of the query.',
+    description: 'When a function was expected before the end of the query.'
+  },
+  expectingFieldPropertyIdButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdButReceived',
+    defaultMessage: "Expecting a property id but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a field property ID was expected but another token was received.'
+  },
+  expectingFieldPropertyIdBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFieldPropertyIdBeforeEOF',
+    defaultMessage: 'Expecting a property id before the end of the query.',
+    description: 'When a field property ID was expected before the end of the query.'
+  },
+  expectingFunctionArgButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgButReceived',
+    defaultMessage: "Expecting a function argument but got ''{received}''. You must surround ''{received}'' in quotation marks to use it as a value.",
+    description: 'When a function argument was expected but another token was received.'
+  },
+  expectingFunctionArgBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingFunctionArgBeforeEOF',
+    defaultMessage: 'Expecting a function argument before the end of the query.',
+    description: 'When a function argument was expected before the end of the query.'
+  },
+  expectingMultipleTokensButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensButReceived',
+    defaultMessage: "Expecting {firstExpectedTokens} or ''{lastExpectedToken}'' but got ''{received}''.",
+    description: 'When the text the user entered does not match any of the expected tokens.'
+  },
+  expectingMultipleTokensBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingMultipleTokensBeforeEOF',
+    defaultMessage: "Expecting {firstExpectedTokens} or ''{lastExpectedToken}'' before the end of the query.",
+    description: 'When there are still tokens expected before the query can end.'
+  },
+  expectingTokenButReceived: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingTokenButReceived',
+    defaultMessage: "Expecting ''{expectedToken}'' but got ''{received}''.",
+    description: 'When the text the user entered does not match the expected tokens.'
+  },
+  expectingTokenBeforeEOF: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.expectingTokenBeforeEOF',
+    defaultMessage: "Expecting ''{expectedToken}'' before the end of the query.",
+    description: 'When an expected token needs to be inserted before the query can end.'
+  },
+  unknownErrorAtToken: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.unknownErrorAtToken',
+    defaultMessage: "Unable to parse the query at ''{received}''.",
+    description: 'When the query could not be parsed when a token was reached.'
+  },
+  reservedChar: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.reservedChar',
+    defaultMessage: "The character ''{char}'' is a reserved JQL character. You must enclose it in a string or use the escape ''{escapedChar}'' instead.",
+    description: 'When the user has a reserved character in the query.'
+  },
+  reservedWord: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.reservedWord',
+    defaultMessage: "''{word}'' is a reserved JQL word. You must surround it in quotation marks to use it in a query.",
+    description: 'When the user has a reserved word in the query.'
+  },
+  unfinishedString: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.unfinishedString',
+    defaultMessage: "The quoted string ''{received}'' has not been completed.",
+    description: 'When a string is missing an opening or closing quote.'
+  },
+  unfinishedStringBlank: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.unfinishedStringBlank',
+    defaultMessage: 'The quoted string has not been completed.',
+    description: 'When a string is missing an opening or closing quote.'
+  },
+  illegalEscape: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.illegalEscape',
+    defaultMessage: "''{received}'' is an illegal JQL escape sequence. The valid escape sequences are \\', \\\", \\t, \\n, \\r, \\\\, '\\ ' and \\uXXXX.",
+    description: 'When there are no valid tokens following an escape character.'
+  },
+  illegalEscapeBlank: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.illegalEscapeBlank',
+    defaultMessage: "The escape sequence has not been completed. The valid escape sequences are \\', \\\", \\t, \\n, \\r, \\\\, '\\ ' and \\uXXXX.",
+    description: 'When there are no valid tokens following an escape character.'
+  },
+  illegalChar: {
+    id: 'jql-editor.plugins.jql-ast.error-messages.illegalChar',
+    defaultMessage: "The character ''{char}'' must be escaped. Use the escape ''{escapedChar}'' instead.",
+    description: 'When an illegal character is encountered in a query.'
+  }
+});

package/dist/esm/plugins/jql-ast/utils.js

@@ -0,0 +1,17 @@
+import { ignoredTokens } from './constants';
+export var getTokenDisplayNames = function getTokenDisplayNames(parser, tokens) {
+  return tokens.map(function (tokenType) {
+    return parser.vocabulary.getDisplayName(tokenType).replace(/^'|'$/g, '');
+  });
+};
+export var getExpectedTokensFromParserOrException = function getExpectedTokensFromParserOrException(parser, exception) {
+  var _exception$expectedTo;
+  // Read expected tokens from the exception if present, as it refers to the expected input symbols at the time the
+  // exception was thrown (whereas JQLParser will give us possible tokens from the current parser state).
+  var expectedTokenSet = (_exception$expectedTo = exception === null || exception === void 0 ? void 0 : exception.expectedTokens) !== null && _exception$expectedTo !== void 0 ? _exception$expectedTo : parser.getExpectedTokens();
+  return expectedTokenSet.toArray()
+  // Show the token if it's not ignored
+  .filter(function (tokenType) {
+    return !ignoredTokens.has(tokenType);
+  });
+};

package/dist/esm/plugins/jql-syntax-highlighting/index.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Plugin, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../common/get-document-position';
+import { getJastFromState } from '../jql-ast';
+import { SyntaxHighlightingVisitor } from './visitor';
+var getHighlights = function getHighlights(state) {
+  var ast = getJastFromState(state);
+  // Get highlights for AST nodes
+  var visitor = new SyntaxHighlightingVisitor(state);
+  var highlights = ast.query ? visitor.visit(ast.query) : [];
+  // Create a highlight for the first syntax error encountered
+  var _ast$errors = _slicedToArray(ast.errors, 1),
+    error = _ast$errors[0];
+  if (error instanceof JQLSyntaxError) {
+    var documentFrom = getDocumentPosition(state.doc, error.start);
+    var documentTo = getDocumentPosition(state.doc, error.stop);
+    highlights.push({
+      tokenType: 'error',
+      documentFrom: documentFrom,
+      documentTo: documentTo
+    });
+  }
+  return highlights;
+};
+var JQLSyntaxHighlightingPluginKey = new PluginKey('jql-syntax-highlighting-plugin');
+var jqlSyntaxHighlightingPlugin = function jqlSyntaxHighlightingPlugin() {
+  return new Plugin({
+    key: JQLSyntaxHighlightingPluginKey,
+    appendTransaction: function appendTransaction(_, oldState, newState) {
+      // Avoid unnecessary transactions if document hasn't changed in the current transaction
+      if (oldState.doc === newState.doc) {
+        return;
+      }
+      var transaction = newState.tr;
+
+      // Remove token marks from all inline nodes so they can be recomputed
+      transaction.removeMark(0, newState.doc.content.size);
+
+      // Create marks for computed highlights
+      var highlights = getHighlights(newState);
+      highlights.forEach(function (_ref) {
+        var tokenType = _ref.tokenType,
+          documentFrom = _ref.documentFrom,
+          documentTo = _ref.documentTo;
+        // Apply mark to all text nodes within the highlighted range
+        newState.doc.nodesBetween(documentFrom, documentTo, function (node, pos) {
+          if (node.isText) {
+            var from = Math.max(pos, documentFrom);
+            var to = Math.min(pos + node.nodeSize, documentTo);
+            var mark = newState.schema.marks.token.create({
+              tokenType: tokenType
+            });
+            transaction.addMark(from, to, mark);
+          }
+        });
+      });
+      return transaction;
+    }
+  });
+};
+export default jqlSyntaxHighlightingPlugin;

package/dist/esm/plugins/jql-syntax-highlighting/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/jql-syntax-highlighting/visitor.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { AbstractJastVisitor, isOperandNode } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../common/get-document-position';
+export var SyntaxHighlightingVisitor = /*#__PURE__*/function (_AbstractJastVisitor) {
+  _inherits(SyntaxHighlightingVisitor, _AbstractJastVisitor);
+  var _super = _createSuper(SyntaxHighlightingVisitor);
+  function SyntaxHighlightingVisitor(state) {
+    var _this;
+    _classCallCheck(this, SyntaxHighlightingVisitor);
+    _this = _super.call(this);
+    _defineProperty(_assertThisInitialized(_this), "visitCompoundOperator", function (compoundOperator) {
+      return compoundOperator.positions.map(function (position) {
+        return _this.createHighlight('keyword', position);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitNotClauseOperator", function (notClauseOperator) {
+      return _this.getHighlightsIfPosition('keyword', notClauseOperator.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitOrderByOperator", function (orderByOperator) {
+      return _this.getHighlightsIfPosition('keyword', orderByOperator.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitOrderByDirection", function (orderByDirection) {
+      return _this.getHighlightsIfPosition('keyword', orderByDirection.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitField", function (field) {
+      return _this.getHighlightsIfPosition('field', field.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitOperator", function (operator) {
+      return _this.getHighlightsIfPosition('operator', operator.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "visitPredicateOperator", function (predicateOperator) {
+      return _this.getHighlightsIfPosition('operator', predicateOperator.position);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getHighlightsIfPosition", function (tokenType, maybePosition) {
+      if (!maybePosition) {
+        return [];
+      }
+      return [_this.createHighlight(tokenType, maybePosition)];
+    });
+    _defineProperty(_assertThisInitialized(_this), "createHighlight", function (tokenType, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        start = _ref2[0],
+        end = _ref2[1];
+      var documentFrom = getDocumentPosition(_this.state.doc, start);
+      var documentTo = getDocumentPosition(_this.state.doc, end);
+      return {
+        tokenType: tokenType,
+        documentFrom: documentFrom,
+        documentTo: documentTo
+      };
+    });
+    _this.state = state;
+    return _this;
+  }
+  _createClass(SyntaxHighlightingVisitor, [{
+    key: "shouldVisitNextChild",
+    value: function shouldVisitNextChild(node) {
+      // Skip visiting operand subtrees, which don't require syntax highlighting and can make a big impact on performance
+      return !isOperandNode(node);
+    }
+  }, {
+    key: "aggregateResult",
+    value: function aggregateResult(aggregate, nextResult) {
+      return aggregate.concat(nextResult);
+    }
+  }, {
+    key: "defaultResult",
+    value: function defaultResult() {
+      return [];
+    }
+  }]);
+  return SyntaxHighlightingVisitor;
+}(AbstractJastVisitor);

package/dist/esm/plugins/rich-inline-nodes/constants.js

@@ -0,0 +1,3 @@
+export var RICH_INLINE_NODE = 'rich_inline';
+export var SELECTED_NODE = 'selected';
+export var ERROR_NODE = 'error';

package/dist/esm/plugins/rich-inline-nodes/index.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import mapValues from 'lodash/mapValues';
+import { Plugin, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../common/get-document-position';
+import { getJastFromState } from '../jql-ast';
+import { ERROR_NODE, RICH_INLINE_NODE, SELECTED_NODE } from './constants';
+import { richInlineNodes } from './nodes';
+import { ReactNodeView } from './util/react-node-view';
+var decorateNodesInRange = function decorateNodesInRange(state, decoration, from, to) {
+  var decorations = [];
+  state.doc.nodesBetween(from, to, function (node, pos) {
+    if (node.type.spec.group === RICH_INLINE_NODE) {
+      decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
+        type: decoration
+      }));
+    }
+  });
+  return decorations;
+};
+var RichInlineNodesPluginKey = new PluginKey('rich-inline-nodes-plugin');
+var richInlineNodesPlugin = function richInlineNodesPlugin(portalActions) {
+  return new Plugin({
+    key: RichInlineNodesPluginKey,
+    props: {
+      decorations: function decorations(state) {
+        var decorations = [];
+
+        // Apply selected decoration to node views when they are part of a text selection
+        var _state$selection = state.selection,
+          from = _state$selection.from,
+          to = _state$selection.to;
+        decorations.push.apply(decorations, _toConsumableArray(decorateNodesInRange(state, SELECTED_NODE, from, to)));
+
+        // Apply error decoration to node views when they are part of AST error range
+        var ast = getJastFromState(state);
+        var _ast$errors = _slicedToArray(ast.errors, 1),
+          error = _ast$errors[0];
+        if (error instanceof JQLSyntaxError) {
+          var documentFrom = getDocumentPosition(state.doc, error.start);
+          var documentTo = getDocumentPosition(state.doc, error.stop);
+          decorations.push.apply(decorations, _toConsumableArray(decorateNodesInRange(state, ERROR_NODE, documentFrom, documentTo)));
+        }
+        return DecorationSet.create(state.doc, decorations);
+      },
+      nodeViews: mapValues(richInlineNodes, function (jqlNodeSpec) {
+        return function (node, _view, _getPos, decorations) {
+          return ReactNodeView.for(jqlNodeSpec.component, portalActions, node, decorations);
+        };
+      })
+    }
+  });
+};
+export default richInlineNodesPlugin;

package/dist/esm/plugins/rich-inline-nodes/nodes/index.js

@@ -0,0 +1,4 @@
+import { user } from './user';
+export var richInlineNodes = {
+  user: user
+};

package/dist/esm/plugins/rich-inline-nodes/nodes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/rich-inline-nodes/nodes/user/index.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import { useHydratedUser } from '../../../../state';
+import { AvatarWrapper, NameContainer, UserContainer } from './styled';
+var User = function User(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    fieldName = _ref.fieldName,
+    selected = _ref.selected,
+    error = _ref.error;
+  var _useHydratedUser = useHydratedUser({
+      id: id,
+      fieldName: fieldName
+    }),
+    _useHydratedUser2 = _slicedToArray(_useHydratedUser, 1),
+    user = _useHydratedUser2[0];
+  return /*#__PURE__*/React.createElement(UserContainer, {
+    selected: selected,
+    error: error
+  }, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: user === null || user === void 0 ? void 0 : user.avatarUrl,
+    borderColor: "transparent",
+    size: "xsmall"
+  })), /*#__PURE__*/React.createElement(NameContainer, null, name));
+};
+export var user = {
+  component: User,
+  attrs: {
+    id: {},
+    name: {},
+    fieldName: {}
+  }
+};

package/dist/esm/plugins/rich-inline-nodes/nodes/user/styled.js

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { N0, N40, N50, N500, R400 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+export var UserContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  height: ", ";\n  padding: 1px;\n  border-radius: 10px;\n  cursor: pointer;\n  user-select: none;\n\n  ", "\n"])), "var(--ds-space-200, 16px)", function (_ref) {
+  var selected = _ref.selected,
+    error = _ref.error;
+  if (selected) {
+    if (error) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          color: ", ";\n          background-color: ", ";\n          text-decoration: wavy underline;\n          text-decoration-thickness: 1px;\n          text-decoration-skip-ink: none;\n          text-decoration-color: ", ";\n        "])), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-background-danger-bold, ".concat(R400, ")"), "var(--ds-text-inverse, ".concat(N0, ")"));
+    } else {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          color: ", ";\n          background-color: ", ";\n          box-shadow: 0 0 0 1px ", ";\n        "])), "var(--ds-text, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(N500, ")"), "var(--ds-border-selected, transparent)");
+    }
+  } else {
+    if (error) {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          color: ", ";\n          background-color: ", ";\n          text-decoration: wavy underline;\n          text-decoration-thickness: 1px;\n          text-decoration-skip-ink: none;\n          text-decoration-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N40, ")"), "var(--ds-text-danger, ".concat(R400, ")"), "var(--ds-background-neutral-hovered, ".concat(N50, ")"));
+    } else {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          color: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n        "])), "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N40, ")"), "var(--ds-background-neutral-hovered, ".concat(N50, ")"));
+    }
+  }
+});
+export var NameContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)");
+
+/* Override Avatar styles to match design spec */
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+export var AvatarWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  > div {\n    top: 3px;\n\n    > span {\n      margin: 0;\n    }\n  }\n"])));

package/dist/esm/plugins/rich-inline-nodes/types.js

@@ -0,0 +1 @@
+export {};