Function InteractiveArea

src/components/InteractiveArea.tsx:22–283

({ isShow, setIsOpenModal }: Props)

}

const InteractiveArea = ({ isShow, setIsOpenModal }: Props) => {
  const {
    data,
    lessonData,
    step,
    lastStep,
    nextStep,
    prevStep,
    success,
    setSuccess,
    match,
    setMatch,
    error,
    setError,
    lockError,
  } = useContext(InteractiveAreaContext);

  const { formatMessage } = useIntl();
  const regexInput = useRef<HTMLInputElement>(null);
  const [regex, setRegex] = useState(data.initialValue || '');
  const [flags, setFlags] = useState(data.initialFlags || '');
  const [content, setContent] = useState('');
  const [isChanged, setIsChanged] = useState(false);
  const [skip, setSkip] = useState(false);

  const skipStep = () => {
    setRegex(data.regex[0]);
    setFlags(data.flags);
    setError(false);
    setSuccess(true);
    setMatch(true);
    setSkip(true);
  };

  useEffect(() => {
    setCaretPosition(regexInput.current, data.cursorPosition || 0);

    if (lastStep > step) {
      const newRegex = data.regex?.[0];
      const newFlags = data.flags;

      setRegex(newRegex);
      setFlags(newFlags);
      setSuccess(true);
      applyRegex(newRegex, newFlags);

      return;
    }

    if (step === lessonData.length - 1) {
      confetti({
        particleCount: 400,
        startVelocity: 30,
        gravity: 0.5,
        spread: 350,
        origin: {
          x: 0.5,
          y: 0.4,