From c963cfa896e8ab59a9433e03b189668a07fa5590 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 26 Apr 2022 04:41:22 +0100 Subject: [PATCH] Improve multi element indentation (#1982) * Improve multi element indentation * Remove bad UT * Remove bad UT * Add e2e test * Address feedback --- packages/lexical-code/LexicalCode.d.ts | 2 +- .../lexical-code/flow/LexicalCode.js.flow | 2 +- .../__tests__/unit/LexicalCodeNode.test.js | 8 - packages/lexical-code/src/index.js | 10 +- packages/lexical-list/LexicalList.d.ts | 4 +- .../lexical-list/flow/LexicalList.js.flow | 4 +- .../lexical-list/src/LexicalListItemNode.js | 5 + packages/lexical-list/src/LexicalListNode.js | 4 + packages/lexical-list/src/formatList.js | 14 +- .../__tests__/e2e/ElementFormat.spec.mjs | 2 +- .../__tests__/e2e/Indentation.spec.mjs | 1380 +++++++++++++++++ packages/lexical-react/src/shared/useList.js | 10 +- packages/lexical-rich-text/src/index.js | 89 +- packages/lexical-table/LexicalTable.d.ts | 3 - .../lexical-table/flow/LexicalTable.js.flow | 3 - .../lexical-table/src/LexicalTableCellNode.js | 4 + .../lexical-table/src/LexicalTableNode.js | 4 + .../lexical-table/src/LexicalTableRowNode.js | 4 + packages/lexical/Lexical.d.ts | 1 + packages/lexical/flow/Lexical.js.flow | 1 + packages/lexical/src/LexicalReconciler.js | 2 +- .../lexical/src/nodes/LexicalElementNode.js | 3 + 22 files changed, 1485 insertions(+), 74 deletions(-) create mode 100644 packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs diff --git a/packages/lexical-code/LexicalCode.d.ts b/packages/lexical-code/LexicalCode.d.ts index a092367fc..1c221885f 100644 --- a/packages/lexical-code/LexicalCode.d.ts +++ b/packages/lexical-code/LexicalCode.d.ts @@ -28,7 +28,7 @@ declare class CodeNode extends ElementNode { insertNewAfter( selection: RangeSelection, ): null | ParagraphNode | CodeHighlightNode; - canInsertTab(): true; + canInsertTab(): boolean; collapseAtStart(): true; setLanguage(language: string): void; getLanguage(): string | void; diff --git a/packages/lexical-code/flow/LexicalCode.js.flow b/packages/lexical-code/flow/LexicalCode.js.flow index 31f4701be..c50fb8062 100644 --- a/packages/lexical-code/flow/LexicalCode.js.flow +++ b/packages/lexical-code/flow/LexicalCode.js.flow @@ -28,7 +28,7 @@ declare export class CodeNode extends ElementNode { insertNewAfter( selection: RangeSelection, ): null | ParagraphNode | CodeHighlightNode; - canInsertTab(): true; + canInsertTab(): boolean; collapseAtStart(): true; setLanguage(language: string): void; getLanguage(): string | void; diff --git a/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.js b/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.js index 31e04690f..d6adf996c 100644 --- a/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.js +++ b/packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.js @@ -92,14 +92,6 @@ describe('LexicalCodeNode tests', () => { }); }); - test('CodeNode.canInsertTab()', async () => { - const {editor} = testEnv; - await editor.update(() => { - const codeNode = $createCodeNode(); - expect(codeNode.canInsertTab()).toBe(true); - }); - }); - test('$createCodeNode()', async () => { const {editor} = testEnv; await editor.update(() => { diff --git a/packages/lexical-code/src/index.js b/packages/lexical-code/src/index.js index ec06d6a88..4479c2b46 100644 --- a/packages/lexical-code/src/index.js +++ b/packages/lexical-code/src/index.js @@ -313,10 +313,18 @@ export class CodeNode extends ElementNode { return null; } - canInsertTab(): true { + canInsertTab(): boolean { + const selection = $getSelection(); + if (!$isRangeSelection(selection) || !selection.isCollapsed()) { + return false; + } return true; } + canIndent(): false { + return false; + } + collapseAtStart(): true { const paragraph = $createParagraphNode(); const children = this.getChildren(); diff --git a/packages/lexical-list/LexicalList.d.ts b/packages/lexical-list/LexicalList.d.ts index 4a14a6815..02a13f149 100644 --- a/packages/lexical-list/LexicalList.d.ts +++ b/packages/lexical-list/LexicalList.d.ts @@ -22,7 +22,7 @@ export function $getListDepth(listNode: ListNode): number; export function $handleListInsertParagraph(): boolean; export function $isListItemNode(node?: LexicalNode): node is ListItemNode; export function $isListNode(node?: LexicalNode): node is ListNode; -export function indentList(): boolean; +export function indentList(): void; export function insertList(editor: LexicalEditor, listType: 'ul' | 'ol'): void; export declare class ListItemNode extends ElementNode { append(...nodes: LexicalNode[]): ListItemNode; @@ -42,7 +42,7 @@ export declare class ListNode extends ElementNode { append(...nodesToAppend: LexicalNode[]): ListNode; getTag(): ListNodeTagType; } -export function outdentList(): boolean; +export function outdentList(): void; export function removeList(editor: LexicalEditor): boolean; export var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand; diff --git a/packages/lexical-list/flow/LexicalList.js.flow b/packages/lexical-list/flow/LexicalList.js.flow index 43f61217c..d717bcbf3 100644 --- a/packages/lexical-list/flow/LexicalList.js.flow +++ b/packages/lexical-list/flow/LexicalList.js.flow @@ -30,7 +30,7 @@ declare export function $isListItemNode( declare export function $isListNode( node: ?LexicalNode, ): boolean %checks(node instanceof ListNode); -declare export function indentList(): boolean; +declare export function indentList(): void; declare export function insertList( editor: LexicalEditor, listType: 'ul' | 'ol', @@ -56,7 +56,7 @@ declare export class ListNode extends ElementNode { getTag(): ListNodeTagType; getStart(): number; } -declare export function outdentList(): boolean; +declare export function outdentList(): void; declare export function removeList(editor: LexicalEditor): boolean; declare export var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand; diff --git a/packages/lexical-list/src/LexicalListItemNode.js b/packages/lexical-list/src/LexicalListItemNode.js index 552ee3dd7..a830a93b2 100644 --- a/packages/lexical-list/src/LexicalListItemNode.js +++ b/packages/lexical-list/src/LexicalListItemNode.js @@ -227,6 +227,11 @@ export class ListItemNode extends ElementNode { return this; } + canIndent(): false { + // Indent/outdent is handled specifically in the RichText logic. + return false; + } + insertBefore(nodeToInsert: LexicalNode): LexicalNode { const siblings = this.getNextSiblings(); if ($isListItemNode(nodeToInsert)) { diff --git a/packages/lexical-list/src/LexicalListNode.js b/packages/lexical-list/src/LexicalListNode.js index bd6f930fe..c0301b7d3 100644 --- a/packages/lexical-list/src/LexicalListNode.js +++ b/packages/lexical-list/src/LexicalListNode.js @@ -94,6 +94,10 @@ export class ListNode extends ElementNode { return false; } + canIndent(): false { + return false; + } + append(...nodesToAppend: LexicalNode[]): ListNode { for (let i = 0; i < nodesToAppend.length; i++) { const currentNode = nodesToAppend[i]; diff --git a/packages/lexical-list/src/formatList.js b/packages/lexical-list/src/formatList.js index 86cd90f0a..32b4ccb11 100644 --- a/packages/lexical-list/src/formatList.js +++ b/packages/lexical-list/src/formatList.js @@ -300,10 +300,10 @@ export function $handleOutdent(listItemNodes: Array): void { }); } -function maybeIndentOrOutdent(direction: 'indent' | 'outdent'): boolean { +function maybeIndentOrOutdent(direction: 'indent' | 'outdent'): void { const selection = $getSelection(); if (!$isRangeSelection(selection)) { - return false; + return; } const selectedNodes = selection.getNodes(); let listItemNodes = []; @@ -326,17 +326,15 @@ function maybeIndentOrOutdent(direction: 'indent' | 'outdent'): boolean { } else { $handleOutdent(listItemNodes); } - return true; } - return false; } -export function indentList(): boolean { - return maybeIndentOrOutdent('indent'); +export function indentList(): void { + maybeIndentOrOutdent('indent'); } -export function outdentList(): boolean { - return maybeIndentOrOutdent('outdent'); +export function outdentList(): void { + maybeIndentOrOutdent('outdent'); } export function $handleListInsertParagraph(): boolean { diff --git a/packages/lexical-playground/__tests__/e2e/ElementFormat.spec.mjs b/packages/lexical-playground/__tests__/e2e/ElementFormat.spec.mjs index 0a3b8b89b..7585ffbe0 100644 --- a/packages/lexical-playground/__tests__/e2e/ElementFormat.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/ElementFormat.spec.mjs @@ -39,7 +39,7 @@ test.describe('Element format', () => { html`

Hello { + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); + test(`Can create content and indent and outdent it all`, async ({ + page, + browserName, + isPlainText, + isCollab, + }) => { + // We have to skip collab due to styling on the table for selected cells + test.skip(isPlainText || isCollab); + await focusEditor(page); + await page.keyboard.type('foo'); + await page.keyboard.press('Enter'); + await page.keyboard.type('bar'); + await page.keyboard.press('Enter'); + await page.keyboard.type('yar'); + await page.keyboard.press('Enter'); + await page.keyboard.type('- item'); + await page.keyboard.type('item 2'); + await page.keyboard.press('Enter'); + await page.keyboard.type('item 3'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.type('``` '); + await page.keyboard.type('code'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + + await insertTable(page); + + await page.keyboard.type('foo'); + + await selectAll(page); + + await assertHTML( + page, + html` +

+ foo +

+

+ bar +

+

+ yar +

+
    +
  • + itemitem 2 +
    • +
  • +
      +
    • + item 3 +
      • +
    +
    • +
+ + code + +


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ foo +

+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ `, + ); + + await page.keyboard.press('Tab'); + + await assertHTML( + page, + html` +

+ foo +

+

+ bar +

+

+ yar +

+
    +
  • +
      +
    • + itemitem 2 +
      • +
    • +
        +
      • + item 3 +
        • +
      +
      • +
    +
    • +
+ + code + +

+
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ foo +

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ `, + ); + + await page.keyboard.press('Tab'); + + await assertHTML( + page, + html` +

+ foo +

+

+ bar +

+

+ yar +

+
    +
  • +
      +
    • +
        +
      • + itemitem 2 +
        • +
      • +
          +
        • + item 3 +
          • +
        +
        • +
      +
      • +
    +
    • +
+ + code + +

+
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ foo +

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ `, + ); + + await page.keyboard.down('Shift'); + await page.keyboard.press('Tab'); + await page.keyboard.up('Shift'); + + await assertHTML( + page, + html` +

+ foo +

+

+ bar +

+

+ yar +

+
    +
  • +
      +
    • + itemitem 2 +
      • +
    • +
        +
      • + item 3 +
        • +
      +
      • +
    +
    • +
+ + code + +

+
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ foo +

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+ 		+

+
+

+
+

+
+

+ `, + ); + + await page.keyboard.down('Shift'); + await page.keyboard.press('Tab'); + await page.keyboard.up('Shift'); + + await assertHTML( + page, + html` +

+ foo +

+

+ bar +

+

+ yar +

+
    +
  • + itemitem 2 +
    • +
  • +
      +
    • + item 3 +
      • +
    +
    • +
+ + code + +


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ foo +

+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ 		+


+ 		+


+ 		+


+ 		+


+
+


+ `, + ); + }); +}); diff --git a/packages/lexical-react/src/shared/useList.js b/packages/lexical-react/src/shared/useList.js index a46e8bf92..735f62453 100644 --- a/packages/lexical-react/src/shared/useList.js +++ b/packages/lexical-react/src/shared/useList.js @@ -34,10 +34,7 @@ export default function useList(editor: LexicalEditor): void { editor.registerCommand( INDENT_CONTENT_COMMAND, () => { - const hasHandledIndention = indentList(); - if (hasHandledIndention) { - return true; - } + indentList(); return false; }, COMMAND_PRIORITY_LOW, @@ -45,10 +42,7 @@ export default function useList(editor: LexicalEditor): void { editor.registerCommand( OUTDENT_CONTENT_COMMAND, () => { - const hasHandledIndention = outdentList(); - if (hasHandledIndention) { - return true; - } + outdentList(); return false; }, COMMAND_PRIORITY_LOW, diff --git a/packages/lexical-rich-text/src/index.js b/packages/lexical-rich-text/src/index.js index f81e0d944..00a2c8892 100644 --- a/packages/lexical-rich-text/src/index.js +++ b/packages/lexical-rich-text/src/index.js @@ -41,6 +41,7 @@ import { $isGridSelection, $isNodeSelection, $isRangeSelection, + $isTextNode, CLICK_COMMAND, COMMAND_PRIORITY_EDITOR, COPY_COMMAND, @@ -328,6 +329,33 @@ function onCutForRichText(event: ClipboardEvent, editor: LexicalEditor): void { }); } +function handleIndentAndOutdent( + insertTab: (node: LexicalNode) => void, + indentOrOutdent: (block: ElementNode) => void, +): void { + const selection = $getSelection(); + if (!$isRangeSelection(selection)) { + return; + } + const alreadyHandled = new Set(); + const nodes = selection.getNodes(); + + for (let i = 0; i < nodes.length; i++) { + const node = nodes[i]; + const key = node.getKey(); + if (alreadyHandled.has(key)) { + continue; + } + alreadyHandled.add(key); + const parentBlock = $getNearestBlockElementAncestorOrThrow(node); + if (parentBlock.canInsertTab()) { + insertTab(node); + } else if (parentBlock.canIndent()) { + indentOrOutdent(parentBlock); + } + } +} + export function registerRichText( editor: LexicalEditor, initialEditorState?: InitialEditorStateType, @@ -478,22 +506,17 @@ export function registerRichText( editor.registerCommand( INDENT_CONTENT_COMMAND, (payload) => { - const selection = $getSelection(); - if (!$isRangeSelection(selection)) { - return false; - } - // Handle code blocks - const anchor = selection.anchor; - const parentBlock = $getNearestBlockElementAncestorOrThrow( - anchor.getNode(), + handleIndentAndOutdent( + () => { + editor.dispatchCommand(INSERT_TEXT_COMMAND, '\t'); + }, + (block) => { + const indent = block.getIndent(); + if (indent !== 10) { + block.setIndent(indent + 1); + } + }, ); - if (parentBlock.canInsertTab()) { - editor.dispatchCommand(INSERT_TEXT_COMMAND, '\t'); - } else { - if (parentBlock.getIndent() !== 10) { - parentBlock.setIndent(parentBlock.getIndent() + 1); - } - } return true; }, COMMAND_PRIORITY_EDITOR, @@ -501,27 +524,23 @@ export function registerRichText( editor.registerCommand( OUTDENT_CONTENT_COMMAND, (payload) => { - const selection = $getSelection(); - if (!$isRangeSelection(selection)) { - return false; - } - // Handle code blocks - const anchor = selection.anchor; - const anchorNode = anchor.getNode(); - const parentBlock = $getNearestBlockElementAncestorOrThrow( - anchor.getNode(), + handleIndentAndOutdent( + (node) => { + if ($isTextNode(node)) { + const textContent = node.getTextContent(); + const character = textContent[textContent.length - 1]; + if (character === '\t') { + editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true); + } + } + }, + (block) => { + const indent = block.getIndent(); + if (indent !== 0) { + block.setIndent(indent - 1); + } + }, ); - if (parentBlock.canInsertTab()) { - const textContent = anchorNode.getTextContent(); - const character = textContent[anchor.offset - 1]; - if (character === '\t') { - editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true); - } - } else { - if (parentBlock.getIndent() !== 0) { - parentBlock.setIndent(parentBlock.getIndent() - 1); - } - } return true; }, COMMAND_PRIORITY_EDITOR, diff --git a/packages/lexical-table/LexicalTable.d.ts b/packages/lexical-table/LexicalTable.d.ts index 2a99a711f..515aa22a2 100644 --- a/packages/lexical-table/LexicalTable.d.ts +++ b/packages/lexical-table/LexicalTable.d.ts @@ -54,7 +54,6 @@ export declare class TableCellNode extends ElementNode { insertNewAfter( selection: RangeSelection, ): null | ParagraphNode | TableCellNode; - canInsertTab(): true; collapseAtStart(): true; getTag(): string; setHeaderState(headerState: TableCellHeaderState): TableCellHeaderState; @@ -83,7 +82,6 @@ export declare class TableNode extends ElementNode { createDOM(config: EditorConfig): HTMLElement; updateDOM(prevNode: TableNode, dom: HTMLElement): boolean; insertNewAfter(selection: RangeSelection): null | ParagraphNode | TableNode; - canInsertTab(): true; collapseAtStart(): true; getCordsFromCellNode(tableCellNode: TableCellNode): {x: number; y: number}; getCellFromCords(x: number, y: number, grid: Grid): ?Cell; @@ -112,7 +110,6 @@ declare class TableRowNode extends ElementNode { ): null | ParagraphNode | TableRowNode; setHeight(height: number): ?number; getHeight(): ?number; - canInsertTab(): true; collapseAtStart(): true; } declare function $createTableRowNode(): TableRowNode; diff --git a/packages/lexical-table/flow/LexicalTable.js.flow b/packages/lexical-table/flow/LexicalTable.js.flow index 68f17cf78..369121c60 100644 --- a/packages/lexical-table/flow/LexicalTable.js.flow +++ b/packages/lexical-table/flow/LexicalTable.js.flow @@ -48,7 +48,6 @@ declare export class TableCellNode extends ElementNode { insertNewAfter( selection: RangeSelection, ): null | ParagraphNode | TableCellNode; - canInsertTab(): true; collapseAtStart(): true; getTag(): string; setHeaderStyles(headerState: TableCellHeaderState): TableCellHeaderState; @@ -81,7 +80,6 @@ declare export class TableNode extends ElementNode { createDOM(config: EditorConfig): HTMLElement; updateDOM(prevNode: TableNode, dom: HTMLElement): boolean; insertNewAfter(selection: RangeSelection): null | ParagraphNode | TableNode; - canInsertTab(): true; collapseAtStart(): true; getCordsFromCellNode( tableCellNode: TableCellNode, @@ -115,7 +113,6 @@ declare export class TableRowNode extends ElementNode { insertNewAfter( selection: RangeSelection, ): null | ParagraphNode | TableRowNode; - canInsertTab(): true; collapseAtStart(): true; } declare export function $createTableRowNode(): TableRowNode; diff --git a/packages/lexical-table/src/LexicalTableCellNode.js b/packages/lexical-table/src/LexicalTableCellNode.js index c92c8747f..00df16749 100644 --- a/packages/lexical-table/src/LexicalTableCellNode.js +++ b/packages/lexical-table/src/LexicalTableCellNode.js @@ -175,6 +175,10 @@ export class TableCellNode extends GridCellNode { canBeEmpty(): false { return false; } + + canIndent(): false { + return false; + } } export function convertTableCellNodeElement( diff --git a/packages/lexical-table/src/LexicalTableNode.js b/packages/lexical-table/src/LexicalTableNode.js index f9ea913d5..9093e112e 100644 --- a/packages/lexical-table/src/LexicalTableNode.js +++ b/packages/lexical-table/src/LexicalTableNode.js @@ -183,6 +183,10 @@ export class TableNode extends GridNode { canSelectBefore(): true { return true; } + + canIndent(): false { + return false; + } } export function $getElementGridForTableNode( diff --git a/packages/lexical-table/src/LexicalTableRowNode.js b/packages/lexical-table/src/LexicalTableRowNode.js index 3a0283900..c5e7ca3ff 100644 --- a/packages/lexical-table/src/LexicalTableRowNode.js +++ b/packages/lexical-table/src/LexicalTableRowNode.js @@ -72,6 +72,10 @@ export class TableRowNode extends GridRowNode { canBeEmpty(): false { return false; } + + canIndent(): false { + return false; + } } export function convertTableRowElement(domNode: Node): DOMConversionOutput { diff --git a/packages/lexical/Lexical.d.ts b/packages/lexical/Lexical.d.ts index 68c9b7b5a..f31d13730 100644 --- a/packages/lexical/Lexical.d.ts +++ b/packages/lexical/Lexical.d.ts @@ -696,6 +696,7 @@ export declare class ElementNode extends LexicalNode { setIndent(indentLevel: number): ElementNode; insertNewAfter(selection: RangeSelection): null | LexicalNode; canInsertTab(): boolean; + canIndent(): boolean; collapseAtStart(selection: RangeSelection): boolean; excludeFromCopy(): boolean; canExtractContents(): boolean; diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow index c1541bb07..5f9d39bb8 100644 --- a/packages/lexical/flow/Lexical.js.flow +++ b/packages/lexical/flow/Lexical.js.flow @@ -724,6 +724,7 @@ declare export class ElementNode extends LexicalNode { setIndent(indentLevel: number): this; insertNewAfter(selection: RangeSelection): null | LexicalNode; canInsertTab(): boolean; + canIndent(): boolean; collapseAtStart(selection: RangeSelection): boolean; excludeFromCopy(): boolean; canExtractContents(): boolean; diff --git a/packages/lexical/src/LexicalReconciler.js b/packages/lexical/src/LexicalReconciler.js index 893e4e96e..296ff92d6 100644 --- a/packages/lexical/src/LexicalReconciler.js +++ b/packages/lexical/src/LexicalReconciler.js @@ -118,7 +118,7 @@ function setTextAlign(domStyle: CSSStyleDeclaration, value: string): void { function setElementIndent(dom: HTMLElement, indent: number): void { dom.style.setProperty( 'padding-inline-start', - indent === 0 ? '' : indent * 40 + 'px', + indent === 0 ? '' : indent * 20 + 'px', ); } diff --git a/packages/lexical/src/nodes/LexicalElementNode.js b/packages/lexical/src/nodes/LexicalElementNode.js index c47cdc49a..0adca49c9 100644 --- a/packages/lexical/src/nodes/LexicalElementNode.js +++ b/packages/lexical/src/nodes/LexicalElementNode.js @@ -410,6 +410,9 @@ export class ElementNode extends LexicalNode { canInsertTab(): boolean { return false; } + canIndent(): boolean { + return true; + } collapseAtStart(selection: RangeSelection): boolean { return false; }