-
()
+ const editorRef = useRef(null)
+ const previewRef = useRef(null)
const [value, setValue] = useState('')
const [selectedTemplate, setSelectedTemplate] = useState('')
const [showPreview, setShowPreview] = useState(true)
const [styleOptions, setStyleOptions] = useState({})
+ const [previewSize, setPreviewSize] = useState('medium')
+ const [isConverting, setIsConverting] = useState(false)
+ const [isDraft, setIsDraft] = useState(false)
- const handleEditorChange = (v: any) => {
-
- if (typeof v === 'string') {
- setValue(v)
- } else if (v?.value && typeof v.value === 'string') {
- setValue(v.value)
- } else {
- console.warn('Unexpected editor value:', v)
- setValue('')
+ // 防止滚动事件循环的标志
+ const isScrolling = useRef(false)
+
+ // 同步滚动处理
+ const handleScroll = useCallback((event: Event) => {
+ const source = event.target
+ // 检查是否是编辑器滚动
+ const isEditor = source instanceof Element && source.closest('.editor-container')
+
+ if (!editorRef.current) return
+
+ const editorElement = editorRef.current.querySelector('.bytemd-editor')
+ if (!editorElement) return
+
+ // 防止滚动事件循环
+ if (isScrolling.current) return
+ isScrolling.current = true
+
+ try {
+ if (isEditor) {
+ const sourceScrollTop = (source as Element).scrollTop
+ const sourceMaxScroll = (source as Element).scrollHeight - (source as Element).clientHeight
+ const percentage = sourceScrollTop / sourceMaxScroll
+
+ const windowMaxScroll = document.documentElement.scrollHeight - window.innerHeight
+ window.scrollTo({
+ top: percentage * windowMaxScroll,
+ behavior: 'auto'
+ })
+ } else {
+ const windowScrollTop = window.scrollY
+ const windowMaxScroll = document.documentElement.scrollHeight - window.innerHeight
+ const percentage = windowScrollTop / windowMaxScroll
+
+ const targetScrollTop = percentage * (editorElement.scrollHeight - editorElement.clientHeight)
+ editorElement.scrollTop = targetScrollTop
+ }
+ } finally {
+ // 确保在下一帧重置标志
+ requestAnimationFrame(() => {
+ isScrolling.current = false
+ })
}
- }
+ }, [])
+
+ // 添加滚动事件监听
+ useEffect(() => {
+ const editorElement = editorRef.current?.querySelector('.bytemd-editor')
+
+ if (editorElement) {
+ editorElement.addEventListener('scroll', handleScroll, { passive: true })
+ window.addEventListener('scroll', handleScroll, { passive: true })
+
+ return () => {
+ editorElement.removeEventListener('scroll', handleScroll)
+ window.removeEventListener('scroll', handleScroll)
+ }
+ }
+ }, [handleScroll])
+
+ // 自动保存处理
+ const handleEditorChange = useCallback((v: string) => {
+ setValue(v)
+ setIsDraft(true)
+
+ // 清除之前的定时器
+ if (autoSaveTimerRef.current) {
+ clearTimeout(autoSaveTimerRef.current)
+ }
+
+ // 设置新的自动保存定时器
+ autoSaveTimerRef.current = setTimeout(() => {
+ localStorage.setItem('wechat_editor_draft', v)
+ toast({
+ description: "内容已自动保存",
+ duration: 2000
+ })
+ }, AUTO_SAVE_DELAY)
+ }, [toast])
+
+ // 手动保存
+ const handleSave = useCallback(() => {
+ try {
+ localStorage.setItem('wechat_editor_content', value)
+ setIsDraft(false)
+ toast({
+ title: "保存成功",
+ description: "内容已保存到本地",
+ duration: 3000
+ })
+ } catch (error) {
+ toast({
+ variant: "destructive",
+ title: "保存失败",
+ description: "无法保存内容，请检查浏览器存储空间",
+ action: 重试 ,
+ })
+ }
+ }, [value, toast])
+
+ // 加载已保存的内容
+ useEffect(() => {
+ const draftContent = localStorage.getItem('wechat_editor_draft')
+ const savedContent = localStorage.getItem('wechat_editor_content')
+
+ if (draftContent) {
+ setValue(draftContent)
+ setIsDraft(true)
+ toast({
+ description: "已恢复未保存的草稿",
+ action: 放弃草稿 ,
+ duration: 5000,
+ })
+ } else if (savedContent) {
+ setValue(savedContent)
+ }
+ }, [toast])
+
+ // 清理自动保存定时器
+ useEffect(() => {
+ return () => {
+ if (autoSaveTimerRef.current) {
+ clearTimeout(autoSaveTimerRef.current)
+ }
+ }
+ }, [])
+
+ // 监听快捷键保存事件
+ useEffect(() => {
+ const handleSaveShortcut = (e: CustomEvent) => {
+ handleSave()
+ }
+
+ window.addEventListener('bytemd-save', handleSaveShortcut as EventListener)
+ return () => {
+ window.removeEventListener('bytemd-save', handleSaveShortcut as EventListener)
+ }
+ }, [handleSave])
const getPreviewContent = () => {
if (!value) return ''
@@ -67,146 +216,401 @@ export default function WechatEditor() {
const copyContent = () => {
const content = getPreviewContent()
navigator.clipboard.writeText(content)
- .then(() => alert('内容已复制到剪贴板'))
- .catch(err => console.error('复制失败:', err))
+ .then(() => toast({
+ title: "复制成功",
+ description: "已复制源代码到剪贴板",
+ duration: 2000
+ }))
+ .catch(err => toast({
+ variant: "destructive",
+ title: "复制失败",
+ description: "无法访问剪贴板，请检查浏览器权限",
+ action: 重试 ,
+ }))
}
const handleTemplateChange = () => {
setValue(value)
}
- const handleCopy = () => {
+ const handleCopy = async () => {
const previewContent = document.querySelector('.preview-content')
- if (!previewContent) return
-
- // 创建一个临时容器来保持样式
- const tempDiv = document.createElement('div')
- tempDiv.innerHTML = previewContent.innerHTML
-
- // 复制计算后的样式
- const styles = window.getComputedStyle(previewContent)
- const importantStyles = {
- 'font-family': styles.fontFamily,
- 'font-size': styles.fontSize,
- 'color': styles.color,
- 'line-height': styles.lineHeight,
- 'text-align': styles.textAlign,
- 'white-space': styles.whiteSpace,
- 'margin': styles.margin,
- 'padding': styles.padding
+ if (!previewContent) {
+ toast({
+ variant: "destructive",
+ title: "复制失败",
+ description: "未找到预览内容",
+ duration: 2000
+ })
+ return
}
-
- // 应用样式到临时容器
- Object.assign(tempDiv.style, importantStyles)
-
- // 将临时容器添加到文档中（隐藏）
- tempDiv.style.position = 'fixed'
- tempDiv.style.left = '-9999px'
- document.body.appendChild(tempDiv)
-
- // 创建选区并复制
- const range = document.createRange()
- range.selectNode(tempDiv)
- const selection = window.getSelection()
- if (selection) {
- selection.removeAllRanges()
- selection.addRange(range)
+
+ try {
+ // 创建一个临时容器
+ const tempDiv = document.createElement('div')
- try {
- document.execCommand('copy')
- alert('预览内容（带格式）已复制到剪贴板')
- } catch (err) {
- console.error('复制失败:', err)
+ // 使用与预览相同的转换逻辑
+ const template = templates.find(t => t.id === selectedTemplate)
+
+ const mergedOptions = {
+ ...styleOptions,
+ ...(template?.options || {})
+ }
+ // 使用相同的转换逻辑获取内容
+ const html = convertToWechat(value, mergedOptions)
+ let finalHtml = html
+
+ if (template?.transform) {
+ try {
+ const transformed = template.transform(html)
+ if (transformed && typeof transformed === 'object') {
+ const result = transformed as { html?: string; content?: string }
+ if (result.html) finalHtml = result.html
+ else if (result.content) finalHtml = result.content
+ else finalHtml = JSON.stringify(transformed)
+ } else {
+ finalHtml = transformed || html
+ }
+ } catch (error) {
+ console.error('Template transformation error:', error)
+ finalHtml = html
+ }
}
- selection.removeAllRanges()
+ // 设置转换后的内容
+ tempDiv.innerHTML = finalHtml
+
+ // 应用模板样式类
+ if (template) {
+ tempDiv.className = template.styles
+ }
+ alert(tempDiv.innerHTML)
+
+ // 使用 Blob 和 Clipboard API 复制
+ const blob = new Blob([tempDiv.innerHTML], { type: 'text/html' })
+ await navigator.clipboard.write([
+ new ClipboardItem({
+ 'text/html': blob
+ })
+ ])
+
+ toast({
+ title: "复制成功",
+ description: template
+ ? "已复制预览内容（使用当前模板样式）"
+ : "已复制预览内容（无样式）",
+ duration: 2000
+ })
+ } catch (err) {
+ toast({
+ variant: "destructive",
+ title: "复制失败",
+ description: "无法访问剪贴板，请检查浏览器权限",
+ action: 重试 ,
+ })
+ console.error('Copy error:', err)
}
-
- // 清理临时元素
- document.body.removeChild(tempDiv)
}
+ // 创建编辑器插件
+ const createEditorPlugin = useCallback((): BytemdPlugin => {
+ const applyTemplateStyles = (markdownBody: Element, selectedTemplateId: string, options: RendererOptions) => {
+ const template = templates.find(t => t.id === selectedTemplateId)
+ if (template) {
+ markdownBody.classList.add(template.styles)
+
+ // 应用模板的样式配置
+ const mergedOptions = {
+ ...options,
+ ...(template.options || {})
+ }
+
+ // 应用标题样式
+ const headings = markdownBody.querySelectorAll('h1, h2, h3, h4, h5, h6')
+ headings.forEach(heading => {
+ const level = heading.tagName.toLowerCase()
+ const style = mergedOptions.block?.[level as keyof RendererOptions['block']]
+ if (style && heading instanceof HTMLElement) {
+ Object.assign(heading.style, style)
+ }
+ })
+
+ // 应用段落样式
+ const paragraphs = markdownBody.querySelectorAll('p')
+ paragraphs.forEach(p => {
+ if (mergedOptions.block?.p && p instanceof HTMLElement) {
+ Object.assign(p.style, mergedOptions.block.p)
+ }
+ })
+
+ // 应用引用样式
+ const blockquotes = markdownBody.querySelectorAll('blockquote')
+ blockquotes.forEach(quote => {
+ if (mergedOptions.block?.blockquote && quote instanceof HTMLElement) {
+ Object.assign(quote.style, mergedOptions.block.blockquote)
+ }
+ })
+
+ // 应用代码块样式
+ const codeBlocks = markdownBody.querySelectorAll('pre code')
+ codeBlocks.forEach(code => {
+ if (mergedOptions.block?.code_pre && code.parentElement instanceof HTMLElement) {
+ Object.assign(code.parentElement.style, mergedOptions.block.code_pre)
+ }
+ })
+
+ // 应用行内代码样式
+ const inlineCodes = markdownBody.querySelectorAll(':not(pre) > code')
+ inlineCodes.forEach(code => {
+ if (mergedOptions.inline?.codespan && code instanceof HTMLElement) {
+ Object.assign(code.style, mergedOptions.inline.codespan)
+ }
+ })
+ }
+ }
+
+ return {
+ actions: [
+ {
+ title: '保存',
+ icon: '',
+ handler: {
+ type: 'action',
+ click: (ctx: any) => {
+ // 触发自定义事件
+ const event = new CustomEvent('bytemd-save', { detail: ctx.editor.getValue() })
+ window.dispatchEvent(event)
+ }
+ }
+ },
+ {
+ title: '复制预览内容',
+ icon: '',
+ handler: {
+ type: 'action',
+ click: async (ctx: any) => {
+ const previewContent = ctx.preview?.querySelector('.markdown-body')
+ if (!previewContent) {
+ toast({
+ variant: "destructive",
+ title: "复制失败",
+ description: "未找到预览内容",
+ duration: 2000
+ })
+ return
+ }
+
+ try {
+ // 创建一个临时容器
+ const tempDiv = document.createElement('div')
+ tempDiv.innerHTML = previewContent.innerHTML
+
+ // 使用 Blob 和 Clipboard API 复制
+ const blob = new Blob([tempDiv.innerHTML], { type: 'text/html' })
+ await navigator.clipboard.write([
+ new ClipboardItem({
+ 'text/html': blob
+ })
+ ])
+
+ toast({
+ title: "复制成功",
+ description: "已复制预览内容（包含样式）",
+ duration: 2000
+ })
+ } catch (err) {
+ toast({
+ variant: "destructive",
+ title: "复制失败",
+ description: "无法访问剪贴板，请检查浏览器权限",
+ action: 重试 ,
+ })
+ console.error('Copy error:', err)
+ }
+ }
+ }
+ }
+ ],
+ viewerEffect({ markdownBody }) {
+ // 图片加载优化
+ const images = markdownBody.querySelectorAll('img')
+ images.forEach(img => {
+ if (img instanceof HTMLImageElement) {
+ img.style.opacity = '0'
+ img.style.transition = 'opacity 0.3s ease'
+ img.onload = () => img.style.opacity = '1'
+ img.onerror = () => {
+ img.style.opacity = '1'
+ img.style.filter = 'grayscale(1)'
+ img.title = '图片加载失败'
+ }
+ }
+ })
+
+ // 链接优化
+ const links = markdownBody.querySelectorAll('a')
+ links.forEach(link => {
+ if (link instanceof HTMLAnchorElement) {
+ link.target = '_blank'
+ link.rel = 'noopener noreferrer'
+ }
+ })
+
+ // 应用模板样式
+ if (selectedTemplate) {
+ applyTemplateStyles(markdownBody, selectedTemplate, styleOptions)
+ }
+ }
+ }
+ }, [selectedTemplate, styleOptions])
+
+ // 使用创建的插件
+ const plugins = useMemo(() => [
+ gfm(), // 使用默认配置
+ breaks(),
+ frontmatter(),
+ math({
+ // 配置数学公式渲染
+ katexOptions: {
+ throwOnError: false,
+ output: 'html'
+ }
+ }),
+ mermaid({
+ // 配置 Mermaid 图表渲染
+ theme: 'default'
+ }),
+ highlight({
+ // 配置代码高亮
+ init: (hljs) => {
+ // 可以在这里注册额外的语言
+ }
+ }),
+ createEditorPlugin()
+ ], [createEditorPlugin])
+
return (
-
-
- 微信公众号编辑器 -
-- 编辑内容，预览效果，一键复制 -
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
-
t.id === selectedTemplate)?.styles
- )}>
-
-
+
+
t.id === selectedTemplate)?.styles
+ )}
+ >
+ {
+ return []
+ }}
+ />
-
+
{showPreview && (
-
-
-
+
t.id === selectedTemplate)?.styles
+ )}
+ >
+ [0]
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return {children}
+}
\ No newline at end of file
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..7faed24
--- /dev/null
+++ b/src/components/theme-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+ const { setTheme } = useTheme()
+
+ return (
+
+
+
+
+
+ setTheme("light")}>
+ 浅色
+
+ setTheme("dark")}>
+ 深色
+
+ setTheme("system")}>
+ 系统
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 0000000..d0f4d75
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+type ToastActionElement = React.ReactElement
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+}
\ No newline at end of file
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..adf09c8
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+ const { toasts } = useToast()
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ )
+ })}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
new file mode 100644
index 0000000..6634612
--- /dev/null
+++ b/src/components/ui/use-toast.ts
@@ -0,0 +1,193 @@
+'use client'
+
+import * as React from "react"
+
+import type {
+ ToastActionElement,
+ ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+ id: string
+ title?: React.ReactNode
+ description?: React.ReactNode
+ action?: ToastActionElement
+}
+
+const actionTypes = {
+ ADD_TOAST: "ADD_TOAST",
+ UPDATE_TOAST: "UPDATE_TOAST",
+ DISMISS_TOAST: "DISMISS_TOAST",
+ REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+ count = (count + 1) % Number.MAX_VALUE
+ return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+ | {
+ type: ActionType["ADD_TOAST"]
+ toast: ToasterToast
+ }
+ | {
+ type: ActionType["UPDATE_TOAST"]
+ toast: Partial
+ }
+ | {
+ type: ActionType["DISMISS_TOAST"]
+ toastId?: ToasterToast["id"]
+ }
+ | {
+ type: ActionType["REMOVE_TOAST"]
+ toastId?: ToasterToast["id"]
+ }
+
+interface State {
+ toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map>()
+
+const addToRemoveQueue = (toastId: string) => {
+ if (toastTimeouts.has(toastId)) {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId)
+ dispatch({
+ type: "REMOVE_TOAST",
+ toastId: toastId,
+ })
+ }, TOAST_REMOVE_DELAY)
+
+ toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case "ADD_TOAST":
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ }
+
+ case "UPDATE_TOAST":
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === action.toast.id ? { ...t, ...action.toast } : t
+ ),
+ }
+
+ case "DISMISS_TOAST": {
+ const { toastId } = action
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId)
+ } else {
+ state.toasts.forEach((toast) => {
+ addToRemoveQueue(toast.id)
+ })
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t
+ ),
+ }
+ }
+ case "REMOVE_TOAST":
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ }
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ }
+ }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+ memoryState = reducer(memoryState, action)
+ listeners.forEach((listener) => {
+ listener(memoryState)
+ })
+}
+
+type Toast = Omit
+
+function toast({ ...props }: Toast) {
+ const id = genId()
+
+ const update = (props: ToasterToast) =>
+ dispatch({
+ type: "UPDATE_TOAST",
+ toast: { ...props, id },
+ })
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss()
+ },
+ },
+ })
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ }
+}
+
+function useToast() {
+ const [state, setState] = React.useState(memoryState)
+
+ React.useEffect(() => {
+ listeners.push(setState)
+ return () => {
+ const index = listeners.indexOf(setState)
+ if (index > -1) {
+ listeners.splice(index, 1)
+ }
+ }
+ }, [state])
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ }
+}
+
+export { useToast, toast }
\ No newline at end of file
+
- 预览效果
+
+
+
-
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
new file mode 100644
index 0000000..c1b72a8
--- /dev/null
+++ b/src/components/theme-provider.tsx
@@ -0,0 +1,10 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+type ThemeProviderProps = Parameters
-
diff --git a/src/components/nav/MainNav.tsx b/src/components/nav/MainNav.tsx
index 72a4b35..3420570 100644
--- a/src/components/nav/MainNav.tsx
+++ b/src/components/nav/MainNav.tsx
@@ -3,6 +3,7 @@
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
+import { ThemeToggle } from '@/components/theme-toggle'
const navigation = [
{ name: '微信公众号', href: '/wechat' },
@@ -13,7 +14,7 @@ export function MainNav() {
const pathname = usePathname()
return (
- t.id === selectedTemplate)?.styles
- )}>
-
-
+
+
+
+ {isConverting ? (
+
+
+ ) : (
+ t.id === selectedTemplate)?.styles
+ )}>
+
+
+ )}
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+