call SharePoint's add new webpart function from within a web part component (spfx-reactjs)

Question

I'm just new to reactjs-spfx controls. I have a pnpjs control that lists all the pages and it's contents. I should be able to add edit and delete pages using that web part. I want to include in that component the functionality to add a new Web part to the page content when I'm editing it. How do you call that functionality from SharePoint to add new webpart? Please see below picture. Thanks.

Answer 1

I would recommend using pnpjs library for this, it wraps most basic tasks with a nice api. I am adding my own webpart to a page something like this, just to give you an idea:

See https://pnp.github.io/pnpjs/sp/clientside-pages/

const sp = SPFI(...)

// or get the existing page
const page = await sp.web.addClientsidePage(fileName, title);
const section = page.addSection();

const partDefs = await sp.web.getClientsideWebParts();

// find the web part we want to add by guid
const myPartDef = partDefs.find(c => areGuidsEqual(c.Id, MY_GUID));

const part = ClientsideWebpart.fromComponentDef(myPartDef);
part.setProperties({
  someProp: someValue
});

section.addControl(part);
await page.save();