Merge pull request #21211 from Arthurk12/sdk/issue/112

fix(plugins): unmount extensible areas

bigbluebutton-html5/imports/ui/components/floating-window/component.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
 import { useEffect, useRef } from 'react';
 import Draggable from 'react-draggable';
 import Styled from './styles';
@@ -10,7 +11,7 @@ interface FloatingWindowProps {
   backgroundColor: string;
   boxShadow: string;
   isDraggable: boolean;
-  renderFunction: (element: HTMLElement) => void;
+  renderFunction: (element: HTMLElement) => ReactDOM.Root;
 }
 
 const renderComponent = (
@@ -45,9 +46,17 @@ const FloatingWindow: React.FC<FloatingWindowProps> = ({
   const elementRef = useRef(null);
 
   useEffect(() => {
+    let rootRef: ReactDOM.Root | null;
     if (elementRef.current && renderFunction) {
-      renderFunction(elementRef.current);
+      rootRef = renderFunction(elementRef.current);
     }
+
+    return () => {
+      // extensible area injected by content functions have to
+      // be explicitly unmounted, because plugins use a different
+      // instance of ReactDOM
+      if (rootRef) rootRef.unmount();
+    };
   }, [elementRef]);
 
   const componentToRender = renderComponent(

bigbluebutton-html5/imports/ui/components/generic-content/generic-content-item/component.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import * as ReactDOM from 'react-dom/client';
 import { GenericContentItemProps } from './types';
 
 const GenericContentItem: React.FC<GenericContentItemProps> = (props) => {
@@ -9,9 +10,17 @@ const GenericContentItem: React.FC<GenericContentItemProps> = (props) => {
   const elementRef = useRef(null);
 
   useEffect(() => {
+    let rootRef: ReactDOM.Root | null;
     if (elementRef.current && renderFunction) {
-      renderFunction(elementRef.current);
+      rootRef = renderFunction(elementRef.current);
     }
+
+    return () => {
+      // extensible area injected by content functions have to
+      // be explicitly unmounted, because plugins use a different
+      // instance of ReactDOM
+      if (rootRef) rootRef.unmount();
+    };
   }, [elementRef, renderFunction]);
 
   const style: React.CSSProperties = {

bigbluebutton-html5/imports/ui/components/generic-content/generic-content-item/types.ts

@@ -1,4 +1,6 @@
+import * as ReactDOM from 'react-dom/client';
+
 export interface GenericContentItemProps {
-    renderFunction: (element: HTMLElement) => void;
+    renderFunction: (element: HTMLElement) => ReactDOM.Root;
     width?: string;
 }

bigbluebutton-html5/imports/ui/components/generic-content/types.ts

@@ -1,3 +1,4 @@
+import * as ReactDOM from 'react-dom/client';
 import { GenericContentMainArea } from 'bigbluebutton-html-plugin-sdk';
 import { GenericContentMainArea as GenericContentMainAreaLayout } from '../layout/layoutTypes';
 
@@ -19,6 +20,6 @@ export interface GenericContentSidekickContainerProps {
 export interface GenericSidekickContentProps {
     layoutContextDispatch: (...args: unknown[]) => void;
     genericContentId: string;
-    renderFunction: (element: HTMLElement) => void;
+    renderFunction: (element: HTMLElement) => ReactDOM.Root;
     genericContentLabel: string;
 }