Preserve Editor State (#151)

src-web/components/core/PlainInput.tsx

@@ -1,13 +1,14 @@
 import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, FocusEvent } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { IconButton } from './IconButton';
 import type { InputProps } from './Input';
 import { HStack } from './Stacks';
 
-export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type'> &
+export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type' | 'stateKey'> &
   Pick<HTMLAttributes<HTMLInputElement>, 'onKeyDownCapture'> & {
+    onFocusRaw?: HTMLAttributes<HTMLInputElement>['onFocus'];
     type?: 'text' | 'password' | 'number';
     step?: number;
   };
@@ -33,7 +34,10 @@ export function PlainInput({
   type = 'text',
   validate,
   autoSelect,
-  ...props
+  placeholder,
+  autoFocus,
+  onKeyDownCapture,
+  onFocusRaw,
 }: PlainInputProps) {
   const [obscured, setObscured] = useStateWithDeps(type === 'password', [type]);
   const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
@@ -41,14 +45,15 @@ export function PlainInput({
   const inputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const handleFocus = useCallback(() => {
+  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {
+    onFocusRaw?.(e);
     setFocused(true);
     if (autoSelect) {
       inputRef.current?.select();
       textareaRef.current?.select();
     }
     onFocus?.();
-  }, [autoSelect, onFocus]);
+  }, [autoSelect, onFocus, onFocusRaw]);
 
   const handleBlur = useCallback(() => {
     setFocused(false);
@@ -135,7 +140,9 @@ export function PlainInput({
             className={classNames(commonClassName, 'h-auto')}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            {...props}
+            autoFocus={autoFocus}
+            placeholder={placeholder}
+            onKeyDownCapture={onKeyDownCapture}
           />
         </HStack>
         {type === 'password' && (