Rendering HTML / Confluence markup inside Macro is not interpreted

Confluence Development Confluence Cloud
, ,
1

I’m developing an Addon for confluence cloud similar to the Expand but allowing the user to specify if it’s expanded by default with a parameter.
In the edit view everything looks fine
But I’m now struggling with the published view. I’m fetching the macro.body with the Id and trying to render it dynamically, but I’m missing something because it’s not being interpreted (it shows only the text and not the image for example)
But if I inspect the source I can see the actual markup, it’s not now being rendered and I can’t find in the api a way to process it.

macro
macro2005×1565 175 KB

Here’s the code that inserts the innerHTML for the div with the macro body
(It’s inside the HBS file)

AP.require("request", function(request) {
            var pageId = getUrlParameter("pageId");
            var pageVersion = getUrlParameter("pageVersion");
            var macroId = getUrlParameter("macroId");
            var macroHash = getUrlParameter("macroHash");
            var macroTypeUrl = macroId ? "id/" + macroId : "hash/" + macroHash;
          	request({
              url: "/rest/api/content/" + pageId +
                   "/history/" + pageVersion +
                   "/macro/" + macroTypeUrl,
              success: function(response) {
		           var macro = JSON.parse(response);
		           document.getElementById('html-body').innerHTML = macro.body;
              }, error: function(response) {
                $("#html-body").html('ooops');
              }
            });
          });

If someone could help me / point me in the right direction, that’d be fantastic!
Thanks!

2

Hi @Natalia1,

what you’re seeing is the storage format XHTML. You need to convert that into view HTML using the Convert Content Body REST API. You should also use the AP.request method to make that call - just like you do for getting the content in the first place. :slight_smile:

Cheers,
Sven

3

Hi @sven.schatter, thank you for the help! Sorry it took so long for me to reply, I was trying some combinations but it’s still not working…
the converted view it’s missing local resources: styles, images… so I’m not seeing what I see in the editor, and it’s in fact quite broken.
I tried /rest/api/contentbody/convert/view and /rest/api/contentbody/convert/styled_view but none is returning what I see in the editor view

macro2
macro23896×2365 317 KB

the styled_view looks a little bit better…

And the JS code:

var url = '/rest/api/content/' + pageId + '/history/' + pageVersion + '/macro/id/' + macroId;
		     httpClient.get({
	            url: url
		     }, function(error, response, body) {
		    	var macro = JSON.parse(body);

		    	//convert macro.body to view
		    	httpClient.post({
		            url: '/rest/api/contentbody/convert/styled_view',
		            headers: {
	            	    'Accept': 'application/json',
	            	    'Content-Type': 'application/json; charset=utf-8'
		            },
		            json: {
		            	"value": macro.body,
		            	"representation": "storage",
		            	"contentIdContext": pageId
		            }
		        },
		        function (err, httpResponse, body) {
		        	return res.render('expand2-macro', {
			            macroTitle: title,
			            toggleId: Math.random() * 2.147483647E9,
			            macroExpanded: expanded,
			            macroBody: body.value
			        });
		        });
		     });

am I doing something wrong? is there something else you can suggest?
Thanks!

4

Hm yeah didn’t think about that. Since you’re in an iframe the styles from the main page obviously don’t apply to your content. Haven’t tried it myself but maybe embedding AUI into your iframe already does the trick? It’s wort a shot at least.