React TypeScript+Tailwind项目Lexical富文本编辑器格式问题求助

问题 #

1. 下划线和删除线无法显示，元素审查也看不到对应样式
2. 加粗与斜体功能无法同时生效

修复问题1：下划线和删除线不显示 #

原因 #

Lexical中，underline和strikethrough属于文本样式（通过text-decoration CSS属性实现），而非FORMAT_TEXT_COMMAND处理的格式类型（bold/italic对应<b>/<i>标签）。直接调用FORMAT_TEXT_COMMAND无法正确应用这类样式，且selection.hasFormat('underline')无法检测样式状态。

修复步骤 #

1. 导入所需工具函数
   在ToolbarPlugin.tsx中新增$toggleStyleText导入：

import {
    $patchStyleText,
    $getSelectionStyleValueForProperty,
    $toggleStyleText,
} from '@lexical/selection';

2. 修改按钮点击逻辑
   替换下划线和删除线按钮的onClick事件，直接通过$toggleStyleText切换样式：

<ToolbarButton
    onClick={() => {
        editor.update(() => {
            const selection = $getSelection();
            if ($isRangeSelection(selection)) {
                $toggleStyleText(selection, 'text-decoration', 'underline');
            }
        });
    }}
    isDisabled={false}
    isActive={isUnderline}
    label="Underline"
    iconName={faUnderline}
/>
<ToolbarButton
    onClick={() => {
        editor.update(() => {
            const selection = $getSelection();
            if ($isRangeSelection(selection)) {
                $toggleStyleText(selection, 'text-decoration', 'line-through');
            }
        });
    }}
    isDisabled={false}
    isActive={isStrikethrough}
    label="Strikethrough"
    iconName={faStrikethrough}
/>

3. 更新状态检测逻辑
   修改updateToolbar函数，通过检测text-decoration属性值判断样式是否激活：

const updateToolbar = useCallback(() => {
    const selection = $getSelection();
    if ($isRangeSelection(selection)) {
        setIsBold(selection.hasFormat('bold'));
        setIsItalic(selection.hasFormat('italic'));
        
        // 检测下划线和删除线状态
        const textDecoration = $getSelectionStyleValueForProperty(selection, 'text-decoration', '');
        setIsUnderline(textDecoration.includes('underline'));
        setIsStrikethrough(textDecoration.includes('line-through'));
        
        setFontColor(
            $getSelectionStyleValueForProperty(selection, 'color', '#000'),
        );
    }
}, []);

修复问题2：加粗与斜体无法同时生效 #

原因 #

自定义注册的FORMAT_TEXT_COMMAND命令返回true，阻止了Lexical内部默认的格式化逻辑。默认逻辑支持叠加多种格式，而自定义实现仅调用selection.formatText(format)，无法正确处理多格式叠加场景。

修复步骤 #

删除ToolbarPlugin.tsx中useEffect内的FORMAT_TEXT_COMMAND注册代码块：

// 移除这段代码
editor.registerCommand(
    FORMAT_TEXT_COMMAND,
    (format) => {
        console.log('format', format);
        const selection = $getSelection();
        if (!$isRangeSelection(selection)) {
            console.error('Invalid selection');
            return false;
        }
        selection.formatText(format);
        updateToolbar();
        return true;
    },
    LowPriority,
),

保留原有的加粗、斜体按钮逻辑即可：

<ToolbarButton
    onClick={() =>
        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
    }
    isDisabled={false}
    isActive={isBold}
    label="Bold"
    iconName={faBold}
/>
<ToolbarButton
    onClick={() =>
        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
    }
    isDisabled={false}
    isActive={isItalic}
    label="Italic"
    iconName={faItalic}
/>

额外验证 #

确认Theme配置中的文本样式已正确设置（现有代码已满足要求，无需修改）：

text: {
    bold: 'font-bold',
    italic: 'italic',
    strikethrough: 'line-through',
    underline: 'underline',
    underlineStrikethrough: 'underline line-through',
    // ...其他配置
}

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