pagemaster-editor 0.2.0 → 0.3.0
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 +50 -12
- package/dist/{html2canvas-BcdjAaMa.js → html2canvas-C14FkWKb.js} +1 -1
- package/dist/{index-Db7fhGrG.js → index-u7lSscc-.js} +8981 -8980
- package/dist/index.d.ts +3 -0
- package/dist/{index.es-z3XdDhzI.js → index.es-4m-VFHDs.js} +1 -1
- package/dist/pagemaster-editor.js +1 -1
- package/dist/pagemaster-editor.umd.cjs +263 -263
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -56,7 +56,7 @@ npm install pagemaster-editor
|
|
|
56
56
|
|
|
57
57
|
## Usage
|
|
58
58
|
|
|
59
|
-
###
|
|
59
|
+
### Basic Usage
|
|
60
60
|
|
|
61
61
|
```tsx
|
|
62
62
|
import { DocumentEditor } from 'pagemaster-editor';
|
|
@@ -65,32 +65,70 @@ import 'pagemaster-editor/dist/style.css';
|
|
|
65
65
|
function App() {
|
|
66
66
|
return (
|
|
67
67
|
<div style={{ height: '100vh' }}>
|
|
68
|
-
<DocumentEditor
|
|
68
|
+
<DocumentEditor
|
|
69
|
+
initialContent="<h1>Hello World</h1>"
|
|
70
|
+
onChange={(html) => console.log(html)}
|
|
71
|
+
/>
|
|
69
72
|
</div>
|
|
70
73
|
);
|
|
71
74
|
}
|
|
72
75
|
```
|
|
73
76
|
|
|
74
|
-
###
|
|
77
|
+
### Next.js Integration (SSR)
|
|
78
|
+
|
|
79
|
+
Since PageMaster Editor uses browser-only APIs (like Canvas and DOM), you should import it dynamically when using Next.js to avoid hydration mismatches.
|
|
75
80
|
|
|
76
81
|
```tsx
|
|
77
|
-
import
|
|
82
|
+
import dynamic from 'next/dynamic';
|
|
78
83
|
import 'pagemaster-editor/dist/style.css';
|
|
79
84
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
const DocumentEditor = dynamic(
|
|
86
|
+
() => import('pagemaster-editor').then((mod) => mod.DocumentEditor),
|
|
87
|
+
{ ssr: false }
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
export default function Page() {
|
|
91
|
+
return <DocumentEditor />;
|
|
86
92
|
}
|
|
87
93
|
```
|
|
88
94
|
|
|
95
|
+
### Tailwind CSS Setup
|
|
96
|
+
|
|
97
|
+
If your project uses Tailwind CSS, ensure you include the library components in your content path so the styles are generated:
|
|
98
|
+
|
|
99
|
+
#### Tailwind v3 (tailwind.config.js)
|
|
100
|
+
```javascript
|
|
101
|
+
module.exports = {
|
|
102
|
+
content: [
|
|
103
|
+
// ... your project paths
|
|
104
|
+
"./node_modules/pagemaster-editor/dist/**/*.{js,ts,jsx,tsx}",
|
|
105
|
+
],
|
|
106
|
+
// ...
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### Tailwind v4 (globals.css)
|
|
111
|
+
```css
|
|
112
|
+
@import "tailwindcss";
|
|
113
|
+
@source "../../node_modules/pagemaster-editor/src/**/*.{ts,tsx}"; /* or dist if published */
|
|
114
|
+
@import "pagemaster-editor/style";
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Props
|
|
118
|
+
|
|
119
|
+
| Prop | Type | Default | Description |
|
|
120
|
+
|------|------|---------|-------------|
|
|
121
|
+
| `initialContent` | `string` | `""` | Initial HTML content of the editor |
|
|
122
|
+
| `className` | `string` | `""` | Additional CSS classes for the container |
|
|
123
|
+
| `onChange` | `(html: string) => void` | `undefined` | Callback called when content changes |
|
|
124
|
+
| `readOnly` | `boolean` | `false` | Disable editing and hide toolbars |
|
|
125
|
+
| `placeholder` | `string` | `"Enter your content here..."` | Placeholder text when empty |
|
|
126
|
+
|
|
89
127
|
## Peer Dependencies
|
|
90
128
|
|
|
91
129
|
Ensure you have the following installed in your project:
|
|
92
|
-
- `react`
|
|
93
|
-
- `react-dom`
|
|
130
|
+
- `react` (>= 18)
|
|
131
|
+
- `react-dom` (>= 18)
|
|
94
132
|
|
|
95
133
|
## License
|
|
96
134
|
|