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 CHANGED
@@ -1,8 +1,8 @@
1
- # Aditily
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
- [![NPM Version](https://img.shields.io/npm/v/aditily.svg)](https://www.npmjs.com/package/aditily)
5
+ [![NPM Version](https://img.shields.io/npm/v/pagemaster-editor.svg)](https://www.npmjs.com/package/pagemaster-editor)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](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 aditily
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 'aditily';
68
- import 'aditily/dist/style.css';
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="<h1>Welcome to Aditily</h1>"
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 Aditily uses browser-specific APIs (Canvas, DOM), it must be imported dynamically.
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 'aditily/dist/style.css';
102
+ import 'pagemaster-editor/dist/style.css';
91
103
 
92
104
  const DocumentEditor = dynamic(
93
- () => import('aditily').then((mod) => mod.DocumentEditor),
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
- Aditily uses Tailwind for styling. To ensure all library styles are properly purged/generated in your project:
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/aditily/dist/**/*.{js,ts,jsx,tsx}",
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 "aditily/style";
138
+ @import "pagemaster-editor/style";
127
139
 
128
140
  /* Ensure Tailwind scans the library for utility classes */
129
- @source "../../node_modules/aditily/dist/**/*.{js,ts,jsx,tsx}";
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. |
@@ -1,4 +1,4 @@
1
- import { g as c, r as f } from "./index-BEovP1jN.js";
1
+ import { g as c, r as f } from "./index-B3VYvTi2.js";
2
2
  function l(r, n) {
3
3
  for (var o = 0; o < n.length; o++) {
4
4
  const e = n[o];