@haklex/rich-renderer-mention 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":"MentionEditRenderer.d.ts","sourceRoot":"","sources":["../src/MentionEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AASrB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAO7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAQ9D"}
1
+ {"version":3,"file":"MentionEditRenderer.d.ts","sourceRoot":"","sources":["../src/MentionEditRenderer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAQ7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAQ9D"}
@@ -1 +1 @@
1
- {"version":3,"file":"MentionRenderer.d.ts","sourceRoot":"","sources":["../src/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AASrB,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CACnC;AAOD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAsB/D,CAAA;AAED,eAAO,MAAM,YAAY,UAA+B,CAAA;AAExD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,oBAAoB,2CA4BtB"}
1
+ {"version":3,"file":"MentionRenderer.d.ts","sourceRoot":"","sources":["../src/MentionRenderer.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CACnC;AAYD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAsB/D,CAAA;AAED,eAAO,MAAM,YAAY,UAA+B,CAAA;AAExD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,oBAAoB,2CAuCtB"}
package/dist/index.mjs CHANGED
@@ -6,7 +6,28 @@ import { $getNearestNodeFromDOMNode } from "lexical";
6
6
  import { AtSign, User, ExternalLink, Trash2 } from "lucide-react";
7
7
  import { useRef, useState, useEffect, useCallback } from "react";
8
8
  import { SiZhihu, SiTelegram, SiX, SiGithub } from "@icons-pack/react-simple-icons";
9
- const GitHubIcon = /* @__PURE__ */ jsx(SiGithub, { size: "1em", className: "rich-mention-icon-gh" });
9
+ var semanticClassNames = { mention: "rich-mention", mentionIcon: "rich-mention-icon", mentionIconGitHub: "rich-mention-icon-gh", mentionHandle: "rich-mention-handle", mentionPlain: "rich-mention-plain", editPanel: "rich-mention-edit-panel", editField: "rich-mention-edit-field", editTrigger: "rich-mention-edit-trigger", editFieldIcon: "rich-mention-edit-field-icon", editInput: "rich-mention-edit-input", editSelect: "rich-mention-edit-select", editActions: "rich-mention-edit-actions", editActionButton: "rich-mention-edit-action-btn", editActionButtonEnd: "rich-mention-edit-action-btn--end" };
10
+ var mention = "b6sgtu0";
11
+ var mentionPlain = "b6sgtu1";
12
+ var mentionIcon = "b6sgtu2";
13
+ var mentionIconGitHub = "b6sgtu3";
14
+ var mentionHandle = "b6sgtu4";
15
+ var editPanel = "b6sgtu5";
16
+ var editField = "b6sgtu6";
17
+ var editTrigger = "b6sgtu7";
18
+ var editFieldIcon = "b6sgtu8";
19
+ var editInput = "b6sgtu9";
20
+ var editSelect = "b6sgtua";
21
+ var editActions = "b6sgtub";
22
+ var editActionButton = "b6sgtuc";
23
+ var editActionButtonEnd = "b6sgtud";
24
+ const GitHubIcon = /* @__PURE__ */ jsx(
25
+ SiGithub,
26
+ {
27
+ size: "1em",
28
+ className: `${mentionIconGitHub} ${semanticClassNames.mentionIconGitHub}`
29
+ }
30
+ );
10
31
  const TwitterIcon = /* @__PURE__ */ jsx(SiX, { size: "1em", color: "#1DA1F2" });
11
32
  const TelegramIcon = /* @__PURE__ */ jsx(SiTelegram, { size: "1em", color: "#2AABEE" });
12
33
  const ZhihuIcon = /* @__PURE__ */ jsx(SiZhihu, { size: "1em", color: "#0084FF" });
@@ -42,24 +63,49 @@ function MentionRenderer({
42
63
  const meta = platformMetaMap[platform];
43
64
  const label = displayName || normalizedHandle;
44
65
  if (meta) {
45
- return /* @__PURE__ */ jsxs("span", { className: "rich-mention", children: [
46
- /* @__PURE__ */ jsx("span", { className: "rich-mention-icon", "aria-hidden": true, children: meta.icon }),
47
- /* @__PURE__ */ jsx(
48
- "a",
66
+ return /* @__PURE__ */ jsxs(
67
+ "span",
68
+ {
69
+ className: `${mention} ${semanticClassNames.mention}`,
70
+ children: [
71
+ /* @__PURE__ */ jsx(
72
+ "span",
73
+ {
74
+ className: `${mentionIcon} ${semanticClassNames.mentionIcon}`,
75
+ "aria-hidden": true,
76
+ children: meta.icon
77
+ }
78
+ ),
79
+ /* @__PURE__ */ jsx(
80
+ "a",
81
+ {
82
+ className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
83
+ href: meta.getUrl(normalizedHandle),
84
+ target: "_blank",
85
+ rel: "noopener noreferrer",
86
+ children: label
87
+ }
88
+ )
89
+ ]
90
+ }
91
+ );
92
+ }
93
+ return /* @__PURE__ */ jsx(
94
+ "span",
95
+ {
96
+ className: `${mention} ${semanticClassNames.mention} ${mentionPlain} ${semanticClassNames.mentionPlain}`,
97
+ children: /* @__PURE__ */ jsxs(
98
+ "span",
49
99
  {
50
- className: "rich-mention-handle",
51
- href: meta.getUrl(normalizedHandle),
52
- target: "_blank",
53
- rel: "noopener noreferrer",
54
- children: label
100
+ className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
101
+ children: [
102
+ "@",
103
+ label
104
+ ]
55
105
  }
56
106
  )
57
- ] });
58
- }
59
- return /* @__PURE__ */ jsx("span", { className: "rich-mention rich-mention-plain", children: /* @__PURE__ */ jsxs("span", { className: "rich-mention-handle", children: [
60
- "@",
61
- label
62
- ] }) });
107
+ }
108
+ );
63
109
  }
64
110
  function MentionEditRenderer(props) {
65
111
  const mode = useRendererMode();
@@ -162,7 +208,13 @@ function MentionEditRendererInner({
162
208
  delay: 200,
163
209
  closeDelay: 300,
164
210
  openOnHover: true,
165
- render: /* @__PURE__ */ jsx("span", { ref: wrapperRef, className: "rich-mention-edit-trigger" }),
211
+ render: /* @__PURE__ */ jsx(
212
+ "span",
213
+ {
214
+ ref: wrapperRef,
215
+ className: `${editTrigger} ${semanticClassNames.editTrigger}`
216
+ }
217
+ ),
166
218
  children: /* @__PURE__ */ jsx(
167
219
  MentionRenderer,
168
220
  {
@@ -178,83 +230,119 @@ function MentionEditRendererInner({
178
230
  {
179
231
  side: "bottom",
180
232
  sideOffset: 8,
181
- className: "rich-mention-edit-panel",
233
+ className: `${editPanel} ${semanticClassNames.editPanel}`,
182
234
  children: [
183
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
184
- /* @__PURE__ */ jsx(
185
- "span",
186
- {
187
- className: "rich-mention-edit-field-icon",
188
- style: { fontSize: 14 },
189
- "aria-hidden": true,
190
- children: platformMetaMap[editPlatform]?.icon ?? /* @__PURE__ */ jsx(AtSign, { size: 14 })
191
- }
192
- ),
193
- /* @__PURE__ */ jsx(
194
- "select",
195
- {
196
- className: "rich-mention-edit-select",
197
- value: editPlatform,
198
- onChange: (e) => setEditPlatform(e.target.value),
199
- children: platformKeys.map((key) => /* @__PURE__ */ jsx("option", { value: key, children: platformMetaMap[key].label }, key))
200
- }
201
- )
202
- ] }),
203
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
204
- /* @__PURE__ */ jsx(AtSign, { className: "rich-mention-edit-field-icon", size: 14 }),
205
- /* @__PURE__ */ jsx(
206
- "input",
207
- {
208
- className: "rich-mention-edit-input",
209
- type: "text",
210
- value: editHandle,
211
- onChange: (e) => setEditHandle(e.target.value),
212
- onKeyDown: handleKeyDown,
213
- placeholder: "handle"
214
- }
215
- )
216
- ] }),
217
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
218
- /* @__PURE__ */ jsx(User, { className: "rich-mention-edit-field-icon", size: 14 }),
219
- /* @__PURE__ */ jsx(
220
- "input",
221
- {
222
- className: "rich-mention-edit-input",
223
- type: "text",
224
- value: editDisplayName,
225
- onChange: (e) => setEditDisplayName(e.target.value),
226
- onBlur: commitChanges,
227
- onKeyDown: handleKeyDown,
228
- placeholder: "Display name (optional)"
229
- }
230
- )
231
- ] }),
232
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-actions", children: [
233
- /* @__PURE__ */ jsxs(
234
- "button",
235
- {
236
- className: "rich-mention-edit-action-btn",
237
- type: "button",
238
- onClick: handleOpen,
239
- children: [
240
- /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
241
- "Open"
242
- ]
243
- }
244
- ),
245
- /* @__PURE__ */ jsxs(
246
- "button",
247
- {
248
- className: "rich-mention-edit-action-btn rich-mention-edit-action-btn--end",
249
- type: "button",
250
- onClick: handleDelete,
251
- children: [
252
- /* @__PURE__ */ jsx(Trash2, { size: 14 }),
253
- "Remove"
254
- ]
255
- }
256
- )
257
- ] })
235
+ /* @__PURE__ */ jsxs(
236
+ "div",
237
+ {
238
+ className: `${editField} ${semanticClassNames.editField}`,
239
+ children: [
240
+ /* @__PURE__ */ jsx(
241
+ "span",
242
+ {
243
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
244
+ style: { fontSize: 14 },
245
+ "aria-hidden": true,
246
+ children: platformMetaMap[editPlatform]?.icon ?? /* @__PURE__ */ jsx(AtSign, { size: 14 })
247
+ }
248
+ ),
249
+ /* @__PURE__ */ jsx(
250
+ "select",
251
+ {
252
+ className: `${editSelect} ${semanticClassNames.editSelect}`,
253
+ value: editPlatform,
254
+ onChange: (e) => setEditPlatform(e.target.value),
255
+ children: platformKeys.map((key) => /* @__PURE__ */ jsx("option", { value: key, children: platformMetaMap[key].label }, key))
256
+ }
257
+ )
258
+ ]
259
+ }
260
+ ),
261
+ /* @__PURE__ */ jsxs(
262
+ "div",
263
+ {
264
+ className: `${editField} ${semanticClassNames.editField}`,
265
+ children: [
266
+ /* @__PURE__ */ jsx(
267
+ AtSign,
268
+ {
269
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
270
+ size: 14
271
+ }
272
+ ),
273
+ /* @__PURE__ */ jsx(
274
+ "input",
275
+ {
276
+ className: `${editInput} ${semanticClassNames.editInput}`,
277
+ type: "text",
278
+ value: editHandle,
279
+ onChange: (e) => setEditHandle(e.target.value),
280
+ onKeyDown: handleKeyDown,
281
+ placeholder: "handle"
282
+ }
283
+ )
284
+ ]
285
+ }
286
+ ),
287
+ /* @__PURE__ */ jsxs(
288
+ "div",
289
+ {
290
+ className: `${editField} ${semanticClassNames.editField}`,
291
+ children: [
292
+ /* @__PURE__ */ jsx(
293
+ User,
294
+ {
295
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
296
+ size: 14
297
+ }
298
+ ),
299
+ /* @__PURE__ */ jsx(
300
+ "input",
301
+ {
302
+ className: `${editInput} ${semanticClassNames.editInput}`,
303
+ type: "text",
304
+ value: editDisplayName,
305
+ onChange: (e) => setEditDisplayName(e.target.value),
306
+ onBlur: commitChanges,
307
+ onKeyDown: handleKeyDown,
308
+ placeholder: "Display name (optional)"
309
+ }
310
+ )
311
+ ]
312
+ }
313
+ ),
314
+ /* @__PURE__ */ jsxs(
315
+ "div",
316
+ {
317
+ className: `${editActions} ${semanticClassNames.editActions}`,
318
+ children: [
319
+ /* @__PURE__ */ jsxs(
320
+ "button",
321
+ {
322
+ className: `${editActionButton} ${semanticClassNames.editActionButton}`,
323
+ type: "button",
324
+ onClick: handleOpen,
325
+ children: [
326
+ /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
327
+ "Open"
328
+ ]
329
+ }
330
+ ),
331
+ /* @__PURE__ */ jsxs(
332
+ "button",
333
+ {
334
+ className: `${editActionButton} ${semanticClassNames.editActionButton} ${editActionButtonEnd} ${semanticClassNames.editActionButtonEnd}`,
335
+ type: "button",
336
+ onClick: handleDelete,
337
+ children: [
338
+ /* @__PURE__ */ jsx(Trash2, { size: 14 }),
339
+ "Remove"
340
+ ]
341
+ }
342
+ )
343
+ ]
344
+ }
345
+ )
258
346
  ]
