diff --git a/Quill-RichText-Editor.md b/Quill-RichText-Editor.md new file mode 100644 index 0000000..727eef3 --- /dev/null +++ b/Quill-RichText-Editor.md @@ -0,0 +1,243 @@ +**React Quill** is one of the most flexible and widely used rich-text editors for React. It wraps the **Quill.js** editor and allows you to customize almost every part of the editing experience. + +Below is a complete breakdown of **what you can do with React Quill**, from basic formatting to deep customization. + +--- + +# ✅ **What You can Do with React Quill** + +## **1. Basic Rich-Text Editing** + +React Quill supports all standard formatting out of the box: + +* **Bold / Italic / Underline / Strike** +* **Headings (H1–H6)** +* **Block quotes** +* **Ordered / Unordered lists** +* **Links** +* **Code blocks** +* **Inline code** +* **Text alignment (left, center, right, justify)** +* **Text color / background color** + +You enable/disable these via the **toolbar module**. + +--- + +# 🔧 **2. Customizable Toolbars** + +You can fully customize the toolbar: + +```jsx +const modules = { + toolbar: [ + [{ header: [1, 2, 3, false] }], + ['bold', 'italic', 'underline'], + [{ list: 'ordered'}, { list: 'bullet' }], + ['link', 'image'], + ['clean'] + ] +}; +``` + +You can even build your **own toolbar UI** and bind it to Quill. + +--- + +# 🖼️ **3. Image Support** + +React Quill can support: + +### ✔ Paste an image + +✔ Drag & drop +✔ Upload to your server or S3 +✔ Convert to Base64 +✔ Add captions or resize (using plugins) + +To override the default image handler: + +```jsx +const modules = { + toolbar: { + container: "#toolbar", + handlers: { + image: () => { + // custom upload dialog or S3 upload + } + } + } +}; +``` + +--- + +# 📁 **4. File Uploads** + +You can customize Quill to embed: + +* PDFs +* Videos +* Audio +* Custom widgets + +Each embed is defined via a **Quill Blot**. + +--- + +# 🧱 **5. Custom Blots (Custom Elements)** + +Quill lets you build your own elements inside the editor. + +Examples of custom blots you can create: + +* “Callout boxes” +* “Warning blocks” +* “YouTube embed” +* “Tweet embed” +* “Custom components” like buttons or forms (rendered as HTML placeholders) + +```jsx +class MyBlot extends BlockEmbed { … } +Quill.register(MyBlot); +``` + +This is one of Quill’s strongest features. + +--- + +# 📄 **6. Controlled / Uncontrolled Mode** + +React Quill can work as: + +### ✔ A Controlled Component + +You manage the HTML/state yourself. + +```jsx +const [value, setValue] = useState(""); + + +``` + +### ✔ Uncontrolled Component + +The editor manages itself. + +--- + +# 🔌 **7. Keyboard Shortcuts** + +Quill includes a full shortcut system that you can edit. + +Examples: + +* **Ctrl + B** → bold +* **Ctrl + H** → heading +* Create your own shortcuts via the `keyboard` module. + +--- + +# 🌐 **8. Themes: Snow, Bubble, Custom** + +React Quill ships with: + +* **Snow theme** (full toolbar) +* **Bubble theme** (inline pop-up formatting) + +You can also write a **fully custom theme** using CSS. + +--- + +# 🧩 **9. Extensions & Plugins** + +There are many community plugins: + +* Quill Image Resize +* Quill Image Drop +* Quill Better Table +* Quill Mentions (@mention support) +* Markdown shortcut support + +You can integrate these easily: + +```js +import QuillImageResize from "quill-image-resize-module"; +Quill.register("modules/imageResize", QuillImageResize); +``` + +--- + +# 📤 **10. Convert to/from HTML, Delta, JSON** + +React Quill supports: + +### ✔ HTML + +### ✔ Quill Delta format + +✔ JSON representation + +You can: + +* Save as HTML +* Save as Delta (recommended for storing structured data) +* Load HTML back into the editor + +--- + +# 🧼 **11. Sanitization & Whitelisting** + +By default Quill sanitizes input, preventing: + +* XSS injection +* Bad HTML +* Inline scripts + +You can customize what HTML tags and attributes are allowed. + +--- + +# 🔐 **12. Read-Only Mode** + +You can render the content without editing: + +```jsx + +``` + +This is useful for blog posts, emails, dashboards. + +--- + +# 🎯 Best Use Cases for React Quill + +* CMS editors (blog, product descriptions) +* Email editors +* Comment boxes +* Form rich-text fields +* Internal tools +* Chat apps with formatting +* Knowledge base systems + +--- + +# 🆚 When NOT to Use React Quill + +React Quill may not be ideal if you need: + +* Real-time collaboration (use **TipTap + Yjs**) +* Complete Markdown-native editing (use **Editor.js** or **TipTap**) +* Super lightweight editor (Quill is ~100kb+) + +--- + +# If You Want, I Can Provide: + +✅ Code example with image upload +✅ A full custom toolbar +✅ A fully customized editor (colors, fonts, mentions) +✅ A version that stores Delta in your database +✅ Recommendations vs Tiptap / Editor.js + +Just tell me what you want to build!