@atlaskit/editor-plugin-block-controls 7.5.2 → 7.5.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.5.4
+
+### Patch Changes
+
+- [`13e78771cb389`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13e78771cb389) -
+  ED-29600 gate unnecessary decoration operations in apply function
+- Updated dependencies
+
+## 7.5.3
+
+### Patch Changes
+
+- [`3b9ebe635ab0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b9ebe635ab0a) -
+  Cleanup of platform_editor_draghandle_safari_scroll_fix
+
 ## 7.5.2
 
 ### Patch Changes

package/dist/cjs/editor-commands/move-to-layout.js

@@ -321,7 +321,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       }
 
       // we don't want to remove marks when moving/re-ordering layoutSection
-      var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_3'));
+      var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true));
       var fromContentBeforeBreakoutMarksRemoved = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
 
       // remove breakout from source content

package/dist/cjs/pm-plugins/main.js

@@ -355,7 +355,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   // Re-create node decorations
   var isDecSetEmpty = decorations === _view.DecorationSet.empty;
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
-  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
+  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
+  // Skip expensive anchor node decoration recalculations when native anchor support is enabled
+  !((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('editor_native_anchor_remove_decoration_in_apply'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, from, to);

package/dist/cjs/ui/drag-handle.js

@@ -441,20 +441,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     });
     view.focus();
   }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
-
-  // TODO: ED-26959 - This needs to be investigated further. Drag preview generation is not always working
-  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
-  // but ensures the preview is generated correctly.
-  var handleMouseDown = (0, _react.useCallback)(function () {
-    if ((0, _experiments.editorExperiment)('advanced_layouts', true) && !(0, _platformFeatureFlags.fg)('platform_editor_draghandle_safari_scroll_fix')) {
-      var _buttonRef$current;
-      // prevent native drag and drop.
-      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
-      if (!isLayoutColumn) {
-        return undefined;
-      }
-    }
-  }, [isLayoutColumn]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -847,8 +833,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
-        var _buttonRef$current2;
-        (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 || _buttonRef$current2.focus();
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
       });
       return function () {
         cancelAnimationFrame(id);
@@ -972,7 +958,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         ,
         style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
         onClick: handleOnClick,
-        onMouseDown: handleMouseDown,
         onKeyDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,

package/dist/es2019/editor-commands/move-to-layout.js

@@ -308,7 +308,7 @@ export const moveToLayout = api => (from, to, options) => ({
   }
 
   // we don't want to remove marks when moving/re-ordering layoutSection
-  const shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && fg('platform_editor_elements_dnd_multi_select_patch_3'));
+  const shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true));
   const fromContentBeforeBreakoutMarksRemoved = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
 
   // remove breakout from source content

package/dist/es2019/pm-plugins/main.js

@@ -354,7 +354,9 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   // Re-create node decorations
   const isDecSetEmpty = decorations === DecorationSet.empty;
   const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
-  const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
+  const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
+  // Skip expensive anchor node decoration recalculations when native anchor support is enabled
+  !(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
   let isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     const oldNodeDecs = findNodeDecs(newState, decorations, from, to);

package/dist/es2019/ui/drag-handle.js

@@ -418,20 +418,6 @@ export const DragHandle = ({
     });
     view.focus();
   }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
-
-  // TODO: ED-26959 - This needs to be investigated further. Drag preview generation is not always working
-  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
-  // but ensures the preview is generated correctly.
-  const handleMouseDown = useCallback(() => {
-    if (editorExperiment('advanced_layouts', true) && !fg('platform_editor_draghandle_safari_scroll_fix')) {
-      var _buttonRef$current;
-      // prevent native drag and drop.
-      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-      if (!isLayoutColumn) {
-        return undefined;
-      }
-    }
-  }, [isLayoutColumn]);
   const handleKeyDown = useCallback(e => {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -833,8 +819,8 @@ export const DragHandle = ({
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       const id = requestAnimationFrame(() => {
-        var _buttonRef$current2;
-        (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.focus();
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
       });
       return () => {
         cancelAnimationFrame(id);
@@ -957,7 +943,6 @@ export const DragHandle = ({
     ,
     style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
     onClick: handleOnClick,
-    onMouseDown: handleMouseDown,
     onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,

package/dist/esm/editor-commands/move-to-layout.js

@@ -315,7 +315,7 @@ export var moveToLayout = function moveToLayout(api) {
       }
 
       // we don't want to remove marks when moving/re-ordering layoutSection
-      var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && fg('platform_editor_elements_dnd_multi_select_patch_3'));
+      var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true));
       var fromContentBeforeBreakoutMarksRemoved = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
 
       // remove breakout from source content

package/dist/esm/pm-plugins/main.js

@@ -348,7 +348,9 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   // Re-create node decorations
   var isDecSetEmpty = decorations === DecorationSet.empty;
   var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
-  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
+  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging)) &&
+  // Skip expensive anchor node decoration recalculations when native anchor support is enabled
+  !(expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('editor_native_anchor_remove_decoration_in_apply'));
   var isActiveNodeModified = false;
   if (api && shouldRedrawNodeDecs) {
     var oldNodeDecs = findNodeDecs(newState, decorations, from, to);

package/dist/esm/ui/drag-handle.js

@@ -438,20 +438,6 @@ export var DragHandle = function DragHandle(_ref) {
     });
     view.focus();
   }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
-
-  // TODO: ED-26959 - This needs to be investigated further. Drag preview generation is not always working
-  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
-  // but ensures the preview is generated correctly.
-  var handleMouseDown = useCallback(function () {
-    if (editorExperiment('advanced_layouts', true) && !fg('platform_editor_draghandle_safari_scroll_fix')) {
-      var _buttonRef$current;
-      // prevent native drag and drop.
-      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
-      if (!isLayoutColumn) {
-        return undefined;
-      }
-    }
-  }, [isLayoutColumn]);
   var handleKeyDown = useCallback(function (e) {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
@@ -844,8 +830,8 @@ export var DragHandle = function DragHandle(_ref) {
   useEffect(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
-        var _buttonRef$current2;
-        (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 || _buttonRef$current2.focus();
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
       });
       return function () {
         cancelAnimationFrame(id);
@@ -969,7 +955,6 @@ export var DragHandle = function DragHandle(_ref) {
         ,
         style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
         onClick: handleOnClick,
-        onMouseDown: handleMouseDown,
         onKeyDown: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? handleKeyDownNew : handleKeyDown
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.5.2",
+	"version": "7.5.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,8 +53,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.25.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.29.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -65,7 +65,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.20.0",
+		"@atlaskit/editor-common": "^110.22.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -127,9 +127,6 @@
 		"platform_editor_multi_body_extension_extensibility": {
 			"type": "boolean"
 		},
-		"platform_editor_elements_dnd_multi_select_patch_3": {
-			"type": "boolean"
-		},
 		"platform_editor_drag_and_drop_perf_analytics": {
 			"type": "boolean"
 		},
@@ -148,10 +145,10 @@
 		"platform_editor_block_menu_patch_1": {
 			"type": "boolean"
 		},
-		"platform_editor_breakout_resizing_widget_fix": {
+		"editor_native_anchor_remove_decoration_in_apply": {
 			"type": "boolean"
 		},
-		"platform_editor_draghandle_safari_scroll_fix": {
+		"platform_editor_breakout_resizing_widget_fix": {
 			"type": "boolean"
 		},
 		"platform_editor_content_mode_button_mvp": {