Djot v2 (#88)

* feat(djot): make checklist work with Djot too

* feat(djot): define info, warning... panels

* feat(djot): express cover fear in djot

* feat(djot): switch info icon with emoji

src/css/colors.css

@@ -0,0 +1,20 @@
+@property --info {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(0, 123, 255, 0.85);
+}
+@property --success {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(0, 255, 0, 0.85);
+}
+@property --warning {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(255, 255, 0, 0.85);
+}
+@property --error {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(255, 0, 0, 0.85);
+}

src/css/preview.css

@@ -0,0 +1,128 @@
+.preview {
+  flex: 1;
+  padding: 10px;
+  height: 100%;
+  overflow-y: auto;
+  margin: auto;
+
+  img.cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  p:has(img.cover) {
+    height: 200px;
+  }
+
+  /* checklist custom styling */
+  .task-list {
+    padding: 0;
+  }
+
+  .task-list .checked {
+    color: gray;
+    position: relative;
+  }
+
+  .task-list .checked::before {
+    content: "✔️";
+  }
+
+  .task-list .unchecked {
+    position: relative;
+  }
+
+  .task-list .unchecked::before {
+    content: "◻️"; /* Adds an empty box for unchecked items */
+  }
+  /* checklist custom styling */
+
+  .info {
+    background-color: rgba(0, 123, 255, 0.15);
+    padding: 1rem 1rem 1rem 3rem;
+    box-shadow:
+      0 0 0 1px #ffffff25,
+      0 1px 1px #00000005,
+      0 8px 16px -4px #0000000a,
+      0 24px 32px -8px #0000000f;
+    margin-bottom: 2rem;
+    border-radius: 5px;
+    position: relative;
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .info::before {
+    content: "ℹ️";
+    position: absolute;
+    left: 10px;
+    top: calc(50% - 12px);
+    width: 25px;
+    height: 25px;
+    text-align: center;
+  }
+  .warning {
+    background-color: rgba(255, 255, 0, 0.15);
+    padding: 1rem 1rem 1rem 3rem;
+    box-shadow:
+      0 0 0 1px #ffffff25,
+      0 1px 1px #00000005,
+      0 8px 16px -4px #0000000a,
+      0 24px 32px -8px #0000000f;
+    margin-bottom: 2rem;
+    border-radius: 5px;
+    position: relative;
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .warning::before {
+    content: "⚠️";
+    position: absolute;
+    left: 10px;
+    top: calc(50% - 12px);
+  }
+  .error {
+    background-color: rgba(255, 0, 0, 0.15);
+    padding: 1rem 1rem 1rem 3rem;
+    box-shadow:
+      0 0 0 1px #ffffff25,
+      0 1px 1px #00000005,
+      0 8px 16px -4px #0000000a,
+      0 24px 32px -8px #0000000f;
+    margin-bottom: 2rem;
+    border-radius: 5px;
+    position: relative;
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .error::before {
+    content: "❗";
+    position: absolute;
+    left: 12px;
+    top: calc(50% - 12px);
+  }
+  .success {
+    background-color: rgba(0, 255, 0, 0.15);
+    padding: 1rem 1rem 1rem 3rem;
+    box-shadow:
+      0 0 0 1px #ffffff25,
+      0 1px 1px #00000005,
+      0 8px 16px -4px #0000000a,
+      0 24px 32px -8px #0000000f;
+    margin-bottom: 2rem;
+    border-radius: 5px;
+    position: relative;
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .success::before {
+    content: "❇️";
+    position: absolute;
+    left: 13px;
+    top: calc(50% - 12px);
+  }
+}

src/css/styles.css

@@ -1,3 +1,6 @@
+@import url("colors.css");
+@import url("preview.css");
+
 html, * {
   font-family:
     -apple-system,
@@ -214,30 +217,13 @@ header .logo:active {
   transform: scale(0.9);
 }
 
-.preview {
-  flex: 1;
-  padding: 10px;
-  height: 100%;
-  overflow-y: auto;
-  margin: auto;
-}
-.preview .cover {
-  background-position: center;
-  background-size: cover;
-  height: 25vh;
-  width: 100%;
-  margin-bottom: 16px;
-}
-
 .clickable {
   cursor: pointer;
 }
 
 /****** markdown *********/
-
 .markdown-body {
   box-sizing: border-box;
-  /* min-width: 200px; */
   max-width: 800px;
   margin: 0 auto;
   padding: 45px;
@@ -254,7 +240,6 @@ header .logo:active {
     padding: 15px;
   }
 }
-
 /****** markdown *********/
 
 .terminal {
@@ -292,29 +277,29 @@ header .logo:active {
 }
 
 .notification.info {
-  border: 1px solid rgba(0, 123, 255, 0.85);
-  background: rgba(0, 123, 255, 0.85);
+  border: 1px solid var(--info);
+  background: var(--info);
   top: 5px;
   transition: all 0.5s linear;
 }
 
 .notification.success {
-  border: 1px solid rgba(0, 255, 0, 0.85);
-  background: rgba(0, 255, 0, 0.85);
+  border: 1px solid var(--success);
+  background: var(--success);
   top: 5px;
   transition: all 0.5s linear;
 }
 
 .notification.error {
-  border: 1px solid rgba(255, 0, 0, 0.85);
-  background: rgba(255, 0, 0, 0.85);
+  border: 1px solid var(--error);
+  background: var(--error);
   top: 5px;
   transition: all 0.5s linear;
 }
 
 .notification.warning {
-  border: 1px solid rgba(255, 255, 0, 0.85);
-  background: rgba(255, 255, 0, 0.85);
+  border: 1px solid var(--warning);
+  background: var(--warning);
   top: 5px;
   transition: all 0.5s linear;
 }

src/js/components/organisms/commander/commands.ts

@@ -308,7 +308,7 @@ export const commands = () => {
         commander.hide();
         await sleep(200); // need to wait after prompt for some reason before copy
         copyToClipboard(
-          `<div class="cover" style="background-image: url('${bgImage}')"></div>`,
+          `![bg](${bgImage}){.cover}`,
           "👌Copied! Paste the code on the MiroPad editor",
         );
         select(".terminal").focus();

src/js/utils/text/autoCompleteCheckboxes.js

@@ -5,9 +5,9 @@ export const autoCompleteCheckboxes = (e) => {
   const currentLine = findCurrentLine(e.target.value, e.target.selectionEnd);
 
   const completers = {
-    "* [": "\n* [] ",
+    "* [": "\n* [ ] ",
     "* ": "\n* ",
-    " * [": "\n * [] ",
+    " * [": "\n * [ ] ",
     " * ": "\n * ",
   };