主题

参考

Lexical 支持为编辑器设置主题，如外观、输入框的占位符/提示语等，主要是将 class 类名添加到相应的 DOM 元素上

以下是一个示例

import { createEditor } from 'lexical';

// 自定义主题
const exampleTheme = {
  // 当编辑器的内容顺序是从左向右
  // 就会为 ElementNode 元素节点所对应的 DOM 元素添加上 `ltr` 类名
  // 如果是从右向左，则会添加上 `rtl` 类名
  ltr: 'ltr',
  rtl: 'rtl',
  placeholder: 'editor-placeholder',
  // 为 <p> 元素添加上 `editor-paragraph` 类名
  paragraph: 'editor-paragraph',
};

// 编辑器的配置项
const initialConfig = {
  namespace: 'MyEditor',
  theme: exampleTheme
};

// 通过方法 createEditor() 创建一个编辑器实例
const editor = createEditor(config);

Lexical 官方所定义的一些节点也支持设置主题，如 ParagraphNode 段落节点、HeadingNode 标题节点、QuoteNode 引文节点等，会在节点所对应的 DOM 元素上添加上相应的 class 类名，以下是一个更详细的示例

// 为 Lexical 官方自定义的节点设置主题
const exampleTheme = {
  ltr: 'ltr',
  rtl: 'rtl',
  placeholder: 'editor-placeholder',
  // ParagraphNode 段落节点
  paragraph: 'editor-paragraph',
  // QuoteNode 引文节点
  quote: 'editor-quote',
  // HeadingNode 标题节点
  // 支持为不同层级的标题设置不同的 class 类名
  heading: {
    h1: 'editor-heading-h1',
    h2: 'editor-heading-h2',
    h3: 'editor-heading-h3',
    h4: 'editor-heading-h4',
    h5: 'editor-heading-h5',
    h6: 'editor-heading-h6',
  },
  // 列表节点
  list: {
    nested: {
      listitem: 'editor-nested-listitem',
    },
    ol: 'editor-list-ol',
    ul: 'editor-list-ul',
    listitem: 'editor-listItem',
    listitemChecked: 'editor-listItemChecked',
    listitemUnchecked: 'editor-listItemUnchecked',
  },
  // 标签节点
  hashtag: 'editor-hashtag',
  // 图片节点
  image: 'editor-image',
  // 链接节点
  link: 'editor-link',
  // 文本节点
  text: {
    bold: 'editor-textBold',
    code: 'editor-textCode',
    italic: 'editor-textItalic',
    strikethrough: 'editor-textStrikethrough',
    subscript: 'editor-textSubscript',
    superscript: 'editor-textSuperscript',
    underline: 'editor-textUnderline',
    underlineStrikethrough: 'editor-textUnderlineStrikethrough',
  },
  // 代码节点
  code: 'editor-code',
  codeHighlight: {
    atrule: 'editor-tokenAttr',
    attr: 'editor-tokenAttr',
    boolean: 'editor-tokenProperty',
    builtin: 'editor-tokenSelector',
    cdata: 'editor-tokenComment',
    char: 'editor-tokenSelector',
    class: 'editor-tokenFunction',
    'class-name': 'editor-tokenFunction',
    comment: 'editor-tokenComment',
    constant: 'editor-tokenProperty',
    deleted: 'editor-tokenProperty',
    doctype: 'editor-tokenComment',
    entity: 'editor-tokenOperator',
    function: 'editor-tokenFunction',
    important: 'editor-tokenVariable',
    inserted: 'editor-tokenSelector',
    keyword: 'editor-tokenAttr',
    namespace: 'editor-tokenVariable',
    number: 'editor-tokenProperty',
    operator: 'editor-tokenOperator',
    prolog: 'editor-tokenComment',
    property: 'editor-tokenProperty',
    punctuation: 'editor-tokenPunctuation',
    regex: 'editor-tokenVariable',
    selector: 'editor-tokenSelector',
    string: 'editor-tokenSelector',
    symbol: 'editor-tokenProperty',
    tag: 'editor-tokenProperty',
    url: 'editor-tokenOperator',
    variable: 'editor-tokenVariable',
  },
};