Add opt-in support for setting the "nonce" attribute on the global cu…

…rsor style (#386)

Resolves #384

```js
import { setNonce } from "react-resizable-panels";

setNonce("whatever");
```

cc @asual

packages/react-resizable-panels/src/index.ts

@@ -2,6 +2,7 @@ import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 import { assert } from "./utils/assert";
+import { setNonce } from "./utils/csp";
 import { getPanelElement } from "./utils/dom/getPanelElement";
 import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
 import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
@@ -64,4 +65,7 @@ export {
   getResizeHandleElementIndex,
   getResizeHandleElementsForGroup,
   getResizeHandlePanelIds,
+
+  // CSP (see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
+  setNonce,
 };

packages/react-resizable-panels/src/utils/csp.ts

@@ -0,0 +1,9 @@
+let nonce: string | null;
+
+export function getNonce(): string | null {
+  return nonce;
+}
+
+export function setNonce(value: string | null) {
+  nonce = value;
+}

packages/react-resizable-panels/src/utils/cursor.ts

@@ -4,6 +4,7 @@ import {
   EXCEEDED_VERTICAL_MAX,
   EXCEEDED_VERTICAL_MIN,
 } from "../PanelResizeHandleRegistry";
+import { getNonce } from "./csp";
 
 type CursorState = "horizontal" | "intersection" | "vertical";
 
@@ -77,6 +78,11 @@ export function setGlobalCursorStyle(
   if (styleElement === null) {
     styleElement = document.createElement("style");
 
+    const nonce = getNonce();
+    if (nonce) {
+      styleElement.setAttribute("nonce", nonce);
+    }
+
     document.head.appendChild(styleElement);
   }