Lexical编辑器状态转换时HTML样式丢失问题求助

问题原因 #

Lexical 的 $generateNodesFromDOM 方法默认仅识别内置节点（如 ParagraphNode、TextNode）支持的属性。你自定义的文本颜色样式属于非内置格式，默认解析逻辑不会处理 <span> 标签里的 style="color: red"——即便DOM中仍保留style属性，Lexical也不会将这些未被识别的样式映射到节点属性上，最终导致解析后样式丢失。

解决方法 #

要保留样式，需给Lexical添加自定义的DOM解析/序列化规则，让它能识别并处理color样式。以下是具体实现步骤：

1. 扩展内置TextNode，支持color属性

创建自定义文本节点（或直接扩展内置TextNode），添加对color属性的序列化与反序列化支持：

import { TextNode, LexicalNode } from 'lexical';

type SerializedColoredTextNode = {
  type: 'colored-text';
  version: number;
  text: string;
  color: string | null;
  format: number;
  detail: number;
  mode: number;
  style?: string;
};

class ColoredTextNode extends TextNode {
  __color: string | null;

  constructor(text: string, color: string | null, key?: string) {
    super(text, key);
    this.__color = color;
  }

  static getType(): string {
    return 'colored-text';
  }

  static clone(node: ColoredTextNode): ColoredTextNode {
    return new ColoredTextNode(node.__text, node.__color, node.__key);
  }

  // 序列化到HTML时，给DOM元素添加color样式
  createDOM(): HTMLElement {
    const dom = super.createDOM({});
    if (this.__color) {
      dom.style.color = this.__color;
    }
    return dom;
  }

  // 从DOM解析时，提取span标签的color样式
  static importDOM(): Record<string, any> | null {
    return {
      span: (domNode: HTMLElement) => {
        const color = domNode.style.color || null;
        if (!color) return null;
        
        return {
          conversion: (node: Node) => {
            const textContent = node.textContent || '';
            return $createColoredTextNode(textContent, color);
          },
          priority: 1, // 优先级高于默认TextNode解析规则
        };
      },
    };
  }

  // 序列化到JSON时保存color属性
  exportJSON(): SerializedColoredTextNode {
    return {
      ...super.exportJSON(),
      type: 'colored-text',
      version: 1,
      color: this.__color,
    };
  }

  // 从JSON解析时恢复color属性
  static importJSON(json: SerializedColoredTextNode): ColoredTextNode {
    const node = $createColoredTextNode(json.text, json.color);
    node.setFormat(json.format);
    node.setDetail(json.detail);
    node.setMode(json.mode);
    node.setStyle(json.style);
    return node;
  }
}

// 辅助创建节点的工具函数
export function $createColoredTextNode(text: string, color: string | null): ColoredTextNode {
  return new ColoredTextNode(text, color);
}

// 类型判断工具函数
export function $isColoredTextNode(node: LexicalNode): node is ColoredTextNode {
  return node instanceof ColoredTextNode;
}

2. 在编辑器中注册自定义节点

在LexicalComposer的初始化配置中添加这个自定义节点，确保解析逻辑能被识别：

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { ColoredTextNode } from './ColoredTextNode';

const initialConfig = {
  nodes: [ColoredTextNode], // 注册自定义节点
  // 其他编辑器配置...
};

function App() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      {/* 你的编辑器组件内容 */}
    </LexicalComposer>
  );
}

3. 验证解析效果

现在重新运行你的流程：

1. 编辑器生成带color样式的HTML字符串
2. 通过DOMParser解析HTML后，调用$generateNodesFromDOM
3. Lexical会识别<span style="color: red">并转换为ColoredTextNode，样式将被完整保留

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