@atlaskit/editor-plugin-block-controls 3.7.1 → 3.8.0

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
 import React, { useCallback, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -10,7 +13,7 @@ import AddIcon from '@atlaskit/icon/utility/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
-import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
@@ -48,6 +51,31 @@ var disabledStyles = xcss({
     backgroundColor: 'color.background.disabled'
   }
 });
+var stickyButtonStyles = xcss({
+  top: '0',
+  position: 'sticky',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderRadius: '50%',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
 var containerStaticStyles = xcss({
   position: 'absolute',
   zIndex: 'card'
@@ -55,6 +83,11 @@ var containerStaticStyles = xcss({
 var disabledContainerStyles = xcss({
   cursor: 'not-allowed'
 });
+var tooltipContainerStyles = xcss({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -63,8 +96,11 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     api = _ref.api,
     formatMessage = _ref.formatMessage,
     getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    anchorName = _ref.anchorName,
     rootAnchorName = _ref.rootAnchorName,
-    rootNodeType = _ref.rootNodeType;
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache;
   var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
   var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   var _useState = useState({
@@ -101,17 +137,25 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = shouldBeSticky(rootNodeType);
+    var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(rootAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
-      return {
+      return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
         top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
-      };
+      }, bottom);
     }
-    return {
+
+    // expensive, calls offsetHeight, guard behind FG
+    var nodeHeight =
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    fg('platform_editor_controls_sticky_controls') && getNodeHeight(dom, rootAnchorName || anchorName, anchorRectCache) || 0;
+    var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)") : {};
+    return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
       top: getTopPosition(dom, rootNodeType)
-    };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
+    }, height);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   useEffect(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
@@ -196,26 +240,31 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       });
     }
   }, [api, view.state]);
+  var tooltipPressable = function tooltipPressable() {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      position: "top",
+      content: /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: formatMessage(messages.insert)
+      })
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      testId: "editor-quick-insert-button",
+      type: "button",
+      "aria-label": formatMessage(messages.insert),
+      xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
+      onClick: handleQuickInsert,
+      onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
+      isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+    }, /*#__PURE__*/React.createElement(AddIcon, {
+      label: "add",
+      color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    })));
+  };
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    position: "top",
-    content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(messages.insert)
-    })
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    testId: "editor-quick-insert-button",
-    type: "button",
-    "aria-label": formatMessage(messages.insert),
-    xcss: [buttonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
-    onClick: handleQuickInsert,
-    onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-    isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
-  }, /*#__PURE__*/React.createElement(AddIcon, {
-    label: "add",
-    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
-  }))));
+  }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [tooltipContainerStyles]
+  }, tooltipPressable()) : tooltipPressable());
 };

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -3,6 +3,7 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions) => Decoration;
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -3,5 +3,6 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string) => Decoration;
+export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;

package/dist/types/pm-plugins/utils/drag-handle-positions.d.ts

@@ -1,2 +1,11 @@
+import { AnchorRectCache } from './anchor-utils';
 export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean, parentType?: string) => string;
+export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;
+export declare const shouldBeSticky: (nodeType: string) => boolean;
+export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolean, isTopLevelNode: boolean, isLayoutColumn?: boolean) => {
+    bottom: String;
+};
+export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
+    height: string;
+};

package/dist/types/ui/drag-handle.d.ts

@@ -3,7 +3,8 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, }: {
+import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     formatMessage: IntlShape['formatMessage'];
@@ -11,5 +12,6 @@ export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
-    isTopLevelNode?: Boolean | undefined;
+    isTopLevelNode?: boolean | undefined;
+    anchorRectCache?: AnchorRectCache | undefined;
 }) => jsx.JSX.Element;

package/dist/types/ui/quick-insert-button.d.ts

@@ -3,6 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type Props = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin>;
@@ -12,6 +13,7 @@ type Props = {
     anchorName: string;
     rootAnchorName?: string;
     rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts

@@ -3,6 +3,7 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions) => Decoration;
+export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -3,5 +3,6 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string) => Decoration;
+export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;

package/dist/types-ts4.5/pm-plugins/utils/drag-handle-positions.d.ts

@@ -1,2 +1,11 @@
+import { AnchorRectCache } from './anchor-utils';
 export declare const getTopPosition: (dom: HTMLElement | null, type?: string) => string;
 export declare const getLeftPosition: (dom: HTMLElement | null, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean, parentType?: string) => string;
+export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;
+export declare const shouldBeSticky: (nodeType: string) => boolean;
+export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolean, isTopLevelNode: boolean, isLayoutColumn?: boolean) => {
+    bottom: String;
+};
+export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
+    height: string;
+};

package/dist/types-ts4.5/ui/drag-handle.d.ts

@@ -3,7 +3,8 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
-export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, }: {
+import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
+export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     formatMessage: IntlShape['formatMessage'];
@@ -11,5 +12,6 @@ export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
-    isTopLevelNode?: Boolean | undefined;
+    isTopLevelNode?: boolean | undefined;
+    anchorRectCache?: AnchorRectCache | undefined;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/quick-insert-button.d.ts

@@ -3,6 +3,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
 type Props = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin>;
@@ -12,6 +13,7 @@ type Props = {
     anchorName: string;
     rootAnchorName?: string;
     rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.7.1",
+	"version": "3.8.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -167,6 +167,9 @@
 		},
 		"platform_editor_elements_dnd_multi_select_patch_3": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_sticky_controls": {
+			"type": "boolean"
 		}
 	}
 }