@funhub/platform 0.2.30 → 0.2.31

package/dist/components/pages/publish/components/collection-popup.mjs

@@ -1,2 +1,82 @@
 
-"use client";import{gCommunityGetUserCollections as e}from"../../../../service/generated/client.mjs";import{Box as t}from"../../../ui/box.mjs";import{InfiniteScroll as n}from"../../../ui/infinite-scroll.mjs";import{Text as r}from"../../../ui/text.mjs";import{usePaginated as i}from"../../../../hooks/query/use-query.mjs";import a from"../../../ui/popup.mjs";import{CollectionCard as o}from"./collection-card.mjs";import s from"../../../../assets/icons/publish/publish_add.mjs";import{useMemo as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useTranslations as d}from"next-intl";function f({open:f,onOpenChange:p,onSelect:m}){let h=d(`components.pages.publish.components`),{data:g,fetchNextPage:_,hasNextPage:v}=i({key:[`publish`,`collection-list`,`popup`,20],queryFn:t=>e({page:t,page_size:20}),getNextPageParam:(e,t)=>{if(e.data?.data?.has_more)return t.length+1},options:{enabled:f},initialPageParam:1}),y=c(()=>{let e=g?.pages??[],t=[];for(let n of e){let e=n.data?.data?.collections??[];t.push(...e)}return t},[g?.pages]),b=(g?.pages?.length??0)>0;return u(a,{open:f,onOpenChange:p,className:`flex flex-col rounded-t-2xl bg-bg2 text-white`,children:[l(t,{className:`flex justify-center py-[16px]`,children:l(r,{className:`text-text1 text-[18px] font-bold`,children:h(`collectionPopup.syncToCollection`)})}),u(n,{className:`flex-1 overflow-y-auto px-3 h-[70vh]`,hasMore:!!v,loadMore:()=>_().then(()=>void 0),children:[y.map(e=>l(o,{className:`mb-3 w-full`,item:e,onClick:()=>{m(e),p(!1)},rightSlot:l(s,{width:18,height:18})},e.collection_id)),b&&y.length===0&&l(t,{className:`py-10 text-center text-sm text-white/50`,children:h(`collectionPopup.noCollections`)})]})]})}export{f as CollectionPopup};
+'use client';
+
+import { gCommunityGetUserCollections } from "../../../../service/generated/client.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { InfiniteScroll } from "../../../ui/infinite-scroll.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { usePaginated } from "../../../../hooks/query/use-query.mjs";
+import Popup from "../../../ui/popup.mjs";
+import { CollectionCard } from "./collection-card.mjs";
+import SvgPublishAdd from "../../../../assets/icons/publish/publish_add.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/collection-popup.tsx
+function CollectionPopup({ open, onOpenChange, onSelect }) {
+	const t = useTranslations("components.pages.publish.components");
+	const pageSize = 20;
+	const { data, fetchNextPage, hasNextPage } = usePaginated({
+		key: [
+			"publish",
+			"collection-list",
+			"popup",
+			pageSize
+		],
+		queryFn: (pageParam) => gCommunityGetUserCollections({
+			page: pageParam,
+			page_size: pageSize
+		}),
+		getNextPageParam: (last, all) => {
+			if (!last.data?.data?.has_more) return;
+			return all.length + 1;
+		},
+		options: { enabled: open },
+		initialPageParam: 1
+	});
+	const list = useMemo(() => {
+		const pages = data?.pages ?? [];
+		const result = [];
+		for (const page of pages) {
+			const items = page.data?.data?.collections ?? [];
+			result.push(...items);
+		}
+		return result;
+	}, [data?.pages]);
+	const hasLoadedOnce = (data?.pages?.length ?? 0) > 0;
+	return /* @__PURE__ */ jsxs(Popup, {
+		open,
+		onOpenChange,
+		className: "flex flex-col rounded-t-2xl bg-bg2 text-white",
+		children: [/* @__PURE__ */ jsx(Box, {
+			className: "flex justify-center py-[16px]",
+			children: /* @__PURE__ */ jsx(Text, {
+				className: "text-text1 text-[18px] font-bold",
+				children: t("collectionPopup.syncToCollection")
+			})
+		}), /* @__PURE__ */ jsxs(InfiniteScroll, {
+			className: "flex-1 overflow-y-auto px-3 h-[70vh]",
+			hasMore: Boolean(hasNextPage),
+			loadMore: () => fetchNextPage().then(() => void 0),
+			children: [list.map((item) => /* @__PURE__ */ jsx(CollectionCard, {
+				className: "mb-3 w-full",
+				item,
+				onClick: () => {
+					onSelect(item);
+					onOpenChange(false);
+				},
+				rightSlot: /* @__PURE__ */ jsx(SvgPublishAdd, {
+					width: 18,
+					height: 18
+				})
+			}, item.collection_id)), hasLoadedOnce && list.length === 0 && /* @__PURE__ */ jsx(Box, {
+				className: "py-10 text-center text-sm text-white/50",
+				children: t("collectionPopup.noCollections")
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { CollectionPopup };

package/dist/components/pages/publish/components/collection.mjs

@@ -1,2 +1,98 @@
 
-"use client";import{gCommunityGetUserCollections as e}from"../../../../service/generated/client.mjs";import{useRouter as t}from"../../../../utils/use-compatible-router.mjs";import{Box as n}from"../../../ui/box.mjs";import{Text as r}from"../../../ui/text.mjs";import{useRequest as i}from"../../../../hooks/query/use-query.mjs";import a from"../../../ui/legacy/button.mjs";import o from"../../../../assets/icons/publish/publish_collection.mjs";import{CollectionCard as s}from"./collection-card.mjs";import{CollectionPopup as c}from"./collection-popup.mjs";import{useMemo as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useTranslations as p}from"next-intl";function m({active:m,setActive:h}){let g=p(`components.pages.publish.components`),[_,v]=u([]),[y,b]=u(!1),x=t(),{data:S=[]}=i([`publish`,`collection-list`,`preview`,3],async()=>(await e({page:1,page_size:3})).data?.data?.collections??[]);function C(e){v(t=>t.some(t=>t.collection_id===e.collection_id)?t:[e,...t]),h(e.collection_id??``)}let w=l(()=>{let e=new Set,t=[];for(let n of[..._,...S]){let r=n.collection_id??``;if(!(!r||e.has(r))&&(e.add(r),t.push(n),t.length>=3))break}return t},[_,S]);return f(n,{children:[f(n,{className:`flex justify-between items-center px-[16px] py-[12px]`,children:[d(r,{className:`text-[14px] text-text1`,children:g(`collection.syncToCollection`)}),d(a,{type:`button`,className:`!text-[12px] text-theme5 bg-[rgba(253,76,94,.1)] rounded-[20px] w-[64px] h-[24px] px-[8px] py-[4px]`,onClick:()=>b(!0),children:g(`collection.moreCollections`)})]}),f(n,{className:`flex gap-[8px] px-[16px] pb-[12px] overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden`,children:[w.map(e=>d(s,{item:e,active:e.collection_id===m,onClick:()=>h(e.collection_id===m?``:e.collection_id??``)},e.collection_id)),f(a,{className:`flex w-[226px] h-[70px] shrink-0 items-center gap-[12px] rounded-[8px] px-[12px] py-[10px] bg-bg1`,onClick:()=>x.push(`/collection/create?type=publish`),children:[d(o,{width:52,height:52}),d(n,{className:`flex flex-1 flex-col overflow-hidden gap-[4px]`,children:d(r,{className:`text-[14px] text-text2 text-left`,children:g(`collection.createCollection`)})})]})]}),d(c,{open:y,onOpenChange:b,onSelect:C})]})}export{m as Collection};
+'use client';
+
+import { gCommunityGetUserCollections } from "../../../../service/generated/client.mjs";
+import { useRouter } from "../../../../utils/use-compatible-router.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { useRequest } from "../../../../hooks/query/use-query.mjs";
+import Button from "../../../ui/legacy/button.mjs";
+import SvgPublishCollection from "../../../../assets/icons/publish/publish_collection.mjs";
+import { CollectionCard } from "./collection-card.mjs";
+import { CollectionPopup } from "./collection-popup.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/collection.tsx
+function Collection({ active, setActive }) {
+	const t = useTranslations("components.pages.publish.components");
+	const [pinnedList, setPinnedList] = useState([]);
+	const [popupOpen, setPopupOpen] = useState(false);
+	const router = useRouter();
+	const { data: remoteList = [] } = useRequest([
+		"publish",
+		"collection-list",
+		"preview",
+		3
+	], async () => {
+		return (await gCommunityGetUserCollections({
+			page: 1,
+			page_size: 3
+		})).data?.data?.collections ?? [];
+	});
+	function handleSelect(item) {
+		setPinnedList((prev) => {
+			if (prev.some((col) => col.collection_id === item.collection_id)) return prev;
+			return [item, ...prev];
+		});
+		setActive(item.collection_id ?? "");
+	}
+	const items = useMemo(() => {
+		const seen = /* @__PURE__ */ new Set();
+		const merged = [];
+		for (const it of [...pinnedList, ...remoteList]) {
+			const id = it.collection_id ?? "";
+			if (!id || seen.has(id)) continue;
+			seen.add(id);
+			merged.push(it);
+			if (merged.length >= 3) break;
+		}
+		return merged;
+	}, [pinnedList, remoteList]);
+	return /* @__PURE__ */ jsxs(Box, { children: [
+		/* @__PURE__ */ jsxs(Box, {
+			className: "flex justify-between items-center px-[16px] py-[12px]",
+			children: [/* @__PURE__ */ jsx(Text, {
+				className: "text-[14px] text-text1",
+				children: t("collection.syncToCollection")
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				className: "!text-[12px] text-theme5 bg-[rgba(253,76,94,.1)] rounded-[20px] w-[64px] h-[24px] px-[8px] py-[4px]",
+				onClick: () => setPopupOpen(true),
+				children: t("collection.moreCollections")
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Box, {
+			className: "flex gap-[8px] px-[16px] pb-[12px] overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+			children: [items.map((item) => {
+				return /* @__PURE__ */ jsx(CollectionCard, {
+					item,
+					active: item.collection_id === active,
+					onClick: () => setActive(item.collection_id === active ? "" : item.collection_id ?? "")
+				}, item.collection_id);
+			}), /* @__PURE__ */ jsxs(Button, {
+				className: "flex w-[226px] h-[70px] shrink-0 items-center gap-[12px] rounded-[8px] px-[12px] py-[10px] bg-bg1",
+				onClick: () => router.push("/collection/create?type=publish"),
+				children: [/* @__PURE__ */ jsx(SvgPublishCollection, {
+					width: 52,
+					height: 52
+				}), /* @__PURE__ */ jsx(Box, {
+					className: "flex flex-1 flex-col overflow-hidden gap-[4px]",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: "text-[14px] text-text2 text-left",
+						children: t("collection.createCollection")
+					})
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsx(CollectionPopup, {
+			open: popupOpen,
+			onOpenChange: setPopupOpen,
+			onSelect: handleSelect
+		})
+	] });
+}
+
+//#endregion
+export { Collection };

package/dist/components/pages/publish/components/cover-item.mjs

@@ -1,2 +1,47 @@
 
-"use client";import{Image as e}from"../../../ui/image.mjs";import{Box as t}from"../../../ui/box.mjs";import{Text as n}from"../../../ui/text.mjs";import{memo as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{useTranslations as o}from"next-intl";const s=r(({coverUrl:r,onClick:s})=>{let c=o(`components.pages.publish.components`);return r?a(t,{className:`relative aspect-square overflow-hidden rounded-lg`,onClick:s,children:[i(e,{src:r,alt:c(`coverItem.coverAlt`),fill:!0,className:`object-cover`}),i(t,{className:`absolute inset-x-0 bottom-0 h-8 bg-black/60 text-center`,children:i(n,{as:`span`,className:`text-xs leading-8 text-white`,children:c(`coverItem.editCover`)})})]}):a(t,{className:`flex aspect-square flex-col items-center justify-center rounded-lg border border-white/20 text-white/60`,onClick:s,children:[i(n,{as:`span`,className:`text-2xl`,children:`+`}),i(n,{as:`span`,className:`text-xs`,children:c(`coverItem.uploadImage`)})]})});export{s as CoverItem};
+'use client';
+
+import { Image } from "../../../ui/image.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/cover-item.tsx
+const CoverItem = memo(({ coverUrl, onClick }) => {
+	const t = useTranslations("components.pages.publish.components");
+	if (coverUrl) return /* @__PURE__ */ jsxs(Box, {
+		className: "relative aspect-square overflow-hidden rounded-lg",
+		onClick,
+		children: [/* @__PURE__ */ jsx(Image, {
+			src: coverUrl,
+			alt: t("coverItem.coverAlt"),
+			fill: true,
+			className: "object-cover"
+		}), /* @__PURE__ */ jsx(Box, {
+			className: "absolute inset-x-0 bottom-0 h-8 bg-black/60 text-center",
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: "text-xs leading-8 text-white",
+				children: t("coverItem.editCover")
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "flex aspect-square flex-col items-center justify-center rounded-lg border border-white/20 text-white/60",
+		onClick,
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: "text-2xl",
+			children: "+"
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: "text-xs",
+			children: t("coverItem.uploadImage")
+		})]
+	});
+});
+
+//#endregion
+export { CoverItem };

package/dist/components/pages/publish/components/editor.mjs

@@ -1,2 +1,209 @@
 
-"use client";import{Box as e}from"../../../ui/box.mjs";import{MAX_LENGTH as t}from"../constants.mjs";import{filterAtUserNames as n}from"../utils/publish-utils.mjs";import{useEffect as r,useImperativeHandle as i,useMemo as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useTranslations as u}from"next-intl";function d(e){if(!e)return``;let t=document.createElement(`div`);t.innerHTML=e;function n(e){if(e.nodeType===Node.TEXT_NODE)return e.textContent||``;if(e.nodeType===Node.ELEMENT_NODE){let t=e;if(t.tagName.toLowerCase()===`span`&&t.classList.contains(`mention`))return t.outerHTML;if(t.tagName.toLowerCase()===`br`)return`<br>`;let r=``;for(let e of Array.from(t.childNodes))r+=n(e);return r}return``}let r=``;for(let e of Array.from(t.childNodes))r+=n(e);return r}function f({content:f,onContentChange:g,atUsers:_,onAtUsersChange:v,ref:y}){let b=u(`components.pages.publish.components`),x=o(null),S=o(null),[C,w]=s(!1),[T,E]=s(!0),D=()=>!(x.current?.textContent??``).trim();i(y,()=>({insertHtml:e=>{if(!x.current)return;let t=d(e);if(!h(x.current,t)){let e=x.current.innerHTML,n=d(e)+t;x.current.innerHTML=n,m(x.current),p(x.current)}g(x.current.innerHTML),E(D())},setHtml:e=>{if(!x.current)return;let t=d(e);x.current.innerHTML=t,m(x.current),g(x.current.innerHTML),E(D()),p(x.current)},focus:()=>{x.current?.focus()},saveSelection:()=>{if(!x.current)return;let e=window.getSelection();if(!e||!e.rangeCount)return;let t=e.getRangeAt(0);x.current.contains(t.startContainer)&&(S.current=t.cloneRange())},restoreSelection:()=>{if(!x.current||!S.current)return;let e=window.getSelection();e&&(x.current.focus(),e.removeAllRanges(),e.addRange(S.current))}})),r(()=>{if(!x.current||document.activeElement===x.current)return;let e=d(f);x.current.innerHTML!==e&&(x.current.innerHTML=e,queueMicrotask(()=>{E(D())}))},[f]);let O=a(()=>T&&!C,[T,C]),k=e=>{let n=e.currentTarget,r=n.textContent??``;r.length>t&&(n.textContent=r.slice(0,t),p(n)),E(!(n.textContent??``).trim()),g(n.innerHTML)},A=e=>{e.preventDefault();let t=e.clipboardData.getData(`text/plain`),n=window.getSelection();if(!n||!n.rangeCount)return;let r=n.getRangeAt(0);r.deleteContents();let i=document.createTextNode(t);r.insertNode(i),r.setStartAfter(i),r.collapse(!0),n.removeAllRanges(),n.addRange(r);let a=new Event(`input`,{bubbles:!0});x.current?.dispatchEvent(a)},j=e=>{e.key!==`Backspace`&&e.key!==`Delete`||queueMicrotask(()=>{let e=n(x.current?.textContent??``,_);e.length!==_.length&&v(e),E(D()),g(x.current?.innerHTML??``)})};return c(e,{className:`px-[16px] py-[26px] flex-1 overflow-y-auto`,children:l(e,{className:`relative`,children:[O&&l(e,{className:`pointer-events-none absolute left-0 top-0 text-[16px] text-text3`,"aria-hidden":`true`,children:[b(`editor.headlineHint`),`~`]}),c(`div`,{ref:x,contentEditable:!0,suppressContentEditableWarning:!0,className:`min-h-[200px] w-full overflow-y-auto text-[16px] text-white outline-none`,onFocus:()=>{w(!0),E(D())},onBlur:()=>{w(!1),E(D())},onKeyDown:j,onInput:k,onPaste:A})]})})}function p(e){let t=window.getSelection();if(!t)return;let n=document.createRange();n.selectNodeContents(e),n.collapse(!1),t.removeAllRanges(),t.addRange(n)}function m(e){let t=e.lastChild;!t||t.nodeType!==Node.ELEMENT_NODE||t.classList.contains(`mention`)&&e.appendChild(document.createTextNode(`\xA0`))}function h(e,t){let n=window.getSelection();if(!n||!n.rangeCount)return!1;let r=n.getRangeAt(0);if(!e.contains(r.startContainer))return!1;r.deleteContents();let i=document.createElement(`div`);i.innerHTML=t;let a=document.createDocumentFragment(),o=null;for(;i.firstChild;)o=i.firstChild,a.appendChild(o);if(r.insertNode(a),!o)return!0;if(o.nodeType===Node.ELEMENT_NODE&&o.classList.contains(`mention`)){let e=document.createTextNode(`\xA0`);o.parentNode?.insertBefore(e,o.nextSibling),r.setStartAfter(e)}else r.setStartAfter(o);return r.collapse(!0),n.removeAllRanges(),n.addRange(r),!0}export{f as PublishEditor};
+'use client';
+
+import { Box } from "../../../ui/box.mjs";
+import { MAX_LENGTH } from "../constants.mjs";
+import { filterAtUserNames } from "../utils/publish-utils.mjs";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/editor.tsx
+/**
+* 清理 HTML，只保留 @mention 标签，其他都转换为纯文本
+* @param html - 原始 HTML 字符串
+* @returns 清理后的 HTML 字符串
+*/
+function sanitizeHtml(html) {
+	if (!html) return "";
+	const tempDiv = document.createElement("div");
+	tempDiv.innerHTML = html;
+	function processNode(node) {
+		if (node.nodeType === Node.TEXT_NODE) return node.textContent || "";
+		if (node.nodeType === Node.ELEMENT_NODE) {
+			const element = node;
+			if (element.tagName.toLowerCase() === "span" && element.classList.contains("mention")) return element.outerHTML;
+			if (element.tagName.toLowerCase() === "br") return "<br>";
+			let result = "";
+			for (const child of Array.from(element.childNodes)) result += processNode(child);
+			return result;
+		}
+		return "";
+	}
+	let result = "";
+	for (const child of Array.from(tempDiv.childNodes)) result += processNode(child);
+	return result;
+}
+function PublishEditor({ content, onContentChange, atUsers, onAtUsersChange, ref }) {
+	const t = useTranslations("components.pages.publish.components");
+	const elRef = useRef(null);
+	const selectionRangeRef = useRef(null);
+	const [focused, setFocused] = useState(false);
+	const [isEmpty, setIsEmpty] = useState(true);
+	const computeEmpty = () => {
+		return !(elRef.current?.textContent ?? "").trim();
+	};
+	useImperativeHandle(ref, () => ({
+		insertHtml: (html) => {
+			if (!elRef.current) return;
+			const sanitizedHtml = sanitizeHtml(html);
+			if (!insertHtmlAtCaret(elRef.current, sanitizedHtml)) {
+				const currentHtml = elRef.current.innerHTML;
+				const newHtml = sanitizeHtml(currentHtml) + sanitizedHtml;
+				elRef.current.innerHTML = newHtml;
+				ensureMentionTrailingSpace(elRef.current);
+				placeCaretToEnd(elRef.current);
+			}
+			onContentChange(elRef.current.innerHTML);
+			setIsEmpty(computeEmpty());
+		},
+		setHtml: (html) => {
+			if (!elRef.current) return;
+			const sanitizedHtml = sanitizeHtml(html);
+			elRef.current.innerHTML = sanitizedHtml;
+			ensureMentionTrailingSpace(elRef.current);
+			onContentChange(elRef.current.innerHTML);
+			setIsEmpty(computeEmpty());
+			placeCaretToEnd(elRef.current);
+		},
+		focus: () => {
+			elRef.current?.focus();
+		},
+		saveSelection: () => {
+			if (!elRef.current) return;
+			const selection = window.getSelection();
+			if (!selection || !selection.rangeCount) return;
+			const range = selection.getRangeAt(0);
+			if (!elRef.current.contains(range.startContainer)) return;
+			selectionRangeRef.current = range.cloneRange();
+		},
+		restoreSelection: () => {
+			if (!elRef.current || !selectionRangeRef.current) return;
+			const selection = window.getSelection();
+			if (!selection) return;
+			elRef.current.focus();
+			selection.removeAllRanges();
+			selection.addRange(selectionRangeRef.current);
+		}
+	}));
+	useEffect(() => {
+		if (!elRef.current) return;
+		if (document.activeElement === elRef.current) return;
+		const sanitizedContent = sanitizeHtml(content);
+		if (elRef.current.innerHTML !== sanitizedContent) {
+			elRef.current.innerHTML = sanitizedContent;
+			queueMicrotask(() => {
+				setIsEmpty(computeEmpty());
+			});
+		}
+	}, [content]);
+	const showPlaceholder = useMemo(() => isEmpty && !focused, [isEmpty, focused]);
+	const handleInput = (e) => {
+		const element = e.currentTarget;
+		const text = element.textContent ?? "";
+		if (text.length > MAX_LENGTH) {
+			element.textContent = text.slice(0, MAX_LENGTH);
+			placeCaretToEnd(element);
+		}
+		setIsEmpty(!(element.textContent ?? "").trim());
+		onContentChange(element.innerHTML);
+	};
+	const handlePaste = (e) => {
+		e.preventDefault();
+		const pastedText = e.clipboardData.getData("text/plain");
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return;
+		const range = selection.getRangeAt(0);
+		range.deleteContents();
+		const textNode = document.createTextNode(pastedText);
+		range.insertNode(textNode);
+		range.setStartAfter(textNode);
+		range.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(range);
+		const inputEvent = new Event("input", { bubbles: true });
+		elRef.current?.dispatchEvent(inputEvent);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key !== "Backspace" && e.key !== "Delete") return;
+		queueMicrotask(() => {
+			const updated = filterAtUserNames(elRef.current?.textContent ?? "", atUsers);
+			if (updated.length !== atUsers.length) onAtUsersChange(updated);
+			setIsEmpty(computeEmpty());
+			onContentChange(elRef.current?.innerHTML ?? "");
+		});
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		className: "px-[16px] py-[26px] flex-1 overflow-y-auto",
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "relative",
+			children: [showPlaceholder && /* @__PURE__ */ jsxs(Box, {
+				className: "pointer-events-none absolute left-0 top-0 text-[16px] text-text3",
+				"aria-hidden": "true",
+				children: [t("editor.headlineHint"), "~"]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: elRef,
+				contentEditable: true,
+				suppressContentEditableWarning: true,
+				className: "min-h-[200px] w-full overflow-y-auto text-[16px] text-white outline-none",
+				onFocus: () => {
+					setFocused(true);
+					setIsEmpty(computeEmpty());
+				},
+				onBlur: () => {
+					setFocused(false);
+					setIsEmpty(computeEmpty());
+				},
+				onKeyDown: handleKeyDown,
+				onInput: handleInput,
+				onPaste: handlePaste
+			})]
+		})
+	});
+}
+function placeCaretToEnd(el) {
+	const selection = window.getSelection();
+	if (!selection) return;
+	const range = document.createRange();
+	range.selectNodeContents(el);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+/** 确保 mention 后存在可落位的空白节点。 */
+function ensureMentionTrailingSpace(container) {
+	const lastNode = container.lastChild;
+	if (!lastNode || lastNode.nodeType !== Node.ELEMENT_NODE) return;
+	if (!lastNode.classList.contains("mention")) return;
+	container.appendChild(document.createTextNode("\xA0"));
+}
+/** 在当前光标位置插入 HTML，并把光标移到插入内容之后。 */
+function insertHtmlAtCaret(container, html) {
+	const selection = window.getSelection();
+	if (!selection || !selection.rangeCount) return false;
+	const range = selection.getRangeAt(0);
+	if (!container.contains(range.startContainer)) return false;
+	range.deleteContents();
+	const tempDiv = document.createElement("div");
+	tempDiv.innerHTML = html;
+	const fragment = document.createDocumentFragment();
+	let lastNode = null;
+	while (tempDiv.firstChild) {
+		lastNode = tempDiv.firstChild;
+		fragment.appendChild(lastNode);
+	}
+	range.insertNode(fragment);
+	if (!lastNode) return true;
+	if (lastNode.nodeType === Node.ELEMENT_NODE && lastNode.classList.contains("mention")) {
+		const spaceNode = document.createTextNode("\xA0");
+		lastNode.parentNode?.insertBefore(spaceNode, lastNode.nextSibling);
+		range.setStartAfter(spaceNode);
+	} else range.setStartAfter(lastNode);
+	range.collapse(true);
+	selection.removeAllRanges();
+	selection.addRange(range);
+	return true;
+}
+
+//#endregion
+export { PublishEditor };

package/dist/components/pages/publish/components/header.mjs

@@ -1,2 +1,32 @@
 
-"use client";import{useRouter as e}from"../../../../utils/use-compatible-router.mjs";import{Button as t}from"../../../ui/button.mjs";import{Box as n}from"../../../ui/box.mjs";import r from"../../../../assets/icons/close.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{useTranslations as o}from"next-intl";function s({onPublish:s,isEmpty:c}){let l=o(`components.pages.publish.components`),u=e();return a(n,{className:`flex h-[60px] w-full items-center justify-between px-[16px]`,children:[i(t,{type:`button`,className:`p-3 text-text1 bg-transparent`,onClick:()=>u.back(),children:i(r,{className:`h-[16px] w-[16px]`})}),i(t,{className:`h-[32px] rounded-[8px] bg-linear-to-r from-[#FD4C5E] to-[#F05D19] px-[12px] text-[16px] text-white font-normal`,disabled:c,onClick:s,children:l(`header.publish`)})]})}export{s as PublishHeader};
+'use client';
+
+import { useRouter } from "../../../../utils/use-compatible-router.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Box } from "../../../ui/box.mjs";
+import SvgClose from "../../../../assets/icons/close.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/header.tsx
+function PublishHeader({ onPublish, isEmpty }) {
+	const t = useTranslations("components.pages.publish.components");
+	const router = useRouter();
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "flex h-[60px] w-full items-center justify-between px-[16px]",
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			className: "p-3 text-text1 bg-transparent",
+			onClick: () => router.back(),
+			children: /* @__PURE__ */ jsx(SvgClose, { className: "h-[16px] w-[16px]" })
+		}), /* @__PURE__ */ jsx(Button, {
+			className: "h-[32px] rounded-[8px] bg-linear-to-r from-[#FD4C5E] to-[#F05D19] px-[12px] text-[16px] text-white font-normal",
+			disabled: isEmpty,
+			onClick: onPublish,
+			children: t("header.publish")
+		})]
+	});
+}
+
+//#endregion
+export { PublishHeader };

package/dist/components/pages/publish/components/material-grid.mjs

@@ -1,2 +1,53 @@
 
-"use client";import{Box as e}from"../../../ui/box.mjs";import{Text as t}from"../../../ui/text.mjs";import n from"../../../ui/legacy/button.mjs";import{CoverItem as r}from"./cover-item.mjs";import{MaterialItem as i}from"./material-item.mjs";import{VideoItem as a}from"./video-item.mjs";import{memo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=o(({materialList:o,videoUrl:l,videoDuration:u,coverUrl:d,originCoverUrl:f,isKeyboardOpen:p,onMaterialDelete:m,onVideoDelete:h,onMaterialAdd:g,onCoverClick:_,onPreview:v})=>s(e,{className:`p-[10px] ${p?`pointer-events-none opacity-0`:`opacity-100`}`,children:c(e,{className:`grid grid-cols-3 gap-2`,children:[o.map((e,t)=>s(i,{item:e,index:t,onDelete:m,onPreview:v},`${e.is_video?`video`:`image`}-${t}`)),o.length>0&&o.length<9&&s(n,{type:`button`,className:`flex aspect-square items-center justify-center rounded-lg border border-dashed border-white/30 text-white/50`,onClick:g,children:s(t,{as:`span`,className:`text-[30px]`,children:`+`})}),l&&s(a,{coverUrl:f,videoDuration:u,materialList:o,onDelete:h,onPreview:v}),l&&s(r,{coverUrl:d,onClick:_})]})}));export{l as MaterialGrid};
+'use client';
+
+import { Box } from "../../../ui/box.mjs";
+import { Text } from "../../../ui/text.mjs";
+import Button from "../../../ui/legacy/button.mjs";
+import { CoverItem } from "./cover-item.mjs";
+import { MaterialItem } from "./material-item.mjs";
+import { VideoItem } from "./video-item.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/pages/publish/components/material-grid.tsx
+const MaterialGrid = memo(({ materialList, videoUrl, videoDuration, coverUrl, originCoverUrl, isKeyboardOpen, onMaterialDelete, onVideoDelete, onMaterialAdd, onCoverClick, onPreview }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		className: `p-[10px] ${isKeyboardOpen ? "pointer-events-none opacity-0" : "opacity-100"}`,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "grid grid-cols-3 gap-2",
+			children: [
+				materialList.map((item, index) => /* @__PURE__ */ jsx(MaterialItem, {
+					item,
+					index,
+					onDelete: onMaterialDelete,
+					onPreview
+				}, `${item.is_video ? "video" : "image"}-${index}`)),
+				materialList.length > 0 && materialList.length < 9 && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					className: "flex aspect-square items-center justify-center rounded-lg border border-dashed border-white/30 text-white/50",
+					onClick: onMaterialAdd,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: "text-[30px]",
+						children: "+"
+					})
+				}),
+				videoUrl && /* @__PURE__ */ jsx(VideoItem, {
+					coverUrl: originCoverUrl,
+					videoDuration,
+					materialList,
+					onDelete: onVideoDelete,
+					onPreview
+				}),
+				videoUrl && /* @__PURE__ */ jsx(CoverItem, {
+					coverUrl,
+					onClick: onCoverClick
+				})
+			]
+		})
+	});
+});
+
+//#endregion
+export { MaterialGrid };

package/dist/components/pages/publish/components/material-item.mjs

@@ -1,2 +1,69 @@
 
-"use client";import{formatVideoDuration as e}from"../../../../utils/common.mjs";import{Image as t}from"../../../ui/image.mjs";import{Box as n}from"../../../ui/box.mjs";import{Text as r}from"../../../ui/text.mjs";import i from"../../../ui/legacy/button.mjs";import a from"../../../../assets/icons/close.mjs";import{memo as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useTranslations as l}from"next-intl";function u({onDelete:e,index:t,ariaLabel:n}){return s(i,{type:`button`,className:`absolute right-[10px] top-[10px] z-10 !p-2 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors shadow-lg`,onClick:()=>e(t),"aria-label":n,children:s(a,{width:16,height:16})})}function d({duration:t}){return s(n,{className:`absolute bottom-2 right-2 rounded bg-black/70 px-2 py-1`,children:s(r,{className:`text-xs text-white`,children:e(t)})})}const f=o(({item:e,index:r,onDelete:i,onPreview:a})=>{let o=l(`components.pages.publish.components`),f=e.is_video;return c(n,{className:`relative aspect-square overflow-hidden rounded-[8px]`,children:[s(t,{src:f?e.cover_image||``:e.media_url,alt:o(f?`materialItem.videoCover`:`materialItem.uploadImage`),fill:!0,className:`rounded-[8px] object-cover`,onClick:()=>a(r)}),s(u,{onDelete:i,index:r,ariaLabel:o(`materialItem.deleteMaterial`)}),f&&e.video_duration&&s(d,{duration:e.video_duration})]})});export{f as MaterialItem};
+'use client';
+
+import { formatVideoDuration } from "../../../../utils/common.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Text } from "../../../ui/text.mjs";
+import Button from "../../../ui/legacy/button.mjs";
+import SvgClose from "../../../../assets/icons/close.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/pages/publish/components/material-item.tsx
+/**
+* 删除按钮组件
+*/
+function DeleteButton({ onDelete, index, ariaLabel }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		className: "absolute right-[10px] top-[10px] z-10 !p-2 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors shadow-lg",
+		onClick: () => onDelete(index),
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsx(SvgClose, {
+			width: 16,
+			height: 16
+		})
+	});
+}
+/**
+* 视频时长标签
+*/
+function DurationLabel({ duration }) {
+	return /* @__PURE__ */ jsx(Box, {
+		className: "absolute bottom-2 right-2 rounded bg-black/70 px-2 py-1",
+		children: /* @__PURE__ */ jsx(Text, {
+			className: "text-xs text-white",
+			children: formatVideoDuration(duration)
+		})
+	});
+}
+/**
+* 素材项组件（图片或视频）
+*/
+const MaterialItem = memo(({ item, index, onDelete, onPreview }) => {
+	const t = useTranslations("components.pages.publish.components");
+	const isVideo = item.is_video;
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "relative aspect-square overflow-hidden rounded-[8px]",
+		children: [
+			/* @__PURE__ */ jsx(Image, {
+				src: isVideo ? item.cover_image || "" : item.media_url,
+				alt: isVideo ? t("materialItem.videoCover") : t("materialItem.uploadImage"),
+				fill: true,
+				className: "rounded-[8px] object-cover",
+				onClick: () => onPreview(index)
+			}),
+			/* @__PURE__ */ jsx(DeleteButton, {
+				onDelete,
+				index,
+				ariaLabel: t("materialItem.deleteMaterial")
+			}),
+			isVideo && item.video_duration && /* @__PURE__ */ jsx(DurationLabel, { duration: item.video_duration })
+		]
+	});
+});
+
+//#endregion
+export { MaterialItem };

package/dist/components/pages/publish/components/toolbar.mjs

@@ -1,2 +1,40 @@
 
-"use client";import{Box as e}from"../../../ui/box.mjs";import t from"../../../ui/legacy/button.mjs";import n from"../../../../assets/icons/publish/publish_at.mjs";import r from"../../../../assets/icons/publish/publish_pic.mjs";import i from"../../../../assets/icons/publish/publish_video.mjs";import{memo as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=a(({isKeyboardOpen:a,onMaterialClick:c,onVideoClick:l,onAtUserClick:u})=>s(e,{className:`flex h-[62px] ${a?`pointer-events-none opacity-0`:`opacity-100`}`,children:[o(t,{type:`button`,className:`flex items-center justify-center w-1/3`,onClick:c,children:o(r,{className:`h-[26px] w-[26px]`})}),o(t,{type:`button`,className:`flex items-center justify-center w-1/3`,onClick:l,children:o(i,{className:`h-[26px] w-[26px]`})}),o(t,{type:`button`,className:`flex items-center justify-center w-1/3`,onClick:u,children:o(n,{className:`h-[26px] w-[26px]`})})]}));export{c as Toolbar};
+'use client';
+
+import { Box } from "../../../ui/box.mjs";
+import Button from "../../../ui/legacy/button.mjs";
+import SvgPublishAt from "../../../../assets/icons/publish/publish_at.mjs";
+import SvgPublishPic from "../../../../assets/icons/publish/publish_pic.mjs";
+import SvgPublishVideo from "../../../../assets/icons/publish/publish_video.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/pages/publish/components/toolbar.tsx
+const Toolbar = memo(({ isKeyboardOpen, onMaterialClick, onVideoClick, onAtUserClick }) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: `flex h-[62px] ${isKeyboardOpen ? "pointer-events-none opacity-0" : "opacity-100"}`,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				className: "flex items-center justify-center w-1/3",
+				onClick: onMaterialClick,
+				children: /* @__PURE__ */ jsx(SvgPublishPic, { className: "h-[26px] w-[26px]" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				className: "flex items-center justify-center w-1/3",
+				onClick: onVideoClick,
+				children: /* @__PURE__ */ jsx(SvgPublishVideo, { className: "h-[26px] w-[26px]" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				className: "flex items-center justify-center w-1/3",
+				onClick: onAtUserClick,
+				children: /* @__PURE__ */ jsx(SvgPublishAt, { className: "h-[26px] w-[26px]" })
+			})
+		]
+	});
+});
+
+//#endregion
+export { Toolbar };