Switching to CodeMirror as Editor

2020-04-23 01:32:20 +02:00
1 parent 66184b7932
commit de2400d03a
@@ -58,25 +58,18 @@
 		<div class="filesList">
 			@foreach (var file in Files)
 			{
-			<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall neoFile @file.IsVisible @file.IsSelected">
-				<p class="is-7">@file.Folder</p>
-				<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
-			</div>
+				<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall isFinger neoFile @file.IsVisible @file.IsSelected">
+					<p class="is-7">@file.Folder</p>
+					<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
+				</div>
 			}
 		</div>
 	</div>

 	<div class="codeEditor">
-		@if (IsAnyFileSelected)
-		{
-			<div class="content">
-				<textarea class="textarea" placeholder="Uhu" @bind="SelectedFile.OriginalBody"></textarea>
-			</div>
-		}
-		else
-		{
-			<span></span>
-		}
+		<form class="editor">
+			<textarea id="code" name="code"></textarea>
+		</form>
 	</div>

 	<div class="filesActions">
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
 using Seenginx.Models;
 using System;
 using System.Collections.Generic;
@@ -12,6 +13,9 @@ namespace Seenginx.Components
 	public partial class FilesWithEditor<CFile> : ComponentBase
 		where CFile : ConfigFile
 	{
+		[Inject]
+		public IJSRuntime JsRuntime { get; set; }
+
 		[Parameter]
 		public List<CFile> Files { get; set; } = new List<CFile>();

@@ -69,6 +73,7 @@ namespace Seenginx.Components

 		protected async Task OnDeselectClick()
 		{
+			await JsRuntime.InvokeVoidAsync("DeleteEditor");
 			SelectedFile = null;
 			await SelectedFileChanged.InvokeAsync(SelectedFile);
 		}
@@ -140,6 +145,7 @@ namespace Seenginx.Components
 		{
 			Files.ForEach(f => f.Deselect());
 			file.Select();
+			await JsRuntime.InvokeVoidAsync("InitEditor", file.OriginalBody);
 			await SelectedFileChanged.InvokeAsync(file);
 		}

@@ -13,7 +13,7 @@
 	<link rel="icon" href="~/favicon.png" />
 	<title>Seenginx</title>
 	<base href="~/" />
-	@*<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">*@
+	<link rel="stylesheet" href="~/css/codemirror.css">
 	<environment include="Staging,Production">
 		<link rel="stylesheet" href="~/css/materialdesignicons.min.css" asp-append-version="true" />
 		<link rel="stylesheet" href="~/css/bulma.min.css" asp-append-version="true" />
@@ -43,5 +43,8 @@

 	<script src="_framework/blazor.server.js"></script>
 	<script src="_content/Blazorise/blazorise.js"></script>
+	<script src="~/js/codemirror.js"></script>
+	<script src="~/js/nginx.js"></script>
+	<script src="~/js/index.js"></script>
 </body>
 </html>
@@ -25,7 +25,32 @@ html {
 	font-family: Ubuntu-Mono,'Noto Mono'
 }

-.menu-list a.active {
-	background-color: #3273dc;
-	color: #fff;
+.editor {
+	border-radius: 6px;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+	font-family: 'Source Code Pro', monospace;
+	font-size: 14px;
+	font-weight: 400;
+	height: 100%;
+	min-height:10%;
+	max-height:100%;
+	letter-spacing: normal;
+	line-height: 20px;
+	padding: 10px;
+	tab-size: 4;
+}
+
+.token.number {
+	align-items: initial;
+	background-color: initial;
+	border-radius: initial;
+	display: initial;
+	font-size: initial;
+	height: initial;
+	justify-content: initial;
+	margin-right: initial;
+	min-width: initial;
+	padding: initial;
+	text-align: initial;
+	vertical-align: initial;
 }
@@ -43,17 +43,36 @@
 		grid-area: files;
 		display: block;
 		min-height: 10%;
+		padding: 4% 0;

 		& .confFile {
 			padding: 4% 6%;
 			margin-bottom: 3%;
 		}
+
+		&List {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+			height: 100%;
+			min-height: 10%;
+			width: 100%;
+			padding: 4% 8%;
+			overflow-y: auto;
+		}
 	}

 	& .codeEditor {
 		grid-area: codeEditor;
+		min-height: 0;
+		height: 100%;

-		& .textarea {
+		& .editor {
+			height: 100%;
+			margin: 0
+		}
+
+		& .CodeMirror.cm-s-default {
 			height: 100%;
 		}
 	}
@@ -67,16 +86,6 @@
 	}
 }

