mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-29 23:22:34 +01:00
Lexical: Removed reconciler level direction handling
- Updated tests to consider changes
This commit is contained in:
Dan Brown
parent
dba8ab947f
commit
654a7a5d03
@ -42,14 +42,12 @@ import {
|
||||
$textContentRequiresDoubleLinebreakAtEnd,
|
||||
cloneDecorators,
|
||||
getElementByKeyOrThrow,
|
||||
getTextDirection,
|
||||
setMutatedNode,
|
||||
} from './LexicalUtils';
|
||||
|
||||
type IntentionallyMarkedAsDirtyElement = boolean;
|
||||
|
||||
let subTreeTextContent = '';
|
||||
let subTreeDirectionedTextContent = '';
|
||||
let subTreeTextFormat: number | null = null;
|
||||
let subTreeTextStyle: string = '';
|
||||
let editorTextContent = '';
|
||||
@ -59,7 +57,6 @@ let activeEditorNodes: RegisteredNodes;
|
||||
let treatAllNodesAsDirty = false;
|
||||
let activeEditorStateReadOnly = false;
|
||||
let activeMutationListeners: MutationListeners;
|
||||
let activeTextDirection: 'ltr' | 'rtl' | null = null;
|
||||
let activeDirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>;
|
||||
let activeDirtyLeaves: Set<NodeKey>;
|
||||
let activePrevNodeMap: NodeMap;
|
||||
@ -197,7 +194,7 @@ function $createNode(
|
||||
if (childrenSize !== 0) {
|
||||
const endIndex = childrenSize - 1;
|
||||
const children = createChildrenArray(node, activeNextNodeMap);
|
||||
$createChildrenWithDirection(children, endIndex, node, dom);
|
||||
$createChildren(children, node, 0, endIndex, dom, null);
|
||||
}
|
||||
const format = node.__format;
|
||||
|
||||
@ -222,10 +219,6 @@ function $createNode(
|
||||
}
|
||||
// Decorators are always non editable
|
||||
dom.contentEditable = 'false';
|
||||
} else if ($isTextNode(node)) {
|
||||
if (!node.isDirectionless()) {
|
||||
subTreeDirectionedTextContent += text;
|
||||
}
|
||||
}
|
||||
subTreeTextContent += text;
|
||||
editorTextContent += text;
|
||||
@ -261,19 +254,6 @@ function $createNode(
|
||||
return dom;
|
||||
}
|
||||
|
||||
function $createChildrenWithDirection(
|
||||
children: Array<NodeKey>,
|
||||
endIndex: number,
|
||||
element: ElementNode,
|
||||
dom: HTMLElement,
|
||||
): void {
|
||||
const previousSubTreeDirectionedTextContent = subTreeDirectionedTextContent;
|
||||
subTreeDirectionedTextContent = '';
|
||||
$createChildren(children, element, 0, endIndex, dom, null);
|
||||
reconcileBlockDirection(element, dom);
|
||||
subTreeDirectionedTextContent = previousSubTreeDirectionedTextContent;
|
||||
}
|
||||
|
||||
function $createChildren(
|
||||
children: Array<NodeKey>,
|
||||
element: ElementNode,
|
||||
@ -388,93 +368,16 @@ function reconcileParagraphStyle(element: ElementNode): void {
|
||||
}
|
||||
}
|
||||
|
||||
function reconcileBlockDirection(element: ElementNode, dom: HTMLElement): void {
|
||||
const previousSubTreeDirectionTextContent: string =
|
||||
// @ts-expect-error: internal field
|
||||
dom.__lexicalDirTextContent;
|
||||
// @ts-expect-error: internal field
|
||||
const previousDirection: string = dom.__lexicalDir;
|
||||
|
||||
if (
|
||||
previousSubTreeDirectionTextContent !== subTreeDirectionedTextContent ||
|
||||
previousDirection !== activeTextDirection
|
||||
) {
|
||||
const hasEmptyDirectionedTextContent = subTreeDirectionedTextContent === '';
|
||||
const direction = hasEmptyDirectionedTextContent
|
||||
? activeTextDirection
|
||||
: getTextDirection(subTreeDirectionedTextContent);
|
||||
|
||||
if (direction !== previousDirection) {
|
||||
const classList = dom.classList;
|
||||
const theme = activeEditorConfig.theme;
|
||||
let previousDirectionTheme =
|
||||
previousDirection !== null ? theme[previousDirection] : undefined;
|
||||
let nextDirectionTheme =
|
||||
direction !== null ? theme[direction] : undefined;
|
||||
|
||||
// Remove the old theme classes if they exist
|
||||
if (previousDirectionTheme !== undefined) {
|
||||
if (typeof previousDirectionTheme === 'string') {
|
||||
const classNamesArr = normalizeClassNames(previousDirectionTheme);
|
||||
previousDirectionTheme = theme[previousDirection] = classNamesArr;
|
||||
}
|
||||
|
||||
// @ts-ignore: intentional
|
||||
classList.remove(...previousDirectionTheme);
|
||||
}
|
||||
|
||||
if (
|
||||
direction === null ||
|
||||
(hasEmptyDirectionedTextContent && direction === 'ltr')
|
||||
) {
|
||||
// Remove direction
|
||||
dom.removeAttribute('dir');
|
||||
} else {
|
||||
// Apply the new theme classes if they exist
|
||||
if (nextDirectionTheme !== undefined) {
|
||||
if (typeof nextDirectionTheme === 'string') {
|
||||
const classNamesArr = normalizeClassNames(nextDirectionTheme);
|
||||
// @ts-expect-error: intentional
|
||||
nextDirectionTheme = theme[direction] = classNamesArr;
|
||||
}
|
||||
|
||||
if (nextDirectionTheme !== undefined) {
|
||||
classList.add(...nextDirectionTheme);
|
||||
}
|
||||
}
|
||||
|
||||
// Update direction
|
||||
dom.dir = direction;
|
||||
}
|
||||
|
||||
if (!activeEditorStateReadOnly) {
|
||||
const writableNode = element.getWritable();
|
||||
writableNode.__dir = direction;
|
||||
}
|
||||
}
|
||||
|
||||
activeTextDirection = direction;
|
||||
// @ts-expect-error: internal field
|
||||
dom.__lexicalDirTextContent = subTreeDirectionedTextContent;
|
||||
// @ts-expect-error: internal field
|
||||
dom.__lexicalDir = direction;
|
||||
}
|
||||
}
|
||||
|
||||
function $reconcileChildrenWithDirection(
|
||||
prevElement: ElementNode,
|
||||
nextElement: ElementNode,
|
||||
dom: HTMLElement,
|
||||
): void {
|
||||
const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
|
||||
subTreeDirectionedTextContent = '';
|
||||
subTreeTextFormat = null;
|
||||
subTreeTextStyle = '';
|
||||
$reconcileChildren(prevElement, nextElement, dom);
|
||||
reconcileBlockDirection(nextElement, dom);
|
||||
reconcileParagraphFormat(nextElement);
|
||||
reconcileParagraphStyle(nextElement);
|
||||
subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
|
||||
}
|
||||
|
||||
function createChildrenArray(
|
||||
@ -624,20 +527,9 @@ function $reconcileNode(
|
||||
subTreeTextContent += previousSubTreeTextContent;
|
||||
editorTextContent += previousSubTreeTextContent;
|
||||
}
|
||||
|
||||
// @ts-expect-error: internal field
|
||||
const previousSubTreeDirectionTextContent = dom.__lexicalDirTextContent;
|
||||
|
||||
if (previousSubTreeDirectionTextContent !== undefined) {
|
||||
subTreeDirectionedTextContent += previousSubTreeDirectionTextContent;
|
||||
}
|
||||
} else {
|
||||
const text = prevNode.getTextContent();
|
||||
|
||||
if ($isTextNode(prevNode) && !prevNode.isDirectionless()) {
|
||||
subTreeDirectionedTextContent += text;
|
||||
}
|
||||
|
||||
editorTextContent += text;
|
||||
subTreeTextContent += text;
|
||||
}
|
||||
@ -702,9 +594,6 @@ function $reconcileNode(
|
||||
if (decorator !== null) {
|
||||
reconcileDecorator(key, decorator);
|
||||
}
|
||||
} else if ($isTextNode(nextNode) && !nextNode.isDirectionless()) {
|
||||
// Handle text content, for LTR, LTR cases.
|
||||
subTreeDirectionedTextContent += text;
|
||||
}
|
||||
|
||||
subTreeTextContent += text;
|
||||
@ -871,11 +760,9 @@ export function $reconcileRoot(
|
||||
// The cache must be rebuilt during reconciliation to account for any changes.
|
||||
subTreeTextContent = '';
|
||||
editorTextContent = '';
|
||||
subTreeDirectionedTextContent = '';
|
||||
// Rather than pass around a load of arguments through the stack recursively
|
||||
// we instead set them as bindings within the scope of the module.
|
||||
treatAllNodesAsDirty = dirtyType === FULL_RECONCILE;
|
||||
activeTextDirection = null;
|
||||
activeEditor = editor;
|
||||
activeEditorConfig = editor._config;
|
||||
activeEditorNodes = editor._nodes;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -258,7 +258,7 @@ describe('LexicalEditor tests', () => {
|
||||
await Promise.resolve().then();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
'<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
|
||||
);
|
||||
|
||||
const initialEditorState = initialEditor.getEditorState();
|
||||
@ -276,7 +276,7 @@ describe('LexicalEditor tests', () => {
|
||||
|
||||
expect(editor.getEditorState()).toEqual(initialEditorState);
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
'<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -520,7 +520,7 @@ describe('LexicalEditor tests', () => {
|
||||
underlineListener();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">foo</strong></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">foo</strong></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -586,7 +586,7 @@ describe('LexicalEditor tests', () => {
|
||||
italicsListener();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">foo</strong></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">foo</strong></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -657,7 +657,7 @@ describe('LexicalEditor tests', () => {
|
||||
boldFooListener();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Foo!!</strong></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold" data-lexical-text="true">Foo!!</strong></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -875,7 +875,7 @@ describe('LexicalEditor tests', () => {
|
||||
editor.setRootElement(element);
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -897,7 +897,7 @@ describe('LexicalEditor tests', () => {
|
||||
await Promise.resolve().then();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
|
||||
);
|
||||
expect(errorListener).toHaveBeenCalledTimes(0);
|
||||
|
||||
@ -912,7 +912,7 @@ describe('LexicalEditor tests', () => {
|
||||
|
||||
expect(errorListener).toHaveBeenCalledTimes(1);
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -953,7 +953,7 @@ describe('LexicalEditor tests', () => {
|
||||
editorInstance.commitUpdates();
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Not changed</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">Not changed</span></p></div>',
|
||||
);
|
||||
|
||||
edContainer = document.createElement('span');
|
||||
@ -966,7 +966,7 @@ describe('LexicalEditor tests', () => {
|
||||
expect(rootListener).toHaveBeenCalledTimes(3);
|
||||
expect(updateListener).toHaveBeenCalledTimes(3);
|
||||
expect(container.innerHTML).toBe(
|
||||
'<span contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Change successful</span></p></span>',
|
||||
'<span contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">Change successful</span></p></span>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1046,7 +1046,7 @@ describe('LexicalEditor tests', () => {
|
||||
it('Parses the nodes of a stringified editor state', async () => {
|
||||
expect(parsedRoot).toEqual({
|
||||
__cachedText: null,
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: paragraphKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -1060,7 +1060,7 @@ describe('LexicalEditor tests', () => {
|
||||
__type: 'root',
|
||||
});
|
||||
expect(parsedParagraph).toEqual({
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: textKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -1128,7 +1128,7 @@ describe('LexicalEditor tests', () => {
|
||||
it('Parses the nodes of a stringified editor state', async () => {
|
||||
expect(parsedRoot).toEqual({
|
||||
__cachedText: null,
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: paragraphKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -1142,7 +1142,7 @@ describe('LexicalEditor tests', () => {
|
||||
__type: 'root',
|
||||
});
|
||||
expect(parsedParagraph).toEqual({
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: textKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -1275,7 +1275,7 @@ describe('LexicalEditor tests', () => {
|
||||
expect(editor._editorState._nodeMap.size).toBe(keys.length + 1); // + root
|
||||
expect(editor._keyToDOMMap.size).toBe(keys.length + 1); // + root
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">A</span><div dir="ltr"><span data-lexical-text="true">B</span></div></div></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">A</span><div><span data-lexical-text="true">B</span></div></div></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1310,7 +1310,7 @@ describe('LexicalEditor tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">B</span><div dir="ltr"><span data-lexical-text="true">A</span></div></div></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">B</span><div><span data-lexical-text="true">A</span></div></div></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1351,7 +1351,7 @@ describe('LexicalEditor tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">A</span><div dir="ltr"><span data-lexical-text="true">C</span></div></div><div dir="ltr"><span data-lexical-text="true">B</span></div></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">A</span><div><span data-lexical-text="true">C</span></div></div><div><span data-lexical-text="true">B</span></div></p></div>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2294,14 +2294,14 @@ describe('LexicalEditor tests', () => {
|
||||
});
|
||||
|
||||
expect(container.firstElementChild?.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Hello</span><a></a></p>',
|
||||
'<p><span data-lexical-text="true">Hello</span><a></a></p>',
|
||||
);
|
||||
});
|
||||
|
||||
it('reconciles state without root element', () => {
|
||||
editor = createTestEditor({});
|
||||
const state = editor.parseEditorState(
|
||||
`{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","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,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`,
|
||||
);
|
||||
editor.setEditorState(state);
|
||||
expect(editor._editorState).toBe(state);
|
||||
|
||||
@ -52,7 +52,7 @@ describe('LexicalEditorState tests', () => {
|
||||
|
||||
expect(root).toEqual({
|
||||
__cachedText: 'foo',
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: '1',
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -66,7 +66,7 @@ describe('LexicalEditorState tests', () => {
|
||||
__type: 'root',
|
||||
});
|
||||
expect(paragraph).toEqual({
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: '2',
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -113,7 +113,7 @@ describe('LexicalEditorState tests', () => {
|
||||
});
|
||||
|
||||
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":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","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,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -645,7 +645,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -667,7 +667,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -694,7 +694,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -730,7 +730,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -754,7 +754,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -795,7 +795,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">qux</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p><p dir="ltr"><span data-lexical-text="true">baz</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">qux</span></p><p><span data-lexical-text="true">bar</span></p><p><span data-lexical-text="true">baz</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -828,7 +828,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -879,7 +879,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p><p dir="ltr"><span data-lexical-text="true">qux</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p><p><span data-lexical-text="true">qux</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -915,7 +915,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">token</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">token</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -935,7 +935,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">segmented</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">segmented</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -958,7 +958,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">directionless</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">directionless</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.getEditorState().read(() => {
|
||||
@ -1057,7 +1057,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1089,7 +1089,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
let barTextNode: TextNode;
|
||||
|
||||
@ -1102,7 +1102,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p><p><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1110,7 +1110,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p><p dir="ltr"><br></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p><p><br></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1118,7 +1118,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1127,7 +1127,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1135,7 +1135,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1144,7 +1144,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1152,7 +1152,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1161,7 +1161,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1169,7 +1169,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1205,7 +1205,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a dir="ltr"><span data-lexical-text="true">world</span></a></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a><span data-lexical-text="true">world</span></a></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1224,7 +1224,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1233,7 +1233,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foobar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foobar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1241,7 +1241,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1250,7 +1250,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1258,7 +1258,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1267,7 +1267,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1275,7 +1275,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1284,7 +1284,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foobar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foobar</span></p></div>',
|
||||
);
|
||||
// TODO: add text direction validations
|
||||
});
|
||||
@ -1314,7 +1314,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span></p><p dir="ltr"><span data-lexical-text="true">B</span></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span></p><p><span data-lexical-text="true">B</span></p><p><span data-lexical-text="true">C</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1322,7 +1322,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span><p dir="ltr"><span data-lexical-text="true">B</span></p></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span><p><span data-lexical-text="true">B</span></p></p><p><span data-lexical-text="true">C</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1356,7 +1356,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span></p><p dir="ltr"><span data-lexical-text="true">B</span></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span></p><p><span data-lexical-text="true">B</span></p><p><span data-lexical-text="true">C</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1365,7 +1365,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p><p><br></p><p dir="ltr"><span data-lexical-text="true">C</span><span data-lexical-text="true">B</span><span data-lexical-text="true">A</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p><p><br></p><p><span data-lexical-text="true">C</span><span data-lexical-text="true">B</span><span data-lexical-text="true">A</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1384,7 +1384,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
let barTextNode;
|
||||
|
||||
@ -1397,7 +1397,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p><p><span data-lexical-text="true">bar</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1405,7 +1405,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1414,7 +1414,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">barfoo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">barfoo</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1422,7 +1422,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1431,7 +1431,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1439,7 +1439,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
@ -1448,7 +1448,7 @@ describe('LexicalNode tests', () => {
|
||||
});
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1456,7 +1456,7 @@ describe('LexicalNode tests', () => {
|
||||
const {editor} = testEnv;
|
||||
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
|
||||
);
|
||||
|
||||
await editor.update(() => {
|
||||
|
||||
@ -61,10 +61,10 @@ describe('LexicalSelection tests', () => {
|
||||
|
||||
const expectation =
|
||||
mode === 'start-of-paragraph'
|
||||
? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>'
|
||||
? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>'
|
||||
: mode === 'mid-paragraph'
|
||||
? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>'
|
||||
: '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a></p></div>';
|
||||
? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>'
|
||||
: '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a></p></div>';
|
||||
|
||||
expect(container.innerHTML).toBe(expectation);
|
||||
|
||||
@ -113,7 +113,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">x</span><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">x</span><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
@ -154,7 +154,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">ax</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">ax</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
@ -194,7 +194,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">ax</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">ax</span><a href="https://"><span data-lexical-text="true">b</span></a></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
@ -236,7 +236,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">xb</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">xb</span></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
@ -277,7 +277,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">xc</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">xc</span></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
@ -319,7 +319,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">x</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">x</span></p></div>',
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -55,7 +55,7 @@ describe('LexicalTabNode tests', () => {
|
||||
$insertDataTransferForPlainText(dataTransfer, selection);
|
||||
});
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
'<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -69,7 +69,7 @@ describe('LexicalTabNode tests', () => {
|
||||
$insertDataTransferForRichText(dataTransfer, selection, editor);
|
||||
});
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
'<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -89,7 +89,7 @@ describe('LexicalTabNode tests', () => {
|
||||
// $insertDataTransferForRichText(dataTransfer, selection, editor);
|
||||
// });
|
||||
// expect(testEnv.innerHTML).toBe(
|
||||
// '<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
// '<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
// );
|
||||
// });
|
||||
|
||||
@ -99,7 +99,7 @@ describe('LexicalTabNode tests', () => {
|
||||
// GDoc 2-liner hello\tworld (like previous test)
|
||||
dataTransfer.setData(
|
||||
'text/html',
|
||||
`<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-123"><p dir="ltr" style="line-height:1.38;margin-left: 36pt;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></p><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></b>`,
|
||||
`<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-123"><p style="line-height:1.38;margin-left: 36pt;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></p><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></b>`,
|
||||
);
|
||||
await editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
@ -107,7 +107,7 @@ describe('LexicalTabNode tests', () => {
|
||||
$insertDataTransferForRichText(dataTransfer, selection, editor);
|
||||
});
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p dir="ltr"><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
'<p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -121,7 +121,7 @@ describe('LexicalTabNode tests', () => {
|
||||
$getSelection()!.insertText('f');
|
||||
});
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">\t</span><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span></p>',
|
||||
'<p><span data-lexical-text="true">\t</span><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,22 +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 React from 'react';
|
||||
|
||||
// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
|
||||
// `React["startTransition"]` even if it's behind a feature detection of
|
||||
// `"startTransition" in React`. Moving this to a constant avoids the issue :/
|
||||
const START_TRANSITION = 'startTransition';
|
||||
|
||||
export function startTransition(callback: () => void) {
|
||||
if (START_TRANSITION in React) {
|
||||
React[START_TRANSITION](callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
@ -1,19 +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 {useEffect, useLayoutEffect} from 'react';
|
||||
import {CAN_USE_DOM} from 'lexical/shared/canUseDOM';
|
||||
|
||||
// This workaround is no longer necessary in React 19,
|
||||
// but we currently support React >=17.x
|
||||
// https://github.com/facebook/react/pull/26395
|
||||
const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
|
||||
? useLayoutEffect
|
||||
: useEffect;
|
||||
|
||||
export default useLayoutEffectImpl;
|
||||
@ -182,13 +182,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -215,13 +215,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">bar</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -245,13 +245,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -273,10 +273,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
data-lexical-editor="true">
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -301,10 +301,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -330,13 +330,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -361,7 +361,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -421,13 +421,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -445,10 +445,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -495,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -523,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -573,15 +573,15 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="3">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -601,12 +601,12 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -659,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -691,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -755,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -794,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -865,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -904,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -983,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">x</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1029,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A1</span>
|
||||
</li>
|
||||
<li value="2">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">A2</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">B2</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1087,13 +1087,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1117,14 +1117,14 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2"><br></li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="4" dir="ltr">
|
||||
<li value="4">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1148,13 +1148,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
<li value="4"><br></li>
|
||||
@ -1179,13 +1179,13 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
<li value="3" dir="ltr">
|
||||
<li value="3">
|
||||
<span data-lexical-text="true">three</span>
|
||||
</li>
|
||||
<li value="4"><br></li>
|
||||
@ -1211,7 +1211,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1231,7 +1231,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
|
||||
data-lexical-editor="true">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2"><br></li>
|
||||
@ -1308,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
<ul>
|
||||
<li value="1">
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1317,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1336,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
|
||||
editor.getRootElement()!.innerHTML,
|
||||
html`
|
||||
<ul>
|
||||
<li value="1" dir="ltr">
|
||||
<li value="1">
|
||||
<span data-lexical-text="true">one</span>
|
||||
</li>
|
||||
<li value="2" dir="ltr">
|
||||
<li value="2">
|
||||
<span data-lexical-text="true">two</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -117,7 +117,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
headingTextNode.select(5, 5);
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello world</span></h1></div>',
|
||||
);
|
||||
await editor.update(() => {
|
||||
const selection = $getSelection() as RangeSelection;
|
||||
@ -126,7 +126,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
expect(result.getDirection()).toEqual(headingNode.getDirection());
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1><h1><br></h1></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello world</span></h1><h1><br></h1></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -143,7 +143,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
headingTextNode2.selectEnd();
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1></div>',
|
||||
);
|
||||
await editor.update(() => {
|
||||
const selection = $getSelection() as RangeSelection;
|
||||
@ -152,7 +152,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
expect(result.getDirection()).toEqual(headingNode.getDirection());
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1><p><br></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1><p><br></p></div>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -187,7 +187,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
headingNode.append(textNode);
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
`<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 dir="ltr"><span data-lexical-text="true">${text}</span></h2></div>`,
|
||||
`<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2><span data-lexical-text="true">${text}</span></h2></div>`,
|
||||
);
|
||||
await editor.update(() => {
|
||||
const result = headingNode.insertNewAfter();
|
||||
@ -195,7 +195,7 @@ describe('LexicalHeadingNode tests', () => {
|
||||
expect(result.getDirection()).toEqual(headingNode.getDirection());
|
||||
});
|
||||
expect(testEnv.outerHTML).toBe(
|
||||
`<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 dir="ltr"><span data-lexical-text="true">${text}</span></h2><p><br></p></div>`,
|
||||
`<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2><span data-lexical-text="true">${text}</span></h2><p><br></p></div>`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -250,7 +250,7 @@ describe('LexicalSelection tests', () => {
|
||||
const suite = [
|
||||
{
|
||||
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></div>',
|
||||
'<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">Hello</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -268,7 +268,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello</strong></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -288,7 +288,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<em class="editor-text-italic" data-lexical-text="true">Hello</em></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -308,7 +308,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Hello</strong></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -329,7 +329,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<span class="editor-text-underline" data-lexical-text="true">Hello</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -349,7 +349,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<span class="editor-text-strikethrough" data-lexical-text="true">Hello</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -369,7 +369,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
|
||||
'<span class="editor-text-underlineStrikethrough" data-lexical-text="true">Hello</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
@ -411,7 +411,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">Dominic Gannaway</span>' +
|
||||
'</p></div>',
|
||||
expectedSelection: {
|
||||
@ -425,7 +425,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">Dominic Gannaway</span>' +
|
||||
'</p></div>',
|
||||
expectedSelection: {
|
||||
@ -443,7 +443,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">Dominic Gannaway</span>' +
|
||||
'</p></div>',
|
||||
expectedSelection: {
|
||||
@ -457,7 +457,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">Dominic Gannaway</span>' +
|
||||
'</p></div>',
|
||||
expectedSelection: {
|
||||
@ -477,7 +477,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello world</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -501,10 +501,10 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -529,11 +529,11 @@ describe('LexicalSelection tests', () => {
|
||||
{
|
||||
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">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<span data-lexical-text="true">He</span>' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">llo</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">wo</strong>' +
|
||||
'<span data-lexical-text="true">rld</span>' +
|
||||
'</p>' +
|
||||
@ -557,7 +557,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<span data-lexical-text="true">Hello </span>' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
|
||||
'</p>' +
|
||||
@ -582,7 +582,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello</strong>' +
|
||||
'<span data-lexical-text="true"> world</span>' +
|
||||
'</p>' +
|
||||
@ -608,7 +608,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello</strong><strong class="editor-text-bold" data-lexical-text="true"> world</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -634,7 +634,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello </strong><strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -660,7 +660,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello</strong><span data-lexical-text="true"> world</span>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -686,7 +686,7 @@ describe('LexicalSelection tests', () => {
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
'<p class="editor-paragraph" dir="ltr">' +
|
||||
'<p class="editor-paragraph">' +
|
||||
'<strong class="editor-text-bold" data-lexical-text="true">Hello </strong><strong class="editor-text-bold" data-lexical-text="true">beautiful</strong><strong class="editor-text-bold" data-lexical-text="true"> world</strong>' +
|
||||
'</p>' +
|
||||
'<p class="editor-paragraph"><br></p>' +
|
||||
@ -764,7 +764,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
].flatMap(({whitespaceCharacter, whitespaceName}) => [
|
||||
{
|
||||
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${printWhitespace(
|
||||
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">Hello${printWhitespace(
|
||||
whitespaceCharacter,
|
||||
)}</span></p></div>`,
|
||||
expectedSelection: {
|
||||
@ -780,7 +780,7 @@ describe('LexicalSelection tests', () => {
|
||||
name: `Type two words separated by a ${whitespaceName}, delete word backward from end`,
|
||||
},
|
||||
{
|
||||
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">${printWhitespace(
|
||||
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">${printWhitespace(
|
||||
whitespaceCharacter,
|
||||
)}world</span></p></div>`,
|
||||
expectedSelection: {
|
||||
@ -798,7 +798,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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></div>',
|
||||
'<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">Hello</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 5,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -814,7 +814,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">world</span></p></div>',
|
||||
'<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">world</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 0,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -830,7 +830,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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 world</span></p></div>',
|
||||
'<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">Hello world</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 11,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -842,7 +842,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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></div>',
|
||||
'<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">Hello </span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 6,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -859,7 +859,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">this is weird test</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 0,
|
||||
@ -876,7 +876,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">' +
|
||||
'<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">Hello </span>' +
|
||||
'<span data-lexical-text="true">Bob</span>' +
|
||||
'</p></div>',
|
||||
@ -897,7 +897,7 @@ describe('LexicalSelection tests', () => {
|
||||
},
|
||||
{
|
||||
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">ABD</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">EFG</span></p></div>',
|
||||
'<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">ABD</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">EFG</span></p></div>',
|
||||
expectedSelection: {
|
||||
anchorOffset: 3,
|
||||
anchorPath: [0, 0, 0],
|
||||
@ -1883,7 +1883,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome</strong></p><p dir="ltr"><span data-lexical-text="true"> world</span></p>',
|
||||
'<p><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome</strong></p><p><span data-lexical-text="true"> world</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1931,7 +1931,7 @@ describe('LexicalSelection tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome </strong></p><p dir="ltr"><span data-lexical-text="true">beautiful</span><strong data-lexical-text="true"> world</strong></p>',
|
||||
'<p><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome </strong></p><p><span data-lexical-text="true">beautiful</span><strong data-lexical-text="true"> world</strong></p>',
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1827,7 +1827,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
'<p><span data-lexical-text="true">foo</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1868,7 +1868,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foobar</span></p>',
|
||||
'<p><span data-lexical-text="true">foobar</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1913,7 +1913,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">h</span><a href="https://" dir="ltr"><span data-lexical-text="true">ello worl</span></a><span data-lexical-text="true">d</span></p>',
|
||||
'<p><span data-lexical-text="true">h</span><a href="https://"><span data-lexical-text="true">ello worl</span></a><span data-lexical-text="true">d</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -1956,7 +1956,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<h1 dir="ltr"><span data-lexical-text="true">foo</span></h1>',
|
||||
'<h1><span data-lexical-text="true">foo</span></h1>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1999,7 +1999,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Existing text...foo</span></p>',
|
||||
'<p><span data-lexical-text="true">Existing text...foo</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2044,7 +2044,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Existing text...foobar</span></p>',
|
||||
'<p><span data-lexical-text="true">Existing text...foobar</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2091,7 +2091,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Existing text...foo</span></p>',
|
||||
'<p><span data-lexical-text="true">Existing text...foo</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2162,7 +2162,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">AB</span><em data-lexical-text="true">C</em><span data-lexical-text="true">DE</span></p>',
|
||||
'<p><span data-lexical-text="true">AB</span><em data-lexical-text="true">C</em><span data-lexical-text="true">DE</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2205,7 +2205,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
'<p><span data-lexical-text="true">foo</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2252,7 +2252,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foo</span><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a></p>',
|
||||
'<p><span data-lexical-text="true">foo</span><a href="https://"><span data-lexical-text="true">link</span></a></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2299,7 +2299,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
|
||||
'<p><a href="https://"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2324,7 +2324,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
|
||||
// TODO #5109 ElementNode should have a way to control when other nodes can be inserted inside
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p><a href="https://lexical.dev/" dir="ltr"><br><span data-lexical-text="true">Lexical</span></a></p>',
|
||||
'<p><a href="https://lexical.dev/"><br><span data-lexical-text="true">Lexical</span></a></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2371,7 +2371,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
|
||||
'<p><span data-lexical-text="true">foo</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2421,7 +2421,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">foo</span><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a></p>',
|
||||
'<p><span data-lexical-text="true">foo</span><a href="https://"><span data-lexical-text="true">link</span></a></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2471,7 +2471,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
|
||||
'<p><a href="https://"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -2491,7 +2491,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
$insertNodes([linkNode]);
|
||||
});
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p><a href="https://lexical.dev" dir="ltr"><span data-lexical-text="true">Lexical</span></a></p>',
|
||||
'<p><a href="https://lexical.dev"><span data-lexical-text="true">Lexical</span></a></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2511,7 +2511,7 @@ describe('LexicalSelectionHelpers tests', () => {
|
||||
$insertNodes([linkNode, textNode2]);
|
||||
});
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p><a href="https://lexical.dev" dir="ltr"><span data-lexical-text="true">Lexical</span></a><span data-lexical-text="true">...</span></p>',
|
||||
'<p><a href="https://lexical.dev"><span data-lexical-text="true">Lexical</span></a><span data-lexical-text="true">...</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2604,9 +2604,9 @@ describe('insertNodes', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">Text before</span></p>' +
|
||||
'<p><span data-lexical-text="true">Text before</span></p>' +
|
||||
'<span data-lexical-decorator="true" contenteditable="false"></span>' +
|
||||
'<p dir="ltr"><span data-lexical-text="true">Text after</span></p>',
|
||||
'<p><span data-lexical-text="true">Text after</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2678,7 +2678,7 @@ describe('insertNodes', () => {
|
||||
});
|
||||
editor.getEditorState().read(() => {
|
||||
expect(element.innerHTML).toBe(
|
||||
'<h1 dir="ltr"><span data-lexical-text="true">heading</span></h1><p><br></p>',
|
||||
'<h1><span data-lexical-text="true">heading</span></h1><p><br></p>',
|
||||
);
|
||||
const selectedNode = ($getSelection() as RangeSelection).anchor.getNode();
|
||||
expect($isParagraphNode(selectedNode)).toBeTruthy();
|
||||
@ -2736,8 +2736,8 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">a</span>' +
|
||||
'<a href="https://" dir="ltr">' +
|
||||
'<p><span data-lexical-text="true">a</span>' +
|
||||
'<a href="https://">' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
|
||||
'</a>' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
|
||||
@ -2789,8 +2789,8 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">a</span></p>' +
|
||||
'<p dir="ltr"><span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
|
||||
'<p><span data-lexical-text="true">a</span></p>' +
|
||||
'<p><span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -2838,9 +2838,9 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr">' +
|
||||
'<p>' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">a</span>' +
|
||||
'<a href="https://" dir="ltr">' +
|
||||
'<a href="https://">' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
|
||||
'</a>' +
|
||||
'</p>',
|
||||
@ -2891,9 +2891,9 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr">' +
|
||||
'<p>' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">a</span>' +
|
||||
'<a href="https://" dir="ltr">' +
|
||||
'<a href="https://">' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
|
||||
'</a>' +
|
||||
'</p>',
|
||||
@ -2935,7 +2935,7 @@ describe('$patchStyleText', () => {
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p>' +
|
||||
'<a href="https://" dir="ltr">' +
|
||||
'<a href="https://">' +
|
||||
'<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
|
||||
'</a>' +
|
||||
'</p>',
|
||||
@ -2976,7 +2976,7 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr"><span data-lexical-text="true">text</span></p>',
|
||||
'<p><span data-lexical-text="true">text</span></p>',
|
||||
);
|
||||
});
|
||||
|
||||
@ -3115,7 +3115,7 @@ describe('$patchStyleText', () => {
|
||||
});
|
||||
|
||||
expect(element.innerHTML).toBe(
|
||||
'<p dir="ltr">' +
|
||||
'<p>' +
|
||||
'<strong data-lexical-text="true">fir</strong>' +
|
||||
'<strong style="font-size: 15px;" data-lexical-text="true">st</strong>' +
|
||||
'<span style="font-size: 15px;" data-lexical-text="true">second</span>' +
|
||||
|
||||
@ -102,7 +102,7 @@ describe('LexicalTableNode tests', () => {
|
||||
const dataTransfer = new DataTransferMock();
|
||||
dataTransfer.setData(
|
||||
'text/html',
|
||||
'<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed;width:468pt"><colgroup><col /><col /></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
|
||||
'<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed;width:468pt"><colgroup><col /><col /></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
|
||||
);
|
||||
await editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
@ -115,7 +115,7 @@ describe('LexicalTableNode tests', () => {
|
||||
// Make sure paragraph is inserted inside empty cells
|
||||
const emptyCell = '<td><p><br></p></td>';
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
`<table><tr><td><p dir="ltr"><span data-lexical-text="true">Hello there</span></p></td><td><p dir="ltr"><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p dir="ltr"><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
|
||||
`<table><tr><td><p><span data-lexical-text="true">Hello there</span></p></td><td><p><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -125,7 +125,7 @@ describe('LexicalTableNode tests', () => {
|
||||
const dataTransfer = new DataTransferMock();
|
||||
dataTransfer.setData(
|
||||
'text/html',
|
||||
'<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{"1":2,"2":"Surface"}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{"1":2,"2":"MWP_WORK_LS_COMPOSER"}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{"1":3,"3":77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"Lexical"}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{"1":2,"2":"XDS_RICH_TEXT_AREA"}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"sdvd sdfvsfs"}" data-sheets-textstyleruns="{"1":0}{"1":5,"2":{"5":1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
|
||||
'<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{"1":2,"2":"Surface"}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{"1":2,"2":"MWP_WORK_LS_COMPOSER"}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{"1":3,"3":77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"Lexical"}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{"1":2,"2":"XDS_RICH_TEXT_AREA"}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"sdvd sdfvsfs"}" data-sheets-textstyleruns="{"1":0}{"1":5,"2":{"5":1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
|
||||
);
|
||||
await editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
@ -136,7 +136,7 @@ describe('LexicalTableNode tests', () => {
|
||||
$insertDataTransferForRichText(dataTransfer, selection, editor);
|
||||
});
|
||||
expect(testEnv.innerHTML).toBe(
|
||||
`<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>`,
|
||||
`<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>`,
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
@ -99,7 +99,7 @@ describe('table selection', () => {
|
||||
it('Parses the nodes of a stringified editor state', async () => {
|
||||
expect(parsedRoot).toEqual({
|
||||
__cachedText: null,
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: paragraphKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
@ -113,7 +113,7 @@ describe('table selection', () => {
|
||||
__type: 'root',
|
||||
});
|
||||
expect(parsedParagraph).toEqual({
|
||||
__dir: 'ltr',
|
||||
__dir: null,
|
||||
__first: textKey,
|
||||
__format: 0,
|
||||
__indent: 0,
|
||||
|
||||
@ -156,25 +156,25 @@ describe('LexicalEventHelpers', () => {
|
||||
const suite = [
|
||||
{
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1" dir="ltr"><span data-lexical-text="true">Hello</span></h1></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1"><span data-lexical-text="true">Hello</span></h1></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><h1>Hello</h1>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML h1 element',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 class="editor-heading-h2" dir="ltr"><span data-lexical-text="true">From</span></h2></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 class="editor-heading-h2"><span data-lexical-text="true">From</span></h2></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><h2>From</h2>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML h2 element',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h3 class="editor-heading-h3" dir="ltr"><span data-lexical-text="true">The</span></h3></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h3 class="editor-heading-h3"><span data-lexical-text="true">The</span></h3></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><h3>The</h3>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML h3 element',
|
||||
},
|
||||
{
|
||||
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" dir="ltr"><span data-lexical-text="true">Other side</span></li><li value="2" class="editor-listitem" dir="ltr"><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" 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>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><ul><li>Other side</li><li>I must have called</li></ul>`,
|
||||
@ -184,7 +184,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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" dir="ltr"><span data-lexical-text="true">To tell you</span></li><li value="2" class="editor-listitem" dir="ltr"><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" 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>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><ol><li>To tell you</li><li>I’m sorry</li></ol>`,
|
||||
@ -194,37 +194,37 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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 thousand times</span></p></div>',
|
||||
'<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">A thousand times</span></p></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'>A thousand times`)],
|
||||
name: 'should produce the correct editor state from pasted DOM Text Node',
|
||||
},
|
||||
{
|
||||
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"><strong class="editor-text-bold" data-lexical-text="true">Bold</strong></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">Bold</strong></p></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><b>Bold</b>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML b element',
|
||||
},
|
||||
{
|
||||
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"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><i>Italic</i>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML i element',
|
||||
},
|
||||
{
|
||||
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"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><em>Italic</em>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML em element',
|
||||
},
|
||||
{
|
||||
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 class="editor-text-underline" data-lexical-text="true">Underline</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-underline" data-lexical-text="true">Underline</span></p></div>',
|
||||
inputs: [pasteHTML(`<meta charset='utf-8'><u>Underline</u>`)],
|
||||
name: 'should produce the correct editor state from a pasted HTML u element',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1" dir="ltr"><span data-lexical-text="true">Lyrics to Hello by Adele</span></h1><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">A thousand times</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1"><span data-lexical-text="true">Lyrics to Hello by Adele</span></h1><p class="editor-paragraph"><span data-lexical-text="true">A thousand times</span></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><h1>Lyrics to Hello by Adele</h1>A thousand times`,
|
||||
@ -234,7 +234,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook</span></a></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><a href="https://facebook.com"><span data-lexical-text="true">Facebook</span></a></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><a href="https://facebook.com">Facebook</a>`,
|
||||
@ -244,7 +244,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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">Welcome to</span><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook!</span></a></p></div>',
|
||||
'<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">Welcome to</span><a href="https://facebook.com"><span data-lexical-text="true">Facebook!</span></a></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'>Welcome to<a href="https://facebook.com">Facebook!</a>`,
|
||||
@ -254,7 +254,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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">Welcome to</span><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook!</span></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
|
||||
'<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">Welcome to</span><a href="https://facebook.com"><span data-lexical-text="true">Facebook!</span></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'>Welcome to<a href="https://facebook.com">Facebook!</a>We hope you like it here.`,
|
||||
@ -264,7 +264,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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" dir="ltr"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem" dir="ltr"><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" 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>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist>`,
|
||||
@ -274,7 +274,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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" dir="ltr"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem" dir="ltr"><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" 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>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'><doesnotexist><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist></doesnotexist>`,
|
||||
@ -284,7 +284,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
|
||||
'<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">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'>Welcome to<b><a href="https://facebook.com">Facebook!</a></b>We hope you like it here.`,
|
||||
@ -294,7 +294,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold" data-lexical-text="true">We hope you like it here.</strong></p></div>',
|
||||
'<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">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold" data-lexical-text="true">We hope you like it here.</strong></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'>Welcome to<b><a href="https://facebook.com">Facebook!</a>We hope you like it here.</b>`,
|
||||
@ -304,7 +304,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">We hope you like it here.</strong></p></div>',
|
||||
'<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">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">We hope you like it here.</strong></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<meta charset='utf-8'>Welcome to<b><i><a href="https://facebook.com">Facebook!</a>We hope you like it here.</i></b>`,
|
||||
@ -330,7 +330,7 @@ describe('LexicalEventHelpers', () => {
|
||||
const suite = [
|
||||
{
|
||||
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">Get schwifty!</span></p></div>',
|
||||
'<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">Get schwifty!</span></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<b style="font-weight:normal;" id="docs-internal-guid-2c706577-7fff-f54a-fe65-12f480020fac"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
|
||||
@ -340,7 +340,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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"><strong class="editor-text-bold" data-lexical-text="true">Get schwifty!</strong></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">Get schwifty!</strong></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
|
||||
@ -350,7 +350,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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"><em class="editor-text-italic" data-lexical-text="true">Get schwifty!</em></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Get schwifty!</em></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
|
||||
@ -360,7 +360,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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 class="editor-text-strikethrough" data-lexical-text="true">Get schwifty!</span></p></div>',
|
||||
'<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-strikethrough" data-lexical-text="true">Get schwifty!</span></p></div>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:line-through;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
|
||||
@ -386,20 +386,20 @@ describe('LexicalEventHelpers', () => {
|
||||
const suite = [
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
|
||||
inputs: [pasteHTML('<span>hello world</span>')],
|
||||
name: 'inline hello world',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
|
||||
inputs: [pasteHTML('<span> hello </span>world ')],
|
||||
name: 'inline hello world (2)',
|
||||
},
|
||||
{
|
||||
// MS Office got it right
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true"> hello world</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true"> hello world</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(' <span style="white-space: pre"> hello </span> world '),
|
||||
],
|
||||
@ -407,19 +407,19 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true"> a b</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">c </span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true"> a b</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">c </span></p>',
|
||||
inputs: [pasteHTML('<p style="white-space: pre"> a b\tc </p>')],
|
||||
name: 'white-space: pre (1) (no touchy)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a b c</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a b c</span></p>',
|
||||
inputs: [pasteHTML('<p>\ta\tb <span>c\t</span>\t</p>')],
|
||||
name: 'tabs are collapsed',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<div>
|
||||
@ -432,7 +432,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">hello world</strong></p>',
|
||||
'<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">hello world</strong></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<div>
|
||||
@ -447,7 +447,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a </span><strong class="editor-text-bold" data-lexical-text="true">b</strong><span data-lexical-text="true"> c</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a </span><strong class="editor-text-bold" data-lexical-text="true">b</strong><span data-lexical-text="true"> c</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<div>
|
||||
@ -461,25 +461,25 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
|
||||
'<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
|
||||
inputs: [pasteHTML('<div><strong>a </strong>b</div>')],
|
||||
name: 'collapsibles and neighbors (1)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
|
||||
inputs: [pasteHTML('<div>a<strong> b</strong></div>')],
|
||||
name: 'collapsibles and neighbors (2)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
|
||||
'<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
|
||||
inputs: [pasteHTML('<div><strong>a </strong><span></span>b</div>')],
|
||||
name: 'collapsibles and neighbors (3)',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
|
||||
inputs: [pasteHTML('<div>a<span></span><strong> b</strong></div>')],
|
||||
name: 'collapsibles and neighbors (4)',
|
||||
},
|
||||
@ -495,19 +495,19 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span></p>',
|
||||
inputs: [pasteHTML('<span> </span><span>a</span>')],
|
||||
name: 'redundant inline at start',
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span></p>',
|
||||
inputs: [pasteHTML('<span>a</span><span> </span>')],
|
||||
name: 'redundant inline at end',
|
||||
},
|
||||
{
|
||||
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>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span></p><p class="editor-paragraph"><span data-lexical-text="true">b</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<div>
|
||||
@ -524,7 +524,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
|
||||
'<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<div>
|
||||
@ -541,7 +541,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<p>
|
||||
@ -555,7 +555,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(`
|
||||
<p>
|
||||
@ -569,7 +569,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">paragraph1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph2</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
'\n<p class="p1">paragraph1</p>\n<p class="p1">paragraph2</p>\n',
|
||||
@ -579,7 +579,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 2</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 2</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
'\n<p class="p1">line 1<br>\nline 2</p>\n<p class="p2"><br></p>\n<p class="p1">paragraph 1</p>\n<p class="p1">paragraph 2</p>\n',
|
||||
@ -589,7 +589,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 2</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 2</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
'\n<p class="p1">line 1<br>\nline 2</p>\n<p class="p2">\n<br>\n</p>\n<p class="p1">paragraph 1</p>\n<p class="p1">paragraph 2</p>\n',
|
||||
@ -599,7 +599,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
expectedHTML:
|
||||
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
'<p class="p1"><span>line 1</span><span><br></span><span>line 2</span></p>',
|
||||
@ -635,7 +635,7 @@ describe('LexicalEventHelpers', () => {
|
||||
},
|
||||
{
|
||||
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 b</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">c</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">z</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">d e</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">fg</span></p>',
|
||||
'<p class="editor-paragraph"><span data-lexical-text="true">a</span></p><p class="editor-paragraph"><span data-lexical-text="true">b b</span></p><p class="editor-paragraph"><span data-lexical-text="true">c</span></p><p class="editor-paragraph"><span data-lexical-text="true">z</span></p><p class="editor-paragraph"><span data-lexical-text="true">d e</span></p><p class="editor-paragraph"><span data-lexical-text="true">fg</span></p>',
|
||||
inputs: [
|
||||
pasteHTML(
|
||||
`<div>a<div>b b<div>c<div><div></div>z</div></div>d e</div>fg</div>`,
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import {LexicalNode, Spread} from "lexical";
|
||||
import type {SerializedElementNode} from "lexical/nodes/LexicalElementNode";
|
||||
import {sizeToPixels} from "../utils/dom";
|
||||
import {el, sizeToPixels} from "../utils/dom";
|
||||
|
||||
export type CommonBlockAlignment = 'left' | 'right' | 'center' | 'justify' | '';
|
||||
const validAlignments: CommonBlockAlignment[] = ['left', 'right', 'center', 'justify'];
|
||||
|
||||
type EditorNodeDirection = 'ltr' | 'rtl' | null;
|
||||
|
||||
export type SerializedCommonBlockNode = Spread<{
|
||||
id: string;
|
||||
alignment: CommonBlockAlignment;
|
||||
@ -29,7 +31,13 @@ export interface NodeHasInset {
|
||||
getInset(): number;
|
||||
}
|
||||
|
||||
interface CommonBlockInterface extends NodeHasId, NodeHasAlignment, NodeHasInset {}
|
||||
export interface NodeHasDirection {
|
||||
readonly __dir: EditorNodeDirection;
|
||||
setDirection(direction: EditorNodeDirection): void;
|
||||
getDirection(): EditorNodeDirection;
|
||||
}
|
||||
|
||||
interface CommonBlockInterface extends NodeHasId, NodeHasAlignment, NodeHasInset, NodeHasDirection {}
|
||||
|
||||
export function extractAlignmentFromElement(element: HTMLElement): CommonBlockAlignment {
|
||||
const textAlignStyle: string = element.style.textAlign || '';
|
||||
@ -55,6 +63,15 @@ export function extractInsetFromElement(element: HTMLElement): number {
|
||||
return sizeToPixels(elemPadding);
|
||||
}
|
||||
|
||||
function extractDirectionFromElement(element: HTMLElement): EditorNodeDirection {
|
||||
const elemDir = (element.dir || '').toLowerCase();
|
||||
if (elemDir === 'rtl' || elemDir === 'ltr') {
|
||||
return elemDir;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function setCommonBlockPropsFromElement(element: HTMLElement, node: CommonBlockInterface): void {
|
||||
if (element.id) {
|
||||
node.setId(element.id);
|
||||
@ -62,12 +79,14 @@ export function setCommonBlockPropsFromElement(element: HTMLElement, node: Commo
|
||||
|
||||
node.setAlignment(extractAlignmentFromElement(element));
|
||||
node.setInset(extractInsetFromElement(element));
|
||||
node.setDirection(extractDirectionFromElement(element));
|
||||
}
|
||||
|
||||
export function commonPropertiesDifferent(nodeA: CommonBlockInterface, nodeB: CommonBlockInterface): boolean {
|
||||
return nodeA.__id !== nodeB.__id ||
|
||||
nodeA.__alignment !== nodeB.__alignment ||
|
||||
nodeA.__inset !== nodeB.__inset;
|
||||
nodeA.__inset !== nodeB.__inset ||
|
||||
nodeA.__dir !== nodeB.__dir;
|
||||
}
|
||||
|
||||
export function updateElementWithCommonBlockProps(element: HTMLElement, node: CommonBlockInterface): void {
|
||||
@ -82,12 +101,17 @@ export function updateElementWithCommonBlockProps(element: HTMLElement, node: Co
|
||||
if (node.__inset) {
|
||||
element.style.paddingLeft = `${node.__inset}px`;
|
||||
}
|
||||
|
||||
if (node.__dir) {
|
||||
element.dir = node.__dir;
|
||||
}
|
||||
}
|
||||
|
||||
export function deserializeCommonBlockNode(serializedNode: SerializedCommonBlockNode, node: CommonBlockInterface): void {
|
||||
node.setId(serializedNode.id);
|
||||
node.setAlignment(serializedNode.alignment);
|
||||
node.setInset(serializedNode.inset);
|
||||
node.setDirection(serializedNode.direction);
|
||||
}
|
||||
|
||||
export interface NodeHasSize {
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
## In progress
|
||||
|
||||
- RTL/LTR support
|
||||
- Basic implementation added
|
||||
- Test across main range of content blocks
|
||||
- Test that HTML is being set as expected
|
||||
- Test editor defaults when between RTL/LTR modes
|
||||
|
||||
## Main Todo
|
||||
|
||||
|
||||
@ -37,14 +37,15 @@ function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockA
|
||||
$toggleSelection(editor);
|
||||
}
|
||||
|
||||
function setDirectionForSelection(editor: LexicalEditor, direction: 'ltr' | 'rtl'): void {
|
||||
const selection = getLastSelection(editor);
|
||||
function setDirectionForSelection(context: EditorUiContext, direction: 'ltr' | 'rtl'): void {
|
||||
const selection = getLastSelection(context.editor);
|
||||
|
||||
const elements = $getBlockElementNodesInSelection(selection);
|
||||
for (const node of elements) {
|
||||
console.log('setting direction', node);
|
||||
node.setDirection(direction);
|
||||
}
|
||||
|
||||
context.manager.triggerFutureStateRefresh();
|
||||
}
|
||||
|
||||
export const alignLeft: EditorButtonDefinition = {
|
||||
@ -95,7 +96,7 @@ export const directionLTR: EditorButtonDefinition = {
|
||||
label: 'Left to right',
|
||||
icon: ltrIcon,
|
||||
action(context: EditorUiContext) {
|
||||
context.editor.update(() => setDirectionForSelection(context.editor, 'ltr'));
|
||||
context.editor.update(() => setDirectionForSelection(context, 'ltr'));
|
||||
},
|
||||
isActive(selection: BaseSelection|null) {
|
||||
return $selectionContainsDirection(selection, 'ltr');
|
||||
@ -106,7 +107,7 @@ export const directionRTL: EditorButtonDefinition = {
|
||||
label: 'Right to left',
|
||||
icon: rtlIcon,
|
||||
action(context: EditorUiContext) {
|
||||
context.editor.update(() => setDirectionForSelection(context.editor, 'rtl'));
|
||||
context.editor.update(() => setDirectionForSelection(context, 'rtl'));
|
||||
},
|
||||
isActive(selection: BaseSelection|null) {
|
||||
return $selectionContainsDirection(selection, 'rtl');
|
||||
|
||||
@ -3,7 +3,6 @@ import {EditorButtonDefinition} from "../../framework/buttons";
|
||||
import {EditorUiContext} from "../../framework/core";
|
||||
import {
|
||||
BaseSelection,
|
||||
LexicalEditor,
|
||||
LexicalNode,
|
||||
} from "lexical";
|
||||
import listBulletIcon from "@icons/editor/list-bullet.svg";
|
||||
@ -12,15 +11,10 @@ import listCheckIcon from "@icons/editor/list-check.svg";
|
||||
import indentIncreaseIcon from "@icons/editor/indent-increase.svg";
|
||||
import indentDecreaseIcon from "@icons/editor/indent-decrease.svg";
|
||||
import {
|
||||
$getBlockElementNodesInSelection,
|
||||
$selectionContainsNodeType, $selectNodes, $selectSingleNode,
|
||||
$toggleSelection,
|
||||
getLastSelection
|
||||
$selectionContainsNodeType,
|
||||
} from "../../../utils/selection";
|
||||
import {toggleSelectionAsList} from "../../../utils/formats";
|
||||
import {nodeHasInset} from "../../../utils/nodes";
|
||||
import {$isCustomListItemNode, CustomListItemNode} from "../../../nodes/custom-list-item";
|
||||
import {$nestListItem, $setInsetForSelection, $unnestListItem} from "../../../utils/lists";
|
||||
import {$setInsetForSelection} from "../../../utils/lists";
|
||||
|
||||
|
||||
function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"include": ["resources/js/**/*"],
|
||||
"exclude": ["resources/js/wysiwyg/lexical/yjs/*"],
|
||||
"compilerOptions": {
|
||||
"target": "es2019",
|
||||
"module": "commonjs",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user