Skip to content

Commit eb87d27

Browse files
matandessaurmatandessaur
committed
feature/add-betterquill-plugin
1 parent 955a8ea commit eb87d27

File tree

7 files changed

+1042
-0
lines changed

7 files changed

+1042
-0
lines changed

‎plugins/Better-Quill-Plugin/.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["@babel/preset-react"],
3+
"env": {
4+
"development": {
5+
"presets": [["@babel/preset-react", { "development": true }]]
6+
}
7+
}
8+
}

‎plugins/Better-Quill-Plugin/.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Dependencies
2+
node_modules/
3+
package-lock.json
4+
yarn.lock
5+
6+
# Build output
7+
dist/
8+
9+
# IDE
10+
.vscode/
11+
.idea/
12+
*.swp
13+
*.swo
14+
*~
15+
16+
# OS
17+
.DS_Store
18+
Thumbs.db
19+
20+
# Logs
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# Environment
26+
.env
27+
.env.local
28+
.env.development.local
29+
.env.test.local
30+
.env.production.local

‎plugins/Better-Quill-Plugin/LICENSE‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ISC License
2+
3+
Copyright (c) 2025 Matan Dessaur
4+
5+
Permission to use, copy, modify, and/or distribute this software for any
6+
purpose with or without fee is hereby granted, provided that the above
7+
copyright notice and this permission notice appear in all copies.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

