HTML to Lexical

hai_q_2811 months ago

6

• 

  alessiogr

  11 months ago

  Hey, what exactly is unclear in the documentation? Maybe I can improve it

• 

  hai_q_2811 months ago

  export function HtmlToLexical({ htmlString }: HtmlProps) {

  
  

  const parser = new DOMParser();

  
  

  const dom = parser.parseFromString(htmlString, textHtmlMimeType);

  
  
  

  // Once you have the DOM instance it's easy to generate LexicalNodes.

  
  

  const nodes = $generateNodesFromDOM(editor, dom);

  
  
  

  // Select the root

  
  

  $getRoot().select();

  
  
  

  // Insert them at a selection.

  
  

  $insertNodes(nodes);}

  
  
  
  

  i want to create a function to convert my html String to the lexical format so i want to return the text in lexical json format so i can save the text in my db

  
  
  

  how do you use the method above though?

• 

  alessiogr

  11 months ago

  Here's a better example:

  https://payloadcms.com/docs/rich-text/lexical#html-lexical
  
  

  All the functions prefixed with $ have to be wrapped inside of an

  editor.update()

  call back - otherwise they won't work

• 

  hai_q_2811 months ago

  what do i have to fill the const yourEditorConfig; // <= your editor config here with?

  
  
  

  and how do i return the json after the convertion

• 

  alessiogr

  11 months ago

  what do i have to fill the const yourEditorConfig; // <= your editor config here with?
  

  
  

  You can use

  
  
  sanitizeEditorConfig(defaultEditorConfig)
  
  

  to get the default editor config and just use that one.

  
  

  
  

  and how do i return the json after the convertion
  

  const editorJSON = headlessEditor.getEditorState().toJSON()
• 

  hai_q_2811 months ago

  thank you!