Placeholder option not working properly

[ulitol97]

When using YASHE I'd like to have a placeholder text shown when the textarea is empty, like HTML textareas do. I've tried passing the placeholder option, like this:

const options = { placeholder: "My placeholder text" }; const y = Yashe.fromTextArea(textAreaRef.current, options);

but nothing's changing (same issue with YATE).

Maybe this codemirror add-on is missing somewhere?

[mistermboy]

You´ll need to include the Codemirror Placeholder Addon and then I think it will work adding the placeholder option to the textarea. Check the source code of this example.

Let me know if you have any problem :)

[ulitol97]

I've tried with the add-on but I'm afraid I'm not seeing any change yet, even trying and combining these different ways:

• Passing a properties object to YASHE on creation (like in my first comment)
• Changing YASHE's placeholder property after creation (y.setOption("placeholder", "My Placeholder"))
• Adding the placeholder attribute to the textarea element in the HTML (<textarea... placeholder="My Placeholder"/>)

The thing is everything's working normally in another file that uses a basic CodeMirror instance and an options object. In that case, importing some add-ons (placeholder, closetag...) did work:

• <CodeMirror... options={{ placeholder: "My placeholder" }} />

I'm probably missing something here... but maybe the change should come from YASHE, since it is the one eventually building the CodeMirror

[mistermboy]

I was able to make it work changing a little bit the placeholder.js. Use this instead the original and it should work.

Here is a working example

I know it´s not the cleanest solution...I´ll try to integrate it as a YASHE option as soon as possible.

[ulitol97]

The working example looks exactly how I wanted.

I'm finally going to try this, where is the placeholder.js file that must be changed?

[mistermboy]

https://gist.github.com/mistermboy/2f4dea8010a9e176407a3b335a726d20

[ulitol97]

I saw the gist, I meant the original placeholder.js that must be changed with the gist's contents 😅

[mistermboy]

Oh sorry xD Unless you have imported it before, there is no original placeholder.js. I mean, in the working example I was using YASHE via CDN with the new placeholder.js as a script. Let me know if I´m not being clear.

[ulitol97]

Thanks! I managed to make it work. It's a little hacky indeed but it will do for now. I applied the same code on YATE and and got placeholders for it as well 😇