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-toggle": "^1.0.3",
"@radix-ui/react-tooltip": "^1.1.7",
"@tiptap/extension-image": "^2.2.4",
"@tiptap/extension-link": "^2.2.4",
"@tiptap/extension-image": "^2.11.3",
"@tiptap/extension-link": "^2.11.3",
"@tiptap/pm": "^2.2.4",
"@tiptap/react": "^2.2.4",
"@tiptap/starter-kit": "^2.2.4",

4
pnpm-lock.yaml
View File

@ -42,10 +42,10 @@ importers:
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)
'@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))
'@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)
'@tiptap/pm':
specifier: ^2.2.4

3
src/app/layout.tsx
View File

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

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

@ -2,6 +2,8 @@
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 { templates } from '@/config/templates'
@ -12,7 +14,13 @@ const Editor = () => {
const [preview, setPreview] = useState(false)
const editor = useEditor({
extensions: [StarterKit],
extensions: [
StarterKit,
Link.configure({
openOnClick: false,
}),
Image,
],
content: '<p>开始编辑...</p>',
editorProps: {
attributes: {

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

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

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

@ -73,9 +73,23 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
description: newTemplate.description || '',
styles: newTemplate.styles || '',
options: {
fontSize: {},
colors: {},
spacing: {}
base: {
primaryColor: '#000000',
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
}
@ -91,25 +105,7 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
name: template.name,
description: template.description,
styles: template.styles,
styleConfig: {
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,
// ... 其他内联元素
}
}
options: template.options
}))
const data = JSON.stringify(exportData, null, 2)
@ -135,30 +131,12 @@ export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
name: data.name,
description: data.description,
styles: data.styles,
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,
// ... 其他内联元素
}
},
options: data.options,
transform: (html: string) => {
return `
<section>
<style>
:root { --md-primary-color: ${data.styleConfig.base['--md-primary-color']}; }
:root { --md-primary-color: ${data.options.base.primaryColor}; }
</style>
${html}
</section>

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

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

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

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

26
src/lib/markdown.ts
View File

@ -4,9 +4,7 @@ import type { CSSProperties } from 'react'
// 配置 marked 选项
marked.setOptions({
gfm: true,
breaks: true,
headerIds: false,
mangle: false,
breaks: true
})
// 将 React CSSProperties 转换为 CSS 字符串
@ -48,12 +46,11 @@ function baseStylesToString(base: RendererOptions['base'] = {}): string {
export function convertToWechat(markdown: string, options: RendererOptions = {}): string {
const renderer = new marked.Renderer()
// 标题渲染
renderer.heading = ({ tokens, depth }: { tokens: Tokens.Generic[]; depth: number }) => {
const style = options.block?.[`h${depth}` as keyof RendererOptions['block']]
renderer.heading = ({ text, depth }: Tokens.Heading) => {
const style = options.block?.[`h${depth}` as keyof typeof options.block]
const styleStr = cssPropertiesToString(style)
const content = tokens.map(token => token.text).join('')
return `<h${depth}${styleStr ? ` style="${styleStr}"` : ''}>${content}</h${depth}>`
}
return `<h${depth}${styleStr ? ` style="${styleStr}"` : ''}>${text}</h${depth}>`
}
// 段落渲染
renderer.paragraph = (text) => {
@ -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 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>`
}
// 图片渲染
renderer.image = (href, title, text) => {
renderer.image = ({ href, title, text }: Tokens.Image) => {
const style = options.block?.image
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()
xiaohongshuRenderer.heading = (text, level) => {
xiaohongshuRenderer.heading = ({ text, depth }: Tokens.Heading) => {
const fontSize = {
1: '20px',
2: '18px',
@ -153,9 +151,9 @@ export function convertToXiaohongshu(markdown: string): string {
4: '15px',
5: '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) => {