From d9a29f863c1bbf946f481de5817488ed679206af Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Tue, 24 Sep 2024 15:50:40 +0800
Subject: feat(CSS): add focus visual to editor and output

---
 src/css/index.css | 11 +++++++++++
 src/editor.mjs    |  8 ++++++++
 2 files changed, 19 insertions(+)

(limited to 'src')

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 {{{
-- 
cgit v1.2.3-70-g09d2