feat(CSS): add focus visual to editor and output

2 files changed, 19 insertions, 0 deletions

diff --git a/src/css/index.css b/src/css/index.css
index db80277..47c5c1e 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,6 +1,7 @@
 :root {
   --content-border: solid lightgray 2px;
   --content-border-radius: 5px;
+  --content-focus-border: solid gray 2px;
 }
 
 .editor {
@@ -27,6 +28,11 @@ body {
 
       border: var(--content-border);
       border-radius: var(--content-border-radius);
+
+      &.focus {
+        border: var(--content-focus-border);
+        outline: var(--content-focus-border);
+      }
     }
 
     .editor {
@@ -62,6 +68,11 @@ body {
     font-family: monospace;
     font-size: 1.0rem;
 
+    &.focus {
+      border: var(--content-focus-border);
+      outline: var(--content-focus-border);
+    }
+
     span {
       white-space: pre;
     }
diff --git a/src/editor.mjs b/src/editor.mjs
index 35b1949..6456293 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -183,6 +183,12 @@ cm.on("change", (_, change) => {
   completeForCodeBlock(change)
 })
 
+// Set class for focus
+cm.on("focus", () => {
+  cm.getWrapperElement().classList.add('focus')
+  HtmlContainer.classList.remove('focus')
+})
+
 cm.on("beforeChange", (_, change) => {
   const line = change.to.line
   // Don't allow more content after YAML doc separator
@@ -507,6 +513,8 @@ cm.on("cursorActivity", (_) => {
 });
 cm.on("blur", () => {
   suggestionsEle.style.display = 'none'
+  cm.getWrapperElement().classList.remove('focus')
+  HtmlContainer.classList.add('focus')
 })
 // }}}
 // EVENT: keydown for suggestions {{{