@atlaskit/editor-plugin-block-controls 1.4.34 → 1.4.35

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.35
+
+### Patch Changes
+
+- [#115170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115170)
+  [`d3d39a486f0d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3d39a486f0d9) -
+  Fix drag handle position when deleting a paragraph
+- [#115170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115170)
+  [`108a85e557e41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/108a85e557e41) -
+  Hide drag handle on empty paragraph
+
 ## 1.4.34
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
+exports.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -69,10 +69,19 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     decorationState: decorationState
   };
 };
+var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: 'node-decoration'
+  });
+};
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
-    var _Decoration$node;
+    var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
@@ -80,9 +89,11 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
     }
-    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
+    }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+      type: 'node-decoration'
+    }));
     return false;
   });
   return decs;

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

@@ -236,6 +236,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        var hasNodeDecoration = decorations.find().some(function (_ref11) {
+          var spec = _ref11.spec;
+          return spec.type === 'node-decoration';
+        });
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
+        }
 
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -243,7 +251,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
           decorationState: decorationState,

package/dist/cjs/ui/global-styles.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStylesWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
@@ -32,13 +34,18 @@ var extendedHoverZone = (0, _react.css)({
     display: 'none'
   }
 });
-var globalStyles = (0, _react.css)({
+var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+var paragraphWithCursorTarget = '+ p > .cursor-target';
+var globalStyles = (0, _react.css)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
-});
+}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'none !important'
+}));
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]

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

@@ -61,6 +61,16 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     decorationState
   };
 };
+export const emptyParagraphNodeDecorations = () => {
+  const anchorName = `--node-anchor-paragraph-0`;
+  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
+  return Decoration.node(0, 2, {
+    style,
+    ['data-drag-handler-anchor-name']: anchorName
+  }, {
+    type: 'node-decoration'
+  });
+};
 export const nodeDecorations = newState => {
   const decs = [];
   newState.doc.descendants((node, pos, _parent, index) => {
@@ -75,6 +85,8 @@ export const nodeDecorations = newState => {
       style,
       ['data-drag-handler-anchor-name']: anchorName,
       ['data-drag-handler-node-type']: node.type.name
+    }, {
+      type: 'node-decoration'
     }));
     return false;
   });

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

@@ -9,7 +9,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
@@ -227,6 +227,13 @@ export const createPlugin = api => {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        const hasNodeDecoration = decorations.find().some(({
+          spec
+        }) => spec.type === 'node-decoration');
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+        }
 
         // Map active node position when the document changes
         const mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -234,7 +241,6 @@ export const createPlugin = api => {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations,
           decorationState,

package/dist/es2019/ui/global-styles.js

@@ -25,11 +25,20 @@ const extendedHoverZone = css({
     display: 'none'
   }
 });
+const paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+const paragraphWithCursorTarget = '+ p > .cursor-target';
 const globalStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
+  },
+  // Currently, we are hiding the drag handle container by checking if the paragraph has a trailing break and no cursor target
+  // TODO ED-23827 add a classname to empty paragraphs for easier targeting
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreak}):not(:has(${paragraphWithCursorTarget}))`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    display: 'none !important'
   }
 });
 export const GlobalStylesWrapper = () => {

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

@@ -62,10 +62,19 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     decorationState: decorationState
   };
 };
+export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return Decoration.node(0, 2, _defineProperty({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: 'node-decoration'
+  });
+};
 export var nodeDecorations = function nodeDecorations(newState) {
   var decs = [];
   newState.doc.descendants(function (node, pos, _parent, index) {
-    var _Decoration$node;
+    var _Decoration$node2;
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     var style;
     if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
@@ -73,9 +82,11 @@ export var nodeDecorations = function nodeDecorations(newState) {
     } else {
       style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
     }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: style
-    }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _Decoration$node)));
+    }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _Decoration$node2), {
+      type: 'node-decoration'
+    }));
     return false;
   });
   return decs;

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

@@ -10,7 +10,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
+import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 export var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
@@ -229,6 +229,14 @@ export var createPlugin = function createPlugin(api) {
         if (tr.docChanged && !redrawDecorations) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
+        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+        var hasNodeDecoration = decorations.find().some(function (_ref11) {
+          var spec = _ref11.spec;
+          return spec.type === 'node-decoration';
+        });
+        if (!hasNodeDecoration && isEmptyDoc) {
+          decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+        }
 
         // Map active node position when the document changes
         var mappedActiveNodePos = tr.docChanged && activeNode ? {
@@ -236,7 +244,6 @@ export var createPlugin = function createPlugin(api) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
           decorationState: decorationState,

package/dist/esm/ui/global-styles.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
@@ -25,13 +26,18 @@ var extendedHoverZone = css({
     display: 'none'
   }
 });
-var globalStyles = css({
+var paragraphWithTrailingBreak = '+ p > .ProseMirror-trailingBreak';
+var paragraphWithCursorTarget = '+ p > .cursor-target';
+var globalStyles = css(_defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
-});
+}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreak, "):not(:has(").concat(paragraphWithCursorTarget, "))"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'none !important'
+}));
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
     styles: [globalStyles, getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') && extendedHoverZone]

package/dist/types/pm-plugins/decorations.d.ts

@@ -9,6 +9,7 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
+export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 /**
  * Setting up decorations around each node to track mousemove events into each node

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -9,6 +9,7 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
+export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 /**
  * Setting up decorations around each node to track mousemove events into each node

package/package.json

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