tiptop-editor 1.0.14 → 1.0.16
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 +11 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# 📝 Tiptop Editor
|
|
2
2
|
|
|
3
3
|
A Notion-like rich text editor built with [Tiptap v3](https://tiptap.dev/), [HeroUI](https://heroui.dev/), [Tailwind v4](https://https://tailwindcss.com) packaged as a plug-and-play React component.
|
|
4
|
+
Inspired from [TipTap Notion-like](https://tiptap.dev/docs/ui-components/templates/notion-like-editor).
|
|
4
5
|
|
|
5
6
|
|
|
6
7
|
|
|
@@ -16,6 +17,10 @@ A Notion-like rich text editor built with [Tiptap v3](https://tiptap.dev/), [Her
|
|
|
16
17
|
- Ready to embed in any React app
|
|
17
18
|
- Designed for **Notion-like UX**
|
|
18
19
|
|
|
20
|
+
|
|
21
|
+
https://github.com/user-attachments/assets/cb7d907d-bae0-4b3b-b6e7-8493180afd75
|
|
22
|
+
|
|
23
|
+
|
|
19
24
|
---
|
|
20
25
|
|
|
21
26
|
## ⚙️ Installation
|
|
@@ -39,13 +44,13 @@ For the package to behave like it should, you have to import the compiled CSS fi
|
|
|
39
44
|
- In any component file
|
|
40
45
|
```tsx
|
|
41
46
|
import 'tiptop-editor/dist/tiptop-editor.css'
|
|
42
|
-
|
|
47
|
+
## 🎨 Example
|
|
43
48
|
The Tiptop component takes as props all the props from the `UseEditorOptions` from [*@tiptap/react*](https://www.npmjs.com/package/@tiptap/react), except the `extensions` prop.
|
|
44
|
-
*Why only that prop, you ask ? Well, since this package is intended to *replicate* the Notion-like style with all their blocks/extensions, as of now, I have not allowed users to pass their own extensions. But that can change in the future, just not now.*
|
|
49
|
+
*Why only that prop, you ask ? Well, since this package is intended to *replicate* the Notion-like style with all their blocks/extensions and plug-and-play, as of now, I have not allowed users to pass their own extensions. But that can change in the future, just not now.*
|
|
45
50
|
Anyway, to use the package, just pass your props to `editorOptions` and you're good to go. Customize the Tiptop component will the props you want, as if you were using *EditorContent and passing props to the editor*.
|
|
46
51
|
```tsx
|
|
47
52
|
<TiptopEditor editorOptions={{
|
|
48
|
-
immediatelyRender: false
|
|
53
|
+
immediatelyRender: false // If using SSR (ex. a NextJS project) otherwise you can omit it
|
|
49
54
|
content: '<p>I am the Tiptop Editor</p>'
|
|
50
55
|
... // Other props
|
|
51
56
|
}}
|
|
@@ -53,9 +58,10 @@ Anyway, to use the package, just pass your props to `editorOptions` and you're g
|
|
|
53
58
|
```
|
|
54
59
|
|
|
55
60
|
|
|
56
|
-
#####
|
|
61
|
+
##### Of course, I will continue to improve this project over time, as I have many more ideas (more extensions, more customizations, etc..)
|
|
62
|
+
##### Emoji Extension, Image extension, and more coming in next updates 🏃♂ ...
|
|
57
63
|
|
|
58
|
-
I will also continue to update this Readme with relevant information.
|
|
64
|
+
I will also document the Changelogs and releases, as well as continue to update this Readme with relevant information.
|
|
59
65
|
|
|
60
66
|
*If you have any suggestions/recommendations to improve this project, any feedback is much appreciated (PRs welcome) !*
|
|
61
67
|
*I also encourage you to open up *Issues* if you find releveant bugs inside the package.*
|