@atlaskit/editor-plugin-block-controls 3.16.1 → 3.16.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.16.2
+
+### Patch Changes
+
+- [#168359](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168359)
+  [`25fcd59865f76`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/25fcd59865f76) -
+  ED-28200 retain layout width after dragging an element to create a column
+- Updated dependencies
+
 ## 3.16.1
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _checkFragment = require("../pm-plugins/utils/check-fragment");
@@ -187,6 +188,13 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
     breakout = _ref4.breakout;
   if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
     tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
+      // should never remove breakout from previous layoutSection
+      if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        if (node.type.name === 'layoutSection') {
+          return false;
+        }
+      }
+
       // breakout doesn't exist on nested nodes
       if ((parent === null || parent === void 0 ? void 0 : parent.type.name) === 'doc' && node.marks.some(function (m) {
         return m.type === breakout;
@@ -242,6 +250,39 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
     }
   }
 };
+var getBreakoutModeAndWidth = function getBreakoutModeAndWidth(content, breakout) {
+  var findBreakoutMark = function findBreakoutMark(node) {
+    return node.marks.find(function (m) {
+      return m.type === breakout;
+    });
+  };
+  var extractBreakoutAttributes = function extractBreakoutAttributes(mark) {
+    return mark ? {
+      breakoutMode: mark.attrs.mode,
+      breakoutWidth: mark.attrs.width
+    } : null;
+  };
+  if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (content instanceof _model.Node) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    } else if (content instanceof _model.Fragment) {
+      // Find the first breakout mode in the fragment
+      for (var i = 0; i < content.childCount; i++) {
+        var child = content.child(i);
+        var breakoutMark = findBreakoutMark(child);
+        if (breakoutMark) {
+          return extractBreakoutAttributes(breakoutMark);
+        }
+      }
+    }
+  } else {
+    // Without multi-select support, we can assume source content is of type PMNode
+    if (content instanceof _model.Node) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    }
+  }
+  return null;
+};
 
 // TODO: ED-26959 - As part of platform_editor_element_drag_and_drop_multiselect clean up,
 // source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
@@ -269,7 +310,15 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
 
       // get breakout mode from destination node,
       // if not found, get from source node,
-      var breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+      var breakoutMode;
+      var breakoutWidth;
+      if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {};
+        breakoutMode = _ref8.breakoutMode;
+        breakoutWidth = _ref8.breakoutWidth;
+      } else {
+        breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+      }
 
       // 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'));
@@ -327,9 +376,16 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
           tr = (0, _removeFromSource.removeFromSource)(tr, $sourceFrom, sourceTo);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
-          breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
-            mode: breakoutMode
-          })]);
+          if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+            breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+              mode: breakoutMode,
+              width: breakoutWidth
+            })]);
+          } else {
+            breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+              mode: breakoutMode
+            })]);
+          }
           if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
             // layout created via drag and drop will always be 2 columns
             (0, _analytics2.fireInsertLayoutAnalytics)(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);

package/dist/cjs/ui/quick-insert-button.js

@@ -18,7 +18,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
-var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -296,7 +296,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
     }, (0, _react2.jsx)(_add.default, {
       label: "add",
-      color: isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+      color: isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)",
+      size: "small"
     })));
   };
   return (0, _react2.jsx)(_primitives.Box

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

@@ -3,6 +3,7 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
@@ -186,6 +187,13 @@ const removeBreakoutMarks = (tr, $from, to) => {
   } = tr.doc.type.schema.marks || {};
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
     tr.doc.nodesBetween($from.pos, to, (node, pos, parent) => {
+      // should never remove breakout from previous layoutSection
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+        if (node.type.name === 'layoutSection') {
+          return false;
+        }
+      }
+
       // breakout doesn't exist on nested nodes
       if ((parent === null || parent === void 0 ? void 0 : parent.type.name) === 'doc' && node.marks.some(m => m.type === breakout)) {
         tr.removeNodeMark(pos, breakout);
@@ -231,6 +239,33 @@ const getBreakoutMode = (content, breakout) => {
     }
   }
 };
+const getBreakoutModeAndWidth = (content, breakout) => {
+  const findBreakoutMark = node => node.marks.find(m => m.type === breakout);
+  const extractBreakoutAttributes = mark => mark ? {
+    breakoutMode: mark.attrs.mode,
+    breakoutWidth: mark.attrs.width
+  } : null;
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (content instanceof PMNode) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    } else if (content instanceof Fragment) {
+      // Find the first breakout mode in the fragment
+      for (let i = 0; i < content.childCount; i++) {
+        const child = content.child(i);
+        const breakoutMark = findBreakoutMark(child);
+        if (breakoutMark) {
+          return extractBreakoutAttributes(breakoutMark);
+        }
+      }
+    }
+  } else {
+    // Without multi-select support, we can assume source content is of type PMNode
+    if (content instanceof PMNode) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    }
+  }
+  return null;
+};
 
 // TODO: ED-26959 - As part of platform_editor_element_drag_and_drop_multiselect clean up,
 // source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
