@qarakash/blockwriteai 1.0.9 → 1.0.11
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 +176 -601
- package/dist/blockwriteai.min.css +1 -0
- package/dist/blockwriteai.min.js +1 -0
- package/dist/plugins/blockwriteai-advanced-blocks.min.js +1 -0
- package/dist/plugins/blockwriteai-ai.min.js +1 -0
- package/dist/plugins/blockwriteai-code-assist.min.js +1 -0
- package/dist/plugins/blockwriteai-drawing.min.js +1 -0
- package/dist/plugins/blockwriteai-history.min.js +1 -0
- package/dist/plugins/blockwriteai-mermaid.min.js +1 -0
- package/dist/plugins/blockwriteai-signature-flow.min.js +1 -0
- package/dist/plugins/blockwriteai-signature.min.js +1 -0
- package/package.json +26 -18
- package/types/index.d.ts +7 -1
- package/dist/blockwriteai.css +0 -3762
- package/dist/blockwriteai.js +0 -6771
- package/dist/plugins/blockwriteai-advanced-blocks.js +0 -2282
- package/dist/plugins/blockwriteai-ai.js +0 -671
- package/dist/plugins/blockwriteai-code-assist.js +0 -609
- package/dist/plugins/blockwriteai-drawing.js +0 -178
- package/dist/plugins/blockwriteai-history.js +0 -23
- package/dist/plugins/blockwriteai-mermaid.js +0 -1986
- package/dist/plugins/blockwriteai-signature-flow.js +0 -493
- package/dist/plugins/blockwriteai-signature.js +0 -463
package/README.md
CHANGED
|
@@ -1,678 +1,253 @@
|
|
|
1
|
-
# BlockWriteAI
|
|
2
|
-
|
|
3
|
-
BlockWriteAI is a
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- Editor.js-style block JSON output.
|
|
12
|
-
- Plain script tag integration with no build step required.
|
|
13
|
-
- Paragraphs, headings, quotes, callouts, dividers, buttons, toggle blocks, raw HTML, links, embeds, tables, lists, and nested checklists.
|
|
14
|
-
- Floating inline toolbar with typography, colors, highlight, alignment, comments, links, and formatting controls.
|
|
15
|
-
- Multi-image upload, drag and drop, resize, crop, rotate, and gallery layout.
|
|
16
|
-
- Attachment blocks for documents and videos.
|
|
17
|
-
- Code block with formatting, syntax help, language detection, and suggestions.
|
|
18
|
-
- Charts, LaTeX, audio, layout columns, code assistance, and optional history plugins in the free plugin set.
|
|
19
|
-
- Premium plugins for Drawing, Mermaid, Signature, Signature Flow, and AI writing, delivered after server-side license verification.
|
|
20
|
-
- Undo, redo, autosave, block actions, drag reordering, and optional JSON save/export buttons.
|
|
21
|
-
- JSON-powered preview mounting for public document pages.
|
|
22
|
-
- JSON save API examples for future database storage.
|
|
23
|
-
|
|
24
|
-
## Project Structure
|
|
25
|
-
|
|
26
|
-
```text
|
|
27
|
-
BlockWriteAI/
|
|
28
|
-
package.json
|
|
29
|
-
composer.json
|
|
30
|
-
pyproject.toml
|
|
31
|
-
dist/
|
|
32
|
-
blockwriteai.css
|
|
33
|
-
blockwriteai.js
|
|
34
|
-
blockwriteai-logo.svg
|
|
35
|
-
blockwriteai-favicon.svg
|
|
36
|
-
plugins/
|
|
37
|
-
blockwriteai-advanced-blocks.js
|
|
38
|
-
blockwriteai-drawing.js
|
|
39
|
-
blockwriteai-mermaid.js
|
|
40
|
-
blockwriteai-ai.js
|
|
41
|
-
blockwriteai-code-assist.js
|
|
42
|
-
blockwriteai-history.js
|
|
43
|
-
blockwriteai-signature.js
|
|
44
|
-
blockwriteai-signature-flow.js
|
|
45
|
-
examples/
|
|
46
|
-
index.html
|
|
47
|
-
preview.html
|
|
48
|
-
upload.php
|
|
49
|
-
api/
|
|
50
|
-
document.php
|
|
51
|
-
preview.php
|
|
52
|
-
uploads/
|
|
53
|
-
.gitkeep
|
|
54
|
-
blockwriteai_editor/
|
|
55
|
-
static/blockwriteai/
|
|
56
|
-
src/
|
|
57
|
-
BlockWriteAIAssets.php
|
|
58
|
-
types/
|
|
59
|
-
index.d.ts
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Installation
|
|
63
|
-
|
|
64
|
-
BlockWriteAI can be consumed as a CDN/script-link package, an npm package, a Python static-assets package, or a Composer package.
|
|
65
|
-
|
|
66
|
-
### Script Link
|
|
67
|
-
|
|
68
|
-
Use the npm CDN for a locked release build:
|
|
1
|
+
# BlockWriteAI
|
|
2
|
+
|
|
3
|
+
BlockWriteAI is a JSON-first block editor for web apps. It works with a script tag, npm, PHP/Composer, and Python static-file workflows.
|
|
4
|
+
|
|
5
|
+
Use the free core editor for normal documents. Serve premium tools such as AI, Mermaid, Drawing, Signature, and Signature Flow only through your licensed server endpoint.
|
|
6
|
+
|
|
7
|
+
## Quick Start With CDN
|
|
8
|
+
|
|
9
|
+
Add the stylesheet, editor script, and free plugin bundle:
|
|
69
10
|
|
|
70
11
|
```html
|
|
71
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.
|
|
12
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/blockwriteai.min.css">
|
|
72
13
|
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.
|
|
14
|
+
<div id="editor"></div>
|
|
15
|
+
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/blockwriteai.min.js"></script>
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/plugins/blockwriteai-code-assist.min.js"></script>
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/plugins/blockwriteai-advanced-blocks.min.js"></script>
|
|
19
|
+
<script>
|
|
20
|
+
const editor = new BlockWriteAI({
|
|
21
|
+
holder: "#editor",
|
|
22
|
+
placeholder: "Write something, or press / for blocks",
|
|
23
|
+
async onSave(data) {
|
|
24
|
+
await fetch("/api/documents", {
|
|
25
|
+
method: "POST",
|
|
26
|
+
headers: { "Content-Type": "application/json" },
|
|
27
|
+
body: JSON.stringify(data)
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
76
32
|
```
|
|
77
33
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
34
|
+
Use these CDN URLs for production:
|
|
35
|
+
|
|
36
|
+
```text
|
|
37
|
+
https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/blockwriteai.min.css
|
|
38
|
+
https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/blockwriteai.min.js
|
|
39
|
+
https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/plugins/blockwriteai-code-assist.min.js
|
|
40
|
+
https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/plugins/blockwriteai-advanced-blocks.min.js
|
|
41
|
+
```
|
|
81
42
|
|
|
82
|
-
|
|
43
|
+
Optional history plugin:
|
|
83
44
|
|
|
84
45
|
```html
|
|
85
|
-
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.11/dist/plugins/blockwriteai-history.min.js"></script>
|
|
86
47
|
```
|
|
87
48
|
|
|
88
|
-
|
|
89
|
-
GitHub CDN form:
|
|
49
|
+
Premium CDN integrations should load licensed plugins and verify usage through the production BlockWriteAI Platform:
|
|
90
50
|
|
|
91
|
-
```
|
|
92
|
-
|
|
51
|
+
```js
|
|
52
|
+
await BlockWriteAI.loadPremiumPlugins({
|
|
53
|
+
licenseKey: "bwai_live_xxxxx",
|
|
54
|
+
endpoint: BlockWriteAI.platformEndpoints.premiumPlugins,
|
|
55
|
+
features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
|
|
56
|
+
});
|
|
93
57
|
```
|
|
94
58
|
|
|
95
|
-
|
|
59
|
+
## Install With Node
|
|
96
60
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
active trial or subscription. Without a valid license, those tools are not
|
|
101
|
-
registered and do not appear in the insert-block menu.
|
|
61
|
+
```bash
|
|
62
|
+
npm install @qarakash/blockwriteai
|
|
63
|
+
```
|
|
102
64
|
|
|
103
65
|
```js
|
|
66
|
+
import BlockWriteAI from "@qarakash/blockwriteai";
|
|
67
|
+
import "@qarakash/blockwriteai/css";
|
|
68
|
+
import "@qarakash/blockwriteai/plugins/code-assist/min";
|
|
69
|
+
import "@qarakash/blockwriteai/plugins/advanced/min";
|
|
70
|
+
|
|
104
71
|
const editor = new BlockWriteAI({
|
|
105
72
|
holder: "#editor",
|
|
106
73
|
premium: {
|
|
107
74
|
licenseKey: "bwai_live_xxxxx",
|
|
108
|
-
verifyEndpoint:
|
|
109
|
-
|
|
110
|
-
usageEndpoint: "http://localhost/blockwriteai-platform/api/ai_usage.php",
|
|
111
|
-
autoLoadPlugins: true,
|
|
112
|
-
features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
|
|
75
|
+
verifyEndpoint: BlockWriteAI.platformEndpoints.licenseVerify,
|
|
76
|
+
usageEndpoint: BlockWriteAI.platformEndpoints.aiUsage
|
|
113
77
|
},
|
|
114
|
-
|
|
115
|
-
|
|
78
|
+
async onSave(data) {
|
|
79
|
+
await fetch("/api/documents", {
|
|
80
|
+
method: "POST",
|
|
81
|
+
headers: { "Content-Type": "application/json" },
|
|
82
|
+
body: JSON.stringify(data)
|
|
83
|
+
});
|
|
116
84
|
}
|
|
117
85
|
});
|
|
118
86
|
```
|
|
119
87
|
|
|
120
|
-
|
|
88
|
+
## Install With PHP
|
|
121
89
|
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
"drawing": true,
|
|
125
|
-
"mermaid": true,
|
|
126
|
-
"signature": true,
|
|
127
|
-
"signature_flow": true,
|
|
128
|
-
"ai": true
|
|
129
|
-
}
|
|
90
|
+
```bash
|
|
91
|
+
composer require qarakash/blockwriteai
|
|
130
92
|
```
|
|
131
93
|
|
|
132
|
-
|
|
133
|
-
|
|
94
|
+
Publish the package `dist` assets into a public asset directory in your app, then print the tags:
|
|
95
|
+
|
|
96
|
+
```php
|
|
97
|
+
<?php
|
|
98
|
+
|
|
99
|
+
use QarAkash\BlockWriteAI\BlockWriteAIAssets;
|
|
134
100
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
101
|
+
echo BlockWriteAIAssets::stylesheetTag('/assets/blockwriteai');
|
|
102
|
+
echo BlockWriteAIAssets::scriptTags('/assets/blockwriteai');
|
|
103
|
+
|
|
104
|
+
$platform = BlockWriteAIAssets::platformEndpoints();
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Create the editor:
|
|
140
108
|
|
|
141
109
|
```html
|
|
142
|
-
<
|
|
143
|
-
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/blockwriteai.js"></script>
|
|
144
|
-
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-code-assist.js"></script>
|
|
145
|
-
<script src="https://cdn.jsdelivr.net/npm/@qarakash/blockwriteai@1.0.9/dist/plugins/blockwriteai-advanced-blocks.js"></script>
|
|
110
|
+
<div id="editor"></div>
|
|
146
111
|
<script>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
licenseKey: "bwai_live_xxxxx",
|
|
158
|
-
verifyEndpoint: "http://localhost/blockwriteai-platform/api/license_verify.php",
|
|
159
|
-
usageEndpoint: "http://localhost/blockwriteai-platform/api/ai_usage.php"
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
boot();
|
|
112
|
+
const editor = new BlockWriteAI({
|
|
113
|
+
holder: "#editor",
|
|
114
|
+
async onSave(data) {
|
|
115
|
+
await fetch("/api/documents/save.php", {
|
|
116
|
+
method: "POST",
|
|
117
|
+
headers: { "Content-Type": "application/json" },
|
|
118
|
+
body: JSON.stringify(data)
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
});
|
|
164
122
|
</script>
|
|
165
123
|
```
|
|
166
124
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
### npm
|
|
172
|
-
|
|
173
|
-
Package name:
|
|
174
|
-
|
|
175
|
-
```text
|
|
176
|
-
@qarakash/blockwriteai
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
Install:
|
|
180
|
-
|
|
181
|
-
```bash
|
|
182
|
-
npm install @qarakash/blockwriteai
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
Bundler entry points:
|
|
186
|
-
|
|
187
|
-
```js
|
|
188
|
-
import BlockWriteAI from "@qarakash/blockwriteai";
|
|
189
|
-
import "@qarakash/blockwriteai/css";
|
|
190
|
-
import "@qarakash/blockwriteai/plugins/code-assist";
|
|
191
|
-
import "@qarakash/blockwriteai/plugins/advanced";
|
|
192
|
-
import "@qarakash/blockwriteai/plugins/history";
|
|
125
|
+
## Install With Python
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
pip install blockwriteai-editor
|
|
193
129
|
```
|
|
194
130
|
|
|
195
|
-
|
|
131
|
+
Copy the packaged assets into your app static directory:
|
|
196
132
|
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
|
|
133
|
+
```python
|
|
134
|
+
from blockwriteai_editor import copy_static
|
|
135
|
+
|
|
136
|
+
copy_static("static/blockwriteai")
|
|
200
137
|
```
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
Package name:
|
|
205
|
-
|
|
206
|
-
```text
|
|
207
|
-
blockwriteai-editor
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
Install:
|
|
211
|
-
|
|
212
|
-
```bash
|
|
213
|
-
pip install blockwriteai-editor
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
Copy packaged static files into your Flask, Django, or any Python web app static directory:
|
|
217
|
-
|
|
218
|
-
```python
|
|
219
|
-
from blockwriteai_editor import copy_static
|
|
220
|
-
|
|
221
|
-
copy_static("static/blockwriteai")
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
Python helpers are also available for generating asset tags. `script_tags()` loads
|
|
225
|
-
only core/free plugins by default. Pass `history=True` only on pages where you want
|
|
226
|
-
the optional History dropdown:
|
|
138
|
+
|
|
139
|
+
Generate tags in Flask, Django, or any Python web app:
|
|
227
140
|
|
|
228
141
|
```python
|
|
229
|
-
from blockwriteai_editor import
|
|
142
|
+
from blockwriteai_editor import platform_endpoints, stylesheet_tag, script_tags
|
|
230
143
|
|
|
231
144
|
print(stylesheet_tag("/static/blockwriteai"))
|
|
232
145
|
print(script_tags("/static/blockwriteai"))
|
|
233
|
-
print(script_tags("/static/blockwriteai", history=True))
|
|
234
146
|
|
|
235
|
-
|
|
236
|
-
# premium bundle endpoint shown in the Premium License Gating section.
|
|
237
|
-
print(premium_script_tags("/static/blockwriteai", ["signature", "ai"]))
|
|
147
|
+
platform = platform_endpoints()
|
|
238
148
|
```
|
|
239
|
-
|
|
240
|
-
### PHP / Composer
|
|
241
|
-
|
|
242
|
-
Package name:
|
|
243
|
-
|
|
244
|
-
```text
|
|
245
|
-
qarakash/blockwriteai
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
Install:
|
|
249
|
-
|
|
250
|
-
```bash
|
|
251
|
-
composer require qarakash/blockwriteai
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
Publish assets into your public folder:
|
|
255
|
-
|
|
256
|
-
```bash
|
|
257
|
-
cp -R vendor/qarakash/blockwriteai/dist public/blockwriteai
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
PHP helper. `scriptTags()` loads only core/free plugins by default. Pass
|
|
261
|
-
`history: true` only on pages where you want the optional History dropdown:
|
|
262
|
-
|
|
263
|
-
```php
|
|
264
|
-
use QarAkash\BlockWriteAI\BlockWriteAIAssets;
|
|
265
149
|
|
|
266
|
-
|
|
267
|
-
echo BlockWriteAIAssets::scriptTags('/blockwriteai');
|
|
268
|
-
echo BlockWriteAIAssets::scriptTags('/blockwriteai', plugins: true, history: true);
|
|
150
|
+
Then mount the editor in your template:
|
|
269
151
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
152
|
+
```html
|
|
153
|
+
<div id="editor"></div>
|
|
154
|
+
<script>
|
|
155
|
+
const editor = new BlockWriteAI({
|
|
156
|
+
holder: "#editor",
|
|
157
|
+
async onSave(data) {
|
|
158
|
+
await fetch("/api/documents", {
|
|
159
|
+
method: "POST",
|
|
160
|
+
headers: { "Content-Type": "application/json" },
|
|
161
|
+
body: JSON.stringify(data)
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
</script>
|
|
273
166
|
```
|
|
274
|
-
|
|
275
|
-
## Local XAMPP Demo
|
|
276
|
-
|
|
277
|
-
Copy the `BlockWriteAI` folder into your web root, for example:
|
|
278
|
-
|
|
279
|
-
```text
|
|
280
|
-
C:\xampp\htdocs\BlockWriteAI
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
Open:
|
|
284
|
-
|
|
285
|
-
```text
|
|
286
|
-
http://localhost/BlockWriteAI/examples/
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
## Browser Usage
|
|
290
|
-
|
|
291
|
-
```html
|
|
292
|
-
<link rel="stylesheet" href="/BlockWriteAI/dist/blockwriteai.css">
|
|
293
|
-
|
|
294
|
-
<div id="editor"></div>
|
|
295
|
-
|
|
296
|
-
<script src="/BlockWriteAI/dist/blockwriteai.js"></script>
|
|
297
|
-
<script src="/BlockWriteAI/dist/plugins/blockwriteai-code-assist.js"></script>
|
|
298
|
-
<script src="/BlockWriteAI/dist/plugins/blockwriteai-advanced-blocks.js"></script>
|
|
299
167
|
|
|
168
|
+
## Read Saved Documents
|
|
169
|
+
|
|
170
|
+
BlockWriteAI saves JSON. Store that JSON in your database, then render it later with a preview container:
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<link rel="stylesheet" href="/assets/blockwriteai/blockwriteai.min.css">
|
|
174
|
+
|
|
175
|
+
<div class="blockwriteai-preview" data-source="/api/documents/123.json"></div>
|
|
176
|
+
|
|
177
|
+
<script src="/assets/blockwriteai/blockwriteai.min.js"></script>
|
|
178
|
+
<script src="/assets/blockwriteai/plugins/blockwriteai-advanced-blocks.min.js"></script>
|
|
300
179
|
<script>
|
|
301
|
-
|
|
302
|
-
holder: "#editor",
|
|
303
|
-
maxWidth: "960px", // optional; omit for full-width editor shell
|
|
304
|
-
placeholder: "Write something, or press / for blocks",
|
|
305
|
-
data: {
|
|
306
|
-
blocks: [
|
|
307
|
-
{
|
|
308
|
-
type: "paragraph",
|
|
309
|
-
data: {
|
|
310
|
-
text: "Hello from BlockWriteAI",
|
|
311
|
-
alignment: "left"
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
]
|
|
315
|
-
},
|
|
316
|
-
onChange(data) {
|
|
317
|
-
console.log("Changed document", data);
|
|
318
|
-
},
|
|
319
|
-
async onSave(data) {
|
|
320
|
-
await fetch("/save-document.php", {
|
|
321
|
-
method: "POST",
|
|
322
|
-
headers: {
|
|
323
|
-
"Content-Type": "application/json"
|
|
324
|
-
},
|
|
325
|
-
body: JSON.stringify(data)
|
|
326
|
-
});
|
|
327
|
-
}
|
|
328
|
-
});
|
|
180
|
+
BlockWriteAI.mountPreviews();
|
|
329
181
|
</script>
|
|
330
182
|
```
|
|
331
183
|
|
|
332
|
-
|
|
333
|
-
`Editor` heading, centered AI progress, and the right-aligned JSON sync status. If no
|
|
334
|
-
`data` is provided, the editor starts with one empty paragraph block automatically. Use
|
|
335
|
-
`shell: false` when you only want the raw editor surface, or pass `maxWidth: "960px"` /
|
|
336
|
-
`shell: { maxWidth: "960px" }` to constrain the editor width in your project.
|
|
337
|
-
|
|
338
|
-
Built-in toolbar buttons are intentionally opt-in for package consumers. `saveButton`, `exportButton`, and `exportHtmlButton` default to `false`, so applications can use their own UI and call `editor.save()` when needed.
|
|
339
|
-
|
|
340
|
-
## Saving JSON
|
|
341
|
-
|
|
342
|
-
BlockWriteAI is designed to save JSON first. In production, store the JSON in your database and render it later in read-only mode or through exported HTML.
|
|
343
|
-
|
|
344
|
-
```js
|
|
345
|
-
document.querySelector("#save").addEventListener("click", async () => {
|
|
346
|
-
const data = await editor.save();
|
|
347
|
-
|
|
348
|
-
await fetch("/save-document.php", {
|
|
349
|
-
method: "POST",
|
|
350
|
-
headers: {
|
|
351
|
-
"Content-Type": "application/json"
|
|
352
|
-
},
|
|
353
|
-
body: JSON.stringify(data)
|
|
354
|
-
});
|
|
355
|
-
});
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
The default toolbar includes a Save button. Use `onSave` to receive the JSON response when the user clicks it:
|
|
359
|
-
|
|
360
|
-
```js
|
|
361
|
-
const editor = new BlockWriteAI({
|
|
362
|
-
holder: "#editor",
|
|
363
|
-
async onSave(data) {
|
|
364
|
-
await fetch("/documents/123", {
|
|
365
|
-
method: "POST",
|
|
366
|
-
headers: {
|
|
367
|
-
"Content-Type": "application/json"
|
|
368
|
-
},
|
|
369
|
-
body: JSON.stringify(data)
|
|
370
|
-
});
|
|
371
|
-
}
|
|
372
|
-
});
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
## AI Plugin
|
|
376
|
-
|
|
377
|
-
AI is a premium plugin. Load it through the platform premium bundle after license
|
|
378
|
-
verification. The browser plugin never receives your OpenAI API key; it calls
|
|
379
|
-
your own server endpoint.
|
|
184
|
+
The JSON endpoint can return a document directly:
|
|
380
185
|
|
|
381
|
-
```
|
|
382
|
-
|
|
186
|
+
```json
|
|
187
|
+
{
|
|
188
|
+
"time": 1779540000000,
|
|
189
|
+
"version": "1.0.11",
|
|
190
|
+
"blocks": []
|
|
191
|
+
}
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
It can also return a wrapper:
|
|
383
195
|
|
|
196
|
+
```json
|
|
197
|
+
{
|
|
198
|
+
"ok": true,
|
|
199
|
+
"data": {
|
|
200
|
+
"time": 1779540000000,
|
|
201
|
+
"version": "1.0.11",
|
|
202
|
+
"blocks": []
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## Premium Plugins
|
|
208
|
+
|
|
209
|
+
Do not expose premium plugin files as normal public scripts. Load them after your server verifies an active license:
|
|
210
|
+
|
|
211
|
+
```html
|
|
384
212
|
<script>
|
|
385
|
-
async function
|
|
213
|
+
async function bootEditor() {
|
|
386
214
|
await BlockWriteAI.loadPremiumPlugins({
|
|
387
215
|
licenseKey: "bwai_live_xxxxx",
|
|
388
|
-
endpoint: "
|
|
389
|
-
features: ["ai"]
|
|
216
|
+
endpoint: "https://blockwriteai.in/api/premium_plugins.php",
|
|
217
|
+
features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
|
|
390
218
|
});
|
|
391
219
|
|
|
392
220
|
window.editor = new BlockWriteAI({
|
|
393
221
|
holder: "#editor",
|
|
394
222
|
premium: {
|
|
395
223
|
licenseKey: "bwai_live_xxxxx",
|
|
396
|
-
verifyEndpoint: "
|
|
397
|
-
usageEndpoint: "
|
|
224
|
+
verifyEndpoint: "https://blockwriteai.in/api/license_verify.php",
|
|
225
|
+
usageEndpoint: "https://blockwriteai.in/api/ai_usage.php"
|
|
398
226
|
},
|
|
399
227
|
ai: {
|
|
400
|
-
endpoint: "/api/
|
|
228
|
+
endpoint: "https://blockwriteai.in/api/ai_generate.php"
|
|
401
229
|
}
|
|
402
230
|
});
|
|
403
231
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
The included demo endpoint is `examples/api/ai.php`. For local development, copy `examples/api/openai.local.example.php` to `examples/api/openai.local.php` and add a development key, or set `OPENAI_API_KEY` in the server environment. Do not expose the key in browser JavaScript.
|
|
409
|
-
|
|
410
|
-
The drawer can also be opened without selecting text from the centered AI button in the editor toolbar, or programmatically with `editor.openAI()`.
|
|
411
|
-
|
|
412
|
-
Available AI drawer actions:
|
|
413
|
-
|
|
414
|
-
- Improve writing
|
|
415
|
-
- Fix grammar
|
|
416
|
-
- Summarize
|
|
417
|
-
- Expand
|
|
418
|
-
- Make professional
|
|
419
|
-
- Generate BlockWriteAI blocks from a prompt
|
|
420
|
-
|
|
421
|
-
## Preview Pages
|
|
422
|
-
|
|
423
|
-
Create any page in your application and add a preview container. BlockWriteAI will load saved JSON and render the document HTML inside that container.
|
|
424
|
-
|
|
425
|
-
```html
|
|
426
|
-
<link rel="stylesheet" href="/blockwriteai/blockwriteai.css">
|
|
427
|
-
|
|
428
|
-
<div class="blockwriteai-preview" data-source="/documents/123.json"></div>
|
|
429
|
-
|
|
430
|
-
<script src="/blockwriteai/blockwriteai.js"></script>
|
|
431
|
-
<script src="/blockwriteai/plugins/blockwriteai-advanced-blocks.js"></script>
|
|
432
|
-
<script>
|
|
433
|
-
BlockWriteAI.mountPreviews();
|
|
232
|
+
|
|
233
|
+
bootEditor();
|
|
434
234
|
</script>
|
|
435
235
|
```
|
|
436
236
|
|
|
437
|
-
|
|
438
|
-
before `BlockWriteAI.mountPreviews()`:
|
|
237
|
+
The browser plugin must never receive private API keys. Keep OpenAI, billing, usage limits, and license checks on your server.
|
|
439
238
|
|
|
440
|
-
|
|
441
|
-
async function mountDocumentPreview() {
|
|
442
|
-
await BlockWriteAI.loadPremiumPlugins({
|
|
443
|
-
licenseKey: "bwai_live_xxxxx",
|
|
444
|
-
endpoint: "/blockwriteai-platform/api/premium_plugins.php",
|
|
445
|
-
features: ["drawing", "mermaid", "signature", "signature_flow", "ai"]
|
|
446
|
-
});
|
|
447
|
-
BlockWriteAI.mountPreviews();
|
|
448
|
-
}
|
|
449
|
-
mountDocumentPreview();
|
|
450
|
-
```
|
|
451
|
-
|
|
452
|
-
The JSON endpoint can return either a BlockWriteAI document directly or an API wrapper such as:
|
|
453
|
-
|
|
454
|
-
```json
|
|
455
|
-
{
|
|
456
|
-
"ok": true,
|
|
457
|
-
"data": {
|
|
458
|
-
"time": 1779540000000,
|
|
459
|
-
"version": "1.0.9",
|
|
460
|
-
"blocks": []
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
```
|
|
464
|
-
|
|
465
|
-
Example PHP receiver:
|
|
466
|
-
|
|
467
|
-
```php
|
|
468
|
-
<?php
|
|
469
|
-
header('Content-Type: application/json');
|
|
470
|
-
|
|
471
|
-
$json = file_get_contents('php://input');
|
|
472
|
-
$data = json_decode($json, true);
|
|
473
|
-
|
|
474
|
-
if (!$data || !isset($data['blocks']) || !is_array($data['blocks'])) {
|
|
475
|
-
http_response_code(422);
|
|
476
|
-
echo json_encode(['error' => 'Invalid BlockWriteAI document']);
|
|
477
|
-
exit;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
file_put_contents(__DIR__ . '/saved-document.json', json_encode($data, JSON_PRETTY_PRINT));
|
|
481
|
-
|
|
482
|
-
echo json_encode(['ok' => true]);
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
## Uploads
|
|
486
|
-
|
|
487
|
-
The demo includes `examples/upload.php` and stores files under `examples/uploads/`. For production, replace this with your own storage layer.
|
|
488
|
-
|
|
489
|
-
```js
|
|
490
|
-
const editor = new BlockWriteAI({
|
|
491
|
-
holder: "#editor",
|
|
492
|
-
uploadOutput: ["upload", "base64"],
|
|
493
|
-
upload: {
|
|
494
|
-
image: async (file) => {
|
|
495
|
-
const form = new FormData();
|
|
496
|
-
form.append("file", file);
|
|
497
|
-
form.append("kind", "image");
|
|
498
|
-
|
|
499
|
-
const response = await fetch("/BlockWriteAI/examples/upload.php", {
|
|
500
|
-
method: "POST",
|
|
501
|
-
body: form
|
|
502
|
-
});
|
|
503
|
-
|
|
504
|
-
return response.json();
|
|
505
|
-
},
|
|
506
|
-
file: async (file) => {
|
|
507
|
-
const form = new FormData();
|
|
508
|
-
form.append("file", file);
|
|
509
|
-
form.append("kind", "file");
|
|
510
|
-
|
|
511
|
-
const response = await fetch("/BlockWriteAI/examples/upload.php", {
|
|
512
|
-
method: "POST",
|
|
513
|
-
body: form
|
|
514
|
-
});
|
|
515
|
-
|
|
516
|
-
return response.json();
|
|
517
|
-
}
|
|
518
|
-
}
|
|
519
|
-
});
|
|
520
|
-
```
|
|
239
|
+
## Release Checklist
|
|
521
240
|
|
|
522
|
-
|
|
241
|
+
1. Run `npm run build:min`.
|
|
242
|
+
2. Run `npm run check`.
|
|
243
|
+
3. Publish `@qarakash/blockwriteai` to npm.
|
|
244
|
+
4. Publish `qarakash/blockwriteai` to Packagist.
|
|
245
|
+
5. Publish `blockwriteai-editor` to PyPI.
|
|
246
|
+
6. Serve only the public asset directory from your application.
|
|
523
247
|
|
|
524
|
-
|
|
525
|
-
- `"upload"` or `["upload"]` stores the response from your upload handler, such as a server URL.
|
|
526
|
-
- `["upload", "base64"]` stores both, useful when you want server files plus a portable JSON backup.
|
|
527
|
-
|
|
528
|
-
Expected upload response:
|
|
529
|
-
|
|
530
|
-
```json
|
|
531
|
-
{
|
|
532
|
-
"url": "/BlockWriteAI/examples/uploads/example.pdf",
|
|
533
|
-
"name": "example.pdf",
|
|
534
|
-
"size": 12345,
|
|
535
|
-
"type": "application/pdf"
|
|
536
|
-
}
|
|
537
|
-
```
|
|
248
|
+
## Notes For Production
|
|
538
249
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
```js
|
|
544
|
-
await editor.save(); // Get JSON document
|
|
545
|
-
editor.getData(); // Get current data synchronously
|
|
546
|
-
editor.render(data); // Replace editor content
|
|
547
|
-
editor.clear(); // Reset editor
|
|
548
|
-
editor.exportHTML(); // Export HTML
|
|
549
|
-
editor.exportMarkdown(); // Export Markdown API, hidden from the default UI
|
|
550
|
-
editor.importHTML(html); // Import HTML into blocks
|
|
551
|
-
editor.setReadOnly(true); // Toggle read-only mode
|
|
552
|
-
editor.undo(); // Undo last change
|
|
553
|
-
editor.redo(); // Redo last undo
|
|
554
|
-
editor.destroy(); // Remove editor instance
|
|
555
|
-
BlockWriteAI.mountPreviews(); // Render JSON into .blockwriteai-preview containers
|
|
556
|
-
```
|
|
557
|
-
|
|
558
|
-
## Data Shape
|
|
559
|
-
|
|
560
|
-
```json
|
|
561
|
-
{
|
|
562
|
-
"time": 1779540000000,
|
|
563
|
-
"version": "1.0.9",
|
|
564
|
-
"blocks": [
|
|
565
|
-
{
|
|
566
|
-
"id": "block-title",
|
|
567
|
-
"type": "heading",
|
|
568
|
-
"data": {
|
|
569
|
-
"level": 2,
|
|
570
|
-
"text": "BlockWriteAI document",
|
|
571
|
-
"alignment": "left"
|
|
572
|
-
}
|
|
573
|
-
},
|
|
574
|
-
{
|
|
575
|
-
"id": "block-body",
|
|
576
|
-
"type": "paragraph",
|
|
577
|
-
"data": {
|
|
578
|
-
"text": "Reusable content saved as JSON."
|
|
579
|
-
}
|
|
580
|
-
}
|
|
581
|
-
]
|
|
582
|
-
}
|
|
583
|
-
```
|
|
584
|
-
|
|
585
|
-
## Tool Control
|
|
586
|
-
|
|
587
|
-
Limit available blocks per project:
|
|
588
|
-
|
|
589
|
-
```js
|
|
590
|
-
const editor = new BlockWriteAI({
|
|
591
|
-
holder: "#editor",
|
|
592
|
-
tools: [
|
|
593
|
-
"paragraph",
|
|
594
|
-
"heading",
|
|
595
|
-
"image",
|
|
596
|
-
"list",
|
|
597
|
-
"table"
|
|
598
|
-
]
|
|
599
|
-
});
|
|
600
|
-
```
|
|
601
|
-
|
|
602
|
-
Disable specific tools:
|
|
603
|
-
|
|
604
|
-
```js
|
|
605
|
-
const editor = new BlockWriteAI({
|
|
606
|
-
holder: "#editor",
|
|
607
|
-
tools: {
|
|
608
|
-
raw: false,
|
|
609
|
-
attaches: false
|
|
610
|
-
}
|
|
611
|
-
});
|
|
612
|
-
```
|
|
613
|
-
|
|
614
|
-
## Autosave
|
|
615
|
-
|
|
616
|
-
```js
|
|
617
|
-
const editor = new BlockWriteAI({
|
|
618
|
-
holder: "#editor",
|
|
619
|
-
autosave: {
|
|
620
|
-
key: "blockwriteai-draft",
|
|
621
|
-
load: true
|
|
622
|
-
}
|
|
623
|
-
});
|
|
624
|
-
```
|
|
625
|
-
|
|
626
|
-
## Security Notes
|
|
627
|
-
|
|
628
|
-
BlockWriteAI sanitizes normal rich text blocks before saving and exporting. Raw HTML blocks are intentionally treated as trusted HTML, so enable the raw HTML tool only for trusted users.
|
|
629
|
-
|
|
630
|
-
For production applications:
|
|
631
|
-
|
|
632
|
-
- Validate JSON on the server.
|
|
633
|
-
- Sanitize output again before public rendering.
|
|
634
|
-
- Restrict upload types and file sizes.
|
|
635
|
-
- Store uploaded files outside executable PHP paths when possible.
|
|
636
|
-
- Add authentication before saving documents.
|
|
637
|
-
|
|
638
|
-
## GitHub
|
|
639
|
-
|
|
640
|
-
Repository target:
|
|
641
|
-
|
|
642
|
-
```text
|
|
643
|
-
https://github.com/qarAkash/BlockWriteAI.git
|
|
644
|
-
```
|
|
645
|
-
|
|
646
|
-
## Publishing Packages
|
|
647
|
-
|
|
648
|
-
After a release is ready, publish each package from the repository root.
|
|
649
|
-
|
|
650
|
-
Create a Git release tag for script-link/CDN users:
|
|
651
|
-
|
|
652
|
-
```bash
|
|
653
|
-
git tag v1.0.9
|
|
654
|
-
git push origin v1.0.9
|
|
655
|
-
```
|
|
656
|
-
|
|
657
|
-
Publish npm:
|
|
658
|
-
|
|
659
|
-
```bash
|
|
660
|
-
npm publish --access public
|
|
661
|
-
```
|
|
662
|
-
|
|
663
|
-
Publish Python:
|
|
664
|
-
|
|
665
|
-
```bash
|
|
666
|
-
python -m build
|
|
667
|
-
python -m twine upload dist/*
|
|
668
|
-
```
|
|
669
|
-
|
|
670
|
-
Publish Composer:
|
|
671
|
-
|
|
672
|
-
```text
|
|
673
|
-
Submit https://github.com/qarAkash/BlockWriteAI to Packagist as qarakash/blockwriteai.
|
|
674
|
-
```
|
|
675
|
-
|
|
676
|
-
## Status
|
|
677
|
-
|
|
678
|
-
BlockWriteAI is currently an active custom editor library and demo project. It is suitable for continued feature development, integration testing, and database-backed storage work.
|
|
250
|
+
- Use the `.min.css` and `.min.js` files in public pages.
|
|
251
|
+
- Do not publish source folders, examples, build artifacts, package caches, or private configuration files.
|
|
252
|
+
- Browser-delivered CSS and JavaScript can always be downloaded. Protect paid features with server-side license checks and metered premium bundle delivery.
|
|
253
|
+
- Keep secret keys in backend environment variables only.
|