A angular binding for lexical

angular custom elementcreate a normal angular compment1@Component({2 selector:'lexical-hr',3 template:'<hr/>'4})5export class LexicalHr{6 constructor() {7 }8}declare golcal interface1declare 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 browser1export 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 node1export const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void> =2 createCommand();34export class HorizontalRuleNode extends DecoratorNode<NgElement &WithProperties<LexicalHr>> {5 static getType(): string {6 return 'horizontalrule';7 }89 static clone(node: HorizontalRuleNode): HorizontalRuleNode {10 return new HorizontalRuleNode(node.__key);11 }1213 static importDOM(): DOMConversionMap | null {14 return {15 hr: (node: Node) => ({16 conversion: convertHorizontalRuleElement,17 priority: 0,18 }),19 };20 }2122 override exportDOM(): DOMExportOutput {23 return {element: document.createElement('hr')};24 }2526 override createDOM(): HTMLElement {27 const div = document.createElement('div');28 div.style.display = 'contents';29 return div;30 }3132 override getTextContent() {33 return '\n';34 }3536 override isTopLevel() {37 return true;38 }3940 override updateDOM() {41 return false;42 }4344 override decorate():any{45 const myHrNode = document.createElement('lexical-hr');46 return myHrNode;47 }48}4950function convertHorizontalRuleElement(): DOMConversionOutput {51 return {node: $createHorizontalRuleNode()};52}5354export function $createHorizontalRuleNode(): HorizontalRuleNode {55 return new HorizontalRuleNode();56}5758export 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 propertyfor each input of the corresponding component.register decorator listener1 this.editor.registerDecoratorListener((decorator) => {2 for (let i in decorator) {3this.editor.getElementByKey(i)?.replaceChildren(decorator[i])4 }5 })