LexicalJS中HashtagNode的正确使用及样式不生效问题排查

问题背景 #

正在学习LexicalJS基础功能，想要实现类似Twitter的哈希标签功能：输入#后自动触发识别，无需手动点击按钮。已修改官方基础示例，在editorConfig中注册了HashtagNode，但输入#相关内容时样式未生效；后续确认编辑器树已正确识别HashtagNode，但对应的样式类未被应用到DOM元素上。

代码示例 #

import * as React from "react";
import { useRef } from "react";
import debounce from 'lodash.debounce';


import ExampleTheme from "./theme";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
import { ListItemNode, ListNode } from "@lexical/list";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { TRANSFORMERS } from "@lexical/markdown";
import { HashtagNode } from "@lexical/hashtag";

import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import TreeViewPlugin from "./plugins/TreeViewPlugin";
import ToolbarPlugin from "./plugins/ToolbarPlugin";
import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
import AutoLinkPlugin from "./plugins/AutoLinkPlugin";

import "./styles.css";

function Placeholder() {
    return <div className="editor-placeholder">Enter some rich text...</div>;
}

const editorConfig = {
    // The editor theme
    theme: ExampleTheme,
    // Handling of errors during update
    onError(error) {
        throw error;
    },
    // Any custom nodes go here
    nodes: [
        HeadingNode,
        ListNode,
        ListItemNode,
        QuoteNode,
        CodeNode,
        CodeHighlightNode,
        TableNode,
        TableCellNode,
        TableRowNode,
        AutoLinkNode,
        LinkNode,
        HashtagNode,
    ]
};

export default function Editor(props) {

    function onChange(editorState) {
        if(props.onChange){
            props.onChange(editorState, JSON.stringify(editorState));
        }
    }

    const delayedOnChangeHandler = useRef(debounce((editorState) => {
        onChange(editorState)
    }, 1000)).current;

    return (
        <LexicalComposer initialConfig={editorConfig}>
            <div className="editor-container">
                <ToolbarPlugin />
                <div className="editor-inner">
                    <RichTextPlugin
                        contentEditable={<ContentEditable className="editor-input" />}
                        placeholder={<Placeholder />}
                        ErrorBoundary={LexicalErrorBoundary}
                    />
                    <OnChangePlugin onChange={delayedOnChangeHandler}/>
                    <HistoryPlugin />
                    <TreeViewPlugin />
                    <AutoFocusPlugin />
                    <CodeHighlightPlugin />
                    <ListPlugin />
                    <LinkPlugin />
                    <AutoLinkPlugin />
                    <ListMaxIndentLevelPlugin maxDepth={7} />
                    <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
                </div>
            </div>
        </LexicalComposer>
    );
}

当前状态 #

编辑器树已正确识别HashtagNode：

root
  └ (1) paragraph  
    ├ (9) hashtag  "#hashtag"
    ├ (10) text  " "
>   └ (14) text  "bold" { format: bold }
>                 ^^^^

但DOM输出中未包含哈希标签的样式类：

<p class="editor-paragraph ltr" dir="ltr">
    <span data-lexical-text="true">#hashtag</span>
    <span data-lexical-text="true"></span>
    <strong class="editor-text-bold" data-lexical-text="true">bold</strong>
</p>

原因分析 #

问题核心在于Lexical主题未配置HashtagNode对应的样式规则：

1. Lexical的自定义节点（如HashtagNode）需要在主题对象中声明对应的样式类映射，否则渲染DOM时不会自动添加样式类
2. 你使用的ExampleTheme未包含hashtag属性，导致HashtagNode渲染为普通<span>，没有应用预期的样式

解决办法 #

1. 更新主题配置，添加哈希标签样式 #

修改ExampleTheme文件，添加hashtag属性，指定对应的样式类：

// ExampleTheme.js
const ExampleTheme = {
  // 原有主题配置...
  hashtag: 'editor-hashtag',
};

export default ExampleTheme;

2. 在CSS中添加哈希标签的样式规则 #

在styles.css中添加对应的样式：

.editor-hashtag {
  color: #1da1f2; /* 类似Twitter的蓝色 */
  cursor: pointer;
  font-weight: 500;
}

3. 确保自动转换逻辑生效（可选） #

虽然编辑器树已识别HashtagNode，若后续出现输入#后未自动转换的情况，可添加HashtagTransformer到MarkdownShortcutPlugin的transformers中：

// 导入HashtagTransformer
import { HashtagTransformer } from "@lexical/hashtag";

// 修改MarkdownShortcutPlugin的transformers属性
<MarkdownShortcutPlugin transformers={[...TRANSFORMERS, HashtagTransformer]} />

验证 #

完成上述修改后，重新输入#hashtag，DOM输出应变为：

<p class="editor-paragraph ltr" dir="ltr">
    <span class="editor-hashtag" data-lexical-text="true">#hashtag</span>
    <span data-lexical-text="true"></span>
    <strong class="editor-text-bold" data-lexical-text="true">bold</strong>
</p>

此时哈希标签的样式会正常应用。

内容的提问来源于stack exchange，提问作者enko