@atlaskit/editor-plugin-mentions 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-mentions
 
+## 0.1.19
+
+### Patch Changes
+
+- [#67238](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67238) [`40533849b2ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40533849b2ec) - [ED-21835] Change EditorAPI type to always union with undefined
+
+## 0.1.18
+
+### Patch Changes
+
+- [#67189](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67189) [`93cbf53ca0e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93cbf53ca0e0) - Removing instances of WithPluginState from mentions and type-ahead plugins.
+
 ## 0.1.17
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -12,12 +12,11 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _resource = require("@atlaskit/mention/resource");
 var _key = require("./pm-plugins/key");
 var _main = require("./pm-plugins/main");
 var _typeAhead = require("./type-ahead");
-var _ToolbarMention = _interopRequireDefault(require("./ui/ToolbarMention"));
+var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
 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 mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref) {
@@ -61,33 +60,17 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref) {
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref3) {
       var editorView = _ref3.editorView,
         disabled = _ref3.disabled;
-      var openMentionTypeAhead = function openMentionTypeAhead() {
-        var _api$typeAhead;
-        api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 || _api$typeAhead.open({
-          triggerHandler: typeAhead,
-          inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
-        });
-      };
-      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
+      return /*#__PURE__*/_react.default.createElement(_SecondaryToolbarComponent.SecondaryToolbarComponent, {
         editorView: editorView,
-        plugins: {
-          mentionState: _key.mentionPluginKey
-        },
-        render: function render(_ref4) {
-          var _ref4$mentionState = _ref4.mentionState,
-            mentionState = _ref4$mentionState === void 0 ? {} : _ref4$mentionState;
-          return !mentionState.mentionProvider ? null : /*#__PURE__*/_react.default.createElement(_ToolbarMention.default, {
-            editorView: editorView,
-            onInsertMention: openMentionTypeAhead,
-            isDisabled: disabled || (api === null || api === void 0 ? void 0 : api.typeAhead.actions.isAllowed(editorView.state))
-          });
-        }
+        api: api,
+        disabled: disabled,
+        typeAhead: typeAhead
       });
     },
     actions: {
       openTypeAhead: function openTypeAhead(inputMethod) {
-        var _api$typeAhead2;
-        return Boolean(api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || (_api$typeAhead2 = _api$typeAhead2.actions) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.open({
+        var _api$typeAhead;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.open({
           triggerHandler: typeAhead,
           inputMethod: inputMethod
         }));
@@ -103,8 +86,8 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref5) {
-        var formatMessage = _ref5.formatMessage;
+      quickInsert: function quickInsert(_ref4) {
+        var formatMessage = _ref4.formatMessage;
         return [{
           id: 'mention',
           title: formatMessage(_messages.toolbarInsertBlockMessages.mention),
@@ -116,12 +99,13 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconMention, null);
           },
           action: function action(insert, state) {
+            var _api$typeAhead2;
             var tr = insert(undefined);
             var pluginState = _key.mentionPluginKey.getState(state);
             if (pluginState && pluginState.canInsertMention === false) {
               return false;
             }
-            api === null || api === void 0 || api.typeAhead.actions.openAtTransaction({
+            api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || _api$typeAhead2.actions.openAtTransaction({
               triggerHandler: typeAhead,
               inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
             })(tr);

package/dist/cjs/ui/SecondaryToolbarComponent.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecondaryToolbarComponent = SecondaryToolbarComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ToolbarMention = _interopRequireDefault(require("./ToolbarMention"));
+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; }
+function SecondaryToolbarComponent(_ref) {
+  var _api$typeAhead2;
+  var editorView = _ref.editorView,
+    api = _ref.api,
+    typeAhead = _ref.typeAhead,
+    disabled = _ref.disabled;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mention']),
+    mentionState = _useSharedPluginState.mentionState;
+  var openMentionTypeAhead = (0, _react.useCallback)(function () {
+    var _api$typeAhead;
+    api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 || _api$typeAhead.open({
+      triggerHandler: typeAhead,
+      inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
+    });
+  }, [api, typeAhead]);
+  return !(mentionState !== null && mentionState !== void 0 && mentionState.mentionProvider) ? null : /*#__PURE__*/_react.default.createElement(_ToolbarMention.default, {
+    editorView: editorView,
+    onInsertMention: openMentionTypeAhead,
+    isDisabled: disabled || (api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isAllowed(editorView.state))
+  });
+}

package/dist/es2019/plugin.js

@@ -4,12 +4,11 @@ import { mention } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconMention } from '@atlaskit/editor-common/quick-insert';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { ELEMENTS_CHANNEL } from '@atlaskit/mention/resource';
 import { mentionPluginKey } from './pm-plugins/key';
 import { createMentionPlugin } from './pm-plugins/main';
 import { createTypeAheadConfig } from './type-ahead';
-import ToolbarMention from './ui/ToolbarMention';
+import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 const mentionsPlugin = ({
   config: options,
   api
@@ -52,31 +51,17 @@ const mentionsPlugin = ({
       editorView,
       disabled
     }) {
-      const openMentionTypeAhead = () => {
-        var _api$typeAhead, _api$typeAhead$action;
-        api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : (_api$typeAhead$action = _api$typeAhead.actions) === null || _api$typeAhead$action === void 0 ? void 0 : _api$typeAhead$action.open({
-          triggerHandler: typeAhead,
-          inputMethod: INPUT_METHOD.INSERT_MENU
-        });
-      };
-      return /*#__PURE__*/React.createElement(WithPluginState, {
+      return /*#__PURE__*/React.createElement(SecondaryToolbarComponent, {
         editorView: editorView,
-        plugins: {
-          mentionState: mentionPluginKey
-        },
-        render: ({
-          mentionState = {}
-        }) => !mentionState.mentionProvider ? null : /*#__PURE__*/React.createElement(ToolbarMention, {
-          editorView: editorView,
-          onInsertMention: openMentionTypeAhead,
-          isDisabled: disabled || (api === null || api === void 0 ? void 0 : api.typeAhead.actions.isAllowed(editorView.state))
-        })
+        api: api,
+        disabled: disabled,
+        typeAhead: typeAhead
       });
     },
     actions: {
       openTypeAhead(inputMethod) {
-        var _api$typeAhead2, _api$typeAhead2$actio;
-        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : (_api$typeAhead2$actio = _api$typeAhead2.actions) === null || _api$typeAhead2$actio === void 0 ? void 0 : _api$typeAhead2$actio.open({
+        var _api$typeAhead, _api$typeAhead$action;
+        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : (_api$typeAhead$action = _api$typeAhead.actions) === null || _api$typeAhead$action === void 0 ? void 0 : _api$typeAhead$action.open({
           triggerHandler: typeAhead,
           inputMethod
         }));
@@ -104,12 +89,13 @@ const mentionsPlugin = ({
         keyshortcut: '@',
         icon: () => /*#__PURE__*/React.createElement(IconMention, null),
         action(insert, state) {
+          var _api$typeAhead2;
           const tr = insert(undefined);
           const pluginState = mentionPluginKey.getState(state);
           if (pluginState && pluginState.canInsertMention === false) {
             return false;
           }
-          api === null || api === void 0 ? void 0 : api.typeAhead.actions.openAtTransaction({
+          api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.openAtTransaction({
             triggerHandler: typeAhead,
             inputMethod: INPUT_METHOD.QUICK_INSERT
           })(tr);

package/dist/es2019/ui/SecondaryToolbarComponent.js

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ToolbarMention from './ToolbarMention';
+export function SecondaryToolbarComponent({
+  editorView,
+  api,
+  typeAhead,
+  disabled
+}) {
+  var _api$typeAhead2;
+  const {
+    mentionState
+  } = useSharedPluginState(api, ['mention']);
+  const openMentionTypeAhead = useCallback(() => {
+    var _api$typeAhead, _api$typeAhead$action;
+    api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : (_api$typeAhead$action = _api$typeAhead.actions) === null || _api$typeAhead$action === void 0 ? void 0 : _api$typeAhead$action.open({
+      triggerHandler: typeAhead,
+      inputMethod: INPUT_METHOD.INSERT_MENU
+    });
+  }, [api, typeAhead]);
+  return !(mentionState !== null && mentionState !== void 0 && mentionState.mentionProvider) ? null : /*#__PURE__*/React.createElement(ToolbarMention, {
+    editorView: editorView,
+    onInsertMention: openMentionTypeAhead,
+    isDisabled: disabled || (api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isAllowed(editorView.state))
+  });
+}

package/dist/esm/plugin.js

@@ -7,12 +7,11 @@ import { mention } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconMention } from '@atlaskit/editor-common/quick-insert';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { ELEMENTS_CHANNEL } from '@atlaskit/mention/resource';
 import { mentionPluginKey } from './pm-plugins/key';
 import { createMentionPlugin } from './pm-plugins/main';
 import { createTypeAheadConfig } from './type-ahead';
-import ToolbarMention from './ui/ToolbarMention';
+import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 var mentionsPlugin = function mentionsPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
@@ -54,33 +53,17 @@ var mentionsPlugin = function mentionsPlugin(_ref) {
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref3) {
       var editorView = _ref3.editorView,
         disabled = _ref3.disabled;
-      var openMentionTypeAhead = function openMentionTypeAhead() {
-        var _api$typeAhead;
-        api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 || _api$typeAhead.open({
-          triggerHandler: typeAhead,
-          inputMethod: INPUT_METHOD.INSERT_MENU
-        });
-      };
-      return /*#__PURE__*/React.createElement(WithPluginState, {
+      return /*#__PURE__*/React.createElement(SecondaryToolbarComponent, {
         editorView: editorView,
-        plugins: {
-          mentionState: mentionPluginKey
-        },
-        render: function render(_ref4) {
-          var _ref4$mentionState = _ref4.mentionState,
-            mentionState = _ref4$mentionState === void 0 ? {} : _ref4$mentionState;
-          return !mentionState.mentionProvider ? null : /*#__PURE__*/React.createElement(ToolbarMention, {
-            editorView: editorView,
-            onInsertMention: openMentionTypeAhead,
-            isDisabled: disabled || (api === null || api === void 0 ? void 0 : api.typeAhead.actions.isAllowed(editorView.state))
-          });
-        }
+        api: api,
+        disabled: disabled,
+        typeAhead: typeAhead
       });
     },
     actions: {
       openTypeAhead: function openTypeAhead(inputMethod) {
-        var _api$typeAhead2;
-        return Boolean(api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || (_api$typeAhead2 = _api$typeAhead2.actions) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.open({
+        var _api$typeAhead;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.open({
           triggerHandler: typeAhead,
           inputMethod: inputMethod
         }));
@@ -96,8 +79,8 @@ var mentionsPlugin = function mentionsPlugin(_ref) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref5) {
-        var formatMessage = _ref5.formatMessage;
+      quickInsert: function quickInsert(_ref4) {
+        var formatMessage = _ref4.formatMessage;
         return [{
           id: 'mention',
           title: formatMessage(messages.mention),
@@ -109,12 +92,13 @@ var mentionsPlugin = function mentionsPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconMention, null);
           },
           action: function action(insert, state) {
+            var _api$typeAhead2;
             var tr = insert(undefined);
             var pluginState = mentionPluginKey.getState(state);
             if (pluginState && pluginState.canInsertMention === false) {
               return false;
             }
-            api === null || api === void 0 || api.typeAhead.actions.openAtTransaction({
+            api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || _api$typeAhead2.actions.openAtTransaction({
               triggerHandler: typeAhead,
               inputMethod: INPUT_METHOD.QUICK_INSERT
             })(tr);

package/dist/esm/ui/SecondaryToolbarComponent.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ToolbarMention from './ToolbarMention';
+export function SecondaryToolbarComponent(_ref) {
+  var _api$typeAhead2;
+  var editorView = _ref.editorView,
+    api = _ref.api,
+    typeAhead = _ref.typeAhead,
+    disabled = _ref.disabled;
+  var _useSharedPluginState = useSharedPluginState(api, ['mention']),
+    mentionState = _useSharedPluginState.mentionState;
+  var openMentionTypeAhead = useCallback(function () {
+    var _api$typeAhead;
+    api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || (_api$typeAhead = _api$typeAhead.actions) === null || _api$typeAhead === void 0 || _api$typeAhead.open({
+      triggerHandler: typeAhead,
+      inputMethod: INPUT_METHOD.INSERT_MENU
+    });
+  }, [api, typeAhead]);
+  return !(mentionState !== null && mentionState !== void 0 && mentionState.mentionProvider) ? null : /*#__PURE__*/React.createElement(ToolbarMention, {
+    editorView: editorView,
+    onInsertMention: openMentionTypeAhead,
+    isDisabled: disabled || (api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isAllowed(editorView.state))
+  });
+}

package/dist/types/ui/SecondaryToolbarComponent.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MentionsPlugin } from '../types';
+interface SecondaryToolbarComponentProps {
+    editorView: EditorView;
+    api: ExtractInjectionAPI<MentionsPlugin> | undefined;
+    typeAhead: TypeAheadHandler;
+    disabled: boolean;
+}
+export declare function SecondaryToolbarComponent({ editorView, api, typeAhead, disabled, }: SecondaryToolbarComponentProps): JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/SecondaryToolbarComponent.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MentionsPlugin } from '../types';
+interface SecondaryToolbarComponentProps {
+    editorView: EditorView;
+    api: ExtractInjectionAPI<MentionsPlugin> | undefined;
+    typeAhead: TypeAheadHandler;
+    disabled: boolean;
+}
+export declare function SecondaryToolbarComponent({ editorView, api, typeAhead, disabled, }: SecondaryToolbarComponentProps): JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-mentions",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Mentions plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "releaseModel": "continuous",
     "runReact18": false
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/editor-common": "^76.35.0",
+    "@atlaskit/editor-common": "^76.39.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-type-ahead": "^0.9.0",
     "@atlaskit/editor-prosemirror": "1.1.0",