@capawesome/capacitor-text-interaction 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 +68 -5
- package/android/build.gradle +1 -1
- package/package.json +12 -3
package/README.md
CHANGED
|
@@ -18,9 +18,14 @@ Capacitor plugin to enable and disable text interaction (selection, magnifier, c
|
|
|
18
18
|
|
|
19
19
|
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Use Cases
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
The Text Interaction plugin is typically used to make web content feel like a native app, for example:
|
|
24
|
+
|
|
25
|
+
- **App-like UIs**: Disable text selection, the magnifier and the callout menu so buttons, menus and other controls don't trigger accidental text selection.
|
|
26
|
+
- **Kiosk apps**: Prevent users from selecting and copying content in apps running on public or shared devices.
|
|
27
|
+
- **Reading views**: Re-enable text interaction at runtime in views where users should be able to select and copy text.
|
|
28
|
+
- **Settings toggles**: Read the current state with `isEnabled()` to keep an in-app toggle in sync.
|
|
24
29
|
|
|
25
30
|
## Compatibility
|
|
26
31
|
|
|
@@ -62,16 +67,38 @@ No configuration required for this plugin.
|
|
|
62
67
|
|
|
63
68
|
## Usage
|
|
64
69
|
|
|
70
|
+
The following examples show how to disable text interaction, enable it again, and check whether it is currently enabled.
|
|
71
|
+
|
|
72
|
+
### Disable text interaction
|
|
73
|
+
|
|
74
|
+
Turn off the system text-interaction gestures, that is text selection, the selection magnifier and the callout (copy/paste) menu. Only available on iOS:
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
import { TextInteraction } from '@capawesome/capacitor-text-interaction';
|
|
78
|
+
|
|
79
|
+
const disable = async () => {
|
|
80
|
+
await TextInteraction.disable();
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Enable text interaction
|
|
85
|
+
|
|
86
|
+
Re-enable text interaction after it has been disabled. Text interaction is enabled by default. Only available on iOS:
|
|
87
|
+
|
|
65
88
|
```typescript
|
|
66
89
|
import { TextInteraction } from '@capawesome/capacitor-text-interaction';
|
|
67
90
|
|
|
68
91
|
const enable = async () => {
|
|
69
92
|
await TextInteraction.enable();
|
|
70
93
|
};
|
|
94
|
+
```
|
|
71
95
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
96
|
+
### Check whether text interaction is enabled
|
|
97
|
+
|
|
98
|
+
Read the current state, for example to keep a settings toggle in sync. Only available on iOS:
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
import { TextInteraction } from '@capawesome/capacitor-text-interaction';
|
|
75
102
|
|
|
76
103
|
const isEnabled = async () => {
|
|
77
104
|
const { enabled } = await TextInteraction.isEnabled();
|
|
@@ -164,6 +191,42 @@ Text interaction covers the system gestures that let a user work with text in th
|
|
|
164
191
|
- **Default state**: Text interaction is enabled by default.
|
|
165
192
|
- **Runtime toggling**: Changes apply to the WebView's configuration. If a change does not take effect immediately on already-rendered content, reload the WebView content to apply it.
|
|
166
193
|
|
|
194
|
+
## FAQ
|
|
195
|
+
|
|
196
|
+
### How is this plugin different from other similar plugins?
|
|
197
|
+
|
|
198
|
+
It disables the system text-interaction gestures — text selection, the selection magnifier, and the callout (copy/paste) menu — as a whole at runtime, which is exactly what app-like UIs need when accidental selection breaks the experience. It requires no native setup, exposes a fully typed API with a state check so you can keep an in-app toggle in sync, and ships for both CocoaPods and Swift Package Manager. If the CSS `user-select: none` property on specific elements covers your case, that is perfectly fine; if you want to control the WebView's text gestures as a whole, this plugin is built for it.
|
|
199
|
+
|
|
200
|
+
### Why is this plugin only available on iOS?
|
|
201
|
+
|
|
202
|
+
The plugin controls the system text-interaction gestures of the iOS WebView. On Android and Web, all methods reject as unimplemented. On Web, you can use the CSS `user-select` property to prevent text selection instead.
|
|
203
|
+
|
|
204
|
+
### What is the difference between this plugin and the CSS `user-select` property?
|
|
205
|
+
|
|
206
|
+
The CSS `user-select: none` property prevents text selection for specific elements and covers most cases. This plugin disables the system text-interaction gestures as a whole, including text selection, the selection magnifier and the callout (copy/paste) menu, which is useful for app-like UIs where accidental text selection breaks the experience. See [Text Interaction Behavior](#text-interaction-behavior) for more details.
|
|
207
|
+
|
|
208
|
+
### Is text interaction enabled by default?
|
|
209
|
+
|
|
210
|
+
Yes, text interaction is enabled by default. Call `disable()` to turn it off and `enable()` to restore the default behavior. You can read the current state at any time with `isEnabled()`.
|
|
211
|
+
|
|
212
|
+
### Why does a change not take effect immediately?
|
|
213
|
+
|
|
214
|
+
Changes apply to the WebView's configuration. If a change does not take effect immediately on already-rendered content, reload the WebView content to apply it.
|
|
215
|
+
|
|
216
|
+
### Can I use this plugin with Ionic, React, Vue or Angular?
|
|
217
|
+
|
|
218
|
+
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.
|
|
219
|
+
|
|
220
|
+
## Related Plugins
|
|
221
|
+
|
|
222
|
+
- [Text Zoom](https://capawesome.io/docs/sdks/capacitor/text-zoom/): Read and control the WebView text zoom.
|
|
223
|
+
- [Privacy Screen](https://capawesome.io/docs/sdks/capacitor/privacy-screen/): Hide sensitive app content in the app switcher and block screenshots.
|
|
224
|
+
- [System WebView](https://capawesome.io/docs/sdks/capacitor/system-webview/): Detect an outdated Android System WebView and guide users to update it.
|
|
225
|
+
|
|
226
|
+
## Newsletter
|
|
227
|
+
|
|
228
|
+
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/).
|
|
229
|
+
|
|
167
230
|
## Changelog
|
|
168
231
|
|
|
169
232
|
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/text-interaction/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-text-interaction",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Capacitor plugin to enable and disable text interaction in the WebView.",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Capacitor plugin to enable and disable text interaction in the WebView on iOS.",
|
|
5
5
|
"main": "dist/plugin.cjs.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/esm/index.d.ts",
|
|
@@ -37,7 +37,16 @@
|
|
|
37
37
|
"keywords": [
|
|
38
38
|
"capacitor",
|
|
39
39
|
"plugin",
|
|
40
|
-
"native"
|
|
40
|
+
"native",
|
|
41
|
+
"capacitor-plugin",
|
|
42
|
+
"text interaction",
|
|
43
|
+
"text selection",
|
|
44
|
+
"disable text selection",
|
|
45
|
+
"user-select",
|
|
46
|
+
"callout menu",
|
|
47
|
+
"magnifier",
|
|
48
|
+
"webview",
|
|
49
|
+
"ios"
|
|
41
50
|
],
|
|
42
51
|
"scripts": {
|
|
43
52
|
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|