Tui.editor: Change in mode causes form submit

[finleysg]

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

[lovemine]

may be modeSwitch.js 93, 96 line
button markup should use type="button" attribute. like below unless it submit the form.
```javascript
${i18n.get('Markdown')}
````

refer : MDN Button

[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?

[finleysg]

I will take a look at this suggestion later today and report back. Thank you.

[finleysg]

Similar to #871, I can not figure out how to listen to that event through the public typescript api.

And I can confirm that handling any of the 5 events that are exposed does not change the behavior.

[MrTomek]

+1

[seonim-ryu]

@finleysg I understood and the example I gave didn't consider the case of thinking of type.

Similar to #871, I can not figure out how to listen to that event through the public typescript api.

And I can confirm that handling any of the 5 events that are exposed does not change the behavior.

I think the events provided by the editor as external APIs are limited, so the Editor will organize the events that are used internally and the events to be provided by the public APIs. Only after doing this, I can add the type of event you want to use. This work is part of the editor's next release plan.