pagemaster-editor 0.3.5 → 0.3.6
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 +26 -14
- package/dist/{html2canvas-DlG3m2SO.js → html2canvas-DclbxxWD.js} +1 -1
- package/dist/{index-BEovP1jN.js → index-B3VYvTi2.js} +2707 -2705
- package/dist/{index.es-BbHiw86e.js → index.es-CAlgpoA0.js} +1 -1
- package/dist/pagemaster-editor.js +1 -1
- package/dist/pagemaster-editor.umd.cjs +121 -121
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pagemaster Editor
|
|
2
2
|
|
|
3
3
|
A powerful, DOCX-style rich text editor and PDF viewer for React applications. Built with Tiptap, React PDF, and modern styling libraries.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/pagemaster-editor)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
8
|
## Features
|
|
@@ -54,7 +54,7 @@ A powerful, DOCX-style rich text editor and PDF viewer for React applications. B
|
|
|
54
54
|
## Installation
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
|
-
npm install
|
|
57
|
+
npm install pagemaster-editor
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
## Usage
|
|
@@ -64,14 +64,16 @@ npm install aditily
|
|
|
64
64
|
Import the component and its baseline styles. Ensure the parent container has a height.
|
|
65
65
|
|
|
66
66
|
```tsx
|
|
67
|
-
import { DocumentEditor } from '
|
|
68
|
-
import '
|
|
67
|
+
import { DocumentEditor } from 'pagemaster-editor';
|
|
68
|
+
import 'pagemaster-editor/dist/style.css';
|
|
69
69
|
|
|
70
70
|
function App() {
|
|
71
|
+
const llmResponse = "# Welcome to Pagemaster Editor\n\nThis content is generated from **Markdown**!";
|
|
72
|
+
|
|
71
73
|
return (
|
|
72
74
|
<div style={{ height: '100vh', width: '100vw' }}>
|
|
73
75
|
<DocumentEditor
|
|
74
|
-
initialContent=
|
|
76
|
+
initialContent={llmResponse}
|
|
75
77
|
onChange={(html) => console.log('Content updated:', html)}
|
|
76
78
|
/>
|
|
77
79
|
</div>
|
|
@@ -79,18 +81,28 @@ function App() {
|
|
|
79
81
|
}
|
|
80
82
|
```
|
|
81
83
|
|
|
84
|
+
### Using Markdown Content
|
|
85
|
+
|
|
86
|
+
The editor automatically detects if `initialContent` is Markdown and converts it to rich HTML. This is perfect for displaying content from LLMs (AI) or CMS APIs.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<DocumentEditor
|
|
90
|
+
initialContent="## Generated Report\n\n- Point 1\n- Point 2"
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
82
94
|
### Next.js Integration (SSR)
|
|
83
95
|
|
|
84
|
-
Since
|
|
96
|
+
Since Pagemaster Editor uses browser-specific APIs (Canvas, DOM), it must be imported dynamically.
|
|
85
97
|
|
|
86
98
|
```tsx
|
|
87
99
|
"use client";
|
|
88
100
|
|
|
89
101
|
import dynamic from 'next/dynamic';
|
|
90
|
-
import '
|
|
102
|
+
import 'pagemaster-editor/dist/style.css';
|
|
91
103
|
|
|
92
104
|
const DocumentEditor = dynamic(
|
|
93
|
-
() => import('
|
|
105
|
+
() => import('pagemaster-editor').then((mod) => mod.DocumentEditor),
|
|
94
106
|
{
|
|
95
107
|
ssr: false,
|
|
96
108
|
loading: () => <div>Loading Editor...</div>
|
|
@@ -104,14 +116,14 @@ export default function Page() {
|
|
|
104
116
|
|
|
105
117
|
### Tailwind CSS Configuration
|
|
106
118
|
|
|
107
|
-
|
|
119
|
+
Pagemaster Editor uses Tailwind for styling. To ensure all library styles are properly purged/generated in your project:
|
|
108
120
|
|
|
109
121
|
#### Tailwind v3 (tailwind.config.js)
|
|
110
122
|
```javascript
|
|
111
123
|
module.exports = {
|
|
112
124
|
content: [
|
|
113
125
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
114
|
-
"./node_modules/
|
|
126
|
+
"./node_modules/pagemaster-editor/dist/**/*.{js,ts,jsx,tsx}",
|
|
115
127
|
],
|
|
116
128
|
theme: {
|
|
117
129
|
extend: {},
|
|
@@ -123,10 +135,10 @@ module.exports = {
|
|
|
123
135
|
#### Tailwind v4 (globals.css)
|
|
124
136
|
```css
|
|
125
137
|
@import "tailwindcss";
|
|
126
|
-
@import "
|
|
138
|
+
@import "pagemaster-editor/style";
|
|
127
139
|
|
|
128
140
|
/* Ensure Tailwind scans the library for utility classes */
|
|
129
|
-
@source "../../node_modules/
|
|
141
|
+
@source "../../node_modules/pagemaster-editor/dist/**/*.{js,ts,jsx,tsx}";
|
|
130
142
|
```
|
|
131
143
|
|
|
132
144
|
## Props
|
|
@@ -135,7 +147,7 @@ The `DocumentEditor` component accepts the following props:
|
|
|
135
147
|
|
|
136
148
|
| Prop | Type | Default | Description |
|
|
137
149
|
|------|------|---------|-------------|
|
|
138
|
-
| `initialContent` | `string` | `""` | Initial HTML string to load into the editor. |
|
|
150
|
+
| `initialContent` | `string` | `""` | Initial HTML string or **Markdown** to load into the editor. |
|
|
139
151
|
| `className` | `string` | `""` | Additional CSS classes for the outer container. |
|
|
140
152
|
| `onChange` | `(html: string) => void` | `undefined` | Callback function triggered on every content change. |
|
|
141
153
|
| `readOnly` | `boolean` | `false` | If true, the editor is disabled and toolbars are hidden. |
|