chore(react): proper legacy widget injection & event handling

apps/client/src/widgets/basic_widget.ts

@@ -302,6 +302,8 @@ export class ReactWrappedWidget extends BasicWidget {
         for (const listener of this.listeners[name]) {
             listener(data);
         }
+
+        super.handleEvent(name, data);
     }
 
     registerHandler<T extends EventNames>(name: T, handler: EventHandler) {

apps/client/src/widgets/react/hooks.tsx

@@ -418,26 +418,39 @@ export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext
     noteContext?: NoteContext;
 } = {}) {
     const ref = useRef<HTMLDivElement>(null);
-    const widget = useMemo(widgetFactory, []);
     const parentComponent = useContext(ParentComponent);
 
-    useEffect(() => {
+    // Render the widget once.
-        if (!ref.current) return;
+    const [ widget, renderedWidget ] = useMemo(() => {
+        const widget = widgetFactory();
 
-        const $container = $(ref.current);
+        if (parentComponent) {
-        $container.empty();
+            parentComponent.child(widget);
-        widget.render().appendTo($container);
+        }
 
         if (noteContext && widget instanceof NoteContextAwareWidget) {
-            console.log("Injecting note context", noteContext);
             widget.setNoteContextEvent({ noteContext });
+        }
+        
+        const renderedWidget = widget.render();
+        return [ widget, renderedWidget ];
+    }, [widgetFactory]);
+
+    // Attach the widget to the parent.
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerHTML = "";
+            renderedWidget.appendTo(ref.current);
+        }
+    }, [ renderedWidget ]);
+
+    // Inject the note context.
+    useEffect(() => {
+        console.log("Injecting note context");
+        if (noteContext && widget instanceof NoteContextAwareWidget) {
             widget.activeContextChangedEvent({ noteContext });
         }
-    }, [ widget ]);
+    }, [ noteContext ]);
-
-    if (parentComponent) {
-        parentComponent.child(widget);
-    }    
 
     return <div ref={ref} />
 }