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>

---

Basic Properties

Name	Description	Type	Default
value	The initial value for code	String	""
language	Language to edit	'javascript' | 'sql' | 'json'	'javascript'
placeholder	place holder for code editor	string	false
error-message	Errormessage to show	String	""
error	To highlight border in red	Boolean	false
noborder	Show or hide border	boolean	false
readonly	Defined if the content in code editor is editable or not	boolean	false
multiline	Code editor in multiline	boolean	false
enableSearch	Enable word search in code editor	boolean	false
lineNumbers	Show or hide line numbers ( controllable for single line state code editor)	boolean	false
lineNumbersMultiline	Show or hide line numbers ( controllable for multiline line state of code editor)	boolean	true
expandable	Show of hide expand icon on upper right corner	boolean	true
expandIcon	Name of the expand icon to be used	string	"expand-2"

---

Complex Properties

Name	Description	Type	Default
enableFoldGutters	Enables collapsing of code based on indentation	boolean	false
customAutoCompletions	Custom autocompletions (recomneded for javascript)	object	{}
customCompletionsPaths	list of paths to be used for custom completions suggestions	string[]	[]
allowVariableInCustomSuggestion	allows usage of variables in custom autosuggestions	boolean	false
customThemeCSS	Object for css classes to be injected in codemirror instance to produce its DOM. Example Resource	Object	null
hasScroller	Show or hide scroller	boolean	false
disableSyntaxHighlighting	Disable the langulage syntax highlighting (coloring)	boolean	false
debounce	Adds a slight delay i.e. emits nile change after 200 ms of when user has stopped typing	boolean	false
debounceTimeout	Timeout for when debounce property is set to true	number	200(ms)
aboveCursor	By default, completions are shown below the cursor when there is space. Setting this to true will make the completions above the cursor when possible.	boolean	false

---

Events

Name	Description	Event Detail
nile-init	Emitted when the component connects.
nile-destroy	Emitted when the component disconnects.
nile-change	Emitted when the content inside code-editor changes	{value: string}
nile-after-init	Emitted after the dom mounted to the document	{ codeMirrorInstance: codemirror instance, insertAtCursor: function,createNewView: function}
nile-after-update	Emit after the view has been updated	Exposes: function createNewView, codeMirrorInstance
nile-expand	Emitted when expand icon is clicked	{ expand: true }
nile-focus	Emitted when expand icon is clicked	{ expand: true }
nile-blur	Emitted when user foucses in of code editor	-

---