Using Codemirror Addons

[davedawson]

I'd like to take advantage of the Placeholder addon. This requires adding a placeholder attribute to the textarea. Can this react-codemirror component be extended to include the ability to add attributes directly to the textarea element that gets generated?

[cafreeman]

@davedawson Were you ever able to find a way around this? I'm currently in the exact same boat.

I thought I might be able to work around it by using the following snippet in the parent's componentDidMount method, but no luck:

this.refs.editor.refs.textarea.placeholder = 'Ctrl + Space for suggestions';

It DOES set the placeholder on the textarea, but by that point it appears to be too late.

[cafreeman]

@davedawson @JedWatson FWIW, I've created a fork of this component and implemented the placeholder functionality. I can open a PR if you're open to that.

https://github.com/cafreeman/react-codemirror/commit/a3d1f6c83798119bee408d9d91a5965b435fe19d

[farhan687]

I am facing same issue, can anybody merge the PR which is created bby @cafreeman.

[inoas]

Could this be merged into the main branch?

[RahavLussato]

this issue can be closed. its working for me if i set placeholder under the options object.

[edemauro]

Are other addons supported, such as merge.js (https://codemirror.net/addon/merge/merge.js)? I'm trying to get it to work, but I'm running into a lot of difficulties.

[c-emil]

It doesn't work just by setting placeholder under the options object for me @RahavLussato. I also had to require the plugin using require('codemirror/addon/display/placeholder')

[kalyan-csiro]

require('codemirror/addon/display/placeholder');  

...

const options = {
      placeholder: 'type rule',
 };

Works for me.

[naspredam]

We had the same solution as per @kalyan-csiro, but when we removed the lock file and do an npm install...

Now on the downloaded lock file, it is broken...

[naspredam]

I worked again. It seems that I had an import instead of assigning to a variable. Just if anyone else have the same issue. This worked for me

require('codemirror/addon/display/placeholder');
const CodeMirror = require('react-codemirror');

...
const options = {
      placeholder: 'type rule',
 };