@docs.plus/extension-hyperlink 1.3.4 → 1.3.5
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 +20 -11
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# Hyperlink
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@docs.plus/extension-hyperlink)
|
|
4
|
+
[](https://npmcharts.com/compare/tiptap?minimal=true)
|
|
5
|
+
[](https://www.npmjs.com/package/@docs.plus/extension-hyperlink)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
|
|
4
9
|
|
|
5
10
|
In a real world application, you would probably add a more sophisticated user interface.
|
|
6
11
|
|
|
@@ -18,7 +23,7 @@ npm install @docsplus/extension-hyperlink
|
|
|
18
23
|
|
|
19
24
|
Additional custom protocols you would like to be recognized as links.
|
|
20
25
|
|
|
21
|
-
Default: []
|
|
26
|
+
Default: `[]`
|
|
22
27
|
|
|
23
28
|
````js
|
|
24
29
|
Hyperlink.configure({
|
|
@@ -26,7 +31,7 @@ Hyperlink.configure({
|
|
|
26
31
|
})
|
|
27
32
|
````
|
|
28
33
|
|
|
29
|
-
By default, linkify adds
|
|
34
|
+
By default, [linkify](https://linkify.js.org/docs/) adds `//` to the end of a protocol however this behavior can be changed by passing `optionalSlashes` option
|
|
30
35
|
|
|
31
36
|
````js
|
|
32
37
|
Hyperlink.configure({
|
|
@@ -43,7 +48,7 @@ Hyperlink.configure({
|
|
|
43
48
|
|
|
44
49
|
If enabled, it adds links as you type.
|
|
45
50
|
|
|
46
|
-
Default: true
|
|
51
|
+
Default: `true`
|
|
47
52
|
|
|
48
53
|
````js
|
|
49
54
|
Hyperlink.configure({
|
|
@@ -55,7 +60,7 @@ Hyperlink.configure({
|
|
|
55
60
|
|
|
56
61
|
If enabled, links will be opened on click.
|
|
57
62
|
|
|
58
|
-
Default: true
|
|
63
|
+
Default: `true`
|
|
59
64
|
|
|
60
65
|
````js
|
|
61
66
|
Hyperlink.configure({
|
|
@@ -67,7 +72,7 @@ Hyperlink.configure({
|
|
|
67
72
|
|
|
68
73
|
Adds a link to the current selection if the pasted content only contains an url.
|
|
69
74
|
|
|
70
|
-
Default: true
|
|
75
|
+
Default: `true`
|
|
71
76
|
|
|
72
77
|
````js
|
|
73
78
|
Hyperlink.configure({
|
|
@@ -89,7 +94,9 @@ Hyperlink.configure({
|
|
|
89
94
|
|
|
90
95
|
### Modals
|
|
91
96
|
|
|
92
|
-
The modals configuration option lets you incorporate an interactive user interface similar to Google Docs for setting and previewing hyperlinks. This provides users with a more intuitive and interactive experience;
|
|
97
|
+
The modals configuration option lets you incorporate an interactive user interface similar to Google Docs for setting and previewing hyperlinks. This provides users with a more intuitive and interactive experience;
|
|
98
|
+
- [Dive into the code](https://github.com/HMarzban/extension-hyperlink/blob/4f37ffa18237f10d76c316844b1c2ab20b751fe9/packages/nextjs/src/components/Tiptap.tsx#L21-L28)
|
|
99
|
+
- [Demo](https://github.com/HMarzban/extension-hyperlink#test-drive-with-our-demo-)
|
|
93
100
|
|
|
94
101
|
<details>
|
|
95
102
|
<summary>The `previewHyperlinkModal` function</summary>
|
|
@@ -204,9 +211,9 @@ Hyperlink.configure({
|
|
|
204
211
|
|
|
205
212
|
### Removing and overriding existing html attributes
|
|
206
213
|
|
|
207
|
-
You can add rel: null to HTMLAttributes to remove the default rel="noopener noreferrer nofollow"
|
|
214
|
+
You can add `rel: null` to HTMLAttributes to remove the default `rel="noopener noreferrer nofollow"`. You can also override the default by using `rel: "your-value"`.
|
|
208
215
|
|
|
209
|
-
This can also be used to change the target from the default value of _blank
|
|
216
|
+
This can also be used to change the `target` from the default value of `_blank`.
|
|
210
217
|
|
|
211
218
|
````js
|
|
212
219
|
Hyperlink.configure({
|
|
@@ -220,9 +227,11 @@ Hyperlink.configure({
|
|
|
220
227
|
})
|
|
221
228
|
````
|
|
222
229
|
|
|
230
|
+
|
|
231
|
+
|
|
223
232
|
### validate
|
|
224
233
|
|
|
225
|
-
A function that validates every autolinked link. If it exists, it will be called with the link href as argument. If it returns false
|
|
234
|
+
A function that validates every autolinked link. If it exists, it will be called with the link href as argument. If it returns `false`, the link will be removed.
|
|
226
235
|
|
|
227
236
|
Can be used to set rules for example excluding or including certain domains, tlds, etc.
|
|
228
237
|
|
|
@@ -272,7 +281,7 @@ This extension doesn’t bind a specific keyboard shortcut. You would probably o
|
|
|
272
281
|
|
|
273
282
|
## Get the current value
|
|
274
283
|
|
|
275
|
-
Did you know that you can use `getAttributes
|
|
284
|
+
Did you know that you can use `getAttributes` to find out which attributes, for example which href, is currently set? Don’t confuse it with a <u>command</u> (which changes the state), it’s just a method. Here is how that could look like:
|
|
276
285
|
|
|
277
286
|
```js
|
|
278
287
|
this.editor.getAttributes('link').href
|
package/package.json
CHANGED
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docs.plus/extension-hyperlink",
|
|
3
3
|
"description": "Hyperlink component for docs.plus",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.5",
|
|
5
5
|
"author": "Hossein Marzban",
|
|
6
|
-
"homepage": "
|
|
6
|
+
"homepage": "https://github.com/docs-plus/docs.plus",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/docs-plus/docs.plus",
|
|
10
|
+
"directory": "packages/extension-hyperlink"
|
|
11
|
+
},
|
|
7
12
|
"keywords": [
|
|
8
13
|
"tiptap",
|
|
9
14
|
"tiptap extension",
|
|
10
15
|
"hyperlink",
|
|
11
|
-
"link"
|
|
16
|
+
"link",
|
|
17
|
+
"docs.plus",
|
|
18
|
+
"prosemirror"
|
|
12
19
|
],
|
|
13
20
|
"exports": {
|
|
14
21
|
".": {
|