Show errors / queue on message.

Focus editor / box properly.

src/lib/TextAreaAutoSize.tsx

@@ -1,20 +1,24 @@
 import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
 import { useEffect, useRef } from "preact/hooks";
+import { internalSubscribe } from "./eventEmitter";
 
 type TextAreaAutoSizeProps = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'style' | 'value'> & TextAreaProps & {
-    autoFocus?: boolean,
-    minHeight?: number,
-    maxRows?: number,
+    forceFocus?: boolean
+    autoFocus?: boolean
+    minHeight?: number
+    maxRows?: number
     value: string
+
+    id?: string
 };
 
 export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
-    const { autoFocus, minHeight, maxRows, value, padding, lineHeight, hideBorder, children, as, ...textAreaProps } = props;
+    const { autoFocus, minHeight, maxRows, value, padding, lineHeight, hideBorder, forceFocus, children, as, ...textAreaProps } = props;
     const line = lineHeight ?? DEFAULT_LINE_HEIGHT;
 
     const heightPadding = ((padding ?? DEFAULT_TEXT_AREA_PADDING) + (hideBorder ? 0 : TEXT_AREA_BORDER_WIDTH)) * 2;
     const height = Math.max(Math.min(value.split('\n').length, maxRows ?? Infinity) * line + heightPadding, minHeight ?? 0);
-    console.log(value.split('\n').length, line, heightPadding, height);
+
     const ref = useRef<HTMLTextAreaElement>();
 
     useEffect(() => {
@@ -25,9 +29,9 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
         ["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
 
     useEffect(() => {
-        /* if (props.forceFocus) { // figure out what needed force focus
+        if (forceFocus) {
             ref.current.focus();
-        } */
+        }
 
         if (autoFocus && !inputSelected()) {
             ref.current.focus();
@@ -52,6 +56,16 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
         return () => document.body.removeEventListener("keydown", keyDown);
     }, [ref]);
 
+    useEffect(() => {
+        function focus(id: string) {
+            if (id === props.id) {
+                ref.current.focus();
+            }
+        }
+
+        return internalSubscribe("TextArea", "focus", focus);
+    }, [ref]);
+
     return <TextArea
         ref={ref}
         value={value}