259
347
  }
260
348
  )
@@ -1,35 +1,35 @@
1
- .rich-mention {
1
+ .b6sgtu0 {
2
2
  display: inline;
3
3
  margin: 0 0.25em;
4
4
  vertical-align: text-bottom;
5
5
  white-space: nowrap;
6
6
  }
7
- .rich-mention-icon {
7
+ .b6sgtu1 {
8
+ color: var(--rc-text-secondary);
9
+ }
10
+ .b6sgtu2 {
8
11
  display: inline-flex;
9
12
  align-items: center;
10
13
  margin-right: 0.25em;
11
14
  vertical-align: middle;
12
15
  }
13
- .rich-mention-icon svg {
16
+ .b6sgtu2 svg {
14
17
  display: inline;
15
18
  height: 0.8em;
16
19
  width: 0.8em;
17
20
  }
18
- .rich-mention-icon-gh {
21
+ .b6sgtu3 {
19
22
  fill: currentColor;
20
23
  }
21
- .rich-mention-handle {
24
+ .b6sgtu4 {
22
25
  text-decoration-line: underline;
23
26
  text-underline-offset: 2px;
24
27
  color: inherit;
25
28
  }
26
- .rich-mention-handle:hover {
29
+ .b6sgtu4:hover {
27
30
  color: var(--rc-accent);
28
31
  }
29
- .rich-mention-plain {
30
- color: var(--rc-text-secondary);
31
- }
32
- .rich-mention-edit-panel {
32
+ .b6sgtu5 {
33
33
  display: flex;
34
34
  flex-direction: column;
35
35
  gap: 8px;
@@ -38,7 +38,7 @@
38
38
  font-size: 13px;
39
39
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
40
40
  }
41
- .rich-mention-edit-field {
41
+ .b6sgtu6 {
42
42
  display: flex;
43
43
  align-items: center;
44
44
  gap: 8px;
@@ -47,17 +47,17 @@
47
47
  border-radius: 6px;
48
48
  min-width: 0;
49
49
  }
50
- .rich-mention-edit-trigger {
50
+ .b6sgtu7 {
51
51
  display: inline-flex;
52
52
  align-items: center;
53
53
  justify-content: center;
54
54
  }
55
- .rich-mention-edit-field-icon {
55
+ .b6sgtu8 {
56
56
  display: inline-flex;
57
57
  align-items: center;
58
58
  justify-content: center;
59
59
  }
60
- .rich-mention-edit-input {
60
+ .b6sgtu9 {
61
61
  flex: 1;
62
62
  appearance: none;
63
63
  border: none;
@@ -68,10 +68,10 @@
68
68
  outline: none;
69
69
  min-width: 0;
70
70
  }
71
- .rich-mention-edit-input::placeholder {
71
+ .b6sgtu9::placeholder {
72
72
  color: var(--rc-text-secondary);
73
73
  }
74
- .rich-mention-edit-select {
74
+ .b6sgtua {
75
75
  flex: 1;
76
76
  appearance: none;
77
77
  border: none;
@@ -83,12 +83,12 @@
83
83
  cursor: pointer;
84
84
  min-width: 0;
85
85
  }
86
- .rich-mention-edit-actions {
86
+ .b6sgtub {
87
87
  display: flex;
88
88
  align-items: center;
89
89
  gap: 4px;
90
90
  }
91
- .rich-mention-edit-action-btn {
91
+ .b6sgtuc {
92
92
  display: inline-flex;
93
93
  align-items: center;
94
94
  gap: 6px;
@@ -104,9 +104,9 @@
104
104
  transition: color 0.15s ease, background-color 0.15s ease;
105
105
  white-space: nowrap;
106
106
  }
107
- .rich-mention-edit-action-btn:hover {
107
+ .b6sgtuc:hover {
108
108
  background-color: var(--rc-bg-secondary);
109
109
  }
110
- .rich-mention-edit-action-btn--end {
110
+ .b6sgtud {
111
111
  margin-left: auto;
112
112
  }
@@ -1,2 +1,31 @@
1
- export {};
1
+ export declare const semanticClassNames: {
2
+ readonly mention: "rich-mention";
3
+ readonly mentionIcon: "rich-mention-icon";
4
+ readonly mentionIconGitHub: "rich-mention-icon-gh";
5
+ readonly mentionHandle: "rich-mention-handle";
6
+ readonly mentionPlain: "rich-mention-plain";
7
+ readonly editPanel: "rich-mention-edit-panel";
8
+ readonly editField: "rich-mention-edit-field";
9
+ readonly editTrigger: "rich-mention-edit-trigger";
10
+ readonly editFieldIcon: "rich-mention-edit-field-icon";
11
+ readonly editInput: "rich-mention-edit-input";
12
+ readonly editSelect: "rich-mention-edit-select";
13
+ readonly editActions: "rich-mention-edit-actions";
14
+ readonly editActionButton: "rich-mention-edit-action-btn";
15
+ readonly editActionButtonEnd: "rich-mention-edit-action-btn--end";
16
+ };
17
+ export declare const mention: string;
18
+ export declare const mentionPlain: string;
19
+ export declare const mentionIcon: string;
20
+ export declare const mentionIconGitHub: string;
21
+ export declare const mentionHandle: string;
22
+ export declare const editPanel: string;
23
+ export declare const editField: string;
24
+ export declare const editTrigger: string;
25
+ export declare const editFieldIcon: string;
26
+ export declare const editInput: string;
27
+ export declare const editSelect: string;
28
+ export declare const editActions: string;
29
+ export declare const editActionButton: string;
30
+ export declare const editActionButtonEnd: string;
2
31
  //# 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;;;;;;;;;;;;;;;CAerB,CAAA;AAEV,eAAO,MAAM,OAAO,QAKlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA;AAQF,eAAO,MAAM,iBAAiB,QAE5B,CAAA;AAEF,eAAO,MAAM,aAAa,QASxB,CAAA;AAEF,eAAO,MAAM,SAAS,QASpB,CAAA;AAEF,eAAO,MAAM,SAAS,QAQpB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,SAAS,QAepB,CAAA;AAEF,eAAO,MAAM,UAAU,QAWrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAoB3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAE9B,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-mention",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "Social mention renderer with platform badges",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -18,9 +18,9 @@
18
18
  "dependencies": {
19
19
  "@icons-pack/react-simple-icons": "^13.11.2",
20
20
  "lucide-react": "^0.574.0",
21
- "@haklex/rich-editor": "0.0.3",
22
- "@haklex/rich-editor-ui": "0.0.3",
23
- "@haklex/rich-style-token": "0.0.3"
21
+ "@haklex/rich-editor": "0.0.5",
22
+ "@haklex/rich-style-token": "0.0.5",
23
+ "@haklex/rich-editor-ui": "0.0.5"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@lexical/react": "^0.39.0",