mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-29 23:22:34 +01:00
Lexical: Finished conversion/update of test files
This commit is contained in:
Dan Brown
parent
787e06e3d8
commit
dba8ab947f
@ -21,7 +21,7 @@ const config: Config = {
|
||||
clearMocks: true,
|
||||
|
||||
// Indicates whether the coverage information should be collected while executing the test
|
||||
collectCoverage: true,
|
||||
collectCoverage: false,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
// collectCoverageFrom: undefined,
|
||||
@ -164,10 +164,9 @@ const config: Config = {
|
||||
// testLocationInResults: false,
|
||||
|
||||
// The glob patterns Jest uses to detect test files
|
||||
// testMatch: [
|
||||
// "**/__tests__/**/*.[jt]s?(x)",
|
||||
// "**/?(*.)+(spec|test).[tj]s?(x)"
|
||||
// ],
|
||||
testMatch: [
|
||||
"**/__tests__/**/*.test.[jt]s",
|
||||
],
|
||||
|
||||
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
|
||||
// testPathIgnorePatterns: [
|
||||
|
||||
@ -717,3 +717,11 @@ export function html(
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
export function expectHtmlToBeEqual(expected: string, actual: string): void {
|
||||
expect(formatHtml(expected)).toBe(formatHtml(actual));
|
||||
}
|
||||
|
||||
function formatHtml(s: string): string {
|
||||
return s.replace(/>\s+</g, '><').replace(/\s*\n\s*/g, ' ').trim();
|
||||
}
|
||||
@ -21,7 +21,6 @@ import {
|
||||
TextModeType,
|
||||
TextNode,
|
||||
} from 'lexical';
|
||||
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
|
||||
|
||||
import {
|
||||
$createTestSegmentedNode,
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import * as ReactTestUtils from 'react-dom/test-utils';
|
||||
|
||||
/**
|
||||
* React 19 moved act from react-dom/test-utils to react
|
||||
* https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
|
||||
*/
|
||||
export const act =
|
||||
'act' in React
|
||||
? (React.act as typeof ReactTestUtils.act)
|
||||
: ReactTestUtils.act;
|
||||
@ -19,7 +19,7 @@ import {
|
||||
ParagraphNode,
|
||||
SerializedParagraphNode,
|
||||
TextNode,
|
||||
} from 'lexical/src';
|
||||
} from 'lexical';
|
||||
import {initializeUnitTest} from 'lexical/__tests__/utils';
|
||||
|
||||
const editorConfig = Object.freeze({
|
||||
|
||||
@ -19,7 +19,7 @@ import {
|
||||
ParagraphNode,
|
||||
SerializedParagraphNode,
|
||||
TextNode,
|
||||
} from 'lexical/src';
|
||||
} from 'lexical';
|
||||
import {initializeUnitTest} from 'lexical/__tests__/utils';
|
||||
|
||||
const editorConfig = Object.freeze({
|
||||
|
||||
@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
expectHtmlToBeEqual(
|
||||
listItemNode.createDOM(editorConfig).outerHTML,
|
||||
html`
|
||||
<li class="my-listItem-item-class" value="1"></li>
|
||||
<li value="1" class="my-listItem-item-class"></li>
|
||||
`,
|
||||
);
|
||||
|
||||
@ -90,7 +90,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
expectHtmlToBeEqual(
|
||||
domElement.outerHTML,
|
||||
html`
|
||||
<li class="my-listItem-item-class" value="1"></li>
|
||||
<li value="1" class="my-listItem-item-class"></li>
|
||||
`,
|
||||
);
|
||||
const newListItemNode = new ListItemNode();
|
||||
@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
expectHtmlToBeEqual(
|
||||
domElement.outerHTML,
|
||||
html`
|
||||
<li class="my-listItem-item-class" value="1"></li>
|
||||
<li value="1" class="my-listItem-item-class"></li>
|
||||
`,
|
||||
);
|
||||
});
|
||||
@ -125,7 +125,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
expectHtmlToBeEqual(
|
||||
domElement.outerHTML,
|
||||
html`
|
||||
<li class="my-listItem-item-class" value="1"></li>
|
||||
<li value="1" class="my-listItem-item-class"></li>
|
||||
`,
|
||||
);
|
||||
const nestedListNode = new ListNode('bullet', 1);
|
||||
@ -142,9 +142,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
expectHtmlToBeEqual(
|
||||
domElement.outerHTML,
|
||||
html`
|
||||
<li
|
||||
class="my-listItem-item-class my-nested-list-listItem-class"
|
||||
value="1"></li>
|
||||
<li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></li>
|
||||
`,
|
||||
);
|
||||
});
|
||||
@ -184,13 +182,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -217,13 +215,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -247,13 +245,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -273,12 +271,12 @@ describe('LexicalListItemNode tests', () => {
|
||||
contenteditable="true"
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<p><br /></p>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -303,14 +301,14 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><br /></p>
|
||||
<p><br></p>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
@ -332,13 +330,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><br /></p>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -363,7 +361,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -383,7 +381,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
contenteditable="true"
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<p><br /></p>
|
||||
<p><br></p>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
@ -423,13 +421,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -447,10 +445,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -497,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -525,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -575,15 +573,15 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="3">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -603,12 +601,12 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -661,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -693,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -757,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -796,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -867,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -906,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -985,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1031,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1089,13 +1087,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1119,14 +1117,14 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2"><br /></li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="2"><br></li>
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="4">
|
||||
<li value="4" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1150,16 +1148,16 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
<li value="4"><br /></li>
|
||||
<li value="4"><br></li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
@ -1181,16 +1179,16 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li dir="ltr" value="3">
|
||||
<li value="3" dir="ltr">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
<li value="4"><br /></li>
|
||||
<li value="4"><br></li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
@ -1213,7 +1211,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1233,10 +1231,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2"><br /></li>
|
||||
<li value="2"><br></li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
@ -1310,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1319,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1338,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
editor.getRootElement()!.innerHTML,
|
||||
html`
|
||||
<ul>
|
||||
<li dir="ltr" value="1">
|
||||
<li value="1" dir="ltr">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li dir="ltr" value="2">
|
||||
<li value="2" dir="ltr">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/
|
||||
import {expect} from '@playwright/test';
|
||||
import prettier from 'prettier';
|
||||
|
||||
// This tag function is just used to trigger prettier auto-formatting.
|
||||
// (https://prettier.io/blog/2020/08/24/2.1.0.html#api)
|
||||
export function html(
|
||||
partials: TemplateStringsArray,
|
||||
...params: string[]
|
||||
): string {
|
||||
let output = '';
|
||||
for (let i = 0; i < partials.length; i++) {
|
||||
output += partials[i];
|
||||
if (i < partials.length - 1) {
|
||||
output += params[i];
|
||||
}
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
export function expectHtmlToBeEqual(expected: string, actual: string): void {
|
||||
expect(prettifyHtml(expected)).toBe(prettifyHtml(actual));
|
||||
}
|
||||
|
||||
export function prettifyHtml(s: string): string {
|
||||
return prettier.format(s.replace(/\n/g, ''), {parser: 'html'});
|
||||
}
|
||||
@ -8,13 +8,7 @@
|
||||
|
||||
import {$createLinkNode} from '@lexical/link';
|
||||
import {$createListItemNode, $createListNode} from '@lexical/list';
|
||||
import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
|
||||
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
||||
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
|
||||
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
|
||||
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
|
||||
import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
|
||||
import {$createHeadingNode} from '@lexical/rich-text';
|
||||
import {$createHeadingNode, registerRichText} from '@lexical/rich-text';
|
||||
import {
|
||||
$addNodeStyle,
|
||||
$getSelectionStyleValueForProperty,
|
||||
@ -28,7 +22,7 @@ import {
|
||||
$createRangeSelection,
|
||||
$createTextNode,
|
||||
$getRoot,
|
||||
$getSelection,
|
||||
$getSelection, $insertNodes,
|
||||
$isElementNode,
|
||||
$isRangeSelection,
|
||||
$isTextNode,
|
||||
@ -49,10 +43,7 @@ import {
|
||||
createTestEditor,
|
||||
initializeClipboard,
|
||||
invariant,
|
||||
TestComposer,
|
||||
} from 'lexical/__tests__/utils';
|
||||
import {createRoot, Root} from 'react-dom/client';
|
||||
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
|
||||
|
||||
import {
|
||||
$setAnchorPoint,
|
||||
@ -81,6 +72,8 @@ import {
|
||||
setNativeSelectionWithPaths,
|
||||
undo,
|
||||
} from '../utils';
|
||||
import {createEmptyHistoryState, registerHistory} from "@lexical/history";
|
||||
import {mergeRegister} from "@lexical/utils";
|
||||
|
||||
interface ExpectedSelection {
|
||||
anchorPath: number[];
|
||||
@ -118,37 +111,27 @@ Range.prototype.getBoundingClientRect = function (): DOMRect {
|
||||
|
||||
describe('LexicalSelection tests', () => {
|
||||
let container: HTMLElement;
|
||||
let reactRoot: Root;
|
||||
let root: HTMLDivElement;
|
||||
let editor: LexicalEditor | null = null;
|
||||
|
||||
beforeEach(async () => {
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
reactRoot = createRoot(container);
|
||||
|
||||
root = document.createElement('div');
|
||||
root.setAttribute('contenteditable', 'true');
|
||||
container.append(root);
|
||||
|
||||
await init();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
// Ensure we are clearing out any React state and running effects with
|
||||
// act
|
||||
await ReactTestUtils.act(async () => {
|
||||
reactRoot.unmount();
|
||||
await Promise.resolve().then();
|
||||
});
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
async function init() {
|
||||
function TestBase() {
|
||||
function TestPlugin() {
|
||||
[editor] = useLexicalComposerContext();
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<TestComposer
|
||||
config={{
|
||||
editor = createTestEditor({
|
||||
nodes: [],
|
||||
theme: {
|
||||
code: 'editor-code',
|
||||
@ -178,29 +161,22 @@ describe('LexicalSelection tests', () => {
|
||||
underline: 'editor-text-underline',
|
||||
underlineStrikethrough: 'editor-text-underlineStrikethrough',
|
||||
},
|
||||
},
|
||||
}}>
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
// eslint-disable-next-line jsx-a11y/aria-role, @typescript-eslint/no-explicit-any
|
||||
<ContentEditable role={null as any} spellCheck={null as any} />
|
||||
}
|
||||
placeholder={null}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
/>
|
||||
<HistoryPlugin />
|
||||
<TestPlugin />
|
||||
<AutoFocusPlugin />
|
||||
</TestComposer>
|
||||
);
|
||||
}
|
||||
|
||||
await ReactTestUtils.act(async () => {
|
||||
reactRoot.render(<TestBase />);
|
||||
await Promise.resolve().then();
|
||||
});
|
||||
|
||||
await Promise.resolve().then();
|
||||
mergeRegister(
|
||||
registerHistory(editor, createEmptyHistoryState(), 300),
|
||||
registerRichText(editor),
|
||||
);
|
||||
|
||||
editor.setRootElement(root);
|
||||
editor.update(() => {
|
||||
const p = $createParagraphNode();
|
||||
$insertNodes([p]);
|
||||
});
|
||||
editor.commitUpdates();
|
||||
editor.focus();
|
||||
|
||||
// Focus first element
|
||||
setNativeSelectionWithPaths(
|
||||
editor!.getRootElement()!,
|
||||
@ -212,9 +188,8 @@ describe('LexicalSelection tests', () => {
|
||||
}
|
||||
|
||||
async function update(fn: () => void) {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(fn);
|
||||
});
|
||||
editor!.update(fn);
|
||||
editor!.commitUpdates();
|
||||
}
|
||||
|
||||
test('Expect initial output to be a block with no text.', () => {
|
||||
@ -734,301 +709,6 @@ describe('LexicalSelection tests', () => {
|
||||
name: 'Format selection that contains a token node in the middle should format the token node',
|
||||
},
|
||||
|
||||
// Tests need fixing:
|
||||
// ...GRAPHEME_SCENARIOS.flatMap(({description, grapheme}) => [
|
||||
// {
|
||||
// name: `Delete backward eliminates entire ${description} (${grapheme})`,
|
||||
// inputs: [insertText(grapheme + grapheme), deleteBackward(1)],
|
||||
// expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}</span></p></div>`,
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: grapheme.length,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: grapheme.length,
|
||||
// },
|
||||
// setup: emptySetup,
|
||||
// },
|
||||
// {
|
||||
// name: `Delete forward eliminates entire ${description} (${grapheme})`,
|
||||
// inputs: [
|
||||
// insertText(grapheme + grapheme),
|
||||
// moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
|
||||
// deleteForward(),
|
||||
// ],
|
||||
// expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}</span></p></div>`,
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 0,
|
||||
// },
|
||||
// setup: emptySetup,
|
||||
// },
|
||||
// {
|
||||
// name: `Move backward skips over grapheme cluster (${grapheme})`,
|
||||
// inputs: [insertText(grapheme + grapheme), moveBackward(1)],
|
||||
// expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}${grapheme}</span></p></div>`,
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: grapheme.length,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: grapheme.length,
|
||||
// },
|
||||
// setup: emptySetup,
|
||||
// },
|
||||
// {
|
||||
// name: `Move forward skips over grapheme cluster (${grapheme})`,
|
||||
// inputs: [
|
||||
// insertText(grapheme + grapheme),
|
||||
// moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
|
||||
// moveForward(),
|
||||
// ],
|
||||
// expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}${grapheme}</span></p></div>`,
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: grapheme.length,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: grapheme.length,
|
||||
// },
|
||||
// setup: emptySetup,
|
||||
// },
|
||||
// ]),
|
||||
// {
|
||||
// name: 'Jump to beginning and insert',
|
||||
// inputs: [
|
||||
// insertText('1'),
|
||||
// insertText('1'),
|
||||
// insertText('2'),
|
||||
// insertText('3'),
|
||||
// moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
|
||||
// insertText('a'),
|
||||
// insertText('b'),
|
||||
// insertText('c'),
|
||||
// deleteForward(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">abc123</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 3,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 3,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and replace',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// insertText('lexical'),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello lexical!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 13,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 13,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and bold',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatBold(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<strong class="editor-text-bold" data-lexical-text="true">draft</strong><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and italic',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatItalic(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<em class="editor-text-italic" data-lexical-text="true">draft</em><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and bold + italic',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatBold(),
|
||||
// formatItalic(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<strong class="editor-text-bold editor-text-italic" data-lexical-text="true">draft</strong><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and underline',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatUnderline(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<span class="editor-text-underline" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and strikethrough',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatStrikeThrough(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<span class="editor-text-strikethrough" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and underline + strikethrough',
|
||||
// inputs: [
|
||||
// insertText('Hello draft!'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
|
||||
// formatUnderline(),
|
||||
// formatStrikeThrough(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span>' +
|
||||
// '<span class="editor-text-underlineStrikethrough" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 1, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 1, 0],
|
||||
// focusOffset: 5,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and replace all',
|
||||
// inputs: [
|
||||
// insertText('This is broken.'),
|
||||
// moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 15),
|
||||
// insertText('This works!'),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 11,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 11,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Select and delete',
|
||||
// inputs: [
|
||||
// insertText('A lion.'),
|
||||
// moveNativeSelection([0, 0, 0], 2, [0, 0, 0], 6),
|
||||
// deleteForward(),
|
||||
// insertText('duck'),
|
||||
// moveNativeSelection([0, 0, 0], 2, [0, 0, 0], 6),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">A duck.</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 2,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 6,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Inserting a paragraph',
|
||||
// inputs: [insertParagraph()],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true"><br></span></p>' +
|
||||
// '<p class="editor-paragraph"><span data-lexical-text="true"><br></span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [1, 0, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [1, 0, 0],
|
||||
// focusOffset: 0,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Inserting a paragraph and then removing it',
|
||||
// inputs: [insertParagraph(), deleteBackward(1)],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true"><br></span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 0,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Inserting a paragraph part way through text',
|
||||
// inputs: [
|
||||
// insertText('Hello world'),
|
||||
// moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 6),
|
||||
// insertParagraph(),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span></p>' +
|
||||
// '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">world</span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [1, 0, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [1, 0, 0],
|
||||
// focusOffset: 0,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Inserting two paragraphs and then deleting via selection',
|
||||
// inputs: [
|
||||
// insertText('123'),
|
||||
// insertParagraph(),
|
||||
// insertText('456'),
|
||||
// moveNativeSelection([0, 0, 0], 0, [1, 0, 0], 3),
|
||||
// deleteBackward(1),
|
||||
// ],
|
||||
// expectedHTML:
|
||||
// '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true"><br></span></p></div>',
|
||||
// expectedSelection: {
|
||||
// anchorPath: [0, 0, 0],
|
||||
// anchorOffset: 0,
|
||||
// focusPath: [0, 0, 0],
|
||||
// focusOffset: 0,
|
||||
// },
|
||||
// },
|
||||
...[
|
||||
{
|
||||
whitespaceCharacter: ' ',
|
||||
@ -1254,7 +934,6 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
test('insert text one selected node element selection', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -1275,10 +954,8 @@ describe('LexicalSelection tests', () => {
|
||||
expect(root.getTextContent()).toBe('');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('getNodes resolves nested block nodes', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -1296,7 +973,6 @@ describe('LexicalSelection tests', () => {
|
||||
expect(selectedNodes[0].getKey()).toBe(text.getKey());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Block selection moves when new nodes are inserted', () => {
|
||||
const baseCases: {
|
||||
@ -1851,7 +1527,6 @@ describe('LexicalSelection tests', () => {
|
||||
// eslint-disable-next-line no-only-tests/no-only-tests
|
||||
const test_ = only === true ? test.only : test;
|
||||
test_(name, async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -1896,14 +1571,12 @@ describe('LexicalSelection tests', () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe('Selection correctly resolves to a sibling ElementNode when a node is removed', () => {
|
||||
test('', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -1929,11 +1602,9 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Selection correctly resolves to a sibling ElementNode when a selected node child is removed', () => {
|
||||
test('', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
let paragraphNodeKey: string;
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
@ -1964,11 +1635,9 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Selection correctly resolves to a sibling ElementNode that has multiple children with the correct offset when a node is removed', () => {
|
||||
test('', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
// Arrange
|
||||
// Root
|
||||
@ -2016,10 +1685,8 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('isBackward', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -2060,7 +1727,6 @@ describe('LexicalSelection tests', () => {
|
||||
expect(selection.isBackward()).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Decorator text content for selection', () => {
|
||||
const baseCases: {
|
||||
@ -2144,7 +1810,6 @@ describe('LexicalSelection tests', () => {
|
||||
})
|
||||
.forEach(({name, fn, invertSelection}) => {
|
||||
it(name, async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -2175,7 +1840,6 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('insertParagraph', () => {
|
||||
test('three text nodes at offset 0 on third node', async () => {
|
||||
@ -2274,7 +1938,6 @@ describe('LexicalSelection tests', () => {
|
||||
it('adjust offset for inline elements text formatting', async () => {
|
||||
await init();
|
||||
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
|
||||
@ -2314,7 +1977,6 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Node.replace', () => {
|
||||
let text1: TextNode,
|
||||
@ -2504,7 +2166,6 @@ describe('LexicalSelection tests', () => {
|
||||
|
||||
describe('$patchStyle', () => {
|
||||
it('should patch the style with the new style object', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const root = $getRoot();
|
||||
const paragraph = $createParagraphNode();
|
||||
@ -2551,10 +2212,8 @@ describe('LexicalSelection tests', () => {
|
||||
expect(cssColorValue).toBe('blue');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should patch the style with property function', async () => {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(() => {
|
||||
const currentColor = 'red';
|
||||
const nextColor = 'blue';
|
||||
@ -2607,7 +2266,6 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('$setBlocksType', () => {
|
||||
test('Collapsed selection in text', async () => {
|
||||
@ -7,22 +7,14 @@
|
||||
*/
|
||||
|
||||
import {$insertDataTransferForRichText} from '@lexical/clipboard';
|
||||
import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
|
||||
import {
|
||||
$createTableNode,
|
||||
$createTableNodeWithDimensions,
|
||||
$createTableSelection,
|
||||
} from '@lexical/table';
|
||||
import {
|
||||
$createParagraphNode,
|
||||
$createTextNode,
|
||||
$getRoot,
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
$selectAll,
|
||||
$setSelection,
|
||||
CUT_COMMAND,
|
||||
ParagraphNode,
|
||||
} from 'lexical';
|
||||
import {
|
||||
DataTransferMock,
|
||||
@ -30,8 +22,6 @@ import {
|
||||
invariant,
|
||||
} from 'lexical/__tests__/utils';
|
||||
|
||||
import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
|
||||
|
||||
export class ClipboardDataMock {
|
||||
getData: jest.Mock<string, [string]>;
|
||||
setData: jest.Mock<void, [string, string]>;
|
||||
@ -149,203 +139,7 @@ describe('LexicalTableNode tests', () => {
|
||||
`<table><tr style="height: 21px;"><td><p dir="ltr"><strong data-lexical-text="true">Surface</strong></p></td><td><p dir="ltr"><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p dir="ltr"><span data-lexical-text="true">Lexical</span></p></td><td><p dir="ltr"><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p dir="ltr"><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
|
||||
);
|
||||
});
|
||||
|
||||
test('Cut table in the middle of a range selection', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const paragraph = root.getFirstChild<ParagraphNode>();
|
||||
const beforeText = $createTextNode('text before the table');
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
const afterText = $createTextNode('text after the table');
|
||||
|
||||
paragraph?.append(beforeText);
|
||||
paragraph?.append(table);
|
||||
paragraph?.append(afterText);
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.focus();
|
||||
$selectAll();
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
|
||||
});
|
||||
|
||||
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
|
||||
});
|
||||
|
||||
test('Cut table as last node in range selection ', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const paragraph = root.getFirstChild<ParagraphNode>();
|
||||
const beforeText = $createTextNode('text before the table');
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
|
||||
paragraph?.append(beforeText);
|
||||
paragraph?.append(table);
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.focus();
|
||||
$selectAll();
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
|
||||
});
|
||||
|
||||
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
|
||||
});
|
||||
|
||||
test('Cut table as first node in range selection ', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const paragraph = root.getFirstChild<ParagraphNode>();
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
const afterText = $createTextNode('text after the table');
|
||||
|
||||
paragraph?.append(table);
|
||||
paragraph?.append(afterText);
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.focus();
|
||||
$selectAll();
|
||||
});
|
||||
await editor.update(() => {
|
||||
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
|
||||
});
|
||||
|
||||
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
|
||||
});
|
||||
|
||||
test('Cut table is whole selection, should remove it', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
root.append(table);
|
||||
});
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = root.getLastChild<TableNode>();
|
||||
if (table) {
|
||||
const DOMTable = $getElementForTableNode(editor, table);
|
||||
if (DOMTable) {
|
||||
table
|
||||
?.getCellNodeFromCords(0, 0, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('some text'));
|
||||
const selection = $createTableSelection();
|
||||
selection.set(
|
||||
table.__key,
|
||||
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
|
||||
table?.getCellNodeFromCords(3, 3, DOMTable)?.__key || '',
|
||||
);
|
||||
$setSelection(selection);
|
||||
editor.dispatchCommand(CUT_COMMAND, {
|
||||
preventDefault: () => {},
|
||||
stopPropagation: () => {},
|
||||
} as ClipboardEvent);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
|
||||
});
|
||||
|
||||
test('Cut subsection of table cells, should just clear contents', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
root.append(table);
|
||||
});
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = root.getLastChild<TableNode>();
|
||||
if (table) {
|
||||
const DOMTable = $getElementForTableNode(editor, table);
|
||||
if (DOMTable) {
|
||||
table
|
||||
?.getCellNodeFromCords(0, 0, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('some text'));
|
||||
const selection = $createTableSelection();
|
||||
selection.set(
|
||||
table.__key,
|
||||
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
|
||||
table?.getCellNodeFromCords(2, 2, DOMTable)?.__key || '',
|
||||
);
|
||||
$setSelection(selection);
|
||||
editor.dispatchCommand(CUT_COMMAND, {
|
||||
preventDefault: () => {},
|
||||
stopPropagation: () => {},
|
||||
} as ClipboardEvent);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
`<p><br></p><table><tr><th><p><br></p></th><th><p><br></p></th><th><p><br></p></th><th><p><br></p></th></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr></table>`,
|
||||
);
|
||||
});
|
||||
|
||||
test('Table plain text output validation', async () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = $createTableNodeWithDimensions(4, 4, true);
|
||||
root.append(table);
|
||||
});
|
||||
await editor.update(() => {
|
||||
const root = $getRoot();
|
||||
const table = root.getLastChild<TableNode>();
|
||||
if (table) {
|
||||
const DOMTable = $getElementForTableNode(editor, table);
|
||||
if (DOMTable) {
|
||||
table
|
||||
?.getCellNodeFromCords(0, 0, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('1'));
|
||||
table
|
||||
?.getCellNodeFromCords(1, 0, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode(''));
|
||||
table
|
||||
?.getCellNodeFromCords(2, 0, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('2'));
|
||||
table
|
||||
?.getCellNodeFromCords(0, 1, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('3'));
|
||||
table
|
||||
?.getCellNodeFromCords(1, 1, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode('4'));
|
||||
table
|
||||
?.getCellNodeFromCords(2, 1, DOMTable)
|
||||
?.getLastChild<ParagraphNode>()
|
||||
?.append($createTextNode(''));
|
||||
const selection = $createTableSelection();
|
||||
selection.set(
|
||||
table.__key,
|
||||
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
|
||||
table?.getCellNodeFromCords(2, 1, DOMTable)?.__key || '',
|
||||
);
|
||||
expect(selection.getTextContent()).toBe(`1\t\t2\n3\t4\t\n`);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
undefined,
|
||||
<TablePlugin />,
|
||||
);
|
||||
});
|
||||
@ -19,9 +19,6 @@ import {
|
||||
TextNode,
|
||||
} from 'lexical';
|
||||
import {createTestEditor} from 'lexical/__tests__/utils';
|
||||
import {createRef, useEffect, useMemo} from 'react';
|
||||
import {createRoot, Root} from 'react-dom/client';
|
||||
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
|
||||
|
||||
describe('table selection', () => {
|
||||
let originalText: TextNode;
|
||||
@ -31,23 +28,23 @@ describe('table selection', () => {
|
||||
let paragraphKey: string;
|
||||
let textKey: string;
|
||||
let parsedEditorState: EditorState;
|
||||
let reactRoot: Root;
|
||||
let root: HTMLDivElement;
|
||||
let container: HTMLDivElement | null = null;
|
||||
let editor: LexicalEditor | null = null;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement('div');
|
||||
reactRoot = createRoot(container);
|
||||
root = document.createElement('div');
|
||||
root.setAttribute('contenteditable', 'true');
|
||||
document.body.appendChild(container);
|
||||
});
|
||||
|
||||
function useLexicalEditor(
|
||||
rootElementRef: React.RefObject<HTMLDivElement>,
|
||||
onError?: () => void,
|
||||
) {
|
||||
const editorInHook = useMemo(
|
||||
() =>
|
||||
createTestEditor({
|
||||
afterEach(() => {
|
||||
container?.remove();
|
||||
});
|
||||
|
||||
function init(onError?: () => void) {
|
||||
editor = createTestEditor({
|
||||
nodes: [],
|
||||
onError: onError || jest.fn(),
|
||||
theme: {
|
||||
@ -57,31 +54,9 @@ describe('table selection', () => {
|
||||
underline: 'editor-text-underline',
|
||||
},
|
||||
},
|
||||
}),
|
||||
[onError],
|
||||
);
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const rootElement = rootElementRef.current;
|
||||
|
||||
editorInHook.setRootElement(rootElement);
|
||||
}, [rootElementRef, editorInHook]);
|
||||
|
||||
return editorInHook;
|
||||
}
|
||||
|
||||
function init(onError?: () => void) {
|
||||
const ref = createRef<HTMLDivElement>();
|
||||
|
||||
function TestBase() {
|
||||
editor = useLexicalEditor(ref, onError);
|
||||
|
||||
return <div ref={ref} contentEditable={true} />;
|
||||
}
|
||||
|
||||
ReactTestUtils.act(() => {
|
||||
reactRoot.render(<TestBase />);
|
||||
});
|
||||
editor.setRootElement(root);
|
||||
}
|
||||
|
||||
async function update(fn: () => void) {
|
||||
@ -5,27 +5,16 @@
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/
|
||||
|
||||
import {CodeHighlightNode, CodeNode} from '@lexical/code';
|
||||
import {HashtagNode} from '@lexical/hashtag';
|
||||
import {AutoLinkNode, LinkNode} from '@lexical/link';
|
||||
import {ListItemNode, ListNode} from '@lexical/list';
|
||||
import {OverflowNode} from '@lexical/overflow';
|
||||
import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
|
||||
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
||||
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
|
||||
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
|
||||
import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
|
||||
import {HeadingNode, QuoteNode} from '@lexical/rich-text';
|
||||
import {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';
|
||||
import {
|
||||
applySelectionInputs,
|
||||
pasteHTML,
|
||||
} from '@lexical/selection/src/__tests__/utils';
|
||||
} from '@lexical/selection/__tests__/utils';
|
||||
import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
|
||||
import {LexicalEditor} from 'lexical';
|
||||
import {initializeClipboard, TestComposer} from 'lexical/__tests__/utils';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
|
||||
import {$createParagraphNode, $insertNodes, LexicalEditor} from 'lexical';
|
||||
import {createTestEditor, initializeClipboard} from 'lexical/__tests__/utils';
|
||||
|
||||
jest.mock('lexical/shared/environment', () => {
|
||||
const originalModule = jest.requireActual('lexical/shared/environment');
|
||||
@ -89,30 +78,18 @@ describe('LexicalEventHelpers', () => {
|
||||
let editor: LexicalEditor | null = null;
|
||||
|
||||
async function init() {
|
||||
function TestBase() {
|
||||
function TestPlugin(): null {
|
||||
[editor] = useLexicalComposerContext();
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<TestComposer
|
||||
config={{
|
||||
const config = {
|
||||
nodes: [
|
||||
LinkNode,
|
||||
HeadingNode,
|
||||
ListNode,
|
||||
ListItemNode,
|
||||
QuoteNode,
|
||||
CodeNode,
|
||||
TableNode,
|
||||
TableCellNode,
|
||||
TableRowNode,
|
||||
HashtagNode,
|
||||
CodeHighlightNode,
|
||||
AutoLinkNode,
|
||||
OverflowNode,
|
||||
],
|
||||
theme: {
|
||||
code: 'editor-code',
|
||||
@ -144,30 +121,26 @@ describe('LexicalEventHelpers', () => {
|
||||
underlineStrikethrough: 'editor-text-underlineStrikethrough',
|
||||
},
|
||||
},
|
||||
}}>
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
// eslint-disable-next-line jsx-a11y/aria-role, @typescript-eslint/no-explicit-any
|
||||
<ContentEditable role={null as any} spellCheck={null as any} />
|
||||
}
|
||||
placeholder={null}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
/>
|
||||
<AutoFocusPlugin />
|
||||
<TestPlugin />
|
||||
</TestComposer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
ReactTestUtils.act(() => {
|
||||
createRoot(container!).render(<TestBase />);
|
||||
editor = createTestEditor(config);
|
||||
registerRichText(editor);
|
||||
|
||||
const root = document.createElement('div');
|
||||
root.setAttribute('contenteditable', 'true');
|
||||
container?.append(root);
|
||||
|
||||
editor.setRootElement(root);
|
||||
|
||||
editor.update(() => {
|
||||
$insertNodes([$createParagraphNode()])
|
||||
});
|
||||
editor.commitUpdates();
|
||||
}
|
||||
|
||||
async function update(fn: () => void) {
|
||||
await ReactTestUtils.act(async () => {
|
||||
await editor!.update(fn);
|
||||
});
|
||||
editor?.commitUpdates();
|
||||
|
||||
return Promise.resolve().then();
|
||||
}
|
||||
@ -549,24 +522,6 @@ describe('LexicalEventHelpers', () => {
|
||||
],
|
||||
name: 'collapsible spaces with nested structures',
|
||||
},
|
||||
// TODO no proper support for divs #4465
|
||||
// {
|
||||
// expectedHTML:
|
||||
// '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">b</span></p>',
|
||||
// inputs: [
|
||||
// pasteHTML(`
|
||||
// <div>
|
||||
// <div>
|
||||
// a
|
||||
// </div>
|
||||
// <div>
|
||||
// b
|
||||
// </div>
|
||||
// </div>
|
||||
// `),
|
||||
// ],
|
||||
// name: 'collapsible spaces with nested structures (2)',
|
||||
// },
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
|
||||
@ -612,32 +567,6 @@ describe('LexicalEventHelpers', () => {
|
||||
],
|
||||
name: 'forced line break with tabs',
|
||||
},
|
||||
// The 3 below are not correct, they're missing the first \n -> <br> but that's a fault with
|
||||
// the implementation of DOMParser, it works correctly in Safari
|
||||
{
|
||||
expectedHTML:
|
||||
'<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
|
||||
inputs: [pasteHTML(`<pre>\na\r\nb\r\n</pre>`)],
|
||||
name: 'pre (no touchy) (1)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<pre>\na\r\nb\r\n</pre>
|
||||
`),
|
||||
],
|
||||
name: 'pre (no touchy) (2)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><br><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></p>',
|
||||
inputs: [
|
||||
pasteHTML(`<span style="white-space: pre">\na\r\nb\r\n</span>`),
|
||||
],
|
||||
name: 'white-space: pre (no touchy) (2)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph2</span></p>',
|
||||
@ -6,14 +6,39 @@
|
||||
*
|
||||
*/
|
||||
|
||||
import {
|
||||
$isRootTextContentEmpty,
|
||||
$isRootTextContentEmptyCurry,
|
||||
$rootTextContent,
|
||||
} from '@lexical/text';
|
||||
import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
|
||||
import {initializeUnitTest} from 'lexical/__tests__/utils';
|
||||
|
||||
export function $rootTextContent(): string {
|
||||
const root = $getRoot();
|
||||
|
||||
return root.getTextContent();
|
||||
}
|
||||
|
||||
export function $isRootTextContentEmpty(
|
||||
isEditorComposing: boolean,
|
||||
trim = true,
|
||||
): boolean {
|
||||
if (isEditorComposing) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let text = $rootTextContent();
|
||||
|
||||
if (trim) {
|
||||
text = text.trim();
|
||||
}
|
||||
|
||||
return text === '';
|
||||
}
|
||||
|
||||
export function $isRootTextContentEmptyCurry(
|
||||
isEditorComposing: boolean,
|
||||
trim?: boolean,
|
||||
): () => boolean {
|
||||
return () => $isRootTextContentEmpty(isEditorComposing, trim);
|
||||
}
|
||||
|
||||
describe('LexicalRootHelpers tests', () => {
|
||||
initializeUnitTest((testEnv) => {
|
||||
it('textContent', async () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user