paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

rendered_markdown: Display 'view code in playground' option in code blocks.

Browse Source 
The Pygments language used is extracted from the data-attribute attached
to the outer `div` element. This option is displayed if the playground
mapping for that language can be found.

The UI model which does the actual code extraction and displaying the
popover is done in a future commit.
This commit is contained in:
Sumanth V Rao
2020-09-06 12:30:45 +05:30
committed by Tim Abbott
parent 36e05ed6de
commit c6434fad7a
2 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
static/js/rendered_markdown.js
View File

@@ -4,8 +4,10 @@ const ClipboardJS = require("clipboard");
const moment = require("moment");
const copy_code_button = require("../templates/copy_code_button.hbs");
const view_code_in_playground = require("../templates/view_code_in_playground.hbs");
const people = require("./people");
const settings_config = require("./settings_config");
/*
rendered_markdown
@@ -189,10 +191,34 @@ exports.update_elements = (content) => {
$(this).prepend(toggle_button_html);
});
// Display the copy-to-clipboard button inside the div.codehilite element.
// Display the view-code-in-playground and the copy-to-clipboard button inside the div.codehilite element.
content.find("div.codehilite").each(function () {
const $codehilite = $(this);
const $pre = $codehilite.find("pre");
const fenced_code_lang = $codehilite.data("code-language");
if (fenced_code_lang !== undefined) {
const playground_info = settings_config.get_playground_info_for_languages(
fenced_code_lang,
);
if (playground_info !== undefined) {
// If a playground is configured for this language,
// offer to view the code in that playground. When
// there are multiple playgrounds, we display a
// popover listing the options.
let title = i18n.t("View in playground");
const view_in_playground_button = $(view_code_in_playground());
$pre.prepend(view_in_playground_button);
if (playground_info.length === 1) {
title = i18n.t(`View in ${playground_info[0].name}`);
} else {
view_in_playground_button.attr("aria-haspopup", "true");
}
view_in_playground_button.attr("title", title);
view_in_playground_button.attr("aria-label", title);
}
}
const copy_button = $(copy_code_button());
$(this).find("pre").prepend(copy_button);
$pre.prepend(copy_button);
new ClipboardJS(copy_button[0], {
text(copy_element) {
return $(copy_element).siblings("code").text();

2
static/templates/view_code_in_playground.hbs Normal file
View File

@@ -0,0 +1,2 @@
{{! Display the "view code in playground" option for code blocks}}
<a target="_blank" rel="noopener noreferrer" class="code_external_link" data-toggle="tooltip"><i class="fa fa-external-link"></i></a>