React Lexical节点无法保留原始HTML样式的解决问询

问题根源 #

Lexical默认的HTML反序列化逻辑不会自动解析<span>标签的style属性并映射到TextNode的style字段，导致反序列化后样式丢失。

解决方案 #

你需要扩展Lexical的HTML反序列化规则，手动处理span标签的样式，并将其赋值给对应的TextNode。

1. 自定义HTML反序列化处理器

在调用$convertFromHtml（或htmlToLexical）时，添加自定义的节点处理器来处理span标签：

import { $convertFromHtml } from '@lexical/html';
import { TextNode } from 'lexical';

// 自定义span处理函数
const customSpanHandler = (domNode, lexicalNode) => {
  if (lexicalNode instanceof TextNode) {
    const style = domNode.style.cssText;
    if (style) {
      // 将style设置到TextNode的style属性
      lexicalNode.setStyle(style);
    }
  }
  return lexicalNode;
};

// 反序列化时使用自定义处理器
editor.update(() => {
  const htmlContent = '你的HTML内容';
  $convertFromHtml(htmlContent, {
    nodeTransforms: [
      // 注册span标签的处理
      (node) => {
        if (node instanceof HTMLElement && node.tagName === 'SPAN') {
          return customSpanHandler(node, node.__lexicalNode);
        }
        return node;
      },
    ],
  });
});

2. 确保序列化时保留样式

同时要确认你的HTML序列化配置正确包含了TextNode的style。默认情况下，Lexical的$generateHtml会输出style属性，但如果有自定义主题或序列化规则，需要确保TextNode的style被正确序列化：

import { $generateHtml } from '@lexical/html';

const html = $generateHtml(editor.getEditorState(), {
  // 确保TextNode的style被包含
  text: (node) => {
    const style = node.getStyle();
    return {
      attributes: style ? { style } : {},
      type: 'span',
    };
  },
});

3. 优先读取原始节点JSON中的样式

反序列化时，直接从span的data-lexical-node-json属性读取原始style字段更准确（避免浏览器自动转换style格式，比如rgb转十六进制）：

修改自定义处理器：

const customSpanHandler = (domNode, lexicalNode) => {
  if (lexicalNode instanceof TextNode) {
    const nodeJson = domNode.getAttribute('data-lexical-node-json');
    if (nodeJson) {
      try {
        const { style } = JSON.parse(nodeJson);
        if (style) {
          lexicalNode.setStyle(style);
        }
      } catch (e) {
        // 解析失败时回退到style属性
        const style = domNode.style.cssText;
        if (style) {
          lexicalNode.setStyle(style);
        }
      }
    }
  }
  return lexicalNode;
};

关键说明 #

• Lexical的TextNode通过setStyle和getStyle方法管理内联样式，反序列化时需要手动将HTML中的style映射到这里。
• 优先从data-lexical-node-json读取原始样式，能保证样式和编辑时完全一致。

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