Copying a content with copy icon

Dev
1

Hi, instead of printing a piece of data provided to me by the plugin through a form, I want to enable users to copy this content when they wish by clicking on a ‘copy’ icon.

I noticed that Discourse has introduced this feature for code blocks, but it only works within these blocks. How can I use it elsewhere as I desire?

Thanks,

2

Maybe this theme-component is what you are looking for 📄 Copy Post Component
You can copy a whole post with it

5 Likes
3

I want to use it for data from the Custom Wizard plugin, meaning I want to enable copying of a specific phrase. I think the theme component doesn’t provide this. But, could I achieve it by customizing?

4

You’re right, the component copies the whole post content. This seems doable to customize, for sure. Can you share a visual example of what you’re expecting? I’ve never used this plugin, so I’m unsure in what step or context you want that customization.

2 Likes
5

When creating a page with the Custom Wizards plugin, I want to copy the output of the variables that the plugin gives me. So we can think of it as a randomly selected area in the message content. I can assign a custom css selector to the content to be copied.

  click(attrs) {
    const copyButton = attrs.currentTarget.activeElement;
    const rawCooked = this.attrs.attrs.cooked;
    const cookedText = this.attrs.attrs.cooked.replace(/<p>(.*)<\/p>/g, "$1\n");
    let postContents = cookedText.replace(/(<([^>]+)>)/gi, "");

    if (settings.copy_raw_html) {
      postContents = rawCooked;
    }

const rawCooked = this.attrs.attrs.cooked;

Selector is here. I want to target the last p tag or penultimate p tag in the cooked div instead of the whole cooked. I want to target them separately if possible and place the copy icons right next to the paragraphs.