@atlaskit/jql-editor 4.0.0

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

@@ -0,0 +1,59 @@
+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';
+const getHighlights = state => {
+  const ast = getJastFromState(state);
+  // Get highlights for AST nodes
+  const visitor = new SyntaxHighlightingVisitor(state);
+  const highlights = ast.query ? visitor.visit(ast.query) : [];
+  // Create a highlight for the first syntax error encountered
+  const [error] = ast.errors;
+  if (error instanceof JQLSyntaxError) {
+    const documentFrom = getDocumentPosition(state.doc, error.start);
+    const documentTo = getDocumentPosition(state.doc, error.stop);
+    highlights.push({
+      tokenType: 'error',
+      documentFrom,
+      documentTo
+    });
+  }
+  return highlights;
+};
+const JQLSyntaxHighlightingPluginKey = new PluginKey('jql-syntax-highlighting-plugin');
+const jqlSyntaxHighlightingPlugin = () => new Plugin({
+  key: JQLSyntaxHighlightingPluginKey,
+  appendTransaction: (_, oldState, newState) => {
+    // Avoid unnecessary transactions if document hasn't changed in the current transaction
+    if (oldState.doc === newState.doc) {
+      return;
+    }
+    const 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
+    const highlights = getHighlights(newState);
+    highlights.forEach(({
+      tokenType,
+      documentFrom,
+      documentTo
+    }) => {
+      // Apply mark to all text nodes within the highlighted range
+      newState.doc.nodesBetween(documentFrom, documentTo, (node, pos) => {
+        if (node.isText) {
+          const from = Math.max(pos, documentFrom);
+          const to = Math.min(pos + node.nodeSize, documentTo);
+          const mark = newState.schema.marks.token.create({
+            tokenType
+          });
+          transaction.addMark(from, to, mark);
+        }
+      });
+    });
+    return transaction;
+  }
+});
+export default jqlSyntaxHighlightingPlugin;

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

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

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

@@ -0,0 +1,55 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { AbstractJastVisitor, isOperandNode } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../common/get-document-position';
+export class SyntaxHighlightingVisitor extends AbstractJastVisitor {
+  constructor(state) {
+    super();
+    _defineProperty(this, "visitCompoundOperator", compoundOperator => {
+      return compoundOperator.positions.map(position => this.createHighlight('keyword', position));
+    });
+    _defineProperty(this, "visitNotClauseOperator", notClauseOperator => {
+      return this.getHighlightsIfPosition('keyword', notClauseOperator.position);
+    });
+    _defineProperty(this, "visitOrderByOperator", orderByOperator => {
+      return this.getHighlightsIfPosition('keyword', orderByOperator.position);
+    });
+    _defineProperty(this, "visitOrderByDirection", orderByDirection => {
+      return this.getHighlightsIfPosition('keyword', orderByDirection.position);
+    });
+    _defineProperty(this, "visitField", field => {
+      return this.getHighlightsIfPosition('field', field.position);
+    });
+    _defineProperty(this, "visitOperator", operator => {
+      return this.getHighlightsIfPosition('operator', operator.position);
+    });
+    _defineProperty(this, "visitPredicateOperator", predicateOperator => {
+      return this.getHighlightsIfPosition('operator', predicateOperator.position);
+    });
+    _defineProperty(this, "getHighlightsIfPosition", (tokenType, maybePosition) => {
+      if (!maybePosition) {
+        return [];
+      }
+      return [this.createHighlight(tokenType, maybePosition)];
+    });
+    _defineProperty(this, "createHighlight", (tokenType, [start, end]) => {
+      const documentFrom = getDocumentPosition(this.state.doc, start);
+      const documentTo = getDocumentPosition(this.state.doc, end);
+      return {
+        tokenType,
+        documentFrom,
+        documentTo
+      };
+    });
+    this.state = state;
+  }
+  shouldVisitNextChild(node) {
+    // Skip visiting operand subtrees, which don't require syntax highlighting and can make a big impact on performance
+    return !isOperandNode(node);
+  }
+  aggregateResult(aggregate, nextResult) {
+    return aggregate.concat(nextResult);
+  }
+  defaultResult() {
+    return [];
+  }
+}

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

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

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

