colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lexical: Updated tests for node changes

This commit is contained in:
Dan Brown 2024-12-04 20:03:05 +00:00
parent 9fdd100f2d
commit d00cf6e1ba
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
17 changed files with 301 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/wysiwyg/lexical/core/__tests__/unit/HTMLCopyAndPaste.test.ts
View File

File diff suppressed because one or more lines are too long

18
resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalEditor.test.ts
View File

@ -974,7 +974,7 @@ describe('LexicalEditor tests', () => {
editable ? 'editable' : 'non-editable' editable ? 'editable' : 'non-editable'
})`, async () => { })`, async () => {
const JSON_EDITOR_STATE = const JSON_EDITOR_STATE =
'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}'; '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"type":"root","version":1}}';
init(); init();
const contentEditable = editor.getRootElement(); const contentEditable = editor.getRootElement();
editor.setEditable(editable); editor.setEditable(editable);
@ -1047,8 +1047,6 @@ describe('LexicalEditor tests', () => {
__cachedText: null, __cachedText: null,
__dir: null, __dir: null,
__first: paragraphKey, __first: paragraphKey,
__format: 0,
__indent: 0,
__key: 'root', __key: 'root',
__last: paragraphKey, __last: paragraphKey,
__next: null, __next: null,
@ -1059,10 +1057,11 @@ describe('LexicalEditor tests', () => {
__type: 'root', __type: 'root',
}); });
expect(parsedParagraph).toEqual({ expect(parsedParagraph).toEqual({
"__alignment": "",
__dir: null, __dir: null,
__first: textKey, __first: textKey,
__format: 0, __id: '',
__indent: 0, __inset: 0,
__key: paragraphKey, __key: paragraphKey,
__last: textKey, __last: textKey,
__next: null, __next: null,
@ -1070,7 +1069,6 @@ describe('LexicalEditor tests', () => {
__prev: null, __prev: null,
__size: 1, __size: 1,
__style: '', __style: '',
__textFormat: 0,
__textStyle: '', __textStyle: '',
__type: 'paragraph', __type: 'paragraph',
}); });
@ -1129,8 +1127,6 @@ describe('LexicalEditor tests', () => {
__cachedText: null, __cachedText: null,
__dir: null, __dir: null,
__first: paragraphKey, __first: paragraphKey,
__format: 0,
__indent: 0,
__key: 'root', __key: 'root',
__last: paragraphKey, __last: paragraphKey,
__next: null, __next: null,
@ -1141,10 +1137,11 @@ describe('LexicalEditor tests', () => {
__type: 'root', __type: 'root',
}); });
expect(parsedParagraph).toEqual({ expect(parsedParagraph).toEqual({
"__alignment": "",
__dir: null, __dir: null,
__first: textKey, __first: textKey,
__format: 0, __id: '',
__indent: 0, __inset: 0,
__key: paragraphKey, __key: paragraphKey,
__last: textKey, __last: textKey,
__next: null, __next: null,
@ -1152,7 +1149,6 @@ describe('LexicalEditor tests', () => {
__prev: null, __prev: null,
__size: 1, __size: 1,
__style: '', __style: '',
__textFormat: 0,
__textStyle: '', __textStyle: '',
__type: 'paragraph', __type: 'paragraph',
}); });

12
resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalEditorState.test.ts
View File

@ -54,8 +54,6 @@ describe('LexicalEditorState tests', () => {
__cachedText: 'foo', __cachedText: 'foo',
__dir: null, __dir: null,
__first: '1', __first: '1',
__format: 0,
__indent: 0,
__key: 'root', __key: 'root',
__last: '1', __last: '1',
__next: null, __next: null,
@ -66,10 +64,11 @@ describe('LexicalEditorState tests', () => {
__type: 'root', __type: 'root',
}); });
expect(paragraph).toEqual({ expect(paragraph).toEqual({
"__alignment": "",
__dir: null, __dir: null,
__first: '2', __first: '2',
__format: 0, __id: '',
__indent: 0, __inset: 0,
__key: '1', __key: '1',
__last: '2', __last: '2',
__next: null, __next: null,
@ -77,7 +76,6 @@ describe('LexicalEditorState tests', () => {
__prev: null, __prev: null,
__size: 1, __size: 1,
__style: '', __style: '',
__textFormat: 0,
__textStyle: '', __textStyle: '',
__type: 'paragraph', __type: 'paragraph',
}); });
@ -113,7 +111,7 @@ describe('LexicalEditorState tests', () => {
}); });
expect(JSON.stringify(editor.getEditorState().toJSON())).toEqual( expect(JSON.stringify(editor.getEditorState().toJSON())).toEqual(
`{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`, `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":null,"type":"paragraph","version":1,"id":"","alignment":"","inset":0,"textStyle":""}],"direction":null,"type":"root","version":1}}`,
); );
}); });
@ -140,8 +138,6 @@ describe('LexicalEditorState tests', () => {
__cachedText: '', __cachedText: '',
__dir: null, __dir: null,
__first: null, __first: null,
__format: 0,
__indent: 0,
__key: 'root', __key: 'root',
__last: null, __last: null,
__next: null, __next: null,

4
resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalSerialization.test.ts
View File

File diff suppressed because one or more lines are too long

2
resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalElementNode.test.ts
View File

@ -84,8 +84,6 @@ describe('LexicalElementNode tests', () => {
expect(node.exportJSON()).toStrictEqual({ expect(node.exportJSON()).toStrictEqual({
children: [], children: [],
direction: null, direction: null,
format: '',
indent: 0,
type: 'test_block', type: 'test_block',
version: 1, version: 1,
}); });

21
resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalParagraphNode.test.ts
View File

@ -48,11 +48,11 @@ describe('LexicalParagraphNode tests', () => {
// logic is in place in the corresponding importJSON method // logic is in place in the corresponding importJSON method
// to accomodate these changes. // to accomodate these changes.
expect(node.exportJSON()).toStrictEqual({ expect(node.exportJSON()).toStrictEqual({
alignment: '',
children: [], children: [],
direction: null, direction: null,
format: '', id: '',
indent: 0, inset: 0,
textFormat: 0,
textStyle: '', textStyle: '',
type: 'paragraph', type: 'paragraph',
version: 1, version: 1,
@ -127,6 +127,21 @@ describe('LexicalParagraphNode tests', () => {
}); });
}); });
test('id is supported', async () => {
const {editor} = testEnv;
let paragraphNode: ParagraphNode;
await editor.update(() => {
paragraphNode = new ParagraphNode();
paragraphNode.setId('testid')
$getRoot().append(paragraphNode);
});
expect(testEnv.innerHTML).toBe(
'<p id="testid"><br></p>',
);
});
test('$createParagraphNode()', async () => { test('$createParagraphNode()', async () => {
const {editor} = testEnv; const {editor} = testEnv;

2
resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalRootNode.test.ts
View File

@ -77,8 +77,6 @@ describe('LexicalRootNode tests', () => {
expect(node.exportJSON()).toStrictEqual({ expect(node.exportJSON()).toStrictEqual({
children: [], children: [],
direction: null, direction: null,
format: '',
indent: 0,
type: 'root', type: 'root',
version: 1, version: 1,
}); });

2
resources/js/wysiwyg/lexical/headless/__tests__/unit/LexicalHeadlessEditor.test.ts
View File

@ -206,7 +206,7 @@ describe('LexicalHeadlessEditor', () => {
cleanup(); cleanup();
expect(html).toBe( expect(html).toBe(
'<p>hello world</p>', '<p dir="ltr">hello world</p>',
); );
}); });
}); });

4
resources/js/wysiwyg/lexical/html/__tests__/unit/LexicalHtml.test.ts
View File

@ -176,7 +176,7 @@ describe('HTML', () => {
}); });
expect(html).toBe( expect(html).toBe(
'<p style="text-align: center;">Hello world!</p>', '<p class="align-center">Hello world!</p>',
); );
}); });
@ -206,7 +206,7 @@ describe('HTML', () => {
}); });
expect(html).toBe( expect(html).toBe(
'<p style="text-align: center;">Hello world!</p>', '<p class="align-center">Hello world!</p>',
); );
}); });
}); });

