@richmd/react 0.1.2 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1 +1,144 @@
|
|
|
1
1
|
# @richmd/react
|
|
2
|
+
|
|
3
|
+
React component for [Richmd](https://github.com/richmd/core) - a tool for creating rich content with Markdown.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# Using npm
|
|
9
|
+
npm install @richmd/core @richmd/react
|
|
10
|
+
|
|
11
|
+
# Using yarn
|
|
12
|
+
yarn add @richmd/core @richmd/react
|
|
13
|
+
|
|
14
|
+
# Using pnpm
|
|
15
|
+
pnpm add @richmd/core @richmd/react
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage with Next.js (App Router)
|
|
19
|
+
|
|
20
|
+
### 1. Import CSS in your root layout
|
|
21
|
+
|
|
22
|
+
First, import the required CSS in your root layout file (`app/layout.tsx`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import "@richmd/core/dist/richmd.css";
|
|
26
|
+
|
|
27
|
+
export default function RootLayout({
|
|
28
|
+
children,
|
|
29
|
+
}: {
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
}) {
|
|
32
|
+
return (
|
|
33
|
+
<html lang="en">
|
|
34
|
+
<body>{children}</body>
|
|
35
|
+
</html>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2. Use the Richmd component in your pages or components
|
|
41
|
+
|
|
42
|
+
Since the Richmd component uses client-side features, you need to use the "use client" directive when using it in your pages or components:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
"use client";
|
|
46
|
+
|
|
47
|
+
import { Richmd } from "@richmd/react";
|
|
48
|
+
|
|
49
|
+
export default function MyPage() {
|
|
50
|
+
const markdownText = `# Hello, Richmd!
|
|
51
|
+
|
|
52
|
+
This is a **bold text** and *italic text*.
|
|
53
|
+
|
|
54
|
+
## Features
|
|
55
|
+
- Rich markdown support
|
|
56
|
+
- Easy to use
|
|
57
|
+
- Customizable
|
|
58
|
+
|
|
59
|
+
\`\`\`js
|
|
60
|
+
// Code block example
|
|
61
|
+
const hello = "world";
|
|
62
|
+
console.log(hello);
|
|
63
|
+
\`\`\`
|
|
64
|
+
|
|
65
|
+
> Blockquote example
|
|
66
|
+
|
|
67
|
+
| Table | Example |
|
|
68
|
+
|-------|---------|
|
|
69
|
+
| Cell 1 | Cell 2 |
|
|
70
|
+
| Cell 3 | Cell 4 |
|
|
71
|
+
`;
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<div className="container">
|
|
75
|
+
<Richmd text={markdownText} className="markdown-content" />
|
|
76
|
+
</div>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 3. Create a markdown editor (optional)
|
|
82
|
+
|
|
83
|
+
You can create a simple markdown editor with live preview:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
"use client";
|
|
87
|
+
|
|
88
|
+
import { useState } from "react";
|
|
89
|
+
import { Richmd } from "@richmd/react";
|
|
90
|
+
|
|
91
|
+
export default function MarkdownEditor() {
|
|
92
|
+
const [text, setMarkdown] = useState('# Start typing here...');
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<div className="flex flex-col md:flex-row gap-4">
|
|
96
|
+
<div className="w-full md:w-1/2">
|
|
97
|
+
<textarea
|
|
98
|
+
className="w-full h-[500px] p-4 border rounded"
|
|
99
|
+
value={text}
|
|
100
|
+
onChange={(e) => setMarkdown(e.target.value)}
|
|
101
|
+
/>
|
|
102
|
+
</div>
|
|
103
|
+
<div className="w-full md:w-1/2 border rounded p-4">
|
|
104
|
+
<Richmd text={text} className="prose" />
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Component API
|
|
112
|
+
|
|
113
|
+
The `Richmd` component accepts the following props:
|
|
114
|
+
|
|
115
|
+
| Prop | Type | Required | Description |
|
|
116
|
+
|------|------|----------|-------------|
|
|
117
|
+
| `text` | string | Yes | The markdown text to render |
|
|
118
|
+
| `id` | string | No | HTML id attribute for the container div |
|
|
119
|
+
| `className` | string | No | CSS class name for the container div |
|
|
120
|
+
|
|
121
|
+
## Supported Markdown Features
|
|
122
|
+
|
|
123
|
+
Richmd supports a wide range of markdown features:
|
|
124
|
+
|
|
125
|
+
- Basic formatting (bold, italic, strikethrough)
|
|
126
|
+
- Headings (h1-h6)
|
|
127
|
+
- Lists (ordered and unordered)
|
|
128
|
+
- Checkbox lists
|
|
129
|
+
- Code blocks with syntax highlighting
|
|
130
|
+
- Blockquotes
|
|
131
|
+
- Tables
|
|
132
|
+
- Horizontal rules
|
|
133
|
+
- Links and images
|
|
134
|
+
- TeX syntax (using [KaTeX](https://katex.org/))
|
|
135
|
+
- Color inline blocks
|
|
136
|
+
- Dropdown details
|
|
137
|
+
- Video (HTML5 video tag)
|
|
138
|
+
- Custom HTML tags
|
|
139
|
+
|
|
140
|
+
For detailed syntax documentation, refer to the [Richmd Markdown Syntax Documentation](https://github.com/richmd/core/blob/main/docs/md-syntax.md).
|
|
141
|
+
|
|
142
|
+
## License
|
|
143
|
+
|
|
144
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@richmd/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "It is a react package of Richmd.",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -17,12 +17,6 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"./dist"
|
|
19
19
|
],
|
|
20
|
-
"dependencies": {
|
|
21
|
-
"@richmd/core": "^0.1.5",
|
|
22
|
-
"html-react-parser": "^5.2.2",
|
|
23
|
-
"react": "^19.0.0",
|
|
24
|
-
"react-dom": "^19.0.0"
|
|
25
|
-
},
|
|
26
20
|
"keywords": [],
|
|
27
21
|
"author": "nappa <masa.yanagawa721@gmail.com>",
|
|
28
22
|
"repository": {
|
|
@@ -34,6 +28,12 @@
|
|
|
34
28
|
},
|
|
35
29
|
"homepage": "https://github.com/richmd/react.git",
|
|
36
30
|
"license": "MIT",
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@richmd/core": "^3.0.0",
|
|
33
|
+
"html-react-parser": "^5.2.2",
|
|
34
|
+
"react": "^19.0.0",
|
|
35
|
+
"react-dom": "^19.0.0"
|
|
36
|
+
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@eslint/js": "^9.21.0",
|
|
39
39
|
"@types/react": "^19.0.10",
|