ElementNode,
LexicalEditor,
LexicalNode,
- ParagraphNode, SerializedElementNode, Spread
+ ParagraphNode, Spread
} from 'lexical';
import type {EditorConfig} from "lexical/LexicalEditor";
import type {RangeSelection} from "lexical/LexicalSelection";
-import {el} from "../utils/dom";
+import {
+ CommonBlockAlignment, commonPropertiesDifferent, deserializeCommonBlockNode,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
export type CalloutCategory = 'info' | 'danger' | 'warning' | 'success';
export type SerializedCalloutNode = Spread<{
category: CalloutCategory;
- id: string;
-}, SerializedElementNode>
+}, SerializedCommonBlockNode>
export class CalloutNode extends ElementNode {
__id: string = '';
__category: CalloutCategory = 'info';
+ __alignment: CommonBlockAlignment = '';
+ __inset: number = 0;
static getType() {
return 'callout';
static clone(node: CalloutNode) {
const newNode = new CalloutNode(node.__category, node.__key);
newNode.__id = node.__id;
+ newNode.__alignment = node.__alignment;
+ newNode.__inset = node.__inset;
return newNode;
}
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
+ setInset(size: number) {
+ const self = this.getWritable();
+ self.__inset = size;
+ }
+
+ getInset(): number {
+ const self = this.getLatest();
+ return self.__inset;
+ }
+
createDOM(_config: EditorConfig, _editor: LexicalEditor) {
const element = document.createElement('p');
element.classList.add('callout', this.__category || '');
- if (this.__id) {
- element.setAttribute('id', this.__id);
- }
+ updateElementWithCommonBlockProps(element, this);
return element;
}
- updateDOM(prevNode: unknown, dom: HTMLElement) {
- // Returning false tells Lexical that this node does not need its
- // DOM element replacing with a new copy from createDOM.
- return false;
+ updateDOM(prevNode: CalloutNode): boolean {
+ return prevNode.__category !== this.__category ||
+ commonPropertiesDifferent(prevNode, this);
}
insertNewAfter(selection: RangeSelection, restoreSelection?: boolean): CalloutNode|ParagraphNode {
}
const node = new CalloutNode(category);
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
return {
node,
version: 1,
category: this.__category,
id: this.__id,
+ alignment: this.__alignment,
+ inset: this.__inset,
};
}
static importJSON(serializedNode: SerializedCalloutNode): CalloutNode {
const node = $createCalloutNode(serializedNode.category);
- node.setId(serializedNode.id);
+ deserializeCommonBlockNode(serializedNode, node);
return node;
}