From 3120bbb77fa5ce235cb8c5161dba90db470f3e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Tue, 5 Mar 2024 07:25:58 +0100 Subject: [PATCH] feat(content-rich html parsing): add paragraphs LTR/RTL direction support (#2545) --- composables/content-parse.ts | 11 ++ .../__snapshots__/content-rich.test.ts.snap | 172 ++++++++++++++++-- .../__snapshots__/html-parse.test.ts.snap | 6 +- tests/nuxt/content-rich.test.ts | 14 ++ 4 files changed, 188 insertions(+), 15 deletions(-) diff --git a/composables/content-parse.ts b/composables/content-parse.ts index 7f6745ba..67f01948 100644 --- a/composables/content-parse.ts +++ b/composables/content-parse.ts @@ -524,10 +524,21 @@ function transformMarkdown(node: Node) { return _markdownProcess(node.value) } +function addBdiParagraphs(node: Node) { + if (node.name === 'p' && !('dir' in node.attributes) && node.children?.length && node.children.length > 1) + node.attributes.dir = 'auto' + + return node +} + function transformParagraphs(node: Node): Node | Node[] { + // Add bdi to paragraphs + addBdiParagraphs(node) + // For top level paragraphs, inject an empty

to preserve status paragraphs in our editor (except for the last one) if (node.parent?.type === DOCUMENT_NODE && node.name === 'p' && node.parent.children.at(-1) !== node) return [node, h('p')] + return node } diff --git a/tests/nuxt/__snapshots__/content-rich.test.ts.snap b/tests/nuxt/__snapshots__/content-rich.test.ts.snap index a5ebc393..e9d3f6e7 100644 --- a/tests/nuxt/__snapshots__/content-rich.test.ts.snap +++ b/tests/nuxt/__snapshots__/content-rich.test.ts.snap @@ -38,7 +38,7 @@ const isDark = usePreferredDark()

" `; exports[`content-rich > code frame 2 1`] = ` -"

+"

code frame 2 1`] = ` " `; -exports[`content-rich > code frame empty 1`] = `"


"`;
+exports[`content-rich > code frame empty 1`] = `"

"`;
 
-exports[`content-rich > code frame no lang 1`] = `"
hello world

no lang
"`;
+exports[`content-rich > code frame no lang 1`] = `"
hello world

no lang
"`;
 
 exports[`content-rich > collapse mentions 1`] = `
-"

+"

    handles formatting from servers 1`] = `
 `;
 
 exports[`content-rich > handles html within code blocks 1`] = `
-"

+"

   HTML block code:

   
 <span class="icon--noto icon--noto--1st-place-medal"></span>
@@ -178,7 +178,7 @@ exports[`content-rich > handles html within code blocks 1`] = `
 `;
 
 exports[`content-rich > hashtag adds bdi 1`] = `
-"

+"

   Testing bdi is added
    hashtag adds bdi 1`] = `
 `;
 
 exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
-"

+"

   Testing bdi not added
    hashtag doesn't add 2 bdi 1`] = `
 `;
 
 exports[`content-rich > hides collapsed mentions 1`] = `
-"
content

+"
content

 "
 `;
 
 exports[`content-rich > inline code with link 1`] = `
-"

+"

   Inline code with link:
   https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal inline code with link 1`] = `
 `;
 
 exports[`content-rich > link + mention 1`] = `
-"

+"

   Happy
    link + mention 1`] = `
 "
 `;
 
+exports[`content-rich > p moved to div and text children replaced with p[dir="auto"] tags: br children removed 1`] = `
+"

+  @bebatjof
+  هذا اختبار:
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت
+  ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. أيضًا، يجب
+  إصلاح نموذج 0.
+

+

+

+  This is a test:
I like how the arabic dual form is supported. The last
+  one is mistranslated and I'm trying to find how to fix it. Also, the form
+  for 0 needs to be fixed.
+

+

+"
+`;
+
 exports[`content-rich > plain text 1`] = `
 "hello there
 "
 `;
 
+exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] = `
+"

+  هذا اختبار جديد
+  🐦🐤
+  @bebatjof
+  
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة
+  الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها.
+  🐦🐤
+  ;). كما أن النموذج الخاص بـ 0 يحتاج إلى إصلاح
+  #turkey
+  #العربية
+  .
+

+

+

+  This is a new test
+  🐦🐤
+  @bebatjof
+  
I like how the arabic dual form is supported. The last one is
+  mistranslated and I'm trying to find how to fix it.
+  🐦🐤
+  ;). Also, the form for 0 needs to be fixed
+  #turkey
+  #العربية
+  .
+

+

+"
+`;
+
 exports[`content-rich > shows some collapsed mentions grouped 1`] = `
-"

+"

    shows some collapsed mentions grouped 1`] = `
 `;
 
 exports[`content-rich > shows some collapsed mentions inline 1`] = `
-"

+"

    code frame 2 > html 1`] = `
-"

+"

    html entities > html 1`] = `
 
 exports[`html-parse > html entities > text 1`] = `"Hello ."`;
 
-exports[`html-parse > inline markdown > html 1`] = `"
text code bold italic del
code block
"`;
+exports[`html-parse > inline markdown > html 1`] = `"
text code bold italic del
code block
"`;
 
 exports[`html-parse > inline markdown > text 1`] = `
 "text \`code\` **bold** *italic* ~~del~~
@@ -111,7 +111,7 @@ code block
 `;
 
 exports[`html-parse > link + mention > html 1`] = `
-"

+"

   Happy
    {
     `)
     expect(formatted).toMatchSnapshot()
   })
+
+  it ('root p includes dir="auto" attr when mixed content', async () => {
+    const { formatted } = await render(`
+      
هذا اختبار جديد 🐦🐤 @bebatjof 
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. 🐦🐤 ;). كما أن النموذج الخاص بـ 0 يحتاج إلى إصلاح   .
This is a new test 🐦🐤 @bebatjof 
I like how the arabic dual form is supported. The last one is mistranslated and I'm trying to find how to fix it. 🐦🐤 ;). Also, the form for 0 needs to be fixed   .

+    `)
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it ('p moved to div and text children replaced with p[dir="auto"] tags: br children removed', async () => {
+    const { formatted } = await render(`
+      
@bebatjof هذا اختبار:
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. أيضًا، يجب إصلاح نموذج 0.
This is a test:
I like how the arabic dual form is supported. The last one is mistranslated and I'm trying to find how to fix it. Also, the form for 0 needs to be fixed.

+    `)
+    expect(formatted).toMatchSnapshot()
+  })
 })
 
 describe('editor', () => {