how to add a textarea in traits?

[j2l]

Hi,
I tried to follow-up https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type to get some textarea.
In components.js

export default (editor, opts = {}) => {
  editor.DomComponents.addType('textarea', {
    model: {
      defaults: {
        traits: [
          {
            type: 'textarea',
            name: 'textarea',
            label: 'Code',
          },
        ]
      }
    }
  });
  editor.TraitManager.addType('textarea', {
    // Expects as return a simple HTML string or an HTML element
    templateInput: '',
    templateInput: `<div class="custom-input-wrapper">
      <textarea name="" id="" cols="30" rows="10"><div data-input></div></textarea>`
    });
  const domc = editor.DomComponents;
...
traits: ['id','title',{ label: 'Modal button and text', type: 'text', name: 'content', changeProp: true }],

but it keeps the <input>.
Would you please explain how to add a textarea in traits?
Thank you!

[j2l]

I guess I hit undo too much and changed back the traits, while traits: ['id','title',{ label: 'Modal button and text', type: 'textarea', name: 'content', changeProp: true }], works.
But it now has 2 inputs and the textarea is <div data-input></div> so there's still something wrong in my code 😢

[j2l]

I found how to get the textarea filled:

templateInput({ trait }) {
      const { model } = this;
      const value = this.getModelValue();
      return `<textarea id="" cols="27" rows="20">${value}</textarea></div>
      <button type="submit">update</button>`}

But there are 2 things remaining:

• input remains below the textarea despite not being called
• once I make some change in the textarea, how to change it in the component?

I added an update button but I miss the function to update :)
<button type="submit" onclick={${model.defaults.content}=${value}}>update</button> doesn't work because model.defaults.content is undefined and setModelValue doesn't exist right?

[j2l]

For the second point, here's a terrible hack, partially working:
<button type="submit" onclick="{document.getElementsByClassName('gjs-field-wrp--textarea')[0].getElementsByTagName('input')[0].value = document.getElementsByClassName('gjs-field-wrp--textarea')[0].getElementsByTagName('textarea')[0].value}">update</button>}`
There might be a better way, right 😄

[artf]

You need to use createInput method in such a case. Here you can find an example of how custom trait and component binding works https://grapesjs.com/docs/modules/Traits.html#integrate-external-ui-components

[j2l]

Thank you very much @artf !