How to override MacroBrowser postPreview function?

Confluence Development Confluence Server
, ,
8

Hi @aknight , @ChongJingHong

I have a requirement to put some custom changes to Macro input fields. I tried to do in the same way as you mentioned . But it seems not working at all for me . Could you please tell me what is wrong in this code. ?
This is my custom-editor.js file code.

//reference: confluence-stash-macro/stash-macro.js at master · Scuilion/confluence-stash-macro · GitHub
// Documentation for AJS.MacroBrowser.setMacroJsOverride - #2 by aknight
// How to override MacroBrowser postPreview function? - #3 by ChongJingHong

(function($) {
var Helloworld = function(){
};
var originalCode;
console.log(“Inside custom-editor.js”);
//overrides the parameter field UI based on parameter type or parameter name
Helloworld.prototype.fields = {

    "string" : function(param, options){
    console.log("param:"+param);
        if(param.name == "Code"){

            // Confluence.Templates.MacroBrowser.macroParameter() returns a String:
            // <div class="macro-param-div"><label></label><input type="text" class="text"/></div>
            // paramDiv creates the above elements
            var paramDiv = AJS.$(Confluence.Templates.MacroBrowser.macroParameter());
            console.log("paramDiv:"+paramDiv);
            console.log("inside fields override");

            // $(selector, context)
            // selector - A string containing a selector expression i.e. id of tag
            // context - A DOM Element, Document, jQuery or selector to use as context
            // create paramDiv with id="macro-para-div-Code"
            var input = AJS.$("macro-param-div-Code", paramDiv);
            console.log("input:"+input);

            var textArea = document.createElement("textarea");
            textArea.style.resize = "none";
            textArea.style.overflow = "scroll";
            textArea.style.whiteSpace = "nowrap";
            textArea.setAttribute("rows", "12");
            textArea.setAttribute("cols", "28");
            textArea.setAttribute("id", "macro-param-Code");
            textArea.setAttribute("class", "macro-param-input");

            var label = document.createElement("label");
            label.innerHTML = "Code";
            label.setAttribute("for", "macro-param-Code");

            paramDiv.empty();
            paramDiv.append(label);
            paramDiv.append(textArea);

            return AJS.MacroBrowser.Field(paramDiv, input, options);
        }
    }
};

//a function to run before an existing macro is loaded into the parameter form fields
helloworld.prototype.beforeParamsSet = function(selectedParams, macroSelected){
    originalCode = selectedParams.code;
    $("#macro-param-Code").val(originalCode);
    console.log("Orignal Code : " + originalCode);
    return selectedParams;
};


//a function to run before the form fields are converted into a macro parameter string
Helloworld.prototype.beforeParamsRetrieved = function(params){
    params.code = $("#macro-param-Code").val();
    console.log("params.code : " + params.code);
    return params;
};

//called with the preview iframe element and macro metadata when the user previews the macro
// MermaidMacro.prototype.postPreview = function(iframe, macro){
//     console.log("postPreview iframe : " + iframe);

//     console.log($(AJS.$('.mermaid')));

//     console.log(typeof mermaid.init(undefined, $(AJS.$('.mermaid'))));
//     iframe.srcdoc = "hello";

//     return iframe;
// }

AJS.toInit(function(){
console.log("Inside ajs init");
    AJS.bind("init.rte", function(){
        console.log("inside init.rte");
        AJS.MacroBrowser.setMacroJsOverride('helloworld', new helloworld());
    })
})

})(AJS.$);

 
<web-resource key="myConfluenceMacro-resources" name="myConfluenceMacro Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    
    <resource type="download" name="myConfluenceMacro.css" location="/css/myConfluenceMacro.css"/>
    <resource type="download" name="helloworld.js" location="/js/helloworld.js"/>
    <resource type="download" name="custom-editor.js" location="/js/custom-editor.js" />
    <resource type="download" name="images/" location="/images"/>

    <context>myConfluenceMacro</context>
  <!--  <context>atl.general</context>-->
</web-resource>

<xhtml-macro name="helloworld" class="com.atlassian.tutorial.macro.helloworld" key='helloworld-macro'>
    <description key="helloworld.macro.desc"/>
    <parameters>
        <parameter name="Name" type="string" />
        <parameter name="Code" type="string"/>
    </parameters>
</xhtml-macro>

I have also tried to put a debugger break points and found out control is not going inside “Helloworld.prototype.fields = {” function.

Please help to comment.

Thanks.