feat: add plugin for injecting Emotion cache

packages/plugin-emotion-cache/README.md

@@ -0,0 +1,38 @@
+# plugin-emotion-cache
+
+Inject [emotion cache](https://emotion.sh/docs/@emotion/cache) into the Puck iframe.
+
+## Quick start
+
+```sh
+npm i @measured/puck-plugin-emotion-cache
+```
+
+```jsx
+import { Puck } from "@measured/puck";
+import createEmotionCache from "@measured/puck-plugin-emotion-cache";
+
+// Create your emotion cache plugin. This example configures it for Chakra.
+const chakraEmotionCache = createEmotionCache("cha");
+
+// Render Puck
+export function Page() {
+  return <Puck config={config} data={data} plugins={[chakraEmotionCache]} />;
+}
+```
+
+## Args
+
+| Param         | Example | Type   | Status   |
+| ------------- | ------- | ------ | -------- |
+| [`key`](#key) | `cha`   | String | Required |
+
+### Required args
+
+#### `key`
+
+Key to pass to Emotion's [`createCache` method](https://emotion.sh/docs/@emotion/cache#createcache).
+
+## License
+
+MIT © [Measured Corporation Ltd](https://measured.co)

packages/plugin-emotion-cache/index.tsx

@@ -0,0 +1,36 @@
+import { Plugin } from "@/core/types/Plugin";
+import { useEffect, useState } from "react";
+
+import createCache, { EmotionCache } from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+
+const createEmotionCachePlugin = (key: string): Plugin => {
+  return {
+    overrides: {
+      iframe: ({ children, document }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [cache, setCache] = useState<EmotionCache | null>(null);
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+          if (document) {
+            setCache(
+              createCache({
+                key,
+                container: document.head,
+              })
+            );
+          }
+        }, [document, key]);
+
+        if (cache) {
+          return <CacheProvider value={cache}>{children}</CacheProvider>;
+        }
+
+        return <>{children}</>;
+      },
+    },
+  };
+};
+
+export default createEmotionCachePlugin;

packages/plugin-emotion-cache/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@measured/puck-plugin-emotion-cache",
+  "version": "0.15.0",
+  "author": "Measured Corporation Ltd <[email protected]>",
+  "repository": "measuredco/puck",
+  "bugs": "https://github.com/measuredco/puck/issues",
+  "homepage": "https://puckeditor.com",
+  "private": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "build": "rm -rf dist && tsup index.ts",
+    "prepare": "yarn build"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@measured/puck": "^0.15.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^8.2.4",
+    "tsup-config": "*",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "@emotion/react": "^11.0.0"
+  }
+}

packages/plugin-emotion-cache/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "paths": {
+      "@/core": ["../core"],
+      "@/core/*": ["../core/*"]
+    }
+  }
+}

packages/plugin-emotion-cache/tsup.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "tsup";
+import tsupconfig from "../tsup-config";
+
+export default defineConfig(tsupconfig);