@atlaskit/editor-plugin-block-controls 2.13.8 → 2.13.9

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.9
+
+### Patch Changes
+
+- [#161549](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161549)
+  [`35e70290e4ccb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35e70290e4ccb) -
+  [ED-25317] Fix the issue where drag handle for layout column does not show up when the content is
+  not empty (with non text content)
+- Updated dependencies
+
 ## 2.13.8
 
 ### Patch Changes

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

@@ -11,7 +11,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
 var _decorationsCommon = require("./decorations-common");
-var IGNORE_NODES = (0, _advancedLayoutsFlags.isPreRelease2)() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
@@ -23,12 +24,12 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
   }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
+var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes) {
   var isEmbedCard = 'embedCard' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
 /**
@@ -64,6 +65,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   var decs = [];
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  var ignore_nodes = (0, _advancedLayoutsFlags.isPreRelease2)() ? IGNORE_NODES_NEXT : IGNORE_NODES;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
     var _Decoration$node;
     var depth = 0;
@@ -76,7 +78,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node)) {
+      if (shouldIgnoreNode(node, ignore_nodes)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseOver = void 0;
-var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _advancedLayoutsFlags = require("../utils/advanced-layouts-flags");
@@ -15,11 +14,19 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
-var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(target) {
-  var _target$textContent;
-  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
-  // Remove placeholder text
-  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(_whitespace.ZERO_WIDTH_SPACE, 'g'), '')) === '';
+var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
+    var foundNonEmptyNode = false;
+    for (var i = 0; i < node.childCount; i++) {
+      var _child$firstChild;
+      var child = node.child(i);
+      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+        foundNonEmptyNode = true;
+        break;
+      }
+    }
+    return !foundNonEmptyNode;
+  }
 };
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
@@ -46,10 +53,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
 
-    // Don't show drag handle when there is no content/only placeholder in layout column
-    if ((0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumnWithoutContent(rootElement)) {
-      return false;
-    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
       exposure: true
@@ -84,6 +87,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    var node = view.state.doc.nodeAt(pos);
+    if ((0, _advancedLayoutsFlags.isPreRelease2)() && node && isLayoutColumnWithoutContent(node)) {
+      // Don't show drag handle when there is no content/only placeholder in layout column
+      return false;
+    }
     var rootPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -3,7 +3,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
-const IGNORE_NODES = isPreRelease2() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+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'];
 export const shouldDescendIntoNode = node => {
   // Optimisation to avoid drawing node decorations for empty table cells
@@ -15,12 +16,12 @@ export const shouldDescendIntoNode = node => {
   }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-const shouldIgnoreNode = node => {
+const shouldIgnoreNode = (node, ignore_nodes) => {
   const isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
 /**
@@ -54,6 +55,7 @@ export const nodeDecorations = (newState, from, to) => {
   const decs = [];
   const docFrom = from === undefined || from < 0 ? 0 : from;
   const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  const ignore_nodes = isPreRelease2() ? IGNORE_NODES_NEXT : IGNORE_NODES;
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
     let depth = 0;
     let anchorName;
@@ -65,7 +67,7 @@ export const nodeDecorations = (newState, from, to) => {
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node)) {
+      if (shouldIgnoreNode(node, ignore_nodes)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -1,4 +1,3 @@
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
@@ -9,11 +8,19 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
-const isLayoutColumnWithoutContent = target => {
-  var _target$textContent;
-  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
-  // Remove placeholder text
-  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(ZERO_WIDTH_SPACE, 'g'), '')) === '';
+const isLayoutColumnWithoutContent = node => {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
+    let foundNonEmptyNode = false;
+    for (let i = 0; i < node.childCount; i++) {
+      var _child$firstChild;
+      const child = node.child(i);
+      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+        foundNonEmptyNode = true;
+        break;
+      }
+    }
+    return !foundNonEmptyNode;
+  }
 };
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _target$classList;
@@ -41,10 +48,6 @@ export const handleMouseOver = (view, event, api) => {
     const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
 
-    // Don't show drag handle when there is no content/only placeholder in layout column
-    if (isPreRelease2() && isLayoutColumnWithoutContent(rootElement)) {
-      return false;
-    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true
@@ -79,6 +82,11 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    const node = view.state.doc.nodeAt(pos);
+    if (isPreRelease2() && node && isLayoutColumnWithoutContent(node)) {
+      // Don't show drag handle when there is no content/only placeholder in layout column
+      return false;
+    }
     let rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

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

@@ -4,7 +4,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
 import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
-var IGNORE_NODES = isPreRelease2() ? ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'] : ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
+var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   // Optimisation to avoid drawing node decorations for empty table cells
@@ -16,12 +17,12 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
   }
   return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
 };
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
+var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes) {
   var isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
 
   // TODO use isWrappedMedia when clean up the feature flag
   var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
-  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
 };
 
 /**
@@ -57,6 +58,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
   var docFrom = from === undefined || from < 0 ? 0 : from;
   var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  var ignore_nodes = isPreRelease2() ? IGNORE_NODES_NEXT : IGNORE_NODES;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
     var _Decoration$node;
     var depth = 0;
@@ -69,7 +71,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
       if (node.isInline) {
         return false;
       }
-      if (shouldIgnoreNode(node)) {
+      if (shouldIgnoreNode(node, ignore_nodes)) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
       depth = newState.doc.resolve(pos).depth;

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

@@ -1,4 +1,3 @@
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isPreRelease2 } from '../utils/advanced-layouts-flags';
@@ -9,11 +8,19 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
-var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(target) {
-  var _target$textContent;
-  return target instanceof HTMLDivElement && (target === null || target === void 0 ? void 0 : target.getAttribute('data-drag-handler-node-type')) === 'layoutColumn' &&
-  // Remove placeholder text
-  ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.replace(new RegExp(ZERO_WIDTH_SPACE, 'g'), '')) === '';
+var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
+    var foundNonEmptyNode = false;
+    for (var i = 0; i < node.childCount; i++) {
+      var _child$firstChild;
+      var child = node.child(i);
+      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+        foundNonEmptyNode = true;
+        break;
+      }
+    }
+    return !foundNonEmptyNode;
+  }
 };
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
@@ -40,10 +47,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
 
-    // Don't show drag handle when there is no content/only placeholder in layout column
-    if (isPreRelease2() && isLayoutColumnWithoutContent(rootElement)) {
-      return false;
-    }
     // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
     if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true
@@ -78,6 +81,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
+    var node = view.state.doc.nodeAt(pos);
+    if (isPreRelease2() && node && isLayoutColumnWithoutContent(node)) {
+      // Don't show drag handle when there is no content/only placeholder in layout column
+      return false;
+    }
     var rootPos;
     if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.8",
+	"version": "2.13.9",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@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.0.0",
+		"@atlaskit/primitives": "^13.1.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.12.0",
 		"@atlaskit/tokens": "^2.2.0",