@atlaskit/editor-plugin-block-controls 7.2.8 → 7.2.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.2.10
+
+### Patch Changes
+
+- [`2470543de66c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2470543de66c4) -
+  [ux] ED-29341 fix block quote drag handle is hard to trigger behind with
+  platform_editor_native_anchor_support on
+- Updated dependencies
+
+## 7.2.9
+
+### Patch Changes
+
+- [`3a41420ddfc6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a41420ddfc6e) -
+  Clean up platform_editor_drag_layout_column_into_nodes
+
 ## 7.2.8
 
 ### Patch Changes
@@ -545,7 +561,6 @@
   shared context or singletons.
 
   **HOW TO ADJUST:**
-
   - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
     any of these editor plugins.
   - Ensure the version you install matches the version required by the plugins.
@@ -2239,7 +2254,6 @@
 - [#171014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171014)
   [`6163248356c63`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6163248356c63) -
   [ED-25833] Replace the following FGs with experiment `platform_editor_advanced_layouts`
-
   - platform_editor_advanced_layouts_breakout_resizing
   - platform_editor_advanced_layouts_pre_release_1
   - platform_editor_advanced_layouts_pre_release_2

package/dist/cjs/editor-commands/move-node.js

@@ -91,7 +91,7 @@ var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSuppor
   var _$from$nodeAfter;
   var isTopLevel = $to.depth === 0;
   var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
-  var supportedCondition = (0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
+  var supportedCondition = isDragIntoNodes || isTopLevel;
   return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
 };
 

package/dist/cjs/pm-plugins/utils/validation.js

@@ -121,26 +121,24 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
     if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
       return true;
     }
-    if ((0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
-      if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
-        var contentContainsExpand = (0, _utils.findChildrenByType)(srcNode, expand).length > 0;
-        //convert expand to nestedExpand if there are expands inside the layout column
-        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
-        var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
-        if (!convertedFragment) {
-          return false;
-        }
-        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
-      }
-      if (destParentNodeType === panel) {
-        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
-      }
-      if (destParentNodeType === expand) {
-        return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
-      }
-      if (destParentNodeType === nestedExpand) {
-        return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
+    if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
+      var contentContainsExpand = (0, _utils.findChildrenByType)(srcNode, expand).length > 0;
+      //convert expand to nestedExpand if there are expands inside the layout column
+      // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+      var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+      if (!convertedFragment) {
+        return false;
       }
+      return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
+    }
+    if (destParentNodeType === panel) {
+      return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
+    }
+    if (destParentNodeType === expand) {
+      return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
+    }
+    if (destParentNodeType === nestedExpand) {
+      return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
     }
   }
 

package/dist/cjs/ui/global-styles.js

@@ -129,7 +129,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
     height: '100%',
     cursor: 'default',
     zIndex: 1
-  }), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
+  }), "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
     content: '""',
     position: 'absolute',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -144,7 +144,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
     zIndex: 1
   })), 'hr[data-drag-handler-anchor-name]', {
     overflow: 'visible'
-  }), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
+  }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
     display: 'none'
   }));
 };
@@ -175,7 +175,7 @@ var extendedDragZone = (0, _react.css)({
 });
 var extendedDragZoneNext = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': (0, _defineProperty2.default)({}, "&& > ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+  '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
     width: 'var(--ak-editor-max-container-width)',
     left: "calc((100% - var(--ak-editor-max-container-width))/2)"
   })
@@ -376,12 +376,9 @@ var withAnchorNameZindexStyle = (0, _react.css)({
 });
 var withAnchorNameZindexStyleNext = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> [data-drag-handler-anchor-name]': {
-      zIndex: 1
-    }
-  }
+  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])"), {
+    zIndex: 1
+  })
 });
 
 // This style is used to define width for block card (with datasource) that does not have layout

package/dist/es2019/editor-commands/move-node.js

@@ -84,7 +84,7 @@ const isDragLayoutColumnIntoSupportedNodes = ($from, $to) => {
   var _$from$nodeAfter;
   const isTopLevel = $to.depth === 0;
   const isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
-  const supportedCondition = fg('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
+  const supportedCondition = isDragIntoNodes || isTopLevel;
   return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
 };
 

package/dist/es2019/pm-plugins/utils/validation.js

@@ -112,26 +112,24 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
       return true;
     }
-    if (fg('platform_editor_drag_layout_column_into_nodes')) {
-      if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
-        const contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
-        //convert expand to nestedExpand if there are expands inside the layout column
-        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
-        const convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
-        if (!convertedFragment) {
-          return false;
-        }
-        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
-      }
-      if (destParentNodeType === panel) {
-        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
-      }
-      if (destParentNodeType === expand) {
-        return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
-      }
-      if (destParentNodeType === nestedExpand) {
-        return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
+    if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
+      const contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
+      //convert expand to nestedExpand if there are expands inside the layout column
+      // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+      const convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+      if (!convertedFragment) {
+        return false;
       }
