Render toggle button after links

client/components/LinkPreview.vue

@@ -126,6 +126,14 @@ export default {
 	mounted() {
 		const options = require("../js/options");
 		this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
+
+		this.$nextTick(() => {
+			const escapedLink = this.link.link.replace(/["\\]/g, "\\$&");
+
+			this.$parent.$refs.text
+				.querySelector(`.toggle-preview[data-url="${escapedLink}"]`)
+				.removeAttribute("hidden");
+		});
 	},
 	methods: {
 		onPreviewReady() {

client/components/Message.vue

@@ -29,6 +29,7 @@
 			</span>
 			<span class="content">
 				<span
+					ref="text"
 					class="text"
 					v-html="$options.filters.parse(message.text, message.users)"/>
 

client/css/style.css

@@ -325,8 +325,7 @@ kbd {
 
 #help .website-link::before,
 #help .documentation-link::before,
-#help .report-issue-link::before,
-#chat .toggle-button {
+#help .report-issue-link::before {
 	display: inline-block;
 	margin-right: 5px;
 

client/js/libs/handlebars/parse.js

@@ -93,7 +93,8 @@ module.exports = function parse(text, users = []) {
 		// Wrap these potentially styled fragments with links and channel buttons
 		if (textPart.link) {
 			const escapedLink = Handlebars.Utils.escapeExpression(textPart.link);
-			return `<a href="${escapedLink}" target="_blank" rel="noopener">${fragments}</a>`;
+			return `<a href="${escapedLink}" target="_blank" rel="noopener">${fragments}</a>` +
+				`<button class="toggle-button toggle-preview" data-url="${escapedLink}" hidden></button>`;
 		} else if (textPart.channel) {
 			const escapedChannel = Handlebars.Utils.escapeExpression(textPart.channel);
 			return `<span class="inline-channel" role="button" tabindex="0" data-chan="${escapedChannel}">${fragments}</span>`;

client/js/renderPreview.js

@@ -111,10 +111,8 @@ $(window).on("resize", debounce(togglePreviewMoreButtonsIfNeeded, 150));
 
 $("#chat").on("click", ".text .toggle-button", function() {
 	const self = $(this);
-	const container = self.closest(".chat");
 	const content = self.closest(".content")
 		.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
-	const bottom = container.isScrollBottom();
 
 	self.toggleClass("opened");
 	content.toggleClass("show");
@@ -134,11 +132,6 @@ $("#chat").on("click", ".text .toggle-button", function() {
 		link: self.data("url"),
 		shown: isExpanded,
 	});
-
-	// If scrollbar was at the bottom before toggling the preview, keep it at the bottom
-	if (bottom) {
-		container.scrollBottom();
-	}
 });
 
 $("#chat").on("click", ".toggle-content .more", function() {

client/views/msg_preview_toggle.tpl

@@ -1,10 +0,0 @@
-{{#preview}}
-<button class="toggle-button toggle-preview {{#if shown}} opened{{/if}}"
-  data-url="{{link}}"
-  {{#equal type "image"}}
-    aria-label="Toggle image preview"
-  {{else}}
-    aria-label="Toggle website preview"
-  {{/equal}}
-></button>
-{{/preview}}