nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ScriptRunner how to add comment editor to fragment dialog

Zhiyong Liu

I have a Web Item added by scripted fragment to open up a dialog. How can I add a Rich Text Editor for comment input to the dialog? For example, the editor you see after you click the Assign user button.

Thanks in advance for any tip.

Accepted answers

All comments

Jonny Carter_3nm6du

So, I've been looking into this, and I've not quite been able to divine how to use Jira's built-in rich text editor.

I'm pretty sure that the basics are:

1) Create a textarea element in your markup

2) Run some javascript that will invoke Jira's rich text editor

Obviously, the particulars of #2 evade me as yet.

https://developer.atlassian.com/jiradev/jira-platform/guides/rich-text-editor

I expect it'll be something like

require("jira/editor/somemodule").init( document.querySelector('textarea#mySpecialTextArea') );

...but I've not yet divined the right module or method, even after digging into Jira's source.

Jonny Carter_3nm6du

There's nothing in Atlassian's AUI docs, which makes me think it's not a simple matter of adding a class or ID to the text area. https://docs.atlassian.com/aui/latest/docs/forms.html

Josh Nystrom

Josh Nystrom

Josh Nystrom

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

Zhiyong Liu

Thanks very much Josh for sharing the solution. I will integrate it with my code.

Josh Nystrom

Josh Nystrom

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

atlassian-marketplace

scriptrunner

jira

comment

adaptavist

addon-com.onresolve.jira.groovy.groovyrunner

rich-text

script-fragment