How to find the CSS for elements in JIRA

Hi,

Anyone knows how can I find the CSS element for the JIRA ticket description panel?

I’m trying to write a plugin which will change text alignment for right-to-left languages.

I was able to update the “issue title” field (using #summary-val tag) and “label” field (using ul.labels tag), but I can’t find the correct tag for the “issue description” field when in edit mode.
(the tag should be “body#tinymce.mce-content-body”, see attached screenshot of Chrome inspect).

The plugin code I wrote is in github here:

Any idea on how to find the correct tag for this field?

Thanks,
Eyal

@eyal.azran the tinymce editor is placed in an iframe, which is why body#tinymce.mce-content-body does not work.

1 Like

@remie is right. You need to get your CSS into the iframe somehow.

Judging by these docs you might be able to solve your problem by adding the editor-content context to your web resource.

EDIT: I totally lied. The linked docs are for Confluence. But there might be a similiar context for Jira.

EDIT 2: Okay second try - judging by these docs (this time they are in fact for Jira!) you might want to use the jira.rich.editor or jira.rich.editor.content context.

To clarify, this :top: means that you cannot use pure CSS to fix this. You will need to use Javascript to manipulate the iframe contents.

Hmmm, wait… I’m sure the tinyMCE has an rtl option. Using that would probably be the better way instead of hacking CSS into the iframe.

Hmmm we should have thought of that first @remie :smiley: Using this short snippet:

require(["jira/editor/customizer"], function (Customizer) {
    Customizer.customizeSettings(function(tinymceSettings, tinymce, SchemaBuilder) {
		tinymceSettings.plugins.push("directionality");
		tinymceSettings.directionality = "rtl";
    });
}); 

I’m getting this:

1 Like

I try not to spent any time thinking about TinyMCE. I hated it back in 2004, and I still hate it now.

1 Like

Yes! adding this section worked - thanks Sven!

For future generations, I’ve updated the files:

1 Like

Just to make sure: you do know that there is already an app on the marketplace for this right?

Hi Remie,

Yeah, we’ve tried this app - it switched the entire interface to Arabic.
I couldn’t find a way to apply just the RTL part without changing the interface language.
(and it does not support Hebrew)

Thanks,
Eyal

Hmm… that’s unfortunate. Missed opportunity! Have you tried contacting the app vendor for this feature?

good point! sent the vendor a mail just now…

1 Like