@atlaskit/jql-editor 4.0.0

package/dist/es2019/ui/jql-editor-footer-content/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { di } from 'react-magnetic-di';
+import { useEditorViewHasInfos } from '../../hooks/use-editor-view-has-infos';
+import { useEditorViewHasWarnings } from '../../hooks/use-editor-view-has-warnings';
+import { useEditorViewIsInvalid } from '../../hooks/use-editor-view-is-invalid';
+import { JQLEditorHelp } from './jql-editor-help';
+import { ErrorMessages, InfoMessages, WarningMessages } from './jql-messages';
+
+/**
+ * Message components are rendered by priority.
+ * Message component decides on its own what exactly to render (GQL vs external messages).
+ */
+
+export const JQLEditorFooterContent = () => {
+  const editorViewIsInvalid = useEditorViewIsInvalid();
+  const editorViewHasWarnings = useEditorViewHasWarnings();
+  const editorViewHasInfos = useEditorViewHasInfos();
+  if (editorViewIsInvalid) {
+    return /*#__PURE__*/React.createElement(ErrorMessages, null);
+  }
+  if (editorViewHasWarnings) {
+    return /*#__PURE__*/React.createElement(WarningMessages, null);
+  }
+  if (editorViewHasInfos) {
+    return /*#__PURE__*/React.createElement(InfoMessages, null);
+  }
+  return /*#__PURE__*/React.createElement(JQLEditorHelp, null);
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-editor-help/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { HelperMessage } from '@atlaskit/form';
+import { JQL_EDITOR_HELP_CONTENT_ID } from '../../../common/constants';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+import { useEditorViewHasFocus, useIntl, useScopedId } from '../../../state';
+import { messages } from './messages';
+import { HelpContainer } from './styled';
+export const JQLEditorHelp = () => {
+  const [{
+    formatMessage
+  }] = useIntl();
+  const [editorViewHasFocus] = useEditorViewHasFocus();
+  const {
+    isSearch
+  } = useEditorThemeContext();
+  const [helpContentId] = useScopedId(JQL_EDITOR_HELP_CONTENT_ID);
+  const SearchMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(messages.searchCommand, {
+    b: text => /*#__PURE__*/React.createElement("b", null, text)
+  }));
+  const NewLineMessage = /*#__PURE__*/React.createElement("span", null, formatMessage(isSearch ? messages.newLineCommand : messages.fieldNewLineCommand, {
+    b: text => /*#__PURE__*/React.createElement("b", null, text)
+  }));
+  return /*#__PURE__*/React.createElement(HelpContainer, {
+    id: helpContentId,
+    isVisible: editorViewHasFocus
+  }, isSearch && /*#__PURE__*/React.createElement(HelperMessage, null, SearchMessage), /*#__PURE__*/React.createElement(HelperMessage, null, NewLineMessage));
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-editor-help/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  searchCommand: {
+    id: 'jql-editor.ui.jql-editor-help.search-command',
+    defaultMessage: '<b>Enter</b> to search',
+    description: `Message to inform users to press the 'Enter' key on the keyboard to search a query.`
+  },
+  newLineCommand: {
+    id: 'jql-editor.ui.jql-editor-help.new-line-command',
+    defaultMessage: '<b>Shift+Enter</b> to add a new line',
+    description: `In search mode, message to inform users to press the 'Shift' and 'Enter' keys on the keyboard to add a new line into the query.`
+  },
+  fieldNewLineCommand: {
+    id: 'jql-editor.ui.jql-editor-help.field-new-line-command',
+    defaultMessage: '<b>Enter</b> to add a new line',
+    description: `In field mode, message to inform users to press the 'Enter' key on the keyboard to add a new line into the query.`
+  }
+});

