65 lines · 1.9 KB · TypeScript
RawDownload
import { TextInputWrapper } from "expo-paste-input";import { useImperativeHandle, useRef } from "react";import { TextInput, type TextInput as RNTextInput } from "react-native"; import { MOBILE_TYPOGRAPHY } from "../lib/typography";import { useThemeColor } from "../lib/useThemeColor";import { useNativePaste } from "../lib/useNativePaste";import type { ComposerEditorProps } from "./T3ComposerEditor.types"; export function ComposerEditor({  ref,  skills: _skills,  selection,  onPasteImages,  style,  textStyle,  contentInsetVertical = 0,  ...props}: ComposerEditorProps) {  const inputRef = useRef<RNTextInput>(null);  const foregroundColor = useThemeColor("--color-foreground");  const placeholderColor = useThemeColor("--color-placeholder");  const handlePaste = useNativePaste((uris) => onPasteImages?.(uris));   useImperativeHandle(    ref,    () => ({      focus: () => inputRef.current?.focus(),      blur: () => inputRef.current?.blur(),      setSelection: (nextSelection) =>        inputRef.current?.setSelection(nextSelection.start, nextSelection.end),    }),    [],  );   return (    <TextInputWrapper onPaste={handlePaste} style={[{ minHeight: 0 }, style]}>      <TextInput        ref={inputRef}        {...props}        selection={selection}        onSelectionChange={(event) => props.onSelectionChange?.(event.nativeEvent.selection)}        multiline={props.multiline ?? true}        placeholderTextColor={placeholderColor}        style={[          {            flex: 1,            minHeight: 0,            color: foregroundColor,            fontFamily: "DMSans_400Regular",            ...MOBILE_TYPOGRAPHY.composer,            paddingVertical: contentInsetVertical,          },          textStyle,        ]}      />    </TextInputWrapper>  );} export type {  ComposerEditorHandle,  ComposerEditorProps,  ComposerEditorSelection,} from "./T3ComposerEditor.types";