import { TextInputWrapper } from "expo-paste-input";import { useImperativeHandle, useRef } from "react";import { TextInput, type TextInput as RNTextInput } from "react-native"; import { useFontFamily } from "../lib/useFontFamily";import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";import { useNativePaste } from "../lib/useNativePaste";import type { ComposerEditorProps } from "./T3ComposerEditor.types"; export function ComposerEditor({ ref, skills: _skills, selection, onPasteImages, style, textStyle, contentInsetVertical = 0, singleLineCentered: _singleLineCentered, readOnly = false, ...props}: ComposerEditorProps) { const inputRef = useRef<RNTextInput>(null); const bodyText = useScaledTextRole("body"); const fontFamily = useFontFamily("regular"); 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} editable={(props.editable ?? true) && !readOnly} selection={selection} onSelectionChange={(event) => props.onSelectionChange?.(event.nativeEvent.selection)} multiline={props.multiline ?? true} placeholderTextColorClassName={"accent-placeholder"} className="text-foreground" style={[ { flex: 1, minHeight: 0, fontFamily, ...bodyText, paddingVertical: contentInsetVertical, }, textStyle, ]} /> </TextInputWrapper> );} export type { ComposerEditorHandle, ComposerEditorProps, ComposerEditorSelection,} from "./T3ComposerEditor.types";
import { TextInputWrapper } from "expo-paste-input";
import { useImperativeHandle, useRef } from "react";
import { TextInput, type TextInput as RNTextInput } from "react-native";
import { useFontFamily } from "../lib/useFontFamily";
import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
import { useNativePaste } from "../lib/useNativePaste";
import type { ComposerEditorProps } from "./T3ComposerEditor.types";
export function ComposerEditor({
ref,
skills: _skills,
selection,
onPasteImages,
style,
textStyle,
contentInsetVertical = 0,
singleLineCentered: _singleLineCentered,
readOnly = false,
...props
}: ComposerEditorProps) {
const inputRef = useRef<RNTextInput>(null);
const bodyText = useScaledTextRole("body");
const fontFamily = useFontFamily("regular");
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}
editable={(props.editable ?? true) && !readOnly}
selection={selection}
onSelectionChange={(event) => props.onSelectionChange?.(event.nativeEvent.selection)}
multiline={props.multiline ?? true}
placeholderTextColorClassName={"accent-placeholder"}
className="text-foreground"
style={[
{
flex: 1,
minHeight: 0,
fontFamily,
...bodyText,
paddingVertical: contentInsetVertical,
},
textStyle,
]}
/>
</TextInputWrapper>
);
}
export type {
ComposerEditorHandle,
ComposerEditorProps,
ComposerEditorSelection,
} from "./T3ComposerEditor.types";