@capawesome/capacitor-clipboard 0.0.1 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -2
- package/android/build.gradle +1 -1
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -21,9 +21,14 @@ Capacitor plugin to read from and write to the system clipboard.
|
|
|
21
21
|
|
|
22
22
|
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
|
|
23
23
|
|
|
24
|
-
##
|
|
24
|
+
## Use Cases
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
The Clipboard plugin is typically used whenever an app lets users copy or paste content, for example:
|
|
27
|
+
|
|
28
|
+
- **Copy to clipboard buttons**: Let users copy coupon codes, invite links, or wallet addresses with one tap.
|
|
29
|
+
- **Paste support**: Read text, URLs, or images from the clipboard into your app, for example into a form or editor.
|
|
30
|
+
- **Sharing images**: Copy a generated image (such as a QR code or chart) so users can paste it into other apps.
|
|
31
|
+
- **Rich text workflows**: Copy formatted HTML content with a plain-text fallback for apps that cannot handle HTML.
|
|
27
32
|
|
|
28
33
|
## Compatibility
|
|
29
34
|
|
|
@@ -67,12 +72,26 @@ No configuration required for this plugin.
|
|
|
67
72
|
|
|
68
73
|
## Usage
|
|
69
74
|
|
|
75
|
+
The following examples show how to write text, HTML, images, and URLs to the clipboard, and how to read its current content.
|
|
76
|
+
|
|
77
|
+
### Write text to the clipboard
|
|
78
|
+
|
|
79
|
+
Copy plain text to the system clipboard:
|
|
80
|
+
|
|
70
81
|
```typescript
|
|
71
82
|
import { Clipboard } from '@capawesome/capacitor-clipboard';
|
|
72
83
|
|
|
73
84
|
const writeText = async () => {
|
|
74
85
|
await Clipboard.write({ text: 'Hello World' });
|
|
75
86
|
};
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Write HTML with a plain-text fallback
|
|
90
|
+
|
|
91
|
+
Copy HTML content and combine it with `text` to provide a plain-text fallback for apps that cannot handle HTML content:
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { Clipboard } from '@capawesome/capacitor-clipboard';
|
|
76
95
|
|
|
77
96
|
const writeHtml = async () => {
|
|
78
97
|
await Clipboard.write({
|
|
@@ -80,16 +99,40 @@ const writeHtml = async () => {
|
|
|
80
99
|
text: 'Hello World',
|
|
81
100
|
});
|
|
82
101
|
};
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Write an image to the clipboard
|
|
105
|
+
|
|
106
|
+
Copy a real image (not just a data URL as plain text) by passing a Base64-encoded data URL:
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
import { Clipboard } from '@capawesome/capacitor-clipboard';
|
|
83
110
|
|
|
84
111
|
const writeImage = async () => {
|
|
85
112
|
await Clipboard.write({
|
|
86
113
|
image: 'data:image/png;base64,iVBORw0KGgo...',
|
|
87
114
|
});
|
|
88
115
|
};
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Write a URL to the clipboard
|
|
119
|
+
|
|
120
|
+
Copy a URL as a native URL clipboard item:
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
import { Clipboard } from '@capawesome/capacitor-clipboard';
|
|
89
124
|
|
|
90
125
|
const writeUrl = async () => {
|
|
91
126
|
await Clipboard.write({ url: 'https://capawesome.io' });
|
|
92
127
|
};
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Read the clipboard content
|
|
131
|
+
|
|
132
|
+
Read the current content of the system clipboard. The result contains the content type (text, HTML, image, or URL) and the value. Note that on Android, reading the clipboard is only possible while the app is in the foreground, and on iOS, a system paste notification is displayed:
|
|
133
|
+
|
|
134
|
+
```typescript
|
|
135
|
+
import { Clipboard } from '@capawesome/capacitor-clipboard';
|
|
93
136
|
|
|
94
137
|
const read = async () => {
|
|
95
138
|
const { type, value } = await Clipboard.read();
|
|
@@ -211,6 +254,45 @@ This plugin is a drop-in alternative to the official [`@capacitor/clipboard`](ht
|
|
|
211
254
|
| — | `write({ html: '<b>Hello</b>', text: 'Hello' })` |
|
|
212
255
|
| `read() → { value, type: 'text/plain' }` | `read() → { value, type: 'TEXT' }` |
|
|
213
256
|
|
|
257
|
+
## FAQ
|
|
258
|
+
|
|
259
|
+
### How is this plugin different from other similar plugins?
|
|
260
|
+
|
|
261
|
+
It supports far more than plain text — copy and paste images, HTML with a plain-text fallback, and native URL items, with reliable real image handling on Android, iOS, and the web. The API is fully typed and actively maintained against the latest OS and framework versions, and it uses only official platform APIs so it stays safe for App Store and Google Play submissions. If you only ever copy plain text, a simpler setup is perfectly fine; if you need rich content and consistent behavior across every platform, this plugin is designed for exactly that.
|
|
262
|
+
|
|
263
|
+
### Why is a notification shown when my app reads the clipboard?
|
|
264
|
+
|
|
265
|
+
On iOS 14 and later, the system shows a paste notification banner every time the clipboard is read. On Android 12 (API level 31) and later, the system shows a toast message when an app reads clipboard content that was written by another app. Both are expected platform behavior and cannot be suppressed.
|
|
266
|
+
|
|
267
|
+
### Why does reading the clipboard fail on Android?
|
|
268
|
+
|
|
269
|
+
On Android 10 (API level 29) and later, apps can only read the clipboard while they are in the foreground and have input focus. The `read()` method rejects otherwise, so make sure to only call it in response to a user interaction while the app is visible.
|
|
270
|
+
|
|
271
|
+
### Can I write multiple content types at once?
|
|
272
|
+
|
|
273
|
+
No, exactly one of `text`, `html`, `image` or `url` must be provided when calling `write(...)`. The only exception is that `html` may additionally be combined with `text` to provide a plain-text fallback for apps that cannot handle HTML content.
|
|
274
|
+
|
|
275
|
+
### How are images handled by this plugin?
|
|
276
|
+
|
|
277
|
+
Images are written to the clipboard as real images, not just data URLs as plain text, by passing a Base64-encoded data URL to `write(...)`. When reading, images are also returned as a Base64-encoded data URL. See the [usage examples](#write-an-image-to-the-clipboard) above.
|
|
278
|
+
|
|
279
|
+
### How is this plugin different from the official `@capacitor/clipboard` plugin?
|
|
280
|
+
|
|
281
|
+
This plugin is a drop-in alternative to the official `@capacitor/clipboard` plugin with real image support on Android and HTML support on all platforms. Only a few method options differ, see the [migration table](#migrating-from-capacitorclipboard) above.
|
|
282
|
+
|
|
283
|
+
### Can I use this plugin with Ionic, React, Vue or Angular?
|
|
284
|
+
|
|
285
|
+
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
|
|
286
|
+
|
|
287
|
+
## Related Plugins
|
|
288
|
+
|
|
289
|
+
- [Share Target](https://capawesome.io/docs/sdks/capacitor/share-target/): Receive content such as text, links, and files from other apps.
|
|
290
|
+
- [Text Interaction](https://capawesome.io/docs/sdks/capacitor/text-interaction/): Enable and disable text interaction (selection, magnifier, callout menu) in the app's WebView.
|
|
291
|
+
|
|
292
|
+
## Newsletter
|
|
293
|
+
|
|
294
|
+
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
|
|
295
|
+
|
|
214
296
|
## Changelog
|
|
215
297
|
|
|
216
298
|
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/clipboard/CHANGELOG.md).
|
package/android/build.gradle
CHANGED
|
@@ -30,7 +30,7 @@ android {
|
|
|
30
30
|
buildTypes {
|
|
31
31
|
release {
|
|
32
32
|
minifyEnabled false
|
|
33
|
-
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
|
33
|
+
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
lintOptions {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capawesome/capacitor-clipboard",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Capacitor plugin to read from and write to the system clipboard.",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Capacitor plugin to read from and write to the system clipboard on Android, iOS, and Web.",
|
|
5
5
|
"main": "dist/plugin.cjs.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/esm/index.d.ts",
|
|
@@ -40,7 +40,14 @@
|
|
|
40
40
|
"native",
|
|
41
41
|
"clipboard",
|
|
42
42
|
"copy",
|
|
43
|
-
"paste"
|
|
43
|
+
"paste",
|
|
44
|
+
"capacitor-plugin",
|
|
45
|
+
"copy to clipboard",
|
|
46
|
+
"clipboard image",
|
|
47
|
+
"clipboard html",
|
|
48
|
+
"rich text",
|
|
49
|
+
"pasteboard",
|
|
50
|
+
"copy paste"
|
|
44
51
|
],
|
|
45
52
|
"scripts": {
|
|
46
53
|
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|