From 2575e708e28081f534d4718e9ed1d951821e7d1a Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 6 Mar 2024 20:10:14 +0000
Subject: [PATCH] Illustrate accessing the view

---
 src/editor/codemirror/reactWidgetExtension.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/editor/codemirror/reactWidgetExtension.tsx b/src/editor/codemirror/reactWidgetExtension.tsx
index bdaef3e0a..e4702e0f8 100644
--- a/src/editor/codemirror/reactWidgetExtension.tsx
+++ b/src/editor/codemirror/reactWidgetExtension.tsx
@@ -10,11 +10,17 @@ import { useCallback } from "react";
 import { supportedLanguages, useSettings } from "../../settings/settings";
 import { PortalFactory } from "./CodeMirror";
 
+interface ExampleReactComponentProps {
+  view: EditorView;
+}
+
 /**
  * An example react component that we use inside a CodeMirror widget as
  * a proof of concept.
  */
-const ExampleReactComponent = () => {
+const ExampleReactComponent = ({ view }: ExampleReactComponentProps) => {
+  console.log("We have access to the view here", view);
+
   // This is a weird thing to do in a CodeMirror widget but proves the point that
   // we can use React features to communicate with the rest of the app.
   const [settings, setSettings] = useSettings();
@@ -50,9 +56,12 @@ class ExampleReactBlockWidget extends WidgetType {
     super();
   }
 
-  toDOM() {
+  toDOM(view: EditorView) {
     const dom = document.createElement("div");
-    this.portalCleanup = this.createPortal(dom, <ExampleReactComponent />);
+    this.portalCleanup = this.createPortal(
+      dom,
+      <ExampleReactComponent view={view} />
+    );
     return dom;
   }