2024-06-06 21:43:50 +08:00
|
|
|
import {
|
|
|
|
DOMConversion,
|
|
|
|
DOMConversionMap, DOMConversionOutput,
|
|
|
|
ElementNode,
|
|
|
|
LexicalEditor,
|
|
|
|
LexicalNode,
|
2024-08-11 23:08:51 +08:00
|
|
|
SerializedElementNode, Spread,
|
2024-09-22 19:07:24 +08:00
|
|
|
EditorConfig,
|
2024-06-06 21:43:50 +08:00
|
|
|
} from 'lexical';
|
2024-08-04 01:14:01 +08:00
|
|
|
|
|
|
|
import {el} from "../utils/dom";
|
2024-09-22 19:07:24 +08:00
|
|
|
import {extractDirectionFromElement} from "./_common";
|
2024-06-06 21:43:50 +08:00
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
export type SerializedDetailsNode = Spread<{
|
|
|
|
id: string;
|
|
|
|
}, SerializedElementNode>
|
|
|
|
|
2024-06-06 21:43:50 +08:00
|
|
|
export class DetailsNode extends ElementNode {
|
2024-08-11 23:08:51 +08:00
|
|
|
__id: string = '';
|
2024-06-06 21:43:50 +08:00
|
|
|
|
|
|
|
static getType() {
|
|
|
|
return 'details';
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
setId(id: string) {
|
|
|
|
const self = this.getWritable();
|
|
|
|
self.__id = id;
|
|
|
|
}
|
|
|
|
|
|
|
|
getId(): string {
|
|
|
|
const self = this.getLatest();
|
|
|
|
return self.__id;
|
|
|
|
}
|
|
|
|
|
|
|
|
static clone(node: DetailsNode): DetailsNode {
|
|
|
|
const newNode = new DetailsNode(node.__key);
|
|
|
|
newNode.__id = node.__id;
|
2024-09-22 19:07:24 +08:00
|
|
|
newNode.__dir = node.__dir;
|
2024-08-11 23:08:51 +08:00
|
|
|
return newNode;
|
2024-06-06 21:43:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
createDOM(_config: EditorConfig, _editor: LexicalEditor) {
|
2024-08-11 23:08:51 +08:00
|
|
|
const el = document.createElement('details');
|
|
|
|
if (this.__id) {
|
|
|
|
el.setAttribute('id', this.__id);
|
|
|
|
}
|
|
|
|
|
2024-09-22 19:07:24 +08:00
|
|
|
if (this.__dir) {
|
|
|
|
el.setAttribute('dir', this.__dir);
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
return el;
|
2024-06-06 21:43:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
updateDOM(prevNode: DetailsNode, dom: HTMLElement) {
|
2024-09-22 19:07:24 +08:00
|
|
|
return prevNode.__id !== this.__id
|
|
|
|
|| prevNode.__dir !== this.__dir;
|
2024-06-06 21:43:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
static importDOM(): DOMConversionMap|null {
|
|
|
|
return {
|
|
|
|
details(node: HTMLElement): DOMConversion|null {
|
|
|
|
return {
|
|
|
|
conversion: (element: HTMLElement): DOMConversionOutput|null => {
|
2024-08-11 23:08:51 +08:00
|
|
|
const node = new DetailsNode();
|
|
|
|
if (element.id) {
|
|
|
|
node.setId(element.id);
|
|
|
|
}
|
|
|
|
|
2024-09-22 19:07:24 +08:00
|
|
|
if (element.dir) {
|
|
|
|
node.setDirection(extractDirectionFromElement(element));
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
return {node};
|
2024-06-06 21:43:50 +08:00
|
|
|
},
|
|
|
|
priority: 3,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
exportJSON(): SerializedDetailsNode {
|
2024-06-06 21:43:50 +08:00
|
|
|
return {
|
|
|
|
...super.exportJSON(),
|
|
|
|
type: 'details',
|
|
|
|
version: 1,
|
2024-08-11 23:08:51 +08:00
|
|
|
id: this.__id,
|
2024-06-06 21:43:50 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
static importJSON(serializedNode: SerializedDetailsNode): DetailsNode {
|
|
|
|
const node = $createDetailsNode();
|
|
|
|
node.setId(serializedNode.id);
|
2024-09-22 19:07:24 +08:00
|
|
|
node.setDirection(serializedNode.direction);
|
2024-08-11 23:08:51 +08:00
|
|
|
return node;
|
2024-06-06 21:43:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export function $createDetailsNode() {
|
|
|
|
return new DetailsNode();
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
export function $isDetailsNode(node: LexicalNode | null | undefined): node is DetailsNode {
|
2024-06-06 21:43:50 +08:00
|
|
|
return node instanceof DetailsNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class SummaryNode extends ElementNode {
|
|
|
|
|
|
|
|
static getType() {
|
|
|
|
return 'summary';
|
|
|
|
}
|
|
|
|
|
|
|
|
static clone(node: SummaryNode) {
|
|
|
|
return new SummaryNode(node.__key);
|
|
|
|
}
|
|
|
|
|
|
|
|
createDOM(_config: EditorConfig, _editor: LexicalEditor) {
|
|
|
|
return el('summary');
|
|
|
|
}
|
|
|
|
|
|
|
|
updateDOM(prevNode: DetailsNode, dom: HTMLElement) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
static importDOM(): DOMConversionMap|null {
|
|
|
|
return {
|
|
|
|
summary(node: HTMLElement): DOMConversion|null {
|
|
|
|
return {
|
|
|
|
conversion: (element: HTMLElement): DOMConversionOutput|null => {
|
|
|
|
return {
|
|
|
|
node: new SummaryNode(),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
priority: 3,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
exportJSON(): SerializedElementNode {
|
|
|
|
return {
|
|
|
|
...super.exportJSON(),
|
|
|
|
type: 'summary',
|
|
|
|
version: 1,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
static importJSON(serializedNode: SerializedElementNode): SummaryNode {
|
2024-06-06 21:43:50 +08:00
|
|
|
return $createSummaryNode();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
export function $createSummaryNode(): SummaryNode {
|
2024-06-06 21:43:50 +08:00
|
|
|
return new SummaryNode();
|
|
|
|
}
|
|
|
|
|
2024-08-11 23:08:51 +08:00
|
|
|
export function $isSummaryNode(node: LexicalNode | null | undefined): node is SummaryNode {
|
2024-06-06 21:43:50 +08:00
|
|
|
return node instanceof SummaryNode;
|
|
|
|
}
|