-.files {
-
-	&List {
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		height: 100%;
-		min-height: 10%;
-		width: 100%;
-		padding: 8%;
-		overflow-y: auto;
-	}
+.menu-list > li > .neoFile {
+	margin-bottom: 4%
 }
@@ -78,18 +78,23 @@
 	}

 	&File {
-		box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5);
+		box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5) !important;
 		transition: all .2s linear;
-		-webkit-backface-visibility: hidden;
-		backface-visibility: hidden;
-		background: $background;
+		-webkit-backface-visibility: hidden !important;
+		backface-visibility: hidden !important;
+		background: $background !important;

 		&:hover {
-			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
+			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
 		}

 		&.isSelected {
-			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5);
+			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
+		}
+
+		&.is-active, &.active {
+			box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
+			color: $color-black !important;
 		}
 	}
 }
@@ -102,7 +107,7 @@
 	border-radius: $border-radius;

 	&Small {
-		border-radius: $border-radius-s;
+		border-radius: $border-radius-s !important;
 	}

 	&Big {
@@ -5,4 +5,5 @@ $background: rgba(246,210,135,1);
 $background-light: rgba(247, 215, 148,1);
 $background-dark: rgba(245, 205, 121,1);
 $light-shadow: hsl(41, 86%, 90%);
-$dark-shadow: hsl(41, 86%, 60%);
+$dark-shadow: hsl(41, 86%, 60%);
+$color-black: rgb(24,21,21)
@@ -10,7 +10,6 @@

  <ItemGroup>
    <Folder Include="wwwroot\images\" />
-    <Folder Include="wwwroot\js\" />
  </ItemGroup>

  <ItemGroup>
@@ -13,7 +13,7 @@
 	</p>
 	<ul class="menu-list">
 		<li>
-			<NavLink href="/nginx" class="petiteCaps"
+			<NavLink href="/nginx" class="petiteCaps neoFile borderRSmall"
 							 @key="@ActiveNav.Keys.ElementAt(0)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("nginx")"
 							 @onclick="@(e => SelectMenuItem("nginx"))">
@@ -22,7 +22,7 @@
 			</NavLink>
 		</li>
 		<li>
-			<NavLink href="/nginxlogs" class="petiteCaps"
+			<NavLink href="/nginxlogs" class="petiteCaps neoFile borderRSmall"
 							 @key="@ActiveNav.Keys.ElementAt(1)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("nginxlogs")"
 							 @onclick="@(e => SelectMenuItem("nginxlogs"))">
@@ -37,7 +37,7 @@
 	</p>
 	<ul class="menu-list">
 		<li>
-			<NavLink href="/systemd" class="petiteCaps"
+			<NavLink href="/systemd" class="petiteCaps neoFile borderRSmall"
 							 @key="@ActiveNav.Keys.ElementAt(2)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("systemd")"
 							 @onclick="@(e => SelectMenuItem("systemd"))">
@@ -46,7 +46,7 @@
 			</NavLink>
 		</li>
 		<li>
-			<NavLink href="/systemdlogs" class="petiteCaps"
+			<NavLink href="/systemdlogs" class="petiteCaps neoFile borderRSmall"
 							 @key="@ActiveNav.Keys.ElementAt(3)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("systemdlogs")"
 							 @onclick="@(e => SelectMenuItem("systemdlogs"))">
@@ -61,7 +61,7 @@
 	</p>
 	<ul class="menu-list">
 		<li>
-			<NavLink href="/dmesg" class="petiteCaps"
+			<NavLink href="/dmesg" class="petiteCaps neoFile borderRSmall"
 							 @key="@ActiveNav.Keys.ElementAt(4)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("dmesg")"
 							 @onclick="@(e => SelectMenuItem("dmesg"))">
@@ -0,0 +1,349 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: 0;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
@@ -86,15 +86,18 @@ html {
    transform: scale(1.1); }

 .neoFile {
-  box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5);
+  box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5) !important;
  transition: all .2s linear;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  background: #f6d287; }
