raydit-editor 0.0.1
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 +140 -0
- package/dist/index.cjs +7043 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +15 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +7045 -0
- package/dist/index.js.map +1 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# @omnics/notion-editor
|
|
2
|
+
|
|
3
|
+
A powerful Notion-like rich text editor built with TipTap and React.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
\`\`\`bash
|
|
8
|
+
npm install @omnics/notion-editor
|
|
9
|
+
|
|
10
|
+
# or
|
|
11
|
+
|
|
12
|
+
yarn add @omnics/notion-editor
|
|
13
|
+
|
|
14
|
+
# or
|
|
15
|
+
|
|
16
|
+
pnpm add @omnics/notion-editor
|
|
17
|
+
\`\`\`
|
|
18
|
+
|
|
19
|
+
**Note:** This package requires Tailwind CSS to be set up in your project.
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
\`\`\`tsx
|
|
24
|
+
import { NotionEditor } from '@omnics/notion-editor';
|
|
25
|
+
|
|
26
|
+
function App() {
|
|
27
|
+
const [content, setContent] = useState('');
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<NotionEditor
|
|
31
|
+
content={content}
|
|
32
|
+
onChange={(html) => setContent(html)}
|
|
33
|
+
onBlur={(html) => console.log('Saved:', html)}
|
|
34
|
+
autoFocus
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
\`\`\`
|
|
39
|
+
|
|
40
|
+
## Props
|
|
41
|
+
|
|
42
|
+
| Prop | Type | Default | Description |
|
|
43
|
+
| ------------------- | ------------------------ | ------------------------------ | ------------------------------ |
|
|
44
|
+
| `content` | `string` | `""` | Initial HTML content |
|
|
45
|
+
| `onChange` | `(html: string) => void` | - | Called on every content change |
|
|
46
|
+
| `onBlur` | `(html: string) => void` | - | Called when editor loses focus |
|
|
47
|
+
| `autoFocus` | `boolean` | `false` | Auto-focus on mount |
|
|
48
|
+
| `disabled` | `boolean` | `false` | Disable editing |
|
|
49
|
+
| `className` | `string` | `""` | Custom wrapper class |
|
|
50
|
+
| `editorClassName` | `string` | `""` | Custom editor class |
|
|
51
|
+
| `placeholder` | `string` | `"Write, Type / for commands"` | Placeholder text |
|
|
52
|
+
| `showToolbar` | `boolean` | `true` | Show selection toolbar |
|
|
53
|
+
| `showTableControls` | `boolean` | `true` | Show table row/column controls |
|
|
54
|
+
|
|
55
|
+
## Styling
|
|
56
|
+
|
|
57
|
+
This package uses Tailwind CSS. Make sure your Tailwind config includes:
|
|
58
|
+
|
|
59
|
+
\`\`\`js
|
|
60
|
+
// tailwind.config.js
|
|
61
|
+
module.exports = {
|
|
62
|
+
content: [
|
|
63
|
+
'./node_modules/@yourorg/notion-editor/dist/**/*.{js,jsx}',
|
|
64
|
+
// ... your other paths
|
|
65
|
+
],
|
|
66
|
+
// ... rest of config
|
|
67
|
+
}
|
|
68
|
+
\`\`\`
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
|
73
|
+
\`\`\`
|
|
74
|
+
|
|
75
|
+
## 🎯 Key Improvements Made
|
|
76
|
+
|
|
77
|
+
1. **Exported TypeScript types** - Users get full IntelliSense
|
|
78
|
+
2. **Added customization props** - className, editorClassName, showToolbar, etc.
|
|
79
|
+
3. **Removed commented code** - Cleaner codebase
|
|
80
|
+
4. **Proper peer dependencies** - React is a peer dependency
|
|
81
|
+
5. **Build configuration** - Using tsup for modern bundling
|
|
82
|
+
6. **Export sub-components** - Advanced users can import individual pieces
|
|
83
|
+
7. **Removed dark mode assumption** - Let users handle theming
|
|
84
|
+
|
|
85
|
+
## ⚠️ Additional Considerations
|
|
86
|
+
|
|
87
|
+
### 1. CSS Strategy
|
|
88
|
+
|
|
89
|
+
You need to decide how to handle styles:
|
|
90
|
+
|
|
91
|
+
- **Option A:** Bundle Tailwind (increases package size)
|
|
92
|
+
- **Option B:** Require users to have Tailwind (current approach)
|
|
93
|
+
- **Option C:** Provide vanilla CSS alternative
|
|
94
|
+
|
|
95
|
+
### 2. Missing Components
|
|
96
|
+
|
|
97
|
+
You need to create/fix these files:
|
|
98
|
+
|
|
99
|
+
- `SlashExtension.ts`
|
|
100
|
+
- `SelectionToolbar.tsx`
|
|
101
|
+
- `RowAddButton.tsx`
|
|
102
|
+
- `ColumnAddButton.tsx`
|
|
103
|
+
- `useRowHover.ts`
|
|
104
|
+
- `useColumnHover.ts`
|
|
105
|
+
|
|
106
|
+
### 3. Testing
|
|
107
|
+
|
|
108
|
+
Add tests before publishing:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npm install --save-dev @testing-library/react @testing-library/jest-dom vitest
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### 4. Publishing Checklist
|
|
115
|
+
|
|
116
|
+
- [ ] All TypeScript errors resolved
|
|
117
|
+
- [ ] Build succeeds (`npm run build`)
|
|
118
|
+
- [ ] README is complete
|
|
119
|
+
- [ ] LICENSE file added
|
|
120
|
+
- [ ] Version number set correctly
|
|
121
|
+
- [ ] Test in a separate project before publishing
|
|
122
|
+
- [ ] Set up npm account and organization
|
|
123
|
+
|
|
124
|
+
## 🚀 Publishing Steps
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
# Build the package
|
|
128
|
+
npm run build
|
|
129
|
+
|
|
130
|
+
# Test locally first
|
|
131
|
+
npm link
|
|
132
|
+
cd /path/to/test-project
|
|
133
|
+
npm link @yourorg/notion-editor
|
|
134
|
+
|
|
135
|
+
# When ready to publish
|
|
136
|
+
npm login
|
|
137
|
+
npm publish --access public
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Your code is definitely usable as a package foundation, but needs these structural improvements to be production-ready!
|