Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

popovers: Copying topic links as both plain URL and HTML-rich format. 

Added the JS function so that when user clicks on 'Copy link to topic',
in such a way that it will be pasted as a plain URL in browser URL bar
and as formatting like #feedback > topic_name [with hyperlink] in places
like docs, emails, etc.

Fixes #31813
This commit is contained in:
Harsh Bansal 2024-11-16 05:47:28 +00:00
parent 8b62ea3c60
commit 4542edcd44
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/topic_popover.js
View File

@ -1,4 +1,3 @@
import ClipboardJS from "clipboard";
import $ from "jquery";
import render_delete_topic_modal from "../templates/confirm_dialog/confirm_delete_topic.hbs";
@ -27,6 +26,7 @@ export function initialize() {
ui_util.show_left_sidebar_menu_icon(instance.reference);
popover_menus.on_show_prep(instance);
let stream_id;
let stream_name;
let topic_name;
let url;
@ -42,11 +42,13 @@ export function initialize() {
const $stream_li = $elt.closest(".narrow-filter").expectOne();
topic_name = $elt.closest("li").expectOne().attr("data-topic-name");
url = $elt.closest("li").find(".sidebar-topic-name").expectOne().prop("href");
stream_name = $elt.closest("li").expectOne().attr("data-stream-name");
stream_id = stream_popover.elem_to_stream_id($stream_li);
}
instance.context = popover_menus_data.get_topic_popover_content_context({
stream_id,
stream_name,
topic_name,
url,
});
@ -158,12 +160,28 @@ export function initialize() {
popover_menus.hide_current_popover_if_visible(instance);
});
new ClipboardJS($popper.find(".sidebar-popover-copy-link-to-topic")[0]).on(
"success",
() => {
$popper.find(".sidebar-popover-copy-link-to-topic").on("click", (e) => {
const $linkElement = $(e.currentTarget);
const plainText = $linkElement.data("clipboard-text");
const streamName = $linkElement.data("stream-name");
const topic = $linkElement.data("name");
const htmlText = `<a href="${plainText}">#${streamName} > ${topic}</a>`;
navigator.clipboard
.write([
new ClipboardItem({
"text/plain": new Blob([plainText], {type: "text/plain"}),
"text/html": new Blob([htmlText], {type: "text/html"}),
}),
])
.then(() => {
// Hide the popover and show a success message
popover_menus.hide_current_popover_if_visible(instance);
},
);
});
e.preventDefault();
e.stopPropagation();
});
},
onHidden(instance) {
instance.destroy();

2
web/templates/popovers/left_sidebar/left_sidebar_topic_actions_popover.hbs
View File

@ -56,7 +56,7 @@
</li>
{{/if}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="sidebar-popover-copy-link-to-topic popover-menu-link" data-clipboard-text="{{ url }}" tabindex="0">
<a role="menuitem" class="sidebar-popover-copy-link-to-topic popover-menu-link" data-clipboard-text="{{ url }}" data-name="{{ topic_name }}" data-stream-name="{{ stream_name }}" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-link-alt" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Copy link to topic" }}</span>
</a>