@atlaskit/editor-plugin-block-controls 3.3.19 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.4.0
+
+### Minor Changes
+
+- [#128772](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128772)
+  [`b2f35f81186a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2f35f81186a9) -
+  Add typeAheadPlugin as an optional dependency, close typeahead when quickinsert is clicked if it's
+  open
+
 ## 3.3.19
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -21,6 +21,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     var element = document.createElement('span');
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
+    element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
         api: api,

package/dist/cjs/ui/quick-insert-button.js

@@ -161,6 +161,15 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     }
     (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    var _api$typeAhead;
+    // close typeahead if it is open, must happen in mouseDown otherwise typeAhead popup will be dismissed and text is left
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view.state]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -176,7 +185,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       type: "button",
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
       xcss: [buttonStyles],
-      onClick: handleQuickInsert
+      onClick: handleQuickInsert,
+      onMouseDown: handleMouseDown
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
       label: "add",
       color: "var(--ds-icon-subtle, #626F86)"

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -12,6 +12,7 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     const element = document.createElement('span');
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
+    element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
       api,
       getPos,

package/dist/es2019/ui/quick-insert-button.js

@@ -149,6 +149,15 @@ export const TypeAheadControl = ({
     }
     (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
+  const handleMouseDown = useCallback(() => {
+    var _api$typeAhead;
+    // close typeahead if it is open, must happen in mouseDown otherwise typeAhead popup will be dismissed and text is left
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view.state]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -164,7 +173,8 @@ export const TypeAheadControl = ({
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: handleQuickInsert
+      onClick: handleQuickInsert,
+      onMouseDown: handleMouseDown
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add",
       color: "var(--ds-icon-subtle, #626F86)"

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -14,6 +14,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     var element = document.createElement('span');
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
+    element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(TypeAheadControl, {
         api: api,

package/dist/esm/ui/quick-insert-button.js

@@ -151,6 +151,15 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     }
     (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
+  var handleMouseDown = useCallback(function () {
+    var _api$typeAhead;
+    // close typeahead if it is open, must happen in mouseDown otherwise typeAhead popup will be dismissed and text is left
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view.state]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -166,7 +175,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: handleQuickInsert
+      onClick: handleQuickInsert,
+      onMouseDown: handleMouseDown
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add",
       color: "var(--ds-icon-subtle, #626F86)"

package/dist/types/blockControlsPluginType.d.ts

@@ -8,6 +8,7 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
@@ -70,11 +71,8 @@ export type BlockControlsPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<AccessibilityUtilsPlugin>,
-    /**
-     * For Typeahead - Empty line prompt experiment
-     * Clean up ticket ED-24824
-     */
     OptionalPlugin<QuickInsertPlugin>,
+    OptionalPlugin<TypeAheadPlugin>,
     OptionalPlugin<SelectionPlugin>,
     OptionalPlugin<MetricsPlugin>
 ];

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -8,6 +8,7 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
@@ -70,11 +71,8 @@ export type BlockControlsPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<AccessibilityUtilsPlugin>,
-    /**
-     * For Typeahead - Empty line prompt experiment
-     * Clean up ticket ED-24824
-     */
     OptionalPlugin<QuickInsertPlugin>,
+    OptionalPlugin<TypeAheadPlugin>,
     OptionalPlugin<SelectionPlugin>,
     OptionalPlugin<MetricsPlugin>
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.3.19",
+	"version": "3.4.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,6 +41,7 @@
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.1.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
@@ -50,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/tokens": "^4.5.0",