feat: enhance message renderer

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@satorijs/components",
   "description": "UI Components for Satori",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "src/index.ts",
   "files": [
     "src"
@@ -30,10 +30,11 @@
   },
   "devDependencies": {
     "@vueuse/core": "^8.9.4",
-    "element-plus": "2.2.11",
-    "vue": "^3.2.38"
+    "element-plus": "2.2.17",
+    "vue": "^3.2.40"
   },
   "dependencies": {
-    "@satorijs/element": "^1.0.0"
+    "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+    "@satorijs/element": "^1.1.3"
   }
 }

src/chat/content.vue

@@ -1,31 +1,21 @@
-<template>
-  <div class="message-content">
-    <template v-for="({ type, attrs }) in segment.parse(content)">
-      <span v-if="type === 'text'">{{ attrs.content }}</span>
-      <slot v-else-if="type === 'at'" name="at" v-bind="attrs">
-        <span>@{{ attrs.name }}</span>
-      </slot>
-      <slot v-else-if="type === 'image'" name="image" v-bind="attrs">
-        <img :src="attrs.url">
-      </slot>
-      <slot v-else-if="type === 'audio'" name="audio" v-bind="attrs">
-        <audio :src="attrs.url" controls></audio>
-      </slot>
-      <slot v-else-if="type === 'video'" name="video" v-bind="attrs">
-        <video :src="attrs.url" controls></video>
-      </slot>
-      <slot v-else v-bind="attrs"></slot>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
+<script lang="ts">
 
+import { h } from 'vue'
 import segment from '@satorijs/element'
-
-defineProps<{
-  content: string
-}>()
+import renderChildren from './render'
+
+export default {
+  name: 'message-content',
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, ctx) {
+    return () => h('div', { class: 'message-content' }, renderChildren(segment.parse(props.content), ctx))
+  },
+}
 
 </script>
 
@@ -41,6 +31,10 @@ defineProps<{
     max-height: 320px;
     max-width: 100%;
   }
+
+  :deep(p) {
+    margin: 0;
+  }
 }
 
 </style>

src/chat/input.vue

@@ -50,9 +50,7 @@ function handleDataTransfer(event: Event, transfer: DataTransfer) {
 
     const reader  = new FileReader()
     reader.addEventListener('load', function () {
-      emit('send', segment(type, {
-        url: 'base64://' + reader.result.slice(22),
-      }).toString())
+      emit('send', segment(type, { url: reader.result }).toString())
     }, false)
     reader.readAsDataURL(file)
   }

src/chat/render.ts

@@ -0,0 +1,24 @@
+import segment from '@satorijs/element'
+import { FunctionalComponent, h } from 'vue'
+
+const render: FunctionalComponent<segment[]> = (elements, ctx) => {
+  return elements.map(({ type, attrs, children }) => {
+    if (type === 'text') {
+      return attrs.content
+    } else if (type === 'at') {
+      return h('span', `@${attrs.name}`)
+    } else if (type === 'image') {
+      return h('img', { src: attrs.url })
+    } else if (type === 'audio') {
+      return h('audio', { src: attrs.url, controls: true })
+    } else if (type === 'video') {
+      return h('video', { src: attrs.url, controls: true })
+    } else if (type === 'p' || type === 'message') {
+      return h('p', render(children, ctx))
+    } else {
+      return render(children, ctx)
+    }
+  })
+}
+
+export default render