What's wrong with this setup (bold & italic not combining)?

[adatti]

I'm trying to build my own simpler version of the MarkDown plugin demo from the docs. I only want my editor to have the following:

• bold, italic, and bold+italic text
• links
• code (both inline and blocks)

So, I gather I need specific plugins for that, as well as an array of specific transformers. I have put together this sandbox, and I have some questions:

• How do I combine bold & italic using keyboard shortcuts or special syntax. I am importing BOLD_ITALIC_UNDERSCORE, so I would expect a triple underscore to combine the two styles, but it isn't. Plus, the styles applies through keyboard shortcuts (Ctrl+B then Ctrl+I or vice versa) are mutually exclusive.
• I don't know what kind of keyboard shortcuts are needed for links & code (I can't find a reference).
• The logs in the onChange() are displaying the input text, but without any Markdown syntax. It's all stripped, but what if I'd like the Markdown text or any output format that tells me where the all bold/italic/links/code/etc is. How do I access that?

I realize these are basic questions, but I'm really struggling with the incomplete docs.

[vcellu]

I am also running into this problem. I turned off all plugins, but I can't seem to this to work. It's also happening in the https://lexical.dev/docs/demos/plugins/lists example. If I type CMD+B it bolds, then I type CMD+I but nothing.

[vcellu]

Aha! I had to define the styles in both the theme and css

.textBold {
  font-weight: bold;
}

.textItalic {
  font-style: italic;
}

And then in the theme

const theme = {
 ...
 text: {
    bold: "textBold",
    italic: "textItalic",
    underline: "textUnderline",
  },
}

[Dindaleon]

thanks, I had the same issue and this solved it :)

[PrasKams]

Thank you very much i had same issue and it worked for me as well, with some tweaks, cos our app has its own theme and Lexical config didn't liked using it/referencing it. So this is how i did in the main rich text editor component

import { EditorThemeClasses } from 'lexical'; 
const theme: EditorThemeClasses ={
  text: {
    bold: "font-semibold",// tailwind class
    italic: "italic", //tailwind class
  }
}

const initialConfig = {
    namespace: "RichtextEditor",
    onError(error: Error) {
      throw error;
    },
    theme,
    nodes: [HeadingNode, CodeHighlightNode, CodeNode, LinkNode, AutoLinkNode ]
}