diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx deleted file mode 100644 index ace1cc1..0000000 --- a/src/components/editor/Editor.tsx +++ /dev/null @@ -1,79 +0,0 @@ -'use client' - -import { useEditor, EditorContent } from '@tiptap/react' -import StarterKit from '@tiptap/starter-kit' -import Link from '@tiptap/extension-link' -import Image from '@tiptap/extension-image' -import { useState } from 'react' -import { TemplateSelector } from '../template/TemplateSelector' -import { cn } from '@/lib/utils' - -const templates = [ - { - id: 'wechat', - transform: (html: string) => html, // Add your transform logic here - styles: 'wechat-specific-styles' - } - // Add more templates as needed -] - -const Editor = () => { - const [selectedTemplate, setSelectedTemplate] = useState('') - const [preview, setPreview] = useState(false) - - const editor = useEditor({ - extensions: [ - StarterKit, - Link.configure({ - openOnClick: false, - }), - Image, - ], - content: '

开始编辑...

', - editorProps: { - attributes: { - class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[500px]', - }, - }, - }) - - const handleTemplateSelect = (templateId: string) => { - setSelectedTemplate(templateId) - } - - const getPreviewContent = () => { - if (!editor || !selectedTemplate) return '' - const template = templates.find(t => t.id === selectedTemplate) - if (!template) return editor.getHTML() - return template.transform(editor.getHTML()) - } - - return ( -
-
- - -
- -
- {preview ? ( -
t.id === selectedTemplate)?.styles - )}> -
-
- ) : ( - - )} -
-
- ) -} - -export default Editor \ No newline at end of file diff --git a/src/components/editor/EditorToolbar.tsx b/src/components/editor/EditorToolbar.tsx deleted file mode 100644 index cddb139..0000000 --- a/src/components/editor/EditorToolbar.tsx +++ /dev/null @@ -1,132 +0,0 @@ -'use client' - -import { Editor } from '@tiptap/react' -import { - Bold, - Italic, - List, - ListOrdered, - Quote, - Heading1, - Heading2, - Heading3, - Minus, - Link, - Image, -} from 'lucide-react' -import { Toggle } from '@/components/ui/toggle' -import { Separator } from '@/components/ui/separator' -import { cn } from '@/lib/utils' - -interface EditorToolbarProps { - editor: Editor | null -} - -export function EditorToolbar({ editor }: EditorToolbarProps) { - if (!editor) return null - - return ( -
-
- editor.chain().focus().toggleHeading({ level: 1 }).run()} - > - - - editor.chain().focus().toggleHeading({ level: 2 }).run()} - > - - - editor.chain().focus().toggleHeading({ level: 3 }).run()} - > - - - - - - editor.chain().focus().toggleBold().run()} - > - - - editor.chain().focus().toggleItalic().run()} - > - - - - - - editor.chain().focus().toggleBulletList().run()} - > - - - editor.chain().focus().toggleOrderedList().run()} - > - - - - - - editor.chain().focus().toggleBlockquote().run()} - > - - - editor.chain().focus().setHorizontalRule().run()} - > - - - - - - { - const url = window.prompt('URL') - if (url) { - editor.chain().focus().setLink({ href: url }).run() - } - }} - > - - - { - const url = window.prompt('Image URL') - if (url) { - editor.chain().focus().setImage({ src: url }).run() - } - }} - > - - -
-
- ) -} \ No newline at end of file diff --git a/src/components/editor/WechatEditor.tsx b/src/components/editor/WechatEditor.tsx index 06bbed2..1e379bf 100644 --- a/src/components/editor/WechatEditor.tsx +++ b/src/components/editor/WechatEditor.tsx @@ -219,7 +219,18 @@ export default function WechatEditor() { // 替换所有元素中的 CSS 变量 const replaceVariables = (element: HTMLElement) => { const style = window.getComputedStyle(element) - const properties = ['color', 'background-color', 'border-color', 'border-left-color'] + const properties = ['color', 'background-color', 'border-color', 'border-left-color', 'font-size'] + + // 获取元素的计算样式 + const computedStyle = window.getComputedStyle(element) + // 保留原始样式 + const originalStyle = element.getAttribute('style') || '' + + // 如果是段落元素,确保应用字体大小 + if (element.tagName.toLowerCase() === 'p') { + // alert(element.style.fontSize ) + element.style.fontSize = '15px' + } properties.forEach(prop => { const value = style.getPropertyValue(prop) @@ -229,6 +240,9 @@ export default function WechatEditor() { finalValue = finalValue.replace(`var(${variable})`, replacement) }) element.style[prop as any] = finalValue + } else if (prop === 'font-size' && !element.style.fontSize) { + // 如果没有字体大小,从计算样式中获取 + element.style.fontSize = computedStyle.fontSize } }) @@ -250,8 +264,8 @@ export default function WechatEditor() { // 创建并写入剪贴板 await navigator.clipboard.write([ new ClipboardItem({ - 'text/html': new Blob([tempDiv.innerHTML], { type: 'text/html' }), - 'text/plain': new Blob([tempDiv.innerText], { type: 'text/plain' }) + 'text/html': new Blob([previewContent.innerHTML], { type: 'text/html' }), + 'text/plain': new Blob([previewContent.innerText], { type: 'text/plain' }) }) ]) diff --git a/src/components/template/TemplateSelector.tsx b/src/components/template/TemplateSelector.tsx deleted file mode 100644 index abd4f95..0000000 --- a/src/components/template/TemplateSelector.tsx +++ /dev/null @@ -1,86 +0,0 @@ -'use client' - -import { Check, ChevronDown } from "lucide-react" -import * as SelectPrimitive from '@radix-ui/react-select' -import { cn } from "@/lib/utils" -import { templates } from '@/config/templates' -import { useState } from 'react' - -export function TemplateSelector({ - onSelect -}: { - onSelect: (template: string, subTemplate?: string) => void -}) { - const [selectedTemplate, setSelectedTemplate] = useState('') - - return ( -
- { - setSelectedTemplate(value) - onSelect(value) - }} - > - - - - - - - - - - {templates.map((template) => ( - - {template.name} - - - - - ))} - - - - - - {selectedTemplate && templates.find(t => t.id === selectedTemplate)?.subTemplates && ( - onSelect(selectedTemplate, value)}> - - - - - - - - - - {templates - .find(t => t.id === selectedTemplate) - ?.subTemplates?.map((subTemplate) => ( - - {subTemplate.name} - - - - - ))} - - - - - )} -
- ) -} \ No newline at end of file diff --git a/src/components/template/WechatStylePicker.tsx b/src/components/template/WechatStylePicker.tsx index a198de6..fa13c56 100644 --- a/src/components/template/WechatStylePicker.tsx +++ b/src/components/template/WechatStylePicker.tsx @@ -53,16 +53,16 @@ export function WechatStylePicker({ value, onSelect }: WechatStylePickerProps) {

+ } as React.CSSProperties}> 标题示例

+ } as React.CSSProperties}> 这是一段示例文本,展示不同样式模板的效果。

-
+
引用文本示例
diff --git a/src/config/wechat-templates.ts b/src/config/wechat-templates.ts index 1fced9d..9cfda81 100644 --- a/src/config/wechat-templates.ts +++ b/src/config/wechat-templates.ts @@ -65,7 +65,7 @@ export const templates: Template[] = [ borderRadius: '6px', color: 'rgba(0,0,0,0.5)', background: 'var(--blockquote-background)', - marginBottom: '1em' + margin: '0 0 1em 0' }, code_pre: { fontSize: '14px', @@ -201,7 +201,7 @@ export const templates: Template[] = [ fontSize: '15px', color: '#4a5568', margin: '20px 0', - lineHeight: 1.6, + lineHeight: 1.75, borderLeft: '3px solid #4299e1', paddingLeft: '1em' },