generate css classes for each mime type, #328

src/public/javascripts/services/tree_builder.js

@@ -168,9 +168,24 @@ async function getExtraClasses(note) {
 
     extraClasses.push(note.type);
 
+    if (note.mime) { // some notes should not have mime type (e.g. render)
+        extraClasses.push(getMimeTypeClass(note.mime));
+    }
+
     return extraClasses.join(" ");
 }
 
+function getMimeTypeClass(mime) {
+    const semicolonIdx = mime.indexOf(';');
+
+    if (semicolonIdx !== -1) {
+        // stripping everything following the semicolon
+        mime = mime.substr(0, semicolonIdx);
+    }
+
+    return 'mime-' + mime.toLowerCase().replace(/[\W_]+/g,"-");
+}
+
 export default {
     prepareTree,
     prepareBranch,

src/public/stylesheets/style.css

@@ -801,4 +801,9 @@ div[data-notify="container"] {
     100% {
         transform: rotate(360deg);
     }
+}
+
+.ck-content .image > figcaption {
+    color: var(--main-text-color);
+    background-color: var(--accented-background-color);
 }