Skip to content

Commit

Permalink
[Breaking Change][lexical] Feature: Add updateFromJSON and move more …
Browse files Browse the repository at this point in the history 
…textFormat/textStyle to ElementNode (#6970)
  • Loading branch information
@etrepum
etrepum authored Jan 1, 2025
1 parent aaa9009 commit 7c21d4f
Show file tree
Hide file tree
Showing 66 changed files with 809 additions and 578 deletions.
29 changes: 18 additions & 11 deletions packages/lexical-code/src/CodeHighlightNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {
EditorConfig,
EditorThemeClasses,
LexicalNode,
LexicalUpdateJSON,
LineBreakNode,
NodeKey,
SerializedTextNode,
Expand Down Expand Up @@ -97,7 +98,7 @@ export class CodeHighlightNode extends TextNode {
__highlightType: string | null | undefined;

constructor(
text: string,
text: string = '',
highlightType?: string | null | undefined,
key?: NodeKey,
) {
Expand All @@ -122,6 +123,12 @@ export class CodeHighlightNode extends TextNode {
return self.__highlightType;
}

setHighlightType(highlightType?: string | null | undefined): this {
const self = this.getWritable();
self.__highlightType = highlightType || undefined;
return self;
}

canHaveFormat(): boolean {
return false;
}
Expand Down Expand Up @@ -160,15 +167,15 @@ export class CodeHighlightNode extends TextNode {
static importJSON(
serializedNode: SerializedCodeHighlightNode,
): CodeHighlightNode {
const node = $createCodeHighlightNode(
serializedNode.text,
serializedNode.highlightType,
);
node.setFormat(serializedNode.format);
node.setDetail(serializedNode.detail);
node.setMode(serializedNode.mode);
node.setStyle(serializedNode.style);
return node;
return $createCodeHighlightNode().updateFromJSON(serializedNode);
}

updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedCodeHighlightNode>,
): this {
return super
.updateFromJSON(serializedNode)
.setHighlightType(serializedNode.highlightType);
}

exportJSON(): SerializedCodeHighlightNode {
Expand Down Expand Up @@ -205,7 +212,7 @@ function getHighlightThemeClass(
}

export function $createCodeHighlightNode(
text: string,
text: string = '',
highlightType?: string | null | undefined,
): CodeHighlightNode {
return $applyNodeReplacement(new CodeHighlightNode(text, highlightType));
Expand Down
20 changes: 12 additions & 8 deletions packages/lexical-code/src/CodeNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type {
EditorConfig,
LexicalEditor,
LexicalNode,
LexicalUpdateJSON,
NodeKey,
ParagraphNode,
RangeSelection,
Expand Down Expand Up @@ -88,7 +89,7 @@ export class CodeNode extends ElementNode {

constructor(language?: string | null | undefined, key?: NodeKey) {
super(key);
this.__language = language;
this.__language = language || undefined;
this.__isSyntaxHighlightSupported = isLanguageSupportedByPrism(language);
}

Expand Down Expand Up @@ -212,11 +213,13 @@ export class CodeNode extends ElementNode {
}

static importJSON(serializedNode: SerializedCodeNode): CodeNode {
const node = $createCodeNode(serializedNode.language);
node.setFormat(serializedNode.format);
node.setIndent(serializedNode.indent);
node.setDirection(serializedNode.direction);
return node;
return $createCodeNode().updateFromJSON(serializedNode);
}

updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedCodeNode>): this {
return super
.updateFromJSON(serializedNode)
.setLanguage(serializedNode.language);
}

exportJSON(): SerializedCodeNode {
Expand Down Expand Up @@ -317,11 +320,12 @@ export class CodeNode extends ElementNode {
return true;
}

setLanguage(language: string): void {
setLanguage(language: string | null | undefined): this {
const writable = this.getWritable();
writable.__language = language;
writable.__language = language || undefined;
writable.__isSyntaxHighlightSupported =
isLanguageSupportedByPrism(language);
return writable;
}

getLanguage(): string | null | undefined {
Expand Down
18 changes: 2 additions & 16 deletions packages/lexical-hashtag/src/LexicalHashtagNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,7 @@
*
*/

import type {
EditorConfig,
LexicalNode,
NodeKey,
SerializedTextNode,
} from 'lexical';
import type {EditorConfig, LexicalNode, SerializedTextNode} from 'lexical';

import {addClassNamesToElement} from '@lexical/utils';
import {$applyNodeReplacement, TextNode} from 'lexical';
Expand All @@ -26,23 +21,14 @@ export class HashtagNode extends TextNode {
return new HashtagNode(node.__text, node.__key);
}

constructor(text: string, key?: NodeKey) {
super(text, key);
}

createDOM(config: EditorConfig): HTMLElement {
const element = super.createDOM(config);
addClassNamesToElement(element, config.theme.hashtag);
return element;
}

static importJSON(serializedNode: SerializedTextNode): HashtagNode {
const node = $createHashtagNode(serializedNode.text);
node.setFormat(serializedNode.format);
node.setDetail(serializedNode.detail);
node.setMode(serializedNode.mode);
node.setStyle(serializedNode.style);
return node;
return $createHashtagNode().updateFromJSON(serializedNode);
}

canInsertTextBefore(): boolean {
Expand Down
73 changes: 42 additions & 31 deletions packages/lexical-link/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type {
EditorConfig,
LexicalCommand,
LexicalNode,
LexicalUpdateJSON,
NodeKey,
Point,
RangeSelection,
Expand Down Expand Up @@ -87,7 +88,11 @@ export class LinkNode extends ElementNode {
);
}

constructor(url: string, attributes: LinkAttributes = {}, key?: NodeKey) {
constructor(
url: string = '',
attributes: LinkAttributes = {},
key?: NodeKey,
) {
super(key);
const {target = null, rel = null, title = null} = attributes;
this.__url = url;
Expand Down Expand Up @@ -162,18 +167,17 @@ export class LinkNode extends ElementNode {
};
}

static importJSON(
serializedNode: SerializedLinkNode | SerializedAutoLinkNode,
): LinkNode {
const node = $createLinkNode(serializedNode.url, {
rel: serializedNode.rel,
target: serializedNode.target,
title: serializedNode.title,
});
node.setFormat(serializedNode.format);
node.setIndent(serializedNode.indent);
node.setDirection(serializedNode.direction);
return node;
static importJSON(serializedNode: SerializedLinkNode): LinkNode {
return $createLinkNode().updateFromJSON(serializedNode);
}

updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLinkNode>): this {
return super
.updateFromJSON(serializedNode)
.setURL(serializedNode.url)
.setRel(serializedNode.rel || null)
.setTarget(serializedNode.target || null)
.setTitle(serializedNode.title || null);
}

sanitizeUrl(url: string): string {
Expand Down Expand Up @@ -203,36 +207,40 @@ export class LinkNode extends ElementNode {
return this.getLatest().__url;
}

setURL(url: string): void {
setURL(url: string): this {
const writable = this.getWritable();
writable.__url = url;
return writable;
}

getTarget(): null | string {
return this.getLatest().__target;
}

setTarget(target: null | string): void {
setTarget(target: null | string): this {
const writable = this.getWritable();
writable.__target = target;
return writable;
}

getRel(): null | string {
return this.getLatest().__rel;
}

setRel(rel: null | string): void {
setRel(rel: null | string): this {
const writable = this.getWritable();
writable.__rel = rel;
return writable;
}

getTitle(): null | string {
return this.getLatest().__title;
}

setTitle(title: null | string): void {
setTitle(title: null | string): this {
const writable = this.getWritable();
writable.__title = title;
return writable;
}

insertNewAfter(
Expand Down Expand Up @@ -316,7 +324,7 @@ function $convertAnchorElement(domNode: Node): DOMConversionOutput {
* @returns The LinkNode.
*/
export function $createLinkNode(
url: string,
url: string = '',
attributes?: LinkAttributes,
): LinkNode {
return $applyNodeReplacement(new LinkNode(url, attributes));
Expand Down Expand Up @@ -347,7 +355,11 @@ export class AutoLinkNode extends LinkNode {
/** Indicates whether the autolink was ever unlinked. **/
__isUnlinked: boolean;

constructor(url: string, attributes: AutoLinkAttributes = {}, key?: NodeKey) {
constructor(
url: string = '',
attributes: AutoLinkAttributes = {},
key?: NodeKey,
) {
super(url, attributes, key);
this.__isUnlinked =
attributes.isUnlinked !== undefined && attributes.isUnlinked !== null
Expand Down Expand Up @@ -376,7 +388,7 @@ export class AutoLinkNode extends LinkNode {
return this.__isUnlinked;
}

setIsUnlinked(value: boolean) {
setIsUnlinked(value: boolean): this {
const self = this.getWritable();
self.__isUnlinked = value;
return self;
Expand All @@ -402,16 +414,15 @@ export class AutoLinkNode extends LinkNode {
}

static importJSON(serializedNode: SerializedAutoLinkNode): AutoLinkNode {
const node = $createAutoLinkNode(serializedNode.url, {
isUnlinked: serializedNode.isUnlinked,
rel: serializedNode.rel,
target: serializedNode.target,
title: serializedNode.title,
});
node.setFormat(serializedNode.format);
node.setIndent(serializedNode.indent);
node.setDirection(serializedNode.direction);
return node;
return $createAutoLinkNode().updateFromJSON(serializedNode);
}

updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedAutoLinkNode>,
): this {
return super
.updateFromJSON(serializedNode)
.setIsUnlinked(serializedNode.isUnlinked || false);
}

static importDOM(): null {
Expand Down Expand Up @@ -456,7 +467,7 @@ export class AutoLinkNode extends LinkNode {
* @returns The LinkNode.
*/
export function $createAutoLinkNode(
url: string,
url: string = '',
attributes?: AutoLinkAttributes,
): AutoLinkNode {
return $applyNodeReplacement(new AutoLinkNode(url, attributes));
Expand Down
35 changes: 22 additions & 13 deletions packages/lexical-list/src/LexicalListItemNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {
EditorConfig,
EditorThemeClasses,
LexicalNode,
LexicalUpdateJSON,
NodeKey,
ParagraphNode,
RangeSelection,
Expand Down Expand Up @@ -123,12 +124,16 @@ export class ListItemNode extends ElementNode {
}

static importJSON(serializedNode: SerializedListItemNode): ListItemNode {
const node = $createListItemNode();
node.setChecked(serializedNode.checked);
node.setValue(serializedNode.value);
node.setFormat(serializedNode.format);
node.setDirection(serializedNode.direction);
return node;
return $createListItemNode().updateFromJSON(serializedNode);
}

updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedListItemNode>,
): this {
return super
.updateFromJSON(serializedNode)
.setValue(serializedNode.value)
.setChecked(serializedNode.checked);
}

exportDOM(editor: LexicalEditor): DOMExportOutput {
Expand Down Expand Up @@ -257,9 +262,10 @@ export class ListItemNode extends ElementNode {
_: RangeSelection,
restoreSelection = true,
): ListItemNode | ParagraphNode {
const newElement = $createListItemNode(
this.__checked == null ? undefined : false,
);
const newElement = $createListItemNode()
.updateFromJSON(this.exportJSON())
.setChecked(this.getChecked() ? false : undefined);

this.insertAfter(newElement, restoreSelection);

return newElement;
Expand Down Expand Up @@ -310,9 +316,10 @@ export class ListItemNode extends ElementNode {
return self.__value;
}

setValue(value: number): void {
setValue(value: number): this {
const self = this.getWritable();
self.__value = value;
return self;
}

getChecked(): boolean | undefined {
Expand All @@ -328,13 +335,15 @@ export class ListItemNode extends ElementNode {
return listType === 'check' ? Boolean(self.__checked) : undefined;
}

setChecked(checked?: boolean): void {
setChecked(checked?: boolean): this {
const self = this.getWritable();
self.__checked = checked;
return self;
}

toggleChecked(): void {
this.setChecked(!this.__checked);
toggleChecked(): this {
const self = this.getWritable();
return self.setChecked(!self.__checked);
}

getIndent(): number {
Expand Down
Loading

0 comments on commit 7c21d4f

Please sign in to comment.