Change in mode causes form submit

Describe the bug

I have the editor embedded in a form (thanks to the changes in v2.1). I would like to allow switching between wysisyg and markdown modes, but clicking those buttons submits the parent form.

This may be a Formik integration issue and not a bug per se, but I’m struggling to find a way to intercept or change this behavior.

To Reproduce

Here is a simple form where I am seeing the behavior.

import { Formik } from "formik";
import React from "react";
import Form from "react-bootstrap/Form";
import * as yup from "yup";

import { Editor } from "@toast-ui/react-editor";

import SubmitButton from "../../components/SubmitButton";
import { PageContent } from "../../models/Policies";
import { IPageContentViewProps } from "./PageContentView";

export interface IPageContentEditProps extends IPageContentViewProps {
    Save: (policy: PageContent) => void;
}

const schema = yup.object({
    title: yup.string().max(120).required(),
    // content: yup.string().required(),
});

const PageContentEdit: React.FC<IPageContentEditProps> = (props) => {
    const pageContent = props.pageContent;
    const editorRef = React.createRef<Editor>();

    return (
        <div>
            <Formik
                validationSchema={schema}
                onSubmit={(values) => {
                    const newModel = new PageContent(values);
                    newModel.id = pageContent.id;
                    newModel.content = editorRef.current?.getInstance().getMarkdown() || pageContent.content;
                    props.Save(newModel);
                }}
                initialValues={pageContent}>
                {({ handleSubmit, handleChange, handleBlur, values, touched, errors }) => (
                    <Form noValidate onSubmit={handleSubmit}>
                        <Form.Group controlId="policy.Title">
                            <Form.Label>Title</Form.Label>
                            <Form.Control
                                name="title"
                                placeholder="Title"
                                value={values.title}
                                isValid={touched.title && !errors.title}
                                isInvalid={!!errors.title}
                                onChange={handleChange}
                                onBlur={handleBlur}
                            />
                            <Form.Control.Feedback type="invalid">{errors.title}</Form.Control.Feedback>
                        </Form.Group>
                        <Editor
                            initialValue={values.content}
                            previewStyle="tab"
                            height="300px"
                            initialEditType="wysiwyg"
                            useCommandShortcut={true}
                            useDefaultHTMLSanitizer={true}
                            hideModeSwitch={false}
                            ref={editorRef}
                        />
                        <SubmitButton />
                    </Form>
                )}
            </Formik>
        </div>
    );
};

export default PageContentEdit;

Expected behavior

An editor positioned within a form should not trigger submit when the mode is changed.

Additional context

tui.editor version: 2.1.0 formik version: 2.0.8

[seonim-ryu]

@finleysg In order to solve the problem you are struggling with, you need to be aware of the event that occur each time you click the button to change the WYSIWYG and Markdown modes in the editor and you can submit a form from that event.

If what I understand is correct, it is not exposed in the API documentation, but I think you can use the changeMode event. This event is used inside the Editor, but it can be used by calling it like this. Below is an example when using the Editor.

const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical',
  height: '500px',
  initialValue: content
});

editor.on('changeMode', (ev) => {
  console.log(`current mode: ${ev}`);
});

If you use React wrapper, you can use it like this.

class MyComponent extends React.Component {
  handleChangeMode = ev => {
    console.log(`current mode: ${ev}`);
  };

  render() {
    return (
      <Editor
        previewStyle="vertical"
        height="400px"
        initialEditType="markdown"
        onChangeMode={this.handleChangeMode}
      />
    );
  }
}

Can you confirm that this is correct?

[lovemine]

may be modeSwitch.js 93, 96 line button markup should use type=“button” attribute. like below unless it submit the form.

  <button type="button" class="te-switch-button markdown">${i18n.get('Markdown')}</button>

refer : MDN Button