554
resources/js/wysiwyg/lexical/list/__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 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 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 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 value="1"></li>
`, `,
); );
const nestedListNode = new ListNode('bullet', 1); const nestedListNode = new ListNode('bullet', 1);
@ -142,7 +142,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual( expectHtmlToBeEqual(
domElement.outerHTML, domElement.outerHTML,
html` html`
<li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></li> <li value="1" style="list-style: none;"></li>
`, `,
); );
}); });
@ -486,53 +486,43 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">x</span>
</ul> </li>
</li> <li value="2">
<li value="1"> <span data-lexical-text="true">B</span>
<span data-lexical-text="true">x</span> </li>
</li> </ul>
<li value="2">
<span data-lexical-text="true">B</span>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">B</span>
</ul> </li>
</li> </ul>
<li value="1">
<span data-lexical-text="true">B</span>
</li>
</ul>
</div>
`, `,
); );
}); });
@ -566,53 +556,43 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <span data-lexical-text="true">A</span>
data-lexical-editor="true"> </li>
<ul> <li value="2">
<li value="1"> <span data-lexical-text="true">x</span>
<span data-lexical-text="true">A</span> </li>
</li> <li value="3" style="list-style: none;">
<li value="2"> <ul>
<span data-lexical-text="true">x</span> <li value="1">
</li> <span data-lexical-text="true">B</span>
<li value="3"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <span data-lexical-text="true">A</span>
data-lexical-editor="true"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">B</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
}); });
@ -650,57 +630,47 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">x</span>
</ul> </li>
</li> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">x</span> <li value="1">
</li> <span data-lexical-text="true">B</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> <li value="2">
<li value="1"> <span data-lexical-text="true">B</span>
<span data-lexical-text="true">A</span> </li>
</li> </ul>
<li value="2"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
}); });
@ -746,71 +716,61 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A1</span>
<li value="1"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A1</span> <li value="1">
</li> <span data-lexical-text="true">A2</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A2</span> </ul>
</li> </li>
</ul> <li value="1">
</li> <span data-lexical-text="true">x</span>
</ul> </li>
</li> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">x</span> <li value="1">
</li> <span data-lexical-text="true">B</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A1</span>
<li value="1"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A1</span> <li value="1">
</li> <span data-lexical-text="true">A2</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A2</span> <li value="2">
</li> <span data-lexical-text="true">B</span>
</ul> </li>
</li> </ul>
<li value="2"> </li>
<span data-lexical-text="true">B</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
}); });
@ -856,71 +816,61 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">x</span>
</ul> </li>
</li> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">x</span> <li value="1" style="list-style: none;">
</li> <ul>
<li value="2"> <li value="1">
<ul> <span data-lexical-text="true">B1</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B1</span> <li value="1">
</li> <span data-lexical-text="true">B2</span>
</ul> </li>
</li> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B2</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A</span>
<li value="1"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A</span> <li value="1">
</li> <span data-lexical-text="true">B1</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B1</span> <li value="2">
</li> <span data-lexical-text="true">B2</span>
</ul> </li>
</li> </ul>
<li value="2"> </li>
<span data-lexical-text="true">B2</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
}); });
@ -974,81 +924,71 @@ describe('LexicalListItemNode tests', () => {
}); });
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A1</span>
<li value="1"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A1</span> <li value="1">
</li> <span data-lexical-text="true">A2</span>
<li value="2"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">A2</span> </ul>
</li> </li>
</ul> <li value="1">
</li> <span data-lexical-text="true">x</span>
</ul> </li>
</li> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">x</span> <li value="1" style="list-style: none;">
</li> <ul>
<li value="2"> <li value="1">
<ul> <span data-lexical-text="true">B1</span>
<li value="1"> </li>
<ul> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B1</span> <li value="1">
</li> <span data-lexical-text="true">B2</span>
</ul> </li>
</li> </ul>
<li value="1"> </li>
<span data-lexical-text="true">B2</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
await editor.update(() => x.remove()); await editor.update(() => x.remove());
expectHtmlToBeEqual( expectHtmlToBeEqual(
testEnv.outerHTML, testEnv.innerHTML,
html` html`
<div <ul>
contenteditable="true" <li value="1" style="list-style: none;">
style="user-select: text; white-space: pre-wrap; word-break: break-word;" <ul>
data-lexical-editor="true"> <li value="1">
<ul> <span data-lexical-text="true">A1</span>
<li value="1"> </li>
<ul> <li value="2" style="list-style: none;">
<li value="1"> <ul>
<span data-lexical-text="true">A1</span> <li value="1">
</li> <span data-lexical-text="true">A2</span>
<li value="2"> </li>
<ul> <li value="2">
<li value="1"> <span data-lexical-text="true">B1</span>
<span data-lexical-text="true">A2</span> </li>
</li> </ul>
<li value="2"> </li>
<span data-lexical-text="true">B1</span> <li value="2">
</li> <span data-lexical-text="true">B2</span>
</ul> </li>
</li> </ul>
<li value="2"> </li>
<span data-lexical-text="true">B2</span> </ul>
</li>
</ul>
</li>
</ul>
</div>
`, `,
); );
}); });

