Function EditableList

src/component/Options.tsx:20–124

()

} from '../storage';

const EditableList = () => {
  const [text, setText] = useState('');
  const [open, setOpen] = useState(false);
  const [severity, setSeverity] = useState<'success' | 'error'>('success');
  const [message, setMessage] = useState('');

  useEffect(() => {
    (async () => {
      const allowlist = computeAllowlist(await getStorageItem('allowlist'));
      setText(allowlist.join('\n'));
    })();
  }, []);

  return (
    <>
      <Typography variant="h6">Allowlist</Typography>
      <Typography variant="body2">
        Domains to allow auto-completion. Use one regex per line.
      </Typography>

      <TextField
        variant="standard"
        fullWidth
        value={text}
        multiline
        rows={10}
        sx={{
          '& .MuiInputBase-root': {
            fontSize: '0.8rem',
            fontFamily: 'monospace',
          },
        }}
        onChange={(e) => setText(e.target.value)}
      ></TextField>

      <Button
        variant="text"
        onClick={() => {
          const lst = text
            .split('\n')
            .map((x) => x.trim())
            .filter((x) => x !== '');
          for (const rule of lst) {
            try {
              new RegExp(rule);
            } catch (e) {
              setSeverity('error');
              setMessage(`Invalid regex: ${rule}`);
              setOpen(true);
              return;
            }
          }
          setStorageItem('allowlist', { defaults: defaultAllowlist, current: lst });
          setSeverity('success');
          setMessage('Saved successfully');
          setOpen(true);
        }}
        sx={{