From 5850106eefce4b4917a4c3ca72393b077429b7a2 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 2 Nov 2023 22:33:16 +0100
Subject: [PATCH] restore react hooks

---
 packages/react/src/hooks/useKeydown.mjs | 10 ++++++++++
 packages/react/src/hooks/useWidgets.mjs | 13 +++++++++++++
 packages/react/src/index.js             |  2 ++
 3 files changed, 25 insertions(+)
 create mode 100644 packages/react/src/hooks/useKeydown.mjs
 create mode 100644 packages/react/src/hooks/useWidgets.mjs

diff --git a/packages/react/src/hooks/useKeydown.mjs b/packages/react/src/hooks/useKeydown.mjs
new file mode 100644
index 000000000..88d1cb940
--- /dev/null
+++ b/packages/react/src/hooks/useKeydown.mjs
@@ -0,0 +1,10 @@
+import { useLayoutEffect } from 'react';
+
+// set active pattern on ctrl+enter
+const useKeydown = (callback) =>
+  useLayoutEffect(() => {
+    window.addEventListener('keydown', callback, true);
+    return () => window.removeEventListener('keydown', callback, true);
+  }, [callback]);
+
+export default useKeydown;
diff --git a/packages/react/src/hooks/useWidgets.mjs b/packages/react/src/hooks/useWidgets.mjs
new file mode 100644
index 000000000..e7ca136a1
--- /dev/null
+++ b/packages/react/src/hooks/useWidgets.mjs
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { updateWidgets } from '@strudel/codemirror';
+
+// i know this is ugly.. in the future, repl needs to run without react
+export function useWidgets(view) {
+  const [widgets, setWidgets] = useState([]);
+  useEffect(() => {
+    if (view) {
+      updateWidgets(view, widgets);
+    }
+  }, [view, widgets]);
+  return { widgets, setWidgets };
+}
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 8c85de9c5..846c42574 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -6,6 +6,8 @@ export { default as useHighlighting } from './hooks/useHighlighting'; // !SSR
 export { default as useStrudel } from './hooks/useStrudel'; // !SSR
 export { default as usePostMessage } from './hooks/usePostMessage';
 export { default as usePatternFrame } from './hooks/usePatternFrame';
+export { default as useKeydown } from './hooks/useKeydown';
+export { useWidgets } from './hooks/useWidgets';
 export { default as useEvent } from './hooks/useEvent';
 export { default as strudelTheme } from './themes/strudel-theme';
 export { default as teletext } from './themes/teletext';