# Prompt Editor

**Repository Path**: onlookee/prompt-editor

## Basic Information

- **Project Name**: Prompt Editor
- **Description**: Prompt Editor（轻量级模板编辑器）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Prompt Editor

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)](https://github.com/your-username/prompt-editor)

A lightweight, framework-free template editor component built with vanilla JavaScript, easy to embed in other systems.

## Features

- **Lightweight**: Pure vanilla JavaScript, no framework dependencies
- **Two Modes**: Edit mode (real-time field list updates) and Use mode (static field list)
- **Syntax Highlighting**: Variable syntax highlighting
- **Variable Navigation**: Tab/Shift+Tab for quick navigation
- **Field List**: Visual field navigation panel

## Quick Start

```html
<div id="editor" style="width: 800px; height: 500px;"></div>

<link rel="stylesheet" href="./styles/editor.css">

<script type="module">
    import { createEditor } from './src/index.js'

    const instance = createEditor('#editor', {
        mode: 'edit',
        initialValue: '# {{ title | desc="Title" | required }}'
    })
</script>
```

## API

### createEditor(container, options)

Creates an editor instance.

#### Parameters

- `container`: DOM element or selector string
- `options`: Configuration object

#### Options

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| mode | string | 'edit' | Mode: 'edit' or 'use' |
| placeholder | string | '' | Placeholder text |
| initialValue | string | '' | Initial content |
| highlight | boolean | true | Enable syntax highlighting |
| navigation | boolean | true | Enable variable navigation |
| showFieldList | boolean | true | Show field list |
| fieldListPosition | string | 'right' | Field list position: 'right', 'left', 'bottom', 'none' |
| onChange | function | null | Content change callback |
| onFieldClick | function | null | Field click callback |

#### Return Value

```javascript
{
    editor: {
        getContent: () => string,
        setContent: (content) => void,
        jumpToVariable: (name) => boolean,
        getFields: () => array,
        destroy: () => void
    },
    fieldList: {
        setFields: (fields) => void,
        setCurrentField: (name) => void,
        destroy: () => void
    } | null,
    destroy: () => void
}
```

## Two Modes

### Edit Mode (mode: 'edit')

- Field list updates in real-time
- Suitable for template design and testing

### Use Mode (mode: 'use')

- Field list is initialized once and does not update with content changes
- Clicking a field jumps to its position (based on initial position)
- Suitable for using existing templates

## Template Syntax

```
{{ variable | option=value | flag }}
```

### Supported Attributes

| Attribute | Description |
|-----------|-------------|
| desc | Field description |
| required | Required flag |
| default | Default value |
| type | Field type |
| enum | Enum values |
| min/max | Length constraints |
| group | Group name |

## Examples

### Basic Usage

```javascript
const instance = createEditor('#container', {
    mode: 'edit',
    initialValue: '# {{ title | desc="Title" }}'
})

// Get content
const content = instance.editor.getContent()
```

### Listen for Changes

```javascript
const instance = createEditor('#container', {
    onChange: (data) => {
        console.log('Content:', data.content)
        console.log('Fields:', data.fields)
    }
})
```

### Embed in Existing System

```javascript
import { createEditor } from './prompt-editor/src/index.js'

const container = document.getElementById('my-editor')
const editor = createEditor(container, {
    mode: 'use',
    showFieldList: true,
    fieldListPosition: 'right',
    onChange: (data) => {
        // Sync to your system
        saveToMySystem(data.content)
    }
})
```

## Style Customization

Customize the theme using CSS variables:

```css
:root {
    --pe-primary-color: #1890ff;
    --pe-border-color: #d9d9d9;
    --pe-bg-color: #fff;
    --pe-text-color: #333;
    --pe-variable-bg: #e6f7ff;
    --pe-field-hover: #f5f5f5;
    --pe-field-active: #e6f7ff;
}
```

## Browser Compatibility

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

Requires ES Modules support.

## Contributing

Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.

## License

This project is licensed under the [MIT](LICENSE) License.

## Acknowledgments

Thanks to all contributors!