github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-16 16:19:09 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #5558 from BookStackApp/lexical_round3

Browse Source 
Lexical Fixes: Round 3
This commit is contained in:
Dan Brown 2025-04-02 17:23:38 +01:00 committed by GitHub
commit 78a0a2f519
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 350 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/page-editor.js
View File

@ -112,7 +112,7 @@ export class PageEditor extends Component {
}
savePage() {
this.container.closest('form').submit();
this.container.closest('form').requestSubmit();
}
async saveDraft() {

5
resources/js/components/wysiwyg-editor.js
View File

@ -25,6 +25,7 @@ export class WysiwygEditor extends Component {
textDirection: this.$opts.textDirection,
translations,
});
window.wysiwyg = this.editor;
});
let handlingFormSubmit = false;
@ -38,7 +39,9 @@ export class WysiwygEditor extends Component {
handlingFormSubmit = true;
this.editor.getContentAsHtml().then(html => {
this.input.value = html;
this.input.form.submit();
setTimeout(() => {
this.input.form.requestSubmit();
}, 5);
});
} else {
handlingFormSubmit = false;

4
resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
View File

@ -37,6 +37,7 @@ import {QuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
import {DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
import {EditorUiContext} from "../../../../ui/framework/core";
import {EditorUIManager} from "../../../../ui/framework/manager";
import {ImageNode} from "@lexical/rich-text/LexicalImageNode";
type TestEnv = {
readonly container: HTMLDivElement;
@ -484,6 +485,9 @@ export function createTestContext(): EditorUiContext {
const editor = createTestEditor({
namespace: 'testing',
theme: {},
nodes: [
ImageNode,
]
});
editor.setRootElement(editorDOM);

14
resources/js/wysiwyg/lexical/list/LexicalListNode.ts
View File

@ -332,7 +332,19 @@ function isDomChecklist(domNode: HTMLElement) {
}
// if children are checklist items, the node is a checklist ul. Applicable for googledoc checklist pasting.
for (const child of domNode.childNodes) {
if (isHTMLElement(child) && child.hasAttribute('aria-checked')) {
if (!isHTMLElement(child)) {
continue;
}
if (child.hasAttribute('aria-checked')) {
return true;
}
if (child.classList.contains('task-list-item')) {
return true;
}
if (child.firstElementChild && child.firstElementChild.matches('input[type="checkbox"]')) {
return true;
}
}

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

@ -6,7 +6,7 @@
*
*/
import {ParagraphNode, TextNode} from 'lexical';
import {initializeUnitTest} from 'lexical/__tests__/utils';
import {createTestContext} from 'lexical/__tests__/utils';
import {
$createListItemNode,
@ -16,6 +16,7 @@ import {
ListItemNode,
ListNode,
} from '../..';
import {$htmlToBlockNodes} from "../../../../utils/nodes";
const editorConfig = Object.freeze({
namespace: '',
@ -46,123 +47,122 @@ const editorConfig = Object.freeze({
});
describe('LexicalListNode tests', () => {
initializeUnitTest((testEnv) => {
test('ListNode.constructor', async () => {
const {editor} = testEnv;
test('ListNode.constructor', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect(listNode.getType()).toBe('list');
expect(listNode.getTag()).toBe('ul');
expect(listNode.getTextContent()).toBe('');
});
// @ts-expect-error
expect(() => $createListNode()).toThrow();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect(listNode.getType()).toBe('list');
expect(listNode.getTag()).toBe('ul');
expect(listNode.getTextContent()).toBe('');
});
test('ListNode.getTag()', async () => {
const {editor} = testEnv;
// @ts-expect-error
expect(() => $createListNode()).toThrow();
});
await editor.update(() => {
const ulListNode = $createListNode('bullet', 1);
expect(ulListNode.getTag()).toBe('ul');
const olListNode = $createListNode('number', 1);
expect(olListNode.getTag()).toBe('ol');
const checkListNode = $createListNode('check', 1);
expect(checkListNode.getTag()).toBe('ul');
});
test('ListNode.getTag()', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const ulListNode = $createListNode('bullet', 1);
expect(ulListNode.getTag()).toBe('ul');
const olListNode = $createListNode('number', 1);
expect(olListNode.getTag()).toBe('ol');
const checkListNode = $createListNode('check', 1);
expect(checkListNode.getTag()).toBe('ul');
});
});
test('ListNode.createDOM()', async () => {
const {editor} = testEnv;
test('ListNode.createDOM()', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect(listNode.createDOM(editorConfig).outerHTML).toBe(
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect(listNode.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
);
expect(
);
expect(
listNode.createDOM({
namespace: '',
theme: {
list: {},
},
}).outerHTML,
).toBe('<ul></ul>');
expect(
).toBe('<ul></ul>');
expect(
listNode.createDOM({
namespace: '',
theme: {},
}).outerHTML,
).toBe('<ul></ul>');
});
).toBe('<ul></ul>');
});
});
test('ListNode.createDOM() correctly applies classes to a nested ListNode', async () => {
const {editor} = testEnv;
test('ListNode.createDOM() correctly applies classes to a nested ListNode', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode1 = $createListNode('bullet');
const listNode2 = $createListNode('bullet');
const listNode3 = $createListNode('bullet');
const listNode4 = $createListNode('bullet');
const listNode5 = $createListNode('bullet');
const listNode6 = $createListNode('bullet');
const listNode7 = $createListNode('bullet');
await editor.update(() => {
const listNode1 = $createListNode('bullet');
const listNode2 = $createListNode('bullet');
const listNode3 = $createListNode('bullet');
const listNode4 = $createListNode('bullet');
const listNode5 = $createListNode('bullet');
const listNode6 = $createListNode('bullet');
const listNode7 = $createListNode('bullet');
const listItem1 = $createListItemNode();
const listItem2 = $createListItemNode();
const listItem3 = $createListItemNode();
const listItem4 = $createListItemNode();
const listItem1 = $createListItemNode();
const listItem2 = $createListItemNode();
const listItem3 = $createListItemNode();
const listItem4 = $createListItemNode();
listNode1.append(listItem1);
listItem1.append(listNode2);
listNode2.append(listItem2);
listItem2.append(listNode3);
listNode3.append(listItem3);
listItem3.append(listNode4);
listNode4.append(listItem4);
listNode4.append(listNode5);
listNode5.append(listNode6);
listNode6.append(listNode7);
listNode1.append(listItem1);
listItem1.append(listNode2);
listNode2.append(listItem2);
listItem2.append(listNode3);
listNode3.append(listItem3);
listItem3.append(listNode4);
listNode4.append(listItem4);
listNode4.append(listNode5);
listNode5.append(listNode6);
listNode6.append(listNode7);
expect(listNode1.createDOM(editorConfig).outerHTML).toBe(
expect(listNode1.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
);
expect(
);
expect(
listNode1.createDOM({
namespace: '',
theme: {
list: {},
},
}).outerHTML,
).toBe('<ul></ul>');
expect(
).toBe('<ul></ul>');
expect(
listNode1.createDOM({
namespace: '',
theme: {},
}).outerHTML,
).toBe('<ul></ul>');
expect(listNode2.createDOM(editorConfig).outerHTML).toBe(
).toBe('<ul></ul>');
expect(listNode2.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-2"></ul>',
);
expect(listNode3.createDOM(editorConfig).outerHTML).toBe(
);
expect(listNode3.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-3"></ul>',
);
expect(listNode4.createDOM(editorConfig).outerHTML).toBe(
);
expect(listNode4.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-4"></ul>',
);
expect(listNode5.createDOM(editorConfig).outerHTML).toBe(
);
expect(listNode5.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-5"></ul>',
);
expect(listNode6.createDOM(editorConfig).outerHTML).toBe(
);
expect(listNode6.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-6"></ul>',
);
expect(listNode7.createDOM(editorConfig).outerHTML).toBe(
);
expect(listNode7.createDOM(editorConfig).outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-7"></ul>',
);
expect(
);
expect(
listNode5.createDOM({
namespace: '',
theme: {
@ -176,123 +176,135 @@ describe('LexicalListNode tests', () => {
},
},
}).outerHTML,
).toBe('<ul class="my-ul-list-class my-ul-list-class-2"></ul>');
});
).toBe('<ul class="my-ul-list-class my-ul-list-class-2"></ul>');
});
});
test('ListNode.updateDOM()', async () => {
const {editor} = testEnv;
test('ListNode.updateDOM()', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
const domElement = listNode.createDOM(editorConfig);
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
const domElement = listNode.createDOM(editorConfig);
expect(domElement.outerHTML).toBe(
expect(domElement.outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
);
);
const newListNode = $createListNode('number', 1);
const result = newListNode.updateDOM(
const newListNode = $createListNode('number', 1);
const result = newListNode.updateDOM(
listNode,
domElement,
editorConfig,
);
);
expect(result).toBe(true);
expect(domElement.outerHTML).toBe(
expect(result).toBe(true);
expect(domElement.outerHTML).toBe(
'<ul class="my-ul-list-class my-ul-list-class-1"></ul>',
);
});
});
test('ListNode.append() should properly transform a ListItemNode', async () => {
const {editor} = testEnv;
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const listItemNode = new ListItemNode();
const textNode = new TextNode('Hello');
listItemNode.append(textNode);
const nodesToAppend = [listItemNode];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect(listNode.getFirstChild()).toBe(listItemNode);
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
});
});
test('ListNode.append() should properly transform a ListNode', async () => {
const {editor} = testEnv;
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const nestedListNode = new ListNode('bullet', 1);
const listItemNode = new ListItemNode();
const textNode = new TextNode('Hello');
listItemNode.append(textNode);
nestedListNode.append(listItemNode);
const nodesToAppend = [nestedListNode];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
expect(listNode.getFirstChild<ListItemNode>()!.getFirstChild()).toBe(
nestedListNode,
);
});
});
test('ListNode.append() should properly transform a ParagraphNode', async () => {
const {editor} = testEnv;
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const paragraph = new ParagraphNode();
const textNode = new TextNode('Hello');
paragraph.append(textNode);
const nodesToAppend = [paragraph];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
});
});
test('$createListNode()', async () => {
const {editor} = testEnv;
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
const createdListNode = $createListNode('bullet');
expect(listNode.__type).toEqual(createdListNode.__type);
expect(listNode.__parent).toEqual(createdListNode.__parent);
expect(listNode.__tag).toEqual(createdListNode.__tag);
expect(listNode.__key).not.toEqual(createdListNode.__key);
});
});
test('$isListNode()', async () => {
const {editor} = testEnv;
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect($isListNode(listNode)).toBe(true);
});
});
test('$createListNode() with tag name (backward compatibility)', async () => {
const {editor} = testEnv;
await editor.update(() => {
const numberList = $createListNode('number', 1);
const bulletList = $createListNode('bullet', 1);
expect(numberList.__listType).toBe('number');
expect(bulletList.__listType).toBe('bullet');
});
);
});
});
test('ListNode.append() should properly transform a ListItemNode', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const listItemNode = new ListItemNode();
const textNode = new TextNode('Hello');
listItemNode.append(textNode);
const nodesToAppend = [listItemNode];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect(listNode.getFirstChild()).toBe(listItemNode);
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
});
});
test('ListNode.append() should properly transform a ListNode', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const nestedListNode = new ListNode('bullet', 1);
const listItemNode = new ListItemNode();
const textNode = new TextNode('Hello');
listItemNode.append(textNode);
nestedListNode.append(listItemNode);
const nodesToAppend = [nestedListNode];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
expect(listNode.getFirstChild<ListItemNode>()!.getFirstChild()).toBe(
nestedListNode,
);
});
});
test('ListNode.append() should properly transform a ParagraphNode', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = new ListNode('bullet', 1);
const paragraph = new ParagraphNode();
const textNode = new TextNode('Hello');
paragraph.append(textNode);
const nodesToAppend = [paragraph];
expect(listNode.append(...nodesToAppend)).toBe(listNode);
expect($isListItemNode(listNode.getFirstChild())).toBe(true);
expect(listNode.getFirstChild()?.getTextContent()).toBe('Hello');
});
});
test('$createListNode()', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
const createdListNode = $createListNode('bullet');
expect(listNode.__type).toEqual(createdListNode.__type);
expect(listNode.__parent).toEqual(createdListNode.__parent);
expect(listNode.__tag).toEqual(createdListNode.__tag);
expect(listNode.__key).not.toEqual(createdListNode.__key);
});
});
test('$isListNode()', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const listNode = $createListNode('bullet', 1);
expect($isListNode(listNode)).toBe(true);
});
});
test('$createListNode() with tag name (backward compatibility)', async () => {
const {editor} = createTestContext();
await editor.update(() => {
const numberList = $createListNode('number', 1);
const bulletList = $createListNode('bullet', 1);
expect(numberList.__listType).toBe('number');
expect(bulletList.__listType).toBe('bullet');
});
});
test('importDOM handles old editor expected task list format', async () => {
const {editor} = createTestContext();
let list!: ListNode;
editor.update(() => {
const nodes = $htmlToBlockNodes(editor, `<ul><li class="task-list-item"><input checked="" disabled="" type="checkbox"> A</li></ul>`);
list = nodes[0] as ListNode;
});
expect(list).toBeInstanceOf(ListNode);
expect(list.getListType()).toBe('check');
});
});