+      return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
+    }
+    if (destParentNodeType === panel) {
+      return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
+    }
+    if (destParentNodeType === expand) {
+      return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
+    }
+    if (destParentNodeType === nestedExpand) {
+      return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
     }
   }
 

package/dist/es2019/ui/global-styles.js

@@ -149,8 +149,8 @@ const extendedHoverZoneNext = () => css({
       zIndex: 1
     },
     // hover zone for layout column should be placed near the top of the column (where drag handle is)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&&& ${dragHandlerAnchorSelectorNext}[data-layout-column]::after`]: {
       content: '""',
       position: 'absolute',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -171,8 +171,8 @@ const extendedHoverZoneNext = () => css({
     overflow: 'visible'
   },
   //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`[data-blocks-drag-handle-container="true"] + ${dragHandlerAnchorSelectorNext}:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}])::after`]: {
     display: 'none'
   }
 });
@@ -219,8 +219,8 @@ const extendedDragZone = css({
 const extendedDragZoneNext = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`&& > ${dragHandlerAnchorSelectorNext}::after`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`&& ${dragHandlerAnchorSelectorNext}:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}])::after`]: {
       width: 'var(--ak-editor-max-container-width)',
       left: `calc((100% - var(--ak-editor-max-container-width))/2)`
     }
@@ -447,8 +447,8 @@ const withAnchorNameZindexStyle = css({
 const withAnchorNameZindexStyleNext = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> [data-drag-handler-anchor-name]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`&& [${NODE_ANCHOR_ATTR_NAME}]:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}])`]: {
       zIndex: 1
     }
   }

package/dist/esm/editor-commands/move-node.js

@@ -85,7 +85,7 @@ var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSuppor
   var _$from$nodeAfter;
   var isTopLevel = $to.depth === 0;
   var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
-  var supportedCondition = fg('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
+  var supportedCondition = isDragIntoNodes || isTopLevel;
   return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
 };
 

package/dist/esm/pm-plugins/utils/validation.js

@@ -111,26 +111,24 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
       return true;
     }
-    if (fg('platform_editor_drag_layout_column_into_nodes')) {
-      if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
-        var contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
-        //convert expand to nestedExpand if there are expands inside the layout column
-        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
-        var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
-        if (!convertedFragment) {
-          return false;
-        }
-        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
-      }
-      if (destParentNodeType === panel) {
-        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
-      }
-      if (destParentNodeType === expand) {
-        return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
-      }
-      if (destParentNodeType === nestedExpand) {
-        return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
+    if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
+      var contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
+      //convert expand to nestedExpand if there are expands inside the layout column
+      // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+      var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+      if (!convertedFragment) {
+        return false;
       }
+      return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
+    }
+    if (destParentNodeType === panel) {
+      return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
+    }
+    if (destParentNodeType === expand) {
+      return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
+    }
+    if (destParentNodeType === nestedExpand) {
+      return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
     }
   }
 

package/dist/esm/ui/global-styles.js

@@ -122,7 +122,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
     height: '100%',
     cursor: 'default',
     zIndex: 1
-  }), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
+  }), "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
     content: '""',
     position: 'absolute',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -137,7 +137,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
     zIndex: 1
   })), 'hr[data-drag-handler-anchor-name]', {
     overflow: 'visible'
-  }), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
+  }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
     display: 'none'
   }));
 };
@@ -168,7 +168,7 @@ var extendedDragZone = css({
 });
 var extendedDragZoneNext = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': _defineProperty({}, "&& > ".concat(dragHandlerAnchorSelectorNext, "::after"), {
+  '.ProseMirror': _defineProperty({}, "&& ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
     width: 'var(--ak-editor-max-container-width)',
     left: "calc((100% - var(--ak-editor-max-container-width))/2)"
   })
@@ -369,12 +369,9 @@ var withAnchorNameZindexStyle = css({
 });
 var withAnchorNameZindexStyleNext = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> [data-drag-handler-anchor-name]': {
-      zIndex: 1
-    }
-  }
+  '.ProseMirror': _defineProperty({}, "&& [".concat(NODE_ANCHOR_ATTR_NAME, "]:not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])"), {
+    zIndex: 1
+  })
 });
 
 // This style is used to define width for block card (with datasource) that does not have layout

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.2.8",
+	"version": "7.2.10",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^15.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.10.0",
+		"@atlaskit/tmp-editor-statsig": "^13.11.0",
 		"@atlaskit/tokens": "^6.5.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.12.0",
+		"@atlaskit/editor-common": "^110.13.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -126,9 +126,6 @@
 		"platform_editor_ease_of_use_metrics": {
 			"type": "boolean"
 		},
-		"platform_editor_drag_layout_column_into_nodes": {
-			"type": "boolean"
-		},
 		"platform_editor_elements_dnd_multi_select_patch_2": {
 			"type": "boolean"
 		},