Markdown improvements

Author: benhatsor

full.css

@@ -15,7 +15,7 @@ html, body {
   inset: 0;
   z-index: 1000;
   pointer-events: none;
-  box-shadow: inset 0 0 0 2px rgb(104 187 228 / 50%);
+  box-shadow: inset 0 0 0 2px hsl(223deg 86% 64% / 50%);
 }
 
 ::selection {

lib/codeit.js

@@ -384,6 +384,8 @@ class CodeitElement extends HTMLElement {
     innerHTMLObserver.observe(cd, innerHTMLConfig);
 
 
+    if (cd.edit) {
+     
     cd.on('keydown', (event) => {
 
       // get current selection
@@ -504,6 +506,8 @@ class CodeitElement extends HTMLElement {
       recordHistory();
 
     });
+
+    }
 
 
     // IDE-style behaviors

live-view/extensions/markdown/markdown-dark.css

@@ -27,6 +27,11 @@
   background: rgba(255, 255, 255, 0.15);
 }
 
+:focus-visible {
+  box-shadow: 0 0 0 2px hsl(223deg 86% 64% / 50%);
+  outline: none;
+}
+
 
 html {
   background: var(--bg-color);
@@ -140,6 +145,27 @@ body li + li {
   margin-top: 0.25em;
 }
 
+body li:has(> input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -1em;
+}
+
+body input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  margin-bottom: -3px;
+  margin-right: 2px;
+  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzgyODY4OSI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE4IDE5SDZjLS41NSAwLTEtLjQ1LTEtMVY2YzAtLjU1LjQ1LTEgMS0xaDEyYy41NSAwIDEgLjQ1IDEgMXYxMmMwIC41NS0uNDUgMS0xIDF6bTEtMTZINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yeiIvPjwvc3ZnPg==);
+  background-size: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+body input[type="checkbox"][checked] {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzgyODY4OSI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0tOC4yOSAxMy4yOWMtLjM5LjM5LTEuMDIuMzktMS40MSAwTDUuNzEgMTIuN2MtLjM5LS4zOS0uMzktMS4wMiAwLTEuNDEuMzktLjM5IDEuMDItLjM5IDEuNDEgMEwxMCAxNC4xN2w2Ljg4LTYuODhjLjM5LS4zOSAxLjAyLS4zOSAxLjQxIDAgLjM5LjM5LjM5IDEuMDIgMCAxLjQxbC03LjU4IDcuNTl6Ii8+PC9zdmc+);
+}
+
 body code, body tt {
   padding: 0.2em 0.4em;
   margin: 0;

service-worker.js

@@ -1,6 +1,6 @@
 
 // update worker name when updating cached files
-const WORKER_NAME = 'codeit-worker-v774';
+const WORKER_NAME = 'codeit-worker-v775';
 
 
 self.importScripts('/worker/client-channel.js');