package/dist/es2019/ui/jql-editor-footer-content/jql-editor-help/styled.js

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { hiddenMixin } from '../../../common/styled';
+export const HelpContainer = styled.div`
+  display: flex;
+  margin-left: auto;
+  margin-right: 0;
+  flex-shrink: 0;
+  padding: 0 ${"var(--ds-space-100, 8px)"};
+
+  > * + * {
+    margin-left: ${"var(--ds-space-200, 16px)"};
+  }
+
+  ${props => props.isVisible ? css`
+          visibility: visible;
+          opacity: 1;
+          transition: opacity 250ms cubic-bezier(0.15, 1, 0.3, 1);
+        ` : css`
+          ${hiddenMixin};
+          opacity: 0;
+        `}
+`;

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+import { di } from 'react-magnetic-di';
+import { ErrorMessage } from '@atlaskit/form';
+import { JQLSyntaxError } from '@atlaskit/jql-ast';
+import { JQL_EDITOR_INPUT_ID } from '../../../../common/constants';
+import { commonMessages } from '../../../../common/messages';
+import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
+import { useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+import { messages } from './messages';
+const useFormattedErrorMessage = () => {
+  const [{
+    formatMessage
+  }] = useIntl();
+  const [jqlError] = useJqlError();
+  const [{
+    errors: externalErrors
+  }] = useExternalMessages();
+  const [, {
+    externalErrorMessageViewed
+  }] = useStoreActions();
+  const editorViewIsInvalid = useEditorViewIsInvalid();
+  useEffect(() => {
+    // Emit a UI event whenever external errors has changed
+    externalErrorMessageViewed();
+  }, [externalErrorMessageViewed, externalErrors]);
+  if (!editorViewIsInvalid) {
+    return null;
+  }
+
+  // Prioritise client over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return `${jqlError.message} ${formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })}`;
+  } else if (externalErrors.length > 0) {
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: externalErrors
+    });
+  } else if (jqlError !== null) {
+    return formatMessage(commonMessages.unknownError);
+  }
+  return null;
+};
+export const ErrorMessages = () => {
+  const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
+  const errorMessage = useFormattedErrorMessage();
+  return errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+    testId: "jql-editor-validation"
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "alert",
+    "aria-describedby": editorId
+  }, errorMessage))) : null;
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/errors/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  jqlErrorPosition: {
+    id: 'jql-editor.ui.jql-validation-message.jql-error-position',
+    defaultMessage: '(line {lineNumber}, character {charPosition})',
+    description: 'Show the line and character position that an error occurs in the JQL string, e.g. (line 1, character 23)'
+  }
+});

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/format/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
+import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
+
+// Max number messages we want to show
+const MAX_MESSAGES = 10;
+export const MessageContainer = ({
+  children
+}) => {
+  const {
+    isSearch
+  } = useEditorThemeContext();
+  return /*#__PURE__*/React.createElement(MessageContainerStyled, {
+    isSearch: isSearch
+  }, children);
+};
+export const FormatMessages = ({
+  messages
+}) => {
+  if (messages.length === 0) {
+    return null;
+  }
+  if (messages.length === 1) {
+    return /*#__PURE__*/React.createElement("span", null, messages[0].message);
+  }
+  return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map((m, i) => /*#__PURE__*/React.createElement("li", {
+    key: i
+  }, m.message)));
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/format/styled.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+export const MessageContainer = styled.div`
+  padding-left: ${props => props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
+`;
+export const MessageList = styled.ul`
+  margin: 0;
+  padding-left: ${"var(--ds-space-300, 24px)"};
+`;

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/index.js

