handlebars-editor-react 0.1.0 → 0.1.1
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 +2 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
[](https://github.com/dogukani/handlebars-editor/blob/main/LICENSE)
|
|
5
5
|
[](https://www.npmjs.com/package/handlebars-editor-react)
|
|
6
6
|
|
|
7
|
-
A React component for editing Handlebars templates with syntax highlighting
|
|
7
|
+
A React component for editing Handlebars templates with syntax highlighting and autocomplete.
|
|
8
8
|
|
|
9
9
|
**[Live Demo](https://dogukani.github.io/handlebars-editor)**
|
|
10
10
|
|
|
@@ -12,7 +12,6 @@ A React component for editing Handlebars templates with syntax highlighting, aut
|
|
|
12
12
|
|
|
13
13
|
- Syntax highlighting for all Handlebars constructs
|
|
14
14
|
- Autocomplete for block helpers and variables
|
|
15
|
-
- Real-time validation with error display
|
|
16
15
|
- Customizable theming via CSS variables
|
|
17
16
|
- TypeScript support
|
|
18
17
|
- Zero dependencies (except React and Handlebars)
|
|
@@ -55,9 +54,6 @@ function App() {
|
|
|
55
54
|
| `theme` | `Partial<ThemeColors>` | - | Custom colors |
|
|
56
55
|
| `customHelpers` | `string[]` | `[]` | Additional helpers for autocomplete |
|
|
57
56
|
| `autocomplete` | `boolean` | `true` | Enable autocomplete |
|
|
58
|
-
| `showErrors` | `boolean` | `true` | Show error bar |
|
|
59
|
-
| `onError` | `(error: ParseError \| null) => void` | - | Error callback |
|
|
60
|
-
| `errorIcon` | `ReactNode` | - | Custom error icon |
|
|
61
57
|
| `minHeight` | `string \| number` | `100` | Minimum editor height |
|
|
62
58
|
|
|
63
59
|
## Theming
|
|
@@ -71,7 +67,6 @@ Customize colors using CSS variables or the `theme` prop:
|
|
|
71
67
|
--hbs-color-block-keyword: #a855f7;
|
|
72
68
|
--hbs-color-literal: #16a34a;
|
|
73
69
|
--hbs-color-comment: #9ca3af;
|
|
74
|
-
--hbs-color-error: #ef4444;
|
|
75
70
|
}
|
|
76
71
|
```
|
|
77
72
|
|
|
@@ -104,7 +99,6 @@ Or via props:
|
|
|
104
99
|
- `comment` - Comments
|
|
105
100
|
- `raw` - Raw output `{{{raw}}}`
|
|
106
101
|
- `brace` - Braces `{{` and `}}`
|
|
107
|
-
- `error` - Error highlighting
|
|
108
102
|
- `text` - Default text color
|
|
109
103
|
- `background` - Editor background
|
|
110
104
|
- `caret` - Cursor color
|
|
@@ -127,7 +121,7 @@ Add the `hbs-theme-dark` class to enable dark mode:
|
|
|
127
121
|
The package also exports utility functions for working with Handlebars templates:
|
|
128
122
|
|
|
129
123
|
```tsx
|
|
130
|
-
import { extract, tokenize,
|
|
124
|
+
import { extract, tokenize, interpolate } from 'handlebars-editor-react';
|
|
131
125
|
|
|
132
126
|
// Extract variables from template
|
|
133
127
|
const result = extract('Hello {{name}}, you have {{count}} messages');
|
|
@@ -136,9 +130,6 @@ console.log(result.rootVariables); // ['name', 'count']
|
|
|
136
130
|
// Tokenize for custom rendering
|
|
137
131
|
const tokens = tokenize('{{#if show}}content{{/if}}');
|
|
138
132
|
|
|
139
|
-
// Validate template syntax
|
|
140
|
-
const { isValid, error } = validate('{{#if unclosed');
|
|
141
|
-
|
|
142
133
|
// Interpolate template with data
|
|
143
134
|
const output = interpolate('Hello {{name}}!', { name: 'World' });
|
|
144
135
|
```
|
package/package.json
CHANGED