@@ -0,0 +1,48 @@
+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';
+const decorateNodesInRange = (state, decoration, from, to) => {
+  const decorations = [];
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    if (node.type.spec.group === RICH_INLINE_NODE) {
+      decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
+        type: decoration
+      }));
+    }
+  });
+  return decorations;
+};
+const RichInlineNodesPluginKey = new PluginKey('rich-inline-nodes-plugin');
+const richInlineNodesPlugin = portalActions => new Plugin({
+  key: RichInlineNodesPluginKey,
+  props: {
+    decorations: state => {
+      const decorations = [];
+
+      // Apply selected decoration to node views when they are part of a text selection
+      const {
+        from,
+        to
+      } = state.selection;
+      decorations.push(...decorateNodesInRange(state, SELECTED_NODE, from, to));
+
+      // Apply error decoration to node views when they are part of AST error range
+      const ast = getJastFromState(state);
+      const [error] = ast.errors;
+      if (error instanceof JQLSyntaxError) {
+        const documentFrom = getDocumentPosition(state.doc, error.start);
+        const documentTo = getDocumentPosition(state.doc, error.stop);
+        decorations.push(...decorateNodesInRange(state, ERROR_NODE, documentFrom, documentTo));
+      }
+      return DecorationSet.create(state.doc, decorations);
+    },
+    nodeViews: mapValues(richInlineNodes, jqlNodeSpec => (node, _view, _getPos, decorations) => ReactNodeView.for(jqlNodeSpec.component, portalActions, node, decorations))
+  }
+});
+export default richInlineNodesPlugin;

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

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

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import { useHydratedUser } from '../../../../state';
+import { AvatarWrapper, NameContainer, UserContainer } from './styled';
+const User = ({
+  id,
+  name,
+  fieldName,
+  selected,
+  error
+}) => {
+  const [user] = useHydratedUser({
+    id,
+    fieldName
+  });
+  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 const user = {
+  component: User,
+  attrs: {
+    id: {},
+    name: {},
+    fieldName: {}
+  }
+};

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

@@ -0,0 +1,77 @@
+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 const UserContainer = styled.span`
+  display: inline-flex;
+  align-items: center;
+  height: ${"var(--ds-space-200, 16px)"};
+  padding: 1px;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+
+  ${({
+  selected,
+  error
+}) => {
+  if (selected) {
+    if (error) {
+      return css`
+          color: ${`var(--ds-text-inverse, ${N0})`};
+          background-color: ${`var(--ds-background-danger-bold, ${R400})`};
+          text-decoration: wavy underline;
+          text-decoration-thickness: 1px;
+          text-decoration-skip-ink: none;
+          text-decoration-color: ${`var(--ds-text-inverse, ${N0})`};
+        `;
+    } else {
+      return css`
+          color: ${`var(--ds-text, ${N0})`};
+          background-color: ${`var(--ds-background-selected, ${N500})`};
+          box-shadow: 0 0 0 1px ${"var(--ds-border-selected, transparent)"};
+        `;
+    }
+  } else {
+    if (error) {
+      return css`
+          color: ${`var(--ds-text-subtle, ${N500})`};
+          background-color: ${`var(--ds-background-neutral, ${N40})`};
+          text-decoration: wavy underline;
+          text-decoration-thickness: 1px;
+          text-decoration-skip-ink: none;
+          text-decoration-color: ${`var(--ds-text-danger, ${R400})`};
+
+          &:hover {
+            background-color: ${`var(--ds-background-neutral-hovered, ${N50})`};
+          }
+        `;
+    } else {
+      return css`
+          color: ${`var(--ds-text-subtle, ${N500})`};
+          background-color: ${`var(--ds-background-neutral, ${N40})`};
+
+          &:hover {
+            background-color: ${`var(--ds-background-neutral-hovered, ${N50})`};
+          }
+        `;
+    }
+  }
+}}
+`;
+export const NameContainer = styled.span`
+  margin-left: ${"var(--ds-space-075, 6px)"};
+  margin-right: ${"var(--ds-space-100, 8px)"};
+`;
+
+/* Override Avatar styles to match design spec */
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+export const AvatarWrapper = styled.span`
+  > div {
+    top: 3px;
+
+    > span {
+      margin: 0;
+    }
+  }
+`;

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

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

package/dist/es2019/plugins/rich-inline-nodes/util/create-node-spec.js

@@ -0,0 +1,26 @@
+import mapKeys from 'lodash/mapKeys';
+import mapValues from 'lodash/mapValues';
+import { RICH_INLINE_NODE } from '../constants';
+export const createNodeSpec = (name, attrs) => {
+  return {
+    group: RICH_INLINE_NODE,
+    content: 'text*',
+    inline: true,
+    atom: true,
+    // treat node as a leaf
+    attrs,
+    toDOM: node => {
+      const domAttrs = mapKeys(node.attrs, (_, attr) => `data-${attr}`);
+      return [name, domAttrs, 0];
+    },
+    parseDOM: [{
+      tag: name,
+      getAttrs: node => {
+        if (node instanceof Element) {
+          return mapValues(attrs, (_, attr) => node.getAttribute(`data-${attr}`));
+        }
+        return null; // should never™ happen
+      }
+    }]
+  };
+};

package/dist/es2019/plugins/rich-inline-nodes/util/react-node-view.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { Subject } from 'rxjs/Subject';
+import { v4 as uuid } from 'uuid';
+import { useEditorViewHasFocus } from '../../../state';
+import { ERROR_NODE, SELECTED_NODE } from '../constants';
+export class ReactNodeView {
+  constructor(component, portalActions, _node) {
+    _defineProperty(this, "componentSubject", new Subject());
+    _defineProperty(this, "init", decorations => {
+      const Component = this.component;
+      const PortallingComponent = () => {
+        const [state, setState] = useState({
+          ...this.getProps(this.node),
+          selected: this.isSelected(decorations),
+          error: this.hasError(decorations)
+        });
+
+        // ProseMirror keeps decorations on blur (as those are derived from editor state and focus isn't part of it),
+        // but we don't want to show node views as selected when that happens. We could build a workaround for this in
+        // richInlineNodesPlugin, but this hook will make selection behave more consistently with other focus-related features.
+        const [hasFocus] = useEditorViewHasFocus();
+        useEffect(() => {
+          // Subscribe to the RxJS subject so concrete subclasses can emit events to re-render the node view component
+          const subscription = this.componentSubject.subscribe(props => {
+            setState(props);
+          });
+          return () => subscription.unsubscribe();
+        }, []);
+        useLayoutEffect(() => {
+          if (state.error) {
+            this.dom.dataset.tokenType = 'error';
+          } else {
+            delete this.dom.dataset.tokenType;
+          }
+        }, [state]);
+        return /*#__PURE__*/React.createElement(Component, _extends({}, state, {
+          selected: state.selected && hasFocus
+        }));
+      };
+
+      // Ok, this is a tricky one. As everything that requires collaboration between ProseMirror and React.
+      //
+      // If we run `onCreatePortal` synchronously, ProseMirror won't insert the node view container (`this.dom`)
+      // immediately into the DOM (as init function hasn't returned yet). This can trigger race conditions in other
+      // code paths where ProseMirror may try to get DOM position for this node view before it has been inserted
+      // (e.g. calculating new autocomplete position after insertion, or setting selection after the node).
+      //
+      // With `queueMicrotask` we can schedule this operation to be run after ProseMirror is done with the element
+      // insertion, but before control of the execution context is returned to the browser's event loop. This should
+      // prevent all conflicts with other pieces of asynchronous code and still render the portal as soon as it is
+      // practically possible, so we can avoid flicker in situations where node views are reconstructed by ProseMirror.
+      // @see https://github.com/ProseMirror/prosemirror/issues/872
+      queueMicrotask(() => {
+        this.portalActions.onCreatePortal(this.portalKey, /*#__PURE__*/React.createElement(PortallingComponent, null), this.dom);
+      });
+      return this;
+    });
+    _defineProperty(this, "destroy", () => {
+      this.portalActions.onDestroyPortal(this.portalKey);
+    });
+    _defineProperty(this, "update", (node, decorations) => {
+      // Update function may be called by ProseMirror with a node that has nothing to do with this node view ¯\_(ツ)_/¯
+      // @see https://prosemirror.net/docs/ref/#view.NodeView.update
+      if (node !== this.node) {
+        return false;
+      }
+      this.componentSubject.next({
+        ...this.getProps(node),
+        selected: this.isSelected(decorations),
+        error: this.hasError(decorations)
+      });
+      return true;
+    });
+    _defineProperty(this, "getProps", node => {
+      return {
+        ...node.attrs
+      };
+    });
+    _defineProperty(this, "isSelected", decorations => {
+      return decorations.some(decoration => decoration.spec.type === SELECTED_NODE);
+    });
+    _defineProperty(this, "hasError", decorations => {
+      return decorations.some(decoration => decoration.spec.type === ERROR_NODE);
+    });
+    this.component = component;
+    this.portalActions = portalActions;
+    this.node = _node;
+    // Generate unique portal identifier
+    // If you read this comment in the future and TypeScript has added support for Symbols as object keys, please do
+    // JQL Editor a favor and replace this library with the native JS functionality that TS was supposed to support.
+    this.portalKey = uuid();
+    // Creating span under the assumption that all node views will be inline elements in JQL Editor
+    this.dom = document.createElement('span');
+    this.dom.setAttribute('data-testid', 'jql-editor-node-view');
+  }
+  static for(component, portalActions, node, decorations) {
+    return new ReactNodeView(component, portalActions, node).init(decorations);
+  }
+}

package/dist/es2019/plugins/rich-inline-nodes/util/replace-nodes-transaction.js

@@ -0,0 +1,104 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { AbstractJastVisitor } from '@atlaskit/jql-ast';
+import { JQLEditorSchema } from '../../../schema';
+import getDocumentPosition from '../../common/get-document-position';
+import { getJastFromState } from '../../jql-ast';
+import { RICH_INLINE_NODE } from '../constants';
+export const replaceRichInlineNodes = (editorState, hydratedValues) => {
+  const ast = getJastFromState(editorState);
+  const transaction = editorState.tr;
+  // Do not allow users to revert this transaction with undo command so they can't land in an unhydrated state
+  transaction.setMeta('addToHistory', false);
+  Object.entries(hydratedValues).forEach(([fieldName, values]) => {
+    values.forEach(value => {
+      if (value.type === 'user') {
+        const astNodes = getValueNodes(ast, fieldName, value.id);
+        astNodes.forEach(astNode => {
+          if (astNode.position) {
+            const [from, to] = astNode.position;
+            const documentFrom = getDocumentPosition(transaction.doc, from);
+            if (!isRichInlineNode(transaction.doc, documentFrom)) {
+              const documentTo = getDocumentPosition(transaction.doc, to);
+              const node = getRichInlineNode(fieldName, value, astNode.text);
+              transaction.replaceWith(documentFrom, documentTo, node);
+            }
+          }
+        });
+      }
+    });
+  });
+  return transaction;
+};
+const getRichInlineNode = (fieldName, value, text) => {
+  switch (value.type) {
+    case 'user':
+      {
+        const textContent = JQLEditorSchema.text(text);
+        return JQLEditorSchema.nodes.user.create({
+          ...value,
+          fieldName
+        }, textContent);
+      }
+    default:
+      {
+        throw new Error(`Unsupported hydrated value type ${value.type}`);
+      }
+  }
+};
+const isRichInlineNode = (doc, position) => {
+  var _doc$resolve$nodeAfte;
+  return ((_doc$resolve$nodeAfte = doc.resolve(position).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type.spec.group) === RICH_INLINE_NODE;
+};
+const getValueNodes = (ast, field, value) => {
+  if (!ast.query) {
+    return [];
+  }
+  return ast.query.accept(new FindValuesVisitor(field, value));
+};
+class FindValuesVisitor extends AbstractJastVisitor {
+  constructor(field, value) {
+    super();
+    _defineProperty(this, "visitQuery", query => {
+      if (query.where === undefined) {
+        return [];
+      }
+      return query.where.accept(this);
+    });
+    _defineProperty(this, "visitCompoundClause", compoundClause => {
+      return compoundClause.clauses.reduce((operands, compoundClause) => {
+        return [...operands, ...compoundClause.accept(this)];
+      }, []);
+    });
+    _defineProperty(this, "visitTerminalClause", terminalClause => {
+      if (terminalClause.field.value !== this.field) {
+        return [];
+      }
+      if (terminalClause.operand === undefined) {
+        return [];
+      }
+      return terminalClause.operand.accept(this);
+    });
+    _defineProperty(this, "visitNotClause", notClause => {
+      return notClause.clause.accept(this);
+    });
+    _defineProperty(this, "visitValueOperand", valueOperand => {
+      if (valueOperand.value !== this.value) {
+        return [];
+      }
+      return [valueOperand];
+    });
+    _defineProperty(this, "visitListOperand", listOperand => {
+      return listOperand.values.reduce((values, operand) => {
+        return [...values, ...operand.accept(this)];
+      }, []);
+    });
+    this.field = field;
+    this.value = value;
+  }
+  aggregateResult(aggregate, nextResult) {
+    return [...aggregate, ...nextResult];
+  }
+  defaultResult() {
+    return [];
+  }
+}

package/dist/es2019/plugins/types.js

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

package/dist/es2019/plugins/validation-tooltip/constants.js

@@ -0,0 +1,5 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const JQLValidationTooltipPluginKey = new PluginKey('jql-validation-tooltip-plugin');
+export const TOOLTIP_CLASSNAME = 'jql-validation-tooltip';
+export const TOOLTIP_ENTER_CLASSNAME = 'jql-validation-tooltip-enter';
+export const TOOLTIP_EXIT_CLASSNAME = 'jql-validation-tooltip-exit';

package/dist/es2019/plugins/validation-tooltip/index.js

@@ -0,0 +1,52 @@
+import { Plugin } from '@atlaskit/editor-prosemirror/state';
+import { JQLValidationTooltipPluginKey } from './constants';
+import { ValidationTooltipPluginView } from './view';
+const validationTooltipPlugin = mainId => {
+  const plugin = new Plugin({
+    key: JQLValidationTooltipPluginKey,
+    view: () => new ValidationTooltipPluginView(mainId),
+    state: {
+      init() {
+        return false;
+      },
+      // @ts-ignore
+      apply(tr, value) {
+        if (tr.getMeta(plugin) !== undefined) {
+          return tr.getMeta(plugin);
+        } else {
+          return value;
+        }
+      }
+    },
+    props: {
+      handleDOMEvents: {
+        mouseover: ({
+          state,
+          dispatch
+        }, event) => {
+          const isHovered = plugin.getState(state);
+          if (event.target instanceof Element && event.target.closest('[data-token-type="error"]')) {
+            if (!isHovered) {
+              dispatch(state.tr.setMeta(plugin, true));
+            }
+          } else if (isHovered) {
+            dispatch(state.tr.setMeta(plugin, false));
+          }
+          return false;
+        },
+        mouseleave: ({
+          state,
+          dispatch
+        }) => {
+          const isHovered = plugin.getState(state);
+          if (isHovered) {
+            dispatch(state.tr.setMeta(plugin, false));
+          }
+          return false;
+        }
+      }
+    }
+  });
+  return plugin;
+};
+export default validationTooltipPlugin;

package/dist/es2019/plugins/validation-tooltip/view.js

@@ -0,0 +1,55 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../common/get-document-position';
+import { getJastFromState } from '../jql-ast';
+import { JQLValidationTooltipPluginKey, TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from './constants';
+export class ValidationTooltipPluginView {
+  constructor(mainId) {
+    var _document$getElementB;
+    _defineProperty(this, "showTooltip", (error, start, end) => {
+      var _this$tooltip$offsetP, _box$left, _box$top;
+      // Find a center position from the selection endpoints
+      const left = (start.left + end.left) / 2;
+
+      // The box in which the container is positioned, to use as base
+      const box = (_this$tooltip$offsetP = this.tooltip.offsetParent) === null || _this$tooltip$offsetP === void 0 ? void 0 : _this$tooltip$offsetP.getBoundingClientRect();
+      this.tooltip.style.left = `${left - ((_box$left = box === null || box === void 0 ? void 0 : box.left) !== null && _box$left !== void 0 ? _box$left : 0)}px`;
+      this.tooltip.style.top = `${start.top - ((_box$top = box === null || box === void 0 ? void 0 : box.top) !== null && _box$top !== void 0 ? _box$top : 0)}px`;
+      this.tooltip.textContent = error.message;
+      this.tooltip.classList.remove(TOOLTIP_EXIT_CLASSNAME);
+      this.tooltip.classList.add(TOOLTIP_ENTER_CLASSNAME);
+    });
+    _defineProperty(this, "hideTooltip", () => {
+      this.tooltip.classList.remove(TOOLTIP_ENTER_CLASSNAME);
+      this.tooltip.classList.add(TOOLTIP_EXIT_CLASSNAME);
+    });
+    this.tooltip = document.createElement('div');
+    this.tooltip.setAttribute('data-testid', 'jql-validation-tooltip');
+    this.tooltip.classList.add(TOOLTIP_CLASSNAME);
+    (_document$getElementB = document.getElementById(mainId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.appendChild(this.tooltip);
+  }
+  update(view, lastState) {
+    const state = view.state;
+    const isHovered = JQLValidationTooltipPluginKey.getState(state);
+    const lastIsHovered = JQLValidationTooltipPluginKey.getState(lastState);
+    const jast = getJastFromState(state);
+    const [error] = jast.errors;
+    if (isHovered === lastIsHovered) {
+      return;
+    }
+    if (isHovered) {
+      if (error instanceof JQLSyntaxError) {
+        const start = getDocumentPosition(state.doc, error.start);
+        const stop = getDocumentPosition(state.doc, error.stop);
+        const startCoords = view.coordsAtPos(start);
+        const stopCoords = view.coordsAtPos(stop);
+        this.showTooltip(error, startCoords, stopCoords);
+      }
+    } else {
+      this.hideTooltip();
+    }
+  }
+  destroy() {
+    this.tooltip.remove();
+  }
+}