@@ -0,0 +1,3 @@
+export { ErrorMessages } from './errors';
+export { InfoMessages } from './infos';
+export { WarningMessages } from './warnings';

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { di } from 'react-magnetic-di';
+import { HelperMessage } from '@atlaskit/form';
+import InfoIcon from '@atlaskit/icon/glyph/info';
+import * as colors from '@atlaskit/theme/colors';
+import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
+import { useExternalMessages } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+export const useFormattedInfoMessage = () => {
+  const [{
+    infos: externalInfos
+  }] = useExternalMessages();
+  const hasInfos = useEditorViewHasInfos();
+  if (!hasInfos) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormatMessages, {
+    messages: externalInfos
+  });
+};
+export const InfoMessages = () => {
+  const infoMessage = useFormattedInfoMessage();
+  return infoMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "jql-editor-info-message"
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    label: "",
+    primaryColor: `var(--ds-icon-information, ${colors.B500})`,
+    size: "small"
+  }), infoMessage)) : null;
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { di } from 'react-magnetic-di';
+import { HelperMessage } from '@atlaskit/form';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import * as colors from '@atlaskit/theme/colors';
+import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
+import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';
+import { FormatMessages, MessageContainer } from '../format';
+import { messages } from './messages';
+const softDeprecateEpicParentDocsLink = 'https://support.atlassian.com/jira-software-cloud/docs/upcoming-changes-epic-link-replaced-with-parent/';
+const getEpicLinkDeprecationTerm = hydratedDeprecations => {
+  const epicLinkWarning = hydratedDeprecations.filter(warning => warning.deprecatedSearcherKey === 'com.pyxis.greenhopper.jira:gh-epic-link-searcher');
+  return epicLinkWarning.length > 0 ? epicLinkWarning[0].id : null;
+};
+const getParentLinkDeprecationTerm = hydratedDeprecations => {
+  const parentLinkWarning = hydratedDeprecations.filter(warning => warning.deprecatedSearcherKey === 'com.atlassian.jpo:jpo-custom-field-parent-searcher');
+  return parentLinkWarning.length > 0 ? parentLinkWarning[0].id : null;
+};
+export const useFormattedWarningMessage = () => {
+  const [hydratedDeprecations] = useHydratedDeprecations();
+  const [{
+    warnings: externalWarnings
+  }] = useExternalMessages();
+  const hasWarnings = useEditorViewHasWarnings();
+  const [{
+    formatMessage
+  }] = useIntl();
+  const epicLinkDeprecationTerm = getEpicLinkDeprecationTerm(hydratedDeprecations);
+  const parentLinkDeprecationTerm = getParentLinkDeprecationTerm(hydratedDeprecations);
+  const formatWarnings = useCallback(message => {
+    const combinedMessages = [{
+      type: 'warning',
+      message
+    }, ...externalWarnings];
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: combinedMessages
+    });
+  }, [externalWarnings]);
+  if (!hasWarnings) {
+    return null;
+  } else if (!hydratedDeprecations.length && externalWarnings.length) {
+    return /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: externalWarnings
+    });
+  } else if (epicLinkDeprecationTerm == null && parentLinkDeprecationTerm == null) {
+    var _hydratedDeprecations;
+    return formatWarnings(formatMessage(messages.defaultWarning, {
+      deprecatedField: (_hydratedDeprecations = hydratedDeprecations[0]) === null || _hydratedDeprecations === void 0 ? void 0 : _hydratedDeprecations.id
+    }));
+  } else if (epicLinkDeprecationTerm && parentLinkDeprecationTerm) {
+    return formatWarnings(formatMessage(messages.deprecatedBothParentReplacementMessage, {
+      link: chunks => /*#__PURE__*/React.createElement("a", {
+        href: softDeprecateEpicParentDocsLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: e => e.stopPropagation()
+      }, chunks),
+      receivedFirst: epicLinkDeprecationTerm,
+      receivedSecond: parentLinkDeprecationTerm,
+      parentReplacement: 'Parent'
+    }));
+  } else if (epicLinkDeprecationTerm || parentLinkDeprecationTerm) {
+    return formatWarnings(formatMessage(messages.deprecatedParentReplacementMessage, {
+      link: chunks => /*#__PURE__*/React.createElement("a", {
+        href: softDeprecateEpicParentDocsLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: e => e.stopPropagation()
+      }, chunks),
+      deprecatedField: epicLinkDeprecationTerm ? epicLinkDeprecationTerm : parentLinkDeprecationTerm,
+      parentReplacement: 'Parent'
+    }));
+  }
+};
+export const WarningMessages = () => {
+  const warningMessage = useFormattedWarningMessage();
+  return warningMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "jql-editor-warning-message"
+  }, /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "",
+    primaryColor: `var(--ds-icon-warning, ${colors.Y400})`,
+    size: "small"
+  }), warningMessage)) : null;
+};

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/warnings/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  deprecatedParentReplacementMessage: {
+    id: 'jql-editor.ui.jql-warning-message.deprecated-epic-link-or-parent-link-field',
+    defaultMessage: '{deprecatedField} will soon be replaced with {parentReplacement}. <link>Update to {parentReplacement}</link> to prepare for these changes.',
+    description: 'Warning message for Epic Link and Parent Link deprecation, with link to docs'
+  },
+  deprecatedBothParentReplacementMessage: {
+    id: 'jql-editor.ui.jql-warning-message.deprecated-both-epic-link-parent-link-field',
+    defaultMessage: '{receivedFirst} and {receivedSecond} will soon be replaced with {parentReplacement}. <link>Update to {parentReplacement}</link> to prepare for these changes.',
+    description: 'Warning message for both Epic Link and Parent Link deprecation, with link to docs'
+  },
+  defaultWarning: {
+    id: 'jql-editor.ui.jql-warning-message.default',
+    defaultMessage: '{deprecatedField} has been deprecated and may stop working in the future.',
+    description: 'Default warning message to show on NIN'
+  }
+});

