使用Lexical的AutoLinkNode/LinkNode，如何默认设置新链接target="_blank"？

不需要重写LinkNode或AutoLinkNode类，有两种直接的实现方式：

1. 手动插入链接：配置LinkPlugin的默认属性 #

如果你使用@lexical/react的LinkPlugin来手动插入链接，直接通过defaultLinkAttributes配置项设置默认属性即可，自动应用到所有手动创建的LinkNode上：

import { LinkPlugin } from '@lexical/react/LinkPlugin';

// 组件中使用LinkPlugin时添加配置
<LinkPlugin
  defaultLinkAttributes={{
    target: '_blank',
    rel: 'noopener noreferrer' // 建议搭配这个属性，符合安全规范
  }}
/>

2. 自动识别链接：通过节点转换给AutoLinkNode添加属性 #

对于输入网址后自动生成的AutoLinkNode，可以在编辑器初始化时注册一个节点转换规则，自动给新创建的AutoLinkNode添加target属性：

import { AutoLinkNode } from '@lexical/link';

// 在编辑器初始化完成后注册转换
editor.registerNodeTransform(AutoLinkNode, (node) => {
  // 避免重复设置，只在没有target属性时添加
  const currentAttrs = node.getLinkAttributes();
  if (!currentAttrs.target) {
    node.setLinkAttributes({
      ...currentAttrs,
      target: '_blank',
      rel: 'noopener noreferrer'
    });
  }
});

额外方案：自定义插入链接的函数 #

如果你的场景是通过自定义逻辑插入链接（而非依赖LinkPlugin的弹窗），可以直接在创建LinkNode时传入目标属性：

import { createLinkNode } from '@lexical/link';

function insertCustomLink(editor, url, displayText) {
  editor.update(() => {
    const linkNode = createLinkNode(url, {
      target: '_blank',
      rel: 'noopener noreferrer'
    });
    const textNode = $createTextNode(displayText || url);
    linkNode.append(textNode);
    $insertNode(linkNode);
  });
}

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