@junbyeol/tiptap-editor 0.1.0 → 0.1.1
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 +69 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,73 +1,82 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @junbyeol/tiptap-editor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React용 Tiptap 리치 텍스트 에디터 컴포넌트입니다. 텍스트 서식, 표, 파일 첨부 등의 기능을 포함합니다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
~**[데모 보기](https://your-demo-url.com)**~
|
|
6
|
+
준비중
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
8
|
+
## 기능
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
- 텍스트 서식 (Bold, Italic, Strike, Underline, Code, 색상)
|
|
11
|
+
- 제목 (H1~H4), 목록, 텍스트 정렬
|
|
12
|
+
- 표 삽입 및 편집 (셀 병합, 배경색)
|
|
13
|
+
- 이미지 / 파일 드래그&드롭 및 붙여넣기
|
|
14
|
+
- 다크모드 지원
|
|
11
15
|
|
|
12
|
-
|
|
16
|
+
## 설치
|
|
13
17
|
|
|
14
|
-
|
|
18
|
+
```bash
|
|
19
|
+
npm install @junbyeol/tiptap-editor
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 사용법
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { TiptapEditor } from "@junbyeol/tiptap-editor";
|
|
26
|
+
import "@junbyeol/tiptap-editor/style.css";
|
|
27
|
+
|
|
28
|
+
export default function App() {
|
|
29
|
+
return <TiptapEditor />;
|
|
30
|
+
}
|
|
31
|
+
```
|
|
15
32
|
|
|
16
|
-
|
|
33
|
+
### Props
|
|
17
34
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
35
|
+
| Prop | 타입 | 설명 |
|
|
36
|
+
| ------------------------- | ----------------------------------------- | ----------------------------------------------------------------------- |
|
|
37
|
+
| `defaultValue` | `string` | 초기 HTML 콘텐츠. 마운트 시에만 적용됨 |
|
|
38
|
+
| `onChange` | `(html: string) => void` | 콘텐츠 변경 시 호출. HTML 문자열을 반환 |
|
|
39
|
+
| `uploadFile` | `(file: File) => Promise<string>` | 파일을 업로드하고 URL을 반환. 미제공 시 base64로 브라우저 메모리에 저장 |
|
|
40
|
+
| `onFileInsert` | `(file: File) => void` | 파일이 에디터에 삽입될 때 호출 |
|
|
41
|
+
| `onFileError` | `(error: Error) => void` | 파일 처리 오류 시 호출 |
|
|
42
|
+
| `allowNonImageFile` | `boolean` | 이미지 외 파일(PDF 등) 허용 여부 (기본값: `false`) |
|
|
43
|
+
| `FileAttachmentComponent` | `ComponentType<FileAttachmentAttributes>` | 비이미지 파일을 렌더링할 컴포넌트 |
|
|
25
44
|
|
|
26
|
-
|
|
27
|
-
tseslint.configs.recommendedTypeChecked,
|
|
28
|
-
// Alternatively, use this for stricter rules
|
|
29
|
-
tseslint.configs.strictTypeChecked,
|
|
30
|
-
// Optionally, add this for stylistic rules
|
|
31
|
-
tseslint.configs.stylisticTypeChecked,
|
|
45
|
+
### 파일 업로드 예시
|
|
32
46
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
47
|
+
```tsx
|
|
48
|
+
import { TiptapEditor } from "@junbyeol/tiptap-editor";
|
|
49
|
+
import "@junbyeol/tiptap-editor/style.css";
|
|
50
|
+
|
|
51
|
+
const uploadFile = async (file: File): Promise<string> => {
|
|
52
|
+
const formData = new FormData();
|
|
53
|
+
formData.append("file", file);
|
|
54
|
+
const res = await fetch("/api/upload", { method: "POST", body: formData });
|
|
55
|
+
const { url } = await res.json();
|
|
56
|
+
return url;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
return (
|
|
61
|
+
<TiptapEditor
|
|
62
|
+
uploadFile={uploadFile}
|
|
63
|
+
onFileInsert={(file) => console.log("삽입됨:", file.name)}
|
|
64
|
+
onFileError={(error) => console.error(error)}
|
|
65
|
+
allowNonImageFile
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
44
69
|
```
|
|
45
70
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
extends: [
|
|
58
|
-
// Other configs...
|
|
59
|
-
// Enable lint rules for React
|
|
60
|
-
reactX.configs['recommended-typescript'],
|
|
61
|
-
// Enable lint rules for React DOM
|
|
62
|
-
reactDom.configs.recommended,
|
|
63
|
-
],
|
|
64
|
-
languageOptions: {
|
|
65
|
-
parserOptions: {
|
|
66
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
67
|
-
tsconfigRootDir: import.meta.dirname,
|
|
68
|
-
},
|
|
69
|
-
// other options...
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
])
|
|
71
|
+
## 로컬 개발
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
# 의존성 설치
|
|
75
|
+
yarn
|
|
76
|
+
|
|
77
|
+
# 데모 앱 실행
|
|
78
|
+
yarn dev
|
|
79
|
+
|
|
80
|
+
# 라이브러리 빌드
|
|
81
|
+
yarn build:lib
|
|
73
82
|
```
|