From 0f27b9f773fa7117157c71197461ea5722d3b97c Mon Sep 17 00:00:00 2001 From: Aleksandr Lapuskin Date: Mon, 9 Dec 2024 16:10:10 +0200 Subject: [PATCH] Try moving `textStyle` to Element --- packages/lexical-list/src/formatList.ts | 6 +++ packages/lexical/src/LexicalEvents.ts | 5 +- .../lexical/src/nodes/LexicalElementNode.ts | 43 ++++++++++++++++- .../lexical/src/nodes/LexicalParagraphNode.ts | 46 +------------------ packages/lexical/src/nodes/LexicalRootNode.ts | 2 + 5 files changed, 53 insertions(+), 49 deletions(-) diff --git a/packages/lexical-list/src/formatList.ts b/packages/lexical-list/src/formatList.ts index 3dc4a22ea20..85fcb7b8207 100644 --- a/packages/lexical-list/src/formatList.ts +++ b/packages/lexical-list/src/formatList.ts @@ -154,9 +154,14 @@ function $createListOrMerge(node: ElementNode, listType: ListType): ListNode { return node; } + const selection = $getSelection(); + const selectionStyle = $isRangeSelection(selection) ? selection.style : ''; + const selectionFormat = $isRangeSelection(selection) ? selection.format : 0; const previousSibling = node.getPreviousSibling(); const nextSibling = node.getNextSibling(); const listItem = $createListItemNode(); + listItem.setTextStyle(selectionStyle); + listItem.setTextFormat(selectionFormat); append(listItem, node.getChildren()); let targetList; @@ -183,6 +188,7 @@ function $createListOrMerge(node: ElementNode, listType: ListType): ListNode { node.replace(list); targetList = list; } + // listItem needs to be attached to root prior to setting indent listItem.setFormat(node.getFormatType()); listItem.setIndent(node.getIndent()); diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts index 663fbb236a4..3dfa0992b0a 100644 --- a/packages/lexical/src/LexicalEvents.ts +++ b/packages/lexical/src/LexicalEvents.ts @@ -8,7 +8,6 @@ import type {LexicalEditor} from './LexicalEditor'; import type {NodeKey} from './LexicalNode'; -import type {ElementNode} from './nodes/LexicalElementNode'; import type {TextNode} from './nodes/LexicalTextNode'; import { @@ -59,7 +58,6 @@ import { KEY_TAB_COMMAND, MOVE_TO_END, MOVE_TO_START, - ParagraphNode, PASTE_COMMAND, REDO_COMMAND, REMOVE_TEXT_COMMAND, @@ -130,6 +128,7 @@ import { isUnderline, isUndo, } from './LexicalUtils'; +import {ElementNode} from './nodes/LexicalElementNode'; type RootElementRemoveHandles = Array<() => void>; type RootElementEvents = Array< @@ -351,7 +350,7 @@ function onSelectionChange( const lastNode = anchor.getNode(); selection.style = ''; if ( - lastNode instanceof ParagraphNode && + lastNode instanceof ElementNode && lastNode.getChildrenSize() === 0 ) { selection.format = lastNode.getTextFormat(); diff --git a/packages/lexical/src/nodes/LexicalElementNode.ts b/packages/lexical/src/nodes/LexicalElementNode.ts index 285a546545a..d7e0ad411b2 100644 --- a/packages/lexical/src/nodes/LexicalElementNode.ts +++ b/packages/lexical/src/nodes/LexicalElementNode.ts @@ -17,7 +17,12 @@ import type { PointType, RangeSelection, } from '../LexicalSelection'; -import type {KlassConstructor, LexicalEditor, Spread} from 'lexical'; +import type { + KlassConstructor, + LexicalEditor, + Spread, + TextFormatType, +} from 'lexical'; import {IS_IOS, IS_SAFARI} from 'shared/environment'; import invariant from 'shared/invariant'; @@ -27,6 +32,7 @@ import { DOUBLE_LINE_BREAK, ELEMENT_FORMAT_TO_TYPE, ELEMENT_TYPE_TO_FORMAT, + TEXT_TYPE_TO_FORMAT, } from '../LexicalConstants'; import {LexicalNode} from '../LexicalNode'; import { @@ -51,6 +57,8 @@ export type SerializedElementNode< direction: 'ltr' | 'rtl' | null; format: ElementFormatType; indent: number; + textStyle: string; + textFormat: number; }, SerializedLexicalNode >; @@ -307,6 +315,10 @@ export class ElementNode extends LexicalNode { __indent: number; /** @internal */ __dir: 'ltr' | 'rtl' | null; + /** @internal */ + __textStyle: string; + /** @internal */ + __textFormat: number; constructor(key?: NodeKey) { super(key); @@ -317,6 +329,8 @@ export class ElementNode extends LexicalNode { this.__style = ''; this.__indent = 0; this.__dir = null; + this.__textStyle = ''; + this.__textFormat = 0; } afterCloneFrom(prevNode: this) { @@ -328,6 +342,8 @@ export class ElementNode extends LexicalNode { this.__format = prevNode.__format; this.__style = prevNode.__style; this.__dir = prevNode.__dir; + this.__textStyle = prevNode.__textStyle; + this.__textFormat = prevNode.__textFormat; } getFormat(): number { @@ -342,6 +358,14 @@ export class ElementNode extends LexicalNode { const self = this.getLatest(); return self.__style; } + getTextStyle(): string { + const self = this.getLatest(); + return self.__textStyle; + } + getTextFormat(): number { + const self = this.getLatest(); + return self.__textFormat; + } getIndent(): number { const self = this.getLatest(); return self.__indent; @@ -614,6 +638,21 @@ export class ElementNode extends LexicalNode { self.__style = style || ''; return this; } + setTextStyle(style: string): this { + const self = this.getWritable(); + self.__textStyle = style || ''; + return this; + } + setTextFormat(format: number): this { + const self = this.getWritable(); + self.__textFormat = format; + return this; + } + + hasTextFormat(type: TextFormatType): boolean { + const formatFlag = TEXT_TYPE_TO_FORMAT[type]; + return (this.getTextFormat() & formatFlag) !== 0; + } setIndent(indentLevel: number): this { const self = this.getWritable(); self.__indent = indentLevel; @@ -792,6 +831,8 @@ export class ElementNode extends LexicalNode { direction: this.getDirection(), format: this.getFormatType(), indent: this.getIndent(), + textFormat: this.getTextFormat(), + textStyle: this.getTextStyle(), type: 'element', version: 1, }; diff --git a/packages/lexical/src/nodes/LexicalParagraphNode.ts b/packages/lexical/src/nodes/LexicalParagraphNode.ts index c1250aeae16..6a167c2ae8f 100644 --- a/packages/lexical/src/nodes/LexicalParagraphNode.ts +++ b/packages/lexical/src/nodes/LexicalParagraphNode.ts @@ -10,7 +10,6 @@ import type { EditorConfig, KlassConstructor, LexicalEditor, - Spread, } from '../LexicalEditor'; import type { DOMConversionMap, @@ -25,7 +24,6 @@ import type { } from './LexicalElementNode'; import type {RangeSelection} from 'lexical'; -import {TEXT_TYPE_TO_FORMAT} from '../LexicalConstants'; import { $applyNodeReplacement, getCachedClassNameArray, @@ -36,47 +34,20 @@ import { import {ElementNode} from './LexicalElementNode'; import {$isTextNode, TextFormatType} from './LexicalTextNode'; -export type SerializedParagraphNode = Spread< - { - textFormat: number; - textStyle: string; - }, - SerializedElementNode ->; +export type SerializedParagraphNode = SerializedElementNode; /** @noInheritDoc */ export class ParagraphNode extends ElementNode { ['constructor']!: KlassConstructor; - /** @internal */ - __textFormat: number; - __textStyle: string; constructor(key?: NodeKey) { super(key); - this.__textFormat = 0; - this.__textStyle = ''; } static getType(): string { return 'paragraph'; } - getTextFormat(): number { - const self = this.getLatest(); - return self.__textFormat; - } - - setTextFormat(type: number): this { - const self = this.getWritable(); - self.__textFormat = type; - return self; - } - - hasTextFormat(type: TextFormatType): boolean { - const formatFlag = TEXT_TYPE_TO_FORMAT[type]; - return (this.getTextFormat() & formatFlag) !== 0; - } - /** * Returns the format flags applied to the node as a 32-bit integer. * @@ -88,25 +59,12 @@ export class ParagraphNode extends ElementNode { return toggleTextFormatType(format, type, alignWithFormat); } - getTextStyle(): string { - const self = this.getLatest(); - return self.__textStyle; - } - - setTextStyle(style: string): this { - const self = this.getWritable(); - self.__textStyle = style; - return self; - } - static clone(node: ParagraphNode): ParagraphNode { return new ParagraphNode(node.__key); } afterCloneFrom(prevNode: this) { super.afterCloneFrom(prevNode); - this.__textFormat = prevNode.__textFormat; - this.__textStyle = prevNode.__textStyle; } // View @@ -171,8 +129,6 @@ export class ParagraphNode extends ElementNode { exportJSON(): SerializedParagraphNode { return { ...super.exportJSON(), - textFormat: this.getTextFormat(), - textStyle: this.getTextStyle(), type: 'paragraph', version: 1, }; diff --git a/packages/lexical/src/nodes/LexicalRootNode.ts b/packages/lexical/src/nodes/LexicalRootNode.ts index b99576b8ea4..c226ea81c30 100644 --- a/packages/lexical/src/nodes/LexicalRootNode.ts +++ b/packages/lexical/src/nodes/LexicalRootNode.ts @@ -111,6 +111,8 @@ export class RootNode extends ElementNode { direction: this.getDirection(), format: this.getFormatType(), indent: this.getIndent(), + textFormat: 0, + textStyle: '', type: 'root', version: 1, };