🐛(frontend) fix dnd conflict with tree and Blocknote

We have different DND system in the page, one on the
menu tree and one in the Blocknote editor.
The menu tree was adding a transparent layer
when user were dragging element on the Blocknote
editor, blocking the Blocknote DND.
We update the ui-kit to add the prop dndRootElement,
dndRootElement is now used to specify the root element
for DND, this transparent layer is now only applied
when a drag is made from the menu tree.

It stabilize as well the drop position, making it easier to drop element.

Author: AntoLC

src/frontend/apps/impress/package.json

@@ -29,7 +29,7 @@
     "@emoji-mart/react": "1.1.1",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.16.0",
+    "@gouvfr-lasuite/ui-kit": "0.16.1",
     "@hocuspocus/provider": "2.15.2",
     "@openfun/cunningham-react": "3.2.3",
     "@react-pdf/renderer": "4.3.0",

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -30,6 +30,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
   const { isDesktop } = useResponsive();
+  const [treeRoot, setTreeRoot] = useState<HTMLElement | null>(null);
 
   const [initialOpenState, setInitialOpenState] = useState<OpenMap | undefined>(
     undefined,
@@ -148,6 +149,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
 
   return (
     <Box
+      ref={setTreeRoot}
       data-testid="doc-tree"
       $height="100%"
       $css={css`
@@ -232,30 +234,33 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
         </Box>
       </Box>
 
-      {initialOpenState && treeContext.treeData.nodes.length > 0 && (
-        <TreeView
-          initialOpenState={initialOpenState}
-          afterMove={handleMove}
-          selectedNodeId={
-            treeContext.treeData.selectedNode?.id ??
-            treeContext.initialTargetId ??
-            undefined
-          }
-          canDrop={({ parentNode }) => {
-            const parentDoc = parentNode?.data.value as Doc;
-            if (!parentDoc) {
-              return currentDoc.abilities.move && isDesktop;
+      {initialOpenState &&
+        treeContext.treeData.nodes.length > 0 &&
+        treeRoot && (
+          <TreeView
+            dndRootElement={treeRoot}
+            initialOpenState={initialOpenState}
+            afterMove={handleMove}
+            selectedNodeId={
+              treeContext.treeData.selectedNode?.id ??
+              treeContext.initialTargetId ??
+              undefined
             }
-            return parentDoc.abilities.move && isDesktop;
-          }}
-          canDrag={(node) => {
-            const doc = node.value as Doc;
-            return doc.abilities.move && isDesktop;
-          }}
-          rootNodeId={treeContext.root.id}
-          renderNode={DocSubPageItem}
-        />
-      )}
+            canDrop={({ parentNode }) => {
+              const parentDoc = parentNode?.data.value as Doc;
+              if (!parentDoc) {
+                return currentDoc.abilities.move && isDesktop;
+              }
+              return parentDoc.abilities.move && isDesktop;
+            }}
+            canDrag={(node) => {
+              const doc = node.value as Doc;
+              return doc.abilities.move && isDesktop;
+            }}
+            rootNodeId={treeContext.root.id}
+            renderNode={DocSubPageItem}
+          />
+        )}
     </Box>
   );
 };

src/frontend/yarn.lock

@@ -1734,10 +1734,10 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.3.tgz#7aca824ba61d343a7905dc90c8a8bbdbce8f9a09"
   integrity sha512-OgP28CqlPi35wQPul1Dr52SngACXAk8buLGqHYXDp23fbTOJThqarrZE/pgJHoc9Ndwiu7ngwBSO4rZ7OPyMpA==
 
-"@gouvfr-lasuite/[email protected].0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.16.0.tgz#6cf2f786759384904ac1b4c99b4082b0508aa71f"
-  integrity sha512-VLjDLxuBM647OOD66ylJEnfcQrcO8fWyrfVSvhk/3QLMu9UImqSIE62RGh9PbeZ0+fXso9I8xI/wamkvyujXCQ==
+"@gouvfr-lasuite/[email protected].1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.16.1.tgz#3dfac5c38ea31c292f38cd25b5372b4633661f37"
+  integrity sha512-mx2gM1vv7NvL0LOOd3zqtT4H58rR9ogmmswYV6ocDFx7hoMWE/gA6i1R2grktFrJP/Pt3JgcvDET8iKbp+56VQ==
   dependencies:
     "@dnd-kit/core" "6.3.1"
     "@dnd-kit/modifiers" "9.0.0"
@@ -14712,16 +14712,7 @@ string-length@^4.0.2:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14847,14 +14838,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -16389,16 +16373,7 @@ [email protected]:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==