chore: Move editor into codebase (#2930)

app/hooks/useComponentSize.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+export default function useComponentSize(
+  ref: React.RefObject<HTMLElement>
+): { width: number; height: number } {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(({ target }) => {
+        if (
+          size.width !== target.clientWidth ||
+          size.height !== target.clientHeight
+        ) {
+          setSize({ width: target.clientWidth, height: target.clientHeight });
+        }
+      });
+    });
+
+    if (ref.current) {
+      sizeObserver.observe(ref.current);
+    }
+
+    return () => sizeObserver.disconnect();
+  }, [ref]);
+
+  return size;
+}

app/hooks/useDictionary.ts

@@ -72,3 +72,5 @@ export default function useDictionary() {
     };
   }, [t]);
 }
+
+export type Dictionary = ReturnType<typeof useDictionary>;

app/hooks/useMediaQuery.ts

@@ -6,15 +6,12 @@ export default function useMediaQuery(query: string): boolean {
   useEffect(() => {
     if (window.matchMedia) {
       const media = window.matchMedia(query);
-
       if (media.matches !== matches) {
         setMatches(media.matches);
       }
-
       const listener = () => {
         setMatches(media.matches);
       };
-
       media.addListener(listener);
       return () => media.removeListener(listener);
     }

app/hooks/useViewportHeight.ts

@@ -0,0 +1,24 @@
+import { useLayoutEffect, useState } from "react";
+
+export default function useViewportHeight(): number | void {
+  // https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#browser_compatibility
+  // Note: No support in Firefox at time of writing, however this mainly exists
+  // for virtual keyboards on mobile devices, so that's okay.
+  const [height, setHeight] = useState<number>(
+    () => window.visualViewport?.height || window.innerHeight
+  );
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setHeight(() => window.visualViewport?.height || window.innerHeight);
+    };
+
+    window.visualViewport?.addEventListener("resize", handleResize);
+
+    return () => {
+      window.visualViewport?.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return height;
+}