Feature Request: Copy the URL of a reply to clipboard

Hi @JeffreyWay and Laracasts Team,

I sometimes refer to a previous reply that will be helpful to resolve an open thread.

Plus, sometimes a new thread has been resolved by a previous reply.

I would like to request a feature to copy the URL of a reply to clipboard, such as this one: https://laracasts.com/discuss/channels/testing/laravel-how-assert-model-observer-events-are-triggered?page=1&replyId=968661

In the reply dropdown, after Reply, Edit and Delete, it would be great to have a Copy Reply ID option.

LaryAI

9 months ago

Level 58

Certainly! Here’s a solution for implementing a "Copy Reply URL" feature in a typical Laravel + Vue.js (or plain JavaScript) forum application. This will add a menu item to copy a reply’s URL to the clipboard.

Frontend (Vue.js Example):

Assuming each reply has a unique replyId and you have access to the current page URL, you can add a button or dropdown item:

<template>
  <div class="reply-actions">
    <!-- Other actions: Reply, Edit, Delete -->
    <button @click="copyReplyUrl">Copy Reply URL</button>
    <span v-if="copied" class="copied-message">Copied!</span>
  </div>
</template>

<script>
export default {
  props: {
    replyId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      copied: false
    }
  },
  methods: {
    copyReplyUrl() {
      // Construct the reply URL
      const url = `${window.location.origin}${window.location.pathname}?page=${this.$route.query.page || 1}&replyId=${this.replyId}`;
      // Copy to clipboard
      navigator.clipboard.writeText(url).then(() => {
        this.copied = true;
        setTimeout(() => this.copied = false, 1500);
      });
    }
  }
}
</script>

Plain JavaScript Example:

If you’re not using Vue, here’s a vanilla JS approach:

<button onclick="copyReplyUrl(968661)">Copy Reply URL</button>
<span id="copied-message" style="display:none;">Copied!</span>

<script>
function copyReplyUrl(replyId) {
    // You may want to dynamically get the current page and parameters
    const url = `${window.location.origin}${window.location.pathname}?page=1&replyId=${replyId}`;
    navigator.clipboard.writeText(url).then(function() {
        document.getElementById('copied-message').style.display = 'inline';
        setTimeout(() => {
            document.getElementById('copied-message').style.display = 'none';
        }, 1500);
    });
}
</script>

How to Integrate:

Add the "Copy Reply URL" option to your reply dropdown menu.
Pass the reply’s ID to the function or component.
Show a confirmation (like “Copied!”) for better UX.

Summary:
This feature can be implemented with a simple button or dropdown item that, when clicked, copies the reply’s direct URL to the clipboard using the Clipboard API. You can enhance the UX by showing a temporary confirmation message.

Let me know if you need a backend (Laravel) example or further integration tips!