Grapesjs: how to use editor.getSelected().append(`<div>...`);

[Rasazna]

WARNING

READ and FOLLOW next 5 steps, then REMOVE them before posting the issue

1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
2. Use the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. [Bug]: ....
3. Do a quick SEARCH first, to see if someone else didn't open the same issue
4. DON'T ASK to create examples/code for you, read DOCS and APIs first, then you can post what you have tried (we'd like to see your code) and what you're unable to achieve
5. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED

You're submitting a BUG

1. Are you using the latest release (older versions are NOT supported)?
   
   
   
   1. If you're not sure, type grapesjs.version in console and press ENTER
   
   
2. Are you facing the bug with your local copy of GrapesJS or with the current demo?
3. If a local copy
   
   
   
   1. Indicate all informations about your OS, browser and GrapesJS version.
   
   
   2. Are you able to reproduce the bug from the demo?
   
   
4. What is the expected behavior?
5. What happens instead?
6. If you're able to reproduce the bug indicate all the necessary steps
7. Attach screenshots (using KAP/LICEcap), screencasts or live demo
   
   
   
   1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
   
   
   2. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl
   
   

You're submitting a FEATURE REQUEST

1. Be sure to work on the latest version, as the feature might be already there
2. Keep in mind that the feature should be considered valid to use for everyone, not only for your case

[Rasazna]

i did not understand how to use editor.getSelected().append(<div>...); feature . can someone give an example for it

[pouyamiralayi]

@Rasazna in below example, i am using it inside a selected event, so when ever you click on an item, your changes apply!

editor.on('component:selected', model => {
        editor.getSelected().append('<div>BOO!</div>')
})

Cheers!