mirror of
https://github.com/facebook/lexical.git
synced 2025-05-17 15:18:47 +08:00
Html formatter (#1553)
* Add attributes formatter (Firefox and Chrome output different order) * Add html formatter to trigger pritter in VC / precommit hook * Add html format trigger to tests
This commit is contained in:
Maksim Horbachevsky
committed by
acywatson
acywatson
parent
3b13497b8a
commit
dbae9f8014
@ -6,4 +6,6 @@ module.exports = {
|
||||
jsxBracketSameLine: true,
|
||||
printWidth: 80,
|
||||
trailingComma: 'all',
|
||||
htmlWhitespaceSensitivity: 'ignore',
|
||||
attributeGroups: ['$DEFAULT', '^data-'],
|
||||
};
|
||||
|
||||
3
package-lock.json
generated
3
package-lock.json
generated
@ -31729,6 +31729,7 @@
|
||||
}
|
||||
},
|
||||
"packages/lexical-code": {
|
||||
"name": "@lexical/code",
|
||||
"version": "0.1.16",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -36255,7 +36256,7 @@
|
||||
"open": "^8.3.0",
|
||||
"pirates": "^4.0.1",
|
||||
"pixelmatch": "^5.2.1",
|
||||
"playwright-core": "1.16.0-next-alpha-trueadm-fork",
|
||||
"playwright-core": "=1.17.0-next-alpha-nov-5-2021",
|
||||
"pngjs": "^5.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"source-map-support": "^0.4.18",
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
assertHTML,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
pasteFromClipboard,
|
||||
test,
|
||||
@ -34,7 +35,25 @@ test.describe('Auto Links', () => {
|
||||
);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="http://example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">http://example.com</span></a><span data-lexical-text="true"> and </span><a href="https://example.com/path?with=query#and-hash" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">https://example.com/path?with=query#and-hash</span></a><span data-lexical-text="true"> and </span><a href="www.example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">www.example.com</span></a></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a href="http://example.com" dir="ltr">
|
||||
<span data-lexical-text="true">http://example.com</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">and</span>
|
||||
<a href="https://example.com/path?with=query#and-hash" dir="ltr">
|
||||
<span data-lexical-text="true">
|
||||
https://example.com/path?with=query#and-hash
|
||||
</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">and</span>
|
||||
<a href="www.example.com" dir="ltr">
|
||||
<span data-lexical-text="true">www.example.com</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -43,41 +62,60 @@ test.describe('Auto Links', () => {
|
||||
isPlainText,
|
||||
}) => {
|
||||
test.skip(isPlainText);
|
||||
const htmlWithLink =
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="http://example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">http://example.com</span></a></p>';
|
||||
const htmlWithLink = html`
|
||||
<p dir="ltr">
|
||||
<a href="http://example.com" dir="ltr">
|
||||
<span data-lexical-text="true">http://example.com</span>
|
||||
</a>
|
||||
</p>
|
||||
`;
|
||||
|
||||
await focusEditor(page);
|
||||
await page.keyboard.type('http://example.com');
|
||||
await assertHTML(page, htmlWithLink);
|
||||
await assertHTML(page, htmlWithLink, {ignoreClasses: true});
|
||||
|
||||
// Add non-url text after the link
|
||||
await page.keyboard.type('!');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">http://example.com!</span></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">http://example.com!</span>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(page, htmlWithLink);
|
||||
await assertHTML(page, htmlWithLink, {ignoreClasses: true});
|
||||
|
||||
// Add non-url text before the link
|
||||
await moveToLineBeginning(page);
|
||||
await page.keyboard.type('!');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">!http://example.com</span></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">!http://example.com</span>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(page, htmlWithLink);
|
||||
await assertHTML(page, htmlWithLink, {ignoreClasses: true});
|
||||
|
||||
// Add newline after link
|
||||
await moveToLineEnd(page);
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
htmlWithLink + '<p class="PlaygroundEditorTheme__paragraph"><br /></p>',
|
||||
htmlWithLink +
|
||||
html`
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(page, htmlWithLink);
|
||||
await assertHTML(page, htmlWithLink, {ignoreClasses: true});
|
||||
});
|
||||
|
||||
test('Can create link when pasting text with urls', async ({
|
||||
@ -92,7 +130,25 @@ test.describe('Auto Links', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="http://example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">http://example.com</span></a><span data-lexical-text="true"> and </span><a href="https://example.com/path?with=query#and-hash" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">https://example.com/path?with=query#and-hash</span></a><span data-lexical-text="true"> and </span><a href="www.example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">www.example.com</span></a></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a href="http://example.com" dir="ltr">
|
||||
<span data-lexical-text="true">http://example.com</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">and</span>
|
||||
<a href="https://example.com/path?with=query#and-hash" dir="ltr">
|
||||
<span data-lexical-text="true">
|
||||
https://example.com/path?with=query#and-hash
|
||||
</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">and</span>
|
||||
<a href="www.example.com" dir="ltr">
|
||||
<span data-lexical-text="true">www.example.com</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -107,14 +163,28 @@ test.describe('Auto Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hm</span></a></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<a href="https://" dir="ltr">
|
||||
<span data-lexical-text="true">hm</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
await moveLeft(page, 1);
|
||||
await moveRight(page, 1);
|
||||
await page.keyboard.type('ttps://facebook.co');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">https://facebook.com</span></a></p>',
|
||||
html`
|
||||
<p dir="ltr">
|
||||
<a href="https://" dir="ltr">
|
||||
<span data-lexical-text="true">https://facebook.com</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -27,13 +28,24 @@ function testSuite(charset) {
|
||||
await page.keyboard.type('12345');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.type('6789');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6789</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6789</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -47,7 +59,17 @@ function testSuite(charset) {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">01234</span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">5</span></span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6789</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">01234</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">5</span>
|
||||
</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6789</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -69,13 +91,30 @@ function testSuite(charset) {
|
||||
await page.keyboard.type('1234:)56');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">1234</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true">56</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">1234</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">56</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await repeat(3, async () => await page.keyboard.press('Backspace'));
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">1234</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">1234</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -93,19 +132,44 @@ function testSuite(charset) {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6</span></span></p><p class="PlaygroundEditorTheme__paragraph"><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">7</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">7</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6</span><br><span data-lexical-text="true">7</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">7</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
||||
await repeat(3, async () => await page.keyboard.press('Backspace'));
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -126,12 +190,29 @@ function testSuite(charset) {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">23456</span></p><p class="PlaygroundEditorTheme__paragraph"><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">7</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">23456</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">7</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">23456</span><span class="PlaygroundEditorTheme__characterLimit"><br><span data-lexical-text="true">7</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">23456</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<br />
|
||||
<span data-lexical-text="true">7</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
||||
@ -139,12 +220,27 @@ function testSuite(charset) {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">3456</span></p><p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">7</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">3456</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">7</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">3456</span><br><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">7</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">3456</span>
|
||||
<br />
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">7</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -164,12 +260,41 @@ function testSuite(charset) {
|
||||
if (charset === 'UTF-16') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">234</span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">56</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">234</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">56</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else if (charset === 'UTF-8') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">234</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true">56</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">234</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">56</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -208,14 +333,30 @@ function testSuite(charset) {
|
||||
await page.keyboard.type('6');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span></p><p class="PlaygroundEditorTheme__paragraph"><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">12345</span><span class="PlaygroundEditorTheme__characterLimit"><span data-lexical-text="true">6</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">12345</span>
|
||||
<span class="PlaygroundEditorTheme__characterLimit">
|
||||
<span data-lexical-text="true">6</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -228,12 +369,38 @@ function testSuite(charset) {
|
||||
if (charset === 'UTF-16') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">ààààà</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">à</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">ààààà</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">à</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">àà</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">àààà</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">àà</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">àààà</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -246,18 +413,56 @@ function testSuite(charset) {
|
||||
if (['chromium', 'webkit'].includes(browserName)) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">👨👩👦👦</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">👨👩👦👦</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
if (charset === 'UTF-16') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">👨👩</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">👦👦</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">👨👩</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">👦👦</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">👨</span><span class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">👩👦👦</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">👨</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__characterLimit PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">👩👦👦</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
} from '../utils/index.mjs';
|
||||
@ -22,14 +23,28 @@ test.describe('Clear', () => {
|
||||
await page.keyboard.type('foo');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await click(page, '.action-button.clear');
|
||||
await page.keyboard.type('bar');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
pasteFromClipboard,
|
||||
selectOption,
|
||||
@ -31,7 +32,44 @@ test.describe('CodeBlock', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
alert
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenProperty"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
|
||||
// Remove code block (back to a normal paragraph) and check that highlights are converted into regular text
|
||||
@ -39,12 +77,26 @@ test.describe('CodeBlock', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">alert(1);</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">alert(1);</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">``` alert(1);</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">\`\`\` alert(1);</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -66,12 +118,56 @@ test.describe('CodeBlock', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
alert
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenProperty"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">``` alert(1);</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">\`\`\` alert(1);</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -85,17 +181,67 @@ test.describe('CodeBlock', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span data-lexical-text="true">select </span><span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">*</span><span data-lexical-text="true"> from users</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">select</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenOperator"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<span data-lexical-text="true">from users</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
await selectOption(page, '.code-language', {value: 'sql'});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">select</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenOperator" data-lexical-text="true">*</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">from</span><span data-lexical-text="true"> users</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
select
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenOperator"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
from
|
||||
</span>
|
||||
<span data-lexical-text="true">users</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">``` select * from users</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">\`\`\` select * from users</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -114,7 +260,78 @@ test.describe('CodeBlock', () => {
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">2</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span data-lexical-text="true"> </span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
alert
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenProperty"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
alert
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenProperty"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -134,7 +351,74 @@ test.describe('CodeBlock', () => {
|
||||
await page.keyboard.type('}');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">if</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">{</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">}</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
if
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span data-lexical-text="true">x</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
{
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
}
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
await page.keyboard.down('Shift');
|
||||
await page.keyboard.press('ArrowUp');
|
||||
@ -144,14 +428,152 @@ test.describe('CodeBlock', () => {
|
||||
await page.keyboard.press('Tab');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">if</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">{</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">}</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
if
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span data-lexical-text="true">x</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
{
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
}
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
await page.keyboard.down('Shift');
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.up('Shift');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">if</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">{</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">}</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
if
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span data-lexical-text="true">x</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
{
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
}
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
await page.keyboard.down('Shift');
|
||||
await page.keyboard.press('Tab');
|
||||
@ -159,7 +581,73 @@ test.describe('CodeBlock', () => {
|
||||
await page.keyboard.up('Shift');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">if</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">{</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">x</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">}</span></code>',
|
||||
html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenAttr"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
if
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span data-lexical-text="true">x</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
{
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
}
|
||||
</span>
|
||||
</code>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -168,10 +656,170 @@ test.describe('CodeBlock', () => {
|
||||
isPlainText,
|
||||
}) => {
|
||||
test.skip(isPlainText);
|
||||
const abcHTML =
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">a</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">b</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">c</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>';
|
||||
const bcaHTML =
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">b</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">c</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">a</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>';
|
||||
const abcHTML = html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
b
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
c
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
</code>
|
||||
`;
|
||||
const bcaHTML = html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
b
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
c
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
</code>
|
||||
`;
|
||||
const endOfFirstLine = {
|
||||
anchorOffset: 1,
|
||||
anchorPath: [0, 3, 0],
|
||||
@ -218,8 +866,113 @@ test.describe('CodeBlock', () => {
|
||||
* }
|
||||
*
|
||||
*/
|
||||
const EXPECTED_HTML =
|
||||
'<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">function</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">run</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">{</span><br><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">return</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">[</span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">null</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">,</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">undefined</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">,</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">2</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">,</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__tokenSelector" data-lexical-text="true">""</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">]</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">}</span></code>';
|
||||
const EXPECTED_HTML = html`
|
||||
<code
|
||||
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
|
||||
spellcheck="false"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
|
||||
function
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenFunction"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
run
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
(
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
)
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
{
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
|
||||
return
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
[
|
||||
</span>
|
||||
<span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
|
||||
null
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
,
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="PlaygroundEditorTheme__tokenAttr" data-lexical-text="true">
|
||||
undefined
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
,
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenProperty"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
,
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenSelector"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
""
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
]
|
||||
</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
;
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="PlaygroundEditorTheme__tokenPunctuation"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
}
|
||||
</span>
|
||||
</code>
|
||||
`;
|
||||
const CODE_PASTING_TESTS = [
|
||||
{
|
||||
expectedHTML: EXPECTED_HTML,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -27,7 +28,14 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">も</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">も</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -40,7 +48,9 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -53,7 +63,14 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">もじ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">もじ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -69,7 +86,14 @@ test.describe('Composition', () => {
|
||||
await page.keyboard.type('هَ');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">هَ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">هَ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -81,7 +105,14 @@ test.describe('Composition', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">ه</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">ه</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -94,13 +125,22 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.type('هَ');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">هَ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">هَ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -120,7 +160,14 @@ test.describe('Composition', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">ه</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">ه</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -155,7 +202,14 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">すし もじあ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">すし もじあ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -202,7 +256,17 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br><span data-lexical-text="true">すし もじあ</span><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<br />
|
||||
<span data-lexical-text="true">すし もじあ</span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -239,7 +303,20 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true">すし もじあ</span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">すし もじあ</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -254,7 +331,19 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -275,7 +364,19 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -318,7 +419,21 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true">すし もじあ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true">すし もじあ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -365,7 +480,14 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Luke すし もじあSkywalker</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Luke すし もじあSkywalker</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 11,
|
||||
@ -405,7 +527,20 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#すし</span><span data-lexical-text="true"> もじあ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#すし
|
||||
</span>
|
||||
<span data-lexical-text="true">もじあ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -425,7 +560,14 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">すし#すし もじあ</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">すし#すし もじあ</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -458,7 +600,9 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -482,7 +626,11 @@ test.describe('Composition', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
copyToClipboard,
|
||||
focus,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
IS_LINUX,
|
||||
IS_WINDOWS,
|
||||
@ -40,7 +41,21 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 12,
|
||||
@ -51,7 +66,17 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span><br><br><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 12,
|
||||
@ -66,7 +91,21 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
if (browserName === 'firefox') {
|
||||
await assertSelection(page, {
|
||||
@ -86,7 +125,17 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span><br><br><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
if (browserName === 'firefox') {
|
||||
await assertSelection(page, {
|
||||
@ -110,12 +159,36 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span><br><br><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
||||
@ -125,7 +198,28 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Sounds good!Copy + pasting?</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Sounds good!Copy + pasting?</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 12,
|
||||
@ -136,7 +230,20 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Copy + pasting?</span><br><br><span data-lexical-text="true">Sounds good!Copy + pasting?</span><br><br><span data-lexical-text="true">Sounds good!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Copy + pasting?</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">Sounds good!Copy + pasting?</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">Sounds good!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 12,
|
||||
@ -161,7 +268,60 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -173,7 +333,56 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span><br><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -229,7 +438,60 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -240,7 +502,56 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span><br><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -285,7 +596,60 @@ test.describe('CopyAndPaste', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -296,7 +660,56 @@ test.describe('CopyAndPaste', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foobar2</span><span data-lexical-text="true"> when </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#not</span><br><span data-lexical-text="true">Next </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#line</span><span data-lexical-text="true"> of </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#text</span><span data-lexical-text="true"> test </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foobar2
|
||||
</span>
|
||||
<span data-lexical-text="true">when</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#not
|
||||
</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">Next</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#line
|
||||
</span>
|
||||
<span data-lexical-text="true">of</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#text
|
||||
</span>
|
||||
<span data-lexical-text="true">test</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__hashtag"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -355,7 +768,9 @@ test.describe('CopyAndPaste', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -420,7 +835,9 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -811,7 +1228,29 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a><span data-lexical-text="true"> World</span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a><span data-lexical-text="true"> World</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">World</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">World</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -829,7 +1268,14 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -850,7 +1296,15 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello!</span></p><p class="PlaygroundEditorTheme__paragraph"><br/></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello!</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -874,7 +1328,17 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><a class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" href="https://facebook.com/" dir="ltr"><span data-lexical-text="true">Facebook!</span></a></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<a
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
href="https://facebook.com/"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Facebook!</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -891,7 +1355,11 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">Facebook!</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">Facebook!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await click(page, '.link');
|
||||
@ -903,7 +1371,17 @@ test.describe('CopyAndPaste', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><a href="https://facebook.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Facebook!</span></a></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<a
|
||||
href="https://facebook.com"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Facebook!</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -26,7 +27,17 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type('This is an emoji :)');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">This is an emoji </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">This is an emoji</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -38,7 +49,14 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">This is an emoji </span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">This is an emoji</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 17,
|
||||
@ -77,7 +95,14 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">This is an emoji </span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">This is an emoji</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 17,
|
||||
@ -96,7 +121,28 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type(':) :) <3 :(');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -110,7 +156,30 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.up('Shift');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -122,7 +191,44 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type(':) :) <3 :(');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -135,7 +241,45 @@ test.describe('Emoticons', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -146,7 +290,46 @@ test.describe('Emoticons', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 16,
|
||||
@ -160,7 +343,64 @@ test.describe('Emoticons', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -171,7 +411,60 @@ test.describe('Emoticons', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> </span><span class="emoji heart" data-lexical-text="true"><span class="emoji-inner">❤</span></span><span data-lexical-text="true"> </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji heart" data-lexical-text="true">
|
||||
<span class="emoji-inner">❤</span>
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -189,7 +482,9 @@ test.describe('Emoticons', () => {
|
||||
await repeat(22, async () => await page.keyboard.press('Backspace'));
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -278,7 +573,29 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type('Hey');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hey</span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hey</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -297,7 +614,14 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type('a');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -315,7 +639,14 @@ test.describe('Emoticons', () => {
|
||||
await page.keyboard.type('a');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await page.pause();
|
||||
await assertSelection(page, {
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertSelection,
|
||||
evaluate,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
} from '../utils/index.mjs';
|
||||
@ -29,7 +30,14 @@ test.describe('Extensions', () => {
|
||||
);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -74,7 +82,14 @@ test.describe('Extensions', () => {
|
||||
);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -106,7 +121,14 @@ test.describe('Extensions', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foobar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foobar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -141,7 +163,14 @@ test.describe('Extensions', () => {
|
||||
if (browserName === 'firefox') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -152,7 +181,14 @@ test.describe('Extensions', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foobar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foobar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
keyDownCtrlOrMeta,
|
||||
keyUpCtrlOrMeta,
|
||||
@ -43,7 +44,46 @@ test.describe('File', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">World</strong></p><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">one</strong></li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">two</strong></li></ol>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</strong>
|
||||
</p>
|
||||
<ol class="PlaygroundEditorTheme__ol1">
|
||||
<li
|
||||
value="1"
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
one
|
||||
</strong>
|
||||
</li>
|
||||
<li
|
||||
value="2"
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
two
|
||||
</strong>
|
||||
</li>
|
||||
</ol>
|
||||
`,
|
||||
);
|
||||
|
||||
const [download] = await Promise.all([
|
||||
@ -57,7 +97,9 @@ test.describe('File', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
page.on('filechooser', (fileChooser) => {
|
||||
@ -68,7 +110,46 @@ test.describe('File', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">World</strong></p><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">one</strong></li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">two</strong></li></ol>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</strong>
|
||||
</p>
|
||||
<ol class="PlaygroundEditorTheme__ol1">
|
||||
<li
|
||||
value="1"
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
one
|
||||
</strong>
|
||||
</li>
|
||||
<li
|
||||
value="2"
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
two
|
||||
</strong>
|
||||
</li>
|
||||
</ol>
|
||||
`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -30,7 +31,16 @@ test.describe('Hashtags', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -43,7 +53,16 @@ test.describe('Hashtags', () => {
|
||||
await page.keyboard.type('once');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolonce</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolonce
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -58,7 +77,14 @@ test.describe('Hashtags', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">yolonce</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">yolonce</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -76,7 +102,17 @@ test.describe('Hashtags', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#hello</span><span data-lexical-text="true"> world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#hello
|
||||
</span>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -98,7 +134,16 @@ test.describe('Hashtags', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#helloworld</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#helloworld
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -110,7 +155,17 @@ test.describe('Hashtags', () => {
|
||||
await page.keyboard.press('Space');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#hello</span><span data-lexical-text="true"> world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#hello
|
||||
</span>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -139,7 +194,16 @@ test.describe('Hashtags', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#helloworld</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#helloworld
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -161,7 +225,37 @@ test.describe('Hashtags', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#hello</span><span data-lexical-text="true"> world foo </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#lol</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#lol</span><span data-lexical-text="true"> asdasd </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#lol</span><span data-lexical-text="true"> test this </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#asdas</span><span data-lexical-text="true"> </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#asdas</span><span data-lexical-text="true"> lasdasd asdasd</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#hello
|
||||
</span>
|
||||
<span data-lexical-text="true">world foo</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#lol
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#lol
|
||||
</span>
|
||||
<span data-lexical-text="true">asdasd</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#lol
|
||||
</span>
|
||||
<span data-lexical-text="true">test this</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#asdas
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#asdas
|
||||
</span>
|
||||
<span data-lexical-text="true">lasdasd asdasd</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 15,
|
||||
@ -184,7 +278,9 @@ test.describe('Hashtags', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
sleep,
|
||||
@ -39,7 +40,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -50,7 +64,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -65,7 +88,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 11,
|
||||
@ -76,7 +112,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 11,
|
||||
@ -91,7 +136,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br /></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -102,7 +160,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><br/></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -116,7 +183,14 @@ test.describe('History', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 11,
|
||||
@ -129,7 +203,14 @@ test.describe('History', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -142,7 +223,9 @@ test.describe('History', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -155,7 +238,14 @@ test.describe('History', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -168,7 +258,14 @@ test.describe('History', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 11,
|
||||
@ -182,7 +279,15 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -193,7 +298,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -208,7 +322,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 17,
|
||||
@ -219,7 +346,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 17,
|
||||
@ -234,7 +370,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -245,7 +394,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -262,7 +420,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world, again again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 18,
|
||||
@ -273,7 +444,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world, again again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 18,
|
||||
@ -288,7 +468,20 @@ test.describe('History', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -299,7 +492,16 @@ test.describe('History', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">hello world, again and again</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 22,
|
||||
@ -325,13 +527,56 @@ test.describe('History', () => {
|
||||
await toggleBold(page);
|
||||
await page.keyboard.type('baz');
|
||||
|
||||
const step1HTML =
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">baz</strong></p>';
|
||||
const step2HTML =
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>';
|
||||
const step3HTML =
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>';
|
||||
const step4HTML = '<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
|
||||
const step1HTML = html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
foo
|
||||
</strong>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
baz
|
||||
</strong>
|
||||
</p>
|
||||
`;
|
||||
const step2HTML = html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
foo
|
||||
</strong>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`;
|
||||
const step3HTML = html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
foo
|
||||
</strong>
|
||||
</p>
|
||||
`;
|
||||
const step4HTML = html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`;
|
||||
|
||||
await assertHTML(page, step1HTML);
|
||||
await undo(page);
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
click,
|
||||
copyToClipboard,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
pasteFromClipboard,
|
||||
repeat,
|
||||
@ -38,7 +39,17 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -90,7 +101,27 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some text</span></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some more text</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Some text</span>
|
||||
</p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Some more text</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await moveToLineBeginning(page);
|
||||
@ -149,7 +180,14 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Test</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Test</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await waitForSelector(page, 'button .horizontal-rule');
|
||||
@ -160,7 +198,22 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Test</span></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Test</span>
|
||||
</p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -189,7 +242,14 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Test</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Test</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
@ -210,7 +270,27 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Te</span></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">st</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Te</span>
|
||||
</p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">st</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -234,7 +314,17 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -257,7 +347,17 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -274,7 +374,25 @@ test.describe('HorizontalRule', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p><div data-lexical-decorator="true" contenteditable="false" style="display: contents;"><hr></div><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<div
|
||||
contenteditable="false"
|
||||
style="display: contents;"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<hr />
|
||||
</div>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
click,
|
||||
E2E_PORT,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
waitForSelector,
|
||||
@ -39,7 +40,22 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -70,7 +86,9 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -87,7 +105,28 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;" class="focused"><button class="image-caption-button">Add Caption</button><div class="image-resizer-ne"></div><div class="image-resizer-se"></div><div class="image-resizer-sw"></div><div class="image-resizer-nw"></div></span><br></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
class="focused"
|
||||
/>
|
||||
<button class="image-caption-button">Add Caption</button>
|
||||
<div class="image-resizer-ne"></div>
|
||||
<div class="image-resizer-se"></div>
|
||||
<div class="image-resizer-sw"></div>
|
||||
<div class="image-resizer-nw"></div>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
true,
|
||||
);
|
||||
|
||||
@ -95,7 +134,9 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await click(page, 'div[contenteditable="true"]');
|
||||
@ -108,7 +149,22 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -122,7 +178,9 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -155,7 +213,33 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -167,7 +251,22 @@ test.describe('Images', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -179,7 +278,9 @@ test.describe('Images', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -198,7 +299,37 @@ test.describe('Images', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Test</span><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Test</span>
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -209,7 +340,26 @@ test.describe('Images', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Test</span><span class="editor-image" data-lexical-decorator="true" contenteditable="false"><img src="${IMAGE_URL}" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;"></span><br></p>`,
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Test</span>
|
||||
<span
|
||||
class="editor-image"
|
||||
contenteditable="false"
|
||||
data-lexical-decorator="true"
|
||||
>
|
||||
<img
|
||||
src="${IMAGE_URL}"
|
||||
alt="Yellow flower in tilt shift lens"
|
||||
style="height: inherit; max-width: 500px; width: inherit;"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
keyDownCtrlOrAlt,
|
||||
keyDownCtrlOrMeta,
|
||||
@ -33,7 +34,20 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -46,7 +60,14 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">congratsc</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">congratsc</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 9,
|
||||
@ -60,7 +81,21 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true"> c</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true">c</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -74,7 +109,28 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true"> </span><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -106,7 +162,14 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">congratscongrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">congratscongrats</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -119,7 +182,28 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true"> </span><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -135,7 +219,21 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true">[Team]!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true">[Team]!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -160,7 +258,20 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -177,7 +288,26 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true"> Bob!</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Bob!
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -201,7 +331,20 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">congrats</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Bob!</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">congrats</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Bob!
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -215,12 +358,51 @@ test.describe('Keywords', () => {
|
||||
if (browserName === 'firefox' && !isCollab) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span style="cursor: default;" class="keyword" data-lexical-text="true">congrats</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true"> Bob!</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
style="cursor: default;"
|
||||
class="keyword"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Bob!
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true"> </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Bob!</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Bob!
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
await assertSelection(page, {
|
||||
@ -246,7 +428,19 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 9,
|
||||
@ -263,7 +457,26 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -276,7 +489,27 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -289,7 +522,26 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -306,7 +558,32 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">!</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
!
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -319,7 +596,26 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -336,7 +632,20 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone</strong><span data-lexical-text="true">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span data-lexical-text="true">congrats</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -349,7 +658,26 @@ test.describe('Keywords', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">Everyone </strong><span class="keyword" data-lexical-text="true" style="cursor: default;">congrats</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Everyone
|
||||
</strong>
|
||||
<span
|
||||
class="keyword"
|
||||
style="cursor: default;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
congrats
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 9,
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
click,
|
||||
focus,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
waitForSelector,
|
||||
@ -36,7 +37,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
// link
|
||||
@ -45,7 +53,20 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -67,7 +88,7 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://facebook.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a></p',
|
||||
html`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://facebook.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a></p`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -83,7 +104,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -102,7 +130,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
// link
|
||||
@ -111,7 +146,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -128,14 +170,34 @@ test.describe('Links', () => {
|
||||
await selectAll(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">An Awesome Website</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">An Awesome Website</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await waitForSelector(page, '.link');
|
||||
await click(page, '.link');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">An Awesome Website</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">An Awesome Website</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
@ -145,7 +207,22 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hey, check this out: </span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">An Awesome Website</span></a><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hey, check this out:</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">An Awesome Website</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -158,7 +235,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await moveLeft(page, 5);
|
||||
@ -170,7 +254,21 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">world</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
if (browserName === 'webkit') {
|
||||
await assertSelection(page, {
|
||||
@ -197,7 +295,21 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="https://facebook.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">world</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a
|
||||
href="https://facebook.com"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
@ -222,7 +334,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -242,7 +361,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await selectCharacters(page, 'left', 5);
|
||||
@ -253,7 +379,21 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">world</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
@ -281,7 +421,21 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><a href="https://facebook.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">world</span></a></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<a
|
||||
href="https://facebook.com"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">world</span>
|
||||
</a>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
@ -306,7 +460,14 @@ test.describe('Links', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
clearEditor,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
waitForSelector,
|
||||
@ -63,7 +64,9 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await toggleBulletList(page);
|
||||
@ -77,7 +80,9 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
test(`Can create a list and indent/outdent it`, async ({page}) => {
|
||||
@ -254,7 +259,9 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br/></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.type('Hello');
|
||||
@ -270,7 +277,14 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
@ -284,7 +298,38 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">from</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">the</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">other</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">side</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">from</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">the</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">other</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">side</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await selectAll(page);
|
||||
@ -300,7 +345,38 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">from</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">the</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">other</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">side</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">from</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">the</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">other</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">side</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
// works for an indented list
|
||||
@ -318,7 +394,38 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">from</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">the</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">other</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">side</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">from</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">the</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">other</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">side</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -329,14 +436,23 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br/></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.type('One two three');
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">One two three</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">One two three</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await moveLeft(page, 6);
|
||||
@ -348,7 +464,22 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">One </span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">two</span></a><span data-lexical-text="true"> three</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">One</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">two</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">three</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
// move to end of paragraph to close the floating link bar
|
||||
@ -365,7 +496,22 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">One </span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">two</span></a><span data-lexical-text="true"> three</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">One</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">two</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">three</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -376,7 +522,9 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br/></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.type('Hello');
|
||||
@ -413,7 +561,40 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">from</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">the</span></p><p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">other</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">side</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">from</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">the</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">other</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">side</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await toggleBulletList(page);
|
||||
@ -695,7 +876,44 @@ test.describe('Nested List', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></p><ul class="PlaygroundEditorTheme__ul"><li class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr" value="1"><span data-lexical-text="true">from</span></li></ul><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">the</span></p><ul class="PlaygroundEditorTheme__ul"><li class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr" value="1"><span data-lexical-text="true">other</span></li></ul><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">side</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</p>
|
||||
<ul class="PlaygroundEditorTheme__ul">
|
||||
<li
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
value="1"
|
||||
>
|
||||
<span data-lexical-text="true">from</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">the</span>
|
||||
</p>
|
||||
<ul class="PlaygroundEditorTheme__ul">
|
||||
<li
|
||||
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
value="1"
|
||||
>
|
||||
<span data-lexical-text="true">other</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">side</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await selectAll(page);
|
||||
@ -771,8 +989,11 @@ test.describe('Nested List', () => {
|
||||
const forwardHTML =
|
||||
'<ol start="321" class="PlaygroundEditorTheme__ol1"><li value="321" class="PlaygroundEditorTheme__listItem"><br></li></ol>';
|
||||
|
||||
const undoHTML =
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">321. </span></p>';
|
||||
const undoHTML = html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true">321.</span>
|
||||
</p>
|
||||
`;
|
||||
|
||||
await assertHTML(page, forwardHTML);
|
||||
if (isCollab) {
|
||||
|
||||
@ -80,7 +80,8 @@ test.describe('Markdown', () => {
|
||||
isBlockTest: true,
|
||||
markdownText: '> ',
|
||||
|
||||
undoHTML: '<p><span data-lexical-text="true">></span></p>', // Block quote.
|
||||
undoHTML:
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true">></span></p>', // Block quote.
|
||||
},
|
||||
{
|
||||
expectation:
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
IS_WINDOWS,
|
||||
repeat,
|
||||
@ -37,13 +38,30 @@ test.describe('Mentions', () => {
|
||||
await waitForSelector(page, '#mentions-typeahead ul li');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Luke</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Luke</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -94,13 +112,30 @@ test.describe('Mentions', () => {
|
||||
await waitForSelector(page, '#mentions-typeahead ul li');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Luke</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Luke</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -122,7 +157,17 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -134,7 +179,9 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -159,13 +206,30 @@ test.describe('Mentions', () => {
|
||||
await waitForSelector(page, '#mentions-typeahead ul li');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Luke</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Luke</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -179,7 +243,17 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -191,7 +265,9 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -208,7 +284,14 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc def</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">abc def</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -222,13 +305,35 @@ test.describe('Mentions', () => {
|
||||
await waitForSelector(page, '#mentions-typeahead ul li');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc Luke def</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">abc Luke def</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> def</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">abc</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true">def</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -240,7 +345,22 @@ test.describe('Mentions', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke</span><span data-lexical-text="true"> def</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">abc</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke
|
||||
</span>
|
||||
<span data-lexical-text="true">def</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
@ -297,7 +417,41 @@ test.describe('Mentions', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -320,12 +474,72 @@ test.describe('Mentions', () => {
|
||||
if (IS_WINDOWS && browserName === 'chromium') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Skywalker </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Skywalker</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true"> Skywalker </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Skywalker</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
await assertSelection(page, {
|
||||
@ -339,12 +553,65 @@ test.describe('Mentions', () => {
|
||||
if (IS_WINDOWS && browserName === 'chromium') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
await assertSelection(page, {
|
||||
@ -358,12 +625,56 @@ test.describe('Mentions', () => {
|
||||
if (IS_WINDOWS && browserName === 'chromium') {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Skywalker </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Skywalker</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true"> Skywalker </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> </span><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Skywalker</span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
await assertSelection(page, {
|
||||
@ -381,7 +692,9 @@ test.describe('Mentions', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -412,7 +725,21 @@ test.describe('Mentions', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span><span data-lexical-text="true"> foo bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
<span data-lexical-text="true">foo bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 8,
|
||||
@ -449,7 +776,14 @@ test.describe('Mentions', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true"> bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertSelection,
|
||||
evaluate,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
} from '../utils/index.mjs';
|
||||
@ -18,7 +19,26 @@ import {
|
||||
async function validateContent(page) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#world</span><span data-lexical-text="true">. This content </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#should</span><span data-lexical-text="true"> remain </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#intact</span><span data-lexical-text="true">.</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#world
|
||||
</span>
|
||||
<span data-lexical-text="true">. This content</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#should
|
||||
</span>
|
||||
<span data-lexical-text="true">remain</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#intact
|
||||
</span>
|
||||
<span data-lexical-text="true">.</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -198,7 +218,26 @@ test.describe('Mutations', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Bonjour </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#world</span><span data-lexical-text="true">. This content </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#should</span><span data-lexical-text="true"> remain </span><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#intact</span><span data-lexical-text="true">.</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Bonjour</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#world
|
||||
</span>
|
||||
<span data-lexical-text="true">. This content</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#should
|
||||
</span>
|
||||
<span data-lexical-text="true">remain</span>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#intact
|
||||
</span>
|
||||
<span data-lexical-text="true">.</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertSelection,
|
||||
expect,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
textContent,
|
||||
@ -35,7 +36,9 @@ test.describe('Placeholder', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
clickSelectors,
|
||||
dragMouse,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
IS_COLLAB,
|
||||
test,
|
||||
@ -96,14 +97,108 @@ test.describe('Tables', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
|
||||
html`
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
|
||||
await insertTable(page);
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br/></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br/></p>`,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -117,7 +212,100 @@ test.describe('Tables', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">abc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -131,7 +319,110 @@ test.describe('Tables', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">bb</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">d</span>
|
||||
</p>
|
||||
</th>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">e</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -149,14 +440,235 @@ test.describe('Tables', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
true,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
</th>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">bb</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">d</span>
|
||||
</p>
|
||||
</th>
|
||||
<td
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">e</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true, ignoreSecondFrame: true},
|
||||
);
|
||||
|
||||
// Check that the highlight styles are applied.
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
</th>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">bb</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">d</span>
|
||||
</p>
|
||||
</th>
|
||||
<td
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">e</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true, ignoreSecondFrame: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -192,8 +704,118 @@ test.describe('Tables', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
true,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">a</span>
|
||||
</p>
|
||||
</th>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">bb</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">d</span>
|
||||
</p>
|
||||
</th>
|
||||
<td
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">e</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true, ignoreSecondFrame: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -216,8 +838,118 @@ test.describe('Tables', () => {
|
||||
// Check that the character styles are applied.
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">a</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">bb</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">d</strong></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">e</strong></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
true,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<strong data-lexical-text="true">a</strong>
|
||||
</p>
|
||||
</th>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<strong data-lexical-text="true">bb</strong>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<strong data-lexical-text="true">d</strong>
|
||||
</p>
|
||||
</th>
|
||||
<td
|
||||
style="background-color: rgb(163, 187, 255); caret-color: transparent;"
|
||||
>
|
||||
<p dir="ltr">
|
||||
<strong data-lexical-text="true">e</strong>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true, ignoreSecondFrame: true},
|
||||
);
|
||||
});
|
||||
|
||||
@ -235,8 +967,102 @@ test.describe('Tables', () => {
|
||||
// Check that the text was cleared.
|
||||
await assertHTML(
|
||||
page,
|
||||
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
|
||||
true,
|
||||
html`
|
||||
<p><br /></p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">cc</span>
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p dir="ltr">
|
||||
<span data-lexical-text="true">f</span>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<p><br /></p>
|
||||
</th>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><br /></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><br /></p>
|
||||
`,
|
||||
{ignoreClasses: true},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
keyDownCtrlOrAlt,
|
||||
keyUpCtrlOrAlt,
|
||||
@ -26,7 +27,14 @@ test.describe('TextEntry', () => {
|
||||
await page.keyboard.type(targetText);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello Lexical</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello Lexical</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: targetText.length,
|
||||
@ -50,7 +58,14 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Foo</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -74,7 +89,11 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -114,7 +133,23 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello World.</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">This is another paragraph. </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello World.</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">This is another paragraph.</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -125,7 +160,19 @@ test.describe('TextEntry', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello World.</span><br><span data-lexical-text="true">This is another paragraph. </span><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello World.</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">This is another paragraph.</span>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -150,7 +197,14 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Delete some of these characte</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Delete some of these characte</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: backspacedText.length,
|
||||
@ -175,7 +229,14 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello lolbar.</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello lolbar.</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 9,
|
||||
@ -216,7 +277,14 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Delete some of these </span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Delete some of these</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: backspacedText.length,
|
||||
@ -238,7 +306,12 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span></p><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -249,7 +322,13 @@ test.describe('TextEntry', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -266,7 +345,9 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -277,7 +358,13 @@ test.describe('TextEntry', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span data-lexical-text="true"> </span><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span data-lexical-text="true"></span>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -300,7 +387,14 @@ test.describe('TextEntry', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br><br><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -326,7 +420,15 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph"><br><br><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -337,7 +439,15 @@ test.describe('TextEntry', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br><br><br><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -353,12 +463,37 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">هَ</span></p><p class="PlaygroundEditorTheme__paragraph"><br><br><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">هَ</span>
|
||||
</p>
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl" dir="rtl"><span data-lexical-text="true">هَ</span><br><br><br><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__rtl"
|
||||
dir="rtl"
|
||||
>
|
||||
<span data-lexical-text="true">هَ</span>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
||||
@ -381,7 +516,10 @@ test.describe('TextEntry', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await page.pause();
|
||||
await assertSelection(page, {
|
||||
@ -393,7 +531,12 @@ test.describe('TextEntry', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -440,7 +583,9 @@ test.describe('TextEntry', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -455,7 +600,12 @@ test.describe('TextEntry', () => {
|
||||
await page.keyboard.up('Shift');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -467,7 +617,12 @@ test.describe('TextEntry', () => {
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -480,7 +635,9 @@ test.describe('TextEntry', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
assertSelection,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
keyDownCtrlOrMeta,
|
||||
keyUpCtrlOrMeta,
|
||||
@ -37,7 +38,20 @@ test.describe('TextFormatting', () => {
|
||||
await page.keyboard.type(' World');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true"> World</strong></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</strong>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -52,7 +66,21 @@ test.describe('TextFormatting', () => {
|
||||
await page.keyboard.type('!');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true"> World</strong><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</strong>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -76,7 +104,20 @@ test.describe('TextFormatting', () => {
|
||||
await page.keyboard.type(' World');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true"> World</em></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</em>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -91,7 +132,21 @@ test.describe('TextFormatting', () => {
|
||||
await page.keyboard.type('!');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true"> World</em><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
World
|
||||
</em>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -127,7 +182,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">world</strong><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</strong>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -141,7 +210,14 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -180,7 +256,25 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">hello world</strong></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
hello world
|
||||
</strong>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -210,7 +304,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true">world</em><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</em>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -224,7 +332,14 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -260,7 +375,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span class="PlaygroundEditorTheme__textUnderline" data-lexical-text="true">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__textUnderline"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -274,7 +403,14 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -292,7 +428,21 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span class="PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__textUnderlineStrikethrough"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -306,7 +456,21 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span class="PlaygroundEditorTheme__textUnderline" data-lexical-text="true">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span
|
||||
class="PlaygroundEditorTheme__textUnderline"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -343,7 +507,16 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span data-lexical-text="true" style="font-size: 10px;">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span style="font-size: 10px;" data-lexical-text="true">world</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -381,7 +554,16 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span data-lexical-text="true" style="font-size: 10px;">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span style="font-size: 10px;" data-lexical-text="true">world</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -396,7 +578,21 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span data-lexical-text="true" style="font-size: 10px; font-family: Georgia;">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span
|
||||
style="font-size: 10px; font-family: Georgia;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -411,7 +607,21 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><span data-lexical-text="true" style="font-size: 20px; font-family: Georgia;">world</span><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<span
|
||||
style="font-size: 20px; font-family: Georgia;"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</span>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -449,7 +659,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">world</strong><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</strong>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -476,7 +700,33 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">w</strong><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic" data-lexical-text="true">or</strong><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">ld</strong><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
w
|
||||
</strong>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
or
|
||||
</strong>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
ld
|
||||
</strong>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -490,7 +740,33 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">w</strong><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true">or</em><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">ld</strong><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
w
|
||||
</strong>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
or
|
||||
</em>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
ld
|
||||
</strong>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -518,7 +794,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello w</span><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true">or</em><span data-lexical-text="true">ld!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello w</span>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
or
|
||||
</em>
|
||||
<span data-lexical-text="true">ld!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -532,7 +822,21 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello </span><em class="PlaygroundEditorTheme__textItalic" data-lexical-text="true">world</em><span data-lexical-text="true">!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
<em
|
||||
class="PlaygroundEditorTheme__textItalic"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
world
|
||||
</em>
|
||||
<span data-lexical-text="true">!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
@ -556,7 +860,14 @@ test.describe('TextFormatting', () => {
|
||||
await keyUpCtrlOrMeta(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello world!</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello world!</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 6,
|
||||
@ -607,7 +918,30 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">123</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">456</strong><span data-lexical-text="true">789</span><br><span data-lexical-text="true">abc</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">def</strong><span data-lexical-text="true">ghi</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">123</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
456
|
||||
</strong>
|
||||
<span data-lexical-text="true">789</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">abc</span>
|
||||
<strong
|
||||
class="PlaygroundEditorTheme__textBold"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
def
|
||||
</strong>
|
||||
<span data-lexical-text="true">ghi</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
@ -634,7 +968,14 @@ test.describe('TextFormatting', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">12c</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">12c</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await assertSelection(page, {
|
||||
|
||||
@ -7,7 +7,13 @@
|
||||
*/
|
||||
|
||||
import {undo} from '../keyboardShortcuts/index.mjs';
|
||||
import {assertHTML, focusEditor, initialize, test} from '../utils/index.mjs';
|
||||
import {
|
||||
assertHTML,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
} from '../utils/index.mjs';
|
||||
|
||||
test.describe('Regression test #1055', () => {
|
||||
test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
|
||||
@ -21,17 +27,28 @@ test.describe('Regression test #1055', () => {
|
||||
await undo(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br /></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await page.keyboard.type('hello');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await undo(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br /></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
click,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -36,7 +37,21 @@ test.describe('Regression test #1083', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a><span data-lexical-text="true">World</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">World</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await selectAll(page);
|
||||
@ -44,7 +59,9 @@ test.describe('Regression test #1083', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -71,7 +88,22 @@ test.describe('Regression test #1083', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Say</span><a href="https://" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Hello</span></a><span data-lexical-text="true">World</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Say</span>
|
||||
<a
|
||||
href="https://"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Hello</span>
|
||||
</a>
|
||||
<span data-lexical-text="true">World</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await page.keyboard.down('Shift');
|
||||
@ -83,7 +115,14 @@ test.describe('Regression test #1083', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Say</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">Say</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
} from '../utils/index.mjs';
|
||||
@ -28,7 +29,22 @@ test.describe('Regression test #1113', () => {
|
||||
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><a href="https://www.example.com" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">https://www.example.com</span></a><br><br></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<a
|
||||
href="https://www.example.com"
|
||||
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">https://www.example.com</span>
|
||||
</a>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
import {
|
||||
assertHTML,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
IS_MAC,
|
||||
test,
|
||||
@ -30,14 +31,28 @@ test.describe('Regression test #1258', () => {
|
||||
await page.keyboard.type('hello world');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">hello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
|
||||
await moveToLineBeginning(page);
|
||||
await deleteForward(page);
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">ello world</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">ello world</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
waitForSelector,
|
||||
@ -23,7 +24,16 @@ test.describe('Regression test #221', () => {
|
||||
await waitForSelector(page, '.PlaygroundEditorTheme__hashtag');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -37,7 +47,17 @@ test.describe('Regression test #221', () => {
|
||||
await page.keyboard.press('Space');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yo</span><span data-lexical-text="true"> lo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yo
|
||||
</span>
|
||||
<span data-lexical-text="true">lo</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -53,7 +73,17 @@ test.describe('Regression test #221', () => {
|
||||
await waitForSelector(page, '.PlaygroundEditorTheme__hashtag');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolo</span><span data-lexical-text="true"> </span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolo
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -66,7 +96,16 @@ test.describe('Regression test #221', () => {
|
||||
await page.keyboard.press('Delete');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 5,
|
||||
@ -82,7 +121,17 @@ test.describe('Regression test #221', () => {
|
||||
await waitForSelector(page, '.PlaygroundEditorTheme__hashtag');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yolo</span><span data-lexical-text="true"> </span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yolo
|
||||
</span>
|
||||
<span data-lexical-text="true"></span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
@ -95,7 +144,16 @@ test.describe('Regression test #221', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#yol</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#yol
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 4,
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -32,7 +33,16 @@ test.describe('Regression test #230', () => {
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">#foo</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="PlaygroundEditorTheme__hashtag" data-lexical-text="true">
|
||||
#foo
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 1,
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -37,7 +38,9 @@ test.describe('Regression test #231', () => {
|
||||
});
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
test,
|
||||
waitForSelector,
|
||||
@ -27,7 +28,17 @@ test.describe('Regression test #379', () => {
|
||||
await page.keyboard.press('Enter');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 14,
|
||||
@ -40,7 +51,17 @@ test.describe('Regression test #379', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><span class="mention" data-lexical-text="true" style="background-color: rgba(24, 119, 232, 0.2);">Luke Skywalker</span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph">
|
||||
<span
|
||||
class="mention"
|
||||
style="background-color: rgba(24, 119, 232, 0.2);"
|
||||
data-lexical-text="true"
|
||||
>
|
||||
Luke Skywalker
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
IS_MAC,
|
||||
repeat,
|
||||
@ -34,7 +35,20 @@ test.describe('Regression test #399', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -45,7 +59,16 @@ test.describe('Regression test #399', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span><br><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
<br />
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 3,
|
||||
@ -62,7 +85,21 @@ test.describe('Regression test #399', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
</p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<br />
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -73,7 +110,17 @@ test.describe('Regression test #399', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">foo</span><br><br><span data-lexical-text="true">bar</span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span data-lexical-text="true">foo</span>
|
||||
<br />
|
||||
<br />
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
assertHTML,
|
||||
assertSelection,
|
||||
focusEditor,
|
||||
html,
|
||||
initialize,
|
||||
repeat,
|
||||
test,
|
||||
@ -25,7 +26,20 @@ test.describe('Regression test #429', () => {
|
||||
await page.keyboard.type(':) or :(');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> or </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">or</span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 2,
|
||||
@ -41,7 +55,21 @@ test.describe('Regression test #429', () => {
|
||||
if (isRichText) {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph"><br></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> or </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">or</span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -52,7 +80,21 @@ test.describe('Regression test #429', () => {
|
||||
} else {
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> or </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<br />
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">or</span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
@ -65,7 +107,20 @@ test.describe('Regression test #429', () => {
|
||||
await page.keyboard.press('Backspace');
|
||||
await assertHTML(
|
||||
page,
|
||||
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span class="emoji happysmile" data-lexical-text="true"><span class="emoji-inner">🙂</span></span><span data-lexical-text="true"> or </span><span class="emoji unhappysmile" data-lexical-text="true"><span class="emoji-inner">🙁</span></span></p>',
|
||||
html`
|
||||
<p
|
||||
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
|
||||
dir="ltr"
|
||||
>
|
||||
<span class="emoji happysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙂</span>
|
||||
</span>
|
||||
<span data-lexical-text="true">or</span>
|
||||
<span class="emoji unhappysmile" data-lexical-text="true">
|
||||
<span class="emoji-inner">🙁</span>
|
||||
</span>
|
||||
</p>
|
||||
`,
|
||||
);
|
||||
await assertSelection(page, {
|
||||
anchorOffset: 0,
|
||||
|
||||
@ -82,30 +82,56 @@ export async function clickSelectors(page, selectors) {
|
||||
}
|
||||
}
|
||||
|
||||
async function assertHTMLOnPageOrFrame(page, pageOrFrame, expectedHtml) {
|
||||
async function assertHTMLOnPageOrFrame(
|
||||
page,
|
||||
pageOrFrame,
|
||||
expectedHtml,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
) {
|
||||
const actualHtml = await pageOrFrame.innerHTML('div[contenteditable="true"]');
|
||||
const actual = prettifyHTML(actualHtml, {
|
||||
ignoreClasses: true,
|
||||
ignoreInlineStyles: true,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
});
|
||||
const expected = prettifyHTML(expectedHtml.replace(/\n/gm, ''), {
|
||||
ignoreClasses: true,
|
||||
ignoreInlineStyles: true,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
});
|
||||
expect(actual).toEqual(expected);
|
||||
}
|
||||
|
||||
export async function assertHTML(page, expectedHtml, ignoreSecondFrame) {
|
||||
export async function assertHTML(
|
||||
page,
|
||||
expectedHtml,
|
||||
{
|
||||
ignoreSecondFrame = false,
|
||||
ignoreClasses = false,
|
||||
ignoreInlineStyles = false,
|
||||
} = {},
|
||||
) {
|
||||
if (IS_COLLAB) {
|
||||
const leftFrame = await page.frame('left');
|
||||
await assertHTMLOnPageOrFrame(page, leftFrame, expectedHtml);
|
||||
await assertHTMLOnPageOrFrame(
|
||||
page,
|
||||
leftFrame,
|
||||
expectedHtml,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
);
|
||||
if (!ignoreSecondFrame) {
|
||||
let attempts = 0;
|
||||
while (attempts < 4) {
|
||||
const rightFrame = await page.frame('right');
|
||||
let failed = false;
|
||||
try {
|
||||
await assertHTMLOnPageOrFrame(page, rightFrame, expectedHtml);
|
||||
await assertHTMLOnPageOrFrame(
|
||||
page,
|
||||
rightFrame,
|
||||
expectedHtml,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
);
|
||||
} catch (e) {
|
||||
if (attempts === 5) {
|
||||
throw e;
|
||||
@ -120,7 +146,13 @@ export async function assertHTML(page, expectedHtml, ignoreSecondFrame) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await assertHTMLOnPageOrFrame(page, page, expectedHtml);
|
||||
await assertHTMLOnPageOrFrame(
|
||||
page,
|
||||
page,
|
||||
expectedHtml,
|
||||
ignoreClasses,
|
||||
ignoreInlineStyles,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -433,21 +465,19 @@ export async function dragMouse(page, firstBoundingBox, secondBoundingBox) {
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
// Wrapper around HTML string that is used as indicator for snapshot serializer
|
||||
// that it should use own formatter (below)
|
||||
export function prettifyHTML(string, {ignoreClasses, ignoreInlineStyles} = {}) {
|
||||
let html = string;
|
||||
let output = string;
|
||||
|
||||
if (ignoreClasses) {
|
||||
html = html.replace(/\sclass="([^"]*)"/g, '');
|
||||
output = output.replace(/\sclass="([^"]*)"/g, '');
|
||||
}
|
||||
|
||||
if (ignoreInlineStyles) {
|
||||
html = html.replace(/\sstyle="([^"]*)"/g, '');
|
||||
output = output.replace(/\sstyle="([^"]*)"/g, '');
|
||||
}
|
||||
|
||||
return prettier
|
||||
.format(html, {
|
||||
.format(output, {
|
||||
attributeGroups: ['$DEFAULT', '^data-'],
|
||||
attributeSort: 'ASC',
|
||||
htmlWhitespaceSensitivity: 'ignore',
|
||||
@ -455,3 +485,16 @@ export function prettifyHTML(string, {ignoreClasses, ignoreInlineStyles} = {}) {
|
||||
})
|
||||
.trim();
|
||||
}
|
||||
|
||||
// This function does not suppose to do anything, it's only used as a trigger
|
||||
// for prettier auto-formatting (https://prettier.io/blog/2020/08/24/2.1.0.html#api)
|
||||
export function html(partials, ...params) {
|
||||
let output = '';
|
||||
for (let i = 0; i < partials.length; i++) {
|
||||
output += partials[i];
|
||||
if (i < partials.length - 1) {
|
||||
output += params[i];
|
||||
}
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user