opensource/lexical
1
0
Fork 0
mirror of https://github.com/facebook/lexical.git synced 2025-07-03 06:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Prettier sort test attributes (#6384)

Browse Source
This commit is contained in:
Gerard Rovira
2024-07-10 14:15:31 +01:00
committed by GitHub
parent fdb33d037d
commit c032cf2b7c
39 changed files with 517 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierrc.js
View File

@ -7,6 +7,10 @@ module.exports = {
printWidth: 80, printWidth: 80,
trailingComma: 'all', trailingComma: 'all',
htmlWhitespaceSensitivity: 'ignore', htmlWhitespaceSensitivity: 'ignore',
attributeGroups: ['$DEFAULT', '^data-'], attributeGroups: ['^class$', '^(id|name)$', '$DEFAULT', '^aria-', '^data-'],
plugins: ['prettier-plugin-tailwindcss'], attributeSort: 'ASC',
plugins: [
'prettier-plugin-tailwindcss',
'prettier-plugin-organize-attributes',
],
}; };

2
examples/react-plain-text/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script src="/src/main.tsx" type="module"></script>
</body> </body>
</html> </html>

2
examples/react-rich-collab/app.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script src="/src/main.tsx" type="module"></script>
</body> </body>
</html> </html>

8
examples/react-rich-collab/index.html
View File

@ -10,7 +10,6 @@
React.js Collaborative Lexical Example (see iframes below) React.js Collaborative Lexical Example (see iframes below)
</h1> </h1>
<iframe <iframe
width="50%"
name="left" name="left"
src="/app" src="/app"
style=" style="
@ -20,9 +19,9 @@
top: 40px; top: 40px;
left: 0; left: 0;
height: calc(100% - 44px); height: calc(100% - 44px);
"></iframe> "
width="50%"></iframe>
<iframe <iframe
width="50%"
name="right" name="right"
src="/app" src="/app"
style=" style="
@ -32,6 +31,7 @@
top: 40px; top: 40px;
left: calc(50% + 1px); left: calc(50% + 1px);
height: calc(100% - 44px); height: calc(100% - 44px);
"></iframe> "
width="50%"></iframe>
</body> </body>
</html> </html>

2
examples/react-rich/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script src="/src/main.tsx" type="module"></script>
</body> </body>
</html> </html>

2
examples/vanilla-js-plugin/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script src="/src/main.ts" type="module"></script>
</body> </body>
</html> </html>

2
examples/vanilla-js/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script src="/src/main.ts" type="module"></script>
</body> </body>
</html> </html>

14
packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools/Base.lproj/Main.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" /> <meta content="default-src 'self'" http-equiv="Content-Security-Policy" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" /> content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../Style.css" /> <link href="../Style.css" rel="stylesheet" />
<script src="../Script.js" defer></script> <script defer src="../Script.js"></script>
</head> </head>
<body> <body>
<img <img
src="../Icon.png" alt="Lexical Developer Tools Icon"
width="128"
height="128" height="128"
alt="Lexical Developer Tools Icon" /> src="../Icon.png"
width="128" />
<p class="state-unknown"> <p class="state-unknown">
You can turn on Lexical Developer Tools’s extension in Safari Extensions You can turn on Lexical Developer Tools’s extension in Safari Extensions
preferences. preferences.

2
packages/lexical-devtools/src/entrypoints/devtools-panel/index.html
View File

@ -6,6 +6,6 @@
</head> </head>
<body> <body>
<div id="root">Loading Lexical DevTools UI...</div> <div id="root">Loading Lexical DevTools UI...</div>
<script type="module" src="./main.tsx"></script> <script src="./main.tsx" type="module"></script>
</body> </body>
</html> </html>

2
packages/lexical-devtools/src/entrypoints/devtools/index.html
View File

@ -3,6 +3,6 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./main.ts"></script> <script src="./main.ts" type="module"></script>
</head> </head>
</html> </html>

2
packages/lexical-devtools/src/entrypoints/popup/index.html
View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="./main.tsx"></script> <script src="./main.tsx" type="module"></script>
</body> </body>
</html> </html>

166
packages/lexical-list/src/__tests__/unit/LexicalListItemNode.test.ts
View File

