Hi Zhiyong,
Our team just finalized a working version of Rich Text in a custom dialog, so hopefully by sharing it here we can help you, or any others seeking this functionality.
There may still be attributes that can be removed from the markup, but, so far, this is as clean as I've managed while retaining good function. Here is the REST Endpoint code+markup:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.config.properties.APKeys
@BaseScript CustomEndpointDelegate delegate
richTextCommentDialog() { MultivaluedMap queryParams ->
String issueId = queryParams.getFirst("issueId")
String issueKey = queryParams.getFirst("issueKey")
String baseUrl = ComponentAccessor.getApplicationProperties().getString(APKeys.JIRA_BASEURL)
def dialog =
"""
<div id="rt-dialog" class="jira-dialog box-shadow popup-width-custom" data-aui-modal="true" data-aui-remove-on-hide="true" style="width: 810px; margin-left: -406px; margin-top: -434.5px;">
<div class="jira-dialog-heading">
<h2 title="Rich-text comment on: $issueKey">Rich-text comment on: $issueKey</h2>
</div>
<div class="field-group aui-field-wikiedit comment-input">
<div class="jira-wikifield" field-id="comment" renderer-type="atlassian-wiki-renderer" issue-key="$issueKey" resolved="">
<div class="wiki-edit">
<div id="comment-wiki-edit" class="wiki-edit-content">
<textarea class="textarea long-field wiki-textfield mentionable wiki-editor-initialised" cols="60" id="commentText" name="commentText" wrap="virtual" data-issuekey="$issueKey" resolved="" style="min-height: 174px; max-height: 540px;"></textarea>
<div class="rte-container">
<rich-editor contenteditable="true"></rich-editor>
</div>
</div>
</div>
<div class="field-tools">
<button class="jira-icon-button fullscreen wiki-preview" id="comment-preview_link" type="button">
</button>
</div>
</div>
<div class="save-options wiki-button-bar">
</div>
<div class="buttons-container form-footer">
<div class="buttons"><span class="icon throbber"></span><button id="rt-dialog-submit" class="aui-button">Submit</button><button id="rt-dialog-cancel" class="aui-button aui-button-link">Cancel</button>
</div>
</div>
</div>
<script>
AJS.dialog2("#rt-dialog").on("show", function() {
document.getElementById('commentText').focus();
});
AJS.\$("#rt-dialog-submit").click(function(e) {
var text = AJS.\$("#commentText").val();
var comment = {"body": text
};
AJS.\$.ajaxSetup({
baseUrl: '""" + baseUrl + """'
});
AJS.\$("#rt-dialog-submit").before('<span class="aui-icon aui-icon-wait">Submitting...</span>');
AJS.\$("#rt-dialog-submit").prop("disabled", true);
AJS.\$.ajax({
url : '/rest/api/2/issue/""" + issueId + """/comment',
headers: { "Content-Type" : "application/json" },
type: 'POST',
data : JSON.stringify(comment),
cache : false,
success: function(response){
JIRA.trigger(JIRA.Events.REFRESH_ISSUE_PAGE, [JIRA.Issue.getIssueId()]);
JIRA.trigger("GH.RapidBoard.causeBoardReload");
var myFlag = AJS.flag({
type: 'success',
title: 'Comment added successfully',
close: 'auto'
});
AJS.dialog2("#rt-dialog").remove();
},
error: function(response){
console.log(JSON.stringify(response));
var myFlag = AJS.flag({
type: 'error',
title: 'Oh no!',
body: JSON.parse(response.responseText).errors.comment,
close: 'manual'
});
AJS.dialog2("#rt-dialog").remove();
}
});
});
AJS.\$("#rt-dialog-cancel").click(function(e) {
AJS.dialog2("#rt-dialog").remove();
});
</script>
</div>
"""
Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}
Things to note:
- In the dialog definition, the attribute [data-aui-modal="true"] prevents easy closure of the dialog. Find that attribute on this Atlassian doc under the Options heading for more information - https://docs.atlassian.com/aui/7.3.3/docs/dialog2.html
- The Strings 'issueId' and 'issueKey' are parameters passed in from the 'Run code and display dialog' fragment as follows:
/rest/scriptrunner/latest/custom/richTextCommentDialog?issueId=${issue.id}&issueKey=${issue.getKey()} - The 'field-tools' div is not displayed, but seems to be a leftover from the previous comment model and is necessary for the dialog to be displayed successfully
- One quirk we were encountering caused the removal of the 'Alt-S' Submit and 'Alt-~' Cancel functionality
- We performed dialog .remove() instead of .hide() to ensure that the action can be performed multiple times without a hard refresh
- Successful submissions cause a refresh of the current issue view or rapid board
We didn't pursue this just for kicks though. We have a client group that will be using this to easily add comments that have visibility restricted to a specific project role. Please see my follow-up post for the Script Fragment and REST endpoint that include Developer restricted button and comment visibility.
Hope this helps!
Josh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.