如何在Lexical编辑器复制粘贴时将下划线文本转为斜体？

方法一：拦截粘贴事件处理HTML内容 #

自定义粘贴处理插件，直接修改剪贴板的HTML内容，将下划线相关标签/样式替换为斜体后再插入编辑器。

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { PastePlugin } from '@lexical/react/LexicalPastePlugin';
import { $getSelection, RangeSelection, $insertNodes, $createTextNode } from 'lexical';

const CustomPasteHandler = () => {
  const [editor] = useLexicalComposerContext();

  const handlePaste = (event) => {
    event.preventDefault();
    const htmlContent = event.clipboardData?.getData('text/html');
    const plainText = event.clipboardData?.getData('text/plain');

    if (!htmlContent && !plainText) return;

    // 处理HTML中的下划线格式：替换<u>标签和带underline样式的标签为<em>
    let processedContent = htmlContent || plainText;
    if (htmlContent) {
      processedContent = processedContent.replace(/<u>(.*?)<\/u>/gi, '<em>$1</em>');
      processedContent = processedContent.replace(
        /<([a-z]+)[^>]*style="[^"]*text-decoration:\s*underline[^"]*"[^>]*>(.*?)<\/\1>/gi,
        '<em>$2</em>'
      );
    }

    // 将处理后的内容插入编辑器
    editor.update(() => {
      const selection = $getSelection();
      if (selection instanceof RangeSelection) {
        selection.deleteContents();
        // 解析HTML并转换为Lexical节点
        const parser = new DOMParser();
        const doc = parser.parseFromString(processedContent, 'text/html');
        const nodes = Array.from(doc.body.childNodes).map(node => {
          if (node.nodeType === Node.TEXT_NODE) {
            return $createTextNode(node.textContent || '');
          } else if (node.nodeName === 'EM' || node.nodeName === 'I') {
            const textNode = $createTextNode(node.textContent || '');
            textNode.toggleFormat('italic');
            return textNode;
          }
          // 其他节点类型（如段落、加粗）可按需扩展处理
          return $createTextNode(node.textContent || '');
        });
        $insertNodes(nodes);
      }
    });
  };

  return <PastePlugin onPaste={handlePaste} />;
};

将该组件添加到你的LexicalComposer中：

<LexicalComposer initialConfig={{
  // 你的原有配置...
}}>
  {/* 原有插件 */}
  <OnChangePlugin onChange={onChange} />
  <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
  <RichTextPlugin
    contentEditable={<ContentEditable />}
    placeholder={null}
    ErrorBoundary={LexicalErrorBoundary}
  />
  {/* 新增自定义粘贴插件 */}
  <CustomPasteHandler />
  <CookingDescriptionEditorToolbar
    onToggleEditorMode={onToggleEditorMode}
    editorMode={editorMode}
    id={id}
  />
</LexicalComposer>

方法二：监听粘贴命令，转换编辑器内的下划线格式 #

注册Lexical的PASTE_COMMAND，在粘贴完成后遍历编辑器节点，将带有下划线格式的文本转为斜体，这种方式能覆盖所有生成下划线的场景。

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { PASTE_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';
import { useEffect } from 'react';

const UnderlineToItalicPasteHandler = () => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    const unregisterCommand = editor.registerCommand(
      PASTE_COMMAND,
      () => {
        // 延迟执行，确保粘贴内容已插入编辑器
        setTimeout(() => {
          editor.update(() => {
            const root = editor.getRootElement();
            // 遍历所有文本节点，转换下划线为斜体
            editor.getEditorState().read(() => {
              root.forEachDescendant(node => {
                if (node.isTextNode()) {
                  if (node.hasFormat('underline')) {
                    node.removeFormat('underline');
                    node.addFormat('italic');
                  }
                }
              });
            });
          });
        }, 0);
        return false; // 允许默认粘贴逻辑执行
      },
      COMMAND_PRIORITY_LOW
    );

    return unregisterCommand;
  }, [editor]);

  return null;
};

同样将该组件添加到LexicalComposer中即可。

注意事项 #

• 方法二更通用，能处理HTML粘贴、纯文本粘贴等多种场景下生成的下划线格式
• 若需要处理嵌套标签等复杂格式，可扩展节点遍历逻辑
• 建议测试不同来源的粘贴内容（如Word、网页、其他编辑器），确保转换逻辑覆盖所有情况

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