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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- [#128787](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128787)
+  [`8d3d8163602e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d3d8163602e9) -
+  use color.icon.subtle pallette for both block control widgets, which includes drag handle and
+  quick insert
+- Updated dependencies
+
 ## 3.3.18
 
 ### 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

@@ -43,6 +43,11 @@ var iconWrapperStyles = (0, _primitives.xcss)({
   justifyContent: 'center',
   alignItems: 'center'
 });
+
+// update color to match quick insert button for new editor controls
+var dragHandleColor = (0, _react2.css)({
+  color: "var(--ds-icon-subtle, #626F86)"
+});
 var dragHandleButtonStyles = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -59,6 +64,7 @@ var dragHandleButtonStyles = (0, _react2.css)({
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
+  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -632,7 +638,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [dragHandleButtonStyles,
+        css: [dragHandleButtonStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         _browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],

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

@@ -37,10 +37,10 @@ var buttonStyles = (0, _primitives.xcss)({
   zIndex: 'card',
   outline: 'none',
   ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
+    backgroundColor: 'color.background.neutral.subtle.hovered'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral.pressed'
+    backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
@@ -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,10 +185,11 @@ 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, #44546F)"
+      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

@@ -35,6 +35,11 @@ const iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
+
+// update color to match quick insert button for new editor controls
+const dragHandleColor = css({
+  color: "var(--ds-icon-subtle, #626F86)"
+});
 const dragHandleButtonStyles = css({
   position: 'absolute',
   padding: `${"var(--ds-space-025, 2px)"} 0`,
@@ -51,6 +56,7 @@ const dragHandleButtonStyles = css({
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
+  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -617,7 +623,7 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [dragHandleButtonStyles,
+    css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
     // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
     // See https://product-fabric.atlassian.net/browse/ED-26266
     browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],

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

@@ -26,10 +26,10 @@ const buttonStyles = xcss({
   zIndex: 'card',
   outline: 'none',
   ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
+    backgroundColor: 'color.background.neutral.subtle.hovered'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral.pressed'
+    backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
@@ -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,10 +173,11 @@ 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, #44546F)"
+      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

@@ -40,6 +40,11 @@ var iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
+
+// update color to match quick insert button for new editor controls
+var dragHandleColor = css({
+  color: "var(--ds-icon-subtle, #626F86)"
+});
 var dragHandleButtonStyles = css({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
@@ -56,6 +61,7 @@ var dragHandleButtonStyles = css({
   background: 'transparent',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
+  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -629,7 +635,7 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [dragHandleButtonStyles,
+        css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],

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

@@ -27,10 +27,10 @@ var buttonStyles = xcss({
   zIndex: 'card',
   outline: 'none',
   ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
+    backgroundColor: 'color.background.neutral.subtle.hovered'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral.pressed'
+    backgroundColor: 'color.background.neutral.subtle.pressed'
   },
   ':focus': {
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
@@ -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,10 +175,11 @@ 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, #44546F)"
+      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.18",
+	"version": "3.4.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.10.0",
+		"@atlaskit/editor-common": "^102.11.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.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",