@atlaskit/editor-plugin-block-controls 2.16.2 → 2.16.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.16.4
+
+### Patch Changes
+
+- [#97978](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97978)
+  [`ea88bd7273c73`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea88bd7273c73) -
+  Added Blocks Drag Init measurement analytics event
+- [#99482](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99482)
+  [`5fdd98e19255d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5fdd98e19255d) -
+  ED-26122 disable drag layout column for single column layout
+
+## 2.16.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.16.2
 
 ### Patch Changes

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

@@ -92,6 +92,10 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_3')) {
+      // Don't show drag handle for layout column in a single column layout
+      return false;
+    }
     var rootPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

package/dist/cjs/pm-plugins/main.js

@@ -10,6 +10,7 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
+var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -29,10 +30,11 @@ var _anchorUtils = require("./utils/anchor-utils");
 var _dragTargetDebug = require("./utils/drag-target-debug");
 var _transactions = require("./utils/transactions");
 var key = exports.key = new _state.PluginKey('blockControls');
+var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
 var isHTMLElement = function isHTMLElement(element) {
   return element instanceof HTMLElement;
 };
-var destroyFn = function destroyFn(api) {
+var destroyFn = function destroyFn(api, editorView) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
   var cleanupFn = [];
   if (scrollable) {
@@ -45,6 +47,24 @@ var destroyFn = function destroyFn(api) {
       var source = _ref.source;
       return source.data.type === 'element';
     },
+    onDrag: function onDrag() {
+      if ((0, _performanceMeasures.isMeasuring)(EDITOR_BLOCKS_DRAG_INIT) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        (0, _performanceMeasures.stopMeasure)(EDITOR_BLOCKS_DRAG_INIT, function (duration, startTime) {
+          var _api$analytics;
+          var state = editorView.state;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+            action: _analytics.ACTION.BLOCKS_DRAG_INIT,
+            actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration: duration,
+              startTime: startTime,
+              nodesCount: state.doc.nodeSize
+            }
+          });
+        });
+      }
+    },
     onDragStart: function onDragStart() {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', 'unset');
@@ -63,10 +83,10 @@ var destroyFn = function destroyFn(api) {
           start = _ref4.start;
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
-          var _api$analytics;
+          var _api$analytics2;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.CANCELLED,
             actionSubject: _analytics.ACTION_SUBJECT.DRAG,
@@ -105,13 +125,13 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
-    editorHeight = currentState.editorHeight,
+    isResizerResizing = currentState.isResizerResizing;
+  var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
-    isPMDragging = currentState.isPMDragging,
-    isResizerResizing = currentState.isResizerResizing;
+    isPMDragging = currentState.isPMDragging;
   var isActiveNodeDeleted = false;
 
   // Remap existing decorations and activeNode when steps exist
@@ -239,14 +259,14 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
   var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
-    decorations = currentState.decorations,
     isMenuOpen = currentState.isMenuOpen,
     editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
-    isResizerResizing = currentState.isResizerResizing,
     isDragging = currentState.isDragging,
     isPMDragging = currentState.isPMDragging;
+  var decorations = currentState.decorations,
+    isResizerResizing = currentState.isResizerResizing;
 
   // Remap existing decorations when steps exist
   if (tr.docChanged) {
@@ -524,6 +544,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_3')) {
+            (0, _performanceMeasures.startMeasure)(EDITOR_BLOCKS_DRAG_INIT);
+          }
           if (isAdvancedLayoutEnabled) {
             _activeAnchorTracker.defaultActiveAnchorTracker.reset();
           }
@@ -605,7 +628,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
       }
 
       // Start pragmatic monitors
-      var pragmaticCleanup = destroyFn(api);
+      var pragmaticCleanup = destroyFn(api, editorView);
       return {
         destroy: function destroy() {
           if (editorContentArea) {

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

@@ -87,6 +87,10 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+      // Don't show drag handle for layout column in a single column layout
+      return false;
+    }
     let rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

package/dist/es2019/pm-plugins/keymap.js

@@ -6,7 +6,7 @@ import { moveNodeViaShortcut } from '../editor-commands/move-node';
 import { showDragHandleAtSelection } from '../editor-commands/show-drag-handle';
 import { DIRECTION } from './utils/consts';
 function keymapList(api, formatMessage) {
-  let keymapList = {};
+  const keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
     bindKeymapWithCommand(
     // Ignored via go/ees005

package/dist/es2019/pm-plugins/main.js

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
+import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -21,10 +22,11 @@ import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
 import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
+const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
 const isHTMLElement = element => {
   return element instanceof HTMLElement;
 };
-const destroyFn = api => {
+const destroyFn = (api, editorView) => {
   const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
   const cleanupFn = [];
   if (scrollable) {
@@ -36,6 +38,26 @@ const destroyFn = api => {
     canMonitor: ({
       source
     }) => source.data.type === 'element',
+    onDrag: () => {
+      if (isMeasuring(EDITOR_BLOCKS_DRAG_INIT) && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        stopMeasure(EDITOR_BLOCKS_DRAG_INIT, (duration, startTime) => {
+          var _api$analytics;
+          const {
+            state
+          } = editorView;
+          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+            action: ACTION.BLOCKS_DRAG_INIT,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration,
+              startTime,
+              nodesCount: state.doc.nodeSize
+            }
+          });
+        });
+      }
+    },
     onDragStart: () => {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', 'unset');
@@ -57,10 +79,10 @@ const destroyFn = api => {
         } = source.data;
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
-          var _api$analytics;
+          var _api$analytics2;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
-          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.CANCELLED,
             actionSubject: ACTION_SUBJECT.DRAG,
@@ -100,15 +122,16 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   let {
     activeNode,
     decorations,
+    isResizerResizing
+  } = currentState;
+  const {
     editorHeight,
     editorWidthLeft,
     editorWidthRight,
     isDragging,
     isMenuOpen,
     // NOT USED
-    isPMDragging,
-    // NOT USED
-    isResizerResizing
+    isPMDragging // NOT USED
   } = currentState;
   let isActiveNodeDeleted = false;
 
@@ -237,17 +260,19 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
   const {
     isNestedEnabled
   } = flags;
-  let {
+  const {
     activeNode,
-    decorations,
     isMenuOpen,
     editorHeight,
     editorWidthLeft,
     editorWidthRight,
-    isResizerResizing,
     isDragging,
     isPMDragging
   } = currentState;
+  let {
+    decorations,
+    isResizerResizing
+  } = currentState;
 
   // Remap existing decorations when steps exist
   if (tr.docChanged) {
@@ -501,6 +526,9 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
         },
         dragstart(view) {
           var _anchorRectCache;
+          if (fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+            startMeasure(EDITOR_BLOCKS_DRAG_INIT);
+          }
           if (isAdvancedLayoutEnabled) {
             defaultActiveAnchorTracker.reset();
           }
@@ -585,7 +613,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
       }
 
       // Start pragmatic monitors
-      const pragmaticCleanup = destroyFn(api);
+      const pragmaticCleanup = destroyFn(api, editorView);
       return {
         destroy() {
           if (editorContentArea) {

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

@@ -86,6 +86,10 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+      // Don't show drag handle for layout column in a single column layout
+      return false;
+    }
     var rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

package/dist/esm/pm-plugins/main.js

@@ -3,6 +3,7 @@ import rafSchedule from 'raf-schd';
 import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
+import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -22,10 +23,11 @@ import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
 import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
 import { getTrMetadata } from './utils/transactions';
 export var key = new PluginKey('blockControls');
+var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
 var isHTMLElement = function isHTMLElement(element) {
   return element instanceof HTMLElement;
 };
-var destroyFn = function destroyFn(api) {
+var destroyFn = function destroyFn(api, editorView) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
   var cleanupFn = [];
   if (scrollable) {
@@ -38,6 +40,24 @@ var destroyFn = function destroyFn(api) {
       var source = _ref.source;
       return source.data.type === 'element';
     },
+    onDrag: function onDrag() {
+      if (isMeasuring(EDITOR_BLOCKS_DRAG_INIT) && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+        stopMeasure(EDITOR_BLOCKS_DRAG_INIT, function (duration, startTime) {
+          var _api$analytics;
+          var state = editorView.state;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+            action: ACTION.BLOCKS_DRAG_INIT,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration: duration,
+              startTime: startTime,
+              nodesCount: state.doc.nodeSize
+            }
+          });
+        });
+      }
+    },
     onDragStart: function onDragStart() {
       if (isHTMLElement(scrollable)) {
         scrollable.style.setProperty('scroll-behavior', 'unset');
@@ -56,10 +76,10 @@ var destroyFn = function destroyFn(api) {
           start = _ref4.start;
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
-          var _api$analytics;
+          var _api$analytics2;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             eventType: EVENT_TYPE.UI,
             action: ACTION.CANCELLED,
             actionSubject: ACTION_SUBJECT.DRAG,
@@ -98,13 +118,13 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
-    editorHeight = currentState.editorHeight,
+    isResizerResizing = currentState.isResizerResizing;
+  var editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
-    isPMDragging = currentState.isPMDragging,
-    isResizerResizing = currentState.isResizerResizing;
+    isPMDragging = currentState.isPMDragging;
   var isActiveNodeDeleted = false;
 
   // Remap existing decorations and activeNode when steps exist
@@ -232,14 +252,14 @@ export var oldApply = function oldApply(api, formatMessage, tr, currentState, ol
   var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
-    decorations = currentState.decorations,
     isMenuOpen = currentState.isMenuOpen,
     editorHeight = currentState.editorHeight,
     editorWidthLeft = currentState.editorWidthLeft,
     editorWidthRight = currentState.editorWidthRight,
-    isResizerResizing = currentState.isResizerResizing,
     isDragging = currentState.isDragging,
     isPMDragging = currentState.isPMDragging;
+  var decorations = currentState.decorations,
+    isResizerResizing = currentState.isResizerResizing;
 
   // Remap existing decorations when steps exist
   if (tr.docChanged) {
@@ -517,6 +537,9 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         },
         dragstart: function dragstart(view) {
           var _anchorRectCache;
+          if (fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
+            startMeasure(EDITOR_BLOCKS_DRAG_INIT);
+          }
           if (isAdvancedLayoutEnabled) {
             defaultActiveAnchorTracker.reset();
           }
@@ -598,7 +621,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
       }
 
       // Start pragmatic monitors
-      var pragmaticCleanup = destroyFn(api);
+      var pragmaticCleanup = destroyFn(api, editorView);
       return {
         destroy: function destroy() {
           if (editorContentArea) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.16.2",
+	"version": "2.16.4",
 	"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": "^97.2.0",
+		"@atlaskit/editor-common": "^98.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.29.0",
+		"@atlaskit/tmp-editor-statsig": "^2.31.0",
 		"@atlaskit/tokens": "^2.5.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -168,6 +168,9 @@
 		},
 		"platform_editor_advanced_layouts_post_fix_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_post_fix_patch_3": {
+			"type": "boolean"
 		}
 	}
 }