@atlaskit/editor-plugin-insert-block 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.0.1
+
+### Patch Changes
+
+- [#72440](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72440) [`eee41a9f4bda`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eee41a9f4bda) - [ux] Ensures that when a table is inserted via popup, the table has a blinking cursor.
+
 ## 1.0.0
 
 ### Major Changes

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

@@ -541,13 +541,25 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       var _this$props13 = this.props,
         popupsMountPoint = _this$props13.popupsMountPoint,
         popupsBoundariesElement = _this$props13.popupsBoundariesElement,
-        popupsScrollableElement = _this$props13.popupsScrollableElement;
+        popupsScrollableElement = _this$props13.popupsScrollableElement,
+        pluginInjectionApi = _this$props13.pluginInjectionApi;
       var ref = (_this$tableButtonRef$ = this.tableButtonRef.current) !== null && _this$tableButtonRef$ !== void 0 ? _this$tableButtonRef$ : undefined;
       if (!isTableSelectorOpen) {
         return null;
       }
+
+      // We use focusTrap in the Popup. When we insert a table via popup,
+      // the popup closes, focusTrap gets destroyed and the popup detaches.
+      // The focus gets set to the body element. onUnmount method sets focus on the editor right before the
+      // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
+      // So we can start typing right away.
+      var onUnmount = function onUnmount() {
+        var _pluginInjectionApi$c7;
+        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || (_pluginInjectionApi$c7 = _pluginInjectionApi$c7.actions) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : _pluginInjectionApi$c7.focus();
+      };
       return (0, _react2.jsx)(_tableSelectorPopupWithListeners.default, {
         target: ref,
+        onUnmount: onUnmount,
         onSelection: this.handleSelectedTableSize,
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,

package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -232,6 +232,7 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
     boundariesElement: props.popupsBoundariesElement,
     scrollableElement: props.popupsScrollableElement,
     focusTrap: true,
+    onUnmount: props.onUnmount,
     zIndex: _editorSharedStyles.akEditorMenuZIndex
   }, (0, _react2.jsx)("div", {
     css: tableSelectorPopupWrapperStyles,

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

@@ -597,14 +597,26 @@ export class ToolbarInsertBlock extends React.PureComponent {
     const {
       popupsMountPoint,
       popupsBoundariesElement,
-      popupsScrollableElement
+      popupsScrollableElement,
+      pluginInjectionApi
     } = this.props;
     const ref = (_this$tableButtonRef$ = this.tableButtonRef.current) !== null && _this$tableButtonRef$ !== void 0 ? _this$tableButtonRef$ : undefined;
     if (!isTableSelectorOpen) {
       return null;
     }
+
+    // We use focusTrap in the Popup. When we insert a table via popup,
+    // the popup closes, focusTrap gets destroyed and the popup detaches.
+    // The focus gets set to the body element. onUnmount method sets focus on the editor right before the
+    // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
+    // So we can start typing right away.
+    const onUnmount = () => {
+      var _pluginInjectionApi$c7, _pluginInjectionApi$c8;
+      return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : (_pluginInjectionApi$c8 = _pluginInjectionApi$c7.actions) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.focus();
+    };
     return jsx(TableSelectorPopup, {
       target: ref,
+      onUnmount: onUnmount,
       onSelection: this.handleSelectedTableSize,
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -222,6 +222,7 @@ export const TableSelectorPopup = props => {
     boundariesElement: props.popupsBoundariesElement,
     scrollableElement: props.popupsScrollableElement,
     focusTrap: true,
+    onUnmount: props.onUnmount,
     zIndex: akEditorMenuZIndex
   }, jsx("div", {
     css: tableSelectorPopupWrapperStyles,

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

@@ -531,13 +531,25 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props13 = this.props,
         popupsMountPoint = _this$props13.popupsMountPoint,
         popupsBoundariesElement = _this$props13.popupsBoundariesElement,
-        popupsScrollableElement = _this$props13.popupsScrollableElement;
+        popupsScrollableElement = _this$props13.popupsScrollableElement,
+        pluginInjectionApi = _this$props13.pluginInjectionApi;
       var ref = (_this$tableButtonRef$ = this.tableButtonRef.current) !== null && _this$tableButtonRef$ !== void 0 ? _this$tableButtonRef$ : undefined;
       if (!isTableSelectorOpen) {
         return null;
       }
+
+      // We use focusTrap in the Popup. When we insert a table via popup,
+      // the popup closes, focusTrap gets destroyed and the popup detaches.
+      // The focus gets set to the body element. onUnmount method sets focus on the editor right before the
+      // Popup will be unmounted to ensure that the new table has a selection with a blinking cursor.
+      // So we can start typing right away.
+      var onUnmount = function onUnmount() {
+        var _pluginInjectionApi$c7;
+        return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c7 = pluginInjectionApi.core) === null || _pluginInjectionApi$c7 === void 0 || (_pluginInjectionApi$c7 = _pluginInjectionApi$c7.actions) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : _pluginInjectionApi$c7.focus();
+      };
       return jsx(TableSelectorPopup, {
         target: ref,
+        onUnmount: onUnmount,
         onSelection: this.handleSelectedTableSize,
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -224,6 +224,7 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
     boundariesElement: props.popupsBoundariesElement,
     scrollableElement: props.popupsScrollableElement,
     focusTrap: true,
+    onUnmount: props.onUnmount,
     zIndex: akEditorMenuZIndex
   }, jsx("div", {
     css: tableSelectorPopupWrapperStyles,

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/react';
 import type { OnTableSizeSelection } from './table-selector-popup';
 type SimpleEventHandler<T> = (event: T) => void;
 export interface TableSelectorPopupProps {
+    onUnmount?: () => void;
     onSelection: OnTableSizeSelection;
     target?: HTMLElement;
     popupsMountPoint?: HTMLElement;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/react';
 import type { OnTableSizeSelection } from './table-selector-popup';
 type SimpleEventHandler<T> = (event: T) => void;
 export interface TableSelectorPopupProps {
+    onUnmount?: () => void;
     onSelection: OnTableSizeSelection;
     target?: HTMLElement;
     popupsMountPoint?: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-insert-block",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Insert block plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -61,7 +61,7 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.36.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",