Copying a content with copy icon

Development

AI-generated summary

The discussion is about enabling users to copy specific content by clicking a ‘copy’ icon. bekircem wants to apply this feature to data from the Custom Wizard plugin, allowing users to copy a specific phrase.

bekircem explored Discourse’s code block copy feature, but it only works within code blocks. Moin suggested a theme component that copies whole posts, but bekircem believes it doesn’t meet the specific needs.

Arkshine thinks customization is possible, and bekircem shared an example of the desired outcome, where the ‘copy’ icon is placed next to specific paragraphs in the message content. bekircem also shared a code snippet from the Discourse Copy Post component, indicating the need to target a specific CSS selector, such as the last or penultimate p tag in the cooked div.

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 Customization > Theme component is what you are looking for 📄 Copy Post Component
You can copy a whole post with it

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.

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.

https://github.com/keegangeorge/discourse-copy-post/blob/main/javascripts/discourse/widgets/copy-widget.js

  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.