@haklex/rich-renderer-mention 0.0.40 → 0.0.41
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/dist/MentionRenderer-Cy9vBX1i.js +133 -0
- package/dist/index.mjs +4 -117
- package/dist/static.mjs +7 -0
- package/package.json +4 -4
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { SiZhihu, SiTelegram, SiX, SiGithub } from "@icons-pack/react-simple-icons";
|
|
3
|
+
import { createContext, use } from "react";
|
|
4
|
+
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" };
|
|
5
|
+
var mention = "b6sgtu0";
|
|
6
|
+
var mentionPlain = "b6sgtu1";
|
|
7
|
+
var mentionIcon = "b6sgtu2";
|
|
8
|
+
var mentionIconGitHub = "b6sgtu3";
|
|
9
|
+
var mentionHandle = "b6sgtu4";
|
|
10
|
+
var editPanel = "b6sgtu5";
|
|
11
|
+
var editField = "b6sgtu6";
|
|
12
|
+
var editTrigger = "b6sgtu7";
|
|
13
|
+
var editFieldIcon = "b6sgtu8";
|
|
14
|
+
var editInput = "b6sgtu9";
|
|
15
|
+
var editSelect = "b6sgtua";
|
|
16
|
+
var editActions = "b6sgtub";
|
|
17
|
+
var editActionButton = "b6sgtuc";
|
|
18
|
+
var editActionButtonEnd = "b6sgtud";
|
|
19
|
+
const ExtraPlatformContext = createContext(
|
|
20
|
+
{}
|
|
21
|
+
);
|
|
22
|
+
function MentionPlatformProvider({
|
|
23
|
+
platforms,
|
|
24
|
+
children
|
|
25
|
+
}) {
|
|
26
|
+
return /* @__PURE__ */ jsx(ExtraPlatformContext, { value: platforms, children });
|
|
27
|
+
}
|
|
28
|
+
function useExtraPlatforms() {
|
|
29
|
+
return use(ExtraPlatformContext);
|
|
30
|
+
}
|
|
31
|
+
const GitHubIcon = /* @__PURE__ */ jsx(
|
|
32
|
+
SiGithub,
|
|
33
|
+
{
|
|
34
|
+
size: "1em",
|
|
35
|
+
className: `${mentionIconGitHub} ${semanticClassNames.mentionIconGitHub}`
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
const TwitterIcon = /* @__PURE__ */ jsx(SiX, { size: "1em", color: "#1DA1F2" });
|
|
39
|
+
const TelegramIcon = /* @__PURE__ */ jsx(SiTelegram, { size: "1em", color: "#2AABEE" });
|
|
40
|
+
const ZhihuIcon = /* @__PURE__ */ jsx(SiZhihu, { size: "1em", color: "#0084FF" });
|
|
41
|
+
const platformMetaMap = {
|
|
42
|
+
GH: {
|
|
43
|
+
label: "GitHub",
|
|
44
|
+
icon: GitHubIcon,
|
|
45
|
+
getUrl: (handle) => `https://github.com/${encodeURIComponent(handle)}`
|
|
46
|
+
},
|
|
47
|
+
TW: {
|
|
48
|
+
label: "Twitter",
|
|
49
|
+
icon: TwitterIcon,
|
|
50
|
+
getUrl: (handle) => `https://twitter.com/${encodeURIComponent(handle)}`
|
|
51
|
+
},
|
|
52
|
+
TG: {
|
|
53
|
+
label: "Telegram",
|
|
54
|
+
icon: TelegramIcon,
|
|
55
|
+
getUrl: (handle) => `https://t.me/${encodeURIComponent(handle)}`
|
|
56
|
+
},
|
|
57
|
+
ZH: {
|
|
58
|
+
label: "Zhihu",
|
|
59
|
+
icon: ZhihuIcon,
|
|
60
|
+
getUrl: (handle) => `https://www.zhihu.com/people/${encodeURIComponent(handle)}`
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const platformKeys = Object.keys(platformMetaMap);
|
|
64
|
+
function MentionRenderer({
|
|
65
|
+
platform,
|
|
66
|
+
handle,
|
|
67
|
+
displayName
|
|
68
|
+
}) {
|
|
69
|
+
const extraPlatforms = useExtraPlatforms();
|
|
70
|
+
const normalizedHandle = handle.replace(/^@+/, "");
|
|
71
|
+
const meta = platformMetaMap[platform] ?? extraPlatforms[platform];
|
|
72
|
+
const label = displayName || normalizedHandle;
|
|
73
|
+
if (meta) {
|
|
74
|
+
return /* @__PURE__ */ jsxs(
|
|
75
|
+
"span",
|
|
76
|
+
{
|
|
77
|
+
className: `${mention} ${semanticClassNames.mention}`,
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx(
|
|
80
|
+
"span",
|
|
81
|
+
{
|
|
82
|
+
className: `${mentionIcon} ${semanticClassNames.mentionIcon}`,
|
|
83
|
+
"aria-hidden": true,
|
|
84
|
+
children: meta.icon
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ jsx(
|
|
88
|
+
"a",
|
|
89
|
+
{
|
|
90
|
+
className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
|
|
91
|
+
href: meta.getUrl(normalizedHandle),
|
|
92
|
+
target: "_blank",
|
|
93
|
+
rel: "noopener noreferrer",
|
|
94
|
+
children: label
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
return /* @__PURE__ */ jsx(
|
|
102
|
+
"span",
|
|
103
|
+
{
|
|
104
|
+
className: `${mention} ${semanticClassNames.mention} ${mentionPlain} ${semanticClassNames.mentionPlain}`,
|
|
105
|
+
children: /* @__PURE__ */ jsxs(
|
|
106
|
+
"span",
|
|
107
|
+
{
|
|
108
|
+
className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
|
|
109
|
+
children: [
|
|
110
|
+
"@",
|
|
111
|
+
label
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
export {
|
|
119
|
+
MentionPlatformProvider as M,
|
|
120
|
+
MentionRenderer as a,
|
|
121
|
+
platformMetaMap as b,
|
|
122
|
+
editPanel as c,
|
|
123
|
+
editField as d,
|
|
124
|
+
editTrigger as e,
|
|
125
|
+
editFieldIcon as f,
|
|
126
|
+
editSelect as g,
|
|
127
|
+
editInput as h,
|
|
128
|
+
editActions as i,
|
|
129
|
+
editActionButton as j,
|
|
130
|
+
editActionButtonEnd as k,
|
|
131
|
+
platformKeys as p,
|
|
132
|
+
semanticClassNames as s
|
|
133
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -5,122 +5,9 @@ import { vars } from "@haklex/rich-style-token";
|
|
|
5
5
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
6
6
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
7
7
|
import { AtSign, User, ExternalLink, Trash2 } from "lucide-react";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
var mention = "b6sgtu0";
|
|
12
|
-
var mentionPlain = "b6sgtu1";
|
|
13
|
-
var mentionIcon = "b6sgtu2";
|
|
14
|
-
var mentionIconGitHub = "b6sgtu3";
|
|
15
|
-
var mentionHandle = "b6sgtu4";
|
|
16
|
-
var editPanel = "b6sgtu5";
|
|
17
|
-
var editField = "b6sgtu6";
|
|
18
|
-
var editTrigger = "b6sgtu7";
|
|
19
|
-
var editFieldIcon = "b6sgtu8";
|
|
20
|
-
var editInput = "b6sgtu9";
|
|
21
|
-
var editSelect = "b6sgtua";
|
|
22
|
-
var editActions = "b6sgtub";
|
|
23
|
-
var editActionButton = "b6sgtuc";
|
|
24
|
-
var editActionButtonEnd = "b6sgtud";
|
|
25
|
-
const ExtraPlatformContext = createContext(
|
|
26
|
-
{}
|
|
27
|
-
);
|
|
28
|
-
function MentionPlatformProvider({
|
|
29
|
-
platforms,
|
|
30
|
-
children
|
|
31
|
-
}) {
|
|
32
|
-
return /* @__PURE__ */ jsx(ExtraPlatformContext, { value: platforms, children });
|
|
33
|
-
}
|
|
34
|
-
function useExtraPlatforms() {
|
|
35
|
-
return use(ExtraPlatformContext);
|
|
36
|
-
}
|
|
37
|
-
const GitHubIcon = /* @__PURE__ */ jsx(
|
|
38
|
-
SiGithub,
|
|
39
|
-
{
|
|
40
|
-
size: "1em",
|
|
41
|
-
className: `${mentionIconGitHub} ${semanticClassNames.mentionIconGitHub}`
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
const TwitterIcon = /* @__PURE__ */ jsx(SiX, { size: "1em", color: "#1DA1F2" });
|
|
45
|
-
const TelegramIcon = /* @__PURE__ */ jsx(SiTelegram, { size: "1em", color: "#2AABEE" });
|
|
46
|
-
const ZhihuIcon = /* @__PURE__ */ jsx(SiZhihu, { size: "1em", color: "#0084FF" });
|
|
47
|
-
const platformMetaMap = {
|
|
48
|
-
GH: {
|
|
49
|
-
label: "GitHub",
|
|
50
|
-
icon: GitHubIcon,
|
|
51
|
-
getUrl: (handle) => `https://github.com/${encodeURIComponent(handle)}`
|
|
52
|
-
},
|
|
53
|
-
TW: {
|
|
54
|
-
label: "Twitter",
|
|
55
|
-
icon: TwitterIcon,
|
|
56
|
-
getUrl: (handle) => `https://twitter.com/${encodeURIComponent(handle)}`
|
|
57
|
-
},
|
|
58
|
-
TG: {
|
|
59
|
-
label: "Telegram",
|
|
60
|
-
icon: TelegramIcon,
|
|
61
|
-
getUrl: (handle) => `https://t.me/${encodeURIComponent(handle)}`
|
|
62
|
-
},
|
|
63
|
-
ZH: {
|
|
64
|
-
label: "Zhihu",
|
|
65
|
-
icon: ZhihuIcon,
|
|
66
|
-
getUrl: (handle) => `https://www.zhihu.com/people/${encodeURIComponent(handle)}`
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
const platformKeys = Object.keys(platformMetaMap);
|
|
70
|
-
function MentionRenderer({
|
|
71
|
-
platform,
|
|
72
|
-
handle,
|
|
73
|
-
displayName
|
|
74
|
-
}) {
|
|
75
|
-
const extraPlatforms = useExtraPlatforms();
|
|
76
|
-
const normalizedHandle = handle.replace(/^@+/, "");
|
|
77
|
-
const meta = platformMetaMap[platform] ?? extraPlatforms[platform];
|
|
78
|
-
const label = displayName || normalizedHandle;
|
|
79
|
-
if (meta) {
|
|
80
|
-
return /* @__PURE__ */ jsxs(
|
|
81
|
-
"span",
|
|
82
|
-
{
|
|
83
|
-
className: `${mention} ${semanticClassNames.mention}`,
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ jsx(
|
|
86
|
-
"span",
|
|
87
|
-
{
|
|
88
|
-
className: `${mentionIcon} ${semanticClassNames.mentionIcon}`,
|
|
89
|
-
"aria-hidden": true,
|
|
90
|
-
children: meta.icon
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
/* @__PURE__ */ jsx(
|
|
94
|
-
"a",
|
|
95
|
-
{
|
|
96
|
-
className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
|
|
97
|
-
href: meta.getUrl(normalizedHandle),
|
|
98
|
-
target: "_blank",
|
|
99
|
-
rel: "noopener noreferrer",
|
|
100
|
-
children: label
|
|
101
|
-
}
|
|
102
|
-
)
|
|
103
|
-
]
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
return /* @__PURE__ */ jsx(
|
|
108
|
-
"span",
|
|
109
|
-
{
|
|
110
|
-
className: `${mention} ${semanticClassNames.mention} ${mentionPlain} ${semanticClassNames.mentionPlain}`,
|
|
111
|
-
children: /* @__PURE__ */ jsxs(
|
|
112
|
-
"span",
|
|
113
|
-
{
|
|
114
|
-
className: `${mentionHandle} ${semanticClassNames.mentionHandle}`,
|
|
115
|
-
children: [
|
|
116
|
-
"@",
|
|
117
|
-
label
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
)
|
|
121
|
-
}
|
|
122
|
-
);
|
|
123
|
-
}
|
|
8
|
+
import { useRef, useState, useEffect, useCallback } from "react";
|
|
9
|
+
import { a as MentionRenderer, b as platformMetaMap, e as editTrigger, s as semanticClassNames, c as editPanel, d as editField, f as editFieldIcon, g as editSelect, p as platformKeys, h as editInput, i as editActions, j as editActionButton, k as editActionButtonEnd } from "./MentionRenderer-Cy9vBX1i.js";
|
|
10
|
+
import { M } from "./MentionRenderer-Cy9vBX1i.js";
|
|
124
11
|
function MentionEditRenderer(props) {
|
|
125
12
|
const mode = useRendererMode();
|
|
126
13
|
if (mode !== "editor") {
|
|
@@ -364,7 +251,7 @@ function MentionEditRendererInner({
|
|
|
364
251
|
}
|
|
365
252
|
export {
|
|
366
253
|
MentionEditRenderer,
|
|
367
|
-
MentionPlatformProvider,
|
|
254
|
+
M as MentionPlatformProvider,
|
|
368
255
|
MentionRenderer,
|
|
369
256
|
platformKeys,
|
|
370
257
|
platformMetaMap
|
package/dist/static.mjs
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-renderer-mention",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.41",
|
|
4
4
|
"description": "Social mention renderer with platform badges",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@icons-pack/react-simple-icons": "^13.11.2",
|
|
24
24
|
"lucide-react": "^0.574.0",
|
|
25
|
-
"@haklex/rich-editor": "0.0.
|
|
26
|
-
"@haklex/rich-
|
|
27
|
-
"@haklex/rich-
|
|
25
|
+
"@haklex/rich-editor-ui": "0.0.41",
|
|
26
|
+
"@haklex/rich-editor": "0.0.41",
|
|
27
|
+
"@haklex/rich-style-token": "0.0.41"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@lexical/react": "^0.41.0",
|