feat(settings): convert metadata to text (#2444)

composables/settings/metadata.ts

@@ -1 +1,28 @@
+import type { Node } from 'ultrahtml'
+import { decode } from 'tiny-decode'
+import { TEXT_NODE, parse } from 'ultrahtml'
+
 export const maxAccountFieldCount = computed(() => isGlitchEdition.value ? 16 : 4)
+
+export function convertMetadata(metadata: string) {
+  try {
+    const tree = parse(metadata)
+    return (tree.children as Node[]).map(n => convertToText(n)).join('').trim()
+  }
+  catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+
+function convertToText(input: Node): string {
+  let text = ''
+
+  if (input.type === TEXT_NODE)
+    return decode(input.value)
+
+  if ('children' in input)
+    text = (input.children as Node[]).map(n => convertToText(n)).join('')
+
+  return text
+}

pages/settings/profile/appearance.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
 import { useForm } from 'slimeform'
-import { parse } from 'ultrahtml'
 
 definePageMeta({
   middleware: 'auth',
@@ -31,9 +30,7 @@ const { form, reset, submitter, isDirty, isError } = useForm({
     const fieldsAttributes = Array.from({ length: maxAccountFieldCount.value }, (_, i) => {
       const field = { ...account?.fields?.[i] || { name: '', value: '' } }
 
-      const linkElement = (parse(field.value)?.children?.[0])
-      if (linkElement && linkElement?.attributes?.href)
-        field.value = linkElement.attributes.href
+      field.value = convertMetadata(field.value)
 
       return field
     })