caojiezi2003/neurapress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clear code

Browse Source
This commit is contained in:
tianyaxiang 2025-01-29 22:39:42 +08:00
parent bf4ff49f1e
commit 9b36a08bbb
10 changed files with 102 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -20,8 +20,8 @@
"@radix-ui/react-toast": "^1.2.5", "@radix-ui/react-toast": "^1.2.5",
"@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-tooltip": "^1.1.7", "@radix-ui/react-tooltip": "^1.1.7",
"@tiptap/extension-image": "^2.2.4", "@tiptap/extension-image": "^2.11.3",
"@tiptap/extension-link": "^2.2.4", "@tiptap/extension-link": "^2.11.3",
"@tiptap/pm": "^2.2.4", "@tiptap/pm": "^2.2.4",
"@tiptap/react": "^2.2.4", "@tiptap/react": "^2.2.4",
"@tiptap/starter-kit": "^2.2.4", "@tiptap/starter-kit": "^2.2.4",

4
pnpm-lock.yaml
View File

@ -42,10 +42,10 @@ importers:
specifier: ^1.1.7 specifier: ^1.1.7
version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@tiptap/extension-image': '@tiptap/extension-image':
specifier: ^2.2.4 specifier: ^2.11.3
version: 2.11.3(@tiptap/core@2.11.3(@tiptap/pm@2.11.3)) version: 2.11.3(@tiptap/core@2.11.3(@tiptap/pm@2.11.3))
'@tiptap/extension-link': '@tiptap/extension-link':
specifier: ^2.2.4 specifier: ^2.11.3
version: 2.11.3(@tiptap/core@2.11.3(@tiptap/pm@2.11.3))(@tiptap/pm@2.11.3) version: 2.11.3(@tiptap/core@2.11.3(@tiptap/pm@2.11.3))(@tiptap/pm@2.11.3)
'@tiptap/pm': '@tiptap/pm':
specifier: ^2.2.4 specifier: ^2.2.4

3
src/app/layout.tsx
View File

