@atlaskit/editor-plugin-block-controls 2.26.0 → 2.26.2

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

@@ -4,9 +4,9 @@ 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-fragment';
 import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
-import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics } from '../pm-plugins/utils/fire-analytics';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
 import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
@@ -42,9 +42,14 @@ const createNewLayout = (schema, layoutContents) => {
 const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) => {
   const isSameLayout = isInSameLayout($originalFrom, $originalTo);
   let sourceContentEndPos = -1;
-  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+  const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+  let sourceNodeTypes, hasSelectedMultipleNodes;
+  if (isMultiSelect) {
     if (sourceContent instanceof Fragment) {
       sourceContentEndPos = from + sourceContent.size;
+      const attributes = getMultiSelectAnalyticsAttributes(tr, from, sourceContentEndPos);
+      hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+      sourceNodeTypes = attributes.nodeTypes;
     }
   } else {
     if (sourceContent instanceof PMNode) {
@@ -63,7 +68,7 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
     if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
-    attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api);
+    attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
   } else if (toLayout.childCount < maxLayoutColumnSupported()) {
     var _$originalFrom$nodeAf2;
     if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
@@ -74,7 +79,7 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
       const mappedFrom = tr.mapping.map(from);
       removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
     }
-    attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api);
+    attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
   }
   return tr;
 };
