import {
  createEditor,
} from 'lexical';

 initialConfig = {
  namespace: 'Lexical',
  // Register nodes specific for @lexical/rich-text
  nodes: [],
  onError: (error: Error) => {
    throw error;
  },
  // theme: {
  //   // Adding styling to Quote node, see lexical-styles.css
  //   // quote: 'lexical__quote ',  this is an example
  // },
};

private createEditor(editableContainer: HTMLElement): void {
    this.editor = createEditor(initialConfig);
    this.editor.setRootElement(editableContainer);

    mergeRegister(
      registerRichText(this.editor),
      registerHistory(this.editor, createEmptyHistoryState(), 300),
    );
  }

public async initialize(): Promise<void> {
    // Creates iframe element with srcDoc
    const iframeDocument = this.renderIframe();

    iframeDocument.onload = () => {
      const editableContainer = frameDocument.contentDocument?.querySelector('#lexical-editor') as HTMLElement;

      if (editableContainer) {
        this.createEditor(editableContainer);
      } else {
        // eslint-disable-next-line
        console.error('Editable container not found in iframe');
      }
    };
  }