@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual( expectHtmlToBeEqual(
listItemNode.createDOM(editorConfig).outerHTML, listItemNode.createDOM(editorConfig).outerHTML,
html` html`
<li value="1" class="my-listItem-item-class"></li> <li class="my-listItem-item-class" value="1"></li>
`, `,
); );
@ -90,7 +90,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual( expectHtmlToBeEqual(
domElement.outerHTML, domElement.outerHTML,
html` html`
<li value="1" class="my-listItem-item-class"></li> <li class="my-listItem-item-class" value="1"></li>
`, `,
); );
const newListItemNode = new ListItemNode(); const newListItemNode = new ListItemNode();
@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual( expectHtmlToBeEqual(
domElement.outerHTML, domElement.outerHTML,
html` html`
<li value="1" class="my-listItem-item-class"></li> <li class="my-listItem-item-class" value="1"></li>
`, `,
); );
}); });
@ -125,7 +125,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual( expectHtmlToBeEqual(
domElement.outerHTML, domElement.outerHTML,
html` html`
<li value="1" class="my-listItem-item-class"></li> <li class="my-listItem-item-class" value="1"></li>
`, `,
); );
const nestedListNode = new ListNode('bullet', 1); const nestedListNode = new ListNode('bullet', 1);
@ -143,8 +143,8 @@ describe('LexicalListItemNode tests', () => {
domElement.outerHTML, domElement.outerHTML,
html` html`
<li <li
value="1" class="my-listItem-item-class my-nested-list-listItem-class"
class="my-listItem-item-class my-nested-list-listItem-class"></li> value="1"></li>
`, `,
); );
}); });
@ -184,13 +184,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -217,13 +217,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">bar</span> <span data-lexical-text="true">bar</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -247,13 +247,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -275,10 +275,10 @@ describe('LexicalListItemNode tests', () => {
data-lexical-editor="true"> data-lexical-editor="true">
<p><br /></p> <p><br /></p>
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -303,10 +303,10 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
</ul> </ul>
@ -332,13 +332,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>
<p><br /></p> <p><br /></p>
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -363,7 +363,7 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>
@ -423,13 +423,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -447,10 +447,10 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -497,15 +497,15 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -525,12 +525,12 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -575,15 +575,15 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="3"> <li value="3">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -603,12 +603,12 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -661,17 +661,17 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -693,10 +693,10 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -757,24 +757,24 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A1</span> <span data-lexical-text="true">A1</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A2</span> <span data-lexical-text="true">A2</span>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -796,17 +796,17 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A1</span> <span data-lexical-text="true">A1</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A2</span> <span data-lexical-text="true">A2</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>
</li> </li>
</ul> </ul>
@ -867,24 +867,24 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B1</span> <span data-lexical-text="true">B1</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B2</span> <span data-lexical-text="true">B2</span>
</li> </li>
</ul> </ul>
@ -906,17 +906,17 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B1</span> <span data-lexical-text="true">B1</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B2</span> <span data-lexical-text="true">B2</span>
</li> </li>
</ul> </ul>
@ -985,31 +985,31 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A1</span> <span data-lexical-text="true">A1</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A2</span> <span data-lexical-text="true">A2</span>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">x</span> <span data-lexical-text="true">x</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B1</span> <span data-lexical-text="true">B1</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">B2</span> <span data-lexical-text="true">B2</span>
</li> </li>
</ul> </ul>
@ -1031,20 +1031,20 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A1</span> <span data-lexical-text="true">A1</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">A2</span> <span data-lexical-text="true">A2</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B1</span> <span data-lexical-text="true">B1</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">B2</span> <span data-lexical-text="true">B2</span>
</li> </li>
</ul> </ul>
@ -1089,13 +1089,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -1119,14 +1119,14 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2"><br /></li> <li value="2"><br /></li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="4" dir="ltr"> <li dir="ltr" value="4">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -1150,13 +1150,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li value="4"><br /></li> <li value="4"><br /></li>
@ -1181,13 +1181,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li value="4"><br /></li> <li value="4"><br /></li>
@ -1213,7 +1213,7 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>
@ -1233,7 +1233,7 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;" style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true"> data-lexical-editor="true">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2"><br /></li> <li value="2"><br /></li>
@ -1310,7 +1310,7 @@ describe('LexicalListItemNode tests', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>
@ -1319,7 +1319,7 @@ describe('LexicalListItemNode tests', () => {
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
</ul> </ul>
@ -1338,10 +1338,10 @@ describe('LexicalListItemNode tests', () => {
editor.getRootElement()!.innerHTML, editor.getRootElement()!.innerHTML,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
</ul> </ul>

42
packages/lexical-playground/__tests__/e2e/AutoLinks.spec.mjs
View File

@ -40,17 +40,17 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a href="http://example.com" dir="ltr"> <a dir="ltr" href="http://example.com">
<span data-lexical-text="true">http://example.com</span> <span data-lexical-text="true">http://example.com</span>
</a> </a>
<span data-lexical-text="true">and</span> <span data-lexical-text="true">and</span>
<a href="https://example.com/path?with=query#and-hash" dir="ltr"> <a dir="ltr" href="https://example.com/path?with=query#and-hash">
<span data-lexical-text="true"> <span data-lexical-text="true">
https://example.com/path?with=query#and-hash https://example.com/path?with=query#and-hash
</span> </span>
</a> </a>
<span data-lexical-text="true">and</span> <span data-lexical-text="true">and</span>
<a href="https://www.example.com" dir="ltr"> <a dir="ltr" href="https://www.example.com">
<span data-lexical-text="true">www.example.com</span> <span data-lexical-text="true">www.example.com</span>
</a> </a>
</p> </p>
@ -67,7 +67,7 @@ test.describe('Auto Links', () => {
test.skip(isPlainText); test.skip(isPlainText);
const htmlWithLink = html` const htmlWithLink = html`
<p dir="ltr"> <p dir="ltr">
<a href="http://example.com" dir="ltr"> <a dir="ltr" href="http://example.com">
<span data-lexical-text="true">http://example.com</span> <span data-lexical-text="true">http://example.com</span>
</a> </a>
</p> </p>
@ -139,17 +139,17 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a href="http://example.com" dir="ltr"> <a dir="ltr" href="http://example.com">
<span data-lexical-text="true">http://example.com</span> <span data-lexical-text="true">http://example.com</span>
</a> </a>
<span data-lexical-text="true">and</span> <span data-lexical-text="true">and</span>
<a href="https://example.com/path?with=query#and-hash" dir="ltr"> <a dir="ltr" href="https://example.com/path?with=query#and-hash">
<span data-lexical-text="true"> <span data-lexical-text="true">
https://example.com/path?with=query#and-hash https://example.com/path?with=query#and-hash
</span> </span>
</a> </a>
<span data-lexical-text="true">and</span> <span data-lexical-text="true">and</span>
<a href="https://www.example.com" dir="ltr"> <a dir="ltr" href="https://www.example.com">
<span data-lexical-text="true">www.example.com</span> <span data-lexical-text="true">www.example.com</span>
</a> </a>
</p> </p>
@ -172,7 +172,7 @@ test.describe('Auto Links', () => {
page, page,
html` html`
<p dir="ltr"> <p dir="ltr">
<a href="https://" dir="ltr" rel="noreferrer"> <a dir="ltr" href="https://" rel="noreferrer">
<span data-lexical-text="true">hm</span> <span data-lexical-text="true">hm</span>
</a> </a>
</p> </p>
@ -187,7 +187,7 @@ test.describe('Auto Links', () => {
page, page,
html` html`
<p dir="ltr"> <p dir="ltr">
<a href="https://" dir="ltr" rel="noreferrer"> <a dir="ltr" href="https://" rel="noreferrer">
<span data-lexical-text="true">https://facebook.com</span> <span data-lexical-text="true">https://facebook.com</span>
</a> </a>
</p> </p>
@ -210,15 +210,15 @@ test.describe('Auto Links', () => {
page, page,
html` html`
<p> <p>
<a href="https://1.com/" dir="ltr"> <a dir="ltr" href="https://1.com/">
<span data-lexical-text="true">https://1.com/</span> <span data-lexical-text="true">https://1.com/</span>
</a> </a>
<span data-lexical-text="true">,</span> <span data-lexical-text="true">,</span>
<a href="https://2.com/" dir="ltr"> <a dir="ltr" href="https://2.com/">
<span data-lexical-text="true">https://2.com/</span> <span data-lexical-text="true">https://2.com/</span>
</a> </a>
<span data-lexical-text="true">;;;</span> <span data-lexical-text="true">;;;</span>
<a href="https://3.com" dir="ltr"> <a dir="ltr" href="https://3.com">
<span data-lexical-text="true">https://3.com</span> <span data-lexical-text="true">https://3.com</span>
</a> </a>
</p> </p>
@ -239,19 +239,19 @@ test.describe('Auto Links', () => {
page, page,
html` html`
<p> <p>
<a href="https://1.com/" dir="ltr"> <a dir="ltr" href="https://1.com/">
<span data-lexical-text="true">https://1.com/</span> <span data-lexical-text="true">https://1.com/</span>
</a> </a>
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<a href="https://2.com/" dir="ltr"> <a dir="ltr" href="https://2.com/">
<span data-lexical-text="true">https://2.com/</span> <span data-lexical-text="true">https://2.com/</span>
</a> </a>
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<a href="https://3.com/" dir="ltr"> <a dir="ltr" href="https://3.com/">
<span data-lexical-text="true">https://3.com/</span> <span data-lexical-text="true">https://3.com/</span>
</a> </a>
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<a href="https://4.com/" dir="ltr"> <a dir="ltr" href="https://4.com/">
<span data-lexical-text="true">https://4.com/</span> <span data-lexical-text="true">https://4.com/</span>
</a> </a>
</p> </p>
@ -274,7 +274,7 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hellohttps://example.com</span> <span data-lexical-text="true">Hellohttps://example.com</span>
<a href="https://example.com" dir="ltr"> <a dir="ltr" href="https://example.com">
<span data-lexical-text="true">https://example.com</span> <span data-lexical-text="true">https://example.com</span>
</a> </a>
</p> </p>
@ -321,7 +321,7 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a href="http://example.com" dir="ltr"> <a dir="ltr" href="http://example.com">
<span data-lexical-text="true">http://example.</span> <span data-lexical-text="true">http://example.</span>
<strong data-lexical-text="true">com</strong> <strong data-lexical-text="true">com</strong>
</a> </a>
@ -369,7 +369,7 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span style="font-size: 19px;" data-lexical-text="true">Hello</span> <span style="font-size: 19px;" data-lexical-text="true">Hello</span>
<a href="http://example.com" dir="ltr"> <a dir="ltr" href="http://example.com">
<span style="font-size: 19px;" data-lexical-text="true"> <span style="font-size: 19px;" data-lexical-text="true">
http://example.com http://example.com
</span> </span>
@ -528,7 +528,7 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a href="http://www.example.com" dir="ltr"> <a dir="ltr" href="http://www.example.com">
<span data-lexical-text="true">http://www.example.com</span> <span data-lexical-text="true">http://www.example.com</span>
</a> </a>
<span data-lexical-text="true">test</span> <span data-lexical-text="true">test</span>
@ -566,7 +566,7 @@ test.describe('Auto Links', () => {
html` html`
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a href="http://www.example.com" dir="ltr"> <a dir="ltr" href="http://www.example.com">
<span data-lexical-text="true">http://www.example.com</span> <span data-lexical-text="true">http://www.example.com</span>
</a> </a>
<span data-lexical-text="true">test</span> <span data-lexical-text="true">test</span>

4
packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
View File

@ -75,9 +75,9 @@ test.describe('Clear All Formatting', () => {
html` html`
<p class="PlaygroundEditorTheme__paragraph"> <p class="PlaygroundEditorTheme__paragraph">
<a <a
href="https://facebook.com"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com">
<span data-lexical-text="true">Facebook!</span> <span data-lexical-text="true">Facebook!</span>
</a> </a>
</p> </p>

66
packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
View File

@ -45,11 +45,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenFunction" class="PlaygroundEditorTheme__tokenFunction"
data-lexical-text="true"> data-lexical-text="true">
@ -126,11 +126,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenFunction" class="PlaygroundEditorTheme__tokenFunction"
data-lexical-text="true"> data-lexical-text="true">
@ -227,8 +227,8 @@ test.describe('CodeBlock', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="12345" data-gutter="12345"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">foo</span> <span data-lexical-text="true">foo</span>
<br /> <br />
<span data-lexical-text="true">bar</span> <span data-lexical-text="true">bar</span>
@ -254,11 +254,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">select</span> <span data-lexical-text="true">select</span>
<span <span
class="PlaygroundEditorTheme__tokenOperator" class="PlaygroundEditorTheme__tokenOperator"
@ -276,11 +276,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="sql" data-highlight-language="sql"
data-highlight-language="sql"> data-language="sql">
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"
data-lexical-text="true"> data-lexical-text="true">
@ -335,11 +335,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenFunction" class="PlaygroundEditorTheme__tokenFunction"
data-lexical-text="true"> data-lexical-text="true">
@ -424,11 +424,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"
data-lexical-text="true"> data-lexical-text="true">
@ -499,8 +499,8 @@ test.describe('CodeBlock', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<span <span
@ -573,8 +573,8 @@ test.describe('CodeBlock', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"
@ -641,11 +641,11 @@ test.describe('CodeBlock', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"
data-lexical-text="true"> data-lexical-text="true">
@ -709,11 +709,11 @@ test.describe('CodeBlock', () => {
const abcHTML = html` const abcHTML = html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenFunction" class="PlaygroundEditorTheme__tokenFunction"
data-lexical-text="true"> data-lexical-text="true">
@ -781,11 +781,11 @@ test.describe('CodeBlock', () => {
const bcaHTML = html` const bcaHTML = html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenFunction" class="PlaygroundEditorTheme__tokenFunction"
data-lexical-text="true"> data-lexical-text="true">

20
packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs
View File

@ -119,29 +119,29 @@ test.describe('Collaboration', () => {
</p> </p>
<ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> <ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="false">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="2"> role="checkbox"
tabindex="-1"
value="2"
aria-checked="false">
<span data-lexical-text="true">b</span> <span data-lexical-text="true">b</span>
</li> </li>
<li <li
aria-checked="false"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked"
role="checkbox" role="checkbox"
tabindex="-1" tabindex="-1"
value="3"> value="3"
aria-checked="false">
<br /> <br />
</li> </li>
</ul> </ul>

4
packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
View File

@ -74,8 +74,8 @@ test.describe('HTML CopyAndPaste', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="123" data-gutter="123"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"
data-lexical-text="true"> data-lexical-text="true">

22
packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs
View File

@ -48,9 +48,9 @@ test.describe('HTML Links CopyAndPaste', () => {
html` html`
<p class="PlaygroundEditorTheme__paragraph"> <p class="PlaygroundEditorTheme__paragraph">
<a <a
href="https://facebook.com"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com">
<span data-lexical-text="true">Facebook!</span> <span data-lexical-text="true">Facebook!</span>
</a> </a>
</p> </p>
@ -88,10 +88,10 @@ test.describe('HTML Links CopyAndPaste', () => {
html` html`
<p class="PlaygroundEditorTheme__paragraph"> <p class="PlaygroundEditorTheme__paragraph">
<a <a
href="https://facebook.com"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com"
rel="noreferrer">
<span data-lexical-text="true">Facebook!</span> <span data-lexical-text="true">Facebook!</span>
</a> </a>
</p> </p>
@ -124,9 +124,9 @@ test.describe('HTML Links CopyAndPaste', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">beforetext</span> <span data-lexical-text="true">beforetext</span>
<a <a
href="https://test.com/1"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://test.com/1">
<span data-lexical-text="true">link</span> <span data-lexical-text="true">link</span>
</a> </a>
<span data-lexical-text="true">textafter</span> <span data-lexical-text="true">textafter</span>
@ -160,16 +160,16 @@ test.describe('HTML Links CopyAndPaste', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">text</span> <span data-lexical-text="true">text</span>
<a <a
href="https://test.com/"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://test.com/">
<span data-lexical-text="true">link</span> <span data-lexical-text="true">link</span>
</a> </a>
<span data-lexical-text="true">text</span> <span data-lexical-text="true">text</span>
<a <a
href="https://test.com/"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://test.com/">
<span data-lexical-text="true">in</span> <span data-lexical-text="true">in</span>
</a> </a>
</p> </p>

110
packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
View File

@ -94,21 +94,21 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="1">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
</ul> </ul>
</li> </li>
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -129,19 +129,19 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="1">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -159,19 +159,19 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -200,19 +200,19 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -235,15 +235,15 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -259,21 +259,21 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="1">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
</ul> </ul>
</li> </li>
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">world!</span> <span data-lexical-text="true">world!</span>
</li> </li>
</ul> </ul>
@ -297,21 +297,21 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> <ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr"
role="checkbox" role="checkbox"
tabindex="-1" tabindex="-1"
aria-checked="false"
value="1" value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" aria-checked="false">
dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr"
role="checkbox" role="checkbox"
tabindex="-1" tabindex="-1"
aria-checked="false"
value="2" value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" aria-checked="false">
dir="ltr">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</li> </li>
</ul> </ul>
@ -333,21 +333,21 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> <ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemChecked PlaygroundEditorTheme__ltr"
dir="ltr"
role="checkbox" role="checkbox"
tabindex="-1" tabindex="-1"
aria-checked="true"
value="1" value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemChecked PlaygroundEditorTheme__ltr" aria-checked="true">
dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</li> </li>
<li <li
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr"
role="checkbox" role="checkbox"
tabindex="-1" tabindex="-1"
aria-checked="false"
value="2" value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" aria-checked="false">
dir="ltr">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</li> </li>
</ul> </ul>
@ -385,9 +385,9 @@ test.describe('HTML Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>
@ -403,15 +403,15 @@ test.describe('HTML Lists CopyAndPaste', () => {
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">four</span> <span data-lexical-text="true">four</span>
</li> </li>
</ul> </ul>
@ -448,7 +448,7 @@ test.describe('HTML Lists CopyAndPaste', () => {
page, page,
html` html`
<ol class="PlaygroundEditorTheme__ol1"> <ol class="PlaygroundEditorTheme__ol1">
<li value="1" class="PlaygroundEditorTheme__listItem"> <li class="PlaygroundEditorTheme__listItem" value="1">
<span data-lexical-text="true">1</span> <span data-lexical-text="true">1</span>
<br /> <br />
<span data-lexical-text="true">2</span> <span data-lexical-text="true">2</span>
@ -456,9 +456,9 @@ test.describe('HTML Lists CopyAndPaste', () => {
<span data-lexical-text="true">3</span> <span data-lexical-text="true">3</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">A</span> <span data-lexical-text="true">A</span>
<br /> <br />
<span data-lexical-text="true">B</span> <span data-lexical-text="true">B</span>

12
packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs
View File

@ -816,18 +816,18 @@ test.describe('CopyAndPaste', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
<span data-lexical-text="true">World</span> <span data-lexical-text="true">World</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
<span data-lexical-text="true">World</span> <span data-lexical-text="true">World</span>

122
packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ListsCopyAndPaste.spec.mjs
View File

@ -136,21 +136,21 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -198,24 +198,24 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li value="2" class="PlaygroundEditorTheme__listItem"> <li class="PlaygroundEditorTheme__listItem" value="2">
<br /> <br />
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="4">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -240,15 +240,15 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">ee</span> <span data-lexical-text="true">ee</span>
</li> </li>
</ul> </ul>
@ -259,15 +259,15 @@ test.describe('Lists CopyAndPaste', () => {
</p> </p>
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
</ul> </ul>
@ -381,33 +381,33 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li <li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="4">
<span data-lexical-text="true">four</span> <span data-lexical-text="true">four</span>
</li> </li>
<li <li
value="5"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="5">
<span data-lexical-text="true">five</span> <span data-lexical-text="true">five</span>
</li> </li>
</ul> </ul>
@ -427,33 +427,33 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li <li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="4">
<span data-lexical-text="true">four</span> <span data-lexical-text="true">four</span>
</li> </li>
<li <li
value="5"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="5">
<span data-lexical-text="true">five</span> <span data-lexical-text="true">five</span>
</li> </li>
</ul> </ul>
@ -474,33 +474,33 @@ test.describe('Lists CopyAndPaste', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li <li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="4">
<span data-lexical-text="true">four</span> <span data-lexical-text="true">four</span>
</li> </li>
<li <li
value="5"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="5">
<span data-lexical-text="true">five</span> <span data-lexical-text="true">five</span>
</li> </li>
</ul> </ul>
@ -509,33 +509,33 @@ test.describe('Lists CopyAndPaste', () => {
</p> </p>
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="3"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="3">
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
</li> </li>
<li <li
value="4"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="4">
<span data-lexical-text="true">four</span> <span data-lexical-text="true">four</span>
</li> </li>
<li <li
value="5"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="5">
<span data-lexical-text="true">five</span> <span data-lexical-text="true">five</span>
</li> </li>
</ul> </ul>

8
packages/lexical-playground/__tests__/e2e/ElementFormat.spec.mjs
View File

@ -39,13 +39,13 @@ test.describe('Element format', () => {
html` html`
<p <p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr PlaygroundEditorTheme__indent"
style="padding-inline-start: calc(80px); text-align: center;" dir="ltr"
dir="ltr"> style="padding-inline-start: calc(80px); text-align: center;">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://lexical.io"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.io">
<span data-lexical-text="true">https://lexical.io</span> <span data-lexical-text="true">https://lexical.io</span>
</a> </a>
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>

12
packages/lexical-playground/__tests__/e2e/File.spec.mjs
View File

@ -55,27 +55,27 @@ test.describe('File', () => {
</p> </p>
<ol class="PlaygroundEditorTheme__ol1"> <ol class="PlaygroundEditorTheme__ol1">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li value="3" class="PlaygroundEditorTheme__listItem"> <li class="PlaygroundEditorTheme__listItem" value="3">
<span <span
class="editor-image" class="editor-image"
contenteditable="false" contenteditable="false"
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAAagAwAEAAAAAQAAAAcAAAAA/8IAEQgABwAGAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2wBDAQIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2gAMAwEAAhEDEQAAAfBeXfV/i9n/2gAIAQEAAQUCmlT7p//aAAgBAxEBPwGWbIKo/wBmP+0f/9oACAECEQE/AYYoHddn7pf7V//aAAgBAQAGPwKFaUpWtZJJVUl//8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hFyPFTveHPBl//9oADAMBAAIRAxEAABCL/8QAMxEBAQEAAwABAgUFAQEAAQEJAQARITEQQVFhIHHwkYGhsdHB4fEwQFBgcICQoLDA0OD/2gAIAQMRAT8QYOAdB9nP5t//2gAIAQIRAT8QEWh51X58fxf/2gAIAQEAAT8QJfU4BLBcKyeUzf/Z"
alt="" alt=""
draggable="false" draggable="false"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAAagAwAEAAAAAQAAAAcAAAAA/8IAEQgABwAGAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2wBDAQIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2gAMAwEAAhEDEQAAAfBeXfV/i9n/2gAIAQEAAQUCmlT7p//aAAgBAxEBPwGWbIKo/wBmP+0f/9oACAECEQE/AYYoHddn7pf7V//aAAgBAQAGPwKFaUpWtZJJVUl//8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hFyPFTveHPBl//9oADAMBAAIRAxEAABCL/8QAMxEBAQEAAwABAgUFAQEAAQEJAQARITEQQVFhIHHwkYGhsdHB4fEwQFBgcICQoLDA0OD/2gAIAQMRAT8QYOAdB9nP5t//2gAIAQIRAT8QEWh51X58fxf/2gAIAQEAAT8QJfU4BLBcKyeUzf/Z"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>

26
packages/lexical-playground/__tests__/e2e/Images.spec.mjs
View File

@ -55,9 +55,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -123,11 +123,11 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="true"> <div draggable="true">
<img <img
src="${SAMPLE_IMAGE_URL}" class="focused draggable"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
style="height: inherit; max-width: 500px; width: inherit;" src="${SAMPLE_IMAGE_URL}"
class="focused draggable" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
<div> <div>
<button class="image-caption-button">Add Caption</button> <button class="image-caption-button">Add Caption</button>
@ -175,9 +175,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -237,9 +237,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -249,9 +249,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -277,9 +277,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -328,9 +328,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -340,9 +340,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -370,9 +370,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -415,9 +415,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="https://lexical.dev/img/logo.svg"
alt="lexical logo" alt="lexical logo"
draggable="false" draggable="false"
src="https://lexical.dev/img/logo.svg"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>
@ -427,9 +427,9 @@ test.describe('Images', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAAagAwAEAAAAAQAAAAcAAAAA/8IAEQgABwAGAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2wBDAQIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2gAMAwEAAhEDEQAAAfBeXfV/i9n/2gAIAQEAAQUCmlT7p//aAAgBAxEBPwGWbIKo/wBmP+0f/9oACAECEQE/AYYoHddn7pf7V//aAAgBAQAGPwKFaUpWtZJJVUl//8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hFyPFTveHPBl//9oADAMBAAIRAxEAABCL/8QAMxEBAQEAAwABAgUFAQEAAQEJAQARITEQQVFhIHHwkYGhsdHB4fEwQFBgcICQoLDA0OD/2gAIAQMRAT8QYOAdB9nP5t//2gAIAQIRAT8QEWh51X58fxf/2gAIAQEAAT8QJfU4BLBcKyeUzf/Z"
alt="a pretty yellow flower :)" alt="a pretty yellow flower :)"
draggable="false" draggable="false"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAAagAwAEAAAAAQAAAAcAAAAA/8IAEQgABwAGAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2wBDAQIDAwMEAwQFBQQGBgYGBggIBwcICA0JCgkKCQ0TDA4MDA4MExEUEQ8RFBEeGBUVGB4jHRwdIyolJSo1MjVFRVz/2gAMAwEAAhEDEQAAAfBeXfV/i9n/2gAIAQEAAQUCmlT7p//aAAgBAxEBPwGWbIKo/wBmP+0f/9oACAECEQE/AYYoHddn7pf7V//aAAgBAQAGPwKFaUpWtZJJVUl//8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hFyPFTveHPBl//9oADAMBAAIRAxEAABCL/8QAMxEBAQEAAwABAgUFAQEAAQEJAQARITEQQVFhIHHwkYGhsdHB4fEwQFBgcICQoLDA0OD/2gAIAQMRAT8QYOAdB9nP5t//2gAIAQIRAT8QEWh51X58fxf/2gAIAQEAAT8QJfU4BLBcKyeUzf/Z"
style="height: inherit; max-width: 500px; width: inherit;" /> style="height: inherit; max-width: 500px; width: inherit;" />
</div> </div>
</span> </span>

20
packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs
View File

@ -99,8 +99,8 @@ test.describe('Identation', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">code</span> <span data-lexical-text="true">code</span>
</code> </code>
<p class="PlaygroundEditorTheme__paragraph"><br /></p> <p class="PlaygroundEditorTheme__paragraph"><br /></p>
@ -177,8 +177,8 @@ test.describe('Identation', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">code</span> <span data-lexical-text="true">code</span>
</code> </code>
<p <p
@ -270,8 +270,8 @@ test.describe('Identation', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">code</span> <span data-lexical-text="true">code</span>
</code> </code>
<p <p
@ -357,8 +357,8 @@ test.describe('Identation', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">code</span> <span data-lexical-text="true">code</span>
</code> </code>
<p <p
@ -438,8 +438,8 @@ test.describe('Identation', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true">code</span> <span data-lexical-text="true">code</span>
</code> </code>
<p class="PlaygroundEditorTheme__paragraph" style=""><br /></p> <p class="PlaygroundEditorTheme__paragraph" style=""><br /></p>

66
packages/lexical-playground/__tests__/e2e/Links.spec.mjs
View File

@ -65,10 +65,10 @@ test.describe.parallel('Links', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
</p> </p>
@ -92,10 +92,10 @@ test.describe.parallel('Links', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://facebook.com"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
</p> </p>
@ -1499,10 +1499,10 @@ test.describe.parallel('Links', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">An Awesome Website</span> <span data-lexical-text="true">An Awesome Website</span>
</a> </a>
</p> </p>
@ -1522,10 +1522,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hey, check this out:</span> <span data-lexical-text="true">Hey, check this out:</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">An Awesome Website</span> <span data-lexical-text="true">An Awesome Website</span>
</a> </a>
<span data-lexical-text="true">!</span> <span data-lexical-text="true">!</span>
@ -1591,10 +1591,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">This is an</span> <span data-lexical-text="true">This is an</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Awesome Website</span> <span data-lexical-text="true">Awesome Website</span>
</a> </a>
<span data-lexical-text="true">, right?</span> <span data-lexical-text="true">, right?</span>
@ -1636,10 +1636,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</p> </p>
@ -1662,10 +1662,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://facebook.com"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</p> </p>
@ -1742,10 +1742,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</p> </p>
@ -1778,10 +1778,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://facebook.com"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://facebook.com"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</p> </p>
@ -1853,10 +1853,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</p> </p>
@ -1876,10 +1876,10 @@ test.describe.parallel('Links', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
</a> </a>
</h1> </h1>

96
packages/lexical-playground/__tests__/e2e/List.spec.mjs
View File

@ -98,9 +98,9 @@ test.describe.parallel('Nested List', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true"> <span data-lexical-text="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis risus ac cursus efficitur. Cras efficitur magna odio, venenatis risus ac cursus efficitur. Cras efficitur magna odio,
@ -258,17 +258,17 @@ test.describe.parallel('Nested List', () => {
<ul> <ul>
<li value="1"> <li value="1">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">foo</span> <span data-lexical-text="true">foo</span>
</li> </li>
</ul> </ul>
</li> </li>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">bar</span> <span data-lexical-text="true">bar</span>
</li> </li>
<li value="2"> <li value="2">
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">baz</span> <span data-lexical-text="true">baz</span>
</li> </li>
</ul> </ul>
@ -487,10 +487,10 @@ test.describe.parallel('Nested List', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">One</span> <span data-lexical-text="true">One</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</a> </a>
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
@ -518,10 +518,10 @@ test.describe.parallel('Nested List', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">One</span> <span data-lexical-text="true">One</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</a> </a>
<span data-lexical-text="true">three</span> <span data-lexical-text="true">three</span>
@ -1059,7 +1059,7 @@ test.describe.parallel('Nested List', () => {
page, page,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
</ul> </ul>
@ -1090,10 +1090,10 @@ test.describe.parallel('Nested List', () => {
page, page,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">b</span> <span data-lexical-text="true">b</span>
</li> </li>
</ul> </ul>
@ -1106,7 +1106,7 @@ test.describe.parallel('Nested List', () => {
page, page,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
</ul> </ul>
@ -1132,13 +1132,13 @@ test.describe.parallel('Nested List', () => {
page, page,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
<li value="2" dir="ltr"> <li dir="ltr" value="2">
<span data-lexical-text="true">b</span> <span data-lexical-text="true">b</span>
</li> </li>
<li value="3" dir="ltr"> <li dir="ltr" value="3">
<span data-lexical-text="true">c</span> <span data-lexical-text="true">c</span>
</li> </li>
</ul> </ul>
@ -1151,13 +1151,13 @@ test.describe.parallel('Nested List', () => {
page, page,
html` html`
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
</ul> </ul>
<p dir="ltr"><span data-lexical-text="true">b</span></p> <p dir="ltr"><span data-lexical-text="true">b</span></p>
<ul> <ul>
<li value="1" dir="ltr"> <li dir="ltr" value="1">
<span data-lexical-text="true">c</span> <span data-lexical-text="true">c</span>
</li> </li>
</ul> </ul>
@ -1187,21 +1187,21 @@ test.describe.parallel('Nested List', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> <ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="true"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr PlaygroundEditorTheme__listItemChecked" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr PlaygroundEditorTheme__listItemChecked"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="true">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="2"> role="checkbox"
tabindex="-1"
value="2"
aria-checked="false">
<span data-lexical-text="true">b</span> <span data-lexical-text="true">b</span>
</li> </li>
<li <li
@ -1210,12 +1210,12 @@ test.describe.parallel('Nested List', () => {
<ul <ul
class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="false">
<span data-lexical-text="true">c</span> <span data-lexical-text="true">c</span>
</li> </li>
</ul> </ul>
@ -1247,12 +1247,12 @@ test.describe.parallel('Nested List', () => {
<ul <ul
class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="false">
<span data-lexical-text="true">c</span> <span data-lexical-text="true">c</span>
</li> </li>
</ul> </ul>
@ -1266,21 +1266,21 @@ test.describe.parallel('Nested List', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> <ul class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="false">
<span data-lexical-text="true">a</span> <span data-lexical-text="true">a</span>
</li> </li>
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="2"> role="checkbox"
tabindex="-1"
value="2"
aria-checked="false">
<span data-lexical-text="true">b</span> <span data-lexical-text="true">b</span>
</li> </li>
<li <li
@ -1289,12 +1289,12 @@ test.describe.parallel('Nested List', () => {
<ul <ul
class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist"> class="PlaygroundEditorTheme__ul PlaygroundEditorTheme__checklist">
<li <li
aria-checked="false"
role="checkbox"
tabindex="-1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemUnchecked PlaygroundEditorTheme__ltr"
dir="ltr" dir="ltr"
value="1"> role="checkbox"
tabindex="-1"
value="1"
aria-checked="false">
<span data-lexical-text="true">c</span> <span data-lexical-text="true">c</span>
</li> </li>
</ul> </ul>

96
packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs
View File

@ -909,11 +909,11 @@ test.describe.parallel('Markdown', () => {
html` html`
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
data-language="markdown" spellcheck="false"
data-gutter="12"
data-highlight-language="markdown" data-highlight-language="markdown"
data-gutter="12"> data-language="markdown">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<br /> <br />
<span <span
@ -951,9 +951,9 @@ test.describe.parallel('Markdown', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 800px; width: inherit" /> style="height: inherit; max-width: 800px; width: inherit" />
</div> </div>
</span> </span>
@ -999,9 +999,9 @@ test.describe.parallel('Markdown', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
src="${SAMPLE_IMAGE_URL}"
alt="Yellow flower in tilt shift lens" alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 800px; width: inherit" /> style="height: inherit; max-width: 800px; width: inherit" />
</div> </div>
</span> </span>
@ -1010,7 +1010,7 @@ test.describe.parallel('Markdown', () => {
class="editor-equation" class="editor-equation"
contenteditable="false" contenteditable="false"
data-lexical-decorator="true"> data-lexical-decorator="true">
<img src="#" alt="" /> <img alt="" src="#" />
<span role="button" tabindex="-1"> <span role="button" tabindex="-1">
<span class="katex"> <span class="katex">
<span class="katex-html" aria-hidden="true"> <span class="katex-html" aria-hidden="true">
@ -1021,7 +1021,7 @@ test.describe.parallel('Markdown', () => {
</span> </span>
</span> </span>
</span> </span>
<img src="#" alt="" /> <img alt="" src="#" />
</span> </span>
<br /> <br />
</p> </p>
@ -1042,9 +1042,9 @@ test.describe.parallel('Markdown', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://lexical.dev"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.dev">
<span data-lexical-text="true">link</span> <span data-lexical-text="true">link</span>
</a> </a>
<span data-lexical-text="true">world</span> <span data-lexical-text="true">world</span>
@ -1137,9 +1137,9 @@ const TYPED_MARKDOWN_HTML = html`
works works
</strong> </strong>
<a <a
href="https://lexical.io"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.io">
<strong <strong
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough" class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough"
data-lexical-text="true"> data-lexical-text="true">
@ -1184,19 +1184,19 @@ const TYPED_MARKDOWN_HTML = html`
data-lexical-decorator="true" /> data-lexical-decorator="true" />
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">List here</span> <span data-lexical-text="true">List here</span>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Nested one</span> <span data-lexical-text="true">Nested one</span>
</li> </li>
</ul> </ul>
@ -1204,11 +1204,11 @@ const TYPED_MARKDOWN_HTML = html`
</ul> </ul>
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
data-language="sql" spellcheck="false"
data-gutter="1"
data-highlight-language="sql" data-highlight-language="sql"
data-gutter="1"> data-language="sql">
<span data-lexical-text="true">Code block</span> <span data-lexical-text="true">Code block</span>
</code> </code>
<p <p
@ -1327,9 +1327,9 @@ const IMPORTED_MARKDOWN_HTML = html`
works works
</strong> </strong>
<a <a
href="https://lexical.io"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.io">
<strong <strong
class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough" class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough"
data-lexical-text="true"> data-lexical-text="true">
@ -1343,16 +1343,16 @@ const IMPORTED_MARKDOWN_HTML = html`
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Links</span> <span data-lexical-text="true">Links</span>
<a <a
href="https://lexical.io/tag_here_and__here__and___here___too"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.io/tag_here_and__here__and___here___too">
<span data-lexical-text="true">with underscores</span> <span data-lexical-text="true">with underscores</span>
</a> </a>
<span data-lexical-text="true">and (</span> <span data-lexical-text="true">and (</span>
<a <a
href="https://lexical.dev"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://lexical.dev">
<span data-lexical-text="true">parenthesis</span> <span data-lexical-text="true">parenthesis</span>
</a> </a>
<span data-lexical-text="true">)</span> <span data-lexical-text="true">)</span>
@ -1422,9 +1422,9 @@ const IMPORTED_MARKDOWN_HTML = html`
</h3> </h3>
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Create a list with</span> <span data-lexical-text="true">Create a list with</span>
<code spellcheck="false" data-lexical-text="true"> <code spellcheck="false" data-lexical-text="true">
<span class="PlaygroundEditorTheme__textCode">+</span> <span class="PlaygroundEditorTheme__textCode">+</span>
@ -1439,25 +1439,25 @@ const IMPORTED_MARKDOWN_HTML = html`
</code> </code>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true"> <span data-lexical-text="true">
Lists can be indented with 2 spaces Lists can be indented with 2 spaces
</span> </span>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">Very easy</span> <span data-lexical-text="true">Very easy</span>
</li> </li>
</ul> </ul>
@ -1470,9 +1470,9 @@ const IMPORTED_MARKDOWN_HTML = html`
</h3> </h3>
<ol class="PlaygroundEditorTheme__ol1"> <ol class="PlaygroundEditorTheme__ol1">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true"> <span data-lexical-text="true">
Oredered lists started with numbers as Oredered lists started with numbers as
</span> </span>
@ -1481,13 +1481,13 @@ const IMPORTED_MARKDOWN_HTML = html`
</code> </code>
</li> </li>
<li <li
value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"> value="2">
<ol class="PlaygroundEditorTheme__ol2"> <ol class="PlaygroundEditorTheme__ol2">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">And can be nested</span> <span data-lexical-text="true">And can be nested</span>
<br /> <br />
<span data-lexical-text="true">and multiline as well</span> <span data-lexical-text="true">and multiline as well</span>
@ -1498,11 +1498,11 @@ const IMPORTED_MARKDOWN_HTML = html`
<p class="PlaygroundEditorTheme__paragraph"> <p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">.</span> <span data-lexical-text="true">.</span>
</p> </p>
<ol start="31" class="PlaygroundEditorTheme__ol1"> <ol class="PlaygroundEditorTheme__ol1" start="31">
<li <li
value="31"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="31">
<span data-lexical-text="true">Have any starting number</span> <span data-lexical-text="true">Have any starting number</span>
</li> </li>
</ol> </ol>
@ -1529,11 +1529,11 @@ const IMPORTED_MARKDOWN_HTML = html`
</h3> </h3>
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
data-language="javascript" spellcheck="false"
data-gutter="123"
data-highlight-language="javascript" data-highlight-language="javascript"
data-gutter="123"> data-language="javascript">
<span class="PlaygroundEditorTheme__tokenComment" data-lexical-text="true"> <span class="PlaygroundEditorTheme__tokenComment" data-lexical-text="true">
// Some comments // Some comments
</span> </span>

6
packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
View File

@ -151,11 +151,11 @@ test.describe.parallel('Selection', () => {
</p> </p>
<code <code
class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
spellcheck="false"
dir="ltr" dir="ltr"
data-language="javascript" spellcheck="false"
data-gutter="1"
data-highlight-language="javascript" data-highlight-language="javascript"
data-gutter="1"> data-language="javascript">
<span data-lexical-text="true">Line2</span> <span data-lexical-text="true">Line2</span>
</code> </code>
`, `,

4
packages/lexical-playground/__tests__/e2e/Tab.spec.mjs
View File

@ -98,8 +98,8 @@ test.describe('Tab', () => {
dir="ltr" dir="ltr"
spellcheck="false" spellcheck="false"
data-gutter="1" data-gutter="1"
data-language="javascript" data-highlight-language="javascript"
data-highlight-language="javascript"> data-language="javascript">
<span data-lexical-text="true"></span> <span data-lexical-text="true"></span>
<span <span
class="PlaygroundEditorTheme__tokenAttr" class="PlaygroundEditorTheme__tokenAttr"

2
packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
View File

@ -1141,8 +1141,8 @@ test.describe.parallel('TextFormatting', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="false"> <div draggable="false">
<img <img
alt="Yellow flower in tilt shift lens"
class="focused" class="focused"
alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}" src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit" /> style="height: inherit; max-width: 500px; width: inherit" />

6
packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
View File

@ -84,10 +84,10 @@ test.describe('Toolbar', () => {
</div> </div>
<div> <div>
<div <div
aria-placeholder="Enter a caption..."
contenteditable="true" contenteditable="true"
role="textbox" role="textbox"
spellcheck="true" spellcheck="true"
aria-placeholder="Enter a caption..."
data-lexical-editor="true"> data-lexical-editor="true">
<p dir="ltr"> <p dir="ltr">
<span data-lexical-text="true"> <span data-lexical-text="true">
@ -271,8 +271,8 @@ test.describe('Toolbar', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="true"> <div draggable="true">
<img <img
alt="Yellow flower in tilt shift lens"
class="focused draggable" class="focused draggable"
alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}" src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit" /> style="height: inherit; max-width: 500px; width: inherit" />
@ -307,8 +307,8 @@ test.describe('Toolbar', () => {
data-lexical-decorator="true"> data-lexical-decorator="true">
<div draggable="true"> <div draggable="true">
<img <img
alt="Yellow flower in tilt shift lens"
class="focused draggable" class="focused draggable"
alt="Yellow flower in tilt shift lens"
draggable="false" draggable="false"
src="${SAMPLE_IMAGE_URL}" src="${SAMPLE_IMAGE_URL}"
style="height: inherit; max-width: 500px; width: inherit" /> style="height: inherit; max-width: 500px; width: inherit" />

12
packages/lexical-playground/__tests__/regression/1083-backspace-with-element-at-front.spec.mjs
View File

@ -44,10 +44,10 @@ test.describe('Regression test #1083', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
<span data-lexical-text="true">World</span> <span data-lexical-text="true">World</span>
@ -91,10 +91,10 @@ test.describe('Regression test #1083', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Say</span> <span data-lexical-text="true">Say</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
</a> </a>
<span data-lexical-text="true">World</span> <span data-lexical-text="true">World</span>

4
packages/lexical-playground/__tests__/regression/1113-link-newline-at-end.spec.mjs
View File

@ -34,9 +34,9 @@ test.describe('Regression test #1113', () => {
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr">
<a <a
href="https://www.example.com"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://www.example.com">
<span data-lexical-text="true">https://www.example.com</span> <span data-lexical-text="true">https://www.example.com</span>
</a> </a>
<br /> <br />

8
packages/lexical-playground/__tests__/regression/3433-merge-markdown-lists.spec.mjs
View File

@ -31,15 +31,15 @@ test.describe('Regression test #3433', () => {
html` html`
<ul class="PlaygroundEditorTheme__ul"> <ul class="PlaygroundEditorTheme__ul">
<li <li
value="1"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="1">
<span data-lexical-text="true">two</span> <span data-lexical-text="true">two</span>
</li> </li>
<li <li
value="2"
class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
value="2">
<span data-lexical-text="true">one</span> <span data-lexical-text="true">one</span>
</li> </li>
</ul> </ul>

12
packages/lexical-playground/__tests__/regression/5251-paste-into-inline-element.spec.mjs
View File

@ -71,10 +71,10 @@ test.describe('Regression test #5251', () => {
dir="ltr"> dir="ltr">
<span data-lexical-text="true">Hello</span> <span data-lexical-text="true">Hello</span>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">World</span> <span data-lexical-text="true">World</span>
</a> </a>
</p> </p>
@ -101,10 +101,10 @@ test.describe('Regression test #5251', () => {
bold bold
</strong> </strong>
<a <a
href="https://"
rel="noreferrer"
class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr" class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
dir="ltr"> dir="ltr"
href="https://"
rel="noreferrer">
<span data-lexical-text="true">ld</span> <span data-lexical-text="true">ld</span>
</a> </a>
</p> </p>

10
packages/lexical-playground/esm/index.html
View File

@ -4,10 +4,10 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Lexical Basic - Vanilla JS with ESM" /> <meta name="description" content="Lexical Basic - Vanilla JS with ESM" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<link rel="stylesheet" href="./styles.css" /> <link href="./styles.css" rel="stylesheet" />
<title>Lexical Basic - Vanilla JS with ESM</title> <title>Lexical Basic - Vanilla JS with ESM</title>
</head> </head>
<body> <body>
@ -32,6 +32,6 @@
} }
} }
</script> </script>
<script type="module" src="./index.mjs"></script> <script src="./index.mjs" type="module"></script>
</body> </body>
</html> </html>

8
packages/lexical-playground/index.html
View File

@ -5,15 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Lexical Playground" /> <meta name="description" content="Lexical Playground" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<title>Lexical Playground</title> <title>Lexical Playground</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<div id="portal"></div> <div id="portal"></div>
<script type="module" src="/src/index.tsx"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

12
packages/lexical/src/__tests__/utils/index.tsx
View File

@ -39,7 +39,8 @@ import {
SerializedTextNode, SerializedTextNode,
TextNode, TextNode,
} from 'lexical'; } from 'lexical';
import {format} from 'prettier'; import path from 'path';
import * as prettier from 'prettier';
import * as React from 'react'; import * as React from 'react';
import {createRef} from 'react'; import {createRef} from 'react';
import {createRoot} from 'react-dom/client'; import {createRoot} from 'react-dom/client';
@ -48,6 +49,10 @@ import * as ReactTestUtils from 'shared/react-test-utils';
import {CreateEditorArgs, LexicalNodeReplacement} from '../../LexicalEditor'; import {CreateEditorArgs, LexicalNodeReplacement} from '../../LexicalEditor';
import {resetRandomKey} from '../../LexicalUtils'; import {resetRandomKey} from '../../LexicalUtils';
const prettierConfig = prettier.resolveConfig.sync(
path.resolve(__dirname, '../../../../.prettierrc'),
);
type TestEnv = { type TestEnv = {
readonly container: HTMLDivElement; readonly container: HTMLDivElement;
readonly editor: LexicalEditor; readonly editor: LexicalEditor;
@ -779,5 +784,8 @@ export function expectHtmlToBeEqual(expected: string, actual: string): void {
} }
export function prettifyHtml(s: string): string { export function prettifyHtml(s: string): string {
return format(s.replace(/\n/g, ''), {parser: 'html'}); return prettier.format(s.replace(/\n/g, ''), {
...prettierConfig,
parser: 'html',
});
} }