Code Editor

Simple Example

	<nile-code-editor></nile-code-editor>

Passing Value

<nile-code-editor 
	multiline
	value="let randomNumber = Math.floor(Math.random() * 100) + 1;
	console.log(`Generated number: ${randomNumber}`);
	document.body.style.backgroundColor = randomNumber % 2 === 0 ? 'blue' : 'green';"
>
</nile-code-editor>

Custom Autocompletions & Code Folding

Try typing 'user.'

<nile-code-editor 
	multiline
	enableFoldGutters
	[customAutoCompletions]='{ "user": { "profile": { "name": true, "email": true, "verified": true }, "settings": { "theme": true, "notifications": { "email": true, "sms": true } } } '
	value="let randomNumber = Math.floor(Math.random() * 100) + 1;
	console.log(`Generated number: ${randomNumber}`);
	document.body.style.backgroundColor = randomNumber % 2 === 0 ? 'blue' : 'green';
	function greetUser(name) {
			if (!name) {
					console.log('Hello, Guest!'');
					return;
			}
			const message = `Hello, ${name}! Welcome back.`;
			console.log(message);
			return message;
	}
	"
>
</nile-code-editor>

Custom Autocompletions With Object Bracket Support

Try typing 'user.'

<nile-code-editor 
	multiline
	[customAutoCompletions]='{ "user": { "profile": { "name": true, "email": true, "verified": true }, "settings": { "theme": true, "notifications": { "email": true, "sms": true } } } '
	value="let randomNumber = Math.floor(Math.random() * 100) + 1;
	console.log(`Generated number: ${randomNumber}`);
	document.body.style.backgroundColor = randomNumber % 2 === 0 ? 'blue' : 'green';"
>
</nile-code-editor>

Language + Readonly

<nile-code-editor 
	multiline 
	language="sql" 
	readonly 
	value="SELECT first_name, last_name FROM employees WHERE department = 'Sales';
	UPDATE employees SET salary = salary * 1.1 WHERE department = 'Sales';
	DELETE FROM employees WHERE hire_date < '2010-01-01';"
></nile-code-editor>

Error Message

<nile-code-editor 
	multiline
	error-message="Missing Closing Braces"
	value="const length = 10;
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	let randomString = '';
	for (let i = 0; i < length; i++) randomString += chars.charAt(Math.floor(Math.random() * chars.length"
></nile-code-editor>

Custom Theme

<nile-code-editor 
	multiline
	value="const length = 10;
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	let randomString = '';
	for (let i = 0; i < length; i++) randomString += chars.charAt(Math.floor(Math.random() * chars.length"
	[customThemeCSS]="{
		'&': {
			fontSize: '20px',
			fontFamily: 'inherit',
			fontWeight: '400',
		},
		'.cm-content': {},
		''.cm-scroller': {
			scrollbarWidth:'thin',
		},
	}"
></nile-code-editor>

Sample Custom Theme

<script>
// For inherit styling
const CustomTheme = {
  '&': {
    fontSize: 'inherit',
    fontStyle: 'inherit',
    fontFamily: 'inherit',
    fontWeight: 'inherit',
    lineHeight:'inherit',
    letterSpacing:'inherit'
  },
  
  '.cm-content': {
    fontSize: 'inherit',
    fontStyle: 'inherit',
    fontFamily: 'inherit',
    fontWeight: 'inherit',
    lineHeight:'inherit',
    letterSpacing:'inherit'
  },

  ".cm-scroller":{
    fontFamily: 'inherit'
  },

  ".cm-gutters": {
    fontFamily: 'inherit'
  },
};

// Default theme
const Theme = {
	'&': {
		fontSize: '14px',
		fontFamily: 'colfax-regular',
		fontWeight: '400',
	},
	'.cm-content': {},
	".cm-scroller": {
		scrollbarWidth:'thin',
	},
};
</script>

Add Custom Font Family

<nile-code-editor 
	multiline
	id="customTheme"
	value="const length = 10;
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	let randomString = '';
	for (let i = 0; i < length; i++) randomString += chars.charAt(Math.floor(Math.random() * chars.length"
	[customThemeCSS]="{
		'.cm-content': {
			fontFamily: 'Times New Roman'
		},
		'.cm-tooltip.cm-tooltip-autocomplete > ul' : {
			fontFamily: 'Times New Roman',
		},
	}"
></nile-code-editor>

'.cm-content': Set the font family to 'Times New Roman' in the code editor.
'.cm-tooltip.cm-tooltip-autocomplete > ul': Set the font family of the autocomplete dropdown to 'Times New Roman'.

Basic Properties

Complex Properties

Events