Lexical编辑器点击自定义ImageNode无法触发节点选中

问题原因 #

自定义ImageNode继承自DecoratorNode，其实际渲染内容由React组件ImageComponent负责，而Lexical默认不会自动将点击装饰节点的操作关联到对应的Lexical节点，导致selection.getNodes()无法捕获到该节点。

解决方案 #

1. 完善ImageNode的DOM创建逻辑 #

在createDOM方法中添加节点标识和不可编辑属性，帮助Lexical关联DOM元素与对应的节点：

createDOM(config: EditorConfig): HTMLElement {
    const span = document.createElement("span");
    const theme = config.theme;
    const className = theme.image;
    if (className !== undefined) {
        span.className = className;
    }
    // 添加data-key属性，绑定节点唯一标识
    span.dataset.key = this.__key;
    // 设置为不可编辑，避免干扰编辑器核心逻辑
    span.contentEditable = "false";
    return span;
}

2. 在ImageComponent中手动处理选中逻辑 #

在渲染图片的React组件中添加点击事件，通过Lexical API手动选中对应的ImageNode：

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $selectNode, $getNodeByKey } from 'lexical';
import { $isImageNode } from './ImageNode';

export default function ImageComponent(props) {
    const [editor] = useLexicalComposerContext();

    const handleImageClick = () => {
        editor.update(() => {
            const targetNode = $getNodeByKey(props.nodeKey);
            if ($isImageNode(targetNode)) {
                // 手动选中目标节点
                $selectNode(targetNode);
            }
        });
    };

    return (
        <div>
            <img
                src={props.src}
                alt={props.altText}
                onClick={handleImageClick}
                style={{
                    width: props.width,
                    height: props.height,
                    maxWidth: props.maxWidth
                }}
            />
            {/* 其他渲染逻辑，比如标题等 */}
        </div>
    );
}

3. 验证效果 #

修改完成后，点击图片节点时，selection.getNodes()将返回包含该ImageNode的数组，与其他元素的选中行为保持一致。

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