1

I am building an email client which uses lexical to convert the Rich Text into HTML using $generateHtmlFromNodes. I have specified the Tailwindcss class names in the lexical theme property of the initialConfig.

  const theme: EditorThemeClasses = {
    paragraph: 'text-base mb-1',
    center: 'text-center text-blue-200',
    list: {
      nested: {
        listitem: 'list-disc',
      },
      ol: 'list-decimal',
      ul: 'list-disc',
      listitem: 'list-inside',
    },
    text: {
      bold: 'font-bold',
      italic: 'italic',
      underline: 'underline',
      strikethrough: 'line-through',
      underlineStrikethrough: 'line-through underline',
    },
    link: 'text-blue-500 hover:text-blue-600',
    image: 'object-contain flex flex-row w-2/3 p-4 h-auto',
  };

  const initialConfig = {
    namespace: 'MyEditor',
    editable: true,
    nodes: [ImageNode, ListNode, ListItemNode],
    theme,
    onError(error) {
      throw error;
    },
  };

I am able to get fully renderable html with the correct class names, however when the email is sent, the CDN tag is either stripped from the email or does not convert the styles correctly.

Is there a way to prefer inline css over class names in either the Lexical initialConfig or when using $generateHtmlFromNodes?

Rafael Zasas
  • 891
  • 8
  • 27
  • Not sure about your question as written, but, I do know that many email clients do not fully support flexbox, inline or not. So perhaps you also want to be asking "I want this look", but I get this look: help? In which case, given it's a different question, prob ask it separately (you'll need to write styles inline too). – Nathan Sep 27 '22 at 00:53
  • @Nathan I am aware of the limitations of css in emails. I’m looking to do very simple things like change text color, or underline. My lexical editor successfully applied the correct class names, but even if I wrote simple CSS classes in the template- most clients will strip the classes away. – Rafael Zasas Sep 27 '22 at 01:04
  • @RafaelZasas have you been able to add the inline css? – Emaborsa Feb 15 '23 at 09:30
  • @RafaelZasas, did you ever figure this out? Would love to hear your solution if you did. – Darryl May 06 '23 at 20:56
  • I haven’t worked on this project in a while but as of my last contact with the lexical folks, they did not have any out of the box way of generating inline css – Rafael Zasas May 06 '23 at 21:06

0 Answers0