Table of Contents
A Monaco-powered code editor component with language support, theme integration, optional toolbar controls, and form association.
A simple code editor with JavaScript syntax highlighting:
<k-code-editor language='javascript'></k-code-editor>
Use the controls attribute to show built-in toolbar controls:
<k-code-editor language='javascript' controls='full'></k-code-editor>
Slot controls into the toolbar for a custom layout:
<k-code-editor language='html'>
<kc-format-code slot='toolbar-top-left'></kc-format-code>
<kc-copy-code slot='toolbar-top-left'></kc-copy-code>
<kc-editor-theme slot='toolbar-top-right'></kc-editor-theme>
<kc-fullscreen slot='toolbar-top-right'></kc-fullscreen>
</k-code-editor>
The default height is 400px. Override it with an inline style or CSS class on the element:
<k-code-editor style='height: 500px'></k-code-editor>
The code editor supports form association. Add a name attribute so the value is submitted with the form, and use required to enforce validation:
<form id='codeForm'>
<k-code-editor name='code' language='javascript' required class='b r'></k-code-editor>
<button type='submit' class='btn mt'>Submit</button>
</form>
<pre id='formOutput'></pre>
<script>
document.getElementById('codeForm').addEventListener('submit', e => {
e.preventDefault();
const data = new FormData(e.target);
document.getElementById('formOutput').textContent = data.get('code');
});
</script>
The disabled attribute makes the editor non-interactive (Monaco is set to readOnly), mutes the toolbar, fades the host, and excludes the field from form submission.
<k-code-editor disabled value="..."></k-code-editor>
Interact with the editor programmatically:
const editor = document.querySelector('k-code-editor');
editor.setValue('console.log("hello")');
const code = editor.getValue();
editor.setLanguage('html');
editor.formatCode();
editor.undo();
editor.redo();
editor.copyToClipboard();
editor.openFind();
editor.setWordWrap(true);
editor.setMinimap(true);
editor.increaseFontSize();
editor.decreaseFontSize();
editor.foldAll();
editor.unfoldAll();
editor.setEditorTheme('dark');
The CodeEditor component is created via its custom element tag <k-code-editor>.
| Property | Attribute | Type | Default | Description |
|---|
name | name | String | '' | Form field name |
value | value | String | '' | Editor content |
language | language | String | 'javascript' | Monaco language mode (e.g. javascript, html, css, json, typescript) |
controls | controls | String | '' | Set to 'full' for built-in toolbar; 'none' or empty for no built-in controls |
monacoSrc | monaco-src | String | '' | Custom Monaco CDN base URL |
editorTheme | editor-theme | String | 'auto' | Theme override: 'auto' (matches site theme), 'light', or 'dark' |
disabled | disabled | Boolean | false | Editor is non-interactive (Monaco set to readOnly), toolbar is muted, host fades, and the field is excluded from form submission |
required | required | Boolean | false | When true and the editor is empty, the element reports a valueMissing validity error |
Configure the Monaco CDN URL globally before importing the component:
window.kempo = {
monacoUrl: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min'
};
| Method | Returns | Description |
|---|
getValue() | String | Returns the current editor content |
setValue(str) | this | Sets the editor content |
clear() | this | Clears the editor content |
formatCode() | this | Formats/beautifies the code using Monaco's built-in formatter |
selectAll() | this | Selects all content |
getSelectedText() | String | Returns the currently selected text |
focus() | this | Focuses the editor |
setLanguage(lang) | this | Changes the syntax language |
setEditorTheme(theme) | this | Sets theme override: 'auto', 'light', or 'dark' |
copyToClipboard() | this | Copies the editor content to the clipboard |
undo() | this | Undoes the last edit |
redo() | this | Redoes the last undone edit |
setWordWrap(enabled) | this | Enables or disables word wrapping |
setMinimap(enabled) | this | Shows or hides the minimap |
openFind() | this | Opens Monaco's built-in Find & Replace dialog |
increaseFontSize() | this | Increases font size by 2px (max 40) |
decreaseFontSize() | this | Decreases font size by 2px (min 8) |
foldAll() | this | Folds all code regions |
unfoldAll() | this | Unfolds all code regions |
| Event | detail | Description |
|---|
ready | { value } | Fired when Monaco is initialized and ready |
change | { value } | Fired when the content changes |
input | { value } | Fired on each keystroke/edit |
| Slot | Description |
|---|
toolbar-top-left | Left section of the top toolbar |
toolbar-top-center | Center section of the top toolbar |
toolbar-top-right | Right section of the top toolbar |
toolbar-top | Full-width top toolbar |
toolbar-bottom-left | Left section of the bottom toolbar |
toolbar-bottom-center | Center section of the bottom toolbar |
toolbar-bottom-right | Right section of the bottom toolbar |
toolbar-bottom | Full-width bottom toolbar |
Available Controls
| Element | Description |
|---|
<kc-format-code> | Formats the code using Monaco's built-in formatter |
<kc-copy-code> | Copies the editor content to the clipboard |
<kc-undo> | Undoes the last edit |
<kc-redo> | Redoes the last undone edit |
<kc-word-wrap> | Toggles word wrapping on/off |
<kc-minimap> | Toggles the minimap on/off |
<kc-find-replace> | Opens Monaco's Find & Replace dialog |
<kc-font-size> | Container for increase/decrease font size buttons |
<kc-font-size-decrease> | Decreases the editor font size |
<kc-font-size-increase> | Increases the editor font size |
<kc-fold-all> | Toggles fold/unfold all code regions |
<kc-fullscreen> | Toggles the editor in and out of fullscreen — visible in all modes |
<kc-language> | Select dropdown to change the syntax language |
<kc-editor-theme> | Select dropdown to switch between auto, light, and dark editor themes |
<k-control-group> | Groups controls visually with shared borders |
<kc-spacer> | Flexible spacer to push controls apart |
Kempo UI