Function Playground

src/components/PlaygroundEditor.tsx:44–277

()

const initialContent = ContentState.createFromText(initText);

const Playground = () => {
  const { formatMessage } = useIntl();
  const regexInput = useRef<HTMLInputElement>(null);
  const editor = useRef(null);
  const [hasChange, setHasChange] = useState(false);

  const [state, setState] = useState({
    regex: '',
    flags: '',
    editorState: EditorState.createEmpty(),
  });

  const [initial, setInitial] = useState({
    regex: state.regex,
    flags: state.flags,
    text: state.editorState?.getCurrentContent()?.getPlainText() || '',
  });

  const onChangeFlags = flags => {
    let newFlags = '';
    if (flags.includes('g')) {
      newFlags += 'g';
    }
    if (flags.includes('m')) {
      newFlags += 'm';
    }
    if (flags.includes('i')) {
      newFlags += 'i';
    }
    setState({
      regex: state.regex,
      flags: newFlags,
      editorState: checkRegex(state.regex, newFlags, state.editorState),
    });
    setHasChange(initial.flags !== newFlags);
  };

  const onChangeRegex = (event: FormEvent<HTMLInputElement>) => {
    const regex = event?.currentTarget?.value || '';
    setState({ ...state, regex, editorState: checkRegex(regex, state.flags, state.editorState) });
    setHasChange(initial.regex !== regex);
  };

  const onChangeContent = (editorState: EditorState) => {
    setState({ ...state, editorState });
    const nextText = editorState.getCurrentContent().getPlainText();
    if (initial.text !== nextText) {
      setHasChange(true);
    }
  };

  const checkRegex = (regex, flags, editorState) => {
    let rowIndex = 0;
    let matchCount = 0;

    if (!regex) {
      const content = editorState.getCurrentContent();
      return EditorState.createWithContent(content);