@atlaskit/editor-plugin-block-controls 2.13.27 → 2.13.28

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.28
+
+### Patch Changes
+
+- [#170667](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170667)
+  [`4932e429b1256`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4932e429b1256) -
+  [ED-25679] Fix inline drop target positioning for block card, embeded card and chart extension
+  with breakout layout
+
 ## 2.13.27
 
 ### Patch Changes

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

@@ -202,8 +202,23 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
     }
   }
 });
+
+// This style is used to define width for block card (with datasource) that does not have layout
+// In full-width editor, block card has width of full-width layout
+// In fixed-width editor, block card has width of wide layout
+var blockCardWithoutLayout = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.fabric-editor--full-width-mode .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    '--ak-editor-block-card-width': "min(calc(100cqw - ".concat(_editorSharedStyles.akEditorBreakoutPadding, "px), 1800px)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
+    styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/cjs/ui/inline-drop-target.js

@@ -8,6 +8,7 @@ exports.InlineDropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
@@ -51,9 +52,11 @@ var defaultNodeDimension = {
   bottom: 'unset'
 };
 var getWidthOffset = function getWidthOffset(node, width, position) {
-  if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
+  if (['mediaSingle', 'table', 'embedCard'].includes(node.type.name) ||
+  // block card (without datasource) is positioned left-aligned, hence share the same logic as align-start
+  node.type.name === 'blockCard' && !node.attrs.datasource) {
     var isLeftPosition = position === 'left';
-    if (node.attrs.layout === 'align-start') {
+    if (node.attrs.layout === 'align-start' || node.type.name === 'blockCard') {
       return isLeftPosition ? "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     } else if ((node === null || node === void 0 ? void 0 : node.attrs.layout) === 'align-end') {
       return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
@@ -89,11 +92,20 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
     }
     var innerContainerWidth = null;
     var targetAnchorName = anchorName;
-    if (['blockCard', 'embedCard'].includes(nextNode.type.name)) {
+    if (['blockCard', 'embedCard', 'extension'].includes(nextNode.type.name)) {
       if (nextNode.attrs.layout === 'wide') {
         innerContainerWidth = "max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))";
       } else if (nextNode.attrs.layout === 'full-width') {
-        innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
+        innerContainerWidth = "min(calc(100cqw - ".concat(_editorSharedStyles.akEditorBreakoutPadding, "px), 1800px)");
+      }
+      if (nextNode.type.name === 'blockCard' && !nextNode.attrs.layout && nextNode.attrs.datasource) {
+        // block card with sourceNode and without layout has different width in full-width vs fixed-width editor
+        // Hence we need to set it based on editor mode
+        innerContainerWidth = 'var(--ak-editor-block-card-width)';
+      }
+      if (nextNode.type.name === 'embedCard' && ['center', 'align-start', 'align-end'].includes(nextNode.attrs.layout)) {
+        var percentageWidth = ((parseFloat(nextNode.attrs.width) || 100) / 100).toFixed(2);
+        innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
       var tableWidthAnchor = (0, _decorationsCommon.getNodeAnchor)(nextNode.firstChild);

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

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
-import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
@@ -244,8 +244,23 @@ const withAnchorNameZindexNestedStyle = css({
     }
   }
 });
+
+// This style is used to define width for block card (with datasource) that does not have layout
+// In full-width editor, block card has width of full-width layout
+// In fixed-width editor, block card has width of wide layout
+const blockCardWithoutLayout = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.fabric-editor--full-width-mode .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    '--ak-editor-block-card-width': `min(calc(100cqw - ${akEditorBreakoutPadding}px), 1800px)`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
+  }
+});
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
+    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/es2019/ui/inline-drop-target.js

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
+import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
@@ -42,9 +43,11 @@ const defaultNodeDimension = {
   bottom: 'unset'
 };
 const getWidthOffset = (node, width, position) => {
-  if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
+  if (['mediaSingle', 'table', 'embedCard'].includes(node.type.name) ||
+  // block card (without datasource) is positioned left-aligned, hence share the same logic as align-start
+  node.type.name === 'blockCard' && !node.attrs.datasource) {
     const isLeftPosition = position === 'left';
-    if (node.attrs.layout === 'align-start') {
+    if (node.attrs.layout === 'align-start' || node.type.name === 'blockCard') {
       return isLeftPosition ? `-0.5*(var(--ak-editor--line-length) - ${width})` : `0.5*(var(--ak-editor--line-length) - ${width})`;
     } else if ((node === null || node === void 0 ? void 0 : node.attrs.layout) === 'align-end') {
       return isLeftPosition ? `0.5*(var(--ak-editor--line-length) - ${width})` : `-0.5*(var(--ak-editor--line-length) - ${width})`;
@@ -76,11 +79,20 @@ export const InlineDropTarget = ({
     }
     let innerContainerWidth = null;
     let targetAnchorName = anchorName;
-    if (['blockCard', 'embedCard'].includes(nextNode.type.name)) {
+    if (['blockCard', 'embedCard', 'extension'].includes(nextNode.type.name)) {
       if (nextNode.attrs.layout === 'wide') {
         innerContainerWidth = `max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))`;
       } else if (nextNode.attrs.layout === 'full-width') {
-        innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
+        innerContainerWidth = `min(calc(100cqw - ${akEditorBreakoutPadding}px), 1800px)`;
+      }
+      if (nextNode.type.name === 'blockCard' && !nextNode.attrs.layout && nextNode.attrs.datasource) {
+        // block card with sourceNode and without layout has different width in full-width vs fixed-width editor
+        // Hence we need to set it based on editor mode
+        innerContainerWidth = 'var(--ak-editor-block-card-width)';
+      }
+      if (nextNode.type.name === 'embedCard' && ['center', 'align-start', 'align-end'].includes(nextNode.attrs.layout)) {
+        const percentageWidth = ((parseFloat(nextNode.attrs.width) || 100) / 100).toFixed(2);
+        innerContainerWidth = `calc(var(--ak-editor--line-length) * ${percentageWidth})`;
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
       const tableWidthAnchor = getNodeAnchor(nextNode.firstChild);

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

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
-import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
@@ -195,8 +195,23 @@ var withAnchorNameZindexNestedStyle = css({
     }
   }
 });
+
+// This style is used to define width for block card (with datasource) that does not have layout
+// In full-width editor, block card has width of full-width layout
+// In fixed-width editor, block card has width of wide layout
+var blockCardWithoutLayout = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-content-area.fabric-editor--full-width-mode .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    '--ak-editor-block-card-width': "min(calc(100cqw - ".concat(akEditorBreakoutPadding, "px), 1800px)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ak-editor-content-area .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
+    '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
+    styles: [globalStyles(), editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
   });
 };

package/dist/esm/ui/inline-drop-target.js

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
+import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
@@ -43,9 +44,11 @@ var defaultNodeDimension = {
   bottom: 'unset'
 };
 var getWidthOffset = function getWidthOffset(node, width, position) {
-  if (node.type.name === 'mediaSingle' || node.type.name === 'table') {
+  if (['mediaSingle', 'table', 'embedCard'].includes(node.type.name) ||
+  // block card (without datasource) is positioned left-aligned, hence share the same logic as align-start
+  node.type.name === 'blockCard' && !node.attrs.datasource) {
     var isLeftPosition = position === 'left';
-    if (node.attrs.layout === 'align-start') {
+    if (node.attrs.layout === 'align-start' || node.type.name === 'blockCard') {
       return isLeftPosition ? "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
     } else if ((node === null || node === void 0 ? void 0 : node.attrs.layout) === 'align-end') {
       return isLeftPosition ? "0.5*(var(--ak-editor--line-length) - ".concat(width, ")") : "-0.5*(var(--ak-editor--line-length) - ".concat(width, ")");
@@ -81,11 +84,20 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     }
     var innerContainerWidth = null;
     var targetAnchorName = anchorName;
-    if (['blockCard', 'embedCard'].includes(nextNode.type.name)) {
+    if (['blockCard', 'embedCard', 'extension'].includes(nextNode.type.name)) {
       if (nextNode.attrs.layout === 'wide') {
         innerContainerWidth = "max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))";
       } else if (nextNode.attrs.layout === 'full-width') {
-        innerContainerWidth = 'max(calc(var(--ak-editor-max-container-width) - var(--ak-editor--default-gutter-padding) * 2), var(--ak-editor--line-length))';
+        innerContainerWidth = "min(calc(100cqw - ".concat(akEditorBreakoutPadding, "px), 1800px)");
+      }
+      if (nextNode.type.name === 'blockCard' && !nextNode.attrs.layout && nextNode.attrs.datasource) {
+        // block card with sourceNode and without layout has different width in full-width vs fixed-width editor
+        // Hence we need to set it based on editor mode
+        innerContainerWidth = 'var(--ak-editor-block-card-width)';
+      }
+      if (nextNode.type.name === 'embedCard' && ['center', 'align-start', 'align-end'].includes(nextNode.attrs.layout)) {
+        var percentageWidth = ((parseFloat(nextNode.attrs.width) || 100) / 100).toFixed(2);
+        innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
       var tableWidthAnchor = getNodeAnchor(nextNode.firstChild);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.27",
+	"version": "2.13.28",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^95.7.0",
+		"@atlaskit/editor-common": "^95.9.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,15 +41,15 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.26.0",
+		"@atlaskit/icon": "^22.27.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.21.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",