context.sync() blocked in Powerpoint Addin while trying to replace an image

I’m working on an Addin for Powerpoint and I’m having some problems with context.sync() and I Don’t understand why.

A little explanation of what I want to do: With a function I have created an image and inserted it in my slide. At some point, I want to replace the image I’ve created with a new one. To identify the image I put it a name. So I find the old image, get it’s position, create the new image at same position, remove the old image and set the name to the image. But when I remove the old one, I have to sync the context and sometime the function just never end. It looked like stopped, and no error is throw.

There is the code I’m working on:

/*
* Function to add the image in the slide    
* https://learn.microsoft.com/en-us/office/dev/add-ins/develop/read-and-write-data-to-the-active-selection-in-a-document-or-spreadsheet
* @param {string} image The string image code to create
* @param {{left:number,top:number}} position The position of the image
* @returns {Promise<boolean>}
*/
async function importImage(
    image: string,
    position: {
        left: number,
        top: number
    },
) {
    return new Promise((resolve, reject) => {
        Office.context.document.setSelectedDataAsync(
            image,
            {
                coercionType: Office.CoercionType.Image,
                imageLeft: position.left,
                imageTop: position.top,
            },
            (result) => {
                if (result.status === Office.AsyncResultStatus.Failed) {
                    return reject(result.error.message)
                }

                return resolve(true)
            })
    })
}

/**
* Function to replace the image with id given id
* @param {string} uuid The id of the image to replace. If no shape with this name, the image will not be created
* @param {string} image The code of the image
* @returns {Promise<boolean>}
*/
async function replaceImage(
    uuid: string,
    image: string
): Promise<boolean> {
    if (!Office.context.document) throw new Error('Can\'t get context of Office Document')

    return PowerPoint.run(async (context) => {
        // Get the current slide
        let slides = context.presentation.getSelectedSlides()
        let currentSlide = slides.getItemAt(0)
        currentSlide.load('shapes, shapes/name')
        await context.sync()

        // Get the shape to update
        const shape = currentSlide.shapes.items.find(shape => {
            return shape.name === uuid
        })

        if(!shape) return Promise.resolve(false)

        // Load position of the shape to replace
        shape.load('left, top')
        await context.sync()

        // Create the new image and remove the old one
        await importImage(image, {left: shape.left, top: shape.top })
        shape.delete()

        // ! Problem here. Sometimes it just never end
        // The new shape is Added and old one deleted
        // but haven't set the name yet so if want to replace it again I can't.
        await context.sync()

        // get again all shapes
        slides = context.presentation.getSelectedSlides()
        currentSlide = slides.getItemAt(0)
        currentSlide.load('items')
        await context.sync()

        // The new one is the last in the currenSlide
        const newShape = currentSlide.shapes.items[currentSlide.shapes.items.length - 1]
        // Set the name to get it again if I want
        newShape.name = uuid

        await context.sync()

        return Promise.resolve(true)
    }).catch((error) => {
        console.error(error)
        return Promise.resolve(false)
    })
}

I Don’t know why but after the shape.delete(), the await context.sync() struggle. It just never end and so my function never return anything. And I’ve check, no error is throw. All is stopped and I Don’t get why. I hope someone could help me!

Thank’s in advance!

You need to sign in to view this answers