ryangjchandler / alpine-clipboard Goto Github PK

View Code? Open in Web Editor NEW

322.0 3.0 11.0 397 KB

Simply copy to the users clipboard in your Alpine.js components. 📋

License: MIT License

JavaScript 100.00%

alpine-clipboard's Introduction

✨ Help support the maintenance of this package by sponsoring me.

Alpine Clipboard

Copy text to the user's clipboard.

Since v2.0, this package only supports Alpine v3.x. If you're still using Alpine 2.x, please use v1.0 of this package.

About

This plugin adds a new $clipboard magic property to all of your Alpine components that can be used to copy any piece of data to the user's clipboard.

Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/alpine-clipboard.js" defer></script>

NPM

npm install @ryangjchandler/alpine-clipboard

Add the $clipboard magic property to your project by importing the package before Alpine.js.

import Alpine from 'alpinejs'
import Clipboard from "@ryangjchandler/alpine-clipboard"

Alpine.plugin(Clipboard)

window.Alpine = Alpine
window.Alpine.start()

Usage

Note The Clipboard API that this package uses only works in a secure context (https) and localhost.

To copy some data to the clipboard, invoke $clipboard from an event handler in your component.

<div x-data="{ input: '' }">
    <input x-model="input">
    <button type="button" @click="$clipboard(input)">
        Copy to Clipboard
    </button>
</div>

Directive

This package also includes an x-clipboard directive that can be added to any element (usually a button) and it will copy the result of the expression on click.

<div x-data="{ input: 'Foo!' }">
    <button x-clipboard="input">
        Copy to Clipboard
    </button>
</div>

If you are rendering on the server, you might prefer to copy raw content instead of evaluating the expression as JavaScript. This can be done by adding the .raw modifier to the directive.

Here's a Blade snippet as an example:

<button x-clipboard.raw="{{ $post->url() }}">
    Copy to Clipboard
</button>

`Object` and `Array`

Since you can pass any properties through to the $clipboard function, if you pass through an Object or Array, it will be run through JSON.stringify before being copied to the clipboard.

<div x-data="{ items: ['foo', 'bar'] }">
    <button type="button" @click="$clipboard(items)">Copy to Clipboard</button>
</div>

The clipboard will now contain ["foo","bar"].

Hooks

If you are using the npm installation method for this package or the ESM distribution, you can use the Clipboard.configure() method to attach an onCopy hook to the clipboard.

import Clipboard from '@ryangjchandler/alpine-clipboard'

Alpine.plugin(Clipboard.configure({
    onCopy: () => {
        console.log('Copied!')
    }
}))

Specifying the mime type of the content

If you're using the $clipboard magic function, you can pass an additional argument to the function specifying the mime-type of the content. This is especially useful for copying things as HTML and being able to paste into rich text editors, email clients, etc.

<button x-on:click="$clipboard(content, 'text/html')">
    Copy as HTML
</button>

Versioning

This projects follow the Semantic Versioning guidelines.

License

Licensed under the MIT license, see LICENSE.md for details.

alpine-clipboard's People

Contributors

Stargazers

Watchers

Forkers

juliuscool thinkverse praveenjuge suryatmodulus lordisp simotod dakira thewebmastercom hassanabdullah40 shaunie2fly flynnmcp

alpine-clipboard's Issues

$clipboard(dataelement) gives writeText error

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!

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

I get this error whenever I try to use $clipboard

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

Expression: "$clipboard(input)"

alpine clipboard and TALL stack

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)

Livewire support without `wire:model`

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

Doesn't work on the mobile version of safari

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>

Inline onCopy hook

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. 😄

Add support for modern Clipboard API

Multiline text not copying

Allow passing in closure

Add permissions check

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

Clipboard not working on first click in windows

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!

html specialchars

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!

Adding to filament

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

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 :)