19
resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListNode.test.ts
View File

@ -294,24 +294,5 @@ describe('LexicalListNode tests', () => {
expect(bulletList.__listType).toBe('bullet'); expect(bulletList.__listType).toBe('bullet');
}); });
}); });
test('ListNode.clone() without list type (backward compatibility)', async () => {
const {editor} = testEnv;
await editor.update(() => {
const olNode = ListNode.clone({
__key: '1',
__start: 1,
__tag: 'ol',
} as unknown as ListNode);
const ulNode = ListNode.clone({
__key: '1',
__start: 1,
__tag: 'ul',
} as unknown as ListNode);
expect(olNode.__listType).toBe('number');
expect(ulNode.__listType).toBe('bullet');
});
});
}); });
}); });

6
resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.ts
View File

@ -2605,7 +2605,7 @@ describe('LexicalSelection tests', () => {
return $createHeadingNode('h1'); return $createHeadingNode('h1');
}); });
expect(JSON.stringify(testEditor._pendingEditorState?.toJSON())).toBe( expect(JSON.stringify(testEditor._pendingEditorState?.toJSON())).toBe(
'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"children":[{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":3,"rowSpan":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":1,"rowSpan":1}],"direction":null,"format":"","indent":0,"type":"tablerow","version":1}],"direction":null,"format":"","indent":0,"type":"table","version":1},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"root","version":1}}', '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[{"children":[{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":3,"rowSpan":1,"styles":{},"alignment":""},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":1,"rowSpan":1,"styles":{},"alignment":""}],"direction":null,"type":"tablerow","version":1,"styles":{},"height":0}],"direction":null,"type":"table","version":1,"id":"","alignment":"","inset":0,"colWidths":[],"styles":{}},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"root","version":1}}',
); );
}); });
}); });
@ -2695,7 +2695,7 @@ describe('LexicalSelection tests', () => {
}); });
}); });
expect(element.innerHTML).toStrictEqual( expect(element.innerHTML).toStrictEqual(
`<h1><span data-lexical-text="true">1</span></h1><h1 style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">1.1</span></h1>`, `<h1><span data-lexical-text="true">1</span></h1><ul><li value="1"><h1><span data-lexical-text="true">1.1</span></h1></li></ul>`,
); );
}); });
@ -2734,7 +2734,7 @@ describe('LexicalSelection tests', () => {
}); });
}); });
expect(element.innerHTML).toStrictEqual( expect(element.innerHTML).toStrictEqual(
`<h1 style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">1.1</span></h1>`, `<ul><li value="1"><h1><span data-lexical-text="true">1.1</span></h1></li></ul>`,
); );
}); });
}); });