@ -1,11 +1,9 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@/components/theme/ThemeProvider"; import { ThemeProvider } from "@/components/theme/ThemeProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "NeuraPress", title: "NeuraPress",
@ -38,7 +36,6 @@ export default function RootLayout({
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
</head> </head>
<body className={cn( <body className={cn(
inter.className,
"h-full bg-background text-foreground antialiased" "h-full bg-background text-foreground antialiased"
)}> )}>
<ThemeProvider <ThemeProvider

10
src/components/editor/Editor.tsx
View File

@ -2,6 +2,8 @@
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import { useState } from 'react' import { useState } from 'react'
import { TemplateSelector } from '../template/TemplateSelector' import { TemplateSelector } from '../template/TemplateSelector'
import { templates } from '@/config/templates' import { templates } from '@/config/templates'
@ -12,7 +14,13 @@ const Editor = () => {
const [preview, setPreview] = useState(false) const [preview, setPreview] = useState(false)
const editor = useEditor({ const editor = useEditor({
extensions: [StarterKit], extensions: [
StarterKit,
Link.configure({
openOnClick: false,
}),
Image,
],
content: '<p>开始编辑...</p>', content: '<p>开始编辑...</p>',
editorProps: { editorProps: {
attributes: { attributes: {

110
src/components/editor/StyleConfigDialog.tsx
View File

@ -13,50 +13,44 @@ const stylePresets = {
default: { default: {
name: '默认样式', name: '默认样式',
options: { options: {
fontSize: { base: {
h1: '24px', primaryColor: '#333333',
h2: '20px', textAlign: 'left',
h3: '18px', lineHeight: '1.75'
paragraph: '15px',
code: '14px'
}, },
colors: { block: {
text: '#333333', h1: { fontSize: '24px', color: '#1a1a1a' },
heading: '#1a1a1a', h2: { fontSize: '20px', color: '#1a1a1a' },
link: '#576b95', h3: { fontSize: '18px', color: '#1a1a1a' },
code: '#333333', p: { fontSize: '15px', color: '#333333' },
quote: '#666666' code_pre: { fontSize: '14px', color: '#333333' }
}, },
spacing: { inline: {
paragraph: '20px', link: { color: '#576b95' },
heading: '30px', codespan: { color: '#333333' },
list: '20px', em: { color: '#666666' }
quote: '20px'
} }
} }
}, },
modern: { modern: {
name: '现代简约', name: '现代简约',
options: { options: {
fontSize: { base: {
h1: '28px', primaryColor: '#2d3748',
h2: '24px', textAlign: 'left',
h3: '20px', lineHeight: '1.8'
paragraph: '16px',
code: '15px'
}, },
colors: { block: {
text: '#2d3748', h1: { fontSize: '28px', color: '#1a202c' },
heading: '#1a202c', h2: { fontSize: '24px', color: '#1a202c' },
link: '#4299e1', h3: { fontSize: '20px', color: '#1a202c' },
code: '#2d3748', p: { fontSize: '16px', color: '#2d3748' },
quote: '#718096' code_pre: { fontSize: '15px', color: '#2d3748' }
}, },
spacing: { inline: {
paragraph: '24px', link: { color: '#4299e1' },
heading: '36px', codespan: { color: '#2d3748' },
list: '24px', em: { color: '#718096' }
quote: '24px'
} }
} }
} }
@ -64,16 +58,16 @@ const stylePresets = {
interface StyleConfigDialogProps { interface StyleConfigDialogProps {
value: RendererOptions value: RendererOptions
onChange: (options: RendererOptions) => void onChangeAction: (options: RendererOptions) => void
} }
export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) { export function StyleConfigDialog({ value, onChangeAction }: StyleConfigDialogProps) {
const [currentOptions, setCurrentOptions] = useState<RendererOptions>(value) const [currentOptions, setCurrentOptions] = useState<RendererOptions>(value)
const handlePresetChange = (preset: keyof typeof stylePresets) => { const handlePresetChange = (preset: keyof typeof stylePresets) => {
const newOptions = stylePresets[preset].options const newOptions = stylePresets[preset].options
setCurrentOptions(newOptions) setCurrentOptions(newOptions)
onChange(newOptions) onChangeAction(newOptions)
} }
const handleOptionChange = ( const handleOptionChange = (
@ -89,7 +83,7 @@ export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) {
} }
} }
setCurrentOptions(newOptions) setCurrentOptions(newOptions)
onChange(newOptions) onChangeAction(newOptions)
} }
return ( return (
@ -107,9 +101,9 @@ export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) {
<Tabs defaultValue="presets" className="w-full"> <Tabs defaultValue="presets" className="w-full">
<TabsList> <TabsList>
<TabsTrigger value="presets">预设样式</TabsTrigger> <TabsTrigger value="presets">预设样式</TabsTrigger>
<TabsTrigger value="font">字体</TabsTrigger> <TabsTrigger value="base">基础</TabsTrigger>
<TabsTrigger value="colors">颜色</TabsTrigger> <TabsTrigger value="block">块级元素</TabsTrigger>
<TabsTrigger value="spacing">间距</TabsTrigger> <TabsTrigger value="inline">行内元素</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="presets" className="space-y-4"> <TabsContent value="presets" className="space-y-4">
@ -122,10 +116,10 @@ export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) {
> >
<h3 className="font-medium mb-2">{preset.name}</h3> <h3 className="font-medium mb-2">{preset.name}</h3>
<div className="space-y-2"> <div className="space-y-2">
<p style={{ fontSize: preset.options.fontSize.paragraph, color: preset.options.colors.text }}> <p style={{ fontSize: preset.options.block?.p?.fontSize, color: preset.options.block?.p?.color }}>
正文示例 正文示例
</p> </p>
<h2 style={{ fontSize: preset.options.fontSize.h2, color: preset.options.colors.heading }}> <h2 style={{ fontSize: preset.options.block?.h2?.fontSize, color: preset.options.block?.h2?.color }}>
标题示例 标题示例
</h2> </h2>
</div> </div>
@ -134,50 +128,42 @@ export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) {
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="font" className="space-y-4"> <TabsContent value="base" className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{Object.entries(currentOptions.fontSize || {}).map(([key, value]) => ( {currentOptions.base && Object.entries(currentOptions.base).map(([key, value]) => (
<div key={key} className="space-y-2"> <div key={key} className="space-y-2">
<Label>{key}</Label> <Label>{key}</Label>
<Input <Input
value={value} value={value}
onChange={(e) => handleOptionChange('fontSize', key, e.target.value)} onChange={(e) => handleOptionChange('base', key, e.target.value)}
/> />
</div> </div>
))} ))}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="colors" className="space-y-4"> <TabsContent value="block" className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{Object.entries(currentOptions.colors || {}).map(([key, value]) => ( {currentOptions.block && Object.entries(currentOptions.block).map(([key, value]) => (
<div key={key} className="space-y-2"> <div key={key} className="space-y-2">
<Label>{key}</Label> <Label>{key}</Label>
<div className="flex gap-2">
<Input <Input
value={value} value={JSON.stringify(value)}
onChange={(e) => handleOptionChange('colors', key, e.target.value)} onChange={(e) => handleOptionChange('block', key, e.target.value)}
/> />
<Input
type="color"
value={value}
className="w-12"
onChange={(e) => handleOptionChange('colors', key, e.target.value)}
/>
</div>
</div> </div>
))} ))}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="spacing" className="space-y-4"> <TabsContent value="inline" className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{Object.entries(currentOptions.spacing || {}).map(([key, value]) => ( {currentOptions.inline && Object.entries(currentOptions.inline).map(([key, value]) => (
<div key={key} className="space-y-2"> <div key={key} className="space-y-2">
<Label>{key}</Label> <Label>{key}</Label>
<Input <Input
value={value} value={JSON.stringify(value)}
onChange={(e) => handleOptionChange('spacing', key, e.target.value)} onChange={(e) => handleOptionChange('inline', key, e.target.value)}
/> />
</div> </div>
))} ))}

2
src/components/editor/components/EditorToolbar.tsx
View File

@ -67,7 +67,7 @@ export function EditorToolbar({
<div className="hidden sm:block h-6 w-px bg-border" /> <div className="hidden sm:block h-6 w-px bg-border" />
<StyleConfigDialog <StyleConfigDialog
value={styleOptions} value={styleOptions}
onChange={onStyleOptionsChange} onChangeAction={onStyleOptionsChange}
/> />
<div className="hidden sm:block h-6 w-px bg-border" /> <div className="hidden sm:block h-6 w-px bg-border" />
<button <button

62
src/components/template/TemplateManager.tsx
View File

@ -73,9 +73,23 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
description: newTemplate.description || '', description: newTemplate.description || '',
styles: newTemplate.styles || '', styles: newTemplate.styles || '',
options: { options: {
fontSize: {}, base: {
colors: {}, primaryColor: '#000000',
spacing: {} textAlign: 'left',
lineHeight: '1.75'
},
block: {
h1: { fontSize: '24px', color: '#1a1a1a' },
h2: { fontSize: '20px', color: '#1a1a1a' },
h3: { fontSize: '18px', color: '#1a1a1a' },
p: { fontSize: '15px', color: '#333333' },
code_pre: { fontSize: '14px', color: '#333333' }
},
inline: {
link: { color: '#576b95' },
codespan: { color: '#333333' },
em: { color: '#666666' }
}
}, },
transform: (html) => html transform: (html) => html
} }
@ -91,25 +105,7 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
name: template.name, name: template.name,
description: template.description, description: template.description,
styles: template.styles, styles: template.styles,
styleConfig: { options: template.options
base: {
'--md-primary-color': template.options.base?.primaryColor || '#000000',
'text-align': template.options.base?.textAlign || 'left',
'line-height': template.options.base?.lineHeight || '1.75'
},
block: {
h1: template.options.block?.h1,
h2: template.options.block?.h2,
h3: template.options.block?.h3,
// ... 其他块级元素
},
inline: {
strong: template.options.inline?.strong,
em: template.options.inline?.em,
codespan: template.options.inline?.codespan,
// ... 其他内联元素
}
}
})) }))
const data = JSON.stringify(exportData, null, 2) const data = JSON.stringify(exportData, null, 2)
@ -135,30 +131,12 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
name: data.name, name: data.name,
description: data.description, description: data.description,
styles: data.styles, styles: data.styles,
options: { options: data.options,
base: {
primaryColor: data.styleConfig.base['--md-primary-color'],
textAlign: data.styleConfig.base['text-align'],
lineHeight: data.styleConfig.base['line-height']
},
block: {
h1: data.styleConfig.block.h1,
h2: data.styleConfig.block.h2,
h3: data.styleConfig.block.h3,
// ... 其他块级元素
},
inline: {
strong: data.styleConfig.inline.strong,
em: data.styleConfig.inline.em,
codespan: data.styleConfig.inline.codespan,
// ... 其他内联元素
}
},
transform: (html: string) => { transform: (html: string) => {
return ` return `
<section> <section>
<style> <style>
:root { --md-primary-color: ${data.styleConfig.base['--md-primary-color']}; } :root { --md-primary-color: ${data.options.base.primaryColor}; }
</style> </style>
${html} ${html}
</section> </section>

10
src/components/template/WechatStylePicker.tsx
View File

@ -51,18 +51,18 @@ export function WechatStylePicker({ value, onSelect }: WechatStylePickerProps) {
template.styles template.styles
)}> )}>
<h1 style={{ <h1 style={{
...template.styleConfig?.block?.h1, ...template.options?.block?.h1,
fontSize: template.styleConfig?.block?.h1?.fontSize || '1.2em' fontSize: template.options?.block?.h1?.fontSize || '1.2em'
}}> }}>
标题示例 标题示例
</h1> </h1>
<p style={{ <p style={{
...template.styleConfig?.block?.p, ...template.options?.block?.p,
fontSize: template.styleConfig?.block?.p?.fontSize || '1em' fontSize: template.options?.block?.p?.fontSize || '1em'
}}> }}>
这是一段示例文本，展示不同样式模板的效果。 这是一段示例文本，展示不同样式模板的效果。
</p> </p>
<blockquote style={template.styleConfig?.block?.blockquote}> <blockquote style={template.options?.block?.blockquote}>
引用文本示例 引用文本示例
</blockquote> </blockquote>
</div> </div>

3
src/components/theme/ThemeProvider.tsx
View File

@ -1,8 +1,7 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) { export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider> return <NextThemesProvider {...props}>{children}</NextThemesProvider>

24
src/lib/markdown.ts
View File

@ -4,9 +4,7 @@ import type { CSSProperties } from 'react'
// 配置 marked 选项 // 配置 marked 选项
marked.setOptions({ marked.setOptions({
gfm: true, gfm: true,
breaks: true, breaks: true
headerIds: false,
mangle: false,
}) })
// 将 React CSSProperties 转换为 CSS 字符串 // 将 React CSSProperties 转换为 CSS 字符串
@ -48,11 +46,10 @@ function baseStylesToString(base: RendererOptions['base'] = {}): string {
export function convertToWechat(markdown: string, options: RendererOptions = {}): string { export function convertToWechat(markdown: string, options: RendererOptions = {}): string {
const renderer = new marked.Renderer() const renderer = new marked.Renderer()
// 标题渲染 // 标题渲染
renderer.heading = ({ tokens, depth }: { tokens: Tokens.Generic[]; depth: number }) => { renderer.heading = ({ text, depth }: Tokens.Heading) => {
const style = options.block?.[`h${depth}` as keyof RendererOptions['block']] const style = options.block?.[`h${depth}` as keyof typeof options.block]
const styleStr = cssPropertiesToString(style) const styleStr = cssPropertiesToString(style)
const content = tokens.map(token => token.text).join('') return `<h${depth}${styleStr ? ` style="${styleStr}"` : ''}>${text}</h${depth}>`
return `<h${depth}${styleStr ? ` style="${styleStr}"` : ''}>${content}</h${depth}>`
} }
// 段落渲染 // 段落渲染
@ -102,17 +99,18 @@ export function convertToWechat(markdown: string, options: RendererOptions = {})
} }
// 链接渲染 // 链接渲染
renderer.link = (href, title, text) => { renderer.link = ({ href, title, tokens }: Tokens.Link) => {
const style = options.inline?.link const style = options.inline?.link
const styleStr = cssPropertiesToString(style) const styleStr = cssPropertiesToString(style)
const text = tokens?.map(t => 'text' in t ? t.text : '').join('') || ''
return `<a href="${href}"${title ? ` title="${title}"` : ''}${styleStr ? ` style="${styleStr}"` : ''}>${text}</a>` return `<a href="${href}"${title ? ` title="${title}"` : ''}${styleStr ? ` style="${styleStr}"` : ''}>${text}</a>`
} }
// 图片渲染 // 图片渲染
renderer.image = (href, title, text) => { renderer.image = ({ href, title, text }: Tokens.Image) => {
const style = options.block?.image const style = options.block?.image
const styleStr = cssPropertiesToString(style) const styleStr = cssPropertiesToString(style)
return `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''}${styleStr ? ` style="${styleStr}"` : ''} />` return `<img src="${href}"${title ? ` title="${title}"` : ''} alt="${text}"${styleStr ? ` style="${styleStr}"` : ''} />`
} }
// 列表渲染 // 列表渲染
@ -145,7 +143,7 @@ export function convertToXiaohongshu(markdown: string): string {
// 配置小红书特定的样式 // 配置小红书特定的样式
const xiaohongshuRenderer = new marked.Renderer() const xiaohongshuRenderer = new marked.Renderer()
xiaohongshuRenderer.heading = (text, level) => { xiaohongshuRenderer.heading = ({ text, depth }: Tokens.Heading) => {
const fontSize = { const fontSize = {
1: '20px', 1: '20px',
2: '18px', 2: '18px',
@ -153,9 +151,9 @@ export function convertToXiaohongshu(markdown: string): string {
4: '15px', 4: '15px',
5: '14px', 5: '14px',
6: '14px' 6: '14px'
}[level] }[depth]
return `<h${level} style="margin-top: 25px; margin-bottom: 12px; font-weight: bold; font-size: ${fontSize}; color: #222;">${text}</h${level}>` return `<h${depth} style="margin-top: 25px; margin-bottom: 12px; font-weight: bold; font-size: ${fontSize}; color: #222;">${text}</h${depth}>`
} }
xiaohongshuRenderer.paragraph = (text) => { xiaohongshuRenderer.paragraph = (text) => {