vim editor

config/config.go

@@ -119,7 +119,8 @@ const defaultWrapper = `
             display: flex;
             flex-direction: column;
          }
-         body > .form > form > textarea {
+         body > .form > form > textarea ,
+         body > .form > form > div {
             flex-grow: 2;
          }
          rendered > h2:nth-child(2) {

main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"local/notes-server/config"
+	"local/notes-server/notes/editor"
 	"local/notes-server/server"
 	"local/notes-server/versions"
 	"log"
@@ -12,6 +13,7 @@ import (
 )
 
 func main() {
+	log.Println(len(editor.CodeMirrorCSS))
 	server := server.New()
 	if err := server.Routes(); err != nil {
 		panic(err)

notes/edit.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io/ioutil"
 	"local/notes-server/filetree"
+	"local/notes-server/notes/editor"
 	"strings"
 )
 
@@ -28,11 +29,40 @@ func editFile(p filetree.Path) string {
 	return fmt.Sprintf(`
       <div class="form">
          <form action="/submit/%s" method="post">
-            <table>
+            <textarea id="mytext" name="content" style="cursor:crosshair;">%s</textarea>
-               <textarea name="content" style="cursor:crosshair;">%s</textarea>
-            </table>
             <button type="submit">Submit</button>
          </form>
       </div>
-   `, href, b)
+      <!--
+      https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/codemirror.min.js
+      https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/codemirror.min.css
+      https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/keymap/vim.min.js
+      https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/theme/dracula.min.css
+      -->
+      <script>%s</script>
+      <style>%s</style>
+      <script>%s</script>
+      <style>%s</style>
+      <script>
+         if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+            CodeMirror.fromTextArea(document.getElementById("mytext"), {
+               lineNumbers: true,
+               mode: "md",
+               theme: "dracula",
+               keyMap: "vim",
+               smartIndent: true,
+               indentUnit: 3,
+               tabSize: 3,
+               lineWrapping: true,
+               autofocus: true,
+               dragDrop: false,
+               spellcheck: true,
+               autocorrect: false,
+               autocapitalize: false,
+            })
+         } else {
+            console.log(navigator.userAgent)
+         }
+      </script>
+   `, href, b, editor.CodeMirrorJS, editor.CodeMirrorCSS, editor.CodeMirrorVIM, editor.CodeMirrorTheme)
 }

notes/editor/dracula.min.css

@@ -0,0 +1 @@
+.cm-s-dracula .CodeMirror-gutters,.cm-s-dracula.CodeMirror{background-color:#282a36!important;color:#f8f8f2!important;border:none}.cm-s-dracula .CodeMirror-gutters{color:#282a36}.cm-s-dracula .CodeMirror-cursor{border-left:solid thin #f8f8f0}.cm-s-dracula .CodeMirror-linenumber{color:#6d8a88}.cm-s-dracula .CodeMirror-selected{background:rgba(255,255,255,.1)}.cm-s-dracula .CodeMirror-line::selection,.cm-s-dracula .CodeMirror-line>span::selection,.cm-s-dracula .CodeMirror-line>span>span::selection{background:rgba(255,255,255,.1)}.cm-s-dracula .CodeMirror-line::-moz-selection,.cm-s-dracula .CodeMirror-line>span::-moz-selection,.cm-s-dracula .CodeMirror-line>span>span::-moz-selection{background:rgba(255,255,255,.1)}.cm-s-dracula span.cm-comment{color:#6272a4}.cm-s-dracula span.cm-string,.cm-s-dracula span.cm-string-2{color:#f1fa8c}.cm-s-dracula span.cm-number{color:#bd93f9}.cm-s-dracula span.cm-variable{color:#50fa7b}.cm-s-dracula span.cm-variable-2{color:#fff}.cm-s-dracula span.cm-def{color:#50fa7b}.cm-s-dracula span.cm-operator{color:#ff79c6}.cm-s-dracula span.cm-keyword{color:#ff79c6}.cm-s-dracula span.cm-atom{color:#bd93f9}.cm-s-dracula span.cm-meta{color:#f8f8f2}.cm-s-dracula span.cm-tag{color:#ff79c6}.cm-s-dracula span.cm-attribute{color:#50fa7b}.cm-s-dracula span.cm-qualifier{color:#50fa7b}.cm-s-dracula span.cm-property{color:#66d9ef}.cm-s-dracula span.cm-builtin{color:#50fa7b}.cm-s-dracula span.cm-type,.cm-s-dracula span.cm-variable-3{color:#ffb86c}.cm-s-dracula .CodeMirror-activeline-background{background:rgba(255,255,255,.1)}.cm-s-dracula .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}

notes/editor/embed.go

@@ -0,0 +1,17 @@
+package editor
+
+import _ "embed"
+
+var (
+	//go:embed codemirror.min.js
+	CodeMirrorJS string
+
+	//go:embed codemirror.min.css
+	CodeMirrorCSS string
+
+	//go:embed vim.min.js
+	CodeMirrorVIM string
+
+	//go:embed dracula.min.css
+	CodeMirrorTheme string
+)