Simple Edit Markdown

一个基于 Tiptap 和 React 构建的简单而强大的 Markdown 编辑器组件。

特性

• 🚀 基于 Tiptap 构建，功能强大
• 📝 支持 Markdown 语法
• 🎨 现代化的 UI 设计
• 📱 响应式设计，支持移动端
• 🔧 高度可定制
• 💡 TypeScript 支持
• 🎯 轻量级，易于集成

安装

npm install simple-edit-markdown
# 或
yarn add simple-edit-markdown
# 或
pnpm add simple-edit-markdown

使用方法

基本使用

import React, { useState } from 'react'
import { SimpleEditor } from 'simple-edit-markdown'
import 'simple-edit-markdown/styles'

function App() {
  const [content, setContent] = useState('# Hello World\n\nStart editing...')

  return (
    <div>
      <SimpleEditor 
        value={content} 
        onChange={setContent}
      />
    </div>
  )
}

export default App

只读模式

import { SimpleEditor } from 'simple-edit-markdown'
import 'simple-edit-markdown/styles'

function ReadOnlyEditor() {
  const content = '# 只读内容\n\n这是一个只读的编辑器。'

  return (
    <SimpleEditor 
      value={content} 
      readOnly={true}
    />
  )
}

自定义样式

import { SimpleEditor } from 'simple-edit-markdown'
import 'simple-edit-markdown/styles'

function CustomEditor() {
  const [content, setContent] = useState('')

  return (
    <SimpleEditor 
      value={content} 
      onChange={setContent}
      className="my-custom-editor"
      style={{
        border: '1px solid #e2e8f0',
        borderRadius: '8px',
        padding: '16px',
        backgroundColor: '#f8fafc',
        minHeight: '300px'
      }}
      focusBorderColor="#3b82f6"
    />
  )
}

API

SimpleEditor Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|---------| | value | string | "" | 编辑器的 Markdown 内容 | | onChange | (markdown: string) => void | - | 内容变化时的回调函数 | | readOnly | boolean | false | 是否为只读模式 | | className | string | "" | 自定义 CSS 类名 | | style | React.CSSProperties | - | 自定义内联样式 | | focusBorderColor | string | - | 编辑器获取焦点时的边框颜色 |

依赖要求

• React >= 18.0.0
• React DOM >= 18.0.0

开发

# 克隆项目
git clone https://github.com/yourusername/simple-edit-markdown.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 代码检查
npm run lint

npm 包构建和发布

本项目提供了完整的 npm 包构建和发布脚本，方便开发者进行版本管理和包发布。

📦 版本管理脚本

# 升级补丁版本 (1.0.1 → 1.0.2)
npm run version:patch

# 升级次版本 (1.0.1 → 1.1.0)
npm run version:minor

# 升级主版本 (1.0.1 → 2.0.0)
npm run version:major

🚀 发布脚本

# 发布到 npm 仓库
npm run publish:npm

# 检查包内容（不实际发布）
npm run publish:check

# 发布 beta 版本
npm run publish:beta

🔄 一键发布脚本（推荐）

这些脚本会自动执行：构建 → 升级版本 → 发布的完整流程

# 构建 → 升级补丁版本 → 发布
npm run release:patch

# 构建 → 升级次版本 → 发布  
npm run release:minor

# 构建 → 升级主版本 → 发布
npm run release:major

# 构建 → 升级补丁版本 → 发布 beta
npm run release:beta

📋 使用示例

快速发布补丁版本（修复 bug）：

npm run release:patch

发布新功能版本：

npm run release:minor

发布重大更新版本：

npm run release:major

检查包内容：

npm run publish:check

发布测试版本：

npm run release:beta

⚠️ 发布前注意事项

1. 登录 npm：确保已登录 npm 账户

   npm login

2. 权限检查：确保包名在 npm 上可用或你有发布权限

3. 版本管理：release:* 脚本会自动构建、升级版本并发布

4. Git 标签：版本升级会自动创建对应的 git tag

5. 镜像源：项目已配置使用官方 npm 镜像源进行发布

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本发布
• 基本的 Markdown 编辑功能
• 响应式设计
• TypeScript 支持

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])