Power Point Add-In: How to use sourceSlideIds inside PowerPoint.InsertSlideOptions when use insertSlidesFromBase64 method

[roberchi]

In the documentation of Power Point js API (here the link to MS doc) you can insert in the current document some existing slides using the method insertSlidesFromBase64, the method has InsertSlideOptions where you can specify the Id of the slides you what to insert from the source. The problem is that there is no direct method to get the Ids of the slides you want to insert.
I find this way to work around this problem:

import * as fs from "fs";
import JSZip from "jszip";`
import * as xml2js from "xml2js";


start();

async function start() {
    // load PPTX
    const buff = fs.readFileSync("./test/test2.pptx");
    const content = await loadFromRawFileData(buff);

    // navigate PPTX to extract Slide information
    const presenetation = content["ppt/presentation.xml"];
    const _rels_presenetation = content["ppt/_rels/presentation.xml.rels"];
    const slides = (presenetation["p:presentation"]["p:sldIdLst"][0]["p:sldId"] as Array<any>).map((sldId, index) => {
        const slideRel = (_rels_presenetation["Relationships"]["Relationship"] as Array<any>)
            .find( (rel) => rel["$"]["Type"] == "http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" 
                && rel["$"]["Id"] == sldId["$"]["r:id"]);
        const slideContent = content["ppt/" + slideRel["$"]["Target"]];
        var name = slideRel["$"]["Target"] as string;
        name = name.replace(".xml", "");
        name = name.substring(7);
        return new slide(sldId["$"]["id"], index, name, slideContent);
    });

    // dump slides info
    console.log("Slides # " + slides.length);
    console.log(slides);
}

// slide object
class slide{
    content: any;
    id: number;
    name: string;
    title: string;
    order: number;

    constructor(id: number, order: number, name: string, content: any){
        this.id = id;
        this.content = content;
        this.order = order;
        this.name = name;
        this.title = this.getTitle();
    }

    // get the first title find in the slide
    getTitle():string {
        try{
            const res = navidateTree.findNodesByLeaf(this.content, (p, n, k, v)=> k=="type" && v == "title");
            if(res && res.length > 0){
                const title = navidateTree.findParentNodes(res[0], "p:nvSpPr");
                const tArray = title.__parent["p:txBody"][0]["a:p"][0]["a:r"] as Array<any>;
                return tArray.map(i => i["a:t"][0]).reduce((acc, cur) => (cur ? acc+cur : acc), "");
            }
            return "";
        }
        catch{
            return "";    
        }
    }

}

// loading and parsing PPTX to js object
async function loadFromRawFileData(data: Buffer) {
    var content: any = {};
  
   let zip = new JSZip();
  
    await zip.loadAsync(data);
  
    for (let key in zip.files) {
        if (Object.prototype.hasOwnProperty.call(zip.files, key)) {
            let ext = key.substr(key.lastIndexOf('.'));
  
            if (ext === '.xml' || ext === '.rels') {
                let js = await zip.file(key)?.async('string');
                if(js)
                    xml2js.parseString(js, function(err, res) {
                        content[key] = res;
                    });
            } else {
                // skip dir names
                if (key[key.length - 1] !== '/') {
                    content[key] = await zip.file(key)?.async('nodebuffer');
                }
            }
        }
    }
  
    return content;
  }

// this stuff is used to navigate the document, you can usa -forest or other API 
export type expressionNode = (parent:any, node:any) => boolean;
export type expressionLeaf = (parent:any, node:any, name: string, value:any) => boolean;

export class navidateTree{
    static findParentNodes(node: any, name: string): any {
        if(!node)
            return null;
        if(node["__name"] && node["__name"] == name)
            return node;
        else
            return this.findParentNodes(node.__parent, name);
    }
    
    public static findNodesByLeaf(node: any, filter: expressionLeaf): any[] {
        return this.internalFindNodesByLeaf(null, node, filter);
    }

    public static findNodes(node: any, filter: expressionNode): any[] {
        return this.internalFindNodes(null, node, filter);
    }
    private static internalFindNodes(parent: any, node: any, filter: expressionNode): any[] {
        var result: any[] = [];

        if(node && filter(parent, node))
         {   result.push(node);

            Object.keys(node).forEach(k => {
                if(k != "__parent" && typeof node[k] === "object"){
                    const res = this.internalFindNodes(node, node[k], filter);
                    Object.defineProperty(node[k], "__name", {value:k});
                    result = result.concat(res);
                }
            });
        }
        if(node){
            Object.defineProperty(node, "__parent", {value:parent});
        }
        return result;
    }

    private static internalFindNodesByLeaf(parent: any, node: any, filter: expressionLeaf): any[] {
        var result: any[] = [];
        var added: boolean = false;

        if(!node)
            return result;

        Object.keys(node).forEach(k => {            
            if(k != "__parent" && typeof node[k] === "object"){
                const res = this.internalFindNodesByLeaf(node, node[k], filter);
                Object.defineProperty(node[k], "__name", {value:k});
                result = result.concat(res);
            }
            else if(!added && k != "__parent" && filter(parent, node, k, node[k])){
                result.push(node);
                added = true;
            }
        });
        
        if(node)
            Object.defineProperty(node, "__parent", {value:parent});
        return result;
    }
  }

So to insert only few slides from the source:

get the slides Ids using the code above.
Fill a data structure like this:

export class slidesInsertData {
  base64Doc: string;
  targetSlideId: number;
  useDestinationTheme: boolean;
  all: boolean;
  selectedSlides: number[];
}

and call this function

static async doInsertSelectedSlides(data: slidesInsertData): Promise<void> {
    return PowerPoint.run(async (context) => {
      const targetId = data.targetSlideId ? data.targetSlideId.toString() + "#" : null;
      if (data.all)
        context.presentation.insertSlidesFromBase64(data.base64Doc, {
          formatting: data.useDestinationTheme ? "UseDestinationTheme" : "KeepSourceFormatting",
          targetSlideId: targetId,
        });
      else
        context.presentation.insertSlidesFromBase64(data.base64Doc, {
          formatting: data.useDestinationTheme ? "UseDestinationTheme" : "KeepSourceFormatting",
          targetSlideId: targetId,
          sourceSlideIds: data.selectedSlides.map((i) => i.toString() + "#"),
        });
      await context.sync();
    });
  }

Here the outcomes on my add-in, not bad :-)

Note:
This also can be done using some PPTX parser library on npmjs.org that allow to have Slides' Id, but all of the libraries I fund do not take a buffer on load method but directly the path of the document, in my add-in the document comes from a repository not in the file system.

[roberchi]

sorry this is not the correct repository for this discussion, it was incorrectly posted here. I'll move on office-add in soon.

I apologize