feat: use ace

public/ace/css/theme/monokai.css

@@ -0,0 +1,97 @@
+.ace-monokai .ace_gutter {
+background: #2F3129;
+color: #8F908A
+}
+.ace-monokai .ace_print-margin {
+width: 1px;
+background: #555651
+}
+.ace-monokai {
+background-color: #272822;
+color: #F8F8F2
+}
+.ace-monokai .ace_cursor {
+color: #F8F8F0
+}
+.ace-monokai .ace_marker-layer .ace_selection {
+background: #49483E
+}
+.ace-monokai.ace_multiselect .ace_selection.ace_start {
+box-shadow: 0 0 3px 0px #272822;
+}
+.ace-monokai .ace_marker-layer .ace_step {
+background: rgb(102, 82, 0)
+}
+.ace-monokai .ace_marker-layer .ace_bracket {
+margin: -1px 0 0 -1px;
+border: 1px solid #49483E
+}
+.ace-monokai .ace_marker-layer .ace_active-line {
+background: #202020
+}
+.ace-monokai .ace_gutter-active-line {
+background-color: #272727
+}
+.ace-monokai .ace_marker-layer .ace_selected-word {
+border: 1px solid #49483E
+}
+.ace-monokai .ace_invisible {
+color: #52524d
+}
+.ace-monokai .ace_entity.ace_name.ace_tag,
+.ace-monokai .ace_keyword,
+.ace-monokai .ace_meta.ace_tag,
+.ace-monokai .ace_storage {
+color: #F92672
+}
+.ace-monokai .ace_punctuation,
+.ace-monokai .ace_punctuation.ace_tag {
+color: #fff
+}
+.ace-monokai .ace_constant.ace_character,
+.ace-monokai .ace_constant.ace_language,
+.ace-monokai .ace_constant.ace_numeric,
+.ace-monokai .ace_constant.ace_other {
+color: #AE81FF
+}
+.ace-monokai .ace_invalid {
+color: #F8F8F0;
+background-color: #F92672
+}
+.ace-monokai .ace_invalid.ace_deprecated {
+color: #F8F8F0;
+background-color: #AE81FF
+}
+.ace-monokai .ace_support.ace_constant,
+.ace-monokai .ace_support.ace_function {
+color: #66D9EF
+}
+.ace-monokai .ace_fold {
+background-color: #A6E22E;
+border-color: #F8F8F2
+}
+.ace-monokai .ace_storage.ace_type,
+.ace-monokai .ace_support.ace_class,
+.ace-monokai .ace_support.ace_type {
+font-style: italic;
+color: #66D9EF
+}
+.ace-monokai .ace_entity.ace_name.ace_function,
+.ace-monokai .ace_entity.ace_other,
+.ace-monokai .ace_entity.ace_other.ace_attribute-name,
+.ace-monokai .ace_variable {
+color: #A6E22E
+}
+.ace-monokai .ace_variable.ace_parameter {
+font-style: italic;
+color: #FD971F
+}
+.ace-monokai .ace_string {
+color: #E6DB74
+}
+.ace-monokai .ace_comment {
+color: #75715E
+}
+.ace-monokai .ace_indent-guide {
+background: url("../monokai-1.png") right repeat-y
+}

public/embed.go

@@ -2,5 +2,5 @@ package public
 
 import "embed"
 
-//go:embed js css
+//go:embed js css ace
 var FS embed.FS

src/main.js

@@ -1 +1 @@
-import "./editor"
+import "./ace"

src/main.scss

@@ -1,5 +1,4 @@
 @charset "utf-8";
 @import "../node_modules/bulma/bulma.sass";
 
-@import "./scss/prism.scss";
+@import "./ace.scss"
-@import "./scss/editor.scss";

src/tmp.css

