Place block as component programmatically

Oh I found out how to do it -- via editor.addComponents({ type: 'MyComponent' }). Is there a way to insert it into a specific element by a CSS selector?

Found this snippet, but how would i find the correct index?

editor.getComponents().add('<div>Text</div>', {at: index});

ok so what i've done is

export default function iterateChildren(components, fn) {
  components.each((model) => {
    fn(model);
    const childComps = model.get('components');
    iterateChildren(childComps, fn);
  });
}

export function findModels(components, selector) {
  const found = [];
  iterateChildren(components, (model) => {
    const { view } = model;
    if (!view) {
      return;
    }
    const { el } = view;
    const matches = el.matches(selector);
    if (matches) {
      found.push(model);
    }
  });
  return found;
}

and then

const wrapper = DomComponents.getWrapper();
  const models = findModels(wrapper.get('components'), '#hero .text');
  models.forEach((model) => {
    const components = model.get('components');
    components.add({ type: 'ContainerPlugin' }, { at: 0 });
  });

I think traversing the model tree would be a very good feature -- I'll work on the PR at some point. Cheers!

You can actually get the model from the cash element instance with view.$el.data('model'), so you might make it work with less code

wrapper.view.$el.find('#hero .text').each((el, i, $el) => 
    console.log($el.data('model'))
)