From 38764b278ad6c6e45de3b383286c8f4c85cd922b Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 24 May 2020 00:13:56 +0200
Subject: [PATCH] Use auto resize textarea instead text input

---
 editor/package-lock.json |  6 +--
 editor/package.json      |  2 +-
 editor/src/styles.scss   | 80 ++++++++++++++++++++++++++++++++--------
 3 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/editor/package-lock.json b/editor/package-lock.json
index 28ce17f..fd49e6f 100644
--- a/editor/package-lock.json
+++ b/editor/package-lock.json
@@ -7538,9 +7538,9 @@
       }
     },
     "wiki-list-editor": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.5.0.tgz",
-      "integrity": "sha512-EHoaKrpnM/eq5lJrHDxkSyJZ/awNfRKiFg7PlJRO7FLa4EKmSS7drOFd5GRTjzUaO2M9rOQ29GWP09YkECvWqA==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.5.3.tgz",
+      "integrity": "sha512-4hzqnHb+RsX0SFPjLelsZN1TbU5KQVi+UQPrW2upJiyJ6T09yifajYAdWyf+q2R0bPSiwBQYoMp5w5JG3L7z6Q==",
       "requires": {
         "dragula": "^3.7.2",
         "jquery": "^3.5.1",
diff --git a/editor/package.json b/editor/package.json
index 2f08558..ff13b91 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -18,7 +18,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.0.0",
-    "wiki-list-editor": "^0.5.0"
+    "wiki-list-editor": "^0.5.3"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index 339fc59..350eef8 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -1,12 +1,27 @@
 @import "~bulma";
 
-html { font-family: 'Inter', sans-serif; }
-body { font-family: 'Inter', sans-serif; }
-input.input-line { font-family: 'Inter', sans-serif; }
+html {
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+.input-line {
+  font-family: 'Inter', sans-serif;
+}
+
 @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-    body { font-family: 'Inter var', sans-serif; }
-    input.input-line { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
+  body {
+    font-family: 'Inter var', sans-serif;
+  }
+  .input-line {
+    font-family: 'Inter var', sans-serif;
+  }
 }
 
 #editor {
@@ -27,17 +42,50 @@ input.input-line { font-family: 'Inter', sans-serif; }
   display: none;
 }
 
-.list-item {
-    border: none;
-    padding: 2px 0px;
+.marker {
+  display: inline-block;
+
+  width: 16px;
+  height: 16px;
+
+  align-self: first baseline;
+  flex-shrink: 0;
+
+  margin-right: 4px;
+  margin-top: 4px;
+
+  border-radius: 50%;
+  border: 4px solid white;
+
+  background: black;
 }
-input.input-line,
-input.input-line:active,
-input.input-line:focus {
-    width: 100%;
-    box-shadow: none;
-    border: none;
-    height: initial;
+
+textarea {
+  box-sizing: border-box;
+  min-height: 19px;
+  overflow-x: hidden;
+  border: none;
+  resize: none;
+  line-height: 24px;
+}
+
+.marker:hover {
+  border-color: #ccc;
+}
+
+.list-item {
+  border: none;
+  padding: 2px 0px;
+}
+
+.input-line,
+.input-line:active,
+.input-line:focus {
+  width: 100%;
+  box-shadow: none;
+  border: none;
+  min-height: 19px;
+  word-break: break-word;
 }
 
 .codex-editor .icon {