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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.5.0
+
+### Minor Changes
+
+- [#128788](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128788)
+  [`83a4d1ba203b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83a4d1ba203b0) -
+  [ux] update icons
+
+## 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/drag-handle.js

@@ -20,6 +20,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/utility/drag-handle-vertical"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -661,9 +662,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, (0, _react2.jsx)(_dragHandler.default, {
+      }, (0, _react2.jsx)(_dragHandleVertical.default, {
+        spacing: "spacious",
         label: "",
-        size: "medium"
+        LEGACY_fallbackIcon: _dragHandler.default,
+        LEGACY_size: "medium"
       })))
     );
   };

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/drag-handle.js

@@ -17,6 +17,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -646,9 +647,11 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
     onDragStart: handleIconDragStart
-  }, jsx(DragHandlerIcon, {
+  }, jsx(DragHandleVerticalIcon, {
+    spacing: "spacious",
     label: "",
-    size: "medium"
+    LEGACY_fallbackIcon: DragHandlerIcon,
+    LEGACY_size: "medium"
   })));
   return !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {

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/drag-handle.js

@@ -22,6 +22,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -658,9 +659,11 @@ export var DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, jsx(DragHandlerIcon, {
+      }, jsx(DragHandleVerticalIcon, {
+        spacing: "spacious",
         label: "",
-        size: "medium"
+        LEGACY_fallbackIcon: DragHandlerIcon,
+        LEGACY_size: "medium"
       })))
     );
   };

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.5.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",