@atlaskit/jql-editor 4.0.0

package/dist/cjs/plugins/autocomplete/constants.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultAutocompleteProvider = exports.TAB_KEY = exports.JQLAutocompletePluginKey = exports.HOME_KEY = exports.ESCAPE_KEY = exports.ENTER_KEY = exports.END_KEY = exports.CMD_ARROW_UP_KEY = exports.CMD_ARROW_DOWN_KEY = exports.AUTOCOMPLETE_PLUGIN_NAME = exports.ARROW_UP_KEY = exports.ARROW_DOWN_KEY = void 0;
+var _empty = require("rxjs/observable/empty");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var AUTOCOMPLETE_PLUGIN_NAME = exports.AUTOCOMPLETE_PLUGIN_NAME = 'jql-autocomplete-plugin';
+var ARROW_UP_KEY = exports.ARROW_UP_KEY = 'ArrowUp';
+var ARROW_DOWN_KEY = exports.ARROW_DOWN_KEY = 'ArrowDown';
+var CMD_ARROW_UP_KEY = exports.CMD_ARROW_UP_KEY = 'Cmd-ArrowUp';
+var CMD_ARROW_DOWN_KEY = exports.CMD_ARROW_DOWN_KEY = 'Cmd-ArrowDown';
+var HOME_KEY = exports.HOME_KEY = 'Home'; // === Fn-Left in Mac
+var END_KEY = exports.END_KEY = 'End'; // === Fn-Right in Mac
+var ENTER_KEY = exports.ENTER_KEY = 'Enter';
+var ESCAPE_KEY = exports.ESCAPE_KEY = 'Escape';
+var TAB_KEY = exports.TAB_KEY = 'Tab';
+
+// No-op autocomplete provider used when creating the initial state
+var defaultAutocompleteProvider = exports.defaultAutocompleteProvider = {
+  onFields: function onFields() {
+    return (0, _empty.empty)();
+  },
+  onOperators: function onOperators() {
+    return (0, _empty.empty)();
+  },
+  onValues: function onValues() {
+    return (0, _empty.empty)();
+  },
+  onFunctions: function onFunctions() {
+    return (0, _empty.empty)();
+  }
+};
+var JQLAutocompletePluginKey = exports.JQLAutocompletePluginKey = new _state.PluginKey(AUTOCOMPLETE_PLUGIN_NAME);

