GrapesJS component textarea textnode

Attempt at a textarea component which has an editable textnode

by Andy Bulka

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <p>
    Hello world.
  </p>
  <textarea rows="10" cols="30" name="xx">Pre-existing Textarea in #gjs</textarea>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

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]
});

/*
QUESTIONS

- How do I make my textarea `fancyTextarea` have its textnode update when you edit the textnode of the textarea on the canvas? I want `fancyTextarea` to work like `text` components in this regard - but the exported html of `fancyTextarea` always stays the same re the textnode.

- Why existing textarea is not affected by `components:` definition in custom component `fancyTextarea`
- Why are attributes `rows` and `cols` emitted even though they are empty? Only happens after setting their value to something then setting its value to empty again.
- Why the name `FancyTextarea` does not appear in style manager if any classes are attached to the component? I see `Selected:.expand` with the name of the component type missing. Whether you add the class via style manager, or in the initial...