@atlaskit/editor-plugin-block-controls 2.1.3 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.1.4
+
+### Patch Changes
+
+- [#144925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144925)
+  [`9faf9ff89ad37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9faf9ff89ad37) -
+  ED-24822 - Add padding to panels with no icon and unhide drag handle in first bodied node
+
 ## 2.1.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -67,7 +67,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
 
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? !parentElement.classList.contains('ak-editor-panel__no-icon') : true) && (index === 0 || firstChildIsWidget && index === 1)) {
         return false;
       }
     } else {

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

@@ -111,6 +111,7 @@ var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
+var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleSelectors, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
@@ -137,6 +138,10 @@ var globalStyles = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0,
     marginTop: '0 !important'
   }
 });
+var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginTop: '0 !important'
+}));
 var withDeleteLinesStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "p[data-drag-handler-anchor-name] ".concat(dragHandleContainer), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
@@ -155,6 +160,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined]
+    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined]
   });
 };

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -62,7 +62,7 @@ export const handleMouseOver = (view, event, api) => {
 
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       const firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 ? void 0 : (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && (fg('platform_editor_element_dnd_nested_fix_patch_1') ? !parentElement.classList.contains('ak-editor-panel__no-icon') : true) && (index === 0 || firstChildIsWidget && index === 1)) {
         return false;
       }
     } else {

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

@@ -102,6 +102,7 @@ const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 const withInlineNodeStyleSelectors = [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${indentatedParagraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`].join(', ');
+const dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 const withInlineNodeStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [withInlineNodeStyleSelectors]: {
@@ -134,6 +135,13 @@ const globalStyles = editorExperiment('nested-dnd', true) ? css({
     marginTop: '0 !important'
   }
 });
+const withDividerInPanelStyleFix = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`${dividerBodiedInCustomPanelWithNoIconSelector}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
+  }
+});
 const withDeleteLinesStyleFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`p[data-drag-handler-anchor-name] ${dragHandleContainer}`]: {
@@ -158,6 +166,6 @@ export const GlobalStylesWrapper = () => {
   return jsx(Global, {
     styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined]
   });
 };

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -61,7 +61,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
 
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && (fg('platform_editor_element_dnd_nested_fix_patch_1') ? !parentElement.classList.contains('ak-editor-panel__no-icon') : true) && (index === 0 || firstChildIsWidget && index === 1)) {
         return false;
       }
     } else {

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

@@ -103,6 +103,7 @@ var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
 var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
 var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
+var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
@@ -129,6 +130,10 @@ var globalStyles = editorExperiment('nested-dnd', true) ? css({
     marginTop: '0 !important'
   }
 });
+var withDividerInPanelStyleFix = css(_defineProperty({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  marginTop: '0 !important'
+}));
 var withDeleteLinesStyleFix = css(_defineProperty({}, "p[data-drag-handler-anchor-name] ".concat(dragHandleContainer), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   display: 'none !important'
@@ -147,6 +152,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
     styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.1.3",
+	"version": "2.1.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -135,6 +135,9 @@
 		},
 		"platform_editor_empty_line_prompt_delay": {
 			"type": "boolean"
+		},
+		"platform_editor_element_dnd_nested_fix_patch_1": {
+			"type": "boolean"
 		}
 	}
 }