tiptop-editor 1.0.13 → 1.0.15
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 +68 -5
- package/dist/tiptop-editor.css +1 -1
- package/dist/tiptop-editor.umd.js +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,69 @@
|
|
|
1
|
-
#
|
|
2
|
-
I'am still working on the package, and finising the last touches.
|
|
3
|
-
I will update this README with all there is to know when I'm done.
|
|
4
|
-
So please do not be mad at me if you don't understand how to use the package, it will be dealt with very soon.
|
|
1
|
+
# 📝 Tiptop Editor
|
|
5
2
|
|
|
6
|
-
|
|
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).
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## ✨ Features
|
|
13
|
+
|
|
14
|
+
- Built on **Tiptap v3** — a powerful, headless rich-text editor
|
|
15
|
+
- Styled with **HeroUI** + **Tailwind**
|
|
16
|
+
- Fully typed with **TypeScript**
|
|
17
|
+
- Ready to embed in any React app
|
|
18
|
+
- Designed for **Notion-like UX**
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
https://github.com/user-attachments/assets/cb7d907d-bae0-4b3b-b6e7-8493180afd75
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## ⚙️ Installation
|
|
27
|
+
```bash
|
|
28
|
+
npm install tiptop-editor
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 🚀 Usage
|
|
32
|
+
|
|
33
|
+
**Import the component in your app**
|
|
34
|
+
```tsx
|
|
35
|
+
import { TiptopEditor } from "tiptop-editor";
|
|
36
|
+
|
|
37
|
+
<TiptopEditor />
|
|
38
|
+
```
|
|
39
|
+
**Add the CSS code to your app**
|
|
40
|
+
For the package to behave like it should, you have to import the compiled CSS file. Add this line in your main css file, or import it directly in the component file that's going to host the **TiptopEditor**.
|
|
41
|
+
- In your main css file
|
|
42
|
+
```css
|
|
43
|
+
@import '../node_modules/tiptop-editor/dist/tiptop-editor.css';
|
|
44
|
+
- In any component file
|
|
45
|
+
```tsx
|
|
46
|
+
import 'tiptop-editor/dist/tiptop-editor.css'
|
|
47
|
+
## 🎨 Example
|
|
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.
|
|
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.*
|
|
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*.
|
|
51
|
+
```tsx
|
|
52
|
+
<TiptopEditor editorOptions={{
|
|
53
|
+
immediatelyRender: false
|
|
54
|
+
content: '<p>I am the Tiptop Editor</p>'
|
|
55
|
+
... // Other props
|
|
56
|
+
}}
|
|
57
|
+
/>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
|
|
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 🏃♂ ...
|
|
63
|
+
|
|
64
|
+
I will also document the Changelogs and releases, as well as continue to update this Readme with relevant information.
|
|
65
|
+
|
|
66
|
+
*If you have any suggestions/recommendations to improve this project, any feedback is much appreciated (PRs welcome) !*
|
|
67
|
+
*I also encourage you to open up *Issues* if you find releveant bugs inside the package.*
|
|
68
|
+
|
|
69
|
+
**Thank you, and Happy Coding !**
|