React Editor wrapper sets "Write Preview" in input

[Žane Suhadolnik]

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]

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

and

If set a placeholder, the html code is showing

[ungureanustefan]

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

[Mohamed Abdelgwad]

weird.

@ungureanustefan I ended up doing the same as #1

[junglast]

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