@@ -160,7 +165,7 @@ const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-const canMoveToLayout = (api, from, to, tr) => {
+const canMoveToLayout = (api, from, to, tr, moveNodeAtCursorPos) => {
   if (from === to) {
     return;
   }
@@ -192,12 +197,12 @@ const canMoveToLayout = (api, from, to, tr) => {
   let sourceContent = $from.nodeAfter;
   let sourceFrom = from;
   let sourceTo = from + sourceContent.nodeSize;
-  if (isMultiSelect) {
+  if (isMultiSelect && !moveNodeAtCursorPos) {
     const {
       anchor,
       head
     } = getMultiSelectionIfPosInside(api, from);
-    if (anchor && head) {
+    if (anchor !== undefined && head !== undefined) {
       sourceFrom = Math.min(anchor, head);
       sourceTo = Math.max(anchor, head);
       sourceContent = tr.doc.slice(sourceFrom, sourceTo).content;
@@ -249,7 +254,7 @@ const getBreakoutMode = (content, breakout) => {
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
     if (content instanceof PMNode) {
       var _content$marks$find;
-      return (_content$marks$find = content.marks.find(m => m.type === breakout)) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs;
+      return (_content$marks$find = content.marks.find(m => m.type === breakout)) === null || _content$marks$find === void 0 ? void 0 : _content$marks$find.attrs.mode;
     } else if (content instanceof Fragment) {
       // Find the first breakout mode in the fragment
       let firstBreakoutMode;
@@ -280,7 +285,7 @@ export const moveToLayout = api => (from, to, options) => ({
   if (!api) {
     return tr;
   }
-  const canMove = canMoveToLayout(api, from, to, tr);
+  const canMove = canMoveToLayout(api, from, to, tr, options === null || options === void 0 ? void 0 : options.moveNodeAtCursorPos);
   if (!canMove) {
     return tr;
   }
@@ -308,6 +313,7 @@ export const moveToLayout = api => (from, to, options) => ({
   if (!fromContentWithoutBreakout) {
     return tr;
   }
+  const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
   if (toNode.type === layoutSection) {
     const toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
     return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
@@ -325,7 +331,7 @@ export const moveToLayout = api => (from, to, options) => ({
       // resolve again the source node after node updated (remove breakout marks)
       toNodeWithoutBreakout = tr.doc.resolve(to).nodeAfter || toNode;
     }
-    if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+    if (isMultiSelect) {
       if (isFragmentOfType(fromContentWithoutBreakout, 'layoutColumn') && fromContentWithoutBreakout.firstChild) {
         fromContentWithoutBreakout = fromContentWithoutBreakout.firstChild.content;
       }
@@ -337,6 +343,12 @@ export const moveToLayout = api => (from, to, options) => ({
     const layoutContents = options !== null && options !== void 0 && options.moveToEnd ? [toNodeWithoutBreakout, fromContentWithoutBreakout] : [fromContentWithoutBreakout, toNodeWithoutBreakout];
     const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
     if (newLayout) {
+      let sourceNodeTypes, hasSelectedMultipleNodes;
+      if (isMultiSelect) {
+        const attributes = getMultiSelectAnalyticsAttributes(tr, $sourceFrom.pos, sourceTo);
+        hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+        sourceNodeTypes = attributes.nodeTypes;
+      }
       tr = removeFromSource(tr, $sourceFrom, sourceTo);
       const mappedTo = tr.mapping.map(to);
       tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
@@ -346,7 +358,7 @@ export const moveToLayout = api => (from, to, options) => ({
       breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
         mode: breakoutMode
       })]);
-      fireInsertLayoutAnalytics(tr, api);
+      fireInsertLayoutAnalytics(tr, api, sourceNodeTypes, hasSelectedMultipleNodes);
     }
     return tr;
   }

package/dist/es2019/editor-commands/show-drag-handle.js

@@ -1,8 +1,11 @@
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { isInTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { key } from '../pm-plugins/main';
+import { findNodeDecs } from '../pm-plugins/decorations-anchor';
+import { getDecorations, key } from '../pm-plugins/main';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
-export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
+const showDragHandleAtSelectionOld = (api, shouldFocusParentNode) => (state, _, view) => {
   const {
     $from
   } = state.selection;
@@ -63,4 +66,86 @@ export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state,
     }
   }
   return false;
-};
+};
+const findParentPosForHandle = state => {
+  var _activeNode$handleOpt2;
+  const {
+    selection: {
+      $from
+    }
+  } = state;
+  const {
+    activeNode
+  } = key.getState(state) || {};
+
+  // if a node handle is already focused, return the parent pos of that node (with focused handle)
+  if (activeNode && (_activeNode$handleOpt2 = activeNode.handleOptions) !== null && _activeNode$handleOpt2 !== void 0 && _activeNode$handleOpt2.isFocused) {
+    const $activeNodePos = state.doc.resolve(activeNode.pos);
+
+    // if the handle is at the top level already, do nothing
+    if ($activeNodePos.depth === 0) {
+      return undefined;
+    }
+    return $activeNodePos.before();
+  }
+
+  // if we are in second level of nested node, we should focus the node at level 1
+  if ($from.depth <= 1) {
+    return $from.before(1);
+  }
+
+  // if we are inside a table, we should focus the table's handle
+  const parentTableNode = findParentNodeOfType([state.schema.nodes.table])(state.selection);
+  if (parentTableNode) {
+    return parentTableNode.pos;
+  }
+
+  // else find closest parent node
+  return getNestedNodePosition(state);
+};
+const findNextAnchorDecoration = state => {
+  const decorations = getDecorations(state);
+  if (!decorations) {
+    return undefined;
+  }
+  const nextHandleNodePos = findParentPosForHandle(state);
+  if (nextHandleNodePos === undefined) {
+    return undefined;
+  }
+  const nextHandleNode = state.doc.nodeAt(nextHandleNodePos);
+  let nodeDecorations = nextHandleNode && findNodeDecs(decorations, nextHandleNodePos, nextHandleNodePos + nextHandleNode.nodeSize);
+  if (!nodeDecorations || nodeDecorations.length === 0) {
+    return undefined;
+  }
+
+  // ensure the decoration covers the position of the look up node
+  nodeDecorations = nodeDecorations.filter(decoration => {
+    return decoration.from <= nextHandleNodePos;
+  });
+  if (nodeDecorations.length === 0) {
+    return undefined;
+  }
+
+  // sort the decorations by the position of the node
+  // so we can find the closest decoration to the node
+  nodeDecorations.sort((a, b) => {
+    if (a.from === b.from) {
+      return a.to - b.to;
+    }
+    return b.from - a.from;
+  });
+
+  // return the closest decoration to the node
+  return nodeDecorations[0];
+};
+const showDragHandleAtSelectionNew = api => state => {
+  const decoration = findNextAnchorDecoration(state);
+  if (api && decoration) {
+    api.core.actions.execute(api.blockControls.commands.showDragHandleAt(decoration.from, decoration.spec.anchorName, decoration.spec.nodeTypeWithLevel, {
+      isFocused: true
+    }));
+    return true;
+  }
+  return false;
+};
+export const showDragHandleAtSelection = api => (state, dispatch, view) => editorExperiment('nested-dnd', true) && fg('platform_editor_advanced_layouts_a11y') ? showDragHandleAtSelectionNew(api)(state) : showDragHandleAtSelectionOld(api)(state, dispatch, view);

package/dist/es2019/pm-plugins/decorations-anchor.js

@@ -1,7 +1,7 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
+import { getNestedDepth, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
 const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
@@ -68,11 +68,10 @@ export const nodeDecorations = (newState, from, to) => {
   const ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
-    let anchorName;
     const shouldDescend = shouldDescendIntoNode(node);
-    anchorName = getNodeAnchor(node);
+    const anchorName = getNodeAnchor(node);
+    const nodeTypeWithLevel = getNodeTypeWithLevel(node);
     if (editorExperiment('nested-dnd', true)) {
-      var _anchorName;
       // Doesn't descend into a node
       if (node.isInline) {
         return false;
@@ -81,22 +80,18 @@ export const nodeDecorations = (newState, from, to) => {
       if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
-      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : `--node-anchor-${node.type.name}-${pos}`;
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
     }
     const anchorStyles = `anchor-name: ${anchorName};`;
-    const subType = node.attrs.level ? `-${node.attrs.level}` : '';
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style: anchorStyles,
       ['data-drag-handler-anchor-name']: anchorName,
-      ['data-drag-handler-node-type']: node.type.name + subType,
+      ['data-drag-handler-node-type']: nodeTypeWithLevel,
       ['data-drag-handler-anchor-depth']: `${depth}`
     }, {
       type: TYPE_NODE_DEC,
       anchorName,
-      nodeType: node.type.name
+      nodeType: node.type.name,
+      nodeTypeWithLevel
     }));
     return shouldDescend && depth < getNestedDepth();
   });

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
@@ -11,6 +9,10 @@ export const getNodeAnchor = node => {
   const handleId = ObjHash.getForNode(node);
   return `--node-anchor-${node.type.name}-${handleId}`;
 };
+export const getNodeTypeWithLevel = node => {
+  const subType = node.attrs.level ? `-${node.attrs.level}` : '';
+  return node.type.name + subType;
+};
 class ObjHash {
   static getForNode(node) {
     if (this.caching.has(node)) {
@@ -27,13 +29,9 @@ export const unmountDecorations = (nodeViewPortalProviderAPI, selector, key) =>
   // as it was more responsive and causes less re-rendering
   const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
   decorationsToRemove.forEach(el => {
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      const nodeKey = el.getAttribute(key);
-      if (nodeKey) {
-        nodeViewPortalProviderAPI.remove(nodeKey);
-      }
-    } else {
-      ReactDOM.unmountComponentAtNode(el);
+    const nodeKey = el.getAttribute(key);
+    if (nodeKey) {
+      nodeViewPortalProviderAPI.remove(nodeKey);
     }
   });
 };

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -1,9 +1,7 @@
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 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 { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -63,29 +61,16 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
-        view,
-        api,
-        formatMessage,
-        getPos,
-        anchorName,
-        nodeType,
-        handleOptions,
-        isTopLevelNode
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-        view,
-        api,
-        formatMessage,
-        getPos,
-        anchorName,
-        nodeType,
-        handleOptions,
-        isTopLevelNode
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
+      view,
+      api,
+      formatMessage,
+      getPos,
+      anchorName,
+      nodeType,
+      handleOptions,
+      isTopLevelNode
+    }), element, key);
     return element;
   }, {
     side: -1,

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -1,9 +1,7 @@
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 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 { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
@@ -92,21 +90,12 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
     element.style.setProperty('display', 'block');
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
-        ...props,
-        getPos,
-        anchorRectCache,
-        isSameLayout
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-        ...props,
-        getPos,
-        anchorRectCache,
-        isSameLayout
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
+      ...props,
+      getPos,
+      anchorRectCache,
+      isSameLayout
+    }), element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC,
@@ -127,19 +116,11 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
-        ...props,
-        getPos,
-        anchorRectCache
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, {
-        ...props,
-        getPos,
-        anchorRectCache
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
+      ...props,
+      getPos,
+      anchorRectCache
+    }), element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC

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

@@ -18,7 +18,9 @@ import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-ta
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
+import { getMultiSelectAnalyticsAttributes } from './utils/analytics';
 import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
+import { getSelectedSlicePosition } from './utils/selection';
 import { getTrMetadata } from './utils/transactions';
 export const key = new PluginKey('blockControls');
 const EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
@@ -73,7 +75,8 @@ const destroyFn = (api, editorView) => {
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
         tr
       }) => {
-        if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
+        const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
+        if (isMultiSelect) {
           var _api$blockControls, _api$selection;
           const {
             multiSelectDnD
@@ -96,6 +99,13 @@ const destroyFn = (api, editorView) => {
         // if no drop targets are rendered, assume that drop is invalid
         if (location.current.dropTargets.length === 0) {
           var _api$analytics2;
+          let nodeTypes, hasSelectedMultipleNodes;
+          if (isMultiSelect && api) {
+            const position = getSelectedSlicePosition(start, tr, api);
+            const attributes = getMultiSelectAnalyticsAttributes(tr, position.from, position.to);
+            nodeTypes = attributes.nodeTypes;
+            hasSelectedMultipleNodes = attributes.hasSelectedMultipleNodes;
+          }
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
           api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
@@ -105,7 +115,11 @@ const destroyFn = (api, editorView) => {
             actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
             attributes: {
               nodeDepth: resolvedMovingNode.depth,
-              nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || ''
+              nodeType: (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name) || '',
+              ...(isMultiSelect && {
+                nodeTypes,
+                hasSelectedMultipleNodes
+              })
             }
           })(tr);
         }
@@ -131,6 +145,10 @@ const initialState = {
   isPMDragging: false,
   multiSelectDnD: undefined
 };
+export const getDecorations = state => {
+  var _key$getState;
+  return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+};
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$multiSelectDnD;
   let {
@@ -452,12 +470,12 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
     },
     props: {
       decorations: state => {
-        var _api$editorDisabled, _api$editorDisabled$s, _key$getState;
+        var _api$editorDisabled, _api$editorDisabled$s, _key$getState2;
         const isDisabled = api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled;
         if (isDisabled) {
           return;
         }
-        return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
       },
       handleDOMEvents: {
         drop(view, event) {
@@ -532,12 +550,12 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           }));
         },
         dragend(view) {
-          var _key$getState2;
+          var _key$getState3;
           const {
             state,
             dispatch
           } = view;
-          if ((_key$getState2 = key.getState(state)) !== null && _key$getState2 !== void 0 && _key$getState2.isPMDragging) {
+          if ((_key$getState3 = key.getState(state)) !== null && _key$getState3 !== void 0 && _key$getState3.isPMDragging) {
             dispatch(state.tr.setMeta(key, {
               isPMDragging: false
             }));

package/dist/es2019/pm-plugins/utils/{fire-analytics.js → analytics.js}

@@ -1,5 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api) => {
+import { fg } from '@atlaskit/platform-feature-flags';
+export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType, toDepth, toNodeType, isSameParent, api, fromNodeTypes, hasSelectedMultipleNodes) => {
   var _api$analytics, _api$analytics$action;
   return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
     eventType: EVENT_TYPE.TRACK,
@@ -9,6 +10,8 @@ export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType
     attributes: {
       nodeDepth: fromDepth,
       nodeType: fromNodeType,
+      nodeTypes: fromNodeTypes,
+      hasSelectedMultipleNodes,
       destinationNodeDepth: toDepth,
       destinationNodeType: toNodeType,
       isSameParent: isSameParent,
@@ -16,15 +19,40 @@ export const attachMoveNodeAnalytics = (tr, inputMethod, fromDepth, fromNodeType
     }
   })(tr);
 };
-export const fireInsertLayoutAnalytics = (tr, api) => {
+export const fireInsertLayoutAnalytics = (tr, api, nodeTypes, hasSelectedMultipleNodes) => {
   var _api$analytics2, _api$analytics2$actio;
   api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
     attributes: {
-      inputMethod: INPUT_METHOD.DRAG_AND_DROP
+      inputMethod: INPUT_METHOD.DRAG_AND_DROP,
+      nodeTypes,
+      hasSelectedMultipleNodes
     },
     eventType: EVENT_TYPE.TRACK
   })(tr);
+};
+
+/**
+ * Given a range, return distinctive types of node and whether there are multiple nodes in the range
+ */
+export const getMultiSelectAnalyticsAttributes = (tr, anchor, head) => {
+  const nodeTypes = [];
+  const from = Math.min(anchor, head);
+  const to = Math.max(anchor, head);
+  tr.doc.nodesBetween(from, to, (node, pos) => {
+    if (pos < from) {
+      // ignore parent node
+      return true;
+    }
+    nodeTypes.push(node.type.name);
+
+    // only care about the top level (relatively in the range) nodes
+    return false;
+  });
+  return {
+    nodeTypes: fg('platform_editor_track_node_types') ? [...new Set(nodeTypes)].sort().join(',') : undefined,
+    hasSelectedMultipleNodes: nodeTypes.length > 1
+  };
 };

package/dist/es2019/pm-plugins/utils/selection.js

@@ -2,7 +2,7 @@ export const getMultiSelectionIfPosInside = (api, pos) => {
   var _api$blockControls;
   const {
     multiSelectDnD
-  } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+  } = ((_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
   if (multiSelectDnD && multiSelectDnD.anchor >= 0 && multiSelectDnD.head >= 0) {
     const multiFrom = Math.min(multiSelectDnD.anchor, multiSelectDnD.head);
     const multiTo = Math.max(multiSelectDnD.anchor, multiSelectDnD.head);
@@ -14,4 +14,25 @@ export const getMultiSelectionIfPosInside = (api, pos) => {
     } : {};
   }
   return {};
+};
+
+/**
+ *
+ * @returns from and to positions of the selected content (after expansion)
+ */
+export const getSelectedSlicePosition = (handlePos, tr, api) => {
+  var _activeNode$nodeSize;
+  const {
+    anchor,
+    head
+  } = getMultiSelectionIfPosInside(api, handlePos);
+  const inSelection = anchor !== undefined && head !== undefined;
+  const from = inSelection ? Math.min(anchor, head) : handlePos;
+  const activeNode = tr.doc.nodeAt(handlePos);
+  const activeNodeEndPos = handlePos + ((_activeNode$nodeSize = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeSize) !== null && _activeNode$nodeSize !== void 0 ? _activeNode$nodeSize : 1);
+  const to = inSelection ? Math.max(anchor, head) : activeNodeEndPos;
+  return {
+    from,
+    to
+  };
 };