Warning, Tip, Note, and Info macros inside the body of user macros

[Graham Campbell]

I have written a very simple expanding heading macro to be used in place of the regular Expand macro.

This allows us to add the titles to a pages' Table of Contents, while still providing a neat way to keep pages tidy by showing and displaying information with a simple click.

My issue is that the Warning, Tip, Note and Info macros all display themselves differently when used within the rendered body of the user macro.

They work just fine normally.

Inside the body of the rendered user macro however, the body of the note macros themselves are not displayed.

It looks to me like the hierarchy of the HTML responsible for their rendering is being changed, with the inclusion of an extra ::before pseudo-element and the changing in hierarchy of the span used for the macro's content being placed as a CHILD of macro's icon, not a SIBLING as it is normally.

Does anyone have any experience of this?

[Bill Bailey]

I have written user macros that incorporate both of these macros and not had issues. Could you post that part of the macro code and maybe a screenshot of what is happening?

[Graham Campbell]

Hi Bill, I did not see the alert for your response! Apologies for ignoring it.

Here is everything I use.

Macro definition:

## @param Title:title=Heading text|desc=The text to be used as the heading goes here.|type=string|required=true
## @param Style:title=Heading style|desc=The style of heading to use.|type=enum|required=true|enumValues=Heading 1,Heading 2,Heading 3,Heading 4,Heading 5,Heading 6
## @param Color:title=Color|desc=Choose a color for the heading text. Default is black.|type=enum|enumValues=Black,Blue,Green,Red,Yellow|default=Black

#set ($selectedStyle = "h" + $paramStyle.substring(8,9))

#set ($selectedColor = $paramColor)

#if (!$paramColor)
#set ($selectedColor = "black")
#end

<div class="rs-expanding-heading-container">
<div class="rs-expanding-heading-control">
<$selectedStyle style="color: $selectedColor;" class="rs-expanding-heading">$paramTitle</$selectedStyle>
</div>
<div class="rs-expanding-content">$body</div>
</div>

 JavaScript (in custom html):

/**
* Support for rs-expanding-heading macro
*
****/
$(".rs-expanding-content").each( function() {
var headingID = $(this).parent().find(".rs-expanding-heading").attr("id");
$(this).attr("id", headingID + "-rs-expanding-content");
});

$(".rs-expanding-heading").on("click", function (event){
event.stopPropagation();
event.stopImmediatePropagation();
$(this).toggleClass("rs-expanding-active");
$(this).parent().next(".rs-expanding-content").slideToggle("slow");
});

/**
* End of rs-expanding-heading macro support
*
****/

CSS (in global stylesheet):

.rs-expanding-content {
display:none;
margin-top: 20px;
}

.rs-expanding-heading::before {
content: "\25ba";
font-size: small;
display: inline-block;
vertical-align: middle;
color: #DFDFDF;
margin-right: 5px;
}

.rs-expanding-active::before {
content: "\25bc";
display: inline-block;
vertical-align: middle;
font-size: small;
color: #DFDFDF;
margin-right: 5px;
}

This is what I see editing the page:

This is what I see when viewing the page:

[Bill Bailey]

OK, I tested your macro code (not javascript or CSS), setting the macro to rendered, and this is what I see:

So it renders properly. So the questions are:

1. What version are you on (I am on 6.2.4)
2. Did you set the user macro option to rendered?
3. Have you tried the test with no javascript or CSS?

[Graham Campbell]

Hi Bill, thanks for getting back to me.

1. We're on 6.13.3

2. Yes, the macro is set to Rendered.

3. I've tried that.

This is what I setup in the editor:

and this is what I see in the page:

The content is being added to the page, I can view in the page source. It's just not being rendered correctly:

[Bill Bailey]

Is there some reason you cannot use the builtin expand macro?

At any rate, you have some extra cluft in the p tag containing the body text. Here is what I see in my test example:

<div class="confluence-information-macro confluence-information-macro-information conf-macro output-block" data-hasbody="true" data-macro-name="info">
<p class="title">Note</p>
<span class="aui-icon aui-icon-small aui-iconfont-info confluence-information-macro-icon"> </span>
<div class="confluence-information-macro-body">
<p>Test Note</p>
</div><
/div>

You can see there are no class/id/etc for the text p tags. So I suggest two things:

1. With inspect function, see what CSS rules are associated with talk-etc. Maybe the visibility is turned off. Your text is definitely there.
2. Edit the macro body, select the body text and then select Clear formatting, and see if the text will now display.