@junbyeol/tiptap-editor 1.0.12 → 1.0.13
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 +102 -5
- package/dist/index.cjs +38 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +3972 -3801
- package/dist/index.mjs.map +1 -1
- package/dist/types/components/custom/font-family-dropdown-menu/font-family-dropdown-menu.d.ts +9 -0
- package/dist/types/components/custom/font-family-dropdown-menu/index.d.ts +2 -0
- package/dist/types/components/custom/font-family-dropdown-menu/nanum-fonts.d.ts +31 -0
- package/dist/types/lib/fonts.d.ts +12 -0
- package/dist/types/lib/index.d.ts +3 -0
- package/dist/types/tiptap/content.d.ts +6 -0
- package/dist/types/tiptap/extensions/FontFamilyKit.d.ts +10 -0
- package/package.json +11 -13
package/README.md
CHANGED
|
@@ -39,10 +39,11 @@ export default function App() {
|
|
|
39
39
|
| `minHeight` | `string` | 콘텐츠 영역 최소 높이 (기본값: `200px`) |
|
|
40
40
|
| `maxHeight` | `string` | 콘텐츠 영역 최대 높이. 초과 시 내부 스크롤 (기본값: 없음) |
|
|
41
41
|
| `uploadFile` | `(file: File) => Promise<string>` | 파일을 업로드하고 URL을 반환. 미제공 시 base64로 브라우저 메모리에 저장 |
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
42
|
+
| `onUploadStart` | `(file: File) => void` | 파일 업로드 시작 시 호출 |
|
|
43
|
+
| `onUploadSuccess` | `(file: File) => void` | 파일 업로드 성공 시 호출 |
|
|
44
|
+
| `onUploadError` | `(error: Error) => void` | 파일 업로드 오류 시 호출 |
|
|
44
45
|
| `allowNonImageFile` | `boolean` | 이미지 외 파일(PDF 등) 허용 여부 (기본값: `false`) |
|
|
45
|
-
| `FileAttachmentComponent` | `ComponentType<FileAttachmentAttributes>` | 비이미지 파일을 렌더링할
|
|
46
|
+
| `FileAttachmentComponent` | `ComponentType<FileAttachmentAttributes>` | 비이미지 파일을 렌더링할 컴포넌트. `allowNonImageFile`이 `true`일 때 유효 |
|
|
46
47
|
|
|
47
48
|
### 파일 업로드 예시
|
|
48
49
|
|
|
@@ -62,14 +63,110 @@ export default function App() {
|
|
|
62
63
|
return (
|
|
63
64
|
<TiptapEditor
|
|
64
65
|
uploadFile={uploadFile}
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
onUploadStart={(file) => console.log("업로드 시작:", file.name)}
|
|
67
|
+
onUploadSuccess={(file) => console.log("업로드 완료:", file.name)}
|
|
68
|
+
onUploadError={(error) => console.error(error)}
|
|
67
69
|
allowNonImageFile
|
|
68
70
|
/>
|
|
69
71
|
);
|
|
70
72
|
}
|
|
71
73
|
```
|
|
72
74
|
|
|
75
|
+
## 콘텐츠 렌더링 (읽기 전용)
|
|
76
|
+
|
|
77
|
+
저장된 HTML을 읽기 전용으로 표시할 때는 `TiptapContent`를 사용합니다. 에디터 없이 콘텐츠 스타일만 적용된 뷰어 역할을 합니다.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { TiptapContent } from "@junbyeol/tiptap-editor";
|
|
81
|
+
import "@junbyeol/tiptap-editor/style.css";
|
|
82
|
+
|
|
83
|
+
export default function PostPage({ post }) {
|
|
84
|
+
return <TiptapContent html={post.content} />;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Props
|
|
89
|
+
|
|
90
|
+
| Prop | 타입 | 설명 |
|
|
91
|
+
| ----------- | -------- | --------------------------------------------- |
|
|
92
|
+
| `html` | `string` | 렌더링할 HTML 문자열 (필수) |
|
|
93
|
+
| `className` | `string` | 루트 `div`에 추가할 CSS 클래스 (선택) |
|
|
94
|
+
|
|
95
|
+
## 폰트 적용
|
|
96
|
+
|
|
97
|
+
에디터에서 선택할 수 있는 나눔 폰트 시리즈는 별도로 로드해야 합니다. **에디터 페이지와 Viewer 페이지 모두**에 적용해야 WYSIWYG이 보장됩니다.
|
|
98
|
+
|
|
99
|
+
이 패키지는 두 가지 방식으로 폰트 로드를 지원합니다.
|
|
100
|
+
|
|
101
|
+
### 방법 A: React 컴포넌트
|
|
102
|
+
|
|
103
|
+
`EditorFontStylesheets` 컴포넌트를 `<head>` 안에 렌더링합니다.
|
|
104
|
+
|
|
105
|
+
**Next.js App Router (`layout.tsx`)**
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { EditorFontStylesheets } from "@junbyeol/tiptap-editor";
|
|
109
|
+
|
|
110
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
111
|
+
return (
|
|
112
|
+
<html>
|
|
113
|
+
<head>
|
|
114
|
+
<EditorFontStylesheets />
|
|
115
|
+
</head>
|
|
116
|
+
<body>{children}</body>
|
|
117
|
+
</html>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
**Next.js Pages Router (`_document.tsx`)**
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
import { Html, Head, Main, NextScript } from "next/document";
|
|
126
|
+
import { EditorFontStylesheets } from "@junbyeol/tiptap-editor";
|
|
127
|
+
|
|
128
|
+
export default function Document() {
|
|
129
|
+
return (
|
|
130
|
+
<Html>
|
|
131
|
+
<Head>
|
|
132
|
+
<EditorFontStylesheets />
|
|
133
|
+
</Head>
|
|
134
|
+
<body>
|
|
135
|
+
<Main />
|
|
136
|
+
<NextScript />
|
|
137
|
+
</body>
|
|
138
|
+
</Html>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### 방법 B: 폰트 링크 데이터 직접 사용
|
|
144
|
+
|
|
145
|
+
`EDITOR_FONT_LINKS`를 직접 사용해 프레임워크에 맞게 삽입합니다.
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
import { EDITOR_FONT_LINKS } from "@junbyeol/tiptap-editor";
|
|
149
|
+
|
|
150
|
+
// EDITOR_FONT_LINKS 구조:
|
|
151
|
+
// [{ family: "Nanum Gothic", href: "https://fonts.googleapis.com/..." }, ...]
|
|
152
|
+
|
|
153
|
+
// 예: React Helmet
|
|
154
|
+
import { Helmet } from "react-helmet";
|
|
155
|
+
|
|
156
|
+
export default function App() {
|
|
157
|
+
return (
|
|
158
|
+
<>
|
|
159
|
+
<Helmet>
|
|
160
|
+
{EDITOR_FONT_LINKS.map((font) => (
|
|
161
|
+
<link key={font.family} rel="stylesheet" href={font.href} />
|
|
162
|
+
))}
|
|
163
|
+
</Helmet>
|
|
164
|
+
{/* ... */}
|
|
165
|
+
</>
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
73
170
|
## 로컬 개발
|
|
74
171
|
|
|
75
172
|
```bash
|