snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/hooks/useCreatePortalContainer.ts

@@ -0,0 +1,53 @@
+import { useState, useLayoutEffect } from "react";
+
+import { THEME } from "@excalidraw/common";
+
+import { useEditorInterface, useExcalidrawContainer } from "../components/App";
+import { useUIAppState } from "../context/ui-appState";
+
+export const useCreatePortalContainer = (opts?: {
+  className?: string;
+  parentSelector?: string;
+}) => {
+  const [div, setDiv] = useState<HTMLDivElement | null>(null);
+
+  const editorInterface = useEditorInterface();
+  const { theme } = useUIAppState();
+
+  const { container: excalidrawContainer } = useExcalidrawContainer();
+
+  useLayoutEffect(() => {
+    if (div) {
+      div.className = "";
+      div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
+      div.classList.toggle(
+        "excalidraw--mobile",
+        editorInterface.formFactor === "phone",
+      );
+      div.classList.toggle("theme--dark", theme === THEME.DARK);
+    }
+  }, [div, theme, editorInterface.formFactor, opts?.className]);
+
+  useLayoutEffect(() => {
+    const ownerDocument = excalidrawContainer?.ownerDocument;
+    const container = opts?.parentSelector
+      ? excalidrawContainer?.querySelector(opts.parentSelector)
+      : ownerDocument?.body;
+
+    if (!container || !ownerDocument) {
+      return;
+    }
+
+    const div = ownerDocument.createElement("div");
+
+    container.appendChild(div);
+
+    setDiv(div);
+
+    return () => {
+      container.removeChild(div);
+    };
+  }, [excalidrawContainer, opts?.parentSelector]);
+
+  return div;
+};