Skip to content

Commit 914c239

Browse files
harshmetkel24harshmetkel24
authored
[lexical-playground] Bug Fix: include font sizes in pt as well in parseAllowedFontSize (#7719)
1 parent f104810 commit 914c239

File tree

5 files changed

+126
-22
lines changed

5 files changed

+126
-22
lines changed

‎packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,26 +55,26 @@ test.describe('HTML Tables CopyAndPaste', () => {
5555
<p
5656
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
5757
dir="ltr">
58-
<span data-lexical-text="true">a</span>
58+
<span style="font-size: 11pt" data-lexical-text="true">a</span>
5959
</p>
6060
</td>
6161
<td class="PlaygroundEditorTheme__tableCell">
6262
<p
6363
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
6464
dir="ltr">
65-
<span data-lexical-text="true">b</span>
65+
<span style="font-size: 11pt" data-lexical-text="true">b</span>
6666
</p>
6767
<p
6868
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
6969
dir="ltr">
70-
<span data-lexical-text="true">b</span>
70+
<span style="font-size: 11pt" data-lexical-text="true">b</span>
7171
</p>
7272
</td>
7373
<td class="PlaygroundEditorTheme__tableCell">
7474
<p
7575
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
7676
dir="ltr">
77-
<span data-lexical-text="true">c</span>
77+
<span style="font-size: 11pt" data-lexical-text="true">c</span>
7878
</p>
7979
</td>
8080
</tr>
@@ -83,21 +83,21 @@ test.describe('HTML Tables CopyAndPaste', () => {
8383
<p
8484
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
8585
dir="ltr">
86-
<span data-lexical-text="true">d</span>
86+
<span style="font-size: 11pt" data-lexical-text="true">d</span>
8787
</p>
8888
</td>
8989
<td class="PlaygroundEditorTheme__tableCell">
9090
<p
9191
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
9292
dir="ltr">
93-
<span data-lexical-text="true">e</span>
93+
<span style="font-size: 11pt" data-lexical-text="true">e</span>
9494
</p>
9595
</td>
9696
<td class="PlaygroundEditorTheme__tableCell">
9797
<p
9898
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
9999
dir="ltr">
100-
<span data-lexical-text="true">f</span>
100+
<span style="font-size: 11pt" data-lexical-text="true">f</span>
101101
</p>
102102
</td>
103103
</tr>
@@ -131,21 +131,27 @@ test.describe('HTML Tables CopyAndPaste', () => {
131131
<p
132132
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
133133
dir="ltr">
134-
<span data-lexical-text="true">short</span>
134+
<span style="font-size: 11pt" data-lexical-text="true">
135+
short
136+
</span>
135137
</p>
136138
</td>
137139
<td class="PlaygroundEditorTheme__tableCell">
138140
<p
139141
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
140142
dir="ltr">
141-
<span data-lexical-text="true">wide</span>
143+
<span style="font-size: 11pt" data-lexical-text="true">
144+
wide
145+
</span>
142146
</p>
143147
</td>
144148
<td class="PlaygroundEditorTheme__tableCell">
145149
<p
146150
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
147151
dir="ltr">
148-
<span data-lexical-text="true">default</span>
152+
<span style="font-size: 11pt" data-lexical-text="true">
153+
default
154+
</span>
149155
</p>
150156
</td>
151157
</tr>
@@ -154,21 +160,21 @@ test.describe('HTML Tables CopyAndPaste', () => {
154160
<p
155161
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
156162
dir="ltr">
157-
<span data-lexical-text="true">a</span>
163+
<span style="font-size: 11pt" data-lexical-text="true">a</span>
158164
</p>
159165
</td>
160166
<td class="PlaygroundEditorTheme__tableCell">
161167
<p
162168
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
163169
dir="ltr">
164-
<span data-lexical-text="true">b</span>
170+
<span style="font-size: 11pt" data-lexical-text="true">b</span>
165171
</p>
166172
</td>
167173
<td class="PlaygroundEditorTheme__tableCell">
168174
<p
169175
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
170176
dir="ltr">
171-
<span data-lexical-text="true">c</span>
177+
<span style="font-size: 11pt" data-lexical-text="true">c</span>
172178
</p>
173179
</td>
174180
</tr>

‎packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ test.describe('HTML CopyAndPaste', () => {
3232
dir="ltr">
3333
<strong
3434
class="PlaygroundEditorTheme__textBold"
35+
style="font-size: 11pt"
3536
data-lexical-text="true">
3637
Bold
3738
</strong>
@@ -41,6 +42,7 @@ test.describe('HTML CopyAndPaste', () => {
4142
dir="ltr">
4243
<em
4344
class="PlaygroundEditorTheme__textItalic"
45+
style="font-size: 11pt"
4446
data-lexical-text="true">
4547
Italic
4648
</em>
@@ -50,6 +52,7 @@ test.describe('HTML CopyAndPaste', () => {
5052
dir="ltr">
5153
<span
5254
class="PlaygroundEditorTheme__textUnderline"
55+
style="font-size: 11pt"
5356
data-lexical-text="true">
5457
underline
5558
</span>
@@ -60,6 +63,7 @@ test.describe('HTML CopyAndPaste', () => {
6063
<strong
6164
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic
6265
PlaygroundEditorTheme__textUnderline"
66+
style="font-size: 11pt"
6367
data-lexical-text="true">
6468
Bold Italic Underline
6569
</strong>

‎packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -962,4 +962,70 @@ test.describe('CopyAndPaste', () => {
962962
`,
963963
);
964964
});
965+
966+
test('Process font-size from content copied from Google Docs/MS Word', async ({
967+
page,
968+
isPlainText,
969+
}) => {
970+
test.skip(isPlainText);
971+
await focusEditor(page);
972+
973+
const clipboard = {
974+
'text/html': `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-1e6b36e2-7fff-9788-e6e2-d502cc6babbf"><p dir="ltr" style="line-height:1.56;margin-top:10pt;margin-bottom:0pt;"><span style="font-size:24pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Random text at </span><span style="font-size:36pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">36 pt</span></p></b>`,
975+
};
976+
977+
await withExclusiveClipboardAccess(async () => {
978+
await pasteFromClipboard(page, clipboard);
979+
980+
await assertHTML(
981+
page,
982+
html`
983+
<p
984+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
985+
dir="ltr">
986+
<span style="font-size: 24pt" data-lexical-text="true">
987+
Random text at
988+
</span>
989+
<span style="font-size: 36pt" data-lexical-text="true">36 pt</span>
990+
</p>
991+
`,
992+
);
993+
});
994+
});
995+
996+
test('test font-size in pt and px both are processed correctly', async ({
997+
page,
998+
isPlainText,
999+
}) => {
1000+
test.skip(isPlainText);
1001+
await focusEditor(page);
1002+
1003+
const clipboard = {
1004+
'text/html': `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-2d2ed25f-7fff-2f5a-2422-f7e624a743db"><p dir="ltr" style="line-height:1.56;margin-top:10pt;margin-bottom:0pt;"><span style="font-size:24px;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Text in 24px</span></p><p dir="ltr" style="line-height:1.56;margin-top:10pt;margin-bottom:0pt;"><span style="font-size:36pt;font-family:Lato,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Text in 36pt</span></p></b>`,
1005+
};
1006+
1007+
await withExclusiveClipboardAccess(async () => {
1008+
await pasteFromClipboard(page, clipboard);
1009+
1010+
await assertHTML(
1011+
page,
1012+
html`
1013+
<p
1014+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
1015+
dir="ltr">
1016+
<span style="font-size: 24px;" data-lexical-text="true">
1017+
Text in 24px
1018+
</span>
1019+
</p>
1020+
<p
1021+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
1022+
dir="ltr">
1023+
<span style="font-size: 36pt;" data-lexical-text="true">
1024+
Text in 36pt
1025+
</span>
1026+
</p>
1027+
`,
1028+
);
1029+
});
1030+
});
9651031
});

‎packages/lexical-playground/src/plugins/ToolbarPlugin/fontSize.tsx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,41 @@ import {
2222
UpdateFontSizeType,
2323
} from './utils';
2424

25+
function parseFontSize(input: string): [number, string] | null {
26+
const match = input.match(/^(\d+(?:\.\d+)?)(px|pt)$/);
27+
return match ? [Number(match[1]), match[2]] : null;
28+
}
29+
30+
function normalizeToPx(fontSize: number, unit: string): number {
31+
return unit === 'pt' ? Math.round((fontSize * 4) / 3) : fontSize;
32+
}
33+
34+
function isValidFontSize(fontSizePx: number): boolean {
35+
return (
36+
fontSizePx >= MIN_ALLOWED_FONT_SIZE && fontSizePx <= MAX_ALLOWED_FONT_SIZE
37+
);
38+
}
39+
40+
export function parseFontSizeForToolbar(input: string): string {
41+
const parsed = parseFontSize(input);
42+
if (!parsed) {
43+
return '';
44+
}
45+
46+
const [fontSize, unit] = parsed;
47+
const fontSizePx = normalizeToPx(fontSize, unit);
48+
return `${fontSizePx}px`;
49+
}
50+
2551
export function parseAllowedFontSize(input: string): string {
26-
const match = input.match(/^(\d+(?:\.\d+)?)px$/);
27-
if (match) {
28-
const n = Number(match[1]);
29-
if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) {
30-
return input;
31-
}
52+
const parsed = parseFontSize(input);
53+
if (!parsed) {
54+
return '';
3255
}
33-
return '';
56+
57+
const [fontSize, unit] = parsed;
58+
const fontSizePx = normalizeToPx(fontSize, unit);
59+
return isValidFontSize(fontSizePx) ? input : '';
3460
}
3561

3662
export default function FontSize({

‎packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ import {INSERT_PAGE_BREAK} from '../PageBreakPlugin';
8989
import {InsertPollDialog} from '../PollPlugin';
9090
import {SHORTCUTS} from '../ShortcutsPlugin/shortcuts';
9191
import {InsertTableDialog} from '../TablePlugin';
92-
import FontSize from './fontSize';
92+
import FontSize, {parseFontSizeForToolbar} from './fontSize';
9393
import {
9494
clearFormatting,
9595
formatBulletList,
@@ -1000,7 +1000,9 @@ export default function ToolbarPlugin({
10001000
/>
10011001
<Divider />
10021002
<FontSize
1003-
selectionFontSize={toolbarState.fontSize.slice(0, -2)}
1003+
selectionFontSize={parseFontSizeForToolbar(
1004+
toolbarState.fontSize,
1005+
).slice(0, -2)}
10041006
editor={activeEditor}
10051007
disabled={!isEditable}
10061008
/>

0 commit comments

Comments
 (0)