@haklex/rich-renderer-mention 0.0.3 → 0.0.4

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.
Files changed (7) hide show
  1. package/dist/MentionEditRenderer.d.ts.map +1 -1
  2. package/dist/MentionRenderer.d.ts.map +1 -1
  3. package/dist/index.mjs +74 -22
  4. package/dist/rich-renderer-mention.css +20 -20
  5. package/dist/styles.css.d.ts +30 -1
  6. package/dist/styles.css.d.ts.map +1 -1
  7. package/package.json +4 -4
package/dist/MentionEditRenderer.d.ts.map CHANGED
@@ -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"}
package/dist/MentionRenderer.d.ts.map CHANGED
@@ -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,2CAmCtB"}
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,12 +63,19 @@ 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 }),
66
+ return /* @__PURE__ */ jsxs("span", { className: `${mention} ${semanticClassNames.mention}`, children: [
67
+ /* @__PURE__ */ jsx(
68
+ "span",
69
+ {
70
+ className: `${mentionIcon} ${semanticClassNames.mentionIcon}`,
71
+ "aria-hidden": true,
72
+ children: meta.icon
73
+ }
74
+ ),
47
75
  /* @__PURE__ */ jsx(
48
76
  "a",
49
77
  {
50
- className: "rich-mention-handle",
78
+ className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
51
79
  href: meta.getUrl(normalizedHandle),
52
80
  target: "_blank",
53
81
  rel: "noopener noreferrer",
@@ -56,10 +84,16 @@ function MentionRenderer({
56
84
  )
57
85
  ] });
58
86
  }
59
- return /* @__PURE__ */ jsx("span", { className: "rich-mention rich-mention-plain", children: /* @__PURE__ */ jsxs("span", { className: "rich-mention-handle", children: [
60
- "@",
61
- label
62
- ] }) });
87
+ return /* @__PURE__ */ jsx(
88
+ "span",
89
+ {
90
+ className: `${mention} ${semanticClassNames.mention} ${mentionPlain} ${semanticClassNames.mentionPlain}`,
91
+ children: /* @__PURE__ */ jsxs("span", { className: `${mentionHandle} ${semanticClassNames.mentionHandle}`, children: [
92
+ "@",
93
+ label
94
+ ] })
95
+ }
96
+ );
63
97
  }
64
98
  function MentionEditRenderer(props) {
65
99
  const mode = useRendererMode();
@@ -162,7 +196,13 @@ function MentionEditRendererInner({
162
196
  delay: 200,
163
197
  closeDelay: 300,
164
198
  openOnHover: true,
165
- render: /* @__PURE__ */ jsx("span", { ref: wrapperRef, className: "rich-mention-edit-trigger" }),
199
+ render: /* @__PURE__ */ jsx(
200
+ "span",
201
+ {
202
+ ref: wrapperRef,
203
+ className: `${editTrigger} ${semanticClassNames.editTrigger}`
204
+ }
205
+ ),
166
206
  children: /* @__PURE__ */ jsx(
167
207
  MentionRenderer,
168
208
  {
@@ -178,13 +218,13 @@ function MentionEditRendererInner({
178
218
  {
179
219
  side: "bottom",
180
220
  sideOffset: 8,
181
- className: "rich-mention-edit-panel",
221
+ className: `${editPanel} ${semanticClassNames.editPanel}`,
182
222
  children: [
183
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
223
+ /* @__PURE__ */ jsxs("div", { className: `${editField} ${semanticClassNames.editField}`, children: [
184
224
  /* @__PURE__ */ jsx(
185
225
  "span",
186
226
  {
187
- className: "rich-mention-edit-field-icon",
227
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
188
228
  style: { fontSize: 14 },
189
229
  "aria-hidden": true,
190
230
  children: platformMetaMap[editPlatform]?.icon ?? /* @__PURE__ */ jsx(AtSign, { size: 14 })
@@ -193,19 +233,25 @@ function MentionEditRendererInner({
193
233
  /* @__PURE__ */ jsx(
194
234
  "select",
195
235
  {
196
- className: "rich-mention-edit-select",
236
+ className: `${editSelect} ${semanticClassNames.editSelect}`,
197
237
  value: editPlatform,
198
238
  onChange: (e) => setEditPlatform(e.target.value),
199
239
  children: platformKeys.map((key) => /* @__PURE__ */ jsx("option", { value: key, children: platformMetaMap[key].label }, key))
200
240
  }
201
241
  )
202
242
  ] }),
203
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
204
- /* @__PURE__ */ jsx(AtSign, { className: "rich-mention-edit-field-icon", size: 14 }),
243
+ /* @__PURE__ */ jsxs("div", { className: `${editField} ${semanticClassNames.editField}`, children: [
244
+ /* @__PURE__ */ jsx(
245
+ AtSign,
246
+ {
247
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
248
+ size: 14
249
+ }
250
+ ),
205
251
  /* @__PURE__ */ jsx(
206
252
  "input",
207
253
  {
208
- className: "rich-mention-edit-input",
254
+ className: `${editInput} ${semanticClassNames.editInput}`,
209
255
  type: "text",
210
256
  value: editHandle,
211
257
  onChange: (e) => setEditHandle(e.target.value),
@@ -214,12 +260,18 @@ function MentionEditRendererInner({
214
260
  }
215
261
  )
216
262
  ] }),
217
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
218
- /* @__PURE__ */ jsx(User, { className: "rich-mention-edit-field-icon", size: 14 }),
263
+ /* @__PURE__ */ jsxs("div", { className: `${editField} ${semanticClassNames.editField}`, children: [
264
+ /* @__PURE__ */ jsx(
265
+ User,
266
+ {
267
+ className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
268
+ size: 14
269
+ }
270
+ ),
219
271
  /* @__PURE__ */ jsx(
220
272
  "input",
221
273
  {
222
- className: "rich-mention-edit-input",
274
+ className: `${editInput} ${semanticClassNames.editInput}`,
223
275
  type: "text",
224
276
  value: editDisplayName,
225
277
  onChange: (e) => setEditDisplayName(e.target.value),
@@ -229,11 +281,11 @@ function MentionEditRendererInner({
229
281
  }
230
282
  )
231
283
  ] }),
232
- /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-actions", children: [
284
+ /* @__PURE__ */ jsxs("div", { className: `${editActions} ${semanticClassNames.editActions}`, children: [
233
285
  /* @__PURE__ */ jsxs(
234
286
  "button",
235
287
  {
236
- className: "rich-mention-edit-action-btn",
288
+ className: `${editActionButton} ${semanticClassNames.editActionButton}`,
237
289
  type: "button",
238
290
  onClick: handleOpen,
239
291
  children: [
@@ -245,7 +297,7 @@ function MentionEditRendererInner({
245
297
  /* @__PURE__ */ jsxs(
246
298
  "button",
247
299
  {
248
- className: "rich-mention-edit-action-btn rich-mention-edit-action-btn--end",
300
+ className: `${editActionButton} ${semanticClassNames.editActionButton} ${editActionButtonEnd} ${semanticClassNames.editActionButtonEnd}`,
249
301
  type: "button",
250
302
  onClick: handleDelete,
251
303
  children: [
package/dist/rich-renderer-mention.css CHANGED
@@ -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
  }
package/dist/styles.css.d.ts CHANGED
@@ -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
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;;;;;;;;;;;;;;;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.4",
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.4",
22
+ "@haklex/rich-editor-ui": "0.0.4",
23
+ "@haklex/rich-style-token": "0.0.4"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@lexical/react": "^0.39.0",