When the created DecoratorNode is appended, a LineBreakNode is inserted at the end.

[dninomiya]

When the created DecoratorNode is appended, a LineBreakNode(
) is inserted at the end.

If TextNode is appended,
will not be inserted.

Is there any way to avoid LineBreakNode?

Transform

function linkTransform(node: LinkNode) {
  const url = node.getURL();
  const target = node.getTarget();

  if (url.match(/^http/) && target !== '_blank') {
    node.setTarget('_blank');
    node.append($createExternalIconNode(url));
  }
}

Custom DecoratorNode

import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
import {
  DecoratorNode,
  LexicalNode,
  NodeKey,
  SerializedLexicalNode,
} from 'lexical';
import { ReactNode } from 'react';

type SerializedExternalIconNode = {
  url: string;
} & SerializedLexicalNode;

export class ExternalIconNode extends DecoratorNode<ReactNode> {
  __url: string;

  static getType(): string {
    return 'external-icon';
  }

  static clone(node: ExternalIconNode): ExternalIconNode {
    return new ExternalIconNode(node.__url, node.__key);
  }

  constructor(url: string, key?: NodeKey) {
    super(key);
    this.__url = url;
  }

  createDOM(): HTMLElement {
    const span = document.createElement('span');
    span.style.display = 'contents';
    return span;
  }

  updateDOM(): false {
    return false;
  }

  decorate(): ReactNode {
    return (
      <ArrowTopRightOnSquareIcon
        aria-label="新しいタブで開く"
        className="w-[0.6em] h-[0.6em] ml-1 opacity-60 inline-block"
      />
    );
  }

  static importJSON(
    serializedNode: SerializedExternalIconNode
  ): ExternalIconNode {
    const node = $createExternalIconNode(serializedNode.url);
    return node;
  }

  exportJSON(): SerializedExternalIconNode {
    return {
      ...super.exportJSON(),
      url: this.__url,
    };
  }
}

export function $createExternalIconNode(url: string): ExternalIconNode {
  return new ExternalIconNode(url);
}

export function $isExternalIconNode(node: LexicalNode): boolean {
  return node instanceof ExternalIconNode;
}

Result

[acywatson]

I think we're using this to allow selection after the DecoratorNode. What's the problem you're having?

[reactuz]

@acywatson this is adding some empty space at the bottom of decorator node, and is causing style issues in readonly previews. Any ideas on how to tackle that?

[goldenlink]

My guess would be about isInline. Though DecoratorNode is true by default.

  isInline(): true {
    return tue;
  }