‎plugins/Better-Quill-Plugin/README.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
# BetterQuill - Builder.io Plugin
2+
3+
> A superior rich text editing experience for Builder.io, surpassing the default Quill integration with modern features and professional UI.
4+
5+
**BetterQuill** is a comprehensive Quill.js-based rich text editor plugin for Builder.io that provides everything the default plugin offers and more — with advanced features including professional table management, dark/light themes, fullscreen editing, and a powerful CodeMirror-powered HTML code editor.
6+
7+
## Why BetterQuill?
8+
9+
The default Quill plugin in Builder.io is basic. **BetterQuill** takes it to the next level with:
10+
11+
✅ **Professional UI/UX** - Modern, polished interface with smooth animations
12+
✅ **Dark & Light Modes** - Perfect contrast with `#191919` dark theme
13+
✅ **Advanced Tables** - Full table editor with merge/split cells (powered by quill-better-table)
14+
✅ **Code View** - Professional HTML editor with CodeMirror 6, syntax highlighting, and auto-formatting
15+
✅ **Fullscreen Mode** - Distraction-free editing with centered 800px content area
16+
✅ **Better Typography** - Improved spacing, line heights, and readability
17+
✅ **Modern Controls** - Sleek buttons with hover effects and visual feedback
18+
19+
## Features
20+
21+
### 📝 Text Formatting
22+
- **Headers**: H1-H6 heading styles with proper contrast
23+
- **Text Styles**: Bold, Italic, Underline, Strikethrough
24+
- **Colors**: Full color picker for text and background highlighting
25+
- **Alignment**: Left, Center, Right, Justify
26+
- **Superscript/Subscript**: Scientific notation support
27+
28+
### 📋 Content Elements
29+
- **Lists**: Ordered, Bullet, and Checklist
30+
- **Indentation**: Increase/Decrease indent levels
31+
- **Blockquotes**: Quote formatting with accent border
32+
- **Code Blocks**: Inline code with modern styling
33+
- **Links**: Hyperlink management
34+
- **Images**: Insert and manage images
35+
- **Videos**: Embed video content
36+
37+
### 🎨 Advanced Features
38+
39+
#### Tables (quill-better-table)
40+
Full-featured table editor with context menu:
41+
- Insert/delete rows and columns
42+
- Merge and split cells
43+
- Right-click context menu for all operations
44+
- Clean, professional table styling
45+
46+
#### Dark & Light Modes
47+
- **Dark Mode**: Professional `#191919` background with white text and perfect contrast
48+
- **Light Mode**: Clean white background with dark text
49+
- Consistent theming across all UI elements
50+
- Smooth theme transitions
51+
52+
#### Fullscreen Mode
53+
- Distraction-free editing experience
54+
- Centered content area (800px max-width)
55+
- Full viewport height with `100svh`
56+
- Maintains theme and functionality
57+
58+
#### Code View (CodeMirror 6)
59+
Professional HTML source editor:
60+
- **Syntax Highlighting**: Full HTML syntax coloring
61+
- **Auto-Formatting**: Beautiful code with proper indentation (js-beautify)
62+
- **Line Numbers**: Professional gutter display
63+
- **Editable**: Make changes directly in source code
64+
- **Theme Support**: One Dark theme in dark mode
65+
66+
### 🎨 Modern UI Design
67+
- Smooth transitions and hover effects
68+
- Clean button design with visual feedback
69+
- Custom styled scrollbars
70+
- Professional spacing and typography
71+
- Visible borders with `#393939` in dark mode
72+
- Centered toolbar icons with flexbox
73+
- Glass morphism effects on control bar
74+
75+
## Installation
76+
77+
1. **Install Dependencies**
78+
79+
```bash
80+
npm install
81+
```
82+
83+
2. **Start Development Server**
84+
85+
```bash
86+
npm start
87+
```
88+
89+
The plugin will be available at `http://localhost:1268/plugin.system.js`
90+
91+
3. **Build for Production**
92+
93+
```bash
94+
npm run build
95+
```
96+
97+
The production build will be in the `dist` folder.
98+
99+
## Adding the Plugin to Builder.io
100+
101+
### Local Development
102+
103+
1. Start the development server: `npm start`
104+
2. Go to [Builder.io Account Settings](https://builder.io/account/settings)
105+
3. Click the pencil icon next to "Plugins"
106+
4. Add the local URL: `http://localhost:1268/plugin.system.js`
107+
5. Click Save
108+
109+
**Note for Chrome Users**: When developing locally on `http://localhost`, you need to allow insecure content:
110+
- Click the shield icon in the address bar
111+
- Select "Load unsafe scripts"
112+
- The page will reload
113+
114+
### Using the Plugin
115+
116+
1. Go to **Models** in Builder.io
117+
2. Select or create a model
118+
3. Click **+ New Field**
119+
4. In the **Type** dropdown, scroll down and select **RichText**
120+
5. The rich text editor will appear with all features
121+
122+
## Plugin Features Guide
123+
124+
### 🌙 Dark Mode
125+
Click the **🌙 Dark** button to toggle between light and dark themes. This provides better visibility in different lighting conditions.
126+
127+
### ⛶ Fullscreen Mode
128+
Click the **⛶ Fullscreen** button to expand the editor to full screen for focused, distraction-free editing.
129+
130+
### </> Code View
131+
Click the **</> Code** button to toggle between:
132+
- **Visual Editor**: WYSIWYG editing experience
133+
- **HTML Source**: Direct HTML code editing for advanced users
134+
135+
### ⊞ Tables
136+
Click the **⊞** button in the toolbar to insert a 3x3 table. Right-click on any cell to:
137+
- Insert rows above/below
138+
- Insert columns left/right
139+
- Merge/unmerge cells
140+
- Delete rows/columns/table
141+
142+
## Technical Details
143+
144+
### Core Dependencies
145+
- **Quill 2.0+**: Modern WYSIWYG editor
146+
- **quill-better-table**: Advanced table management with merge/split
147+
- **CodeMirror 6**: Professional code editor for HTML view
148+
- **js-beautify**: HTML auto-formatting and indentation
149+
- **@builder.io/react**: Builder.io React SDK
150+
- **@emotion/core**: CSS-in-JS styling
151+
152+
### Key Technologies
153+
- **React**: Component-based architecture
154+
- **Webpack**: Module bundling and dev server
155+
- **System.js**: Dynamic module loading for Builder.io
156+
- **CSS-in-JS**: Dynamic theming with emotion
157+
158+
### Browser Compatibility
159+
- Chrome/Edge (latest)
160+
- Firefox (latest)
161+
- Safari (latest)
162+
163+
## Customization
164+
165+
BetterQuill is designed to be customizable. Edit `src/plugin.jsx` to modify:
166+
167+
- **Toolbar Options**: Customize the `toolbarOptions` array
168+
- **Theme Colors**: Adjust dark/light mode colors in `containerStyles`
169+
- **Editor Behavior**: Modify Quill modules and settings
170+
- **UI Styling**: Update CSS-in-JS for buttons, borders, and spacing
171+
172+
## Troubleshooting
173+
174+
### Plugin Not Loading
175+
1. Verify the development server is running on port 1268
176+
2. Check browser console for errors
177+
3. Ensure you've allowed insecure scripts in Chrome (see installation notes)
178+
4. Confirm Builder.io plugin URL is correct
179+
180+
### Code View Not Working
181+
1. Ensure all CodeMirror dependencies are installed
182+
2. Check that js-beautify is properly installed
183+
3. Clear browser cache and rebuild
184+
185+
### Styling Issues
186+
1. Clear your browser cache
187+
2. Rebuild the plugin: `npm run build`
188+
3. Refresh Builder.io
189+
4. Check for CSS conflicts in browser DevTools
190+
191+
## Author
192+
193+
**Matan Dessaur** (M8N-MatanDessaur)
194+
📧 [hello@matandessaur.me](mailto:hello@matandessaur.me)
195+
196+
## License
197+
198+
ISC License - Free to use and modify
199+
200+
## Support & Contributing
201+
202+
For issues, questions, or contributions:
203+
- 📧 Email: [hello@matandessaur.me](mailto:hello@matandessaur.me)
204+
- 📚 [Builder.io Documentation](https://www.builder.io/c/docs)
205+
- 📖 [Quill.js Documentation](https://quilljs.com/docs/)
206+
207+
---
208+
209+
**BetterQuill** - Because your content deserves better. 🚀

‎plugins/Better-Quill-Plugin/package.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "betterquill-builderio",
3+
"version": "1.0.0",
4+
"description": "BetterQuill - A superior Builder.io plugin with advanced features: tables, dark mode, fullscreen, and CodeMirror-powered code view",
5+
"keywords": [
6+
"builder.io",
7+
"plugin",
8+
"rich-text",
9+
"quill",
10+
"wysiwyg",
11+
"editor",
12+
"betterquill",
13+
"table",
14+
"dark-mode",
15+
"codemirror",
16+
"fullscreen"
17+
],
18+
"entry": "plugin",
19+
"output": "plugin.system.js",
20+
"main": "dist/plugin.system.js",
21+
"files": [
22+
"dist",
23+
"README.md"
24+
],
25+
"scripts": {
26+
"build": "webpack --mode production",
27+
"start": "webpack-dev-server --mode development"
28+
},
29+
"author": "Matan Dessaur <hello@matandessaur.me> (M8N-MatanDessaur)",
30+
"license": "ISC",
31+
"devDependencies": {
32+
"@babel/preset-react": "^7.18.6",
33+
"@builder.io/app-context": "^1.0.0",
34+
"@builder.io/react": "^2.0.13",
35+
"@emotion/core": "^11.0.0",
36+
"babel-loader": "^8.2.5",
37+
"css-loader": "^6.7.1",
38+
"style-loader": "^3.3.1",
39+
"webpack": "^5.74.0",
40+
"webpack-cli": "^4.10.0",
41+
"webpack-dev-server": "^4.10.0"
42+
},
43+
"dependencies": {
44+
"quill": "^2.0.2",
45+
"quill-better-table": "^1.2.10",
46+
"codemirror": "^6.0.1",
47+
"@codemirror/view": "^6.23.0",
48+
"@codemirror/state": "^6.4.0",
49+
"@codemirror/lang-html": "^6.4.7",
50+
"@codemirror/theme-one-dark": "^6.1.2",
51+
"@codemirror/commands": "^6.3.3",
52+
"@codemirror/language": "^6.10.0",
53+
"js-beautify": "^1.14.11"
54+
}
55+
}

0 commit comments

Comments
 (0)