How to get selected image - office-addins

Question

I have a Word 2016 Add-in that creates images using graphviz and stores the corresponding dot code in the altdescription of the image.
I can select the image and load the dot code back to the editor in the add-in. But this only works in my current implementation for inlinePictures.
function getDataFromSelection() {
Word.run(function (context) {
var range = context.document.getSelection();
var paragraphs = range.paragraphs;
context.load(paragraphs);
return context.sync().then(function () {
var pictures = paragraphs.items[0].inlinePictures;
context.load(pictures);
return context.sync().then(function () {
var picture = pictures.items[0];
editor.getSession().getDocument().setValue(picture.altTextDescription);
});
});
})
}
How can I obtain the selected picture if it is free floating in the document?
The Goal of the add in is to create and edit already created graphs using dot. But the editing part is currently the problem.

Answer 1

great question. as you properly deduced the inlinePictures collection only includes, excuse the redundance, inlinePicture images. Floating images are not included in that collection, something we will add in future iterations of the API.
There is a workaround that I suggest you to do to check if there are floating images in the selection.
you can get and analyze the OOXML from the selection and find out of there are any floating images in the selection.
this code shows how to get the OOXML from the selection:
// Run a batch operation against the Word object model.
Word.run(function (context) {
// Queue a command to get the current selection and then
// create a proxy range object with the results.
var range = context.document.getSelection();
// Queue a commmand to get the OOXML of the current selection.
var ooxml = range.getOoxml();
// Synchronize the document state by executing the queued-up commands,
// and return a promise to indicate task completion.
return context.sync().then(function () {
console.log('The OOXML read from the document was: ' + ooxml.value);
});
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
Once you have the OOXML you can actually get (with string search or XML editors) what's within in the of if look for something like this element, you will know there is a floating image there. you can also get the alt text and description as you can see. if so needed you can use that string replace the alt text properties you need and can write back the OOXML to update that floating image. its a bit painful but doable and hopefully we can ship the floating images collection soon! thanks and happy coding!!!
<w:drawing>
<wp:anchor allowOverlap="1" layoutInCell="1" locked="0" behindDoc="0" relativeHeight="251659264" simplePos="1" distR="114300" distL="114300" distB="0" distT="0">
<wp:simplePos y="3710305" x="1729105"/>
<wp:positionH relativeFrom="margin">
<wp:posOffset>1729105</wp:posOffset>
</wp:positionH>
<wp:positionV relativeFrom="margin">
<wp:posOffset>3710305</wp:posOffset>
</wp:positionV>
<wp:extent cx="2847975" cy="2133600"/>
<wp:effectExtent r="9525" b="0" t="0" l="0"/>
<wp:wrapSquare wrapText="bothSides"/>
<wp:docPr title="alt text sample" name="Picture 1" descr="alt test description!!" id="1"/>
<wp:cNvGraphicFramePr>
<a:graphicFrameLocks noChangeAspect="1" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"/>
</wp:cNvGraphicFramePr>
<a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
<a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
<pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
<pic:nvPicPr>
<pic:cNvPr name="stratus2.jpg" id="1"/>
<pic:cNvPicPr/>
</pic:nvPicPr>
<pic:blipFill>
<a:blip r:embed="rId4">
<a:extLst>
<a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
<a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main"/>
</a:ext>
</a:extLst>
</a:blip>
<a:stretch>
<a:fillRect/>
</a:stretch>
</pic:blipFill>
<pic:spPr>
<a:xfrm>
<a:off y="0" x="0"/>
<a:ext cx="2847975" cy="2133600"/>
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst/>
</a:prstGeom>
</pic:spPr>
</pic:pic>
</a:graphicData>
</a:graphic>
</wp:anchor>
</w:drawing>