improve the web component example

Author: brunopagno

README.md

@@ -78,10 +78,10 @@ Which will start a vite server with a BlockNote editor instance including the av
 
 #### Usage within a shadow dom root
 
-This project uses `styled components` 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.
+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={this.targetHtmlElementOrShadowRoot}>
+  <ShadowDomWrapper target={targetHtmlElementOrShadowRoot}>
     <MyBlockNoteView />
   </ShadowDomWrapper>
 ```

src/op-blocknote.ts

@@ -3,9 +3,11 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 
 import mantineStyles from '@blocknote/mantine/style.css?url';
+import { ShadowDomWrapper } from '../lib';
 
 class BlockNoteElement extends HTMLElement {
   private mount: HTMLDivElement;
+  private reactRoot: ReturnType<typeof createRoot> | null = null;
 
   constructor() {
     super();
@@ -21,15 +23,26 @@ class BlockNoteElement extends HTMLElement {
   }
 
   connectedCallback() {
-    const root = createRoot(this.mount);
-
-    root.render(this.BlockNoteReactContainer());
+    this.reactRoot = createRoot(this.mount);
+
+    this.reactRoot.render(
+      React.createElement(
+        ShadowDomWrapper,
+        { target: this.mount },
+        React.createElement(App)
+      )
+    );
   }
 
-  BlockNoteReactContainer() {
-    return React.createElement(App);
+  disconnectedCallback() {
+    if (this.reactRoot) {
+      this.reactRoot.unmount();
+      this.reactRoot = null;
+    }
   }
 }
 
-customElements.define('op-block-note', BlockNoteElement);
+if (!customElements.get('op-block-note')) {
+  customElements.define('op-block-note', BlockNoteElement);
+}