feat(content-rich html parsing): add paragraphs LTR/RTL direction support (#2545)

tests/nuxt/__snapshots__/content-rich.test.ts.snap

@@ -38,7 +38,7 @@ const isDark = usePreferredDark()</pre></p>"
 `;
 
 exports[`content-rich > code frame 2 1`] = `
-"<p>
+"<p dir="auto">
   <span class="h-card"
     ><a
       class="u-url mention"
@@ -53,12 +53,12 @@ exports[`content-rich > code frame 2 1`] = `
 "
 `;
 
-exports[`content-rich > code frame empty 1`] = `"<p><pre class="code-block"></pre><br></p>"`;
+exports[`content-rich > code frame empty 1`] = `"<p dir="auto"><pre class="code-block"></pre><br></p>"`;
 
-exports[`content-rich > code frame no lang 1`] = `"<p><pre class="code-block">hello world</pre><br>no lang</p>"`;
+exports[`content-rich > code frame no lang 1`] = `"<p dir="auto"><pre class="code-block">hello world</pre><br>no lang</p>"`;
 
 exports[`content-rich > collapse mentions 1`] = `
-"<p>
+"<p dir="auto">
   <span class="h-card"
     ><a
       class="u-url mention"
@@ -167,7 +167,7 @@ exports[`content-rich > handles formatting from servers 1`] = `
 `;
 
 exports[`content-rich > handles html within code blocks 1`] = `
-"<p>
+"<p dir="auto">
   HTML block code:<br />
   <pre class="code-block">
 &lt;span class=&quot;icon--noto icon--noto--1st-place-medal&quot;&gt;&lt;/span&gt;
@@ -178,7 +178,7 @@ exports[`content-rich > handles html within code blocks 1`] = `
 `;
 
 exports[`content-rich > hashtag adds bdi 1`] = `
-"<p>
+"<p dir="auto">
   Testing bdi is added
   <span
     ><VMenu
@@ -199,7 +199,7 @@ exports[`content-rich > hashtag adds bdi 1`] = `
 `;
 
 exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
-"<p>
+"<p dir="auto">
   Testing bdi not added
   <span
     ><VMenu
@@ -218,12 +218,12 @@ exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
 `;
 
 exports[`content-rich > hides collapsed mentions 1`] = `
-"<p>content</p>
+"<p dir="auto">content</p>
 "
 `;
 
 exports[`content-rich > inline code with link 1`] = `
-"<p>
+"<p dir="auto">
   Inline code with link:
   <code
     >https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal</code
@@ -233,7 +233,7 @@ exports[`content-rich > inline code with link 1`] = `
 `;
 
 exports[`content-rich > link + mention 1`] = `
-"<p>
+"<p dir="auto">
   Happy
   <img
     src="/emojis/twemoji/1f917.svg"
@@ -262,13 +262,161 @@ exports[`content-rich > link + mention 1`] = `
 "
 `;
 
+exports[`content-rich > p moved to div and text children replaced with p[dir="auto"] tags: br children removed 1`] = `
+"<p dir="auto">
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/strangeobject.space/@bebatjof"
+      ><bdi>@<span>bebatjof</span></bdi></a
+    ></span
+  >
+  هذا اختبار:<br />أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت
+  ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. أيضًا، يجب
+  إصلاح نموذج 0.
+</p>
+<p></p>
+<p dir="auto">
+  This is a test:<br />I like how the arabic dual form is supported. The last
+  one is mistranslated and I&#39;m trying to find how to fix it. Also, the form
+  for 0 needs to be fixed.
+</p>
+<p></p>
+"
+`;
+
 exports[`content-rich > plain text 1`] = `
 "hello there
 "
 `;
 
+exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] = `
+"<p dir="auto">
+  هذا اختبار جديد
+  <img
+    src="/emojis/twemoji/1f426.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐦"
+  /><img
+    src="/emojis/twemoji/1f424.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐤"
+  />
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/strangeobject.space/@bebatjof"
+      ><bdi>@<span>bebatjof</span></bdi></a
+    ></span
+  >
+  <br />أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة
+  الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها.
+  <img
+    src="/emojis/twemoji/1f426.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐦"
+  /><img
+    src="/emojis/twemoji/1f424.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐤"
+  />
+  ;). كما أن النموذج الخاص بـ 0 يحتاج إلى إصلاح
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
+        class="mention hashtag"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/tags/turkey"
+        ><bdi>#<span>turkey</span></bdi></a
+      ></VMenu
+    ></span
+  >
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
+        class="mention hashtag"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/tags/%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9"
+        ><bdi>#<span>العربية</span></bdi></a
+      ></VMenu
+    ></span
+  >
+  .
+</p>
+<p></p>
+<p dir="auto">
+  This is a new test
+  <img
+    src="/emojis/twemoji/1f426.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐦"
+  /><img
+    src="/emojis/twemoji/1f424.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐤"
+  />
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/strangeobject.space/@bebatjof"
+      ><bdi>@<span>bebatjof</span></bdi></a
+    ></span
+  >
+  <br />I like how the arabic dual form is supported. The last one is
+  mistranslated and I&#39;m trying to find how to fix it.
+  <img
+    src="/emojis/twemoji/1f426.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐦"
+  /><img
+    src="/emojis/twemoji/1f424.svg"
+    class="iconify-emoji iconify-emoji--twemoji"
+    alt="🐤"
+  />
+  ;). Also, the form for 0 needs to be fixed
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
+        class="mention hashtag"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/tags/turkey"
+        ><bdi>#<span>turkey</span></bdi></a
+      ></VMenu
+    ></span
+  >
+  <span
+    ><VMenu
+      placement="bottom-start"
+      class="inline-block"
+      close-on-content-click="false"
+      ><a
+        class="mention hashtag"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/tags/%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9"
+        ><bdi>#<span>العربية</span></bdi></a
+      ></VMenu
+    ></span
+  >
+  .
+</p>
+<p></p>
+"
+`;
+
 exports[`content-rich > shows some collapsed mentions grouped 1`] = `
-"<p>
+"<p dir="auto">
   <mention-group
     ><span class="h-card"
       ><a
@@ -300,7 +448,7 @@ exports[`content-rich > shows some collapsed mentions grouped 1`] = `
 `;
 
 exports[`content-rich > shows some collapsed mentions inline 1`] = `
-"<p>
+"<p dir="auto">
   <span class="h-card"
     ><a
       class="u-url mention"