import { render } from "ink";
import { useState } from "react";
import { TextArea } from "react-ink-textarea";

const App = () => {
  const [submitted, setSubmitted] = useState("");
  const [focus, setFocus] = useState(true);

  return (
    <TextArea
      focus={focus}
      placeholder="Type your message here..."
      onSubmit={(value) => {
        setSubmitted(value);
        setFocus(false);
      }}
    />
  );
};

render(<App />);

import { Box, Text } from "ink";
import { useState } from "react";
import { TextArea, type TLabels } from "react-ink-textarea";

const labels: TLabels = [{ pattern: /#\w+/g, label: "tag" }];
const styles = { tag: { color: "magenta" } };

const Editor = () => {
  const [value, setValue] = useState("hello #world");
  const [cursor, setCursor] = useState<[number, number]>([0, 0]);
  const [info, setInfo] = useState("text");

  return (
    <Box flexDirection="column">
      <TextArea
        focus
        value={value}
        cursorPosition={cursor}
        labels={labels}
        styles={styles}
        onChange={setValue}
        // (pos, labelType, chunkIndex) — labelType is "text" outside any match
        onCursorChange={(pos, type, idx) => {
          setCursor(pos);
          setInfo(type === "text" ? "text" : `${type}#${idx}`);
        }}
        onSubmit={() => {}}
      />
      <Text dimColor>under cursor: {info}</Text>
    </Box>
  );
};

import { TextArea, LineNumberPrefix } from "react-ink-textarea";

<TextArea
  focus
  highlightActiveLine
  activeLineColor="#222"
  initialLineCount={6}
  onSubmit={() => {}}
  linePrefix={LineNumberPrefix}
/>;

import { Text } from "ink";
import { TextArea, LineNumber } from "react-ink-textarea";

<TextArea
  focus
  highlightActiveLine
  initialLineCount={6}
  onSubmit={() => {}}
  linePrefix={({
    lineNumber,
    totalLines,
    isActiveLine,
    isContinuationLine,
    isVirtualLine,
  }) =>
    isContinuationLine ? (
      <Text color="gray">  ↳ </Text>
    ) : (
      <Text>
        <LineNumber
          lineNumber={lineNumber}
          totalLines={totalLines}
          isActive={isActiveLine}
          padChar=" "
          activeColor="cyan"
        />
        <Text color={isVirtualLine ? "gray" : "white"}> │ </Text>
      </Text>
    )
  }
/>;

import { useMemo } from "react";
import { TextArea, type TLabels } from "react-ink-textarea";

const KNOWN_USERS = new Set(["alice", "bob", "carol"]);

const Editor = () => {
  const labels = useMemo<TLabels>(
    () => [
      { pattern: /https?:\/\/\S+/g, label: "url" },
      { pattern: /#\w+/g, label: "tag" },
      // function form: leave unknown @handles unstyled by returning undefined
      {
        pattern: /@(\w+)/g,
        label: (m) => (KNOWN_USERS.has(m[1]) ? "mention" : undefined),
      },
    ],
    [],
  );

  return (
    <TextArea
      focus
      onSubmit={() => {}}
      showInvisibles={{ space: false, tab: true, newline: false }}
      labels={labels}
      styles={{
        text: { color: "white" },
        invisibleCharacter: { color: "gray", dim: true },
        url: { color: "blue", underline: true },
        tag: { color: "magenta" },
        mention: { color: "green", bold: true },
      }}
    />
  );
};

import { Box, useFocusManager, useFocus } from "ink";
import { useState } from "react";
import { TextArea } from "react-ink-textarea";
import TextInput from "ink-text-input";

const Form = () => {
  const { focusNext, focusPrevious } = useFocusManager();
  const subject = useFocus({ id: "subject" });
  const body = useFocus({ id: "body" });
  const tags = useFocus({ id: "tags" });
  const [s, setS] = useState("");
  const [b, setB] = useState("");
  const [t, setT] = useState("");

  return (
    <Box flexDirection="column" gap={1}>
      <TextInput value={s} onChange={setS} focus={subject.isFocused} />
      <TextArea
        focus={body.isFocused}
        value={b}
        onChange={setB}
        onSubmit={() => {}}
        onFirstLineUp={focusPrevious}
        onLastLineDown={focusNext}
        onFirstCharacterLeft={focusPrevious}
        onLastCharacterRight={focusNext}
      />
      <TextInput value={t} onChange={setT} focus={tags.isFocused} />
    </Box>
  );
};

import { Box, Text } from "ink";
import { useState } from "react";
import { TextArea } from "react-ink-textarea";

const COMMANDS = ["/help", "/quit", "/train"];

const Composer = () => {
  const [value, setValue] = useState("");
  const [sel, setSel] = useState(0);
  const open = value.startsWith("/");

  return (
    <Box flexDirection="column">
      <TextArea
        focus
        value={value}
        onChange={setValue}
        onSubmit={(v) => {
          if (!open) console.log(v);
        }}
        // While the picker is open, give it the arrows + Enter; typing still flows.
        disableArrowNavigation={open}
        keybindings={open ? { Enter: false } : undefined}
        onTab={(shift) =>
          setSel((i) => (i + (shift ? -1 : 1) + COMMANDS.length) % COMMANDS.length)
        }
      />
      {open && (
        <Box flexDirection="column">
          {COMMANDS.map((c, i) => (
            <Text key={c} color={i === sel ? "cyan" : undefined}>
              {i === sel ? "▸ " : "  "}
              {c}
            </Text>
          ))}
        </Box>
      )}
    </Box>
  );
};

import { Box, Text } from "ink";
import { useState } from "react";
import { TextArea } from "react-ink-textarea";

const CodeEditor = () => {
  const [width, setWidth] = useState(0);

  return (
    <Box flexDirection="column">
      <TextArea
        focus
        onSubmit={() => {}}
        viewportLines={20}
        tabWidth={2}
        autoNewLineLimit={1}
        showInvisibles
        keybindings={{
          // Single-undo-stack ergonomics: defer undo to the host (e.g. file-level)
          "Ctrl+Z": false,
          // Keep Shift+Enter free for the parent's "submit-with-newline" gesture
          "Shift+Enter": false,
        }}
        onDimensions={setWidth}
      />
      <Text dimColor>width: {width} cols</Text>
    </Box>
  );
};

import { useRef } from "react";
import { TextArea, type TextAreaHandle } from "react-ink-textarea";

const Composer = () => {
  const ref = useRef<TextAreaHandle>(null);
  return (
    <TextArea
      ref={ref}
      focus
      onSubmit={() => {}}
      onTab={() => ref.current?.insert("/help ")}
    />
  );
};

<TextArea
  focus
  onSubmit={onSubmit}
  keybindings={{
    "Ctrl+Z": false,      // disable undo
    "Shift+Enter": false, // disable Shift+Enter newline (other newline chords still work)
    "Alt+B": false,       // disable previous-word jump
  }}
/>