@atlaskit/editor-plugin-block-controls 3.3.16 → 3.3.17

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.3.17
+
+### Patch Changes
+
+- [#128300](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128300)
+  [`b26295480eb23`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b26295480eb23) -
+  Always add left offset for quick insert to avoid it flicking in and out
+- Updated dependencies
+
 ## 3.3.16
 
 ### Patch Changes

package/dist/cjs/ui/consts.js

@@ -4,10 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dropTargetMarginMap;
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
@@ -41,9 +40,10 @@ var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
   width: QUICK_INSERT_WIDTH,
   height: QUICK_INSERT_HEIGHT
 };
+var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
-  if (nodeType === 'layoutSection' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_2')) {
+  if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_DEFAULT_GAP + 20;
   }
   if (parentNodeType && parentNodeType !== 'doc') {

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

@@ -58,8 +58,6 @@ var TypeAheadControl = exports.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;
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
@@ -97,18 +95,17 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
     if (supportsAnchor) {
       return {
-        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + ").concat(neighboringWidthOffset, ")"),
+        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
         top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
       };
     }
     return {
-      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")"),
+      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
       top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
     };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName]);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/es2019/ui/consts.js

@@ -1,5 +1,4 @@
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
@@ -32,9 +31,10 @@ export const QUICK_INSERT_DIMENSIONS = {
   width: QUICK_INSERT_WIDTH,
   height: QUICK_INSERT_HEIGHT
 };
+export const QUICK_INSERT_LEFT_OFFSET = 16;
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export const dragHandleGap = (nodeType, parentNodeType) => {
-  if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_post_fix_patch_2')) {
+  if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_DEFAULT_GAP + 20;
   }
   if (parentNodeType && parentNodeType !== 'doc') {

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

@@ -9,7 +9,7 @@ import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
 import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
 const buttonStyles = xcss({
@@ -47,8 +47,6 @@ export const TypeAheadControl = ({
   api,
   formatMessage,
   getPos,
-  nodeType,
-  anchorName,
   rootAnchorName,
   rootNodeType
 }) => {
@@ -84,18 +82,17 @@ export const TypeAheadControl = ({
       }
     }
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    const neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
     if (supportsAnchor) {
       return {
-        left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})` : `calc(anchor(${rootAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + ${neighboringWidthOffset})`,
+        left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${rootAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
         top: `calc(anchor(${rootAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`
       };
     }
     return {
-      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + ${neighboringWidthOffset})`,
+      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)`,
       top: getTopPosition(dom, rootNodeType)
     };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName]);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
   useEffect(() => {
     let cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/esm/ui/consts.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _dropTargetMarginMap;
 import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
@@ -34,9 +33,10 @@ export var QUICK_INSERT_DIMENSIONS = {
   width: QUICK_INSERT_WIDTH,
   height: QUICK_INSERT_HEIGHT
 };
+export var QUICK_INSERT_LEFT_OFFSET = 16;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
-  if (nodeType === 'layoutSection' && fg('platform_editor_advanced_layouts_post_fix_patch_2')) {
+  if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_DEFAULT_GAP + 20;
   }
   if (parentNodeType && parentNodeType !== 'doc') {

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

@@ -10,7 +10,7 @@ import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
 import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
 var buttonStyles = xcss({
@@ -48,8 +48,6 @@ 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;
   var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
@@ -87,18 +85,17 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
     if (supportsAnchor) {
       return {
-        left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + ").concat(neighboringWidthOffset, ")"),
+        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)")
       };
     }
     return {
-      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(neighboringWidthOffset, ")") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(neighboringWidthOffset, ")"),
+      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, anchorName]);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
   useEffect(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {

package/dist/types/ui/consts.d.ts

@@ -28,6 +28,7 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     width: number;
     height: number;
 };
+export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

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

@@ -13,5 +13,5 @@ type Props = {
     rootAnchorName?: string;
     rootNodeType: string;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/consts.d.ts

@@ -28,6 +28,7 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     width: number;
     height: number;
 };
+export declare const QUICK_INSERT_LEFT_OFFSET = 16;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

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

@@ -13,5 +13,5 @@ type Props = {
     rootAnchorName?: string;
     rootNodeType: string;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.3.16",
+	"version": "3.3.17",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -122,9 +122,6 @@
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		},
-		"platform_editor_advanced_layouts_post_fix_patch_2": {
-			"type": "boolean"
-		},
 		"platform_editor_advanced_layouts_post_fix_patch_3": {
 			"type": "boolean"
 		},