2
resources/js/wysiwyg/lexical/rich-text/LexicalImageNode.ts
View File

@ -133,7 +133,7 @@ export class ImageNode extends ElementNode {
element.addEventListener('click', e => {
_editor.update(() => {
$selectSingleNode(this);
this.select();
});
});

33
resources/js/wysiwyg/services/__tests__/keyboard-handling.test.ts
View File

@ -1,7 +1,7 @@
import {
createTestContext, destroyFromContext,
dispatchKeydownEventForNode,
dispatchKeydownEventForSelectedNode,
dispatchKeydownEventForSelectedNode, expectNodeShapeToMatch,
} from "lexical/__tests__/utils";
import {
$createParagraphNode, $createTextNode,
@ -13,6 +13,7 @@ import {registerKeyboardHandling} from "../keyboard-handling";
import {registerRichText} from "@lexical/rich-text";
import {EditorUiContext} from "../../ui/framework/core";
import {$createListItemNode, $createListNode, ListItemNode, ListNode} from "@lexical/list";
import {$createImageNode, ImageNode} from "@lexical/rich-text/LexicalImageNode";
describe('Keyboard-handling service tests', () => {
@ -127,4 +128,34 @@ describe('Keyboard-handling service tests', () => {
expect(selectedNode?.getKey()).toBe(innerList.getChildren()[0].getKey());
});
});
test('Images: up on selected image creates new paragraph if none above', () => {
let image!: ImageNode;
editor.updateAndCommit(() => {
const root = $getRoot();
const imageWrap = $createParagraphNode();
image = $createImageNode('https://example.com/cat.png');
imageWrap.append(image);
root.append(imageWrap);
image.select();
});
expectNodeShapeToMatch(editor, [{
type: 'paragraph',
children: [
{type: 'image'}
],
}]);
dispatchKeydownEventForNode(image, editor, 'ArrowUp');
expectNodeShapeToMatch(editor, [{
type: 'paragraph',
}, {
type: 'paragraph',
children: [
{type: 'image'}
],
}]);
});
});

