Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(helpers): add missing dir attribute for right-to-left languages #357

Merged
merged 3 commits into from
Oct 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/lib/serializerHelpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ type Attributes = Record<string, string | boolean | null | undefined>
const formatAttributes = (node: RTAnyNode, attributes: Attributes): string => {
const _attributes = { ...attributes }

// Respect `ltr` and `rtl` direction
if ("direction" in node && node.direction === "rtl") {
_attributes.dir = node.direction
}

// Add label to attributes
if ("data" in node && "label" in node.data && node.data.label) {
_attributes.class = _attributes.class
Expand Down
67 changes: 67 additions & 0 deletions test/__fixtures__/arRichText.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
[
{
"type": "paragraph",
"text": " المعروف منذ زمن طويل أن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من ",
"spans": [
{
"start": 4,
"end": 13,
"type": "strong"
},
{
"start": 8,
"end": 11,
"type": "em"
},
{
"start": 19,
"end": 23,
"type": "label",
"data": {
"label": "label_1"
}
}
],
"direction": "rtl"
},
{
"type": "o-list-item",
"text": "طبيعي إلى حد ما للأحرف، على",
"spans": [],
"direction": "rtl"
},
{
"type": "o-list-item",
"text": "ر المكتبي ومحرري صفحات الوي",
"spans": [],
"direction": "rtl"
},
{
"type": "o-list-item",
"text": "حث عن نص لوريم إيبسوم إلى",
"spans": [],
"direction": "rtl"
},
{
"type": "paragraph",
"text": "إيبسوم إلى اكتشاف العديد من المواقع الإلكترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).",
"spans": [
{
"start": 30,
"end": 41,
"type": "hyperlink",
"data": {
"id": "YCiUyRUAACQAxfZK",
"type": "kitchen_sink",
"tags": [],
"slug": "home",
"lang": "en-us",
"uid": "home",
"link_type": "Document",
"isBroken": false
}
}
],
"direction": "rtl"
}
]
9 changes: 0 additions & 9 deletions test/__fixtures__/richText.ts

This file was deleted.

10 changes: 6 additions & 4 deletions test/__snapshots__/helpers-asHTML.test.ts.snap

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion test/__testutils__/createRichTextFixtures.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import arRichTextJSON from "../__fixtures__/arRichText.json"
import cnRichTextJSON from "../__fixtures__/cnRichText.json"
import emojiRichTextJSON from "../__fixtures__/emojiRichText.json"
import enRichTextJSON from "../__fixtures__/enRichText.json"
Expand All @@ -12,11 +13,12 @@ const deepCloneJSON = <T>(json: T): T => {
}

export const createRichTextFixtures = (): Record<
"en" | "cn" | "ko" | "emoji" | "overlapped" | "xss",
"en" | "ar" | "cn" | "ko" | "emoji" | "overlapped" | "xss",
RichTextField
> => {
return {
en: deepCloneJSON(enRichTextJSON) as RichTextField,
ar: deepCloneJSON(arRichTextJSON) as RichTextField,
cn: deepCloneJSON(cnRichTextJSON) as RichTextField,
ko: deepCloneJSON(koRichTextJSON) as RichTextField,
emoji: deepCloneJSON(emojiRichTextJSON) as RichTextField,
Expand Down
6 changes: 6 additions & 0 deletions test/helpers-asHTML.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,12 @@ it("includes target attribute on links with a target value", () => {
)
})

it("includes `dir` attribute on right-to-left languages", () => {
const richTextFixtures = createRichTextFixtures()

expect(asHTML(richTextFixtures.ar, { linkResolver })).toMatchSnapshot()
})

it("returns null for nullish inputs", () => {
expect(asHTML(null)).toBeNull()
expect(asHTML(undefined)).toBeNull()
Expand Down
16 changes: 10 additions & 6 deletions test/helpers-asText.test.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { expect, it } from "vitest"

import { richTextFixture } from "./__fixtures__/richText"
import { createRichTextFixtures } from "./__testutils__/createRichTextFixtures"

import { asText } from "../src"
import { asText as richTextAsText } from "../src/richtext"

it("is an alias for @prismicio/client/richtext's `asText` function for non-nullish inputs", () => {
expect(asText(richTextFixture.en)).toBe(richTextAsText(richTextFixture.en))
const richTextFixtures = createRichTextFixtures()

expect(asText(richTextFixtures.en)).toBe(richTextAsText(richTextFixtures.en))
})

it("returns null for nullish inputs", () => {
Expand All @@ -15,12 +17,14 @@ it("returns null for nullish inputs", () => {
})

it("supports separator configuration", () => {
expect(asText(richTextFixture.en, { separator: "__separator__" })).toBe(
richTextAsText(richTextFixture.en, "__separator__"),
const richTextFixtures = createRichTextFixtures()

expect(asText(richTextFixtures.en, { separator: "__separator__" })).toBe(
richTextAsText(richTextFixtures.en, "__separator__"),
)

// TODO: Remove when we remove support for deprecated tuple-style configuration.
expect(asText(richTextFixture.en, "__separator__")).toBe(
richTextAsText(richTextFixture.en, "__separator__"),
expect(asText(richTextFixtures.en, "__separator__")).toBe(
richTextAsText(richTextFixtures.en, "__separator__"),
)
})
16 changes: 16 additions & 0 deletions test/richtext/__snapshots__/serialize.test.ts.snap
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`handles Arabic characters correctly 1`] = `
[
"<p> الم<strong>عروف<em> من</em>ذ </strong>زمن طو<span class="label_1">يل أ</span>ن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من </p>",
"<ol><li>طبيعي إلى حد ما للأحرف، على</li><li>ر المكتبي ومحرري صفحات الوي</li><li>حث عن نص لوريم إيبسوم إلى</li></ol>",
"<p>إيبسوم إلى اكتشاف العديد من ال<a href="linkResolver(YCiUyRUAACQAxfZK)">مواقع الإلك</a>ترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).</p>",
]
`;

exports[`handles Arabic characters correctly 2`] = `
[
"<p> الم<strong>عروف<em> من</em>ذ </strong>زمن طو<span class="label_1">يل أ</span>ن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من </p>",
"<ol><li>طبيعي إلى حد ما للأحرف، على</li><li>ر المكتبي ومحرري صفحات الوي</li><li>حث عن نص لوريم إيبسوم إلى</li></ol>",
"<p>إيبسوم إلى اكتشاف العديد من ال<a href="linkResolver(YCiUyRUAACQAxfZK)">مواقع الإلك</a>ترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).</p>",
angeloashmore marked this conversation as resolved.
Show resolved Hide resolved
]
`;

exports[`handles Chinese characters correctly 1`] = `
[
"<p>得辞<strong>象今歓<em>予板</em>聞所詐上</strong>修戸間。比保広社配術工務庫載水設応氷諸書評</p>",
Expand Down
2 changes: 2 additions & 0 deletions test/richtext/serialize.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ it(
serializeMacro("en"),
)

it("handles Arabic characters correctly", serializeMacro("ar"))

it("handles Chinese characters correctly", serializeMacro("cn"))

it("handles Korean characters correctly", serializeMacro("ko"))
Expand Down
Loading