A angular binding for lexical
create a normal angular compment
1@Component({
2 selector:'lexical-hr',
3 template:'<hr/>'
4})
5export class LexicalHr{
6 constructor() {
7 }
8}
declare golcal interface
1declare global {
2 interface HTMLElementTagNameMap {
3 'my-dialog': NgElement & WithProperties<{content: string}>;
4 'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
5 // 'lexical-image':NgElement & WithProperties<ImageComponent>
6 'lexical-hr':NgElement & WithProperties<LexicalHr>
7 }
8}
Register the custom element with the browser
1export class AppComponent{
2 constructor(private injector:Injector) {
3 const LexicalHrElement = createCustomElement(LexicalHr, {injector});
4 customElements.define('lexical-hr', LexicalHrElement);
5 }
6}
create lexical’s decorate node
1export const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void> =
2 createCommand();
3
4export class HorizontalRuleNode extends DecoratorNode<NgElement & WithProperties<LexicalHr>> {
5 static getType(): string {
6 return 'horizontalrule';
7 }
8
9 static clone(node: HorizontalRuleNode): HorizontalRuleNode {
10 return new HorizontalRuleNode(node.__key);
11 }
12
13 static importDOM(): DOMConversionMap | null {
14 return {
15 hr: (node: Node) => ({
16 conversion: convertHorizontalRuleElement,
17 priority: 0,
18 }),
19 };
20 }
21
22 override exportDOM(): DOMExportOutput {
23 return {element: document.createElement('hr')};
24 }
25
26 override createDOM(): HTMLElement {
27 const div = document.createElement('div');
28 div.style.display = 'contents';
29 return div;
30 }
31
32 override getTextContent() {
33 return '\n';
34 }
35
36 override isTopLevel() {
37 return true;
38 }
39
40 override updateDOM() {
41 return false;
42 }
43
44 override decorate():any{
45 const myHrNode = document.createElement('lexical-hr');
46 return myHrNode;
47 }
48}
49
50function convertHorizontalRuleElement(): DOMConversionOutput {
51 return {node: $createHorizontalRuleNode()};
52}
53
54export function $createHorizontalRuleNode(): HorizontalRuleNode {
55 return new HorizontalRuleNode();
56}
57
58export function $isHorizontalRuleNode(node: LexicalNode | null) {
59 return node instanceof HorizontalRuleNode;
60}
The type of 1myHrNode returned by decorate() is 1NgElement & WithProperties<LexicalHr>, these custom elements will have a property for each input of the corresponding component.
register decorator listener
1 this.editor.registerDecoratorListener((decorator) => {
2 for (let i in decorator) {
3 this.editor.getElementByKey(i)?.replaceChildren(decorator[i])
4 }
5 })