ref(feedback): Let CropCorner inherit the existing h prop (#12814)

I noticed this after
#12784, but the
`<CropCorner>` wasn't inside the `ScreenshotEditorFactory()` function.
So of course it wasn't getting access to the `h` ref that is passed in.
That variable is what the `<div>` gets transpiled into -> it becomes
`h.createElement('div')`.

So what i'm doing is moving `CropCorner` into a `CropCornerFactory` so
we can pass `h` in and hopefully not have the extra `import .. from
'preact';` in the 2nd bundle.

Related to #12535

packages/feedback/src/screenshot/components/CropCorner.tsx

@@ -0,0 +1,38 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function CropCornerFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function CropCorner({
+    top,
+    left,
+    corner,
+    onGrabButton,
+  }: {
+    top: number;
+    left: number;
+    corner: string;
+    onGrabButton: (e: Event, corner: string) => void;
+  }): VNode {
+    return (
+      <button
+        class={`editor__crop-corner editor__crop-corner--${corner} `}
+        style={{
+          top: top,
+          left: left,
+        }}
+        onMouseDown={e => {
+          e.preventDefault();
+          onGrabButton(e, corner);
+        }}
+        onClick={e => {
+          e.preventDefault();
+        }}
+      ></button>
+    );
+  };
+}

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

@@ -5,6 +5,7 @@ import type { ComponentType, VNode, h as hType } from 'preact';
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
+import CropCornerFactory from './CropCorner';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshotFactory } from './useTakeScreenshot';
 
@@ -64,7 +65,7 @@ const getContainedSize = (img: HTMLCanvasElement): Box => {
 };
 
 export function ScreenshotEditorFactory({
-  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+  h,
   hooks,
   imageBuffer,
   dialog,
@@ -74,6 +75,7 @@ export function ScreenshotEditorFactory({
 
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+    const CropCorner = CropCornerFactory({ h });
 
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
@@ -328,32 +330,3 @@ export function ScreenshotEditorFactory({
     );
   };
 }
-
-function CropCorner({
-  top,
-  left,
-  corner,
-  onGrabButton,
-}: {
-  top: number;
-  left: number;
-  corner: string;
-  onGrabButton: (e: Event, corner: string) => void;
-}): VNode {
-  return (
-    <button
-      class={`editor__crop-corner editor__crop-corner--${corner} `}
-      style={{
-        top: top,
-        left: left,
-      }}
-      onMouseDown={e => {
-        e.preventDefault();
-        onGrabButton(e, corner);
-      }}
-      onClick={e => {
-        e.preventDefault();
-      }}
-    ></button>
-  );
-}