Full url links/images in messages. 401 needs fix

front/src/components/Content/Message.vue

@@ -1,74 +1,47 @@
 <template>
-  <span 
+  <span :class="classes" :style="styles">
-    :class="classes"
-    :style="styles"
-  >
     <!-- {{ $md.renderInline(content) }} -->
-    <vue3-markdown-it 
+    <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
-      :source="content"
+  </span>
-      v-bind="$mdOpts"
+  <!-- <div v-html="content"/> -->
-    ></vue3-markdown-it>    
+  <!-- {{ content }} -->
-  </span>  
-      <!-- <div v-html="content"/> -->
-    <!-- {{ content }} -->
 </template>
 
 <script>
 export default {
-  name: 'Header',
+  name: "Header",
-  props: [ 
+  props: ["message"],
-    'message'
-  ],
   computed: {
     rawJSON() {
-      return '```json\n' + JSON.stringify(this.message, null, 2) + '\n```'
+      return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
     },
     content() {
-      return ( 
+      let url = process.env.VUE_APP_ZULIP_site;
-        this
+      let m = this.message.content.replace("\n", "<br/>");
-        .message
+      m = m.replaceAll('src="','src="' + url);
-        .content
+      m = m.replaceAll('href="/','href="' + url + "/");
-        .replace('\n', '<br/>')
+      return m
-      )
     },
     classes() {
-      return (
+      return this.message.reactions.map((r) => "u" + r.emoji_code);
-        this
-        .message
-        .reactions
-        .map(r => 'u' + r.emoji_code)
-      )
     },
     styles() {
-      return (
+      return this.$store.state.rules
-        this
+        .filter((r) => this.classes.includes("u" + r.emoji_code))
-        .$store
+        .map((r) => r.rules)
-        .state
-        .rules
-        .filter(r => 
-          this
-          .classes
-          .includes(
-            'u' + r.emoji_code
-          )
-        )  
-        .map(r => r.rules)
         .flat()
-        .map(s => s.text)
+        .map((s) => s.text);
-      )
     },
   },
   created() {
-    console.log(this.message.content)
+    console.log(this.message.content);
-  }
+  },
-}
+};
 </script>
 
 <style>
-
 header {
   box-sizing: border-box;
   margin: 1em;
 }
-
 </style>