Issue #3279Opened February 19, 2021by abulka0 reactions

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)

artfMarch 3, 20210 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.