@atlaskit/editor-plugin-block-controls 2.1.6 → 2.1.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.1.8
+
+### Patch Changes
+
+- [#147103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147103)
+  [`c550545f3551e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c550545f3551e) -
+  ED-24305 Try to fix type error from getPos in drag handle
+- Updated dependencies
+
+## 2.1.7
+
+### Patch Changes
+
+- [#147259](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147259)
+  [`887b742b313c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/887b742b313c6) -
+  Experiment flag update
+- Updated dependencies
+
 ## 2.1.6
 
 ### Patch Changes

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

@@ -32,9 +32,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
-    if ((0, _experiments.editorExperiment)('nested-dnd', true, {
-      exposure: true
-    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+    if ((0, _experiments.editorExperiment)('nested-dnd', 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]');
@@ -59,9 +57,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
     var parentRootElement = rootElement.parentElement;
     var pos;
-    if (parentRootElement && (0, _experiments.editorExperiment)('nested-dnd', true, {
-      exposure: true
-    })) {
+    if (parentRootElement && (0, _experiments.editorExperiment)('nested-dnd', true)) {
       var _parentRootElement$ch;
       var childNodes = Array.from(parentRootElement.childNodes);
       var index = childNodes.indexOf(rootElement);
@@ -76,9 +72,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       pos = view.posAtDOM(rootElement, 0);
     }
     var rootPos;
-    if ((0, _experiments.editorExperiment)('nested-dnd', true, {
-      exposure: true
-    })) {
+    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;

package/dist/cjs/ui/drag-handle.js

@@ -295,6 +295,9 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     positionStyles = _useState6[0],
     setPositionStyles = _useState6[1];
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -317,6 +320,32 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, anchorName, nodeType]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       var id = requestAnimationFrame(function () {

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

@@ -27,9 +27,7 @@ export const handleMouseOver = (view, event, api) => {
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
-    if (editorExperiment('nested-dnd', true, {
-      exposure: true
-    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+    if (editorExperiment('nested-dnd', 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]');
@@ -54,9 +52,7 @@ export const handleMouseOver = (view, event, api) => {
     }
     const parentRootElement = rootElement.parentElement;
     let pos;
-    if (parentRootElement && editorExperiment('nested-dnd', true, {
-      exposure: true
-    })) {
+    if (parentRootElement && editorExperiment('nested-dnd', true)) {
       var _parentRootElement$ch;
       const childNodes = Array.from(parentRootElement.childNodes);
       const index = childNodes.indexOf(rootElement);
@@ -71,9 +67,7 @@ export const handleMouseOver = (view, event, api) => {
       pos = view.posAtDOM(rootElement, 0);
     }
     let rootPos;
-    if (editorExperiment('nested-dnd', true, {
-      exposure: true
-    })) {
+    if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;

package/dist/es2019/ui/drag-handle.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
@@ -279,6 +279,9 @@ const DragHandleInternal = ({
     display: 'none'
   });
   useEffect(() => {
+    if (fg('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
     let cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
@@ -301,6 +304,32 @@ const DragHandleInternal = ({
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, anchorName, nodeType]);
+  useLayoutEffect(() => {
+    if (!fg('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
+    let cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: () => {
+          setPositionStyles(calculatePosition());
+        }
+      });
+    }
+    const calcPos = requestAnimationFrame(() => {
+      setPositionStyles(calculatePosition());
+    });
+    return () => {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
       const id = requestAnimationFrame(() => {

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

@@ -26,9 +26,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
-    if (editorExperiment('nested-dnd', true, {
-      exposure: true
-    }) && isEmptyNestedParagraphOrHeading(rootElement)) {
+    if (editorExperiment('nested-dnd', 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]');
@@ -53,9 +51,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
     var parentRootElement = rootElement.parentElement;
     var pos;
-    if (parentRootElement && editorExperiment('nested-dnd', true, {
-      exposure: true
-    })) {
+    if (parentRootElement && editorExperiment('nested-dnd', true)) {
       var _parentRootElement$ch;
       var childNodes = Array.from(parentRootElement.childNodes);
       var index = childNodes.indexOf(rootElement);
@@ -70,9 +66,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       pos = view.posAtDOM(rootElement, 0);
     }
     var rootPos;
-    if (editorExperiment('nested-dnd', true, {
-      exposure: true
-    })) {
+    if (editorExperiment('nested-dnd', true)) {
       rootPos = view.state.doc.resolve(pos).pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;

package/dist/esm/ui/drag-handle.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
@@ -286,6 +286,9 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     positionStyles = _useState6[0],
     setPositionStyles = _useState6[1];
   useEffect(function () {
+    if (fg('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
@@ -308,6 +311,32 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, anchorName, nodeType]);
+  useLayoutEffect(function () {
+    if (!fg('platform_editor_element_dnd_nested_type_error_fix')) {
+      return;
+    }
+    var cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: function listener() {
+          setPositionStyles(calculatePosition());
+        }
+      });
+    }
+    var calcPos = requestAnimationFrame(function () {
+      setPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis2;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
   useEffect(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
       var id = requestAnimationFrame(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.1.6",
+	"version": "2.1.8",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/editor-common": "^91.1.0",
+		"@atlaskit/editor-common": "^92.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
@@ -141,6 +141,9 @@
 		},
 		"platform_editor_element_dnd_nested_fix_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_element_dnd_nested_type_error_fix": {
+			"type": "boolean"
 		}
 	}
 }