5
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts
View File

@ -113,9 +113,8 @@ describe('LexicalTableNode tests', () => {
$insertDataTransferForRichText(dataTransfer, selection, editor); $insertDataTransferForRichText(dataTransfer, selection, editor);
}); });
// Make sure paragraph is inserted inside empty cells // Make sure paragraph is inserted inside empty cells
const emptyCell = '<td><p><br></p></td>';
expect(testEnv.innerHTML).toBe( expect(testEnv.innerHTML).toBe(
`<table><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello there</span></p></td><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`, `<table style="border-collapse: collapse; table-layout: fixed; width: 468pt;"><colgroup><col><col></colgroup><tr style="height: 22.015pt;"><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello there</span></p></td><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">General Kenobi!</span></p></td></tr><tr style="height: 22.015pt;"><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Lexical is nice</span></p></td><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><br></p></td></tr></table>`,
); );
}); });
@ -136,7 +135,7 @@ describe('LexicalTableNode tests', () => {
$insertDataTransferForRichText(dataTransfer, selection, editor); $insertDataTransferForRichText(dataTransfer, selection, editor);
}); });
expect(testEnv.innerHTML).toBe( expect(testEnv.innerHTML).toBe(
`<table><tr style="height: 21px;"><td><p><strong data-lexical-text="true">Surface</strong></p></td><td><p><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><span data-lexical-text="true">Lexical</span></p></td><td><p><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`, `<table style="table-layout: fixed; font-size: 10pt; font-family: Arial; width: 0px; border-collapse: collapse;"><colgroup><col style="width: 100px;"><col style="width: 189px;"><col style="width: 171px;"></colgroup><tr style="height: 21px;"><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;"><p><strong data-lexical-text="true">Surface</strong></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; font-style: italic;"><p><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; text-decoration: underline; text-align: right;" class="align-right"><p><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom;"><p><span data-lexical-text="true">Lexical</span></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; text-decoration: line-through;"><p><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom;"><p><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
); );
}); });
}, },

8
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts
View File

@ -101,8 +101,6 @@ describe('table selection', () => {
__cachedText: null, __cachedText: null,
__dir: null, __dir: null,
__first: paragraphKey, __first: paragraphKey,
__format: 0,
__indent: 0,
__key: 'root', __key: 'root',
__last: paragraphKey, __last: paragraphKey,
__next: null, __next: null,
@ -113,10 +111,11 @@ describe('table selection', () => {
__type: 'root', __type: 'root',
}); });
expect(parsedParagraph).toEqual({ expect(parsedParagraph).toEqual({
__alignment: "",
__dir: null, __dir: null,
__first: textKey, __first: textKey,
__format: 0, __id: '',
__indent: 0, __inset: 0,
__key: paragraphKey, __key: paragraphKey,
__last: textKey, __last: textKey,
__next: null, __next: null,
@ -124,7 +123,6 @@ describe('table selection', () => {
__prev: null, __prev: null,
__size: 1, __size: 1,
__style: '', __style: '',
__textFormat: 0,
__textStyle: '', __textStyle: '',
__type: 'paragraph', __type: 'paragraph',
}); });

12
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts
View File

@ -176,7 +176,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Other side</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">I must have called</span></li></ul></div>', '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1"><span data-lexical-text="true">Other side</span></li><li value="2"><span data-lexical-text="true">I must have called</span></li></ul></div>',
inputs: [ inputs: [
pasteHTML( pasteHTML(
`<meta charset='utf-8'><ul><li>Other side</li><li>I must have called</li></ul>`, `<meta charset='utf-8'><ul><li>Other side</li><li>I must have called</li></ul>`,
@ -186,7 +186,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">To tell you</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">I’m sorry</span></li></ol></div>', '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ol class="editor-list-ol"><li value="1"><span data-lexical-text="true">To tell you</span></li><li value="2"><span data-lexical-text="true">I’m sorry</span></li></ol></div>',
inputs: [ inputs: [
pasteHTML( pasteHTML(
`<meta charset='utf-8'><ol><li>To tell you</li><li>I’m sorry</li></ol>`, `<meta charset='utf-8'><ol><li>To tell you</li><li>I’m sorry</li></ol>`,
@ -266,7 +266,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem"><span data-lexical-text="true">side</span></li></ul></div>', '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1"><span data-lexical-text="true">Hello</span></li><li value="2"><span data-lexical-text="true">from the other</span></li><li value="3"><span data-lexical-text="true">side</span></li></ul></div>',
inputs: [ inputs: [
pasteHTML( pasteHTML(
`<meta charset='utf-8'><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist>`, `<meta charset='utf-8'><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist>`,
@ -276,7 +276,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem"><span data-lexical-text="true">side</span></li></ul></div>', '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1"><span data-lexical-text="true">Hello</span></li><li value="2"><span data-lexical-text="true">from the other</span></li><li value="3"><span data-lexical-text="true">side</span></li></ul></div>',
inputs: [ inputs: [
pasteHTML( pasteHTML(
`<meta charset='utf-8'><doesnotexist><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist></doesnotexist>`, `<meta charset='utf-8'><doesnotexist><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist></doesnotexist>`,
@ -611,7 +611,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></li><li value="2" class="editor-listitem"><br></li><li value="3" class="editor-listitem"><span data-lexical-text="true">3</span></li></ol>', '<ol class="editor-list-ol"><li value="1"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></li><li value="2"><br></li><li value="3"><span data-lexical-text="true">3</span></li></ol>',
inputs: [ inputs: [
pasteHTML('<ol><li>1<div></div>2</li><li></li><li>3</li></ol>'), pasteHTML('<ol><li>1<div></div>2</li><li></li><li>3</li></ol>'),
], ],
@ -647,7 +647,7 @@ describe('LexicalEventHelpers', () => {
}, },
{ {
expectedHTML: expectedHTML:
'<ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">1</span></li><li value="2" class="editor-listitem"><br></li><li value="3" class="editor-listitem"><span data-lexical-text="true">3</span></li></ol>', '<ol class="editor-list-ol"><li value="1"><span data-lexical-text="true">1</span></li><li value="2"><br></li><li value="3"><span data-lexical-text="true">3</span></li></ol>',
inputs: [pasteHTML('<ol><li>1</li><li><br /></li><li>3</li></ol>')], inputs: [pasteHTML('<ol><li>1</li><li><br /></li><li>3</li></ol>')],
name: 'only br in a li', name: 'only br in a li',
}, },

4
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts
View File

@ -82,10 +82,10 @@ describe('LexicalUtils#splitNode', () => {
expectedHtml: expectedHtml:
'<ul>' + '<ul>' +
'<li>Before</li>' + '<li>Before</li>' +
'<li><ul><li>Hello</li></ul></li>' + '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
'</ul>' + '</ul>' +
'<ul>' + '<ul>' +
'<li><ul><li>world</li></ul></li>' + '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
'<li>After</li>' + '<li>After</li>' +
'</ul>', '</ul>',
initialHtml: initialHtml:

4
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts
View File

@ -56,11 +56,11 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
expectedHtml: expectedHtml:
'<ul>' + '<ul>' +
'<li>Before</li>' + '<li>Before</li>' +
'<li><ul><li>Hello</li></ul></li>' + '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
'</ul>' + '</ul>' +
'<test-decorator></test-decorator>' + '<test-decorator></test-decorator>' +
'<ul>' + '<ul>' +
'<li><ul><li>world</li></ul></li>' + '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
'<li>After</li>' + '<li>After</li>' +
'</ul>', '</ul>',
initialHtml: initialHtml: