Skip to content

Commit e7c161e

Browse files
ThaddeusJiangThaddeusJiang
committed
fix: 🐛 email-edit page style
1 parent 0e72f52 commit e7c161e

File tree

7 files changed

+168
-29
lines changed

7 files changed

+168
-29
lines changed

‎docs/v1.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
same as react-email
44

55
- [x] Text
6-
- [ ] Image
6+
- [x] Image
77
- [x] Heading 1
8-
- [ ] Heading 2
9-
- [ ] Heading 3
10-
- [ ] Bullet List
11-
- [ ] Numbered List
12-
- [ ] Button
13-
- [ ] Divider
14-
- [ ] HTML
8+
- [x] Heading 2
9+
- [x] Heading 3
10+
- [x] Bullet List
11+
- [x] Numbered List
12+
- [x] Button
13+
- [x] Divider
14+
- [x] HTML
1515
- [ ] Youtube
1616
- [ ] X(former Twitter)
17-
- [ ] Quote
17+
- [x] Quote
1818
- [ ] Section
19-
- [ ] Code
19+
- [x] Code
2020
- [ ] Social Links
2121
- [ ] Unsubscribe Footer
2222
- [ ] Variable

‎playwright.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export default defineConfig({
1313
screenshot: "only-on-failure",
1414
video: "retain-on-failure",
1515
viewport: { width: 1280, height: 720 }, // MacBook Pro 13", playright default
16+
actionTimeout: 15000,
17+
navigationTimeout: 15000,
18+
launchOptions: {
19+
slowMo: 100,
20+
},
1621
},
1722

1823
projects: [

‎src/app/tailwind.css

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,49 @@ body {
6868
padding-top: 0 !important;
6969
}
7070

71-
.my-button {
72-
@apply z-1 inline-block rounded-4xl bg-primary px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600
71+
/* Email typography */
72+
.ce-block__content {
73+
@apply [-webkit-text-size-adjust:100%] break-words font-sans;
74+
}
75+
76+
.ce-block__content h1 {
77+
@apply text-[2em] font-bold my-[0.67em];
78+
}
79+
80+
.ce-block__content h2 {
81+
@apply text-[1.5em] font-bold my-[0.83em];
82+
}
83+
84+
.ce-block__content h3 {
85+
@apply text-[1.17em] font-bold my-4;
86+
}
87+
88+
.ce-block__content p {
89+
@apply my-4 leading-[1.5];
90+
}
91+
92+
.ce-block__content ul {
93+
@apply list-disc ml-5 my-4;
94+
}
95+
96+
.ce-block__content ol {
97+
@apply list-decimal ml-5 my-4;
98+
}
99+
100+
.ce-block__content blockquote {
101+
@apply border-l-4 border-gray-300 pl-4 my-4;
102+
}
103+
104+
.ce-block__content a {
105+
@apply text-blue-600 hover:underline;
106+
}
107+
108+
.ce-block__content img {
109+
@apply max-w-full h-auto my-4;
110+
}
111+
112+
.codex-editor [data-placeholder]:empty:before, .codex-editor [data-placeholder][data-empty=true]:before {
113+
color: rgba(55, 53, 47, 0.2) !important;
73114
}
74115
}
75116

‎src/components/email-form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export function EmailForm() {
158158
},
159159
},
160160
},
161-
placeholder: "Let`s write an awesome story!",
161+
placeholder: "Write, press '/' for commands",
162162
autofocus: true,
163163
onReady: () => {
164164
setIsReady(true)

‎tests/e2e/email.spec.ts

Lines changed: 109 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,131 @@ test("Email Edit Page", async ({ page }) => {
99
await page.getByRole("button", { name: "Sign in" }).click()
1010

1111
await page.locator(".ce-paragraph").click()
12-
await page.locator(".ce-paragraph").fill("this is an email")
12+
await page.locator(".ce-paragraph").fill("this is Text")
13+
await page.keyboard.press("Enter")
1314

14-
await page.keyboard.press("Enter", { delay: 100 })
15-
await page.keyboard.press("/", { delay: 100 })
15+
await page.keyboard.press("/")
16+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
17+
await page.getByRole('textbox', { name: 'Filter' }).fill('heading 1')
18+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
19+
await page.getByRole('textbox', { name: 'Filter' }).press('Enter')
20+
await page.getByRole('heading', { name: 'Heading' }).fill('this is Heading 1')
21+
await page.keyboard.press("Enter")
22+
23+
await page.keyboard.press("/")
24+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
25+
await page.getByRole('textbox', { name: 'Filter' }).fill('heading 2')
26+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
27+
await page.getByRole('textbox', { name: 'Filter' }).press('Enter')
28+
await page.getByRole('heading', { name: 'Heading 2' }).fill('this is Heading 2')
29+
await page.keyboard.press("Enter")
30+
31+
await page.keyboard.press("/")
32+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
33+
await page.getByRole('textbox', { name: 'Filter' }).fill('heading 3')
34+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
35+
await page.getByRole('textbox', { name: 'Filter' }).press('Enter')
36+
await page.getByRole('heading', { name: 'Heading 3' }).fill('this is Heading 3')
37+
await page.keyboard.press("Enter")
38+
39+
await page.keyboard.press("/")
40+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
41+
await page.getByRole('textbox', { name: 'Filter' }).fill('divider')
42+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
43+
await page.keyboard.press("Enter")
44+
45+
await page.keyboard.press("/")
46+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
47+
await page.getByRole('textbox', { name: 'Filter' }).fill('unordered list')
48+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
49+
await page.getByRole('textbox', { name: 'Filter' }).press('Enter')
50+
await page.getByRole('listitem').locator('div').fill('item')
51+
await page.keyboard.press("Enter")
52+
await page.keyboard.type("item")
53+
await page.keyboard.press("Enter")
54+
await page.keyboard.press("Enter")
55+
56+
await page.keyboard.press("/")
57+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
58+
await page.getByRole('textbox', { name: 'Filter' }).fill('ordered list')
59+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
60+
await page.getByRole('textbox', { name: 'Filter' }).press('ArrowDown')
61+
await page.getByRole('textbox', { name: 'Filter' }).press('Enter')
62+
await page.locator('ol div').fill('item 1')
63+
await page.keyboard.press("Enter")
64+
await page.keyboard.type("item 2")
65+
await page.keyboard.press("Enter")
66+
await page.keyboard.press("Enter")
67+
68+
await page.keyboard.press("/")
69+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
1670
await page.getByRole("textbox", { name: "Filter" }).fill("link")
1771
await page.getByRole("textbox", { name: "Filter" }).press("ArrowDown")
1872
await page.getByRole("textbox", { name: "Filter" }).press("Enter")
1973
await page.locator(".cdx-input").fill("https://ThaddeusJiang.com")
20-
await page.keyboard.press("Enter", { delay: 100 })
74+
await page.keyboard.press("Enter")
2175
await page.waitForTimeout(2000)
2276

23-
// await page.locator('.ce-paragraph').last().fill('https://playwright.dev/img/logos/Browsers.png');
24-
// await page.keyboard.press('Enter', { delay: 100 });
25-
// await page.waitForTimeout(1000);
26-
27-
await page.keyboard.press("Enter", { delay: 100 })
28-
await page.keyboard.press("/", { delay: 100 })
77+
await page.keyboard.press("Enter")
78+
await page.keyboard.press("/")
79+
await page.getByRole('textbox', { name: 'Filter' }).waitFor({ state: 'visible', timeout: 2000 })
2980
await page.getByRole("textbox", { name: "Filter" }).fill("button")
3081
await page.getByRole("textbox", { name: "Filter" }).press("ArrowDown")
3182
await page.getByRole("textbox", { name: "Filter" }).press("Enter")
3283
await page.getByRole("link", { name: "Button" }).fill("Sign In")
33-
await page.keyboard.press("Enter", { delay: 100 })
84+
await page.keyboard.press("Enter")
3485

86+
// aria snapshot
3587
await expect(page.locator("body")).toMatchAriaSnapshot(`
36-
- textbox "Your Resend API Token"
37-
- textbox "[email protected]"
38-
- textbox "[email protected]"
39-
- textbox "Subject"
40-
- text: this is an email
88+
- text: this is Text
89+
- heading "this is Heading 1" [level=1]
90+
- heading "this is Heading 2" [level=2]
91+
- heading "this is Heading 3" [level=3]
92+
- separator
93+
- list:
94+
- listitem: • item
95+
- listitem: • item
96+
- list:
97+
- listitem: item 1
98+
- listitem: item 2
4199
- link "ThaddeusJiang ThaddeusJiang Freelance Web Developer Blog thaddeusjiang.com":
100+
- text: ThaddeusJiang
42101
- paragraph: ThaddeusJiang Freelance Web Developer Blog
102+
- text: thaddeusjiang.com
43103
- link "Sign In"
104+
- text: Write, press '/' for commands
105+
- img
106+
- img
107+
- img
108+
- textbox "Filter"
109+
- img
110+
- text: Link
111+
- img
112+
- text: Text
113+
- img
114+
- text: Heading 1
115+
- img
116+
- text: Heading 2
117+
- img
118+
- text: Heading 3
119+
- img
120+
- text: Button
121+
- img
122+
- text: Divider
123+
- img
124+
- text: Image
125+
- img
126+
- text: Unordered List
127+
- img
128+
- text: Ordered List
129+
- img
130+
- text: Checklist
131+
- img
132+
- text: Quote
133+
- img
134+
- text: Code
135+
- img
136+
- text: Raw HTML
44137
- button "Send"
45138
`)
46139

‎tests/e2e/email.spec.ts-snapshots/email-edit-page-chromium-1080p-darwin.png

18.2 KB
Loading

‎tests/e2e/email.spec.ts-snapshots/email-edit-page-chromium-1440p-darwin.png

16.6 KB
Loading

0 commit comments

Comments
 (0)