package/dist/cjs/plugins/autocomplete/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _pluginKeymap = require("../common/plugin-keymap");
+var _constants = require("./constants");
+var _view = _interopRequireDefault(require("./view"));
+var getKeyHandler = function getKeyHandler(keymap, key) {
+  return function (state, dispatch, view) {
+    var binding = keymap.getKeyBinding(key);
+    return binding ? binding(state, dispatch, view) : false;
+  };
+};
+var autocompletePlugin = function autocompletePlugin(portalActions, enableRichInlineNodes) {
+  var _keydownHandler;
+  // Empty keymap passed down to the React component so it can register key bindings
+  var keymap = new _pluginKeymap.PluginKeymap();
+  return new _state.Plugin({
+    key: _constants.JQLAutocompletePluginKey,
+    view: function view(editorView) {
+      var view = new _view.default(editorView, keymap, portalActions, enableRichInlineNodes);
+      // Initialise view to mount the react component
+      view.init();
+      return view;
+    },
+    props: {
+      handleKeyDown: (0, _keymap.keydownHandler)((_keydownHandler = {}, (0, _defineProperty2.default)(_keydownHandler, _constants.ARROW_UP_KEY, getKeyHandler(keymap, _constants.ARROW_UP_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.ARROW_DOWN_KEY, getKeyHandler(keymap, _constants.ARROW_DOWN_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.CMD_ARROW_UP_KEY, getKeyHandler(keymap, _constants.CMD_ARROW_UP_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.CMD_ARROW_DOWN_KEY, getKeyHandler(keymap, _constants.CMD_ARROW_DOWN_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.HOME_KEY, getKeyHandler(keymap, _constants.HOME_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.END_KEY, getKeyHandler(keymap, _constants.END_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.ESCAPE_KEY, getKeyHandler(keymap, _constants.ESCAPE_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.ENTER_KEY, getKeyHandler(keymap, _constants.ENTER_KEY)), (0, _defineProperty2.default)(_keydownHandler, _constants.TAB_KEY, getKeyHandler(keymap, _constants.TAB_KEY)), _keydownHandler))
+    }
+  });
+};
+var _default = exports.default = autocompletePlugin;

package/dist/cjs/plugins/autocomplete/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  optionsFound: {
+    id: 'jql-editor.plugins.autocomplete.options-found',
+    defaultMessage: 'Choose from the suggested list of options below.',
+    description: 'This message is read by screen readers when autocomplete suggestions are available in the JQL editor.'
+  }
+});

package/dist/cjs/plugins/autocomplete/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/plugins/autocomplete/view.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _jqlAst = require("@atlaskit/jql-ast");
+var _getDocumentPosition = _interopRequireDefault(require("../common/get-document-position"));
+var _reactPluginView = _interopRequireDefault(require("../common/react-plugin-view"));
+var _autocomplete = _interopRequireDefault(require("./components/autocomplete"));
+var _constants = require("./constants");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+/**
+ * Returns whether an opening parenthesis should be automatically inserted for this option (e.g. after a list operator)
+ */
+var shouldInsertOpeningParenthesis = function shouldInsertOpeningParenthesis(_ref) {
+  var type = _ref.type,
+    context = _ref.context,
+    isListFunction = _ref.isListFunction;
+  if (type === 'value' || type === 'function' || type === 'keyword') {
+    var operator = context === null || context === void 0 ? void 0 : context.operator;
+    if (operator && (0, _jqlAst.isListOperator)(operator) && !(context !== null && context !== void 0 && context.isList) && !isListFunction) {
+      return true;
+    }
+  }
+  return false;
+};
+var AutocompletePluginView = exports.default = /*#__PURE__*/function (_ReactPluginView) {
+  (0, _inherits2.default)(AutocompletePluginView, _ReactPluginView);
+  var _super = _createSuper(AutocompletePluginView);
+  function AutocompletePluginView(view, keymap, portalActions, enableRichInlineNodes) {
+    var _this;
+    (0, _classCallCheck2.default)(this, AutocompletePluginView);
+    _this = _super.call(this, portalActions, _constants.AUTOCOMPLETE_PLUGIN_NAME, 'main');
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getComponent", function () {
+      return _autocomplete.default;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInitialComponentProps", function () {
+      return {
+        keymap: _this.keymap,
+        onClick: _this.onReplaceSuggestion
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onReplaceSuggestion", function (option) {
+      var _option$replacePositi = (0, _slicedToArray2.default)(option.replacePosition, 2),
+        from = _option$replacePositi[0],
+        to = _option$replacePositi[1];
+      var transaction = _this.view.state.tr;
+      transaction.setMeta(_constants.JQLAutocompletePluginKey, true);
+
+      // Request query hydration if we are inserting a user node
+      if (_this.enableRichInlineNodes && option.type === 'value' && option.valueType === 'user') {
+        transaction.setMeta('hydrate', true);
+      }
+      var documentFrom = (0, _getDocumentPosition.default)(transaction.doc, from);
+      var documentTo = (0, _getDocumentPosition.default)(transaction.doc, to);
+
+      // Change current selection to the mapped replace position
+      transaction.setSelection(_state.TextSelection.create(transaction.doc, documentTo, documentFrom));
+
+      // Replace selected range with the selected autocomplete option
+      transaction.replaceSelection(_this.getSliceForSuggestion(option));
+      _this.view.focus();
+      _this.view.dispatch(transaction);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSliceForSuggestion", function (option) {
+      var value = option.value,
+        name = option.name,
+        nameOnRichInlineNode = option.nameOnRichInlineNode,
+        valueType = option.valueType,
+        context = option.context;
+      var nodes = [];
+      if (shouldInsertOpeningParenthesis(option)) {
+        nodes.push(_this.view.state.schema.text('('));
+      }
+      var textContent = _this.view.state.schema.text(value);
+      if (!_this.enableRichInlineNodes) {
+        nodes.push(textContent);
+      } else {
+        switch (valueType) {
+          case 'user':
+            {
+              var attributes = {
+                type: 'user',
+                id: value,
+                name: nameOnRichInlineNode !== null && nameOnRichInlineNode !== void 0 ? nameOnRichInlineNode : name,
+                fieldName: context === null || context === void 0 ? void 0 : context.field
+              };
+              nodes.push(_this.view.state.schema.nodes.user.create(attributes, textContent));
+              break;
+            }
+          default:
+            {
+              nodes.push(textContent);
+              break;
+            }
+        }
+      }
+      return new _model.Slice(_model.Fragment.from(nodes), 0, 0);
+    });
+    _this.view = view;
+    _this.keymap = keymap;
+    _this.enableRichInlineNodes = enableRichInlineNodes;
+    return _this;
+  }
+  (0, _createClass2.default)(AutocompletePluginView, [{
+    key: "isSameState",
+    value: function isSameState(state, prevState) {
+      return prevState.doc.eq(state.doc) && prevState.selection.eq(state.selection);
+    }
+  }]);
+  return AutocompletePluginView;
+}(_reactPluginView.default);

package/dist/cjs/plugins/common/get-document-position/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _schema = require("../../../schema");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Accumulator object to represent the current PM document position + text position within a PM node.
+ */
+
+/**
+ * Recursively find the PM node which includes our text position. This method tracks the offset of PM nodes in order
+ * to compute the correct document position according to the rules identified here: https://prosemirror.net/docs/guide/#doc.indexing.
+ *
+ * If for some reason the text position can not be found in the node then the position at which the current node ends
+ * will be returned.
+ *
+ * @param node Node to search
+ * @param parentNodePos Current document and text position within the parent when entering the current node.
+ * @param textPosition Text position to find in the Prosemirror document.
+ */
+var enterNode = function enterNode(node, parentNodePos, textPosition) {
+  var nodePos = _objectSpread({}, parentNodePos);
+  var isDocNode = node.type === _schema.JQLEditorSchema.nodes.doc;
+
+  // Enter non-leaf node
+  if (!node.isLeaf && !isDocNode) {
+    nodePos.doc += 1;
+    if (node.isBlock) {
+      if (nodePos.enteredInitialBlock) {
+        // Every time we enter a block node (after the initial block),
+        // we need to increment text position to account for newline char.
+        nodePos.text += 1;
+      }
+      nodePos.enteredInitialBlock = true;
+    }
+
+    // If we've entered a new block and now have a matching node then return the current node position.
+    if (nodePos.text === textPosition) {
+      return nodePos;
+    }
+
+    // If text position matches last position of a node view, return its outer document position
+    if (node.isAtom && textPosition === nodePos.text + node.content.size) {
+      nodePos.doc += node.content.size + 1;
+      nodePos.text += node.content.size;
+      return nodePos;
+    }
+  }
+  if (node.isText) {
+    // If our expected text position lies within the text nodes content, then return the associated document position.
+    if (textPosition >= nodePos.text && textPosition <= nodePos.text + node.nodeSize) {
+      var textOffset = textPosition - nodePos.text;
+      nodePos.doc += textOffset;
+      nodePos.text += textOffset;
+      return nodePos;
+    } else {
+      // Otherwise increment our accumulated document/text position
+      nodePos.doc += node.nodeSize;
+      nodePos.text += node.nodeSize;
+    }
+  }
+  for (var i = 0; i < node.childCount; i++) {
+    nodePos = enterNode(node.child(i), nodePos, textPosition);
+
+    // If we have a matching node after iterating this nodes children then return the current node position.
+    if (nodePos.text === textPosition) {
+      return nodePos;
+    }
+  }
+
+  // Exit non-leaf node
+  if (!node.isLeaf && !isDocNode) {
+    nodePos.doc += 1;
+  }
+  return nodePos;
+};
+
+/**
+ * Return the Prosemirror document position that maps to the provided plain text position.
+ *
+ * @param doc Prosemirror document
+ * @param textPosition Text position to find in the Prosemirror document.
+ */
+var getDocumentPosition = function getDocumentPosition(doc, textPosition) {
+  var currentPos = {
+    doc: 0,
+    text: 0,
+    enteredInitialBlock: false
+  };
+  var matchingNodePos = enterNode(doc, currentPos, textPosition);
+  return matchingNodePos.doc;
+};
+var _default = exports.default = getDocumentPosition;

package/dist/cjs/plugins/common/plugin-keymap.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PluginKeymap = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PluginKeymap = exports.PluginKeymap = /*#__PURE__*/function () {
+  function PluginKeymap() {
+    (0, _classCallCheck2.default)(this, PluginKeymap);
+    (0, _defineProperty2.default)(this, "keymap", {});
+  }
+  (0, _createClass2.default)(PluginKeymap, [{
+    key: "bindKey",
+    value: function bindKey(key, handler) {
+      this.keymap = _objectSpread(_objectSpread({}, this.keymap), {}, (0, _defineProperty2.default)({}, key, handler));
+    }
+  }, {
+    key: "bindMultipleKeys",
+    value: function bindMultipleKeys(keys, handler) {
+      var _this = this;
+      keys.forEach(function (key) {
+        _this.keymap = _objectSpread(_objectSpread({}, _this.keymap), {}, (0, _defineProperty2.default)({}, key, handler));
+      });
+    }
+  }, {
+    key: "unbindKey",
+    value: function unbindKey(key) {
+      var _this$keymap = this.keymap,
+        keyToUnbind = _this$keymap[key],
+        rest = (0, _objectWithoutProperties2.default)(_this$keymap, [key].map(_toPropertyKey));
+      this.keymap = rest;
+    }
+  }, {
+    key: "getKeyBinding",
+    value: function getKeyBinding(key) {
+      return this.keymap[key];
+    }
+  }]);
+  return PluginKeymap;
+}();

package/dist/cjs/plugins/common/react-plugin-view.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _Subject = require("rxjs/Subject");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Abstract class for Prosemirror plugin views which need to mount a React component. Concrete subclasses must implement
+ * {@link ReactPluginView#getComponent} which specifies the React component to render, along with
+ * {@link ReactPluginView#getInitialComponentProps} which returns any props to pass to the component on initial render.
+ *
+ * After the class is constructed, the caller must invoke {@link ReactPluginView#init} in order to mount the component.
+ *
+ * If there are external changes which the component needs to respond to, {@link ReactPluginView#componentSubject} can
+ * be used to trigger a re-render of the component with updated props. For example:
+ * ```
+ * update = (view: EditorView) => {
+ *   this.componentSubject.next(this.getComponentProps(view));
+ * };
+ *
+ * getComponentProps = (view: EditorView) => {
+ *   // Some logic to get props from the Prosemirror view
+ * }
+ * ```
+ */
+var ReactPluginView = exports.default = /*#__PURE__*/function () {
+  /**
+   * Construct a Prosemirror plugin view which will render a React component in a portal.
+   *
+   * @param portalActions Provides callback functions which can be invoked to create and destroy a portal.
+   * @param portalKey Unique identifier for the plugin component.
+   * @param containerKey Key representing the HTML container the React component will be portalled into.
+   * @protected
+   */
+  function ReactPluginView(portalActions, portalKey, containerKey) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, ReactPluginView);
+    (0, _defineProperty2.default)(this, "componentSubject", new _Subject.Subject());
+    (0, _defineProperty2.default)(this, "init", function () {
+      var Component = _this.getComponent();
+      var PortallingComponent = function PortallingComponent() {
+        var _useState = (0, _react.useState)(function () {
+            return _this.getInitialComponentProps();
+          }),
+          _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+          state = _useState2[0],
+          setState = _useState2[1];
+        (0, _react.useEffect)(function () {
+          // Subscribe to the RxJS subject so concrete subclasses can emit events to re-render the plugin component.
+          var subscription = _this.componentSubject.subscribe(function (updatedProps) {
+            setState(updatedProps);
+          });
+          return function () {
+            return subscription.unsubscribe();
+          };
+        }, []);
+        return /*#__PURE__*/_react.default.createElement(Component, state);
+      };
+
+      // Dispatch onCreatePortal which will allow the handler to create a new portalled React component
+      _this.portalActions.onCreatePortal(_this.portalKey, /*#__PURE__*/_react.default.createElement(PortallingComponent, null), _this.containerKey);
+    });
+    this.portalActions = portalActions;
+    this.portalKey = portalKey;
+    this.containerKey = containerKey;
+  }
+  (0, _createClass2.default)(ReactPluginView, [{
+    key: "destroy",
+    value: function destroy() {
+      // Dispatch onDestroyPortal which will allow the handler to remove the portalled React component.
+      this.portalActions.onDestroyPortal(this.portalKey);
+    }
+
+    /**
+     * Return a React component to render for the plugin.
+     */
+
+    /**
+     * Return props to set on the component for initial render.
+     */
+  }]);
+  return ReactPluginView;
+}();

package/dist/cjs/plugins/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "autocompletePlugin", {
+  enumerable: true,
+  get: function get() {
+    return _autocomplete.default;
+  }
+});
+Object.defineProperty(exports, "jqlAstPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _jqlAst.default;
+  }
+});
+Object.defineProperty(exports, "jqlSyntaxHighlightingPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _jqlSyntaxHighlighting.default;
+  }
+});
+Object.defineProperty(exports, "richInlineNodesPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _richInlineNodes.default;
+  }
+});
+Object.defineProperty(exports, "validationTooltipPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _validationTooltip.default;
+  }
+});
+var _autocomplete = _interopRequireDefault(require("./autocomplete"));
+var _jqlAst = _interopRequireDefault(require("./jql-ast"));
+var _jqlSyntaxHighlighting = _interopRequireDefault(require("./jql-syntax-highlighting"));
+var _richInlineNodes = _interopRequireDefault(require("./rich-inline-nodes"));
+var _validationTooltip = _interopRequireDefault(require("./validation-tooltip"));