@haklex/rich-plugin-link-edit 0.0.3 → 0.0.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLinkEditorPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingLinkEditorPlugin.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FloatingLinkEditorPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingLinkEditorPlugin.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAoBxD,wBAAgB,wBAAwB,IAAI,YAAY,GAAG,IAAI,CAgO9D"}
|
package/dist/index.mjs
CHANGED
|
@@ -5,6 +5,15 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
|
|
|
5
5
|
import { $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getNodeByKey } from "lexical";
|
|
6
6
|
import { Link, ExternalLink, Unlink } from "lucide-react";
|
|
7
7
|
import { useRef, useState, useCallback, useEffect } from "react";
|
|
8
|
+
var semanticClassNames = { panel: "rich-link-edit-panel", urlRow: "rich-link-edit-url-row", linkIcon: "rich-link-edit-link-icon", input: "rich-link-edit-input", actions: "rich-link-edit-actions", actionButton: "rich-link-edit-action-btn", actionButtonEnd: "rich-link-edit-action-btn--end", cmdHover: "rich-link-edit-cmd-hover" };
|
|
9
|
+
var panel = "_1uegwri0";
|
|
10
|
+
var urlRow = "_1uegwri1";
|
|
11
|
+
var linkIcon = "_1uegwri2";
|
|
12
|
+
var input = "_1uegwri3";
|
|
13
|
+
var actions = "_1uegwri4";
|
|
14
|
+
var actionButton = "_1uegwri5";
|
|
15
|
+
var actionButtonEnd = "_1uegwri6";
|
|
16
|
+
var cmdHover = "_1uegwri7";
|
|
8
17
|
function $findLinkNode(node) {
|
|
9
18
|
let current = node;
|
|
10
19
|
while (current) {
|
|
@@ -68,9 +77,11 @@ function FloatingLinkEditorPlugin() {
|
|
|
68
77
|
useEffect(() => {
|
|
69
78
|
const root = editor.getRootElement();
|
|
70
79
|
if (!root) return;
|
|
71
|
-
const
|
|
80
|
+
const CSS_CLASSES = [cmdHover, semanticClassNames.cmdHover];
|
|
72
81
|
const updateCursor = (mod) => {
|
|
73
|
-
|
|
82
|
+
for (const cssClass of CSS_CLASSES) {
|
|
83
|
+
root.classList.toggle(cssClass, mod);
|
|
84
|
+
}
|
|
74
85
|
};
|
|
75
86
|
const onKeyDown = (e) => {
|
|
76
87
|
if (e.key === "Meta" || e.key === "Control") updateCursor(true);
|
|
@@ -98,7 +109,9 @@ function FloatingLinkEditorPlugin() {
|
|
|
98
109
|
root.removeEventListener("keyup", onKeyUp);
|
|
99
110
|
root.removeEventListener("blur", onBlur);
|
|
100
111
|
root.removeEventListener("click", onClick);
|
|
101
|
-
|
|
112
|
+
for (const cssClass of CSS_CLASSES) {
|
|
113
|
+
root.classList.remove(cssClass);
|
|
114
|
+
}
|
|
102
115
|
};
|
|
103
116
|
}, [editor]);
|
|
104
117
|
const commitUrl = useCallback(() => {
|
|
@@ -146,8 +159,8 @@ function FloatingLinkEditorPlugin() {
|
|
|
146
159
|
}, []);
|
|
147
160
|
const handlePanelFocusOut = useCallback(
|
|
148
161
|
(e) => {
|
|
149
|
-
const
|
|
150
|
-
if (!
|
|
162
|
+
const panel2 = e.currentTarget;
|
|
163
|
+
if (!panel2.contains(e.relatedTarget)) {
|
|
151
164
|
panelFocusedRef.current = false;
|
|
152
165
|
commitUrl();
|
|
153
166
|
editor.focus();
|
|
@@ -166,51 +179,69 @@ function FloatingLinkEditorPlugin() {
|
|
|
166
179
|
children: /* @__PURE__ */ jsxs(
|
|
167
180
|
PopoverPopup,
|
|
168
181
|
{
|
|
169
|
-
className:
|
|
182
|
+
className: `${panel} ${semanticClassNames.panel}`,
|
|
170
183
|
onFocus: handlePanelFocusIn,
|
|
171
184
|
onBlur: handlePanelFocusOut,
|
|
172
185
|
children: [
|
|
173
|
-
/* @__PURE__ */ jsxs(
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
{
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
186
|
+
/* @__PURE__ */ jsxs(
|
|
187
|
+
"div",
|
|
188
|
+
{
|
|
189
|
+
className: `${urlRow} ${semanticClassNames.urlRow}`,
|
|
190
|
+
children: [
|
|
191
|
+
/* @__PURE__ */ jsx(
|
|
192
|
+
Link,
|
|
193
|
+
{
|
|
194
|
+
className: `${linkIcon} ${semanticClassNames.linkIcon}`,
|
|
195
|
+
size: 16
|
|
196
|
+
}
|
|
197
|
+
),
|
|
198
|
+
/* @__PURE__ */ jsx(
|
|
199
|
+
"input",
|
|
200
|
+
{
|
|
201
|
+
ref: inputRef,
|
|
202
|
+
className: `${input} ${semanticClassNames.input}`,
|
|
203
|
+
type: "url",
|
|
204
|
+
value: inputUrl,
|
|
205
|
+
onChange: (e) => setInputUrl(e.target.value),
|
|
206
|
+
onKeyDown: handleKeyDown,
|
|
207
|
+
placeholder: "https://..."
|
|
208
|
+
}
|
|
209
|
+
)
|
|
210
|
+
]
|
|
211
|
+
}
|
|
212
|
+
),
|
|
213
|
+
/* @__PURE__ */ jsxs(
|
|
214
|
+
"div",
|
|
215
|
+
{
|
|
216
|
+
className: `${actions} ${semanticClassNames.actions}`,
|
|
217
|
+
children: [
|
|
218
|
+
/* @__PURE__ */ jsxs(
|
|
219
|
+
"button",
|
|
220
|
+
{
|
|
221
|
+
className: `${actionButton} ${semanticClassNames.actionButton}`,
|
|
222
|
+
type: "button",
|
|
223
|
+
onClick: handleOpen,
|
|
224
|
+
children: [
|
|
225
|
+
/* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
|
|
226
|
+
"Open"
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
/* @__PURE__ */ jsxs(
|
|
231
|
+
"button",
|
|
232
|
+
{
|
|
233
|
+
className: `${actionButton} ${semanticClassNames.actionButton} ${actionButtonEnd} ${semanticClassNames.actionButtonEnd}`,
|
|
234
|
+
type: "button",
|
|
235
|
+
onClick: handleUnlink,
|
|
236
|
+
children: [
|
|
237
|
+
/* @__PURE__ */ jsx(Unlink, { size: 14 }),
|
|
238
|
+
"Unlink"
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
)
|
|
242
|
+
]
|
|
243
|
+
}
|
|
244
|
+
)
|
|
214
245
|
]
|
|
215
246
|
}
|
|
216
247
|
)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._1uegwri0 {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: 8px;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
padding: 12px;
|
|
7
7
|
font-size: 13px;
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
._1uegwri1 {
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
gap: 8px;
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
border-radius: var(--rc-radius-md);
|
|
16
16
|
min-width: 0;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
._1uegwri2 {
|
|
19
19
|
flex-shrink: 0;
|
|
20
20
|
color: var(--rc-text-secondary);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
._1uegwri3 {
|
|
23
23
|
flex: 1;
|
|
24
24
|
appearance: none;
|
|
25
25
|
border: none;
|
|
@@ -31,15 +31,15 @@
|
|
|
31
31
|
outline: none;
|
|
32
32
|
min-width: 0;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
._1uegwri3::placeholder {
|
|
35
35
|
color: var(--rc-text-secondary);
|
|
36
36
|
}
|
|
37
|
-
.
|
|
37
|
+
._1uegwri4 {
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
40
|
gap: 4px;
|
|
41
41
|
}
|
|
42
|
-
.
|
|
42
|
+
._1uegwri5 {
|
|
43
43
|
display: inline-flex;
|
|
44
44
|
align-items: center;
|
|
45
45
|
gap: 6px;
|
|
@@ -55,13 +55,13 @@
|
|
|
55
55
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
56
56
|
white-space: nowrap;
|
|
57
57
|
}
|
|
58
|
-
.
|
|
58
|
+
._1uegwri5:hover {
|
|
59
59
|
background-color: var(--rc-bg-secondary);
|
|
60
60
|
}
|
|
61
|
-
.
|
|
61
|
+
._1uegwri6 {
|
|
62
62
|
margin-left: auto;
|
|
63
63
|
}
|
|
64
|
-
.
|
|
64
|
+
._1uegwri7 a {
|
|
65
65
|
cursor: pointer;
|
|
66
66
|
text-decoration-line: underline;
|
|
67
67
|
}
|
package/dist/styles.css.d.ts
CHANGED
|
@@ -1,2 +1,19 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export declare const semanticClassNames: {
|
|
2
|
+
readonly panel: "rich-link-edit-panel";
|
|
3
|
+
readonly urlRow: "rich-link-edit-url-row";
|
|
4
|
+
readonly linkIcon: "rich-link-edit-link-icon";
|
|
5
|
+
readonly input: "rich-link-edit-input";
|
|
6
|
+
readonly actions: "rich-link-edit-actions";
|
|
7
|
+
readonly actionButton: "rich-link-edit-action-btn";
|
|
8
|
+
readonly actionButtonEnd: "rich-link-edit-action-btn--end";
|
|
9
|
+
readonly cmdHover: "rich-link-edit-cmd-hover";
|
|
10
|
+
};
|
|
11
|
+
export declare const panel: string;
|
|
12
|
+
export declare const urlRow: string;
|
|
13
|
+
export declare const linkIcon: string;
|
|
14
|
+
export declare const input: string;
|
|
15
|
+
export declare const actions: string;
|
|
16
|
+
export declare const actionButton: string;
|
|
17
|
+
export declare const actionButtonEnd: string;
|
|
18
|
+
export declare const cmdHover: string;
|
|
2
19
|
//# sourceMappingURL=styles.css.d.ts.map
|
package/dist/styles.css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;CASrB,CAAA;AAEV,eAAO,MAAM,KAAK,QAOhB,CAAA;AAEF,eAAO,MAAM,MAAM,QAQjB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAEF,eAAO,MAAM,KAAK,QAgBhB,CAAA;AAEF,eAAO,MAAM,OAAO,QAIlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAoBvB,CAAA;AAEF,eAAO,MAAM,eAAe,QAE1B,CAAA;AAEF,eAAO,MAAM,QAAQ,QAAY,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-plugin-link-edit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Link editing plugin",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@haklex/rich-editor-ui": "0.0.
|
|
20
|
-
"@haklex/rich-style-token": "0.0.
|
|
19
|
+
"@haklex/rich-editor-ui": "0.0.5",
|
|
20
|
+
"@haklex/rich-style-token": "0.0.5"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@lexical/link": "^0.39.0",
|