opf
diff --git a/‎README.md‎
Lines changed: 10 additions & 0 deletions b/‎README.md‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 9 additions & 0 deletions b/‎index.html‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎lib/components/ShadowDomWrapper.tsx‎
Lines changed: 12 additions & 0 deletions b/‎lib/components/ShadowDomWrapper.tsx‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎lib/components/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎lib/components/index.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎package-lock.json‎
Lines changed: 41 additions & 61 deletions b/‎package-lock.json‎
Lines changed: 41 additions & 61 deletions
@@ -76,6 +76,16 @@ npm run dev
 
 Which will start a vite server with a BlockNote editor instance including the available extensions.
 
+#### Usage within a shadow dom root
+
+This project uses `styledComponents` to define styles. This means that styles are, by default, injected onto the page header. To be able to use styles onto a shadow dom root it is necessary to use our `ShadowDomWrapper` component targeting the root for the styles.
+
+```tsx
+  <ShadowDomWrapper target={targetHtmlElementOrShadowRoot}>
+    <MyBlockNoteView />
+  </ShadowDomWrapper>
+```
+
 ### To run locally with valid API requests to an OpenProject instance
 
 Step 1: Make sure that the OpenProject instance URL is correct in App.tsx
 
@@ -5,9 +5,18 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <script type="module" src="/src/op-blocknote.ts"></script>
   </head>
   <body>
+    <div>-- page root --</div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+
+    <br />
+    <br />
+    <br />
+
+    <div>-- shadow dom --</div>
+    <op-block-note />
   </body>
 </html>
@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react";
+import { StyleSheetManager } from "styled-components";
+
+interface ShadowDomWrapperProps {
+  target: ShadowRoot | HTMLElement;
+}
+
+export const ShadowDomWrapper = ({ children, target }: PropsWithChildren<ShadowDomWrapperProps>) => (
+  <StyleSheetManager target={target}>
+    {children}
+  </StyleSheetManager>
+);
@@ -1 +1,2 @@
 export * from "./OpenProjectWorkPackageBlock";
+export * from "./ShadowDomWrapper";
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from "./OpenProjectWorkPackageBlock";`
	`2`	`+export * from "./ShadowDomWrapper";`