@atlaskit/jql-editor 4.0.0

package/dist/es2019/schema/index.js

@@ -0,0 +1,117 @@
+import mapValues from 'lodash/mapValues';
+import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
+import { history, redo, undo } from '@atlaskit/editor-prosemirror/history';
+import { keydownHandler, keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { DOMParser, Schema } from '@atlaskit/editor-prosemirror/model';
+import { EditorState, Plugin } from '@atlaskit/editor-prosemirror/state';
+import { autocompletePlugin, jqlAstPlugin, jqlSyntaxHighlightingPlugin, richInlineNodesPlugin, validationTooltipPlugin } from '../plugins';
+import { RICH_INLINE_NODE } from '../plugins/rich-inline-nodes/constants';
+import { richInlineNodes } from '../plugins/rich-inline-nodes/nodes';
+import { createNodeSpec } from '../plugins/rich-inline-nodes/util/create-node-spec';
+import { getFragmentText } from '../utils/document-text';
+import { splitTextByNewLine } from '../utils/split-text-by-new-line';
+const createMarkWithStyle = tokenType => {
+  const mark = document.createElement('span');
+  mark.className = `mark-token-${tokenType}`;
+  mark.setAttribute('data-token-type', tokenType);
+  mark.setAttribute('spellcheck', 'false');
+  return mark;
+};
+export const JQLEditorSchema = new Schema({
+  nodes: {
+    doc: {
+      content: 'paragraph+'
+    },
+    paragraph: {
+      content: `(text|${RICH_INLINE_NODE})*`,
+      toDOM: () => ['p', {
+        spellcheck: 'false'
+      }, 0],
+      parseDOM: [{
+        tag: 'p'
+      }]
+    },
+    text: {},
+    ...mapValues(richInlineNodes, (spec, name) => createNodeSpec(name, spec.attrs))
+  },
+  marks: {
+    token: {
+      toDOM: ({
+        attrs
+      }) => createMarkWithStyle(attrs.tokenType),
+      attrs: {
+        tokenType: {}
+      }
+    },
+    cursor: {
+      toDOM: () => {
+        return document.createElement('span');
+      }
+    }
+  }
+});
+const domParser = DOMParser.fromSchema(JQLEditorSchema);
+
+/**
+ * Emulate the behaviour of the default https://prosemirror.net/docs/ref/#view.EditorProps.clipboardTextSerializer but
+ * preserves consecutive empty block nodes.
+ */
+export const clipboardTextSerializer = slice => {
+  return getFragmentText(slice.content, 0, slice.content.size);
+};
+
+/**
+ * Emulate the behaviour of the default https://prosemirror.net/docs/ref/#view.EditorProps.clipboardTextParser but
+ * preserves consecutive empty lines.
+ */
+export const clipboardTextParser = (text, $context) => {
+  const dom = document.createElement('div');
+  // Split each line of text and wrap each in a p tag.
+  splitTextByNewLine(text).forEach(block => {
+    dom.appendChild(document.createElement('p')).textContent = block;
+  });
+  return domParser.parseSlice(dom, {
+    context: $context,
+    preserveWhitespace: true
+  });
+};
+export const defaultEditorState = EditorState.create({
+  schema: JQLEditorSchema
+});
+
+// @types/prosemirror-commands@1.0.1 does not export Command and Keymap types
+// TODO: update to Command<JQLEditorSchemaType> and Keymap<JQLEditorSchemaType> if types are bumped to a newer version
+export const configurePlugins = (editorState, onSearchCommand, intlRef, mainId, portalActions, enableRichInlineNodes) => {
+  return editorState.reconfigure({
+    plugins: [history(),
+    // Other plugins rely on having AST as part of the state during a transaction, this plugin should be kept first
+    jqlAstPlugin(intlRef), jqlSyntaxHighlightingPlugin(), ...(portalActions !== undefined ? [autocompletePlugin(portalActions, enableRichInlineNodes), ...(enableRichInlineNodes ? [richInlineNodesPlugin(portalActions)] : [])] : []), validationTooltipPlugin(mainId),
+    // Keeping these at the bottom allows plugins to define custom key bindings to override default behavior
+    keymap({
+      'Mod-z': undo,
+      'Mod-Shift-z': redo,
+      'Mod-y': redo,
+      // Mimic default Enter behavior in PM's base keymap, allowing to insert new lines even when autocomplete is open
+      'Shift-Enter': baseKeymap.Enter
+    }), ...(!onSearchCommand ? [] : [keymapNoRepeat({
+      'Mod-Enter': onSearchCommand,
+      Enter: onSearchCommand
+    })]), keymap(baseKeymap)]
+  });
+};
+const noopCommand = () => true;
+function keymapNoRepeat(bindings) {
+  const handler = keydownHandler(bindings);
+  const proxyBindings = mapValues(bindings, () => noopCommand);
+  const proxyHandler = keydownHandler(proxyBindings);
+  return new Plugin({
+    props: {
+      handleKeyDown: (view, event) => {
+        if (event.repeat) {
+          return proxyHandler(view, event);
+        }
+        return handler(view, event);
+      }
+    }
+  });
+}

package/dist/es2019/state/analytics/index.js

@@ -0,0 +1,49 @@
+import { Subscription } from 'rxjs/Subscription';
+import { ActionSubject, Action as AnalyticsAction, EventType } from '../../analytics';
+export const ANALYTICS_DEBOUNCE_MS = 2000;
+const AUTOCOMPLETE_ANALYTICS_MEASURE = 'jql-editor-autocomplete';
+export const onStartAutocompleteEvent = () => (_, {
+  createAndFireAnalyticsEvent
+}) => {
+  performance.clearMeasures(AUTOCOMPLETE_ANALYTICS_MEASURE);
+  performance.clearMarks(`${AUTOCOMPLETE_ANALYTICS_MEASURE}::start`);
+  performance.mark(`${AUTOCOMPLETE_ANALYTICS_MEASURE}::start`);
+  let timeoutId = null;
+  const promise = new Promise(resolve => {
+    // Resolve the promise after a fixed debounce period
+    timeoutId = window.setTimeout(() => {
+      resolve();
+    }, ANALYTICS_DEBOUNCE_MS);
+  });
+
+  // Create a new subscription which will cancel the analytics promise when unsubscribed
+  const analyticsSubscription = new Subscription(() => {
+    timeoutId !== null && window.clearTimeout(timeoutId);
+  });
+  const onStopAutocompleteEvent = (isSuccess, optionTypes, hasOptions) => {
+    performance.measure(AUTOCOMPLETE_ANALYTICS_MEASURE, `${AUTOCOMPLETE_ANALYTICS_MEASURE}::start`);
+    const entry = performance.getEntriesByName(AUTOCOMPLETE_ANALYTICS_MEASURE).pop();
+    const duration = entry === null || entry === void 0 ? void 0 : entry.duration;
+
+    // Fire our analytics event once our autocomplete data is fetched AND our debounced promise is resolved
+    return promise.then(() => {
+      const attributes = {
+        optionTypes: optionTypes.sort(),
+        hasOptions
+      };
+      if (duration !== undefined) {
+        attributes.duration = duration;
+      }
+      createAndFireAnalyticsEvent({
+        action: isSuccess ? AnalyticsAction.RETRIEVED : AnalyticsAction.RETRIEVE_FAILED,
+        actionSubject: ActionSubject.AUTOCOMPLETE_OPTION,
+        eventType: EventType.OPERATIONAL,
+        attributes
+      });
+    });
+  };
+  return {
+    analyticsSubscription,
+    onStopAutocompleteEvent
+  };
+};

package/dist/es2019/state/autocomplete/index.js

@@ -0,0 +1,15 @@
+import { map } from 'rxjs/operators/map';
+import { OPERATOR_CHANGED, OPERATOR_EQUALS, OPERATOR_GT, OPERATOR_GT_EQUALS, OPERATOR_IN, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_LIKE, OPERATOR_LT, OPERATOR_LT_EQUALS, OPERATOR_NOT_EQUALS, OPERATOR_NOT_IN, OPERATOR_NOT_LIKE, OPERATOR_WAS, OPERATOR_WAS_IN, OPERATOR_WAS_NOT, OPERATOR_WAS_NOT_IN } from '@atlaskit/jql-ast';
+// Opinionated order in which we want to render operators
+export const ORDERED_OPERATORS = [OPERATOR_EQUALS, OPERATOR_NOT_EQUALS, OPERATOR_LIKE, OPERATOR_NOT_LIKE, OPERATOR_LT_EQUALS, OPERATOR_GT_EQUALS, OPERATOR_GT, OPERATOR_LT, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IN, OPERATOR_NOT_IN, OPERATOR_WAS, OPERATOR_WAS_NOT, OPERATOR_WAS_IN, OPERATOR_WAS_NOT_IN, OPERATOR_CHANGED];
+export const sortOperators = operators$ => {
+  return operators$.pipe(map(options => {
+    return ORDERED_OPERATORS.reduce((result, orderedOperator) => {
+      const matchingOption = options.find(option => orderedOperator.toLowerCase() === option.value.toLowerCase());
+      if (matchingOption !== undefined) {
+        result.push(matchingOption);
+      }
+      return result;
+    }, []);
+  }));
+};

package/dist/es2019/state/hydration/index.js

@@ -0,0 +1,63 @@
+import { getJastFromState } from '../../plugins/jql-ast';
+import { replaceRichInlineNodes } from '../../plugins/rich-inline-nodes/util/replace-nodes-transaction';
+import { actions } from '../index';
+import { ValidQueryVisitor } from './util';
+export const hydrateQuery = () => async ({
+  setState,
+  getState,
+  dispatch
+}, {
+  onHydrate
+}) => {
+  const {
+    query,
+    hydratedValues: oldHydratedValues,
+    enableRichInlineNodes,
+    editorState
+  } = getState();
+  if (!enableRichInlineNodes || !onHydrate || !query) {
+    return;
+  }
+  let queryToHydrate = query;
+  const jast = getJastFromState(editorState);
+
+  // Hydration API will fail for syntactically invalid queries, including partial queries. We do want to hydrate those
+  // as well to be able to handle queries like `assignee in (abc-123-def`, so we build an equivalent valid query.
+  if (jast.query && jast.errors.length) {
+    const visitor = new ValidQueryVisitor();
+    queryToHydrate = jast.query.accept(visitor);
+  }
+  if (!queryToHydrate) {
+    return;
+  }
+  try {
+    const newHydratedValues = await onHydrate(queryToHydrate);
+    const hydratedValuesMap = Object.entries(newHydratedValues).reduce((map, [fieldName, values]) => {
+      const valueMap = new Map(oldHydratedValues[fieldName]);
+      values.forEach(value => {
+        valueMap.set(value.id, value);
+      });
+      return {
+        ...map,
+        [fieldName]: valueMap
+      };
+    }, {});
+    setState({
+      hydratedValues: hydratedValuesMap
+    });
+    dispatch(replaceHydratedValuesWithRichInlineNodes());
+  } catch (error) {
+    // Hydration failed, do nothing
+  }
+};
+const replaceHydratedValuesWithRichInlineNodes = () => ({
+  getState,
+  dispatch
+}) => {
+  const {
+    editorState,
+    hydratedValues
+  } = getState();
+  const transaction = replaceRichInlineNodes(editorState, hydratedValues);
+  dispatch(actions.onApplyEditorTransaction(transaction));
+};

package/dist/es2019/state/hydration/util.js

@@ -0,0 +1,57 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { AbstractJastVisitor } from '@atlaskit/jql-ast';
+
+/**
+ * Given an AST with parse errors, this visitor returns a valid query that is equivalent for hydration purposes
+ * (i.e. just fields, operators and values). Resulting query is generated on a best-effort basis and depends on
+ * a successful parser error recovery.
+ *
+ * Example 1:
+ * - Original query: "assignee in (abc-123-def"
+ * - Equivalent query: "assignee in (abc-123-def)"
+ *
+ * Example 2:
+ * - Original query: "project = EM and status in (Done, currentUser(), EMPTY) and reporter in"
+ * - Equivalent query: "project = EM and status in (Done)"
+ */
+export class ValidQueryVisitor extends AbstractJastVisitor {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "visitQuery", query => {
+      if (!query.where) {
+        return '';
+      }
+      return query.where.accept(this);
+    });
+    _defineProperty(this, "visitCompoundClause", compoundClause => {
+      return compoundClause.clauses.map(clause => clause.accept(this)).filter(value => !!value).join(' and ');
+    });
+    _defineProperty(this, "visitTerminalClause", terminalClause => {
+      const {
+        field,
+        operator,
+        operand
+      } = terminalClause;
+      if (!operator || !operand) {
+        return '';
+      }
+      const operandValue = operand.accept(this);
+      if (!operandValue) {
+        return '';
+      }
+      return `${field.text} ${operator.value} ${operandValue}`;
+    });
+    _defineProperty(this, "visitNotClause", notClause => {
+      return notClause.clause.accept(this);
+    });
+    _defineProperty(this, "visitValueOperand", valueOperand => {
+      return valueOperand.text;
+    });
+    _defineProperty(this, "visitListOperand", listOperand => {
+      return `(${listOperand.values.map(value => value.accept(this)).filter(value => !!value).join(', ')})`;
+    });
+  }
+  defaultResult() {
+    return '';
+  }
+}