From 689cc81b12ca13c7affb948b43ea536e5c95202c Mon Sep 17 00:00:00 2001
From: Sergey Petushkov <petushkov.sergey@gmail.com>
Date: Wed, 10 Jul 2024 13:27:08 +0200
Subject: [PATCH] fix(browser-repl): forward ref on the themed shell component
 (#2070)

---
 packages/browser-repl/src/components/shell.tsx | 11 ++++++-----
 packages/browser-repl/src/index.spec.tsx       | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 packages/browser-repl/src/index.spec.tsx

diff --git a/packages/browser-repl/src/components/shell.tsx b/packages/browser-repl/src/components/shell.tsx
index cfd7026ee..35c2ad510 100644
--- a/packages/browser-repl/src/components/shell.tsx
+++ b/packages/browser-repl/src/components/shell.tsx
@@ -462,10 +462,11 @@ export class _Shell extends Component<ShellProps, ShellState> {
 
 type DefaultProps = keyof (typeof _Shell)['defaultProps'];
 
-export const Shell = function ShellWithDarkMode(
-  props: Omit<ShellProps, DefaultProps | 'darkMode'> &
+export const Shell = React.forwardRef<
+  _Shell,
+  Omit<ShellProps, DefaultProps | 'darkMode'> &
     Partial<Pick<ShellProps, DefaultProps>>
-) {
+>(function ShellWithDarkMode(props, ref) {
   const darkMode = useDarkMode();
-  return <_Shell darkMode={darkMode} {...props}></_Shell>;
-};
+  return <_Shell darkMode={darkMode} ref={ref} {...props}></_Shell>;
+});
diff --git a/packages/browser-repl/src/index.spec.tsx b/packages/browser-repl/src/index.spec.tsx
new file mode 100644
index 000000000..0d5783bea
--- /dev/null
+++ b/packages/browser-repl/src/index.spec.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Shell } from './index';
+import { expect } from '../testing/chai';
+import { mount } from '../testing/enzyme';
+
+describe('Shell', function () {
+  it('should provide access to ref', function () {
+    const ref = React.createRef<any>();
+    mount(<Shell ref={ref} runtime={{} as any}></Shell>);
+    expect(ref.current).to.have.property('state');
+    expect(ref.current).to.have.property('props');
+    expect(ref.current).to.have.property('editor');
+  });
+});