fix: insert space around custom emojis

composables/content-parse.ts

@@ -120,7 +120,7 @@ export function treeToText(input: Node): string {
 
   // add spaces around emoji to prevent parsing errors: 2 or more consecutive emojis will not be parsed
   if (input.name === 'img' && input.attributes.class?.includes('custom-emoji'))
-    return `:${input.attributes['data-emoji-id']}:`
+    return ` :${input.attributes['data-emoji-id']}: `
 
   if (input.name === 'em-emoji')
     return `${input.attributes.native}`

styles/global.css

@@ -85,7 +85,6 @@ body {
   overflow: hidden;
   max-height: 1.3em;
   max-width: 1.3em;
-  margin: 0 0.2em;
   vertical-align: text-bottom;
 }
 
@@ -132,6 +131,10 @@ body {
 .content-editor {
   --at-apply: outline-none flex-1;
   max-width: 100%;
+
+  .custom-emoji {
+    margin: 0 0.2em;
+  }
 }
 
 .skeleton-loading-bg {

tests/__snapshots__/html-parse.test.ts.snap

@@ -52,7 +52,7 @@ exports[`html-parse > custom emoji > html 1`] = `
 "
 `;
 
-exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
+exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe  :nuxt:"`;
 
 exports[`html-parse > emojis > html 1`] = `
 "<em-emoji native=\\"🇫🇷\\" fallback=\\"🇫🇷\\"></em-emoji>