Work in progress. Raw css in codeblocks

front/src/components/Content/Message.vue

@@ -17,9 +17,9 @@
       </span>
     </div>
     <div class="reactions ui">
-      <template v-for="reaction in reactions" :key="reaction">
+      <span v-for="reaction in reactions" :key="reaction">
         {{ reaction }}
-      </template>
+      </span>
     </div>
   </div>
 </template>
@@ -83,7 +83,9 @@ export default {
       );
     },
     classes() {
-      return this.message.reactions.map((r) => "u" + r.emoji_code);
+      return this.message.reactions.map(
+        (r) => r.emoji_code + " u" + r.emoji_code
+      );
     },
     time() {
       var ts = this.message.timestamp;

front/src/components/Rules/Rule.vue

@@ -1,11 +1,13 @@
 <template>
-  <div 
+  <div class="rule" :style="rule.rules">
-    class="rule"
+    <template v-if="rule.is_codeblock">
-    :style="rule.rules"  
+      {{ contentFiltered }}
-  >
+    </template>
+    <template v-else>
     <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
     <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
     <p>}</p>
+    </template>
   </div>
 </template>
 
@@ -17,6 +19,16 @@ export default {
   mixins: [emoji],
   props: ["rule"],
   computed: {
+    contentFiltered() {
+      var reg = this.emoji_regex;
+
+      let c = this.rule.content.replace(reg, (c) => {
+        console.log("c", c, this.toEmojiCode(c));
+        return c + ", .u" + this.toEmojiCode(c);
+      });
+
+      return c;
+    },
   },
 };
 </script>

front/src/components/Rules/Styles.vue

@@ -17,6 +17,9 @@ export default {
     generateStyleRules() {
       let styles = "";
       this.rules.map((r) => {
+        if (r.is_codeblock) {
+          styles += r.content;
+        } else {
         if (r.className.startsWith("@")) {
           styles += r.className;
         } else {
@@ -32,6 +35,7 @@ export default {
           styles += s;
         });
         styles += "}";
+        }
       });
       return styles;
     },

front/src/mixins/emoji.js

@@ -16,6 +16,12 @@
 // }
 
 export default {
+  data() {
+    return {
+      emoji_regex: /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/gi
+    }
+  },
+
   methods: {
     toEmojiCode: (emoji) => {
       // console.log(emoji);

front/src/store/index.js

@@ -10,19 +10,20 @@ var EmojiConvertor = require('emoji-js');
 var emojiConv = new EmojiConvertor();
 
 let toCSS = (message, currentStream) => {
-  // console.log(message)
   let className = "",
     emoji_code = "",
     rules = [],
     parentClassName = currentStream,
-    id = message.id
+    id = message.id,
+    is_codeblock = message.content.includes("<code>");
 
   // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
   let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
   let content = stripHtml(message.content).result;
+
   let results = content.matchAll(regex);
   results = Array.from(results);
-  //console.log(results)
+
   if (results.length > 0) {
     className = emojiConv.replace_colons(results[0]['groups']['selector']);
     if (emoji.methods.containsEmoji(className)) {
@@ -30,8 +31,7 @@ let toCSS = (message, currentStream) => {
     }
     rules = results[0]['groups']['props'].split("\n");
     rules = rules.filter((rule) => validateRule(rule))
-    // console.log(className, emoji_code, rules, parentClassName, id)
+    return { className, emoji_code, rules, parentClassName, id, content, is_codeblock };
-    return { className, emoji_code, rules, parentClassName, id };
   }
   return null;
 }