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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.1.5
+
+### Patch Changes
+
+- [#144914](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144914)
+  [`5c53f0507a346`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c53f0507a346) -
+  ED-25125 Add patch 2 Fg
+- [#142749](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142749)
+  [`273fc31422520`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/273fc31422520) -
+  ED-25019 fix wrapped image z index issue
+- Updated dependencies
+
+## 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/decorations.js

@@ -15,6 +15,7 @@ var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
@@ -137,6 +138,14 @@ var ObjHash = /*#__PURE__*/function () {
   return ObjHash;
 }();
 (0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
+var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return IGNORE_NODES.includes(node.type.name);
+};
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
@@ -156,7 +165,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       if (node.isInline) {
         return false;
       }
-      if (IGNORE_NODES.includes(node.type.name)) {
+      if (shouldIgnoreNode(node)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -52,6 +52,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
 
     // We want to exlude handles from showing for wrapped nodes
+    // TODO We should be able remove these check if we decided to
+    // go we not decoration for wrapped image solution.
     if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24227')) {
       return false;
     }
@@ -67,7 +69,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/pm-plugins/main.js

@@ -99,6 +99,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
   var isNestedEnabled = (0, _experiments.editorExperiment)('nested-dnd', true, {
     exposure: true
   });
+  if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2')) {
+    // TODO: Remove this once FG is used in code
+  }
   return new _safePlugin.SafePlugin({
     key: key,
     state: {

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/decorations.js

@@ -6,6 +6,7 @@ import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
@@ -116,6 +117,14 @@ class ObjHash {
   }
 }
 _defineProperty(ObjHash, "caching", new WeakMap());
+const shouldIgnoreNode = node => {
+  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return IGNORE_NODES.includes(node.type.name);
+};
 export const nodeDecorations = newState => {
   const decs = [];
   newState.doc.descendants((node, pos, _parent, index) => {
@@ -134,7 +143,7 @@ export const nodeDecorations = newState => {
       if (node.isInline) {
         return false;
       }
-      if (IGNORE_NODES.includes(node.type.name)) {
+      if (shouldIgnoreNode(node)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -47,6 +47,8 @@ export const handleMouseOver = (view, event, api) => {
     }
 
     // We want to exlude handles from showing for wrapped nodes
+    // TODO We should be able remove these check if we decided to
+    // go we not decoration for wrapped image solution.
     if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
       return false;
     }
@@ -62,7 +64,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/pm-plugins/main.js

@@ -94,6 +94,9 @@ export const createPlugin = (api, getIntl) => {
   const isNestedEnabled = editorExperiment('nested-dnd', true, {
     exposure: true
   });
+  if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
+    // TODO: Remove this once FG is used in code
+  }
   return new SafePlugin({
     key,
     state: {

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/decorations.js

@@ -8,6 +8,7 @@ import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
@@ -130,6 +131,14 @@ var ObjHash = /*#__PURE__*/function () {
   return ObjHash;
 }();
 _defineProperty(ObjHash, "caching", new WeakMap());
+var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return IGNORE_NODES.includes(node.type.name);
+};
 export var nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
@@ -149,7 +158,7 @@ export var nodeDecorations = function nodeDecorations(newState) {
       if (node.isInline) {
         return false;
       }
-      if (IGNORE_NODES.includes(node.type.name)) {
+      if (shouldIgnoreNode(node)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -46,6 +46,8 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
 
     // We want to exlude handles from showing for wrapped nodes
+    // TODO We should be able remove these check if we decided to
+    // go we not decoration for wrapped image solution.
     if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
       return false;
     }
@@ -61,7 +63,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/pm-plugins/main.js

@@ -92,6 +92,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
   var isNestedEnabled = editorExperiment('nested-dnd', true, {
     exposure: true
   });
+  if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
+    // TODO: Remove this once FG is used in code
+  }
   return new SafePlugin({
     key: key,
     state: {

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.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/editor-common": "^91.0.0",
+		"@atlaskit/editor-common": "^91.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^1.4.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^2.13.0",
+		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -135,6 +135,12 @@
 		},
 		"platform_editor_empty_line_prompt_delay": {
 			"type": "boolean"
+		},
+		"platform_editor_element_dnd_nested_fix_patch_1": {
+			"type": "boolean"
+		},
+		"platform_editor_element_dnd_nested_fix_patch_2": {
+			"type": "boolean"
 		}
 	}
 }