@atlaskit/editor-plugin-quick-insert 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 0.1.2
+
+### Patch Changes
+
+- [#39425](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39425) [`4c27d14af2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c27d14af2e) - [ED-19408] Fix issue where FocusTrap returnFocus was causing the cursor to end up at the beginning of the document when inserting elements using the element browser modal.
+- Updated dependencies
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -27,4 +27,4 @@ Please see [Atlaskit - Editor plugin quick insert](https://atlaskit.atlassian.co
 For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
 ## License
 ---
- Please see [Atlassian Frontend - License](https://developer.atlassian.com/cloud/framework/atlassian-frontend/#license) for more licensing information.
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/commands.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.openElementBrowserModal = exports.insertItem = exports.closeElementBrowserModal = void 0;
 var _insert = require("@atlaskit/editor-common/insert");
 var _pluginKey = require("./plugin-key");
-var openElementBrowserModal = function openElementBrowserModal(_ref) {
+var openElementBrowserModal = exports.openElementBrowserModal = function openElementBrowserModal(_ref) {
   var tr = _ref.tr;
   return tr.setMeta(_pluginKey.pluginKey, {
     isElementBrowserModalOpen: true
   });
 };
-exports.openElementBrowserModal = openElementBrowserModal;
-var closeElementBrowserModal = function closeElementBrowserModal() {
+var closeElementBrowserModal = exports.closeElementBrowserModal = function closeElementBrowserModal() {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
@@ -25,8 +24,7 @@ var closeElementBrowserModal = function closeElementBrowserModal() {
 };
 
 // this method was adapted from the typeahead plugin so we respect the API for quick insert items
-exports.closeElementBrowserModal = closeElementBrowserModal;
-var insertItem = function insertItem(item) {
+var insertItem = exports.insertItem = function insertItem(item) {
   return function (state, dispatch) {
     var insert = function insert(maybeNode) {
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -40,5 +38,4 @@ var insertItem = function insertItem(item) {
     }
     return true;
   };
-};
-exports.insertItem = insertItem;
+};

package/dist/cjs/plugin-key.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
-var pluginKey = new _state.PluginKey('quickInsertPluginKey');
-exports.pluginKey = pluginKey;
+var pluginKey = exports.pluginKey = new _state.PluginKey('quickInsertPluginKey');

package/dist/cjs/plugin.js

@@ -18,7 +18,7 @@ var _search = require("./search");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 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 quickInsertPlugin = function quickInsertPlugin(_ref) {
+var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
   return {
@@ -95,7 +95,6 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
     }
   };
 };
-exports.quickInsertPlugin = quickInsertPlugin;
 var setProviderState = function setProviderState(providerState) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/search.js

@@ -8,7 +8,7 @@ exports.getQuickInsertSuggestions = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
-var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
+var getQuickInsertSuggestions = exports.getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions) {
   var lazyDefaultItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return [];
   };
@@ -29,5 +29,4 @@ var getQuickInsertSuggestions = function getQuickInsertSuggestions(searchOptions
   return (0, _quickInsert.find)(query || '', category === 'all' || !category ? items : items.filter(function (item) {
     return item.categories && item.categories.includes(category);
   }));
-};
-exports.getQuickInsertSuggestions = getQuickInsertSuggestions;
+};

package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -23,8 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 /** @jsx jsx */
 
-var MODAL_WRAPPER_PADDING = 16;
-exports.MODAL_WRAPPER_PADDING = MODAL_WRAPPER_PADDING;
+var MODAL_WRAPPER_PADDING = exports.MODAL_WRAPPER_PADDING = 16;
 var actionsStyles = (0, _react2.css)({
   display: 'inline-flex',
   margin: "0 ".concat("var(--ds-space-negative-050, -4px)")
@@ -105,9 +104,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
@@ -155,5 +156,4 @@ var HelpLink = function HelpLink(url, helpText) {
     testId: "ModalElementBrowser__help-button"
   }, helpText);
 };
-var _default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);
-exports.default = _default;
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);

package/dist/cjs/ui/ModalElementBrowser/index.js

@@ -28,25 +28,41 @@ var Modal = function Modal(_ref) {
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  var insertableItem = _react.default.useRef(null);
   var onInsertItem = (0, _react.useCallback)(function (item) {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   var onClose = (0, _react.useCallback)(function () {
     (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  var onCloseComplete = (0, _react.useCallback)(function () {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    var item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
-var _default = function _default(_ref2) {
+var _default = exports.default = function _default(_ref2) {
   var editorView = _ref2.editorView,
     helpUrl = _ref2.helpUrl,
     pluginInjectionAPI = _ref2.pluginInjectionAPI;
@@ -57,5 +73,4 @@ var _default = function _default(_ref2) {
     editorView: editorView,
     helpUrl: helpUrl
   });
-};
-exports.default = _default;
+};

package/dist/cjs/ui/ModalElementBrowser/messages.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   help: {
     id: 'fabric.editor.elementBrowser.help',
     defaultMessage: 'Help',
     description: 'Element browser help button label'
   }
-});
-exports.messages = messages;
+});

package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -85,9 +85,11 @@ const ModalElementBrowser = props => {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,

package/dist/es2019/ui/ModalElementBrowser/index.js

@@ -17,22 +17,38 @@ const Modal = ({
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  const insertableItem = React.useRef(null);
   const onInsertItem = useCallback(item => {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   const onClose = useCallback(() => {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  const onCloseComplete = useCallback(() => {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    const item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
 export default (({

package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -93,9 +93,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     stackIndex: 0,
     key: "element-browser-modal",
     onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
     height: "664px",
     width: "x-large",
-    autoFocus: false
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
     // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,

package/dist/esm/ui/ModalElementBrowser/index.js

@@ -18,22 +18,38 @@ var Modal = function Modal(_ref) {
       editorView.focus();
     }
   }, [editorView]);
+
+  // ED-19408 We not store the item ref in the state
+  // Instead of adding the item immediately on insert item
+  // We wait until modal close is complete, refocus the editor and then add the item
+  var insertableItem = React.useRef(null);
   var onInsertItem = useCallback(function (item) {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
-    focusInEditor();
-    insertItem(item)(editorView.state, editorView.dispatch);
-  }, [editorView, focusInEditor]);
+    insertableItem.current = item;
+  }, [editorView]);
   var onClose = useCallback(function () {
     closeElementBrowserModal()(editorView.state, editorView.dispatch);
     focusInEditor();
   }, [editorView, focusInEditor]);
+  var onCloseComplete = useCallback(function () {
+    if (!insertableItem.current) {
+      focusInEditor();
+      return;
+    }
+    var item = insertableItem.current;
+    insertableItem.current = null;
+    focusInEditor();
+    insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, focusInEditor]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
     isOpen: (quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.isElementBrowserModalOpen) || false,
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
-    onClose: onClose
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    shouldReturnFocus: false
   });
 };
 export default (function (_ref2) {

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

@@ -9,8 +9,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     isOpen?: boolean;
     onClose: () => void;
+    onCloseComplete: () => void;
     helpUrl?: string | undefined;
     emptyStateHandler?: EmptyStateHandler;
+    shouldReturnFocus?: boolean;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

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

@@ -9,8 +9,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     isOpen?: boolean;
     onClose: () => void;
+    onCloseComplete: () => void;
     helpUrl?: string | undefined;
     emptyStateHandler?: EmptyStateHandler;
+    shouldReturnFocus?: boolean;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-quick-insert",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Quick insert plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.10.0",
-    "@atlaskit/editor-common": "^76.0.0",
+    "@atlaskit/editor-common": "^76.3.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/modal-dialog": "^12.7.0",
+    "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",