react-mathtype-editor 1.0.2 → 1.0.4

package/README.md

@@ -2,36 +2,35 @@
 
 一个独立的数学公式编辑器组件，基于 React 和 Ant Design 开发，提供两种公式编辑模式：基于 MathLive 的可视化编辑和基于 LaTeX 的文本编辑。
 
+#### demo 演示：[demo](https\://math.yujun.cloud/)
+
 ## 特性
 
 - 🎨 **双模式编辑**：支持 MathLive 可视化编辑和 LaTeX 文本编辑
 - 🔍 **实时预览**：使用 KaTeX 进行高质量公式渲染
 - 📚 **丰富公式库**：内置数学、希腊字母、关系符号等多种预设公式
 - 📋 **智能粘贴**：自动处理粘贴的公式内容
-- 📱 **响应式设计**：适配不同屏幕尺寸
-- ⚡ **高性能**：优化的渲染和更新机制
 
 ![MathType Editor Screenshot](./assets/images/screenshot.png)
 
 ## 安装
 
 ```bash
-npm install react-mathtype-editor
+npm install react-mathtype-editor katex mathlive
 ```
 
 ## 使用方法
 
-```
+```tsx
 import React, { useState } from 'react';
 import MathTypeEditor from 'react-mathtype-editor';
-import 'react-mathtype-editor/dist/style.css';
 
 function App() {
   const [formula, setFormula] = useState('');
 
   return (
     <div>
-      <MathTypeEditor 
+      <MathTypeEditor
         defaultValue={formula}
         onChange={(value) => setFormula(value)}
         style={{ width: '100%' }}
@@ -43,6 +42,33 @@ function App() {
 export default App;
 ```
 
+## 在 SSR 框架中使用（Next.js 等）
+
+该组件依赖 MathLive（Web Component），需要浏览器环境，**不支持服务端渲染**。在 Next.js 中需使用动态导入并禁用 SSR：
+
+**App Router：**
+
+```tsx
+'use client'
+import dynamic from 'next/dynamic'
+
+const MathTypeEditor = dynamic(
+  () => import('react-mathtype-editor'),
+  { ssr: false }
+)
+```
+
+**Pages Router：**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const MathTypeEditor = dynamic(
+  () => import('react-mathtype-editor'),
+  { ssr: false }
+)
+```
+
 ## API
 
 ### Props