feat: add custom CSS save system with dual-editor interface
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
Implement complete custom CSS management system: - Separate base CSS (readonly) and custom CSS (editable) - Save custom CSS to Kirby backend per narrative - Visual save button with state indicators (dirty/saving/success/error) - CSRF-protected API endpoint for CSS operations - Dual-editor StylesheetViewer (base + custom with edit mode toggle) - Auto-format custom CSS with Prettier on edit mode exit Backend changes: - Add web2print Kirby plugin with POST/GET routes - Add customCss field to narrative blueprint - Add CSRF token meta tag in header - Include customCss and modified timestamps in JSON template - Install code-editor plugin for Kirby panel Frontend changes: - Refactor stylesheet store with baseCss/customCss refs - Make content a computed property (baseCss + customCss) - Add helper methods: replaceBlock, replaceInCustomCss, setCustomCss - Update all components to use new store API - Create SaveButton component with FAB design - Redesign StylesheetViewer with collapsable sections - Initialize store from narrative data on app mount File changes: - Rename stylesheet.css → stylesheet.print.css - Update all references to new filename Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
4d1183d1af
commit
0f46618066
32 changed files with 1207 additions and 89 deletions
32
public/site/plugins/code-editor/lib/fields/code-editor.php
Normal file
32
public/site/plugins/code-editor/lib/fields/code-editor.php
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
|
||||
$options = require kirby()->root('kirby') . '/config/fields/textarea.php';
|
||||
|
||||
/* Merge new properties
|
||||
--------------------------------*/
|
||||
|
||||
$options = A::merge($options, [
|
||||
'props' => [
|
||||
'size' => function($size = null) {
|
||||
return $size ?? option('sylvainjule.code-editor.size');
|
||||
},
|
||||
'language' => function($language = null) {
|
||||
return $language ?? option('sylvainjule.code-editor.language');
|
||||
},
|
||||
'lineNumbers' => function($lineNumbers = null) {
|
||||
return $lineNumbers ?? option('sylvainjule.code-editor.lineNumbers');
|
||||
},
|
||||
'tabSize' => function($tabSize = null) {
|
||||
return $tabSize ?? option('sylvainjule.code-editor.tabSize');
|
||||
},
|
||||
'insertSpaces' => function($insertSpaces = null) {
|
||||
return $tabSize ?? option('sylvainjule.code-editor.insertSpaces');
|
||||
},
|
||||
'ignoreTabKey' => function($ignoreTabKey = null) {
|
||||
return $tabSize ?? option('sylvainjule.code-editor.ignoreTabKey');
|
||||
},
|
||||
]
|
||||
]);
|
||||
|
||||
// return the updated options
|
||||
return $options;
|
||||
Loading…
Add table
Add a link
Reference in a new issue