@typix-editor/extension-floating-link 2.0.0 → 4.0.0
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 +59 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# @typix-editor/extension-floating-link
|
|
2
|
+
|
|
3
|
+
Floating link editor toolbar for Typix editors. Shows an inline UI for editing link URLs when a link is selected.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @typix-editor/extension-floating-link
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { FloatingLinkExtension } from "@typix-editor/extension-floating-link";
|
|
15
|
+
|
|
16
|
+
<EditorRoot editorConfig={config}>
|
|
17
|
+
<EditorContent />
|
|
18
|
+
<FloatingLinkExtension />
|
|
19
|
+
</EditorRoot>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Custom Render
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
<FloatingLinkExtension verticalOffset={10}>
|
|
26
|
+
{({ isEditing, url, setUrl, saveLink, cancelEdit, editLink, removeLink }) => (
|
|
27
|
+
<div className="my-link-editor">
|
|
28
|
+
{isEditing ? (
|
|
29
|
+
<>
|
|
30
|
+
<input value={url} onChange={(e) => setUrl(e.target.value)} />
|
|
31
|
+
<button onClick={saveLink}>Save</button>
|
|
32
|
+
<button onClick={cancelEdit}>Cancel</button>
|
|
33
|
+
</>
|
|
34
|
+
) : (
|
|
35
|
+
<>
|
|
36
|
+
<a href={url}>{url}</a>
|
|
37
|
+
<button onClick={editLink}>Edit</button>
|
|
38
|
+
<button onClick={removeLink}>Remove</button>
|
|
39
|
+
</>
|
|
40
|
+
)}
|
|
41
|
+
</div>
|
|
42
|
+
)}
|
|
43
|
+
</FloatingLinkExtension>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Props
|
|
47
|
+
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
|------|------|---------|-------------|
|
|
50
|
+
| `children` | `(props: FloatingLinkRenderProps) => ReactNode` | Built-in UI | Custom render function |
|
|
51
|
+
| `verticalOffset` | `number` | `0` | Vertical offset for positioning |
|
|
52
|
+
|
|
53
|
+
## Documentation
|
|
54
|
+
|
|
55
|
+
[typix.com/docs/extensions/floating-link](https://typix.com/docs/extensions/floating-link)
|
|
56
|
+
|
|
57
|
+
## License
|
|
58
|
+
|
|
59
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@typix-editor/extension-floating-link",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Floating link editor extension for Typix",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Diyorbek Juraev <mrdiyorbekjuraev@gmail.com>",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": "^18.2.0 || ^19.0.0-0",
|
|
29
29
|
"react-dom": "^18.2.0 || ^19.0.0-0",
|
|
30
|
-
"@typix-editor/react": "
|
|
30
|
+
"@typix-editor/react": "4.0.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@lexical/react": "^0.
|
|
33
|
+
"@lexical/react": "^0.40.0",
|
|
34
34
|
"@types/react": "^19.2.7",
|
|
35
|
-
"@lexical/utils": "^0.
|
|
36
|
-
"@lexical/link": "^0.
|
|
35
|
+
"@lexical/utils": "^0.40.0",
|
|
36
|
+
"@lexical/link": "^0.40.0",
|
|
37
37
|
"@types/react-dom": "^19.2.1",
|
|
38
|
-
"lexical": "^0.
|
|
38
|
+
"lexical": "^0.40.0",
|
|
39
39
|
"react": "^18.2.0 || ^19.0.0-0",
|
|
40
40
|
"react-dom": "^18.2.0 || ^19.0.0-0",
|
|
41
|
-
"@typix-editor/react": "
|
|
41
|
+
"@typix-editor/react": "4.0.0"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"build": "tsup",
|