@@ -1,233 +0,0 @@
-/* Code-Input Compability */
-/* By WebCoder49 */
-/* First Published on CSS-Tricks.com */
-
-textarea {
-    border: none;
-    overflow: auto;
-    outline: none;
-
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-
-    resize: none; /*remove the resize handle on the bottom right*/
-}
-.content .tag, .content .number {
-    display: inline;
-    padding: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    vertical-align: inherit;
-    border-radius: inherit;
-    font-weight: inherit;
-    white-space: inherit;
-    background: inherit;
-    margin: inherit;
-  }
-  
-/* Please see the article */
-
-#editing, #highlighting {
-    /* Both elements need the same text and space styling so they are directly on top of each other */
-    margin: 10px;
-    padding: 10px;
-    border: 0;
-    width: calc(100% - 32px);
-    height: 150px;
-  }
-  #editing, #highlighting, #highlighting * {
-    /* Also add text styles to highlighing tokens */
-    font-size: 15pt;
-    font-family: monospace;
-    line-height: 20pt;
-    tab-size: 2;
-  }
-  
-  
-  #editing, #highlighting {
-    /* In the same place */
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  
-  /* Move the textarea in front of the result */
-  
-  #editing {
-    z-index: 1;
-  }
-  #highlighting {
-    z-index: 0;
-  }
-  
-  
-  /* Make textarea almost completely transparent */
-  
-  #editing {
-    color: transparent;
-    background: transparent;
-    caret-color: white; /* Or choose your favourite color */
-  }
-  
-  /* Can be scrolled */
-  #editing, #highlighting {
-    overflow: auto;
-    white-space: nowrap; /* Allows textarea to scroll horizontally */
-  }
-  
-  /* No resize on textarea */
-  #editing {
-    resize: none;
-  }
-  
-  /* Paragraphs; First Image */
-  * {
-    font-family: "Fira Code", monospace;
-  }
-  p code {
-    border-radius: 2px;
-    background-color: #eee;
-    color: #111;
-  }
-  
-  
-  /* Syntax Highlighting from prism.js starts below, partly modified: */
-  
-  /* PrismJS 1.23.0
-  https://prismjs.com/download.html#themes=prism-funky&languages=markup */
-  /**
-   * prism.js Funky theme
-   * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
-   * @author Lea Verou
-   */
-  
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    font-size: 1em;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-  
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-  
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-  
-  /* Code blocks */
-  pre[class*="language-"] {
-    padding: .4em .8em;
-    margin: .5em 0;
-    overflow: auto;
-    /* background: url('data:image/svg+xml;charset=utf-8,<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"100"%20height%3D"100"%20fill%3D"rgba(0%2C0%2C0%2C.2)">%0D%0A<polygon%20points%3D"0%2C50%2050%2C0%200%2C0"%20%2F>%0D%0A<polygon%20points%3D"0%2C100%2050%2C100%20100%2C50%20100%2C0"%20%2F>%0D%0A<%2Fsvg>');
-    background-size: 1em 1em; - WebCoder49*/
-    background: black; /* - WebCoder49 */
-  }
-  
-  code[class*="language-"] {
-    background: black;
-    color: white;
-    box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
-  }
-  
-  /* Inline code */
-  :not(pre) > code[class*="language-"] {
-    padding: .2em;
-    border-radius: .3em;
-    box-shadow: none;
-    white-space: normal;
-  }
-  
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #aaa;
-  }
-  
-  .token.punctuation {
-    color: #999;
-  }
-  
-  .token.namespace {
-    opacity: .7;
-  }
-  
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: #0cf;
-  }
-  
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin {
-    color: yellow;
-  }
-  
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .language-css .token.string,
-  .token.variable,
-  .token.inserted {
-    color: yellowgreen;
-  }
-  
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: deeppink;
-  }
-  
-  .token.regex,
-  .token.important {
-    color: orange;
-  }
-  
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-  
-  .token.entity {
-    cursor: help;
-  }
-  
-  .token.deleted {
-    color: red;
-  }
-  
-  /* Plugin styles: Diff Highlight */
-  pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
-  pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
-    background-color: rgba(255, 0, 0, .3);
-    display: inline;
-  }
-  
-  pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
-  pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
-    background-color: rgba(0, 255, 128, .3);
-    display: inline;
-  }
-  
-  /* End of prism.js syntax highlighting*/

templates/base/footer.tmpl

@@ -1,9 +1,6 @@
 {{define "base/footer"}}
-  <script src="/public/js/main.js"></script>
+  <script src="/public/ace/js/ace.js" type="text/javascript" charset="utf-8"></script>
-  <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
-  
   <script src="public/js/main.js"></script>
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script> -->
   </body>
 </html>
 {{end}}

templates/base/header.tmpl

@@ -5,7 +5,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ConfigUI</title>
-    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
     <link rel="stylesheet" href="/public/css/main.css">
   </head>
   <body>

templates/components/editor.tmpl

@@ -1,5 +1,7 @@
 {{define "components/editor"}}
-<code-input class="content" style="height: 70vh; width: 100%" lang="{{.Lang}}" name="editor">
+<section class="section">
-{{.Content}}
+  <container class="container is-max-desktop">
-</code-input>
+    <div id="editor">{{.Content}}</div>
+  </container>
+</section>
 {{end}}