0f46618066
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>
111 lines
3.8 KiB
Markdown
111 lines
3.8 KiB
Markdown
# Kirby – Code editor
|
||
|
||
Code editor field for Kirby 3, 4 and 5.
|
||
|
||
|
||
|
||
<br/>
|
||
|
||
## Overview
|
||
|
||
> This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, you can consider [making a donation of your choice](https://paypal.me/sylvainjl).
|
||
|
||
- [1. Installation](#1-installation)
|
||
- [2. Setup](#2-setup)
|
||
- [3. Options](#3-options)
|
||
- [4. Available languages](#4-available-languages)
|
||
- [5. License](#5-license)
|
||
- [6. Credits](#6-credits)
|
||
|
||
<br/>
|
||
|
||
## 1. Installation
|
||
|
||
Download and copy this repository to ```/site/plugins/code-editor```
|
||
|
||
Alternatively, you can install it with composer: ```composer require sylvainjule/code-editor```
|
||
|
||
<br/>
|
||
|
||
## 2. Setup
|
||
|
||
This field adds a code editor in the panel:
|
||
|
||
```yaml
|
||
editor:
|
||
label: My code editor
|
||
type: code-editor
|
||
```
|
||
|
||
<br/>
|
||
|
||
## 3. Options
|
||
|
||
| Name | Type | Default | Options | Description |
|
||
| -------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| language | `String` | `'css'` | - | Syntax mode of the editor. See below for available languages |
|
||
| size | `String` | `'small'` | - | Min height of the editor. `small / medium / large / huge` |
|
||
| lineNumbers | `Boolean` | `true` | - | Whether to show line numbers. |
|
||
| tabSize | `number` | `4` | - | The number of characters to insert when pressing tab key. |
|
||
| insertSpaces | `boolean` | `true` | - | Whether to use spaces for indentation. If you set it to `false`, you might also want to set `tabSize` to `1` |
|
||
| ignoreTabKey | `boolean` | `false` | - | Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using `Ctrl+Shift+M` (Mac) / `Ctrl+M` manually when this is `false`. |
|
||
|
||
|
||
Note that you can make the default height any height you want with some [custom panel CSS](https://getkirby.com/docs/reference/system/options/panel#custom-panel-css). First, set the `size` option to any string you'd like:
|
||
|
||
```yaml
|
||
size: custom-size
|
||
```
|
||
|
||
Then in your `panel.css`:
|
||
|
||
```css
|
||
.k-code-editor-input[data-size="custom-size"] {
|
||
min-height: 15rem;
|
||
}
|
||
```
|
||
|
||
### 3.1. Default options
|
||
|
||
You can globally override the default options, instead of setting them on a per-field basis. In your `site/config/config.php`:
|
||
|
||
```php
|
||
return [
|
||
'sylvainjule.code-editor.language' => 'css',
|
||
'sylvainjule.code-editor.size' => 'small',
|
||
'sylvainjule.code-editor.lineNumbers' => true,
|
||
'sylvainjule.code-editor.tabSize' => 4,
|
||
'sylvainjule.code-editor.insertSpaces' => true,
|
||
'sylvainjule.code-editor.ignoreTabKey' => false,
|
||
];
|
||
```
|
||
|
||
<br/>
|
||
|
||
## 4. Available languages
|
||
|
||
Currently supported languages are:
|
||
|
||
* `css`
|
||
* `javascript`
|
||
* `json`
|
||
* `less`
|
||
* `php`
|
||
* `python`
|
||
* `ruby`
|
||
* `scss`
|
||
* `yaml`
|
||
|
||
<br/>
|
||
|
||
## 5. License
|
||
|
||
MIT
|
||
|
||
<br/>
|
||
|
||
## 6. Credits
|
||
|
||
**Code editor:**
|
||
|
||
- [Vue Prism Editor](https://github.com/koca/vue-prism-editor)
|