@elia-ori/editor 0.1.26 → 0.1.27
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 +41 -1
- package/package.json +22 -12
package/README.md
CHANGED
|
@@ -88,11 +88,11 @@ function MyEditor() {
|
|
|
88
88
|
```ts
|
|
89
89
|
type ToolbarItem =
|
|
90
90
|
| 'undo-redo' // 復原/重做
|
|
91
|
+
| 'text' // 內文
|
|
91
92
|
| 'heading' // 標題 (H1-H4)
|
|
92
93
|
| 'list' // 列表
|
|
93
94
|
| 'blockquote' // 引用區塊
|
|
94
95
|
| 'code-block' // 程式碼區塊
|
|
95
|
-
| 'callout' // 提示區塊
|
|
96
96
|
| 'table' // 表格
|
|
97
97
|
| 'format' // 格式 (粗體、斜體、刪除線、code、底線)
|
|
98
98
|
| 'text-color' // 文字顏色
|
|
@@ -161,3 +161,43 @@ const handleImageUpload = async (file, onProgress) => {
|
|
|
161
161
|
// ...
|
|
162
162
|
/>
|
|
163
163
|
```
|
|
164
|
+
|
|
165
|
+
## TocSidebar (目錄側邊欄)
|
|
166
|
+
|
|
167
|
+
若需要顯示文章目錄，使用 `EliaEditorProvider` 包裹並加入 `TocSidebar`：
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
import { EliaEditorProvider, EliaEditor, TocSidebar } from '@elia-ori/editor'
|
|
171
|
+
import '@elia-ori/editor/styles.css'
|
|
172
|
+
|
|
173
|
+
function MyPage() {
|
|
174
|
+
return (
|
|
175
|
+
<EliaEditorProvider>
|
|
176
|
+
<div style={{ display: 'flex', gap: '1rem' }}>
|
|
177
|
+
<TocSidebar />
|
|
178
|
+
<EliaEditor onChange={handleChange} />
|
|
179
|
+
</div>
|
|
180
|
+
</EliaEditorProvider>
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### TocSidebar Props
|
|
186
|
+
|
|
187
|
+
| Prop | Type | Description |
|
|
188
|
+
|------|------|-------------|
|
|
189
|
+
| className | string | 自訂樣式類別 |
|
|
190
|
+
|
|
191
|
+
### 自訂樣式
|
|
192
|
+
|
|
193
|
+
TocSidebar 使用 CSS 變數，可透過覆蓋來自訂樣式：
|
|
194
|
+
|
|
195
|
+
```css
|
|
196
|
+
.my-toc {
|
|
197
|
+
--toc-title-color: #1f2937;
|
|
198
|
+
--toc-link-color: #6b7280;
|
|
199
|
+
--toc-hover-color: #374151;
|
|
200
|
+
--toc-hover-bg: #f3f4f6;
|
|
201
|
+
--toc-active-color: #2563eb;
|
|
202
|
+
}
|
|
203
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elia-ori/editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.27",
|
|
4
4
|
"description": "基於 TipTap 的富文字編輯器套件",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -31,46 +31,56 @@
|
|
|
31
31
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@floating-ui/react": "^0.27.
|
|
34
|
+
"@floating-ui/react": "^0.27.17",
|
|
35
35
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
36
36
|
"@radix-ui/react-popover": "^1.1.15",
|
|
37
37
|
"@radix-ui/react-toggle": "^1.1.0",
|
|
38
|
-
"@tiptap/
|
|
39
|
-
"@tiptap/
|
|
40
|
-
"@tiptap/extension-
|
|
38
|
+
"@tiptap-pro/extension-ai": "^3.3.0",
|
|
39
|
+
"@tiptap/core": "^3.18.0",
|
|
40
|
+
"@tiptap/extension-color": "^3.18.0",
|
|
41
|
+
"@tiptap/extension-drag-handle-react": "^3.18.0",
|
|
42
|
+
"@tiptap/extension-emoji": "^3.18.0",
|
|
43
|
+
"@tiptap/extension-highlight": "^3.18.0",
|
|
41
44
|
"@tiptap/extension-horizontal-rule": "^3.17.1",
|
|
42
45
|
"@tiptap/extension-image": "^3.17.1",
|
|
43
46
|
"@tiptap/extension-link": "^3.15.3",
|
|
44
|
-
"@tiptap/extension-list": "^3.
|
|
47
|
+
"@tiptap/extension-list": "^3.18.0",
|
|
48
|
+
"@tiptap/extension-mention": "^3.18.0",
|
|
45
49
|
"@tiptap/extension-placeholder": "^3.15.3",
|
|
46
50
|
"@tiptap/extension-subscript": "^3.17.1",
|
|
47
51
|
"@tiptap/extension-superscript": "^3.17.1",
|
|
48
|
-
"@tiptap/extension-table": "^3.
|
|
52
|
+
"@tiptap/extension-table": "^3.18.0",
|
|
49
53
|
"@tiptap/extension-table-cell": "^3.15.3",
|
|
50
54
|
"@tiptap/extension-table-header": "^3.15.3",
|
|
51
55
|
"@tiptap/extension-table-row": "^3.15.3",
|
|
52
56
|
"@tiptap/extension-task-item": "^3.15.3",
|
|
53
57
|
"@tiptap/extension-task-list": "^3.15.3",
|
|
54
58
|
"@tiptap/extension-text-align": "^3.17.1",
|
|
55
|
-
"@tiptap/extension-text-style": "^3.
|
|
59
|
+
"@tiptap/extension-text-style": "^3.18.0",
|
|
56
60
|
"@tiptap/extension-typography": "^3.17.1",
|
|
57
61
|
"@tiptap/extension-underline": "^3.15.3",
|
|
58
|
-
"@tiptap/
|
|
62
|
+
"@tiptap/extension-unique-id": "^3.18.0",
|
|
63
|
+
"@tiptap/extensions": "^3.18.0",
|
|
64
|
+
"@tiptap/suggestion": "^3.18.0",
|
|
59
65
|
"clsx": "^2.1.1",
|
|
66
|
+
"is-hotkey": "^0.2.0",
|
|
60
67
|
"lodash.throttle": "^4.1.1",
|
|
61
68
|
"react-hotkeys-hook": "^5.2.3",
|
|
69
|
+
"react-textarea-autosize": "^8.5.9",
|
|
62
70
|
"tailwind-merge": "^3.4.0",
|
|
63
71
|
"tiptap-extension-resize-image": "^1.3.2"
|
|
64
72
|
},
|
|
65
73
|
"devDependencies": {
|
|
74
|
+
"@ariakit/react": "^0.4.21",
|
|
66
75
|
"@aws-sdk/client-s3": "^3.975.0",
|
|
67
76
|
"@playwright/test": "^1.58.0",
|
|
68
77
|
"@tailwindcss/cli": "^4.1.18",
|
|
69
78
|
"@tailwindcss/vite": "^4.1.18",
|
|
70
|
-
"@tiptap/pm": "^3.
|
|
71
|
-
"@tiptap/react": "^3.
|
|
72
|
-
"@tiptap/starter-kit": "^3.
|
|
79
|
+
"@tiptap/pm": "^3.18.0",
|
|
80
|
+
"@tiptap/react": "^3.18.0",
|
|
81
|
+
"@tiptap/starter-kit": "^3.18.0",
|
|
73
82
|
"@types/dompurify": "^3.0.5",
|
|
83
|
+
"@types/is-hotkey": "^0.1.10",
|
|
74
84
|
"@types/lodash.throttle": "^4.1.9",
|
|
75
85
|
"@types/node": "^24.3.0",
|
|
76
86
|
"@types/react": "^19.2.4",
|