@@ -261,7 +296,16 @@ export const moveToLayout = api => (from, to, options) => ({
 
   // get breakout mode from destination node,
   // if not found, get from source node,
-  const breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+  let breakoutMode;
+  let breakoutWidth;
+  if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+    ({
+      breakoutMode,
+      breakoutWidth
+    } = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {});
+  } else {
+    breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+  }
 
   // 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'));
@@ -317,9 +361,16 @@ export const moveToLayout = api => (from, to, options) => ({
       tr = removeFromSource(tr, $sourceFrom, sourceTo);
       const mappedTo = tr.mapping.map(to);
       tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
-      breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
-        mode: breakoutMode
-      })]);
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+        breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+          mode: breakoutMode,
+          width: breakoutWidth
+        })]);
+      } else {
+        breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+          mode: breakoutMode
+        })]);
+      }
       if (fg('platform_editor_column_count_analytics')) {
         // layout created via drag and drop will always be 2 columns
         fireInsertLayoutAnalytics(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);

package/dist/es2019/ui/quick-insert-button.js

@@ -15,7 +15,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import AddIcon from '@atlaskit/icon/utility/add';
+import AddIcon from '@atlaskit/icon/core/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
@@ -291,7 +291,8 @@ export const TypeAheadControl = ({
     isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
   }, jsx(AddIcon, {
     label: "add",
-    color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)",
+    size: "small"
   })));
   return jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

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

@@ -3,6 +3,7 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
@@ -181,6 +182,13 @@ var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
     breakout = _ref4.breakout;
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
     tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
+      // should never remove breakout from previous layoutSection
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+        if (node.type.name === 'layoutSection') {
+          return false;
+        }
+      }
+
       // breakout doesn't exist on nested nodes
       if ((parent === null || parent === void 0 ? void 0 : parent.type.name) === 'doc' && node.marks.some(function (m) {
         return m.type === breakout;
@@ -236,6 +244,39 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
     }
   }
 };
+var getBreakoutModeAndWidth = function getBreakoutModeAndWidth(content, breakout) {
+  var findBreakoutMark = function findBreakoutMark(node) {
+    return node.marks.find(function (m) {
+      return m.type === breakout;
+    });
+  };
+  var extractBreakoutAttributes = function extractBreakoutAttributes(mark) {
+    return mark ? {
+      breakoutMode: mark.attrs.mode,
+      breakoutWidth: mark.attrs.width
+    } : null;
+  };
+  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (content instanceof PMNode) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    } else if (content instanceof Fragment) {
+      // Find the first breakout mode in the fragment
+      for (var i = 0; i < content.childCount; i++) {
+        var child = content.child(i);
+        var breakoutMark = findBreakoutMark(child);
+        if (breakoutMark) {
+          return extractBreakoutAttributes(breakoutMark);
+        }
+      }
+    }
+  } else {
+    // Without multi-select support, we can assume source content is of type PMNode
+    if (content instanceof PMNode) {
+      return extractBreakoutAttributes(findBreakoutMark(content));
+    }
+  }
+  return null;
+};
 
 // TODO: ED-26959 - As part of platform_editor_element_drag_and_drop_multiselect clean up,
 // source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
@@ -263,7 +304,15 @@ export var moveToLayout = function moveToLayout(api) {
 
       // get breakout mode from destination node,
       // if not found, get from source node,
-      var breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+      var breakoutMode;
+      var breakoutWidth;
+      if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+        var _ref8 = getBreakoutModeAndWidth(toNode, breakout) || getBreakoutModeAndWidth(sourceContent, breakout) || {};
+        breakoutMode = _ref8.breakoutMode;
+        breakoutWidth = _ref8.breakoutWidth;
+      } else {
+        breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
+      }
 
       // 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'));
@@ -321,9 +370,16 @@ export var moveToLayout = function moveToLayout(api) {
           tr = removeFromSource(tr, $sourceFrom, sourceTo);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
-          breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
-            mode: breakoutMode
-          })]);
+          if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
+            breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+              mode: breakoutMode,
+              width: breakoutWidth
+            })]);
+          } else {
+            breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
+              mode: breakoutMode
+            })]);
+          }
           if (fg('platform_editor_column_count_analytics')) {
             // layout created via drag and drop will always be 2 columns
             fireInsertLayoutAnalytics(tr, api, sourceNodeTypes, hasSelectedMultipleNodes, 2);

package/dist/esm/ui/quick-insert-button.js

@@ -19,7 +19,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import AddIcon from '@atlaskit/icon/utility/add';
+import AddIcon from '@atlaskit/icon/core/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
@@ -291,7 +291,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
     }, jsx(AddIcon, {
       label: "add",
-      color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+      color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)",
+      size: "small"
     })));
   };
   return jsx(Box

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.16.1",
+	"version": "3.16.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-interaction": "^2.0.0",
-		"@atlaskit/editor-plugin-metrics": "^3.4.0",
+		"@atlaskit/editor-plugin-metrics": "^3.5.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.5.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.0.0",
+		"@atlaskit/tmp-editor-statsig": "^6.1.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -200,6 +200,9 @@
 		},
 		"platform_editor_controls_patch_11": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_resizing_hello_release": {
+			"type": "boolean"
 		}
 	}
 }