40
resources/js/wysiwyg/services/keyboard-handling.ts
View File

@ -3,7 +3,7 @@ import {
$createParagraphNode,
$getSelection,
$isDecoratorNode,
COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND,
COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND,
KEY_BACKSPACE_COMMAND,
KEY_DELETE_COMMAND,
KEY_ENTER_COMMAND, KEY_TAB_COMMAND,
@ -43,7 +43,7 @@ function deleteSingleSelectedNode(editor: LexicalEditor) {
}
/**
* Insert a new empty node after the selection if the selection contains a single
* Insert a new empty node before/after the selection if the selection contains a single
* selected node (like image, media etc...).
*/
function insertAfterSingleSelectedNode(editor: LexicalEditor, event: KeyboardEvent|null): boolean {
@ -67,6 +67,34 @@ function insertAfterSingleSelectedNode(editor: LexicalEditor, event: KeyboardEve
return false;
}
function focusAdjacentOrInsertForSingleSelectNode(editor: LexicalEditor, event: KeyboardEvent|null, after: boolean = true): boolean {
const selectionNodes = getLastSelection(editor)?.getNodes() || [];
if (!isSingleSelectedNode(selectionNodes)) {
return false;
}
event?.preventDefault();
const node = selectionNodes[0];
const nearestBlock = $getNearestNodeBlockParent(node) || node;
let target = after ? nearestBlock.getNextSibling() : nearestBlock.getPreviousSibling();
editor.update(() => {
if (!target) {
target = $createParagraphNode();
if (after) {
nearestBlock.insertAfter(target)
} else {
nearestBlock.insertBefore(target);
}
}
target.selectStart();
});
return true;
}
/**
* Insert a new node after a details node, if inside a details node that's
* the last element, and if the cursor is at the last block within the details node.
@ -199,8 +227,13 @@ export function registerKeyboardHandling(context: EditorUiContext): () => void {
return handleInsetOnTab(context.editor, event);
}, COMMAND_PRIORITY_LOW);
const unregisterUp = context.editor.registerCommand(KEY_ARROW_UP_COMMAND, (event): boolean => {
return focusAdjacentOrInsertForSingleSelectNode(context.editor, event, false);
}, COMMAND_PRIORITY_LOW);
const unregisterDown = context.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event): boolean => {
return insertAfterDetails(context.editor, event);
return insertAfterDetails(context.editor, event)
|| focusAdjacentOrInsertForSingleSelectNode(context.editor, event, true)
}, COMMAND_PRIORITY_LOW);
return () => {
@ -208,6 +241,7 @@ export function registerKeyboardHandling(context: EditorUiContext): () => void {
unregisterDelete();
unregisterEnter();
unregisterTab();
unregisterUp();
unregisterDown();
};
}

47
resources/js/wysiwyg/utils/lists.ts
View File

@ -1,6 +1,6 @@
import {$createTextNode, $getSelection, BaseSelection, LexicalEditor, TextNode} from "lexical";
import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection} from "./selection";
import {nodeHasInset} from "./nodes";
import {$sortNodes, nodeHasInset} from "./nodes";
import {$createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode} from "@lexical/list";
@ -49,16 +49,11 @@ export function $unnestListItem(node: ListItemNode): ListItemNode {
}
const laterSiblings = node.getNextSiblings();
parentListItem.insertAfter(node);
if (list.getChildren().length === 0) {
list.remove();
}
if (parentListItem.getChildren().length === 0) {
parentListItem.remove();
}
if (laterSiblings.length > 0) {
const childList = $createListNode(list.getListType());
childList.append(...laterSiblings);
@ -69,23 +64,54 @@ export function $unnestListItem(node: ListItemNode): ListItemNode {
list.remove();
}
if (parentListItem.getChildren().length === 0) {
parentListItem.remove();
}
return node;
}
function getListItemsForSelection(selection: BaseSelection|null): (ListItemNode|null)[] {
const nodes = selection?.getNodes() || [];
const listItemNodes = [];
let [start, end] = selection?.getStartEndPoints() || [null, null];
// Ensure we ignore parent list items of the top-most list item since,
// although technically part of the selection, from a user point of
// view the selection does not spread to encompass this outer element.
const itemsToIgnore: Set<string> = new Set();
if (selection && start) {
if (selection.isBackward() && end) {
[end, start] = [start, end];
}
const startParents = start.getNode().getParents();
let foundList = false;
for (const parent of startParents) {
if ($isListItemNode(parent)) {
if (foundList) {
itemsToIgnore.add(parent.getKey());
} else {
foundList = true;
}
}
}
}
const listItemNodes = [];
outer: for (const node of nodes) {
if ($isListItemNode(node)) {
listItemNodes.push(node);
if (!itemsToIgnore.has(node.getKey())) {
listItemNodes.push(node);
}
continue;
}
const parents = node.getParents();
for (const parent of parents) {
if ($isListItemNode(parent)) {
listItemNodes.push(parent);
if (!itemsToIgnore.has(parent.getKey())) {
listItemNodes.push(parent);
}
continue outer;
}
}
@ -110,7 +136,8 @@ function $reduceDedupeListItems(listItems: (ListItemNode|null)[]): ListItemNode[
}
}
return Object.values(listItemMap);
const items = Object.values(listItemMap);
return $sortNodes(items) as ListItemNode[];
}
export function $setInsetForSelection(editor: LexicalEditor, change: number): void {

24
resources/js/wysiwyg/utils/nodes.ts
View File

@ -94,6 +94,30 @@ export function $getNearestNodeBlockParent(node: LexicalNode): LexicalNode|null
return $findMatchingParent(node, isBlockNode);
}
export function $sortNodes(nodes: LexicalNode[]): LexicalNode[] {
const idChain: string[] = [];
const addIds = (n: ElementNode) => {
for (const child of n.getChildren()) {
idChain.push(child.getKey())
if ($isElementNode(child)) {
addIds(child)
}
}
};
const root = $getRoot();
addIds(root);
const sorted = Array.from(nodes);
sorted.sort((a, b) => {
const aIndex = idChain.indexOf(a.getKey());
const bIndex = idChain.indexOf(b.getKey());
return aIndex - bIndex;
});
return sorted;
}
export function nodeHasAlignment(node: object): node is NodeHasAlignment {
return '__alignment' in node;
}

2
resources/sass/_editor.scss
View File

@ -370,8 +370,10 @@ body.editor-is-fullscreen {
display: inline-block;
outline: 2px dashed var(--editor-color-primary);
direction: ltr;
pointer-events: none;
}
.editor-node-resizer-handle {
pointer-events: auto;
position: absolute;
display: block;
width: 10px;