Hi Ryan,

Great plugin!

Quick question/feature request - is there a way to copy table data? For example, I'd like to copy the table generated in the following:

<p @click="$clipboard(?)">Copy the below table and paste it somewhere/p>
<table class="table-auto">
    <template x-for="example in examples" :key="example.ID">
        <tr>
            <td x-html="example.attr1"></td>
            <td x-html="example.attr2"></td>
        </tr>
    </template>
</table>

Cheers :)

Would probably be a good idea to check for clipboard write permissions before trying to write.

Hi Ryan,
Hope you don't mind me asking this hear. I'm trying to add this to filament, as follows:

JS source file (based off https://discord.com/channels/883083792112300104/883085267383226478/1013182668210446448)

console.log("Adding listener for clipboard");
document.addEventListener("alpine:initializing", () => {
    Clipboard(Alpine);
    console.log("Importing clipboard");
});

This gets converted from ES6 using laravel mix, then included in my serviceprovider via

Filament::serving(function () {

            // Just import the local app.js for the filament base
            // Ensure that mix is used to merge any relevant code into that app.js
            // There is another app.js imported by Filament itself
            Filament::registerScripts([
                asset('js/clipboard.js')
            ]);

          ...

}

The "Adding listener for clipboard" is logged, but not the "Importing clipboard", so the plugin is never imported. And I'm not entirely sure the plugin install is correct, as you're using Alpine.plugin(Clipboard).

Any ideas how I can this working in Filament?

Regards,
Andy

On windows Im seeing an odd bug that I think is isolated to this package.

Browsers: Firefox and Edge (I believe they found were using Edge Chromium)

Basically on first click, nothing is copied to the clipboard, but on second click it works.

@click="$clipboard(embedCode)"

Note: This was in version 0.2.0. I will update to 1.0 and re-test.
Update: I updated to 1.0 and still get the bug.

Thanks!

I'm implementing the clipboard on my website, but I can't get it to work. I did it like this:

<div x-data="{ markup: 'COPYME' }">
    <span @click="$clipboard(markup)" class="my-3 font-sans ...">Click to copy</span>
</div>

When I try to use it, it gives an error. My Chrome devtools gives the following error (see below). I concluded that the @click is working and that the $clipboard() property is working too (as the error occurred in the alpine clipboard file). Am I doing something wrong or is this a bug?

Many thanks!

This is within a laravel project

I am linking to a shared network folder file. An example of the returned text to copy is:
\\cadd1\ImageArchives\output\RevAL\12146.tif

I have a blade component that seems to be working as expected:

//x-clipboard-copy

@props(['text'])

<div x-data="{ clip: '{!! htmlspecialchars($text) !!}' }">
  <button class="rounded-md shadow-md px-1 py-1 text-xs bg-blue-400 hover:bg-blue-500 text-gray-50 border border-slate-500" type="button" @click="$clipboard(clip)">
    <x-icon.clipboard-copy />
  </button>
</div>

and within my blade file:

<x-clipboard-copy text="{{ $show->file_path }}" />

inspecting the element within dev tools:

<div x-data="{ clip: '\\cadd1\ImageArchives\output\RevAL\12146.tif' }">
  <button class="rounded-md shadow-md px-1 py-1 text-xs bg-blue-400 hover:bg-blue-500 text-gray-50 border border-slate-500" type="button" @click="$clipboard(clip)">
    <svg class="flex-shrink-0 h-5 w-5 transition ease-in-out duration-150" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
  </button>
</div>

looks great..however the text copied is: \cadd1ImageArchivesoutputRevALQ46.tif

any ideas on how I can escape this and get the special characters in the copy? Thanks!

ios 14.8.1

npx esbuild main.js --outfile=../dist/js/bundle.js --bundle --watch

import Clipboard from "@ryangjchandler/alpine-clipboard"

Alpine.plugin(Clipboard)

window.Alpine = Alpine;

Alpine.start()

        <p>
            <button type="button" @click="$clipboard(res)" class="btn-pink">Copy</button>
        </p>

To be honest I'm not sure if this is the right place, so feel free to close this issue if needed. A pointer where to post this would be appreciated if this is the wrong place :)

I'm using the $clipboard in an app that I am still building. This uses Livewire for a lot of things. In this specific case I have a list of users with a button to create or edit users. This opens up a modal. When the user is saved it emits a signal for other components to pick up. In this case, I'm just refreshing the list of users, that contains a few $clipboard's.

The $clipboard's aren't refreshed.

I don't really want to wire things up as it's not supposed to be two-way data (the list does not contain inputs).

I hope someone here might know a solution

As I mentioned to you, I'd love to see this packaged up so it can be installed via yarn or npm. (I know there's a CDN link but packages are preferable for me).

Thanks good sir!

I propose a feature of attaching the onCopy hook by using an x-on attribute in the same element of the $clipboard was from.

This will allow custom behavior on desired elements instead of the global behavior.

<button
  type="button"
  x-data
  @click="$clipboard('Alpine.js is awesome!', true)"
  @clipboard-copy="console.log('Copied!')"
>
  Copy
</button>

To make this happen, we have to assign the second argument of $clipboard to true, so it will trigger @clipboard-copy instead of the global onCopy.

If you accept this idea, I would love to work on this. 😄

I get this error whenever I try to use $clipboard

Alpine Error: "TypeError: Cannot read property 'writeText' of undefined"

Expression: "$clipboard(input)"

im trying to add the alpine-clipboard plugin to the project that I use TALL in and I have to add it before the alpine starts/loads to avoid the declaring errors in the console but since there is no alpine imports and property declare in the app.js, I'm not really sure how to do that. anyone who can help would be much appreciated.

currently by just adding the import Clipboard from "@ryangjchandler/alpine-clipboard" and Alpine.plugin(Clipboard) I get the following error in the console:

Uncaught (in promise) ReferenceError: $clipboard is not defined
    at eval (eval at generateFunctionFromString (module.esm.js:1)