nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
16.91k stars 1.71k forks source link

React Editor wrapper sets "Write Preview" in input #3206

Open zasuh opened 7 months ago

zasuh commented 7 months ago

Describe the bug

When the editor first loads I'm setting an initial value or an empty string. What it does instead is puts "Write Preview" inside my input.

Expected behavior

I expect the editor to be empty and to only show the placeholder that I set for it.

Screenshots

<div className="px-5">
        <p className="font-secondary font-bold mb-2">{title}</p>
        <Controller
          name={name}
          control={control}
          render={({ field: { onChange, value } }) => (
            <StyledEditor
              height="300px"
              initialValue={value}
              onChange={() => {
                const md = editorRef?.current ? editorRef?.current.getInstance().getMarkdown() : '';
                onChange(md);
              }}
              ref={editorRef}
              useCommandShortcut
              initialEditType="wysiwyg"
              toolbarItems={[['bold']]}
              hideModeSwitch
            />
          )}
          rules={{ minLength: 20, maxLength: 625 }}
        />
      </div>
jinkook0126 commented 7 months ago

Hi, I'm in the same situation right now. Did you solve it?

and

If set a placeholder, the html code is showing

ungureanustefan commented 6 months ago

@zasuh @jinkook0126

I've had a similar issue. But in my case I kinda used a hacky solution. And I didn't add a placeholder.

I've used two approaches:

  1. Wysiwyg approach Set the initialEditType="wysiwyg" and instead of passing it an empty string as the initial value, pass it " " (blank space). The "wysiwyg" mode will remove the blank space and keep it as "" by default.

  2. Markdown approach For this one, when I had initialEditType="markdown", I also set it to " ", but trimmed the value when saving it / sending it to the back-end.

Hope it helps.

scr2em commented 6 months ago

weird.

@ungureanustefan I ended up doing the same as #1

junglast commented 6 months ago

Facing the same issue. I fixed it by executing reset() on onLoad event, and setting placeHolder props to an arbitrary value(not empty string).

example)

placeHolder="abc"
onLoad={(params) => {params.reset()}}
JamieColclough commented 4 months ago

Any updates on this? I'm getting same issue