@haklex/rich-renderer-mention 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,31 @@
+# @haklex/rich-renderer-mention
+
+提及渲染器，支持多平台徽章。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-mention @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { MentionRenderer } from './MentionRenderer'
+export { MentionEditRenderer } from './MentionEditRenderer'
+```
+
+## 使用
+
+```tsx
+import { MentionRenderer } from '@haklex/rich-renderer-mention'
+import type { RendererConfig } from '@haklex/rich-editor'
+
+const config: RendererConfig = {
+  Mention: MentionRenderer,
+}
+```
+
+## License
+
+MIT

package/dist/MentionEditRenderer.d.ts

@@ -0,0 +1,3 @@
+import { MentionRendererProps } from './MentionRenderer';
+export declare function MentionEditRenderer(props: MentionRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MentionEditRenderer.d.ts.map

package/dist/MentionEditRenderer.d.ts.map

@@ -0,0 +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"}

package/dist/MentionRenderer.d.ts

@@ -0,0 +1,15 @@
+export interface MentionRendererProps {
+    platform: string;
+    handle: string;
+    displayName?: string;
+}
+interface MentionPlatformMeta {
+    label: string;
+    icon: React.ReactNode;
+    getUrl: (handle: string) => string;
+}
+export declare const platformMetaMap: Record<string, MentionPlatformMeta>;
+export declare const platformKeys: string[];
+export declare function MentionRenderer({ platform, handle, displayName, }: MentionRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MentionRenderer.d.ts.map

package/dist/MentionRenderer.d.ts.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MentionEditRenderer } from './MentionEditRenderer';
+export { MentionRenderer } from './MentionRenderer';
+export { MentionRenderer as default } from './MentionRenderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,269 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRendererMode } from "@haklex/rich-editor";
+import { Popover, PopoverTrigger, PopoverPanel } from "@haklex/rich-editor-ui";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { AtSign, User, ExternalLink, Trash2 } from "lucide-react";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { SiZhihu, SiTelegram, SiX, SiGithub } from "@icons-pack/react-simple-icons";
+const GitHubIcon = /* @__PURE__ */ jsx(SiGithub, { size: "1em", className: "rich-mention-icon-gh" });
+const TwitterIcon = /* @__PURE__ */ jsx(SiX, { size: "1em", color: "#1DA1F2" });
+const TelegramIcon = /* @__PURE__ */ jsx(SiTelegram, { size: "1em", color: "#2AABEE" });
+const ZhihuIcon = /* @__PURE__ */ jsx(SiZhihu, { size: "1em", color: "#0084FF" });
+const platformMetaMap = {
+  GH: {
+    label: "GitHub",
+    icon: GitHubIcon,
+    getUrl: (handle) => `https://github.com/${encodeURIComponent(handle)}`
+  },
+  TW: {
+    label: "Twitter",
+    icon: TwitterIcon,
+    getUrl: (handle) => `https://twitter.com/${encodeURIComponent(handle)}`
+  },
+  TG: {
+    label: "Telegram",
+    icon: TelegramIcon,
+    getUrl: (handle) => `https://t.me/${encodeURIComponent(handle)}`
+  },
+  ZH: {
+    label: "Zhihu",
+    icon: ZhihuIcon,
+    getUrl: (handle) => `https://www.zhihu.com/people/${encodeURIComponent(handle)}`
+  }
+};
+const platformKeys = Object.keys(platformMetaMap);
+function MentionRenderer({
+  platform,
+  handle,
+  displayName
+}) {
+  const normalizedHandle = handle.replace(/^@+/, "");
+  const meta = platformMetaMap[platform];
+  const label = displayName || normalizedHandle;
+  if (meta) {
+    return /* @__PURE__ */ jsxs("span", { className: "rich-mention", children: [
+      /* @__PURE__ */ jsx("span", { className: "rich-mention-icon", "aria-hidden": true, children: meta.icon }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "rich-mention-handle",
+          href: meta.getUrl(normalizedHandle),
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: label
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "rich-mention rich-mention-plain", children: /* @__PURE__ */ jsxs("span", { className: "rich-mention-handle", children: [
+    "@",
+    label
+  ] }) });
+}
+function MentionEditRenderer(props) {
+  const mode = useRendererMode();
+  if (mode !== "editor") {
+    return /* @__PURE__ */ jsx(MentionRenderer, { ...props });
+  }
+  return /* @__PURE__ */ jsx(MentionEditRendererInner, { ...props });
+}
+function MentionEditRendererInner({
+  platform,
+  handle,
+  displayName
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const wrapperRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [editPlatform, setEditPlatform] = useState(platform);
+  const [editHandle, setEditHandle] = useState(handle);
+  const [editDisplayName, setEditDisplayName] = useState(displayName || "");
+  useEffect(() => {
+    setEditPlatform(platform);
+    setEditHandle(handle);
+    setEditDisplayName(displayName || "");
+  }, [platform, handle, displayName]);
+  const commitChanges = useCallback(() => {
+    const trimmedHandle = editHandle.trim();
+    if (!trimmedHandle) return;
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (!node) return;
+      const writable = node.getWritable();
+      writable.__platform = editPlatform;
+      writable.__handle = trimmedHandle;
+      writable.__displayName = editDisplayName.trim() || void 0;
+    });
+    setOpen(false);
+  }, [editor, editPlatform, editHandle, editDisplayName]);
+  const handleDelete = useCallback(() => {
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (node) node.remove();
+    });
+    setOpen(false);
+  }, [editor]);
+  const handleOpen = useCallback(() => {
+    const normalizedHandle = handle.replace(/^@+/, "");
+    const meta = platformMetaMap[platform];
+    if (meta) {
+      window.open(
+        meta.getUrl(normalizedHandle),
+        "_blank",
+        "noopener,noreferrer"
+      );
+    }
+  }, [platform, handle]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitChanges();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditPlatform(platform);
+        setEditHandle(handle);
+        setEditDisplayName(displayName || "");
+        setOpen(false);
+      }
+    },
+    [commitChanges, platform, handle, displayName]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx(
+      MentionRenderer,
+      {
+        platform,
+        handle,
+        displayName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          setEditPlatform(platform);
+          setEditHandle(handle);
+          setEditDisplayName(displayName || "");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            delay: 200,
+            closeDelay: 300,
+            openOnHover: true,
+            render: /* @__PURE__ */ jsx("span", { ref: wrapperRef, className: "rich-mention-edit-trigger" }),
+            children: /* @__PURE__ */ jsx(
+              MentionRenderer,
+              {
+                platform,
+                handle,
+                displayName
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PopoverPanel,
+          {
+            side: "bottom",
+            sideOffset: 8,
+            className: "rich-mention-edit-panel",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "rich-mention-edit-field-icon",
+                    style: { fontSize: 14 },
+                    "aria-hidden": true,
+                    children: platformMetaMap[editPlatform]?.icon ?? /* @__PURE__ */ jsx(AtSign, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    className: "rich-mention-edit-select",
+                    value: editPlatform,
+                    onChange: (e) => setEditPlatform(e.target.value),
+                    children: platformKeys.map((key) => /* @__PURE__ */ jsx("option", { value: key, children: platformMetaMap[key].label }, key))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
+                /* @__PURE__ */ jsx(AtSign, { className: "rich-mention-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "rich-mention-edit-input",
+                    type: "text",
+                    value: editHandle,
+                    onChange: (e) => setEditHandle(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "handle"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-field", children: [
+                /* @__PURE__ */ jsx(User, { className: "rich-mention-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "rich-mention-edit-input",
+                    type: "text",
+                    value: editDisplayName,
+                    onChange: (e) => setEditDisplayName(e.target.value),
+                    onBlur: commitChanges,
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Display name (optional)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rich-mention-edit-actions", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rich-mention-edit-action-btn",
+                    type: "button",
+                    onClick: handleOpen,
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                      "Open"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rich-mention-edit-action-btn rich-mention-edit-action-btn--end",
+                    type: "button",
+                    onClick: handleDelete,
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                      "Remove"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MentionEditRenderer,
+  MentionRenderer,
+  MentionRenderer as default
+};

package/dist/rich-renderer-mention.css

@@ -0,0 +1,112 @@
+.rich-mention {
+  display: inline;
+  margin: 0 0.25em;
+  vertical-align: text-bottom;
+  white-space: nowrap;
+}
+.rich-mention-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.25em;
+  vertical-align: middle;
+}
+.rich-mention-icon svg {
+  display: inline;
+  height: 0.8em;
+  width: 0.8em;
+}
+.rich-mention-icon-gh {
+  fill: currentColor;
+}
+.rich-mention-handle {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  color: inherit;
+}
+.rich-mention-handle:hover {
+  color: var(--rc-accent);
+}
+.rich-mention-plain {
+  color: var(--rc-text-secondary);
+}
+.rich-mention-edit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 300px;
+  padding: 12px;
+  font-size: 13px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.rich-mention-edit-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: var(--rc-bg-secondary);
+  border-radius: 6px;
+  min-width: 0;
+}
+.rich-mention-edit-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.rich-mention-edit-field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.rich-mention-edit-input {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  font-size: 13px;
+  padding: 0;
+  outline: none;
+  min-width: 0;
+}
+.rich-mention-edit-input::placeholder {
+  color: var(--rc-text-secondary);
+}
+.rich-mention-edit-select {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  font-size: 13px;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+  min-width: 0;
+}
+.rich-mention-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rich-mention-edit-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  appearance: none;
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+.rich-mention-edit-action-btn:hover {
+  background-color: var(--rc-bg-secondary);
+}
+.rich-mention-edit-action-btn--end {
+  margin-left: auto;
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@haklex/rich-renderer-mention",
+  "version": "0.0.1",
+  "description": "Social mention renderer with platform badges",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-mention.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "^13.11.2",
+    "lucide-react": "^0.574.0"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.39.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}