cms-block-editor 1.0.13 → 1.0.14
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 +51 -7
- package/dist/index.css +307 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +126 -2
- package/dist/index.mjs +571 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,6 +18,7 @@ A powerful, feature-rich block editor for CMS applications built with Lexical an
|
|
|
18
18
|
🔗 **Links** - Custom link insertion with labels and options
|
|
19
19
|
📊 **Tables** - Visual table builder with configurable rows/columns and professional styling
|
|
20
20
|
🎨 **Styling** - Background colors, images, gradients, opacity controls
|
|
21
|
+
🌈 **Themes** - 10 preset themes with light/dark mode and custom theme support
|
|
21
22
|
📱 **Responsive** - Mobile-first design with automatic responsive behavior
|
|
22
23
|
💾 **Export/Import** - HTML and Markdown support
|
|
23
24
|
🎯 **Section Editor** - Full control over section layout, spacing, and styling
|
|
@@ -32,19 +33,21 @@ npm install cms-block-editor
|
|
|
32
33
|
## Quick Start
|
|
33
34
|
|
|
34
35
|
```tsx
|
|
35
|
-
import { CMSBlockEditor } from 'cms-block-editor';
|
|
36
|
+
import { CMSBlockEditor, ThemeProvider } from 'cms-block-editor';
|
|
36
37
|
import 'cms-block-editor/dist/index.css';
|
|
37
38
|
|
|
38
39
|
function App() {
|
|
39
40
|
const [content, setContent] = useState('');
|
|
40
41
|
|
|
41
42
|
return (
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
<ThemeProvider defaultTheme="light" defaultMode="auto">
|
|
44
|
+
<CMSBlockEditor
|
|
45
|
+
value={content}
|
|
46
|
+
onChange={(editorState) => {
|
|
47
|
+
setContent(JSON.stringify(editorState));
|
|
48
|
+
}}
|
|
49
|
+
/>
|
|
50
|
+
</ThemeProvider>
|
|
48
51
|
);
|
|
49
52
|
}
|
|
50
53
|
```
|
|
@@ -137,6 +140,46 @@ Read-only renderer for displaying saved content.
|
|
|
137
140
|
|
|
138
141
|
## Advanced Usage
|
|
139
142
|
|
|
143
|
+
### Theme System
|
|
144
|
+
|
|
145
|
+
Use preset themes or create custom ones:
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
import { CMSBlockEditor, ThemeProvider, ThemeSwitcher } from 'cms-block-editor';
|
|
149
|
+
|
|
150
|
+
function App() {
|
|
151
|
+
return (
|
|
152
|
+
<ThemeProvider defaultTheme="ocean" defaultMode="auto">
|
|
153
|
+
<div>
|
|
154
|
+
<ThemeSwitcher />
|
|
155
|
+
<CMSBlockEditor value={content} onChange={setContent} />
|
|
156
|
+
</div>
|
|
157
|
+
</ThemeProvider>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
**Available Themes**: light, dark, ocean, forest, sunset, rose, midnight, dracula, monokai, minimal
|
|
163
|
+
|
|
164
|
+
**Custom Theme**:
|
|
165
|
+
```typescript
|
|
166
|
+
import { Theme, lightTheme } from 'cms-block-editor';
|
|
167
|
+
|
|
168
|
+
const myTheme: Theme = {
|
|
169
|
+
...lightTheme,
|
|
170
|
+
name: 'my-theme',
|
|
171
|
+
colors: {
|
|
172
|
+
...lightTheme.colors,
|
|
173
|
+
primary: '#ff6b6b',
|
|
174
|
+
primaryHover: '#ee5a52',
|
|
175
|
+
},
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
<ThemeProvider defaultTheme={myTheme}>
|
|
179
|
+
<CMSBlockEditor />
|
|
180
|
+
</ThemeProvider>
|
|
181
|
+
```
|
|
182
|
+
|
|
140
183
|
### Custom Video Upload
|
|
141
184
|
|
|
142
185
|
Upload videos to your server:
|
|
@@ -329,6 +372,7 @@ Check out the [example app](./example-app) for a complete implementation with:
|
|
|
329
372
|
## Documentation
|
|
330
373
|
|
|
331
374
|
Comprehensive guides available:
|
|
375
|
+
- [Theme System Guide](./docs/THEME-GUIDE.md) - Complete theming and customization
|
|
332
376
|
- [Video Upload Guide](./docs/VIDEO-GUIDE.md) - Native HTML5 video upload and playback
|
|
333
377
|
- [Image Editing Guide](./docs/IMAGE-EDITING-GUIDE.md) - Advanced image filters and effects
|
|
334
378
|
- [Section Creator Guide](./SECTION-CREATOR-GUIDE.md)
|
package/dist/index.css
CHANGED
|
@@ -3214,4 +3214,311 @@
|
|
|
3214
3214
|
max-width: 100%;
|
|
3215
3215
|
margin: 16px 0;
|
|
3216
3216
|
}
|
|
3217
|
+
|
|
3218
|
+
/* src/styles/themes.css */
|
|
3219
|
+
:root {
|
|
3220
|
+
--cms-color-primary: #667eea;
|
|
3221
|
+
--cms-color-primary-hover: #5568d3;
|
|
3222
|
+
--cms-color-primary-light: #e0e7ff;
|
|
3223
|
+
--cms-color-primary-dark: #4c51bf;
|
|
3224
|
+
--cms-color-secondary: #764ba2;
|
|
3225
|
+
--cms-color-secondary-hover: #6a3f8f;
|
|
3226
|
+
--cms-color-background: #ffffff;
|
|
3227
|
+
--cms-color-surface: #f9fafb;
|
|
3228
|
+
--cms-color-border: #e5e7eb;
|
|
3229
|
+
--cms-color-divider: #d1d5db;
|
|
3230
|
+
--cms-color-text-primary: #1f2937;
|
|
3231
|
+
--cms-color-text-secondary: #6b7280;
|
|
3232
|
+
--cms-color-text-disabled: #9ca3af;
|
|
3233
|
+
--cms-color-success: #10b981;
|
|
3234
|
+
--cms-color-warning: #f59e0b;
|
|
3235
|
+
--cms-color-error: #ef4444;
|
|
3236
|
+
--cms-color-info: #3b82f6;
|
|
3237
|
+
--cms-color-editor-background: #ffffff;
|
|
3238
|
+
--cms-color-editor-text: #1f2937;
|
|
3239
|
+
--cms-color-editor-placeholder: #9ca3af;
|
|
3240
|
+
--cms-color-toolbar-background: #f9fafb;
|
|
3241
|
+
--cms-color-toolbar-text: #374151;
|
|
3242
|
+
--cms-color-toolbar-border: #e5e7eb;
|
|
3243
|
+
--cms-color-selection: #dbeafe;
|
|
3244
|
+
--cms-color-highlight: #fef3c7;
|
|
3245
|
+
--cms-color-focus: #667eea;
|
|
3246
|
+
--cms-typography-font-family:
|
|
3247
|
+
-apple-system,
|
|
3248
|
+
BlinkMacSystemFont,
|
|
3249
|
+
"Segoe UI",
|
|
3250
|
+
Roboto,
|
|
3251
|
+
"Helvetica Neue",
|
|
3252
|
+
Arial,
|
|
3253
|
+
sans-serif;
|
|
3254
|
+
--cms-typography-font-family-mono:
|
|
3255
|
+
ui-monospace,
|
|
3256
|
+
SFMono-Regular,
|
|
3257
|
+
"SF Mono",
|
|
3258
|
+
Menlo,
|
|
3259
|
+
Consolas,
|
|
3260
|
+
"Liberation Mono",
|
|
3261
|
+
monospace;
|
|
3262
|
+
--cms-typography-font-size-xs: 0.75rem;
|
|
3263
|
+
--cms-typography-font-size-sm: 0.875rem;
|
|
3264
|
+
--cms-typography-font-size-md: 1rem;
|
|
3265
|
+
--cms-typography-font-size-lg: 1.125rem;
|
|
3266
|
+
--cms-typography-font-size-xl: 1.25rem;
|
|
3267
|
+
--cms-typography-font-weight-normal: 400;
|
|
3268
|
+
--cms-typography-font-weight-medium: 500;
|
|
3269
|
+
--cms-typography-font-weight-bold: 600;
|
|
3270
|
+
--cms-typography-line-height-tight: 1.25;
|
|
3271
|
+
--cms-typography-line-height-normal: 1.5;
|
|
3272
|
+
--cms-typography-line-height-relaxed: 1.75;
|
|
3273
|
+
--cms-spacing-xs: 0.25rem;
|
|
3274
|
+
--cms-spacing-sm: 0.5rem;
|
|
3275
|
+
--cms-spacing-md: 1rem;
|
|
3276
|
+
--cms-spacing-lg: 1.5rem;
|
|
3277
|
+
--cms-spacing-xl: 2rem;
|
|
3278
|
+
--cms-spacing-xxl: 3rem;
|
|
3279
|
+
--cms-radius-none: 0;
|
|
3280
|
+
--cms-radius-sm: 0.25rem;
|
|
3281
|
+
--cms-radius-md: 0.5rem;
|
|
3282
|
+
--cms-radius-lg: 0.75rem;
|
|
3283
|
+
--cms-radius-full: 9999px;
|
|
3284
|
+
--cms-shadow-none: none;
|
|
3285
|
+
--cms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
3286
|
+
--cms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
3287
|
+
--cms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
3288
|
+
--cms-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
3289
|
+
}
|
|
3290
|
+
.cms-editor-shell {
|
|
3291
|
+
background: var(--cms-color-editor-background);
|
|
3292
|
+
color: var(--cms-color-editor-text);
|
|
3293
|
+
font-family: var(--cms-typography-font-family);
|
|
3294
|
+
border-radius: var(--cms-radius-md);
|
|
3295
|
+
box-shadow: var(--cms-shadow-md);
|
|
3296
|
+
}
|
|
3297
|
+
.cms-toolbar {
|
|
3298
|
+
background: var(--cms-color-toolbar-background);
|
|
3299
|
+
color: var(--cms-color-toolbar-text);
|
|
3300
|
+
border-bottom: 1px solid var(--cms-color-toolbar-border);
|
|
3301
|
+
}
|
|
3302
|
+
.cms-toolbar button {
|
|
3303
|
+
color: var(--cms-color-toolbar-text);
|
|
3304
|
+
border-radius: var(--cms-radius-sm);
|
|
3305
|
+
}
|
|
3306
|
+
.cms-toolbar button:hover {
|
|
3307
|
+
background: var(--cms-color-surface);
|
|
3308
|
+
}
|
|
3309
|
+
.cms-toolbar button.active {
|
|
3310
|
+
background: var(--cms-color-primary);
|
|
3311
|
+
color: white;
|
|
3312
|
+
}
|
|
3313
|
+
.cms-editor-content {
|
|
3314
|
+
color: var(--cms-color-editor-text);
|
|
3315
|
+
font-size: var(--cms-typography-font-size-md);
|
|
3316
|
+
line-height: var(--cms-typography-line-height-normal);
|
|
3317
|
+
}
|
|
3318
|
+
.cms-editor-placeholder {
|
|
3319
|
+
color: var(--cms-color-editor-placeholder);
|
|
3320
|
+
}
|
|
3321
|
+
.cms-btn-primary {
|
|
3322
|
+
background: var(--cms-color-primary);
|
|
3323
|
+
color: white;
|
|
3324
|
+
border-radius: var(--cms-radius-md);
|
|
3325
|
+
box-shadow: var(--cms-shadow-sm);
|
|
3326
|
+
}
|
|
3327
|
+
.cms-btn-primary:hover {
|
|
3328
|
+
background: var(--cms-color-primary-hover);
|
|
3329
|
+
}
|
|
3330
|
+
.cms-btn-secondary {
|
|
3331
|
+
background: var(--cms-color-surface);
|
|
3332
|
+
color: var(--cms-color-text-primary);
|
|
3333
|
+
border: 1px solid var(--cms-color-border);
|
|
3334
|
+
border-radius: var(--cms-radius-md);
|
|
3335
|
+
}
|
|
3336
|
+
.cms-btn-secondary:hover {
|
|
3337
|
+
background: var(--cms-color-background);
|
|
3338
|
+
}
|
|
3339
|
+
.cms-modal-overlay {
|
|
3340
|
+
background: rgba(0, 0, 0, 0.5);
|
|
3341
|
+
}
|
|
3342
|
+
.cms-modal-content {
|
|
3343
|
+
background: var(--cms-color-background);
|
|
3344
|
+
color: var(--cms-color-text-primary);
|
|
3345
|
+
border-radius: var(--cms-radius-lg);
|
|
3346
|
+
box-shadow: var(--cms-shadow-xl);
|
|
3347
|
+
}
|
|
3348
|
+
.cms-theme-switcher {
|
|
3349
|
+
display: flex;
|
|
3350
|
+
align-items: center;
|
|
3351
|
+
gap: var(--cms-spacing-sm);
|
|
3352
|
+
}
|
|
3353
|
+
.cms-theme-mode-toggle {
|
|
3354
|
+
padding: var(--cms-spacing-sm) var(--cms-spacing-md);
|
|
3355
|
+
background: var(--cms-color-surface);
|
|
3356
|
+
border: 1px solid var(--cms-color-border);
|
|
3357
|
+
border-radius: var(--cms-radius-md);
|
|
3358
|
+
cursor: pointer;
|
|
3359
|
+
font-size: var(--cms-typography-font-size-lg);
|
|
3360
|
+
transition: all 0.2s;
|
|
3361
|
+
}
|
|
3362
|
+
.cms-theme-mode-toggle:hover {
|
|
3363
|
+
background: var(--cms-color-background);
|
|
3364
|
+
transform: scale(1.05);
|
|
3365
|
+
}
|
|
3366
|
+
.cms-theme-selector {
|
|
3367
|
+
position: relative;
|
|
3368
|
+
}
|
|
3369
|
+
.cms-theme-selector-button {
|
|
3370
|
+
padding: var(--cms-spacing-sm) var(--cms-spacing-md);
|
|
3371
|
+
background: var(--cms-color-surface);
|
|
3372
|
+
border: 1px solid var(--cms-color-border);
|
|
3373
|
+
border-radius: var(--cms-radius-md);
|
|
3374
|
+
cursor: pointer;
|
|
3375
|
+
font-size: var(--cms-typography-font-size-sm);
|
|
3376
|
+
font-weight: var(--cms-typography-font-weight-medium);
|
|
3377
|
+
color: var(--cms-color-text-primary);
|
|
3378
|
+
transition: all 0.2s;
|
|
3379
|
+
display: flex;
|
|
3380
|
+
align-items: center;
|
|
3381
|
+
gap: var(--cms-spacing-sm);
|
|
3382
|
+
}
|
|
3383
|
+
.cms-theme-selector-button:hover {
|
|
3384
|
+
background: var(--cms-color-background);
|
|
3385
|
+
border-color: var(--cms-color-primary);
|
|
3386
|
+
}
|
|
3387
|
+
.cms-theme-selector-overlay {
|
|
3388
|
+
position: fixed;
|
|
3389
|
+
top: 0;
|
|
3390
|
+
left: 0;
|
|
3391
|
+
right: 0;
|
|
3392
|
+
bottom: 0;
|
|
3393
|
+
z-index: 999;
|
|
3394
|
+
}
|
|
3395
|
+
.cms-theme-selector-dropdown {
|
|
3396
|
+
position: absolute;
|
|
3397
|
+
top: calc(100% + var(--cms-spacing-sm));
|
|
3398
|
+
right: 0;
|
|
3399
|
+
background: var(--cms-color-background);
|
|
3400
|
+
border: 1px solid var(--cms-color-border);
|
|
3401
|
+
border-radius: var(--cms-radius-lg);
|
|
3402
|
+
box-shadow: var(--cms-shadow-xl);
|
|
3403
|
+
padding: var(--cms-spacing-md);
|
|
3404
|
+
min-width: 320px;
|
|
3405
|
+
max-width: 400px;
|
|
3406
|
+
z-index: 1000;
|
|
3407
|
+
}
|
|
3408
|
+
.cms-theme-selector-header {
|
|
3409
|
+
display: flex;
|
|
3410
|
+
justify-content: space-between;
|
|
3411
|
+
align-items: center;
|
|
3412
|
+
margin-bottom: var(--cms-spacing-md);
|
|
3413
|
+
padding-bottom: var(--cms-spacing-sm);
|
|
3414
|
+
border-bottom: 1px solid var(--cms-color-border);
|
|
3415
|
+
}
|
|
3416
|
+
.cms-theme-selector-header h3 {
|
|
3417
|
+
margin: 0;
|
|
3418
|
+
font-size: var(--cms-typography-font-size-md);
|
|
3419
|
+
font-weight: var(--cms-typography-font-weight-bold);
|
|
3420
|
+
color: var(--cms-color-text-primary);
|
|
3421
|
+
}
|
|
3422
|
+
.cms-theme-selector-header button {
|
|
3423
|
+
background: none;
|
|
3424
|
+
border: none;
|
|
3425
|
+
font-size: 24px;
|
|
3426
|
+
color: var(--cms-color-text-secondary);
|
|
3427
|
+
cursor: pointer;
|
|
3428
|
+
padding: 0;
|
|
3429
|
+
width: 24px;
|
|
3430
|
+
height: 24px;
|
|
3431
|
+
display: flex;
|
|
3432
|
+
align-items: center;
|
|
3433
|
+
justify-content: center;
|
|
3434
|
+
border-radius: var(--cms-radius-sm);
|
|
3435
|
+
}
|
|
3436
|
+
.cms-theme-selector-header button:hover {
|
|
3437
|
+
background: var(--cms-color-surface);
|
|
3438
|
+
color: var(--cms-color-text-primary);
|
|
3439
|
+
}
|
|
3440
|
+
.cms-theme-selector-grid {
|
|
3441
|
+
display: grid;
|
|
3442
|
+
grid-template-columns: repeat(2, 1fr);
|
|
3443
|
+
gap: var(--cms-spacing-sm);
|
|
3444
|
+
margin-bottom: var(--cms-spacing-md);
|
|
3445
|
+
}
|
|
3446
|
+
.cms-theme-option {
|
|
3447
|
+
display: flex;
|
|
3448
|
+
flex-direction: column;
|
|
3449
|
+
align-items: center;
|
|
3450
|
+
gap: var(--cms-spacing-sm);
|
|
3451
|
+
padding: var(--cms-spacing-md);
|
|
3452
|
+
background: var(--cms-color-surface);
|
|
3453
|
+
border: 2px solid var(--cms-color-border);
|
|
3454
|
+
border-radius: var(--cms-radius-md);
|
|
3455
|
+
cursor: pointer;
|
|
3456
|
+
transition: all 0.2s;
|
|
3457
|
+
position: relative;
|
|
3458
|
+
}
|
|
3459
|
+
.cms-theme-option:hover {
|
|
3460
|
+
border-color: var(--cms-color-primary);
|
|
3461
|
+
transform: translateY(-2px);
|
|
3462
|
+
box-shadow: var(--cms-shadow-md);
|
|
3463
|
+
}
|
|
3464
|
+
.cms-theme-option.active {
|
|
3465
|
+
border-color: var(--cms-color-primary);
|
|
3466
|
+
background: var(--cms-color-primary-light);
|
|
3467
|
+
}
|
|
3468
|
+
.cms-theme-preview {
|
|
3469
|
+
width: 100%;
|
|
3470
|
+
height: 40px;
|
|
3471
|
+
border-radius: var(--cms-radius-sm);
|
|
3472
|
+
border: 1px solid;
|
|
3473
|
+
position: relative;
|
|
3474
|
+
overflow: hidden;
|
|
3475
|
+
}
|
|
3476
|
+
.cms-theme-preview-accent {
|
|
3477
|
+
position: absolute;
|
|
3478
|
+
bottom: 0;
|
|
3479
|
+
left: 0;
|
|
3480
|
+
right: 0;
|
|
3481
|
+
height: 8px;
|
|
3482
|
+
}
|
|
3483
|
+
.cms-theme-name {
|
|
3484
|
+
font-size: var(--cms-typography-font-size-sm);
|
|
3485
|
+
font-weight: var(--cms-typography-font-weight-medium);
|
|
3486
|
+
color: var(--cms-color-text-primary);
|
|
3487
|
+
text-transform: capitalize;
|
|
3488
|
+
}
|
|
3489
|
+
.cms-theme-check {
|
|
3490
|
+
position: absolute;
|
|
3491
|
+
top: var(--cms-spacing-xs);
|
|
3492
|
+
right: var(--cms-spacing-xs);
|
|
3493
|
+
color: var(--cms-color-primary);
|
|
3494
|
+
font-weight: var(--cms-typography-font-weight-bold);
|
|
3495
|
+
}
|
|
3496
|
+
.cms-theme-selector-modes {
|
|
3497
|
+
display: flex;
|
|
3498
|
+
gap: var(--cms-spacing-md);
|
|
3499
|
+
padding-top: var(--cms-spacing-md);
|
|
3500
|
+
border-top: 1px solid var(--cms-color-border);
|
|
3501
|
+
}
|
|
3502
|
+
.cms-theme-selector-modes label {
|
|
3503
|
+
display: flex;
|
|
3504
|
+
align-items: center;
|
|
3505
|
+
gap: var(--cms-spacing-xs);
|
|
3506
|
+
font-size: var(--cms-typography-font-size-sm);
|
|
3507
|
+
color: var(--cms-color-text-primary);
|
|
3508
|
+
cursor: pointer;
|
|
3509
|
+
}
|
|
3510
|
+
.cms-theme-selector-modes input[type=radio] {
|
|
3511
|
+
cursor: pointer;
|
|
3512
|
+
accent-color: var(--cms-color-primary);
|
|
3513
|
+
}
|
|
3514
|
+
@media (max-width: 768px) {
|
|
3515
|
+
.cms-theme-selector-dropdown {
|
|
3516
|
+
right: auto;
|
|
3517
|
+
left: 0;
|
|
3518
|
+
min-width: 280px;
|
|
3519
|
+
}
|
|
3520
|
+
.cms-theme-selector-grid {
|
|
3521
|
+
grid-template-columns: 1fr;
|
|
3522
|
+
}
|
|
3523
|
+
}
|
|
3217
3524
|
/*# sourceMappingURL=index.css.map */
|