Add blocks.append(type, data) API method

[gohabereg]

This method should allow to append (or insert) new Blocks programmatically

Example:

editor.blocks.append('paragraph', {text: 'Hello world'});

editor.blocks.insert(4, 'header', {text: 'Hello world'});

[neSpecc]

I thought, the position can be an optional argument of the append

[gohabereg]

Better to name it insert then

[khaydarov]

I tend to think that it is better to use output format as a argument of append function, like

{
  type: 'header',
  data: { 
    ....
  } 
}

and second argument will be position

const newBlock = {
  type: 'paragraph', 
  data: {
     text: 'Hello world'
  }
};
editor.blocks.append(newBlock, 4);

@neSpecc @gohabereg

[neSpecc]

@cjagannath please, describe the use case of that feature. How you would generate a block's data structure? It is an internal logic of a plugin. And type is the variable that defined by plugins users.

I can't see a good implementation of it, except hardcoding.

[dimensi]

@neSpecc for inline tool for example. We can use this api for extract text from selection and create new Header or Paragraph element.

[neSpecc]

@dimensi to create a Header, you should pass for example

{
   text: 'Extracted fragment',
   level: 3
}

How you will create this structure? Your Inline Tool doesn't know about properties that used by Header data (I mean text and level). So you are only able to hard code them.

[neSpecc]

For blocks convertation we already develop an ability (#704). Any other use cases?

[dimensi]

@dimensi to create a Header, you should pass for example

{
   text: 'Extracted fragment',
   level: 3
}

How you will create this structure? Your Inline Tool doesn't know about properties that used by Header data (I mean text and label). So you are only able to hard code them.

Yes hardcode, for use inline tools like this, inline tool must check through validation whether or not there's a Header class. Something like that

{
  render() {
   const blocks = this.api.getBlocks()  // this api not implement
   const hasHeader = blocks.findIndex(el => el.class instanceof Header)
   if (hasHeader) return button;
   return;
  }
}

I think api like that need for more complex tools in editor.js

[cjagannath]

@cjagannath please, describe the use case of that feature. How you would generate a block's data structure? It is an internal logic of a plugin. And type is the variable that defined by plugins users.

I can't see a good implementation of it, except hardcoding.

For my use case, I would like to offer a custom tools experience where all the tools are listed on the left. Users can pick any tool and add it to the editor. The screenshot below would give an idea. The default tools menu(+) would have a sub set of the tools.

As a user, I would know the list of plugins that I want to use. Some plugins will be built by me for my specific case. So I know all their types and data structure. The API would make it very easy to pick and add tools.

If one has to think as an author, I agree it's hard coding the plug-in info. That's why in my request #717 I had asked about extending the tools menu UI. But that could become too complex.

Hope I am clear. Let me know if any more info is required.

Thank you for listening.

[gohabereg]

Resolved by #826