@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 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
- ## Newsletter
24
+ ## Use Cases
25
25
 
26
- 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/).
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).
@@ -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.0.1",
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",