QUESTION: how to make textnode editing update component content?
Question
I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grapesjs canvas updates the textnode found in .components. And I want the component exported as HTML correctly e.g. <textarea>MY user edited TEXTNODE CONTENT</textarea>.
At the moment, the exported html of fancyTextarea always stays the same re the textnode, even though I edit it on the canvas. Is there an textnode change event I should be capturing and acting on - I can't find one? Here is my component
const fancyTextarea = editor => {
editor.DomComponents.addType('fancyTextarea', {
// extend: "??",
isComponent: el => el.tagName == 'TEXTAREA',
model: {
defaults: {
tagName: 'textarea',
traits: [
...['id', 'name'],
...['rows', 'cols'], // why attrs emitted when empty?
],
attributes: {
name: 'yy',
},
components: [
{
type: 'textnode',
content: ' * (component) textnode content',
editable: false, // changes prop ok but can still edit?
}
],
},
}
})
editor.BlockManager.add('idFancyTextarea', {
label: 'Fancy Textarea',
content: {
type: 'fancyTextarea', // type name not appearing in style manager
classes: ['expand'], // if you define a style class?
content: '* (block) textnode content', // textnode within textarea tag
},
});
}
const editor = grapesjs.init({
container: '#gjs',
fromElement: 1,
height: '100%',
storageManager: { type: 0 },
style: '.expand {color: green; vertical-align: top; width: 100%; height: 100%;}',
plugins: ['gjs-blocks-basic', fancyTextarea]
});
fiddle https://jsfiddle.net/tcab/q36ytzxd/
P.S. The closest I've come is to programmatically changing a textnode is
const node = component.findType('textnode')
node[0].set({content: 'ok I have altered you'})
//editor.render() // results in a crash.
but whilst the component is updated and export is correct, the rendering on the canvas remains the same.
Answers (1)
Hi @abulka, as the editing is happening in the view, you should update the component model once the view is updated. So it should work with something like this
model: {
...
},
view: {
events: {
input: 'handleInputUpdate',
},
handleInputUpdate(ev) {
this.model.components(ev.target.value);
}
},
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3019
[QUESTION] - Bind inner text/html (like div, p, h1) to Trait
Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Issue #2404
Question: how to observe children changes in component
Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? Perhaps an event I can subscrib...
Issue #3231
BUG: how to change gjs-ckeditor-format component
hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.