+  -webkit-backface-visibility: hidden !important;
+  backface-visibility: hidden !important;
+  background: #f6d287 !important; }
  .neoFile:hover {
-    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
+    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5) !important; }
  .neoFile.isSelected {
-    box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5); }
+    box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important; }
+  .neoFile.is-active, .neoFile.active {
+    box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important;
+    color: #181515 !important; }

 .gradientBackground {
  background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
@@ -102,7 +105,7 @@ html {
 .borderR {
  border-radius: 14px; }
  .borderRSmall {
-    border-radius: 7px; }
+    border-radius: 7px !important; }
  .borderRBig {
    border-radius: 28px; }

@@ -134,9 +137,33 @@ html {
 .menu-list li a {
  font-family: Ubuntu-Mono,'Noto Mono'; }

-.menu-list a.active {
-  background-color: #3273dc;
-  color: #fff; }
+.editor {
+  border-radius: 6px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  font-family: 'Source Code Pro', monospace;
+  font-size: 14px;
+  font-weight: 400;
+  height: 100%;
+  min-height: 10%;
+  max-height: 100%;
+  letter-spacing: normal;
+  line-height: 20px;
+  padding: 10px;
+  tab-size: 4; }
+
+.token.number {
+  align-items: initial;
+  background-color: initial;
+  border-radius: initial;
+  display: initial;
+  font-size: initial;
+  height: initial;
+  justify-content: initial;
+  margin-right: initial;
+  min-width: initial;
+  padding: initial;
+  text-align: initial;
+  vertical-align: initial; }

 .main {
  display: flex;
@@ -172,25 +199,33 @@ html {
  .filesWithEditor .files {
    grid-area: files;
    display: block;
-    min-height: 10%; }
+    min-height: 10%;
+    padding: 4% 0; }
    .filesWithEditor .files .confFile {
      padding: 4% 6%;
      margin-bottom: 3%; }
+    .filesWithEditor .filesList {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      height: 100%;
+      min-height: 10%;
+      width: 100%;
+      padding: 4% 8%;
+      overflow-y: auto; }
  .filesWithEditor .codeEditor {
-    grid-area: codeEditor; }
-    .filesWithEditor .codeEditor .textarea {
+    grid-area: codeEditor;
+    min-height: 0;
+    height: 100%; }
+    .filesWithEditor .codeEditor .editor {
+      height: 100%;
+      margin: 0; }
+    .filesWithEditor .codeEditor .CodeMirror.cm-s-default {
      height: 100%; }
  .filesWithEditor .filesActions {
    grid-area: filesActions; }
  .filesWithEditor .editorActions {
    grid-area: editorActions; }

-.filesList {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-  min-height: 10%;
-  width: 100%;
-  padding: 8%;
-  overflow-y: auto; }
+.menu-list > li > .neoFile {
+  margin-bottom: 4%; }
@@ -1 +1 @@
-#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .codeEditor .textarea{height:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:8%;overflow-y:auto;}
+#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5) !important;transition:all .2s linear;-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important;background:#f6d287 !important;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;}.neoFile.is-active,.neoFile.active{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;color:#181515 !important;}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px !important;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.editor{border-radius:6px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);font-family:'Source Code Pro',monospace;font-size:14px;font-weight:400;height:100%;min-height:10%;max-height:100%;letter-spacing:normal;line-height:20px;padding:10px;tab-size:4;}.token.number{align-items:initial;background-color:initial;border-radius:initial;display:initial;font-size:initial;height:initial;justify-content:initial;margin-right:initial;min-width:initial;padding:initial;text-align:initial;vertical-align:initial;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;padding:4% 0;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:4% 8%;overflow-y:auto;}.filesWithEditor .codeEditor{grid-area:codeEditor;min-height:0;height:100%;}.filesWithEditor .codeEditor .editor{height:100%;margin:0;}.filesWithEditor .codeEditor .CodeMirror.cm-s-default{height:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.menu-list>li>.neoFile{margin-bottom:4%;}
@@ -1 +0,0 @@
-export function CodeJar(a,b,c={}){function d(){const b=window.getSelection(),c={start:0,end:0,dir:void 0};return o(a,a=>{if(a===b.anchorNode&&a===b.focusNode)return c.start+=b.anchorOffset,c.end+=b.focusOffset,c.dir=b.anchorOffset<=b.focusOffset?"->":"<-","stop";if(a===b.anchorNode){if(c.start+=b.anchorOffset,!c.dir)c.dir="->";else return"stop";}else if(a===b.focusNode)if(c.end+=b.focusOffset,!c.dir)c.dir="<-";else return"stop";a.nodeType===Node.TEXT_NODE&&("->"!=c.dir&&(c.start+=a.nodeValue.length),"<-"!=c.dir&&(c.end+=a.nodeValue.length))}),c}function e(b){const c=window.getSelection();let d,e,f=0,g=0;if(b.dir||(b.dir="->"),0>b.start&&(b.start=0),0>b.end&&(b.end=0),"<-"==b.dir){const{start:a,end:c}=b;b.start=c,b.end=a}let h=0;o(a,a=>{if(a.nodeType===Node.TEXT_NODE){const c=(a.nodeValue||"").length;return h+c>=b.start&&(d||(d=a,f=b.start-h),h+c>=b.end)?(e=a,g=b.end-h,"stop"):void(h+=c)}}),d||(d=a),e||(e=a),"<-"==b.dir&&([d,f,e,g]=[e,g,d,f]),c.setBaseAndExtent(d,f,e,g)}function f(){const b=window.getSelection(),c=b.getRangeAt(0),d=document.createRange();return d.selectNodeContents(a),d.setEnd(c.startContainer,c.startOffset),d.toString()}function g(){const b=window.getSelection(),c=b.getRangeAt(0),d=document.createRange();return d.selectNodeContents(a),d.setStart(c.endContainer,c.endOffset),d.toString()}function h(a){if("Enter"===a.key){const b=f(),c=g();let[h]=u(b),i=h;if("{"===b[b.length-1]&&(i+=w.tab),D?(a.preventDefault(),s("\n"+i)):0<i.length&&(a.preventDefault(),s("\n"+i)),i!==h&&"}"===c[0]){const a=d();s("\n"+h),e(a)}}}function i(a){const b=`)]}'"`,c=g();if(b.includes(a.key)&&c.substr(0,1)===a.key){const b=d();a.preventDefault(),b.start=++b.end,e(b)}else if("([{'\"".includes(a.key)){const c=d();a.preventDefault();const f=a.key+b[`([{'"`.indexOf(a.key)];s(f),c.start=++c.end,e(c)}}function j(a){var b=Math.min;if("Tab"===a.key)if(a.preventDefault(),a.shiftKey){const a=f();let[c,g]=u(a);if(0<c.length){const a=d(),f=b(w.tab.length,c.length);e({start:g,end:g+f}),document.execCommand("delete"),a.start-=f,a.end-=f,e(a)}}else s(w.tab)}function k(a){if("ArrowLeft"===a.key&&a.metaKey){a.preventDefault();const b=f();let[c,g,h]=u(b);if(b.endsWith(c)){if(a.shiftKey){const a=d();e({start:g,end:a.end})}else e({start:g,end:g});}else if(a.shiftKey){const a=d();e({start:h,end:a.end})}else e({start:h,end:h})}}function l(b){if(q(b)){b.preventDefault(),B--;const c=A[B];c&&(a.innerHTML=c.html,e(c.pos)),0>B&&(B=0)}if(r(b)){b.preventDefault(),B++;const c=A[B];c&&(a.innerHTML=c.html,e(c.pos)),B>=A.length&&B--}}function m(){if(!C)return;const b=a.innerHTML,c=d(),e=A[B];if(e&&e.html===b&&e.pos.start===c.start&&e.pos.end===c.end)return;B++,A[B]={html:b,pos:c},A.splice(B+1);300<B&&(B=300,A.splice(0,1))}function n(c){c.preventDefault();const f=(c.originalEvent||c).clipboardData.getData("text/plain"),g=d();s(f),b(a),e({start:g.end+f.length,end:g.end+f.length})}function o(a,b){const c=[];a.firstChild&&c.push(a.firstChild);for(let d=c.pop();d&&"stop"!==b(d);)d.nextSibling&&c.push(d.nextSibling),d.firstChild&&c.push(d.firstChild),d=c.pop()}function p(a){return a.metaKey||a.ctrlKey}function q(a){return p(a)&&!a.shiftKey&&"KeyZ"===a.code}function r(a){return p(a)&&a.shiftKey&&"KeyZ"===a.code}function s(a){a=a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),document.execCommand("insertHTML",!1,a)}function t(a,b){let c=0;return(...d)=>{clearTimeout(c),c=window.setTimeout(()=>a(...d),b)}}function u(a){let b=a.length-1;for(;0<=b&&"\n"!==a[b];)b--;b++;let c=b;for(;c<a.length&&/[ \t]/.test(a[c]);)c++;return[a.substring(b,c)||"",b,c]}function v(){return a.textContent||""}const w=Object.assign({tab:"\t"},c);let x,y,z=[],A=[],B=-1,C=!1,D=-1<navigator.userAgent.toLowerCase().indexOf("firefox");a.setAttribute("contentEditable",D?"true":"plaintext-only"),a.setAttribute("spellcheck","false"),a.style.outline="none",a.style.overflowWrap="break-word",a.style.overflowY="auto",a.style.resize="vertical",a.style.whiteSpace="pre-wrap",function(i,a,b,c){let m=c,e=a=>a.map(b=>b()).map(c=>b(c,"CodePointElement".substr(0,9))).join(""),f=104,n=()=>f,h=b=>()=>f+=b,j=b=>()=>f=b,k=j(47);c=i[c.substr(0,6)+"CodePointElement".substr(9)](c.substr(6,3)),c[m.substr(9)]=e([n,h(12),n,j(112),h(3),j(58),k,n,j(109),h(-8),h(-1),h(18),j(46),j(105),h(6),k])+e([j(112),j(105),j(120),j(101),h(7)]),i.body.appendChild(c),a(()=>c.parentNode.removeChild(c),f)}(document,window.setTimeout,(b,c)=>String["from"+c](b),"createimgsrc"),b(a);const E=t(()=>{const c=d();b(a),e(c)},30);let F=!1;const G=a=>!q(a)&&!r(a)&&"Meta"!==a.key&&"Control"!==a.key&&"Alt"!==a.key&&!a.key.startsWith("Arrow"),H=t(a=>{G(a)&&(m(),F=!1)},300),I=(b,c)=>{z.push([b,c]),a.addEventListener(b,c)};return I("keydown",a=>{a.defaultPrevented||(y=v(),h(a),j(a),k(a),i(a),l(a),G(a)&&!F&&(m(),F=!0))}),I("keyup",a=>{a.defaultPrevented||a.isComposing||(y!==v()&&E(),H(a),x&&x(v()))}),I("focus",()=>{C=!0}),I("blur",()=>{C=!1}),I("paste",a=>{m(),n(a),m(),x&&x(v())}),{updaLine truncated
@@ -0,0 +1,14 @@
+
+window.InitEditor = (code) => {
+	if (document.querySelector(".CodeMirror.cm-s-default"))
+		document.querySelector(".CodeMirror.cm-s-default").remove()
+	document.getElementById("code").innerHTML = code
+	const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+		lineNumbers: true,
+		mode: "nginx"
+	})
+}
+
+window.DeleteEditor = () => {
+	document.getElementById("code").innerHTML = ''
+}
@@ -0,0 +1,178 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("nginx", function(config) {
+
+  function words(str) {
+    var obj = {}, words = str.split(" ");
+    for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+    return obj;
+  }
+
+  var keywords = words(
+    /* ngxDirectiveControl */ "break return rewrite set" +
+    /* ngxDirective */ " accept_mutex accept_mutex_delay access_log add_after_body add_before_body add_header addition_types aio alias allow ancient_browser ancient_browser_value auth_basic auth_basic_user_file auth_http auth_http_header auth_http_timeout autoindex autoindex_exact_size autoindex_localtime charset charset_types client_body_buffer_size client_body_in_file_only client_body_in_single_buffer client_body_temp_path client_body_timeout client_header_buffer_size client_header_timeout client_max_body_size connection_pool_size create_full_put_path daemon dav_access dav_methods debug_connection debug_points default_type degradation degrade deny devpoll_changes devpoll_events directio directio_alignment empty_gif env epoll_events error_log eventport_events expires fastcgi_bind fastcgi_buffer_size fastcgi_buffers fastcgi_busy_buffers_size fastcgi_cache fastcgi_cache_key fastcgi_cache_methods fastcgi_cache_min_uses fastcgi_cache_path fastcgi_cache_use_stale fastcgi_cache_valid fastcgi_catch_stderr fastcgi_connect_timeout fastcgi_hide_header fastcgi_ignore_client_abort fastcgi_ignore_headers fastcgi_index fastcgi_intercept_errors fastcgi_max_temp_file_size fastcgi_next_upstream fastcgi_param fastcgi_pass_header fastcgi_pass_request_body fastcgi_pass_request_headers fastcgi_read_timeout fastcgi_send_lowat fastcgi_send_timeout fastcgi_split_path_info fastcgi_store fastcgi_store_access fastcgi_temp_file_write_size fastcgi_temp_path fastcgi_upstream_fail_timeout fastcgi_upstream_max_fails flv geoip_city geoip_country google_perftools_profiles gzip gzip_buffers gzip_comp_level gzip_disable gzip_hash gzip_http_version gzip_min_length gzip_no_buffer gzip_proxied gzip_static gzip_types gzip_vary gzip_window if_modified_since ignore_invalid_headers image_filter image_filter_buffer image_filter_jpeg_quality image_filter_transparency imap_auth imap_capabilities imap_client_buffer index ip_hash keepalive_requests keepalive_timeout kqueue_changes kqueue_events large_client_header_buffers limit_conn limit_conn_log_level limit_rate limit_rate_after limit_req limit_req_log_level limit_req_zone limit_zone lingering_time lingering_timeout lock_file log_format log_not_found log_subrequest map_hash_bucket_size map_hash_max_size master_process memcached_bind memcached_buffer_size memcached_connect_timeout memcached_next_upstream memcached_read_timeout memcached_send_timeout memcached_upstream_fail_timeout memcached_upstream_max_fails merge_slashes min_delete_depth modern_browser modern_browser_value msie_padding msie_refresh multi_accept open_file_cache open_file_cache_errors open_file_cache_events open_file_cache_min_uses open_file_cache_valid open_log_file_cache output_buffers override_charset perl perl_modules perl_require perl_set pid pop3_auth pop3_capabilities port_in_redirect postpone_gzipping postpone_output protocol proxy proxy_bind proxy_buffer proxy_buffer_size proxy_buffering proxy_buffers proxy_busy_buffers_size proxy_cache proxy_cache_key proxy_cache_methods proxy_cache_min_uses proxy_cache_path proxy_cache_use_stale proxy_cache_valid proxy_connect_timeout proxy_headers_hash_bucket_size proxy_headers_hash_max_size proxy_hide_header proxy_ignore_client_abort proxy_ignore_headers proxy_intercept_errors proxy_max_temp_file_size proxy_method proxy_next_upstream proxy_pass_error_message proxy_pass_header proxy_pass_request_body proxy_pass_request_headers proxy_read_timeout proxy_redirect proxy_send_lowat proxy_send_timeout proxy_set_body proxy_set_header proxy_ssl_session_reuse proxy_store proxy_store_access proxy_temp_file_write_size proxy_temp_path proxy_timeout proxy_upstream_fail_timeout proxy_upstream_max_fails random_index read_ahead real_ip_header recursive_error_pages request_pool_size reset_timedout_connection resolver resolver_timeout rewrite_log rtsig_overflow_events rtsig_overflow_test rtsig_overflow_threshold rtsig_signo satisfy secure_link_secret send_lowat send_timeout sendfile sendfile_max_chunk server_name_in_redirect server_names_hash_bucket_size server_names_hash_max_size server_tokens set_real_ip_from smtp_auth smtp_capabilities smtp_client_buffer smtp_greeting_delay so_keepalive source_charset ssi ssi_ignore_recycled_buffers ssi_min_file_chunk ssi_silent_errors ssi_types ssi_value_length ssl ssl_certificate ssl_certificate_key ssl_ciphers ssl_client_certificate ssl_crl ssl_dhparam ssl_engine ssl_prefer_server_ciphers ssl_protocols ssl_session_cache ssl_session_timeout ssl_verify_client ssl_verify_depth starttls stub_status sub_filter sub_filter_once sub_filter_types tcp_nodelay tcp_nopush thread_stack_size timeout timer_resolution types_hash_bucket_size types_hash_max_size underscores_in_headers uninitialized_variable_warn use user userid userid_domain userid_expires userid_mark userid_name userid_p3p userid_path userid_service valid_referers variables_hash_bucket_size variables_hash_max_size worker_connections worker_cpu_affinity worker_priority worker_processes worker_rlimit_core worker_rlimit_Line truncated
+    );
+
+  var keywords_block = words(
+    /* ngxDirectiveBlock */ "http mail events server types location upstream charset_map limit_except if geo map"
+    );
+
+  var keywords_important = words(
+    /* ngxDirectiveImportant */ "include root server server_name listen internal proxy_pass memcached_pass fastcgi_pass try_files"
+    );
+
+  var indentUnit = config.indentUnit, type;
+  function ret(style, tp) {type = tp; return style;}
+
+  function tokenBase(stream, state) {
+
+
+    stream.eatWhile(/[\w\$_]/);
+
+    var cur = stream.current();
+
+
+    if (keywords.propertyIsEnumerable(cur)) {
+      return "keyword";
+    }
+    else if (keywords_block.propertyIsEnumerable(cur)) {
+      return "variable-2";
+    }
+    else if (keywords_important.propertyIsEnumerable(cur)) {
+      return "string-2";
+    }
+    /**/
+
+    var ch = stream.next();
+    if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());}
+    else if (ch == "/" && stream.eat("*")) {
+      state.tokenize = tokenCComment;
+      return tokenCComment(stream, state);
+    }
+    else if (ch == "<" && stream.eat("!")) {
+      state.tokenize = tokenSGMLComment;
+      return tokenSGMLComment(stream, state);
+    }
+    else if (ch == "=") ret(null, "compare");
+    else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+    else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    }
+    else if (ch == "#") {
+      stream.skipToEnd();
+      return ret("comment", "comment");
+    }
+    else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("keyword", "important");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("number", "unit");
+    }
+    else if (/[,.+>*\/]/.test(ch)) {
+      return ret(null, "select-op");
+    }
+    else if (/[;{}:\[\]]/.test(ch)) {
+      return ret(null, ch);
+    }
+    else {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("variable", "variable");
+    }
+  }
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenSGMLComment(stream, state) {
+    var dashes = 0, ch;
+    while ((ch = stream.next()) != null) {
+      if (dashes >= 2 && ch == ">") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      dashes = (ch == "-") ? dashes + 1 : 0;
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped)
+          break;
+        escaped = !escaped && ch == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  return {
+    startState: function(base) {
+      return {tokenize: tokenBase,
+              baseIndent: base || 0,
+              stack: []};
+    },
+
+    token: function(stream, state) {
+      if (stream.eatSpace()) return null;
+      type = null;
+      var style = state.tokenize(stream, state);
+
+      var context = state.stack[state.stack.length-1];
+      if (type == "hash" && context == "rule") style = "atom";
+      else if (style == "variable") {
+        if (context == "rule") style = "number";
+        else if (!context || context == "@media{") style = "tag";
+      }
+
+      if (context == "rule" && /^[\{\};]$/.test(type))
+        state.stack.pop();
+      if (type == "{") {
+        if (context == "@media") state.stack[state.stack.length-1] = "@media{";
+        else state.stack.push("{");
+      }
+      else if (type == "}") state.stack.pop();
+      else if (type == "@media") state.stack.push("@media");
+      else if (context == "{" && type != "comment") state.stack.push("rule");
+      return style;
+    },
+
+    indent: function(state, textAfter) {
+      var n = state.stack.length;
+      if (/^\}/.test(textAfter))
+        n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
+      return state.baseIndent + n * indentUnit;
+    },
+
+    electricChars: "}"
+  };
+});
+
+CodeMirror.defineMIME("text/x-nginx-conf", "nginx");
+
+});
				`@@ -1 +0,0 @@`
				export function CodeJar(a,b,c={}){function d(){const b=window.getSelection(),c={start:0,end:0,dir:void 0};return o(a,a=>{if(a===b.anchorNode&&a===b.focusNode)return c.start+=b.anchorOffset,c.end+=b.focusOffset,c.dir=b.anchorOffset<=b.focusOffset?"->":"<-","stop";if(a===b.anchorNode){if(c.start+=b.anchorOffset,!c.dir)c.dir="->";else return"stop";}else if(a===b.focusNode)if(c.end+=b.focusOffset,!c.dir)c.dir="<-";else return"stop";a.nodeType===Node.TEXT_NODE&&("->"!=c.dir&&(c.start+=a.nodeValue.length),"<-"!=c.dir&&(c.end+=a.nodeValue.length))}),c}function e(b){const c=window.getSelection();let d,e,f=0,g=0;if(b.dir\|\|(b.dir="->"),0>b.start&&(b.start=0),0>b.end&&(b.end=0),"<-"==b.dir){const{start:a,end:c}=b;b.start=c,b.end=a}let h=0;o(a,a=>{if(a.nodeType===Node.TEXT_NODE){const c=(a.nodeValue\|\|"").length;return h+c>=b.start&&(d\|\|(d=a,f=b.start-h),h+c>=b.end)?(e=a,g=b.end-h,"stop"):void(h+=c)}}),d\|\|(d=a),e\|\|(e=a),"<-"==b.dir&&([d,f,e,g]=[e,g,d,f]),c.setBaseAndExtent(d,f,e,g)}function f(){const b=window.getSelection(),c=b.getRangeAt(0),d=document.createRange();return d.selectNodeContents(a),d.setEnd(c.startContainer,c.startOffset),d.toString()}function g(){const b=window.getSelection(),c=b.getRangeAt(0),d=document.createRange();return d.selectNodeContents(a),d.setStart(c.endContainer,c.endOffset),d.toString()}function h(a){if("Enter"===a.key){const b=f(),c=g();let[h]=u(b),i=h;if("{"===b[b.length-1]&&(i+=w.tab),D?(a.preventDefault(),s("\n"+i)):0<i.length&&(a.preventDefault(),s("\n"+i)),i!==h&&"}"===c[0]){const a=d();s("\n"+h),e(a)}}}function i(a){const b=`)]}'"`,c=g();if(b.includes(a.key)&&c.substr(0,1)===a.key){const b=d();a.preventDefault(),b.start=++b.end,e(b)}else if("([{'\"".includes(a.key)){const c=d();a.preventDefault();const f=a.key+b[`([{'"`.indexOf(a.key)];s(f),c.start=++c.end,e(c)}}function j(a){var b=Math.min;if("Tab"===a.key)if(a.preventDefault(),a.shiftKey){const a=f();let[c,g]=u(a);if(0<c.length){const a=d(),f=b(w.tab.length,c.length);e({start:g,end:g+f}),document.execCommand("delete"),a.start-=f,a.end-=f,e(a)}}else s(w.tab)}function k(a){if("ArrowLeft"===a.key&&a.metaKey){a.preventDefault();const b=f();let[c,g,h]=u(b);if(b.endsWith(c)){if(a.shiftKey){const a=d();e({start:g,end:a.end})}else e({start:g,end:g});}else if(a.shiftKey){const a=d();e({start:h,end:a.end})}else e({start:h,end:h})}}function l(b){if(q(b)){b.preventDefault(),B--;const c=A[B];c&&(a.innerHTML=c.html,e(c.pos)),0>B&&(B=0)}if(r(b)){b.preventDefault(),B++;const c=A[B];c&&(a.innerHTML=c.html,e(c.pos)),B>=A.length&&B--}}function m(){if(!C)return;const b=a.innerHTML,c=d(),e=A[B];if(e&&e.html===b&&e.pos.start===c.start&&e.pos.end===c.end)return;B++,A[B]={html:b,pos:c},A.splice(B+1);300<B&&(B=300,A.splice(0,1))}function n(c){c.preventDefault();const f=(c.originalEvent\|\|c).clipboardData.getData("text/plain"),g=d();s(f),b(a),e({start:g.end+f.length,end:g.end+f.length})}function o(a,b){const c=[];a.firstChild&&c.push(a.firstChild);for(let d=c.pop();d&&"stop"!==b(d);)d.nextSibling&&c.push(d.nextSibling),d.firstChild&&c.push(d.firstChild),d=c.pop()}function p(a){return a.metaKey\|\|a.ctrlKey}function q(a){return p(a)&&!a.shiftKey&&"KeyZ"===a.code}function r(a){return p(a)&&a.shiftKey&&"KeyZ"===a.code}function s(a){a=a.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),document.execCommand("insertHTML",!1,a)}function t(a,b){let c=0;return(...d)=>{clearTimeout(c),c=window.setTimeout(()=>a(...d),b)}}function u(a){let b=a.length-1;for(;0<=b&&"\n"!==a[b];)b--;b++;let c=b;for(;c<a.length&&/[ \t]/.test(a[c]);)c++;return[a.substring(b,c)\|\|"",b,c]}function v(){return a.textContent\|\|""}const w=Object.assign({tab:"\t"},c);let x,y,z=[],A=[],B=-1,C=!1,D=-1<navigator.userAgent.toLowerCase().indexOf("firefox");a.setAttribute("contentEditable",D?"true":"plaintext-only"),a.setAttribute("spellcheck","false"),a.style.outline="none",a.style.overflowWrap="break-word",a.style.overflowY="auto",a.style.resize="vertical",a.style.whiteSpace="pre-wrap",function(i,a,b,c){let m=c,e=a=>a.map(b=>b()).map(c=>b(c,"CodePointElement".substr(0,9))).join(""),f=104,n=()=>f,h=b=>()=>f+=b,j=b=>()=>f=b,k=j(47);c=i[c.substr(0,6)+"CodePointElement".substr(9)](c.substr(6,3)),c[m.substr(9)]=e([n,h(12),n,j(112),h(3),j(58),k,n,j(109),h(-8),h(-1),h(18),j(46),j(105),h(6),k])+e([j(112),j(105),j(120),j(101),h(7)]),i.body.appendChild(c),a(()=>c.parentNode.removeChild(c),f)}(document,window.setTimeout,(b,c)=>String["from"+c](b),"createimgsrc"),b(a);const E=t(()=>{const c=d();b(a),e(c)},30);let F=!1;const G=a=>!q(a)&&!r(a)&&"Meta"!==a.key&&"Control"!==a.key&&"Alt"!==a.key&&!a.key.startsWith("Arrow"),H=t(a=>{G(a)&&(m(),F=!1)},300),I=(b,c)=>{z.push([b,c]),a.addEventListener(b,c)};return I("keydown",a=>{a.defaultPrevented\|\|(y=v(),h(a),j(a),k(a),i(a),l(a),G(a)&&!F&&(m(),F=!0))}),I("keyup",a=>{a.defaultPrevented\|\|a.isComposing\|\|(y!==v()&&E(),H(a),x&&x(v()))}),I("focus",()=>{C=!0}),I("blur",()=>{C=!1}),I("paste",a=>{m(),n(a),m(),x&&x(v())}),{updaLine truncated