@atlaskit/editor-plugin-block-controls 1.13.4 → 1.13.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.13.6
+
+### Patch Changes
+
+- [#139441](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139441)
+  [`b215909b0f7ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b215909b0f7ab) -
+  [ux] [ED-24882] Add additional CSS overrides to emtpy block experiment to handle drag handle edge
+  cases
+
+## 1.13.5
+
+### Patch Changes
+
+- [#138973](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138973)
+  [`8d99278240f49`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d99278240f49) -
+  ED-24407 hide drag handle for empty heading paragrah
+
 ## 1.13.4
 
 ### Patch Changes

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

@@ -6,11 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.handleMouseOver = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
+  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
+    var _target$parentElement;
+    return !((_target$parentElement = target.parentElement) !== null && _target$parentElement !== void 0 && _target$parentElement.classList.contains('ProseMirror')) && target.textContent === '';
+  }
+  return false;
+};
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     isDragging = _ref.isDragging,
     activeNode = _ref.activeNode;
+
   // Most mouseover events don't fire during drag but some can slip through
   // when the drag begins. This prevents those.
   if (isDragging) {
@@ -23,6 +31,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
     var _rootElement$parentEl;
+    if ((0, _experiments.editorExperiment)('nested-dnd', true, {
+      exposure: true
+    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+      return false;
+    }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
       exposure: true

package/dist/cjs/ui/empty-block-experiment/global-styles.js

@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
 var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
 var formattingElement = 'div.fabric-editor-block-mark';
+var markFragment = 'div[data-mark-type="fragment"]';
 var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
 // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
 var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
@@ -25,7 +26,9 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 
 // Hides the drag handle when the block contains the empty block experiment
 // Override is consistent with how the drag handle is hidden when the block contains a placeholder
-var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
+var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+// is nested in the previous div. These selectors are to handle those cases.
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child"), {
   display: 'none !important'
 }));
 
@@ -36,7 +39,9 @@ var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default
  * Otherwise it might break composition input for Chrome
  * https://product-fabric.atlassian.net/browse/ED-24136
  */
-var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
+var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+// is nested in the previous div. These selectors are to handle those cases.
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
   transform: 'scale(0)'
 }));
 var getDragHandleOverrides = function getDragHandleOverrides() {

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

@@ -1,11 +1,19 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const isEmptyNestedParagraphOrHeading = target => {
+  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
+    var _target$parentElement;
+    return !((_target$parentElement = target.parentElement) !== null && _target$parentElement !== void 0 && _target$parentElement.classList.contains('ProseMirror')) && target.textContent === '';
+  }
+  return false;
+};
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls;
   const {
     isDragging,
     activeNode
   } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+
   // Most mouseover events don't fire during drag but some can slip through
   // when the drag begins. This prevents those.
   if (isDragging) {
@@ -18,6 +26,11 @@ export const handleMouseOver = (view, event, api) => {
   let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
     var _rootElement$parentEl;
+    if (editorExperiment('nested-dnd', true, {
+      exposure: true
+    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+      return false;
+    }
     const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true

package/dist/es2019/ui/empty-block-experiment/global-styles.js

@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 const emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
 const quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
 const formattingElement = 'div.fabric-editor-block-mark';
+const markFragment = 'div[data-mark-type="fragment"]';
 const elementWithEmptyBlockExperiment = `+ p > ${emptyBlockExperimentWidget}, + h1 > ${emptyBlockExperimentWidget}, + h2 > ${emptyBlockExperimentWidget}, + h3 > ${emptyBlockExperimentWidget}, + h4 > ${emptyBlockExperimentWidget}, + h5 > ${emptyBlockExperimentWidget}, + h6 > ${emptyBlockExperimentWidget}`;
 // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
 const elementWithEmptyBlockExperimentFormatted = `+ ${formattingElement} > p > ${emptyBlockExperimentWidget}, + ${formattingElement} > h1 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h2 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h3 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h4 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h5 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h6 > ${emptyBlockExperimentWidget}`;
@@ -17,7 +18,14 @@ const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 // Hides the drag handle when the block contains the empty block experiment
 // Override is consistent with how the drag handle is hidden when the block contains a placeholder
 const dragHandleWithInlineNodeStyle = css({
-  [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperiment}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperimentFormatted})`]: {
+  [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}),
+		${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}),` +
+  // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+  // is nested in the previous div. These selectors are to handle those cases.
+  `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
+		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
+		${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,
+		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child`]: {
     display: 'none !important'
   }
 });
@@ -30,7 +38,14 @@ const dragHandleWithInlineNodeStyle = css({
  * https://product-fabric.atlassian.net/browse/ED-24136
  */
 const dragHandleWithInlineNodeStyleWithChromeFix = css({
-  [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}) ${dragHandleSelector}, ${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector}`]: {
+  [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}) ${dragHandleSelector},
+		${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector},` +
+  // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+  // is nested in the previous div. These selectors are to handle those cases.
+  `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
+		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
+		${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
+		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector}`]: {
     transform: 'scale(0)'
   }
 });

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

@@ -1,10 +1,18 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
+  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
+    var _target$parentElement;
+    return !((_target$parentElement = target.parentElement) !== null && _target$parentElement !== void 0 && _target$parentElement.classList.contains('ProseMirror')) && target.textContent === '';
+  }
+  return false;
+};
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     isDragging = _ref.isDragging,
     activeNode = _ref.activeNode;
+
   // Most mouseover events don't fire during drag but some can slip through
   // when the drag begins. This prevents those.
   if (isDragging) {
@@ -17,6 +25,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
     var _rootElement$parentEl;
+    if (editorExperiment('nested-dnd', true, {
+      exposure: true
+    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+      return false;
+    }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
       exposure: true

package/dist/esm/ui/empty-block-experiment/global-styles.js

@@ -9,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
 var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
 var formattingElement = 'div.fabric-editor-block-mark';
+var markFragment = 'div[data-mark-type="fragment"]';
 var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
 // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
 var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
@@ -17,7 +18,9 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 
 // Hides the drag handle when the block contains the empty block experiment
 // Override is consistent with how the drag handle is hidden when the block contains a placeholder
-var dragHandleWithInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
+var dragHandleWithInlineNodeStyle = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+// is nested in the previous div. These selectors are to handle those cases.
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child"), {
   display: 'none !important'
 }));
 
@@ -28,7 +31,9 @@ var dragHandleWithInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget
  * Otherwise it might break composition input for Chrome
  * https://product-fabric.atlassian.net/browse/ED-24136
  */
-var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
+var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
+// is nested in the previous div. These selectors are to handle those cases.
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
   transform: 'scale(0)'
 }));
 var getDragHandleOverrides = function getDragHandleOverrides() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.13.4",
+	"version": "1.13.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",