mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-11 06:10:03 +08:00
Lexical: Added tests to cover recent changes
Some checks failed
test-js / build (push) Has been cancelled
Some checks failed
test-js / build (push) Has been cancelled
Also updated list tests to new test process.
This commit is contained in:
@ -37,6 +37,7 @@ import {QuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
|
|||||||
import {DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
|
import {DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
|
||||||
import {EditorUiContext} from "../../../../ui/framework/core";
|
import {EditorUiContext} from "../../../../ui/framework/core";
|
||||||
import {EditorUIManager} from "../../../../ui/framework/manager";
|
import {EditorUIManager} from "../../../../ui/framework/manager";
|
||||||
|
import {ImageNode} from "@lexical/rich-text/LexicalImageNode";
|
||||||
|
|
||||||
type TestEnv = {
|
type TestEnv = {
|
||||||
readonly container: HTMLDivElement;
|
readonly container: HTMLDivElement;
|
||||||
@ -484,6 +485,9 @@ export function createTestContext(): EditorUiContext {
|
|||||||
const editor = createTestEditor({
|
const editor = createTestEditor({
|
||||||
namespace: 'testing',
|
namespace: 'testing',
|
||||||
theme: {},
|
theme: {},
|
||||||
|
nodes: [
|
||||||
|
ImageNode,
|
||||||
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
editor.setRootElement(editorDOM);
|
editor.setRootElement(editorDOM);
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import {ParagraphNode, TextNode} from 'lexical';
|
import {ParagraphNode, TextNode} from 'lexical';
|
||||||
import {initializeUnitTest} from 'lexical/__tests__/utils';
|
import {createTestContext} from 'lexical/__tests__/utils';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
$createListItemNode,
|
$createListItemNode,
|
||||||
@ -16,6 +16,7 @@ import {
|
|||||||
ListItemNode,
|
ListItemNode,
|
||||||
ListNode,
|
ListNode,
|
||||||
} from '../..';
|
} from '../..';
|
||||||
|
import {$htmlToBlockNodes} from "../../../../utils/nodes";
|
||||||
|
|
||||||
const editorConfig = Object.freeze({
|
const editorConfig = Object.freeze({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
@ -46,123 +47,122 @@ const editorConfig = Object.freeze({
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('LexicalListNode tests', () => {
|
describe('LexicalListNode tests', () => {
|
||||||
initializeUnitTest((testEnv) => {
|
test('ListNode.constructor', async () => {
|
||||||
test('ListNode.constructor', async () => {
|
const {editor} = createTestContext();
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
await editor.update(() => {
|
||||||
const listNode = $createListNode('bullet', 1);
|
const listNode = $createListNode('bullet', 1);
|
||||||
expect(listNode.getType()).toBe('list');
|
expect(listNode.getType()).toBe('list');
|
||||||
expect(listNode.getTag()).toBe('ul');
|
expect(listNode.getTag()).toBe('ul');
|
||||||
expect(listNode.getTextContent()).toBe('');
|
expect(listNode.getTextContent()).toBe('');
|
||||||
});
|
|
||||||
|
|
||||||
// @ts-expect-error
|
|
||||||
expect(() => $createListNode()).toThrow();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('ListNode.getTag()', async () => {
|
// @ts-expect-error
|
||||||
const {editor} = testEnv;
|
expect(() => $createListNode()).toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
await editor.update(() => {
|
test('ListNode.getTag()', async () => {
|
||||||
const ulListNode = $createListNode('bullet', 1);
|
const {editor} = createTestContext();
|
||||||
expect(ulListNode.getTag()).toBe('ul');
|
|
||||||
const olListNode = $createListNode('number', 1);
|
await editor.update(() => {
|
||||||
expect(olListNode.getTag()).toBe('ol');
|
const ulListNode = $createListNode('bullet', 1);
|
||||||
const checkListNode = $createListNode('check', 1);
|
expect(ulListNode.getTag()).toBe('ul');
|
||||||
expect(checkListNode.getTag()).toBe('ul');
|
const olListNode = $createListNode('number', 1);
|
||||||
});
|
expect(olListNode.getTag()).toBe('ol');
|
||||||
|
const checkListNode = $createListNode('check', 1);
|
||||||
|
expect(checkListNode.getTag()).toBe('ul');
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
test('ListNode.createDOM()', async () => {
|
test('ListNode.createDOM()', async () => {
|
||||||
const {editor} = testEnv;
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
await editor.update(() => {
|
await editor.update(() => {
|
||||||
const listNode = $createListNode('bullet', 1);
|
const listNode = $createListNode('bullet', 1);
|
||||||
expect(listNode.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
listNode.createDOM({
|
listNode.createDOM({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
theme: {
|
theme: {
|
||||||
list: {},
|
list: {},
|
||||||
},
|
},
|
||||||
}).outerHTML,
|
}).outerHTML,
|
||||||
).toBe('<ul></ul>');
|
).toBe('<ul></ul>');
|
||||||
expect(
|
expect(
|
||||||
listNode.createDOM({
|
listNode.createDOM({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
theme: {},
|
theme: {},
|
||||||
}).outerHTML,
|
}).outerHTML,
|
||||||
).toBe('<ul></ul>');
|
).toBe('<ul></ul>');
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
test('ListNode.createDOM() correctly applies classes to a nested ListNode', async () => {
|
test('ListNode.createDOM() correctly applies classes to a nested ListNode', async () => {
|
||||||
const {editor} = testEnv;
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
await editor.update(() => {
|
await editor.update(() => {
|
||||||
const listNode1 = $createListNode('bullet');
|
const listNode1 = $createListNode('bullet');
|
||||||
const listNode2 = $createListNode('bullet');
|
const listNode2 = $createListNode('bullet');
|
||||||
const listNode3 = $createListNode('bullet');
|
const listNode3 = $createListNode('bullet');
|
||||||
const listNode4 = $createListNode('bullet');
|
const listNode4 = $createListNode('bullet');
|
||||||
const listNode5 = $createListNode('bullet');
|
const listNode5 = $createListNode('bullet');
|
||||||
const listNode6 = $createListNode('bullet');
|
const listNode6 = $createListNode('bullet');
|
||||||
const listNode7 = $createListNode('bullet');
|
const listNode7 = $createListNode('bullet');
|
||||||
|
|
||||||
const listItem1 = $createListItemNode();
|
const listItem1 = $createListItemNode();
|
||||||
const listItem2 = $createListItemNode();
|
const listItem2 = $createListItemNode();
|
||||||
const listItem3 = $createListItemNode();
|
const listItem3 = $createListItemNode();
|
||||||
const listItem4 = $createListItemNode();
|
const listItem4 = $createListItemNode();
|
||||||
|
|
||||||
listNode1.append(listItem1);
|
listNode1.append(listItem1);
|
||||||
listItem1.append(listNode2);
|
listItem1.append(listNode2);
|
||||||
listNode2.append(listItem2);
|
listNode2.append(listItem2);
|
||||||
listItem2.append(listNode3);
|
listItem2.append(listNode3);
|
||||||
listNode3.append(listItem3);
|
listNode3.append(listItem3);
|
||||||
listItem3.append(listNode4);
|
listItem3.append(listNode4);
|
||||||
listNode4.append(listItem4);
|
listNode4.append(listItem4);
|
||||||
listNode4.append(listNode5);
|
listNode4.append(listNode5);
|
||||||
listNode5.append(listNode6);
|
listNode5.append(listNode6);
|
||||||
listNode6.append(listNode7);
|
listNode6.append(listNode7);
|
||||||
|
|
||||||
expect(listNode1.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode1.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
listNode1.createDOM({
|
listNode1.createDOM({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
theme: {
|
theme: {
|
||||||
list: {},
|
list: {},
|
||||||
},
|
},
|
||||||
}).outerHTML,
|
}).outerHTML,
|
||||||
).toBe('<ul></ul>');
|
).toBe('<ul></ul>');
|
||||||
expect(
|
expect(
|
||||||
listNode1.createDOM({
|
listNode1.createDOM({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
theme: {},
|
theme: {},
|
||||||
}).outerHTML,
|
}).outerHTML,
|
||||||
).toBe('<ul></ul>');
|
).toBe('<ul></ul>');
|
||||||
expect(listNode2.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode2.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-2"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-2"></ul>',
|
||||||
);
|
);
|
||||||
expect(listNode3.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode3.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-3"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-3"></ul>',
|
||||||
);
|
);
|
||||||
expect(listNode4.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode4.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-4"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-4"></ul>',
|
||||||
);
|
);
|
||||||
expect(listNode5.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode5.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-5"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-5"></ul>',
|
||||||
);
|
);
|
||||||
expect(listNode6.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode6.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-6"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-6"></ul>',
|
||||||
);
|
);
|
||||||
expect(listNode7.createDOM(editorConfig).outerHTML).toBe(
|
expect(listNode7.createDOM(editorConfig).outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-7"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-7"></ul>',
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
listNode5.createDOM({
|
listNode5.createDOM({
|
||||||
namespace: '',
|
namespace: '',
|
||||||
theme: {
|
theme: {
|
||||||
@ -176,123 +176,135 @@ describe('LexicalListNode tests', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
}).outerHTML,
|
}).outerHTML,
|
||||||
).toBe('<ul class="my-ul-list-class my-ul-list-class-2"></ul>');
|
).toBe('<ul class="my-ul-list-class my-ul-list-class-2"></ul>');
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
test('ListNode.updateDOM()', async () => {
|
test('ListNode.updateDOM()', async () => {
|
||||||
const {editor} = testEnv;
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
await editor.update(() => {
|
await editor.update(() => {
|
||||||
const listNode = $createListNode('bullet', 1);
|
const listNode = $createListNode('bullet', 1);
|
||||||
const domElement = listNode.createDOM(editorConfig);
|
const domElement = listNode.createDOM(editorConfig);
|
||||||
|
|
||||||
expect(domElement.outerHTML).toBe(
|
expect(domElement.outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
||||||
);
|
);
|
||||||
|
|
||||||
const newListNode = $createListNode('number', 1);
|
const newListNode = $createListNode('number', 1);
|
||||||
const result = newListNode.updateDOM(
|
const result = newListNode.updateDOM(
|
||||||
listNode,
|
listNode,
|
||||||
domElement,
|
domElement,
|
||||||
editorConfig,
|
editorConfig,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(result).toBe(true);
|
expect(result).toBe(true);
|
||||||
expect(domElement.outerHTML).toBe(
|
expect(domElement.outerHTML).toBe(
|
||||||
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
|
||||||
);
|
);
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('ListNode.append() should properly transform a ListItemNode', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const listNode = new ListNode('bullet', 1);
|
|
||||||
const listItemNode = new ListItemNode();
|
|
||||||
const textNode = new TextNode('Hello');
|
|
||||||
|
|
||||||
listItemNode.append(textNode);
|
|
||||||
const nodesToAppend = [listItemNode];
|
|
||||||
|
|
||||||
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
|
||||||
expect(listNode.getFirstChild()).toBe(listItemNode);
|
|
||||||
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('ListNode.append() should properly transform a ListNode', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const listNode = new ListNode('bullet', 1);
|
|
||||||
const nestedListNode = new ListNode('bullet', 1);
|
|
||||||
const listItemNode = new ListItemNode();
|
|
||||||
const textNode = new TextNode('Hello');
|
|
||||||
|
|
||||||
listItemNode.append(textNode);
|
|
||||||
nestedListNode.append(listItemNode);
|
|
||||||
|
|
||||||
const nodesToAppend = [nestedListNode];
|
|
||||||
|
|
||||||
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
|
||||||
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
|
|
||||||
expect(listNode.getFirstChild<ListItemNode>()!.getFirstChild()).toBe(
|
|
||||||
nestedListNode,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('ListNode.append() should properly transform a ParagraphNode', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const listNode = new ListNode('bullet', 1);
|
|
||||||
const paragraph = new ParagraphNode();
|
|
||||||
const textNode = new TextNode('Hello');
|
|
||||||
paragraph.append(textNode);
|
|
||||||
const nodesToAppend = [paragraph];
|
|
||||||
|
|
||||||
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
|
||||||
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
|
|
||||||
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('$createListNode()', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const listNode = $createListNode('bullet', 1);
|
|
||||||
const createdListNode = $createListNode('bullet');
|
|
||||||
|
|
||||||
expect(listNode.__type).toEqual(createdListNode.__type);
|
|
||||||
expect(listNode.__parent).toEqual(createdListNode.__parent);
|
|
||||||
expect(listNode.__tag).toEqual(createdListNode.__tag);
|
|
||||||
expect(listNode.__key).not.toEqual(createdListNode.__key);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('$isListNode()', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const listNode = $createListNode('bullet', 1);
|
|
||||||
|
|
||||||
expect($isListNode(listNode)).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('$createListNode() with tag name (backward compatibility)', async () => {
|
|
||||||
const {editor} = testEnv;
|
|
||||||
|
|
||||||
await editor.update(() => {
|
|
||||||
const numberList = $createListNode('number', 1);
|
|
||||||
const bulletList = $createListNode('bullet', 1);
|
|
||||||
expect(numberList.__listType).toBe('number');
|
|
||||||
expect(bulletList.__listType).toBe('bullet');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('ListNode.append() should properly transform a ListItemNode', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const listNode = new ListNode('bullet', 1);
|
||||||
|
const listItemNode = new ListItemNode();
|
||||||
|
const textNode = new TextNode('Hello');
|
||||||
|
|
||||||
|
listItemNode.append(textNode);
|
||||||
|
const nodesToAppend = [listItemNode];
|
||||||
|
|
||||||
|
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
||||||
|
expect(listNode.getFirstChild()).toBe(listItemNode);
|
||||||
|
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('ListNode.append() should properly transform a ListNode', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const listNode = new ListNode('bullet', 1);
|
||||||
|
const nestedListNode = new ListNode('bullet', 1);
|
||||||
|
const listItemNode = new ListItemNode();
|
||||||
|
const textNode = new TextNode('Hello');
|
||||||
|
|
||||||
|
listItemNode.append(textNode);
|
||||||
|
nestedListNode.append(listItemNode);
|
||||||
|
|
||||||
|
const nodesToAppend = [nestedListNode];
|
||||||
|
|
||||||
|
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
||||||
|
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
|
||||||
|
expect(listNode.getFirstChild<ListItemNode>()!.getFirstChild()).toBe(
|
||||||
|
nestedListNode,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('ListNode.append() should properly transform a ParagraphNode', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const listNode = new ListNode('bullet', 1);
|
||||||
|
const paragraph = new ParagraphNode();
|
||||||
|
const textNode = new TextNode('Hello');
|
||||||
|
paragraph.append(textNode);
|
||||||
|
const nodesToAppend = [paragraph];
|
||||||
|
|
||||||
|
expect(listNode.append(...nodesToAppend)).toBe(listNode);
|
||||||
|
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
|
||||||
|
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('$createListNode()', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const listNode = $createListNode('bullet', 1);
|
||||||
|
const createdListNode = $createListNode('bullet');
|
||||||
|
|
||||||
|
expect(listNode.__type).toEqual(createdListNode.__type);
|
||||||
|
expect(listNode.__parent).toEqual(createdListNode.__parent);
|
||||||
|
expect(listNode.__tag).toEqual(createdListNode.__tag);
|
||||||
|
expect(listNode.__key).not.toEqual(createdListNode.__key);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('$isListNode()', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const listNode = $createListNode('bullet', 1);
|
||||||
|
|
||||||
|
expect($isListNode(listNode)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('$createListNode() with tag name (backward compatibility)', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
await editor.update(() => {
|
||||||
|
const numberList = $createListNode('number', 1);
|
||||||
|
const bulletList = $createListNode('bullet', 1);
|
||||||
|
expect(numberList.__listType).toBe('number');
|
||||||
|
expect(bulletList.__listType).toBe('bullet');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('importDOM handles old editor expected task list format', async () => {
|
||||||
|
const {editor} = createTestContext();
|
||||||
|
|
||||||
|
let list!: ListNode;
|
||||||
|
editor.update(() => {
|
||||||
|
const nodes = $htmlToBlockNodes(editor, `<ul><li class="task-list-item"><input checked="" disabled="" type="checkbox"> A</li></ul>`);
|
||||||
|
list = nodes[0] as ListNode;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(list).toBeInstanceOf(ListNode);
|
||||||
|
expect(list.getListType()).toBe('check');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
createTestContext, destroyFromContext,
|
createTestContext, destroyFromContext,
|
||||||
dispatchKeydownEventForNode,
|
dispatchKeydownEventForNode,
|
||||||
dispatchKeydownEventForSelectedNode,
|
dispatchKeydownEventForSelectedNode, expectNodeShapeToMatch,
|
||||||
} from "lexical/__tests__/utils";
|
} from "lexical/__tests__/utils";
|
||||||
import {
|
import {
|
||||||
$createParagraphNode, $createTextNode,
|
$createParagraphNode, $createTextNode,
|
||||||
@ -13,6 +13,7 @@ import {registerKeyboardHandling} from "../keyboard-handling";
|
|||||||
import {registerRichText} from "@lexical/rich-text";
|
import {registerRichText} from "@lexical/rich-text";
|
||||||
import {EditorUiContext} from "../../ui/framework/core";
|
import {EditorUiContext} from "../../ui/framework/core";
|
||||||
import {$createListItemNode, $createListNode, ListItemNode, ListNode} from "@lexical/list";
|
import {$createListItemNode, $createListNode, ListItemNode, ListNode} from "@lexical/list";
|
||||||
|
import {$createImageNode, ImageNode} from "@lexical/rich-text/LexicalImageNode";
|
||||||
|
|
||||||
describe('Keyboard-handling service tests', () => {
|
describe('Keyboard-handling service tests', () => {
|
||||||
|
|
||||||
@ -127,4 +128,34 @@ describe('Keyboard-handling service tests', () => {
|
|||||||
expect(selectedNode?.getKey()).toBe(innerList.getChildren()[0].getKey());
|
expect(selectedNode?.getKey()).toBe(innerList.getChildren()[0].getKey());
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('Images: up on selected image creates new paragraph if none above', () => {
|
||||||
|
let image!: ImageNode;
|
||||||
|
editor.updateAndCommit(() => {
|
||||||
|
const root = $getRoot();
|
||||||
|
const imageWrap = $createParagraphNode();
|
||||||
|
image = $createImageNode('https://example.com/cat.png');
|
||||||
|
imageWrap.append(image);
|
||||||
|
root.append(imageWrap);
|
||||||
|
image.select();
|
||||||
|
});
|
||||||
|
|
||||||
|
expectNodeShapeToMatch(editor, [{
|
||||||
|
type: 'paragraph',
|
||||||
|
children: [
|
||||||
|
{type: 'image'}
|
||||||
|
],
|
||||||
|
}]);
|
||||||
|
|
||||||
|
dispatchKeydownEventForNode(image, editor, 'ArrowUp');
|
||||||
|
|
||||||
|
expectNodeShapeToMatch(editor, [{
|
||||||
|
type: 'paragraph',
|
||||||
|
}, {
|
||||||
|
type: 'paragraph',
|
||||||
|
children: [
|
||||||
|
{type: 'image'}
|
||||||
|
],
|
||||||
|
}]);
|
||||||
|
});
|
||||||
});
|
});
|
@ -79,22 +79,19 @@ function focusAdjacentOrInsertForSingleSelectNode(editor: LexicalEditor, event:
|
|||||||
const nearestBlock = $getNearestNodeBlockParent(node) || node;
|
const nearestBlock = $getNearestNodeBlockParent(node) || node;
|
||||||
let target = after ? nearestBlock.getNextSibling() : nearestBlock.getPreviousSibling();
|
let target = after ? nearestBlock.getNextSibling() : nearestBlock.getPreviousSibling();
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
editor.update(() => {
|
||||||
editor.update(() => {
|
if (!target) {
|
||||||
if (!target) {
|
target = $createParagraphNode();
|
||||||
target = $createParagraphNode();
|
if (after) {
|
||||||
if (after) {
|
nearestBlock.insertAfter(target)
|
||||||
nearestBlock.insertAfter(target)
|
} else {
|
||||||
} else {
|
nearestBlock.insertBefore(target);
|
||||||
nearestBlock.insertBefore(target);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
target.selectStart();
|
target.selectStart();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user