tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

React Editor wrapper sets "Write Preview" in input

Open zasuh opened this issue 1 year ago • 6 comments

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>

zasuh avatar Nov 17 '23 13:11 zasuh

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

and

If set a placeholder, the html code is showing

jinkook0126 avatar Dec 04 '23 14:12 jinkook0126

@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.

ungureanustefan avatar Dec 08 '23 15:12 ungureanustefan

weird.

@ungureanustefan I ended up doing the same as #1

scr2em avatar Dec 14 '23 09:12 scr2em

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()}}

junglast avatar Dec 18 '23 10:12 junglast

Any updates on this? I'm getting same issue

JamieColclough avatar Feb 28 '24 09:02 JamieColclough