@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":"AAAA,OAAO,cAAc,CAAA;AAoBrB,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAkBxD,wBAAgB,wBAAwB,IAAI,YAAY,GAAG,IAAI,CAqN9D"}
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 CSS_CLASS = "rich-link-edit-cmd-hover";
80
+ const CSS_CLASSES = [cmdHover, semanticClassNames.cmdHover];
72
81
  const updateCursor = (mod) => {
73
- root.classList.toggle(CSS_CLASS, mod);
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
- root.classList.remove(CSS_CLASS);
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 panel = e.currentTarget;
150
- if (!panel.contains(e.relatedTarget)) {
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: "rich-link-edit-panel",
182
+ className: `${panel} ${semanticClassNames.panel}`,
170
183
  onFocus: handlePanelFocusIn,
171
184
  onBlur: handlePanelFocusOut,
172
185
  children: [
173
- /* @__PURE__ */ jsxs("div", { className: "rich-link-edit-url-row", children: [
174
- /* @__PURE__ */ jsx(Link, { className: "rich-link-edit-link-icon", size: 16 }),
175
- /* @__PURE__ */ jsx(
176
- "input",
177
- {
178
- ref: inputRef,
179
- className: "rich-link-edit-input",
180
- type: "url",
181
- value: inputUrl,
182
- onChange: (e) => setInputUrl(e.target.value),
183
- onKeyDown: handleKeyDown,
184
- placeholder: "https://..."
185
- }
186
- )
187
- ] }),
188
- /* @__PURE__ */ jsxs("div", { className: "rich-link-edit-actions", children: [
189
- /* @__PURE__ */ jsxs(
190
- "button",
191
- {
192
- className: "rich-link-edit-action-btn",
193
- type: "button",
194
- onClick: handleOpen,
195
- children: [
196
- /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
197
- "Open"
198
- ]
199
- }
200
- ),
201
- /* @__PURE__ */ jsxs(
202
- "button",
203
- {
204
- className: "rich-link-edit-action-btn rich-link-edit-action-btn--end",
205
- type: "button",
206
- onClick: handleUnlink,
207
- children: [
208
- /* @__PURE__ */ jsx(Unlink, { size: 14 }),
209
- "Unlink"
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
- .rich-link-edit-panel {
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
- .rich-link-edit-url-row {
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
- .rich-link-edit-link-icon {
18
+ ._1uegwri2 {
19
19
  flex-shrink: 0;
20
20
  color: var(--rc-text-secondary);
21
21
  }
22
- .rich-link-edit-input {
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
- .rich-link-edit-input::placeholder {
34
+ ._1uegwri3::placeholder {
35
35
  color: var(--rc-text-secondary);
36
36
  }
37
- .rich-link-edit-actions {
37
+ ._1uegwri4 {
38
38
  display: flex;
39
39
  align-items: center;
40
40
  gap: 4px;
41
41
  }
42
- .rich-link-edit-action-btn {
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
- .rich-link-edit-action-btn:hover {
58
+ ._1uegwri5:hover {
59
59
  background-color: var(--rc-bg-secondary);
60
60
  }
61
- .rich-link-edit-action-btn--end {
61
+ ._1uegwri6 {
62
62
  margin-left: auto;
63
63
  }
64
- .rich-link-edit-cmd-hover a {
64
+ ._1uegwri7 a {
65
65
  cursor: pointer;
66
66
  text-decoration-line: underline;
67
67
  }
@@ -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
@@ -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",
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.3",
20
- "@haklex/rich-style-token": "0.0.3"
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",