@funhub/platform 0.2.31 → 0.2.32

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

@@ -1,773 +1,6 @@
 
-'use client';
-
-import { getAtUserElement, stripHtmlTags } from "../../../../utils/common.mjs";
-import { cn } from "../../../../utils/cn.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 { toast } from "sonner";
-import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-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{getAtUserElement as e,stripHtmlTags as t}from"../../../../utils/common.mjs";import{cn as n}from"../../../../utils/cn.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{toast as d}from"sonner";import{memo as f,useCallback as p,useEffect as m,useImperativeHandle as le,useMemo as h,useRef as g,useState as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";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=f(({imageVideoInfoList:e,onDelete:t,variant:r=`dark`})=>{if(e.length===0)return null;let i=r===`light`;return v(`div`,{className:n(`w-full overflow-hidden`,i?`px-4`:`h-[76px] px-[16px]`),children:v(`div`,{className:n(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:e.map((e,r)=>{let a=e.is_video?e.cover_image||e.image_url:e.image_url||e.cover_image;return y(`div`,{className:n(`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&&v(c,{src:a,alt:`media`,fill:!0,objectFit:`cover`}),v(`button`,{type:`button`,className:`cursor-pointer absolute top-0 right-0 p-[4px] z-[1]`,"data-delete-button":`true`,onClick:()=>t(r),children:v(l,{className:`w-[12px] h-[12px] text-[#fff] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]`})}),e.is_video&&v(`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:v(u,{className:`w-[12px] h-[12px] text-[#fff]`})})]},`${e.is_video?`video`:`image`}-${r}`)})})})});me.displayName=`CommentUploadGroup`;function b({disabled:e,onClick:t,children:r,variant:i=`dark`}){return v(`button`,{type:`button`,className:n(`flex h-12 flex-1 items-center justify-center`,i===`light`?`text-text2 hover:bg-bg2/60`:`text-white hover:bg-white/10`,e&&`opacity-40`),disabled:e,onClick:t,children:r})}function x({ref:c,value:l=``,onChange:u,onPublish:f,onInputBlur:x,placeholder:he=``,className:ge=``,maxLength:S=200,publishText:_e=``,autoFocus:ve,disabled:ye,onRequireLogin:C,variant:be=`dark`}){let w=ue(`components.biz.business.comment`),T=be===`light`,xe=_e||w(`commentInput.publishDefault`),Se=h(()=>{let e=he||w(`commentInput.placeholder`);return e.length>15?`${e.slice(0,15)}...`:e},[he,w]),[E,D]=_(l),[O,k]=_(!1),[A,j]=_(!1),Ce=g(null),M=g(null),N=g(!1),P=g(0),we=g(0),[F,I]=_([]),[L,R]=_(!1),[z,B]=_(null),[V,Te]=_(!1),H=ye||V,{isLogin:U}=r(),{open:W}=ne(),{containerStyle:Ee,onFocus:G,onBlur:De,inputRef:Oe}=ce(A),K=p(()=>{C?C():W()},[C,W]);m(()=>{M.current&&l&&(M.current.innerHTML=l)},[l]),m(()=>{typeof window>`u`||window.dispatchEvent(new CustomEvent(`funhub:visible-contact-change`,{detail:{visible:L}}))},[L]),m(()=>{if(!(!ve||!M.current)){if(!U){K();return}M.current.focus(),k(!0)}},[ve,K,U]),m(()=>{let e=e=>{let t=e.target,n=t.closest(`[data-delete-button]`),r=t.tagName===`INPUT`||t.tagName===`TEXTAREA`;n||r||Ce.current?.contains(t)||Date.now()-P.current>100&&k(!1)};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)},[]),le(c,()=>({focus:()=>{let e=M.current;if(!(!e||N.current)){N.current=!0;try{if(!U){K();return}if(document.activeElement===e&&O)return;e.focus(),P.current=Date.now(),k(!0),A||j(!0),G()}catch(e){console.warn(`CommentInput focus error`,e),k(!0)}finally{N.current=!1}}}}),[A,K,U,G,O]);let q=()=>{P.current=Date.now()},J=p(()=>{if(!M.current)return;let e=document.createRange(),t=window.getSelection();e.selectNodeContents(M.current),e.collapse(!1),t?.removeAllRanges(),t?.addRange(e)},[]),Y=p(e=>{M.current&&(M.current.innerHTML=e)},[]),X=p(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-we.current>1500&&(we.current=n,d.info(w(`commentInput.pasteFileNotSupported`))),!0},[w]),ke=p(e=>{let n=M.current;if(!n)return;if(H){e.preventDefault();return}if(!U){e.preventDefault(),K(),n.blur();return}let r=e.clipboardData;if(r&&Array.from(r.items||[]).some(e=>e.kind===`file`)){e.preventDefault(),e.stopPropagation(),d.info(w(`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=t(n.innerHTML||``).length,s=S?Math.max(0,S-o):1/0;if(s<=0)return;pe(n,Number.isFinite(s)?fe(a,s):a),X(n);let c=n.innerHTML||``;D(c),u?.(c)},[K,H,U,S,u,X,w]),Ae=p(e=>{let n=e.currentTarget.innerHTML||``;X(e.currentTarget)&&(n=e.currentTarget.innerHTML||``);let r=t(n);S&&r.length>S&&(n=n.substring(0,S),Y(n),J()),D(n),u?.(n)},[S,J,u,Y,X]),je=p(e=>{e.preventDefault(),e.stopPropagation();let t=e.dataTransfer?.files;t&&t.length>0&&d.info(w(`commentInput.dragFileNotSupported`))},[w]),Me=p(e=>{e.preventDefault()},[]),Ne=()=>{if(!H){if(!U){K(),M.current?.blur();return}P.current=Date.now(),k(!0),A||j(!0),G()}},Pe=()=>{if(H){V&&d.info(w(`commentInput.publishing`));return}if(!U){K(),M.current?.blur();return}P.current=Date.now(),O||k(!0),A||j(!0),G()},Fe=()=>{setTimeout(()=>{Date.now()-P.current>200&&document.activeElement!==M.current&&(k(!1),x?.())},150),De()},Ie=p(()=>{D(``),Y(``),I([]),k(!1)},[Y]),Le=h(()=>t(E).trim().length===0,[E]),Z=h(()=>!Le||F.length>0,[F.length,Le]),Re=p(async()=>{if(!U){K();return}if(F.some(e=>e.is_video))return;let e=await i(`file`,`image/*`);if(!e||e.length===0)return;let t=9-F.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];B({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?d.error(w(`commentInput.imageUploadFailed`)):(a>0&&d.warning(w(`commentInput.partialImageUploadFailed`)),I(e=>[...e,...r]))}finally{B(null)}},[K,F,U,w]),ze=p(async()=>{if(!U){K();return}if(F.length>0){d.error(w(`commentInput.cannotSelectVideoWhenImageSelected`));return}let e=await i(`file`,`video/*`);if(!e||e.length===0)return;let t=e[0];try{B({currentFiles:0,totalFiles:1,currentTasks:0,totalTasks:2});let e=await s(t,2,!1),[n,r,i,o]=await a(t);B({currentFiles:0,totalFiles:1,currentTasks:1,totalTasks:2});let c=await s(n,1,!0);I([{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),d.error(w(`commentInput.videoUploadFailed`))}finally{B(null)}},[K,F.length,U,w]),Be=p(async e=>{if(e.preventDefault(),e.stopPropagation(),!(!Z||ye||V)){if(!U){C?C():W();return}try{Te(!0);let e=await f?.({text:E===`<br>`?``:E,imageVideoInfoList:F});if(e&&e.success===!1){e.toastHandled||d.error(e.message||`发布评论失败`);return}d.success(w(`commentInput.publishSuccess`)),Ie(),u?.(``)}catch(e){console.error(`发布评论失败:`,e),d.error(w(`commentInput.publishCommentFailed`))}finally{Te(!1)}}},[Ie,ye,F,E,U,Z,V,u,f,C,W,w]),Q=h(()=>!F.some(e=>e.is_video)&&F.length<9,[F]),$=h(()=>F.length===0,[F.length]),Ve=p(n=>{R(!1);let r=`${t(E).trim().length===0?``:E}${e(n)} `;D(r),Y(r),setTimeout(()=>{J()},16)},[E,J,Y]);function He(e){R(e)}function Ue(){R(!1)}let We=v(`button`,{type:`button`,className:n(`shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium`,Z&&!V?`bg-theme5 text-white`:`bg-bg2 text-text3`),onClick:Be,disabled:!Z||H,children:V?w(`commentInput.publishing`):xe}),Ge=v(`button`,{type:`button`,className:n(`ml-[14px] shrink-0 whitespace-nowrap px-[14px] py-[10px] text-[16px] leading-[16px]`,Z&&!V?`text-theme5`:`text-text3`),onClick:Be,disabled:!Z||H,children:V?w(`commentInput.publishing`):xe}),Ke=V?v(`span`,{className:n(`ml-[14px] text-[16px] leading-[16px] text-text3`),children:w(`commentInput.publishing`)}):null,qe=T?Ee:{...Ee,boxShadow:O?`0px -4px 10px 0px rgba(0,0,0,0.1)`:`none`},Je=T?`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=O?T?y(`div`,{className:`flex border-t border-line1/20`,children:[v(b,{disabled:!Q,onClick:()=>{H||Q&&setTimeout(()=>{Re()},400)},variant:`light`,children:w(`commentInput.image`)}),v(b,{disabled:!$,onClick:()=>{H||$&&setTimeout(()=>{ze()},400)},variant:`light`,children:w(`commentInput.video`)}),v(b,{disabled:H,onClick:()=>{H||R(!0)},variant:`light`,children:`@`})]}):y(`div`,{className:`flex h-[50px] items-center justify-around border-t border-line1 px-[8px]`,children:[v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,(!Q||H)&&`opacity-50`),onClick:()=>{H||Q&&setTimeout(()=>{Re()},400)},children:v(ie,{className:`h-[22px] w-[22px]`})}),v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,(!$||H)&&`opacity-50`),onClick:()=>{H||$&&setTimeout(()=>{ze()},400)},children:v(ae,{className:`h-[22px] w-[22px]`})}),v(`button`,{type:`button`,className:n(`flex h-full items-center justify-center px-[12px]`,H&&`opacity-50`),onClick:()=>{H||R(!0)},children:v(re,{className:`h-[22px] w-[22px]`})})]}):null,Xe=T?``:`mx-auto w-full max-w-[840px]`;return y(`div`,{style:qe,className:n(Je,ge),onMouseDown:q,onTouchStart:q,onClick:q,ref:Ce,children:[z&&v(oe,{currentFiles:z.currentFiles,totalFiles:z.totalFiles,currentTasks:z.currentTasks,totalTasks:z.totalTasks}),y(`div`,{className:Xe,children:[O&&v(me,{imageVideoInfoList:F,onDelete:e=>I(t=>t.filter((t,n)=>n!==e)),variant:be}),y(`div`,{className:n(`px-4 py-3`,T?`flex items-center gap-3`:`flex items-center justify-between`),children:[y(`div`,{className:n(`relative min-w-0 flex-1 rounded-[20px] bg-bg2`,T?`rounded-2xl`:``),children:[!U&&v(`div`,{className:`absolute inset-0 z-[1] cursor-text`,onClick:K}),Le&&v(`span`,{className:n(`pointer-events-none absolute left-3 top-[10px] text-sm text-text3`),children:Se}),v(`div`,{ref:e=>{M.current=e,Oe(e)},contentEditable:!H,suppressContentEditableWarning:!0,className:n(`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`,H&&`cursor-not-allowed opacity-60`),"data-placeholder":Se,onInput:Ae,onFocus:Ne,onClick:Pe,onBlur:Fe,onPaste:ke,onDrop:je,onDragOver:Me})]}),O?T?We:Ge:Ke]}),Ye]}),v(ee,{open:L,onOpenChange:He,children:v(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:v(se,{onSelect:Ve,onClose:Ue})})})]})}x.displayName=`CommentInput`;export{x as default};