🐛(frontend) fix dnd conflict with tree and Blocknote

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to
 - 🐛(frontend) fix export when quote block and inline code #1319
 - 🐛(frontend) fix base64 font #1324
 - 🐛(backend) allow editor to delete subpages #1296
+- 🐛(frontend) fix dnd conflict with tree and Blocknote #1328
 
 ## [3.5.0] - 2025-07-31
 

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/cunningham/cunningham-style.css

@@ -38,6 +38,13 @@
   );
 }
 
+/**
+ * Modal
+*/
+.c__modal__backdrop {
+  z-index: 1000;
+}
+
 /**
  * Tooltip
 */

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

@@ -110,6 +110,10 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             background: var(--c--theme--colors--greyscale-100);
           }
         }
+
+        .row.preview & {
+          background-color: inherit;
+        }
       `}
     >
       <TreeViewItem

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==