webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Lexical: Adjusted handling of child/sibling list items on nesting

Browse Source 
Sibling/child items will now remain at the same visual level during
nesting/un-nested, so only the selected item level is visually altered.

Also added new model-based editor content matching system for tests.
This commit is contained in:
Dan Brown
2024-12-17 18:07:46 +00:00
parent fca8f928a3
commit f4005a139b
3 changed files with 183 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
resources/js/wysiwyg/utils/__tests__/lists.test.ts Normal file
View File

@ -0,0 +1,124 @@
import {
createTestContext, destroyFromContext,
dispatchKeydownEventForNode, expectNodeShapeToMatch,
} from "lexical/__tests__/utils";
import {
$createParagraphNode, $getRoot, LexicalEditor, LexicalNode,
ParagraphNode,
} from "lexical";
import {$createDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
import {EditorUiContext} from "../../ui/framework/core";
import {$htmlToBlockNodes} from "../nodes";
import {ListItemNode, ListNode} from "@lexical/list";
import {$nestListItem, $unnestListItem} from "../lists";
describe('List Utils', () => {
let context!: EditorUiContext;
let editor!: LexicalEditor;
beforeEach(() => {
context = createTestContext();
editor = context.editor;
});
afterEach(() => {
destroyFromContext(context);
});
describe('$nestListItem', () => {
test('nesting handles child items to leave at the same level', () => {
const input = `<ul>
<li>Inner A</li>
<li>Inner B <ul>
<li>Inner C</li>
</ul></li>
</ul>`;
let list!: ListNode;
editor.updateAndCommit(() => {
$getRoot().append(...$htmlToBlockNodes(editor, input));
list = $getRoot().getFirstChild() as ListNode;
});
editor.updateAndCommit(() => {
$nestListItem(list.getChildren()[1] as ListItemNode);
});
expectNodeShapeToMatch(editor, [
{
type: 'list',
children: [
{
type: 'listitem',
children: [
{text: 'Inner A'},
{
type: 'list',
children: [
{type: 'listitem', children: [{text: 'Inner B'}]},
{type: 'listitem', children: [{text: 'Inner C'}]},
]
}
]
},
]
}
]);
});
});
describe('$unnestListItem', () => {
test('middle in nested list converts to new parent item at same place', () => {
const input = `<ul>
<li>Nested list:<ul>
<li>Inner A</li>
<li>Inner B</li>
<li>Inner C</li>
</ul></li>
</ul>`;
let innerList!: ListNode;
editor.updateAndCommit(() => {
$getRoot().append(...$htmlToBlockNodes(editor, input));
innerList = (($getRoot().getFirstChild() as ListNode).getFirstChild() as ListItemNode).getLastChild() as ListNode;
});
editor.updateAndCommit(() => {
$unnestListItem(innerList.getChildren()[1] as ListItemNode);
});
expectNodeShapeToMatch(editor, [
{
type: 'list',
children: [
{
type: 'listitem',
children: [
{text: 'Nested list:'},
{
type: 'list',
children: [
{type: 'listitem', children: [{text: 'Inner A'}]},
],
}
],
},
{
type: 'listitem',
children: [
{text: 'Inner B'},
{
type: 'list',
children: [
{type: 'listitem', children: [{text: 'Inner C'}]},
],
}
],
}
]
}
]);
});
});
});