@funhub/platform 0.1.130 → 0.1.132

package/dist/components/biz/business/comment/comment-input.mjs

@@ -1,773 +1,6 @@
 
-'use client';
-
-import { cn } from "../../../../utils/cn.mjs";
-import { getAtUserElement, stripHtmlTags } from "../../../../utils/common.mjs";
-import { useUserStore } from "../../../../store/modules/user-store.mjs";
-import { createInputAndSelectFile, getCoverImage, getImageResolutionFromFile } from "../../../../utils/media.mjs";
-import { uploadFile } from "../../../../utils/upload-file.mjs";
-import { Image } from "../../../ui/image.mjs";
-import { Dialog, DialogContent } from "../../../ui/dialog.mjs";
-import { useLoginModalStore } from "../../../../store/modules/login-modal-store.mjs";
-import SvgClose from "../../../../assets/icons/close.mjs";
-import SvgVideoPlay from "../../../../assets/icons/detail/video_play.mjs";
-import SvgCommetAt from "../../../../assets/icons/detail/commet_at.mjs";
-import SvgPublishPic from "../../../../assets/icons/detail/publish_pic.mjs";
-import SvgPublishVideo from "../../../../assets/icons/detail/publish_video.mjs";
-import { UploadProgress } from "../../../pages/publish/components/upload-progress.mjs";
-import { ContactList } from "../contact/contact-list.mjs";
-import { useKeyboardHandler } from "./use-keyboard-handler.mjs";
-import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "sonner";
-import { useTranslations } from "next-intl";
-
-//#region components/biz/business/comment/comment-input.tsx
-const MAX_IMAGE_COUNT = 9;
-/**
-* 从剪贴板事件中提取纯文本内容。
-* - 优先读取 `text/plain`
-* - 若为空则尝试从 `text/html` 解析出文本（忽略富文本样式）
-*/
-function getPlainTextFromClipboard(event) {
-	const clipboardData = event.clipboardData;
-	if (!clipboardData) return "";
-	const plain = clipboardData.getData("text/plain");
-	if (plain) return plain;
-	const html = clipboardData.getData("text/html");
-	if (!html) return "";
-	try {
-		return new DOMParser().parseFromString(html, "text/html").body.textContent || "";
-	} catch {
-		return "";
-	}
-}
-/**
-* 按最大字符数截断文本：换行不计入长度（与 stripHtmlTags 对 `<br>` 的行为保持一致）。
-*/
-function truncateTextIgnoringNewlines(text, maxLength) {
-	if (maxLength <= 0) return "";
-	let length = 0;
-	let result = "";
-	for (const char of text) {
-		if (char !== "\n") {
-			length++;
-			if (length > maxLength) break;
-		}
-		result += char;
-	}
-	return result;
-}
-/**
-* 将纯文本按当前光标位置插入到 contentEditable 中，并支持换行。
-*/
-function insertPlainTextAtSelection(editable, text) {
-	if (!text) return;
-	const selection = window.getSelection();
-	let range = null;
-	if (selection && selection.rangeCount > 0) range = selection.getRangeAt(0);
-	if (!range || !editable.contains(range.commonAncestorContainer)) {
-		editable.focus();
-		range = document.createRange();
-		range.selectNodeContents(editable);
-		range.collapse(false);
-	}
-	range.deleteContents();
-	const fragment = document.createDocumentFragment();
-	const lines = text.split("\n");
-	lines.forEach((line, index) => {
-		if (line) fragment.appendChild(document.createTextNode(line));
-		if (index < lines.length - 1) fragment.appendChild(document.createElement("br"));
-	});
-	const lastNode = fragment.lastChild;
-	range.insertNode(fragment);
-	if (selection && lastNode) {
-		const nextRange = document.createRange();
-		nextRange.setStartAfter(lastNode);
-		nextRange.collapse(true);
-		selection.removeAllRanges();
-		selection.addRange(nextRange);
-	}
-}
-/**
-* 内容输入框中不允许出现的媒体元素。
-* - 主要用于兜底处理：某些浏览器/设备在粘贴图片时不会触发 onPaste，导致图片直接插入 contentEditable。
-*/
-const DISALLOWED_MEDIA_SELECTOR = "img,video,audio,iframe,object,embed,svg,canvas";
-/**
-* 评论图片/视频预览条（按 web-monorepo `comment-input` 的样式迁移）。
-*/
-const CommentUploadGroup = memo(({ imageVideoInfoList, onDelete, variant = "dark" }) => {
-	if (imageVideoInfoList.length === 0) return null;
-	const isLight = variant === "light";
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("w-full overflow-hidden", isLight ? "px-4" : "h-[76px] px-[16px]"),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn(isLight ? "flex items-center gap-3 overflow-x-auto py-3" : "w-full h-[calc(100%+60px)] pb-[60px] overflow-x-auto flex items-center flex-nowrap"),
-			children: imageVideoInfoList.map((item, index) => {
-				const src = item.is_video ? item.cover_image || item.image_url : item.image_url || item.cover_image;
-				return /* @__PURE__ */ jsxs("div", {
-					className: cn("w-[60px] h-[60px] rounded-[8px] overflow-hidden shrink-0 flex items-center justify-center bg-bg2 relative", !isLight && index > 0 && "ml-[12px]"),
-					onClick: (event) => {
-						if (event.target.closest("[data-delete-button]")) event.stopPropagation();
-					},
-					children: [
-						src && /* @__PURE__ */ jsx(Image, {
-							src,
-							alt: "media",
-							fill: true,
-							objectFit: "cover"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "cursor-pointer absolute top-0 right-0 p-[4px] z-[1]",
-							"data-delete-button": "true",
-							onClick: () => onDelete(index),
-							children: /* @__PURE__ */ jsx(SvgClose, { className: "w-[12px] h-[12px] text-[#fff] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" })
-						}),
-						item.is_video && /* @__PURE__ */ jsx("div", {
-							className: "absolute w-[24px] h-[24px] rounded-[12px] bg-[rgba(0,0,0,0.5)] top-0 right-0 bottom-0 left-0 m-auto flex items-center justify-center",
-							children: /* @__PURE__ */ jsx(SvgVideoPlay, { className: "w-[12px] h-[12px] text-[#fff]" })
-						})
-					]
-				}, `${item.is_video ? "video" : "image"}-${index}`);
-			})
-		})
-	});
-});
-CommentUploadGroup.displayName = "CommentUploadGroup";
-/**
-* 评论输入框底部工具栏按钮（图片/视频/@）。
-*/
-function CommentToolbarButton({ disabled, onClick, children, variant = "dark" }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: cn("flex h-12 flex-1 items-center justify-center", variant === "light" ? "text-text2 hover:bg-bg2/60" : "text-white hover:bg-white/10", disabled && "opacity-40"),
-		disabled,
-		onClick,
-		children
-	});
-}
-/**
-* 评论输入框（参考 web-monorepo `src/components/comment-input/index.tsx`）。
-* 仅负责输入/上传/@插入与发布回调，实际发布逻辑由外层 CommentList 处理。
-*/
-function CommentInput({ ref, value = "", onChange, onPublish, onInputBlur, placeholder = "", className = "", maxLength = 200, publishText = "", autoFocus, disabled, onRequireLogin, variant = "dark" }) {
-	const t = useTranslations("components.biz.business.comment");
-	const isLight = variant === "light";
-	const resolvedPublishText = publishText || t("commentInput.publishDefault");
-	const resolvedPlaceholder = useMemo(() => {
-		const text = placeholder || t("commentInput.placeholder");
-		return text.length > 15 ? `${text.slice(0, 15)}...` : text;
-	}, [placeholder, t]);
-	const [inputValue, setInputValue] = useState(value);
-	const [showToolbar, setShowToolbar] = useState(false);
-	const [enableKeyboardDetection, setEnableKeyboardDetection] = useState(false);
-	const containerRef = useRef(null);
-	const textareaRef = useRef(null);
-	const focusingRef = useRef(false);
-	const lastFocusTimeRef = useRef(0);
-	const lastDisallowedToastTimeRef = useRef(0);
-	const [imageVideoInfoList, setImageVideoInfoList] = useState([]);
-	const [visibleContact, setVisibleContact] = useState(false);
-	const [uploadProgress, setUploadProgress] = useState(null);
-	const [isPublishing, setIsPublishing] = useState(false);
-	const isInputDisabled = disabled || isPublishing;
-	const { isLogin } = useUserStore();
-	const { open } = useLoginModalStore();
-	const { containerStyle, onFocus: keyboardOnFocus, onBlur: keyboardOnBlur, inputRef } = useKeyboardHandler(enableKeyboardDetection);
-	/**
-	* 未登录时触发登录流程。
-	*/
-	const handleRequireLogin = useCallback(() => {
-		if (onRequireLogin) onRequireLogin();
-		else open();
-	}, [onRequireLogin, open]);
-	useEffect(() => {
-		if (textareaRef.current && value) textareaRef.current.innerHTML = value;
-	}, [value]);
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		window.dispatchEvent(new CustomEvent("funhub:visible-contact-change", { detail: { visible: visibleContact } }));
-	}, [visibleContact]);
-	useEffect(() => {
-		if (!autoFocus || !textareaRef.current) return;
-		if (!isLogin) {
-			handleRequireLogin();
-			return;
-		}
-		textareaRef.current.focus();
-		setShowToolbar(true);
-	}, [
-		autoFocus,
-		handleRequireLogin,
-		isLogin
-	]);
-	useEffect(() => {
-		const handleDocumentClick = (event) => {
-			const target = event.target;
-			const isDeleteButton = target.closest("[data-delete-button]");
-			const isInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
-			if (isDeleteButton || isInput) return;
-			if (!containerRef.current?.contains(target)) {
-				if (Date.now() - lastFocusTimeRef.current > 100) setShowToolbar(false);
-			}
-		};
-		document.addEventListener("click", handleDocumentClick);
-		return () => document.removeEventListener("click", handleDocumentClick);
-	}, []);
-	useImperativeHandle(ref, () => ({ focus: () => {
-		const element = textareaRef.current;
-		if (!element || focusingRef.current) return;
-		focusingRef.current = true;
-		try {
-			if (!isLogin) {
-				handleRequireLogin();
-				return;
-			}
-			if (document.activeElement === element && showToolbar) return;
-			element.focus();
-			lastFocusTimeRef.current = Date.now();
-			setShowToolbar(true);
-			if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
-			keyboardOnFocus();
-		} catch (error) {
-			console.warn("CommentInput focus error", error);
-			setShowToolbar(true);
-		} finally {
-			focusingRef.current = false;
-		}
-	} }), [
-		enableKeyboardDetection,
-		handleRequireLogin,
-		isLogin,
-		keyboardOnFocus,
-		showToolbar
-	]);
-	const resetLastTime = () => {
-		lastFocusTimeRef.current = Date.now();
-	};
-	const moveCursorToEnd = useCallback(() => {
-		if (!textareaRef.current) return;
-		const range = document.createRange();
-		const selection = window.getSelection();
-		range.selectNodeContents(textareaRef.current);
-		range.collapse(false);
-		selection?.removeAllRanges();
-		selection?.addRange(range);
-	}, []);
-	const setEditDivContent = useCallback((text) => {
-		if (textareaRef.current) textareaRef.current.innerHTML = text;
-	}, []);
-	/**
-	* 兜底拦截：如果输入框内被插入了媒体元素（如粘贴图片），立即移除并提示。
-	*/
-	const stripDisallowedMediaElements = useCallback((editable) => {
-		const mediaElements = editable.querySelectorAll(DISALLOWED_MEDIA_SELECTOR);
-		if (mediaElements.length === 0) return false;
-		mediaElements.forEach((node) => node.remove());
-		const now = Date.now();
-		if (now - lastDisallowedToastTimeRef.current > 1500) {
-			lastDisallowedToastTimeRef.current = now;
-			toast.info(t("commentInput.pasteFileNotSupported"));
-		}
-		return true;
-	}, [t]);
-	/**
-	* 粘贴时仅允许纯文本：过滤/转换剪贴板富文本内容，避免将样式 HTML 注入到输入框。
-	*/
-	const handlePaste = useCallback((event) => {
-		const editable = textareaRef.current;
-		if (!editable) return;
-		if (isInputDisabled) {
-			event.preventDefault();
-			return;
-		}
-		if (!isLogin) {
-			event.preventDefault();
-			handleRequireLogin();
-			editable.blur();
-			return;
-		}
-		const clipboardData = event.clipboardData;
-		if (!!clipboardData && Array.from(clipboardData.items || []).some((item) => item.kind === "file")) {
-			event.preventDefault();
-			event.stopPropagation();
-			toast.info(t("commentInput.pasteFileNotSupported"));
-			return;
-		}
-		const rawText = getPlainTextFromClipboard(event);
-		if (!rawText) {
-			event.preventDefault();
-			return;
-		}
-		event.preventDefault();
-		event.stopPropagation();
-		const normalizedText = rawText.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-		const currentLength = stripHtmlTags(editable.innerHTML || "").length;
-		const remaining = maxLength ? Math.max(0, maxLength - currentLength) : Infinity;
-		if (remaining <= 0) return;
-		insertPlainTextAtSelection(editable, Number.isFinite(remaining) ? truncateTextIgnoringNewlines(normalizedText, remaining) : normalizedText);
-		stripDisallowedMediaElements(editable);
-		const nextHtml = editable.innerHTML || "";
-		setInputValue(nextHtml);
-		onChange?.(nextHtml);
-	}, [
-		handleRequireLogin,
-		isInputDisabled,
-		isLogin,
-		maxLength,
-		onChange,
-		stripDisallowedMediaElements,
-		t
-	]);
-	const handleInputChange = useCallback((event) => {
-		let html = event.currentTarget.innerHTML || "";
-		if (stripDisallowedMediaElements(event.currentTarget)) html = event.currentTarget.innerHTML || "";
-		const realValue = stripHtmlTags(html);
-		if (maxLength && realValue.length > maxLength) {
-			html = html.substring(0, maxLength);
-			setEditDivContent(html);
-			moveCursorToEnd();
-		}
-		setInputValue(html);
-		onChange?.(html);
-	}, [
-		maxLength,
-		moveCursorToEnd,
-		onChange,
-		setEditDivContent,
-		stripDisallowedMediaElements
-	]);
-	/**
-	* 禁止拖拽/放入文件到 contentEditable，避免出现直接插入图片的情况。
-	*/
-	const handleDrop = useCallback((event) => {
-		event.preventDefault();
-		event.stopPropagation();
-		const files = event.dataTransfer?.files;
-		if (files && files.length > 0) toast.info(t("commentInput.dragFileNotSupported"));
-	}, [t]);
-	const handleDragOver = useCallback((event) => {
-		event.preventDefault();
-	}, []);
-	const handleFocus = () => {
-		if (isInputDisabled) return;
-		if (!isLogin) {
-			handleRequireLogin();
-			textareaRef.current?.blur();
-			return;
-		}
-		lastFocusTimeRef.current = Date.now();
-		setShowToolbar(true);
-		if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
-		keyboardOnFocus();
-	};
-	/**
-	* 已聚焦但 toolbar 被关闭时，点击输入区域强制拉起 toolbar。
-	*/
-	const handleInputClick = () => {
-		if (isInputDisabled) {
-			if (isPublishing) toast.info(t("commentInput.publishing"));
-			return;
-		}
-		if (!isLogin) {
-			handleRequireLogin();
-			textareaRef.current?.blur();
-			return;
-		}
-		lastFocusTimeRef.current = Date.now();
-		if (!showToolbar) setShowToolbar(true);
-		if (!enableKeyboardDetection) setEnableKeyboardDetection(true);
-		keyboardOnFocus();
-	};
-	const handleBlur = () => {
-		setTimeout(() => {
-			if (Date.now() - lastFocusTimeRef.current > 200 && document.activeElement !== textareaRef.current) {
-				setShowToolbar(false);
-				onInputBlur?.();
-			}
-		}, 150);
-		keyboardOnBlur();
-	};
-	const clearAllState = useCallback(() => {
-		setInputValue("");
-		setEditDivContent("");
-		setImageVideoInfoList([]);
-		setShowToolbar(false);
-	}, [setEditDivContent]);
-	const isInputEmpty = useMemo(() => stripHtmlTags(inputValue).trim().length === 0, [inputValue]);
-	const isPublishEnabled = useMemo(() => {
-		return !isInputEmpty || imageVideoInfoList.length > 0;
-	}, [imageVideoInfoList.length, isInputEmpty]);
-	const handleImageFileChange = useCallback(async () => {
-		if (!isLogin) {
-			handleRequireLogin();
-			return;
-		}
-		if (imageVideoInfoList.some((item) => item.is_video)) return;
-		const files = await createInputAndSelectFile("file", "image/*");
-		if (!files || files.length === 0) return;
-		const availableSlots = MAX_IMAGE_COUNT - imageVideoInfoList.length;
-		const sliceFiles = Array.from(files).slice(0, availableSlots);
-		if (sliceFiles.length === 0) return;
-		const successList = [];
-		let failed = 0;
-		const total = sliceFiles.length;
-		try {
-			for (let i = 0; i < sliceFiles.length; i++) {
-				const file = sliceFiles[i];
-				setUploadProgress({
-					currentFiles: successList.length,
-					totalFiles: total,
-					currentTasks: successList.length + failed,
-					totalTasks: total
-				});
-				try {
-					const { width, height } = await getImageResolutionFromFile(file);
-					const result = await uploadFile(file, 1, true);
-					successList.push({
-						cover_image: "",
-						cover_image_thumbnail: "",
-						cover_image_radio: 1,
-						cover_image_resolution: "",
-						image_url: result.objectKey,
-						image_thumbnail: result.objectKey,
-						image_radio: Number((width / height).toFixed(2)),
-						image_resolution: `${width}x${height}`,
-						is_video: false,
-						resolution: `${width}x${height}`,
-						video_duration: 0,
-						video_url: "",
-						video_size: 0,
-						video_codec_info: {
-							hls_info: [],
-							video_codec_deal: false
-						}
-					});
-				} catch (error) {
-					console.error("上传图片失败", error);
-					failed += 1;
-				}
-			}
-			if (successList.length === 0) toast.error(t("commentInput.imageUploadFailed"));
-			else {
-				if (failed > 0) toast.warning(t("commentInput.partialImageUploadFailed"));
-				setImageVideoInfoList((prev) => [...prev, ...successList]);
-			}
-		} finally {
-			setUploadProgress(null);
-		}
-	}, [
-		handleRequireLogin,
-		imageVideoInfoList,
-		isLogin,
-		t
-	]);
-	const handleVideoFileChange = useCallback(async () => {
-		if (!isLogin) {
-			handleRequireLogin();
-			return;
-		}
-		if (imageVideoInfoList.length > 0) {
-			toast.error(t("commentInput.cannotSelectVideoWhenImageSelected"));
-			return;
-		}
-		const files = await createInputAndSelectFile("file", "video/*");
-		if (!files || files.length === 0) return;
-		const file = files[0];
-		try {
-			setUploadProgress({
-				currentFiles: 0,
-				totalFiles: 1,
-				currentTasks: 0,
-				totalTasks: 2
-			});
-			const videoResult = await uploadFile(file, 2, false);
-			const [coverFile, width, height, duration] = await getCoverImage(file);
-			setUploadProgress({
-				currentFiles: 0,
-				totalFiles: 1,
-				currentTasks: 1,
-				totalTasks: 2
-			});
-			const coverUploadResult = await uploadFile(coverFile, 1, true);
-			setImageVideoInfoList([{
-				cover_image: coverUploadResult.objectKey,
-				cover_image_thumbnail: coverUploadResult.objectKey,
-				cover_image_radio: Number((width / height).toFixed(2)),
-				cover_image_resolution: `${width}x${height}`,
-				image_url: coverUploadResult.objectKey,
-				image_thumbnail: coverUploadResult.objectKey,
-				image_radio: Number((width / height).toFixed(2)),
-				image_resolution: `${width}x${height}`,
-				is_video: true,
-				resolution: `${width}x${height}`,
-				video_duration: duration,
-				video_url: videoResult.objectKey,
-				video_size: file.size,
-				video_codec_info: {
-					hls_info: [],
-					video_codec_deal: false
-				}
-			}]);
-		} catch (error) {
-			console.error("视频上传失败", error);
-			toast.error(t("commentInput.videoUploadFailed"));
-		} finally {
-			setUploadProgress(null);
-		}
-	}, [
-		handleRequireLogin,
-		imageVideoInfoList.length,
-		isLogin,
-		t
-	]);
-	const handlePublish = useCallback(async (event) => {
-		event.preventDefault();
-		event.stopPropagation();
-		if (!isPublishEnabled || disabled || isPublishing) return;
-		if (!isLogin) {
-			if (onRequireLogin) onRequireLogin();
-			else open();
-			return;
-		}
-		try {
-			setIsPublishing(true);
-			const result = await onPublish?.({
-				text: inputValue === "<br>" ? "" : inputValue,
-				imageVideoInfoList
-			});
-			if (result && result.success === false) {
-				if (!result.toastHandled) toast.error(result.message || "发布评论失败");
-				return;
-			}
-			toast.success(t("commentInput.publishSuccess"));
-			clearAllState();
-			onChange?.("");
-		} catch (error) {
-			console.error("发布评论失败:", error);
-			toast.error(t("commentInput.publishCommentFailed"));
-		} finally {
-			setIsPublishing(false);
-		}
-	}, [
-		clearAllState,
-		disabled,
-		imageVideoInfoList,
-		inputValue,
-		isLogin,
-		isPublishEnabled,
-		isPublishing,
-		onChange,
-		onPublish,
-		onRequireLogin,
-		open,
-		t
-	]);
-	const canSelectImage = useMemo(() => {
-		return !imageVideoInfoList.some((item) => item.is_video) && imageVideoInfoList.length < MAX_IMAGE_COUNT;
-	}, [imageVideoInfoList]);
-	const canSelectVideo = useMemo(() => imageVideoInfoList.length === 0, [imageVideoInfoList.length]);
-	const handleSelectContact = useCallback((contact) => {
-		setVisibleContact(false);
-		const nextValue = `${stripHtmlTags(inputValue).trim().length === 0 ? "" : inputValue}${getAtUserElement(contact)} `;
-		setInputValue(nextValue);
-		setEditDivContent(nextValue);
-		setTimeout(() => {
-			moveCursorToEnd();
-		}, 16);
-	}, [
-		inputValue,
-		moveCursorToEnd,
-		setEditDivContent
-	]);
-	/**
-	* 联系人弹窗开关回调。
-	*/
-	function handleContactDialogChange(next) {
-		setVisibleContact(next);
-	}
-	/**
-	* 关闭联系人弹窗。
-	*/
-	function handleCloseContact() {
-		setVisibleContact(false);
-	}
-	const publishButton = /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: cn("shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium", isPublishEnabled && !isPublishing ? "bg-theme5 text-white" : "bg-bg2 text-text3"),
-		onClick: handlePublish,
-		disabled: !isPublishEnabled || isInputDisabled,
-		children: isPublishing ? t("commentInput.publishing") : resolvedPublishText
-	});
-	const darkPublishButton = /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: cn("ml-[14px] shrink-0 whitespace-nowrap px-[14px] py-[10px] text-[16px] leading-[16px]", isPublishEnabled && !isPublishing ? "text-theme5" : "text-text3"),
-		onClick: handlePublish,
-		disabled: !isPublishEnabled || isInputDisabled,
-		children: isPublishing ? t("commentInput.publishing") : resolvedPublishText
-	});
-	const publishingHint = isPublishing ? /* @__PURE__ */ jsx("span", {
-		className: cn("ml-[14px] text-[16px] leading-[16px] text-text3"),
-		children: t("commentInput.publishing")
-	}) : null;
-	const finalStyle = isLight ? containerStyle : {
-		...containerStyle,
-		boxShadow: showToolbar ? "0px -4px 10px 0px rgba(0,0,0,0.1)" : "none"
-	};
-	const containerClasses = isLight ? "comment-input-container g-safe-area rounded-2xl border border-line1/20 bg-white text-text1 shadow-sm" : "comment-input-container bg-bg1 g-safe-area text-text1";
-	const toolbarSection = showToolbar ? isLight ? /* @__PURE__ */ jsxs("div", {
-		className: "flex border-t border-line1/20",
-		children: [
-			/* @__PURE__ */ jsx(CommentToolbarButton, {
-				disabled: !canSelectImage,
-				onClick: () => {
-					if (isInputDisabled) return;
-					if (!canSelectImage) return;
-					setTimeout(() => {
-						handleImageFileChange();
-					}, 400);
-				},
-				variant: "light",
-				children: t("commentInput.image")
-			}),
-			/* @__PURE__ */ jsx(CommentToolbarButton, {
-				disabled: !canSelectVideo,
-				onClick: () => {
-					if (isInputDisabled) return;
-					if (!canSelectVideo) return;
-					setTimeout(() => {
-						handleVideoFileChange();
-					}, 400);
-				},
-				variant: "light",
-				children: t("commentInput.video")
-			}),
-			/* @__PURE__ */ jsx(CommentToolbarButton, {
-				disabled: isInputDisabled,
-				onClick: () => {
-					if (isInputDisabled) return;
-					setVisibleContact(true);
-				},
-				variant: "light",
-				children: "@"
-			})
-		]
-	}) : /* @__PURE__ */ jsxs("div", {
-		className: "flex h-[50px] items-center justify-around border-t border-line1 px-[8px]",
-		children: [
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("flex h-full items-center justify-center px-[12px]", (!canSelectImage || isInputDisabled) && "opacity-50"),
-				onClick: () => {
-					if (isInputDisabled) return;
-					if (!canSelectImage) return;
-					setTimeout(() => {
-						handleImageFileChange();
-					}, 400);
-				},
-				children: /* @__PURE__ */ jsx(SvgPublishPic, { className: "h-[22px] w-[22px]" })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("flex h-full items-center justify-center px-[12px]", (!canSelectVideo || isInputDisabled) && "opacity-50"),
-				onClick: () => {
-					if (isInputDisabled) return;
-					if (!canSelectVideo) return;
-					setTimeout(() => {
-						handleVideoFileChange();
-					}, 400);
-				},
-				children: /* @__PURE__ */ jsx(SvgPublishVideo, { className: "h-[22px] w-[22px]" })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("flex h-full items-center justify-center px-[12px]", isInputDisabled && "opacity-50"),
-				onClick: () => {
-					if (isInputDisabled) return;
-					setVisibleContact(true);
-				},
-				children: /* @__PURE__ */ jsx(SvgCommetAt, { className: "h-[22px] w-[22px]" })
-			})
-		]
-	}) : null;
-	const innerContainerClass = isLight ? "" : "mx-auto w-full max-w-[840px]";
-	return /* @__PURE__ */ jsxs("div", {
-		style: finalStyle,
-		className: cn(containerClasses, className),
-		onMouseDown: resetLastTime,
-		onTouchStart: resetLastTime,
-		onClick: resetLastTime,
-		ref: containerRef,
-		children: [
-			uploadProgress && /* @__PURE__ */ jsx(UploadProgress, {
-				currentFiles: uploadProgress.currentFiles,
-				totalFiles: uploadProgress.totalFiles,
-				currentTasks: uploadProgress.currentTasks,
-				totalTasks: uploadProgress.totalTasks
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: innerContainerClass,
-				children: [
-					showToolbar && /* @__PURE__ */ jsx(CommentUploadGroup, {
-						imageVideoInfoList,
-						onDelete: (index) => setImageVideoInfoList((prev) => prev.filter((_, i) => i !== index)),
-						variant
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: cn("px-4 py-3", isLight ? "flex items-center gap-3" : "flex items-center justify-between"),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: cn("relative min-w-0 flex-1 rounded-[20px] bg-bg2", isLight ? "rounded-2xl" : ""),
-							children: [
-								!isLogin && /* @__PURE__ */ jsx("div", {
-									className: "absolute inset-0 z-[1] cursor-text",
-									onClick: handleRequireLogin
-								}),
-								isInputEmpty && /* @__PURE__ */ jsx("span", {
-									className: cn("pointer-events-none absolute left-3 top-[10px] text-sm text-text3"),
-									children: resolvedPlaceholder
-								}),
-								/* @__PURE__ */ jsx("div", {
-									ref: (node) => {
-										textareaRef.current = node;
-										inputRef(node);
-									},
-									contentEditable: !isInputDisabled,
-									suppressContentEditableWarning: true,
-									className: cn("max-h-24 min-h-[40px] w-full cursor-text overflow-y-auto px-3 py-[10px] text-sm leading-5 outline-none break-all whitespace-pre-wrap text-text1", isInputDisabled && "cursor-not-allowed opacity-60"),
-									"data-placeholder": resolvedPlaceholder,
-									onInput: handleInputChange,
-									onFocus: handleFocus,
-									onClick: handleInputClick,
-									onBlur: handleBlur,
-									onPaste: handlePaste,
-									onDrop: handleDrop,
-									onDragOver: handleDragOver
-								})
-							]
-						}), showToolbar ? isLight ? publishButton : darkPublishButton : publishingHint]
-					}),
-					toolbarSection
-				]
-			}),
-			/* @__PURE__ */ jsx(Dialog, {
-				open: visibleContact,
-				onOpenChange: handleContactDialogChange,
-				children: /* @__PURE__ */ jsx(DialogContent, {
-					showCloseButton: false,
-					initialFocus: false,
-					className: "fixed left-0 right-0 bottom-0 top-[84px] z-[1000] w-full max-w-none translate-x-0 translate-y-0 rounded-none bg-bg2 p-0",
-					children: /* @__PURE__ */ jsx(ContactList, {
-						onSelect: handleSelectContact,
-						onClose: handleCloseContact
-					})
-				})
-			})
-		]
-	});
-}
-CommentInput.displayName = "CommentInput";
-
-//#endregion
-export { CommentInput as default };
+"use client";import{cn as e}from"../../../../utils/cn.mjs";import{getAtUserElement as t,stripHtmlTags as n}from"../../../../utils/common.mjs";import{useUserStore as r}from"../../../../store/modules/user-store.mjs";import{createInputAndSelectFile as i,getCoverImage as a,getImageResolutionFromFile as o}from"../../../../utils/media.mjs";import{uploadFile as s}from"../../../../utils/upload-file.mjs";import{Image as c}from"../../../ui/image.mjs";import{Dialog as ee,DialogContent as te}from"../../../ui/dialog.mjs";import{useLoginModalStore as ne}from"../../../../store/modules/login-modal-store.mjs";import l from"../../../../assets/icons/close.mjs";import u from"../../../../assets/icons/detail/video_play.mjs";import re from"../../../../assets/icons/detail/commet_at.mjs";import ie from"../../../../assets/icons/detail/publish_pic.mjs";import ae from"../../../../assets/icons/detail/publish_video.mjs";import{UploadProgress as oe}from"../../../pages/publish/components/upload-progress.mjs";import{ContactList as se}from"../contact/contact-list.mjs";import{useKeyboardHandler as ce}from"./use-keyboard-handler.mjs";import{memo as d,useCallback as f,useEffect as p,useImperativeHandle as le,useMemo as m,useRef as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{toast as y}from"sonner";import{useTranslations as ue}from"next-intl";function de(e){let t=e.clipboardData;if(!t)return``;let n=t.getData(`text/plain`);if(n)return n;let r=t.getData(`text/html`);if(!r)return``;try{return new DOMParser().parseFromString(r,`text/html`).body.textContent||``}catch{return``}}function fe(e,t){if(t<=0)return``;let n=0,r=``;for(let i of e){if(i!==`
+`&&(n++,n>t))break;r+=i}return r}function pe(e,t){if(!t)return;let n=window.getSelection(),r=null;n&&n.rangeCount>0&&(r=n.getRangeAt(0)),(!r||!e.contains(r.commonAncestorContainer))&&(e.focus(),r=document.createRange(),r.selectNodeContents(e),r.collapse(!1)),r.deleteContents();let i=document.createDocumentFragment(),a=t.split(`
+`);a.forEach((e,t)=>{e&&i.appendChild(document.createTextNode(e)),t<a.length-1&&i.appendChild(document.createElement(`br`))});let o=i.lastChild;if(r.insertNode(i),n&&o){let e=document.createRange();e.setStartAfter(o),e.collapse(!0),n.removeAllRanges(),n.addRange(e)}}const me=d(({imageVideoInfoList:t,onDelete:n,variant:r=`dark`})=>{if(t.length===0)return null;let i=r===`light`;return _(`div`,{className:e(`w-full overflow-hidden`,i?`px-4`:`h-[76px] px-[16px]`),children:_(`div`,{className:e(i?`flex items-center gap-3 overflow-x-auto py-3`:`w-full h-[calc(100%+60px)] pb-[60px] overflow-x-auto flex items-center flex-nowrap`),children:t.map((t,r)=>{let a=t.is_video?t.cover_image||t.image_url:t.image_url||t.cover_image;return v(`div`,{className:e(`w-[60px] h-[60px] rounded-[8px] overflow-hidden shrink-0 flex items-center justify-center bg-bg2 relative`,!i&&r>0&&`ml-[12px]`),onClick:e=>{e.target.closest(`[data-delete-button]`)&&e.stopPropagation()},children:[a&&_(c,{src:a,alt:`media`,fill:!0,objectFit:`cover`}),_(`button`,{type:`button`,className:`cursor-pointer absolute top-0 right-0 p-[4px] z-[1]`,"data-delete-button":`true`,onClick:()=>n(r),children:_(l,{className:`w-[12px] h-[12px] text-[#fff] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]`})}),t.is_video&&_(`div`,{className:`absolute w-[24px] h-[24px] rounded-[12px] bg-[rgba(0,0,0,0.5)] top-0 right-0 bottom-0 left-0 m-auto flex items-center justify-center`,children:_(u,{className:`w-[12px] h-[12px] text-[#fff]`})})]},`${t.is_video?`video`:`image`}-${r}`)})})})});me.displayName=`CommentUploadGroup`;function b({disabled:t,onClick:n,children:r,variant:i=`dark`}){return _(`button`,{type:`button`,className:e(`flex h-12 flex-1 items-center justify-center`,i===`light`?`text-text2 hover:bg-bg2/60`:`text-white hover:bg-white/10`,t&&`opacity-40`),disabled:t,onClick:n,children:r})}function x({ref:c,value:l=``,onChange:u,onPublish:d,onInputBlur:x,placeholder:he=``,className:ge=``,maxLength:S=200,publishText:_e=``,autoFocus:ve,disabled:C,onRequireLogin:w,variant:ye=`dark`}){let T=ue(`components.biz.business.comment`),E=ye===`light`,be=_e||T(`commentInput.publishDefault`),xe=m(()=>{let e=he||T(`commentInput.placeholder`);return e.length>15?`${e.slice(0,15)}...`:e},[he,T]),[D,O]=g(l),[k,A]=g(!1),[j,M]=g(!1),Se=h(null),N=h(null),P=h(!1),F=h(0),Ce=h(0),[I,L]=g([]),[R,z]=g(!1),[B,V]=g(null),[H,we]=g(!1),U=C||H,{isLogin:W}=r(),{open:G}=ne(),{containerStyle:Te,onFocus:K,onBlur:Ee,inputRef:De}=ce(j),q=f(()=>{w?w():G()},[w,G]);p(()=>{N.current&&l&&(N.current.innerHTML=l)},[l]),p(()=>{typeof window>`u`||window.dispatchEvent(new CustomEvent(`funhub:visible-contact-change`,{detail:{visible:R}}))},[R]),p(()=>{if(!(!ve||!N.current)){if(!W){q();return}N.current.focus(),A(!0)}},[ve,q,W]),p(()=>{let e=e=>{let t=e.target,n=t.closest(`[data-delete-button]`),r=t.tagName===`INPUT`||t.tagName===`TEXTAREA`;n||r||Se.current?.contains(t)||Date.now()-F.current>100&&A(!1)};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)},[]),le(c,()=>({focus:()=>{let e=N.current;if(!(!e||P.current)){P.current=!0;try{if(!W){q();return}if(document.activeElement===e&&k)return;e.focus(),F.current=Date.now(),A(!0),j||M(!0),K()}catch(e){console.warn(`CommentInput focus error`,e),A(!0)}finally{P.current=!1}}}}),[j,q,W,K,k]);let Oe=()=>{F.current=Date.now()},J=f(()=>{if(!N.current)return;let e=document.createRange(),t=window.getSelection();e.selectNodeContents(N.current),e.collapse(!1),t?.removeAllRanges(),t?.addRange(e)},[]),Y=f(e=>{N.current&&(N.current.innerHTML=e)},[]),X=f(e=>{let t=e.querySelectorAll(`img,video,audio,iframe,object,embed,svg,canvas`);if(t.length===0)return!1;t.forEach(e=>e.remove());let n=Date.now();return n-Ce.current>1500&&(Ce.current=n,y.info(T(`commentInput.pasteFileNotSupported`))),!0},[T]),ke=f(e=>{let t=N.current;if(!t)return;if(U){e.preventDefault();return}if(!W){e.preventDefault(),q(),t.blur();return}let r=e.clipboardData;if(r&&Array.from(r.items||[]).some(e=>e.kind===`file`)){e.preventDefault(),e.stopPropagation(),y.info(T(`commentInput.pasteFileNotSupported`));return}let i=de(e);if(!i){e.preventDefault();return}e.preventDefault(),e.stopPropagation();let a=i.replace(/\r\n/g,`
+`).replace(/\r/g,`
+`),o=n(t.innerHTML||``).length,s=S?Math.max(0,S-o):1/0;if(s<=0)return;pe(t,Number.isFinite(s)?fe(a,s):a),X(t);let c=t.innerHTML||``;O(c),u?.(c)},[q,U,W,S,u,X,T]),Ae=f(e=>{let t=e.currentTarget.innerHTML||``;X(e.currentTarget)&&(t=e.currentTarget.innerHTML||``);let r=n(t);S&&r.length>S&&(t=t.substring(0,S),Y(t),J()),O(t),u?.(t)},[S,J,u,Y,X]),je=f(e=>{e.preventDefault(),e.stopPropagation();let t=e.dataTransfer?.files;t&&t.length>0&&y.info(T(`commentInput.dragFileNotSupported`))},[T]),Me=f(e=>{e.preventDefault()},[]),Ne=()=>{if(!U){if(!W){q(),N.current?.blur();return}F.current=Date.now(),A(!0),j||M(!0),K()}},Pe=()=>{if(U){H&&y.info(T(`commentInput.publishing`));return}if(!W){q(),N.current?.blur();return}F.current=Date.now(),k||A(!0),j||M(!0),K()},Fe=()=>{setTimeout(()=>{Date.now()-F.current>200&&document.activeElement!==N.current&&(A(!1),x?.())},150),Ee()},Ie=f(()=>{O(``),Y(``),L([]),A(!1)},[Y]),Le=m(()=>n(D).trim().length===0,[D]),Z=m(()=>!Le||I.length>0,[I.length,Le]),Re=f(async()=>{if(!W){q();return}if(I.some(e=>e.is_video))return;let e=await i(`file`,`image/*`);if(!e||e.length===0)return;let t=9-I.length,n=Array.from(e).slice(0,t);if(n.length===0)return;let r=[],a=0,c=n.length;try{for(let e=0;e<n.length;e++){let t=n[e];V({currentFiles:r.length,totalFiles:c,currentTasks:r.length+a,totalTasks:c});try{let{width:e,height:n}=await o(t),i=await s(t,1,!0);r.push({cover_image:``,cover_image_thumbnail:``,cover_image_radio:1,cover_image_resolution:``,image_url:i.objectKey,image_thumbnail:i.objectKey,image_radio:Number((e/n).toFixed(2)),image_resolution:`${e}x${n}`,is_video:!1,resolution:`${e}x${n}`,video_duration:0,video_url:``,video_size:0,video_codec_info:{hls_info:[],video_codec_deal:!1}})}catch(e){console.error(`上传图片失败`,e),a+=1}}r.length===0?y.error(T(`commentInput.imageUploadFailed`)):(a>0&&y.warning(T(`commentInput.partialImageUploadFailed`)),L(e=>[...e,...r]))}finally{V(null)}},[q,I,W,T]),ze=f(async()=>{if(!W){q();return}if(I.length>0){y.error(T(`commentInput.cannotSelectVideoWhenImageSelected`));return}let e=await i(`file`,`video/*`);if(!e||e.length===0)return;let t=e[0];try{V({currentFiles:0,totalFiles:1,currentTasks:0,totalTasks:2});let e=await s(t,2,!1),[n,r,i,o]=await a(t);V({currentFiles:0,totalFiles:1,currentTasks:1,totalTasks:2});let c=await s(n,1,!0);L([{cover_image:c.objectKey,cover_image_thumbnail:c.objectKey,cover_image_radio:Number((r/i).toFixed(2)),cover_image_resolution:`${r}x${i}`,image_url:c.objectKey,image_thumbnail:c.objectKey,image_radio:Number((r/i).toFixed(2)),image_resolution:`${r}x${i}`,is_video:!0,resolution:`${r}x${i}`,video_duration:o,video_url:e.objectKey,video_size:t.size,video_codec_info:{hls_info:[],video_codec_deal:!1}}])}catch(e){console.error(`视频上传失败`,e),y.error(T(`commentInput.videoUploadFailed`))}finally{V(null)}},[q,I.length,W,T]),Be=f(async e=>{if(e.preventDefault(),e.stopPropagation(),!(!Z||C||H)){if(!W){w?w():G();return}try{we(!0);let e=await d?.({text:D===`<br>`?``:D,imageVideoInfoList:I});if(e&&e.success===!1){e.toastHandled||y.error(e.message||`发布评论失败`);return}y.success(T(`commentInput.publishSuccess`)),Ie(),u?.(``)}catch(e){console.error(`发布评论失败:`,e),y.error(T(`commentInput.publishCommentFailed`))}finally{we(!1)}}},[Ie,C,I,D,W,Z,H,u,d,w,G,T]),Q=m(()=>!I.some(e=>e.is_video)&&I.length<9,[I]),$=m(()=>I.length===0,[I.length]),Ve=f(e=>{z(!1);let r=`${n(D).trim().length===0?``:D}${t(e)} `;O(r),Y(r),setTimeout(()=>{J()},16)},[D,J,Y]);function He(e){z(e)}function Ue(){z(!1)}let We=_(`button`,{type:`button`,className:e(`shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium`,Z&&!H?`bg-theme5 text-white`:`bg-bg2 text-text3`),onClick:Be,disabled:!Z||U,children:H?T(`commentInput.publishing`):be}),Ge=_(`button`,{type:`button`,className:e(`ml-[14px] shrink-0 whitespace-nowrap px-[14px] py-[10px] text-[16px] leading-[16px]`,Z&&!H?`text-theme5`:`text-text3`),onClick:Be,disabled:!Z||U,children:H?T(`commentInput.publishing`):be}),Ke=H?_(`span`,{className:e(`ml-[14px] text-[16px] leading-[16px] text-text3`),children:T(`commentInput.publishing`)}):null,qe=E?Te:{...Te,boxShadow:k?`0px -4px 10px 0px rgba(0,0,0,0.1)`:`none`},Je=E?`comment-input-container g-safe-area rounded-2xl border border-line1/20 bg-white text-text1 shadow-sm`:`comment-input-container bg-bg1 g-safe-area text-text1`,Ye=k?E?v(`div`,{className:`flex border-t border-line1/20`,children:[_(b,{disabled:!Q,onClick:()=>{U||Q&&setTimeout(()=>{Re()},400)},variant:`light`,children:T(`commentInput.image`)}),_(b,{disabled:!$,onClick:()=>{U||$&&setTimeout(()=>{ze()},400)},variant:`light`,children:T(`commentInput.video`)}),_(b,{disabled:U,onClick:()=>{U||z(!0)},variant:`light`,children:`@`})]}):v(`div`,{className:`flex h-[50px] items-center justify-around border-t border-line1 px-[8px]`,children:[_(`button`,{type:`button`,className:e(`flex h-full items-center justify-center px-[12px]`,(!Q||U)&&`opacity-50`),onClick:()=>{U||Q&&setTimeout(()=>{Re()},400)},children:_(ie,{className:`h-[22px] w-[22px]`})}),_(`button`,{type:`button`,className:e(`flex h-full items-center justify-center px-[12px]`,(!$||U)&&`opacity-50`),onClick:()=>{U||$&&setTimeout(()=>{ze()},400)},children:_(ae,{className:`h-[22px] w-[22px]`})}),_(`button`,{type:`button`,className:e(`flex h-full items-center justify-center px-[12px]`,U&&`opacity-50`),onClick:()=>{U||z(!0)},children:_(re,{className:`h-[22px] w-[22px]`})})]}):null,Xe=E?``:`mx-auto w-full max-w-[840px]`;return v(`div`,{style:qe,className:e(Je,ge),onMouseDown:Oe,onTouchStart:Oe,onClick:Oe,ref:Se,children:[B&&_(oe,{currentFiles:B.currentFiles,totalFiles:B.totalFiles,currentTasks:B.currentTasks,totalTasks:B.totalTasks}),v(`div`,{className:Xe,children:[k&&_(me,{imageVideoInfoList:I,onDelete:e=>L(t=>t.filter((t,n)=>n!==e)),variant:ye}),v(`div`,{className:e(`px-4 py-3`,E?`flex items-center gap-3`:`flex items-center justify-between`),children:[v(`div`,{className:e(`relative min-w-0 flex-1 rounded-[20px] bg-bg2`,E?`rounded-2xl`:``),children:[!W&&_(`div`,{className:`absolute inset-0 z-[1] cursor-text`,onClick:q}),Le&&_(`span`,{className:e(`pointer-events-none absolute left-3 top-[10px] text-sm text-text3`),children:xe}),_(`div`,{ref:e=>{N.current=e,De(e)},contentEditable:!U,suppressContentEditableWarning:!0,className:e(`max-h-24 min-h-[40px] w-full cursor-text overflow-y-auto px-3 py-[10px] text-sm leading-5 outline-none break-all whitespace-pre-wrap text-text1`,U&&`cursor-not-allowed opacity-60`),"data-placeholder":xe,onInput:Ae,onFocus:Ne,onClick:Pe,onBlur:Fe,onPaste:ke,onDrop:je,onDragOver:Me})]}),k?E?We:Ge:Ke]}),Ye]}),_(ee,{open:R,onOpenChange:He,children:_(te,{showCloseButton:!1,initialFocus:!1,className:`fixed left-0 right-0 bottom-0 top-[84px] z-[1000] w-full max-w-none translate-x-0 translate-y-0 rounded-none bg-bg2 p-0`,children:_(se,{onSelect:Ve,onClose:Ue})})})]})}x.displayName=`CommentInput`;export{x as default};