package/dist/es2019/ui/jql-editor-layout/index.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
+import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { ReadOnlyControlsContent } from '../jql-editor-controls-content/read-only-controls-content';
+import { EditorControls, EditorFooter, EditorMain, EditorView, EditorViewContainer, LineNumberToolbar, ReadOnlyEditorView, ReadOnlyEditorViewContainer } from './styled';
+const JQLEditorLayout = props => {
+  const {
+    defaultMaxRows,
+    expandedRows,
+    isSearch,
+    isCompact
+  } = useEditorThemeContext();
+  const {
+    editorViewHasFocus,
+    EditorControlsContent,
+    EditorFooterContent,
+    editorViewIsInvalid,
+    lineNumbersVisible,
+    mainId,
+    onEditorMainRef,
+    onEditorViewContainerRef,
+    onEditorViewContainerScroll,
+    onEditorViewRef,
+    onEditorViewBlur,
+    onEditorViewFocus,
+    onEditorViewTransitionEnd
+  } = props;
+  return /*#__PURE__*/React.createElement(EditorMain, {
+    id: mainId,
+    ref: onEditorMainRef
+  }, /*#__PURE__*/React.createElement(EditorViewContainer, {
+    editorViewHasFocus: editorViewHasFocus,
+    editorViewIsInvalid: editorViewIsInvalid,
+    ref: onEditorViewContainerRef,
+    onScroll: onEditorViewContainerScroll
+  }, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/React.createElement(EditorView, {
+    defaultMaxRows: defaultMaxRows,
+    expandedRows: expandedRows,
+    isCompact: isCompact,
+    lineNumbersVisible: lineNumbersVisible,
+    ref: onEditorViewRef,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus,
+    onTransitionEnd: onEditorViewTransitionEnd
+  }), /*#__PURE__*/React.createElement(EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
+};
+/**
+ * A read only version of the JQL Editor which mimics the layout of the complete component, suitable as an intermediary
+ * state when rendering the editor asynchronously.
+ * In order to minimise bundle size impact on consumers, it is critical that this component (and any child component)
+ * only imports the bare minimum dependencies required to replicate the editor layout.
+ */
+const JQLEditorReadOnlyWithoutTheme = ({
+  query
+}) => {
+  const {
+    defaultMaxRows,
+    expandedRows,
+    isSearch,
+    isCompact
+  } = useEditorThemeContext();
+  const blocks = splitTextByNewLine(query);
+  const lineNumbersVisible = blocks.length > 1;
+  return /*#__PURE__*/React.createElement(EditorMain, null, /*#__PURE__*/React.createElement(ReadOnlyEditorViewContainer, null, /*#__PURE__*/React.createElement(LineNumberToolbar, {
+    lineNumbersVisible: lineNumbersVisible
+  }), /*#__PURE__*/React.createElement(ReadOnlyEditorView, {
+    "data-testid": "jql-editor-read-only",
+    role: "combobox",
+    "aria-readonly": true,
+    defaultMaxRows: defaultMaxRows,
+    expandedRows: expandedRows,
+    lineNumbersVisible: lineNumbersVisible,
+    isCompact: isCompact
+  }, blocks.map((block, index) => /*#__PURE__*/React.createElement("p", {
+    key: index
+  }, block))), /*#__PURE__*/React.createElement(EditorControls, {
+    isSearch: isSearch,
+    isCompact: isCompact
+  }, /*#__PURE__*/React.createElement(ReadOnlyControlsContent, null))), /*#__PURE__*/React.createElement(EditorFooter, null));
+};
+export const JQLEditorReadOnly = ({
+  isSearch,
+  isCompact,
+  ...props
+}) => {
+  const editorTheme = useEditorTheme({
+    isSearch,
+    isCompact
+  });
+  return /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
+    value: editorTheme
+  }, /*#__PURE__*/React.createElement(JQLEditorReadOnlyWithoutTheme, props));
+};
+export default JQLEditorLayout;

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -0,0 +1,223 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
+import { codeFontFamily, fontFamily, fontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize, layers } from '@atlaskit/theme/constants';
+import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+export const EditorMain = styled.div`
+  /* CSS reset */
+  font-family: ${fontFamily};
+  font-size: ${fontSize}px;
+  flex-grow: 1;
+
+  /* These styles and animations are derived from @atlaskit/tooltip */
+
+  .${TOOLTIP_CLASSNAME} {
+    background-color: ${`var(--ds-background-neutral-bold, ${N800})`};
+    color: ${`var(--ds-text-inverse, ${N0})`};
+    border-radius: ${"var(--ds-border-radius-100, 3px)"};
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 1.3;
+    max-width: 240px;
+    padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    z-index: ${layers.tooltip()};
+    pointer-events: none;
+    position: absolute;
+    visibility: hidden;
+
+    /* Horizontally center and vertically position above the target element */
+    transform: translate(-50%, calc(-100% - ${"var(--ds-space-200, 16px)"}));
+
+    &.${TOOLTIP_ENTER_CLASSNAME} {
+      animation: ${fadeIn} 350ms cubic-bezier(0.15, 1, 0.3, 1);
+      visibility: visible;
+    }
+
+    &.${TOOLTIP_EXIT_CLASSNAME} {
+      animation: ${fadeOut} 350ms cubic-bezier(0.15, 1, 0.3, 1);
+    }
+  }
+`;
+export const EditorFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  /* We always have at least 1 row of space allocated to the footer */
+  min-height: 20px;
+`;
+
+// Height (in px) for a single row in the editor
+const rowHeight = gridSize() * 2.75;
+// Vertical padding for the editor input
+const getEditorInputVerticalPadding = isCompact => isCompact ? 3 : 7;
+const editorInputHorizontalPadding = 6;
+export const EditorViewContainer = styled.div`
+  background-color: ${`var(--ds-background-input, ${N10})`};
+  border-style: solid;
+  border-width: 2px;
+  border-color: ${`var(--ds-border, ${N40})`};
+  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  box-sizing: border-box;
+  color: ${`var(--ds-text, ${N900})`};
+  display: flex;
+  overflow: auto;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+  ${props => props.editorViewHasFocus ? css`
+          background-color: ${`var(--ds-surface, ${N0})`};
+          border-color: ${`var(--ds-border-focused, ${B100})`};
+        ` : css`
+          :hover {
+            background-color: ${`var(--ds-background-input-hovered, ${N30})`};
+          }
+        `}
+
+  ${props => props.editorViewIsInvalid && css`
+      border-color: ${`var(--ds-border-danger, ${R400})`};
+    `}
+`;
+export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)`
+  background-color: ${`var(--ds-background-disabled, ${N30})`};
+  color: ${`var(--ds-text-disabled, ${N100})`};
+  pointer-events: none;
+`;
+export const LineNumberToolbar = styled.div`
+  background-color: ${`var(--ds-background-neutral, ${N30})`};
+  flex-shrink: 0;
+  width: 30px;
+  position: sticky;
+  top: 0;
+
+  ${props => !props.lineNumbersVisible && css`
+      display: none;
+    `}
+`;
+
+/**
+ * The main div which the Prosemirror editor will be rendered into.
+ */
+export const EditorView = styled.div`
+  counter-reset: lineNumber;
+  flex-grow: 1;
+
+  transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),
+    max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);
+  max-height: ${props => rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
+
+  line-height: ${rowHeight / fontSize()};
+  font-family: ${codeFontFamily};
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+
+  &[data-expanded] {
+    height: ${props => rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
+    max-height: ${props => rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
+  }
+
+  .ProseMirror {
+    color: ${`var(--ds-text, ${N700})`};
+    padding: ${props => getEditorInputVerticalPadding(props.isCompact)}px
+      ${editorInputHorizontalPadding}px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .mark-token-keyword {
+      color: ${`var(--ds-text-accent-purple, ${P400})`};
+    }
+
+    .mark-token-field {
+      color: ${`var(--ds-text-accent-blue, ${B300})`};
+    }
+
+    .mark-token-operator {
+      color: ${`var(--ds-text-accent-green, ${G300})`};
+    }
+
+    .mark-token-error {
+      color: ${`var(--ds-text-danger, ${R400})`};
+      text-decoration: wavy underline;
+      text-decoration-thickness: 1px;
+      text-decoration-skip-ink: none;
+    }
+  }
+
+  p {
+    margin: 0;
+    counter-increment: lineNumber;
+    position: relative;
+
+    /* Show the current line number before each paragraph block. */
+
+    &::before {
+      content: counter(lineNumber);
+      color: ${`var(--ds-text-subtlest, ${N100})`};
+      font-size: 10px;
+      line-height: ${rowHeight / 10};
+      padding: 0 ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-025, 2px)"};
+      position: absolute;
+      box-sizing: border-box;
+      /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */
+      transform: translateX(calc(-100% - ${"var(--ds-space-100, 8px)"}));
+
+      /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width
+        recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */
+      max-width: 30px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      ${props => !props.lineNumbersVisible && css`
+          display: none;
+        `}
+    }
+  }
+`;
+export const ReadOnlyEditorView = styled(EditorView)`
+  /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need
+  recompute max height excluding the child padding. */
+  padding: ${props => getEditorInputVerticalPadding(props.isCompact)}px
+    ${editorInputHorizontalPadding}px;
+  max-height: ${props => rowHeight * props.defaultMaxRows}px;
+
+  > p {
+    /* Prevent collapsing empty paragraphs */
+    min-height: ${rowHeight}px;
+  }
+`;
+export const EditorControls = styled.div`
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  margin-left: auto;
+  margin-right: ${props => props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
+: editorInputHorizontalPadding - 3}px;
+  line-height: normal;
+  position: sticky;
+  top: 0;
+  height: ${props => rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px;
+`;

package/dist/es2019/ui/jql-editor-portal-provider/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import noop from 'lodash/noop';
+export const PortalActionsContext = /*#__PURE__*/createContext({
+  onCreatePortal: noop,
+  onDestroyPortal: noop,
+  onRegisterPluginContainer: noop
+});
+export const usePortalActionsContext = () => useContext(PortalActionsContext);