How to render custom text in renderHTML() ?

[celestial83u83]

Affected Packages

react, extension-link, core

Version(s)

2.11

Bug Description

I'm trying to render custom HTML in read-only view (editable = false) in a custom link extension using renderHTML() for example:

    renderHTML({ HTMLAttributes, node }) {

      const url = HTMLAttributes.href;
      return ['span', HTMLAttributes, `hello world, (${url})`];
    },

However I tried this on a hyperlink and it only displays the hyperlink text itself and not the url or the "hello world" example text I put. For example, <a href="url">link text</a> would only display link text. Is there a way to display the custom text as well?

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

The custom text shows up

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[nperez0111]

The renderHTML looks fine, but does not seem to be applying, you didn't share your whole code, so can't help you further

[celestial83u83]

@nperez0111 Sorry, here is my example code.

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const CustomLink = Link.extend({
    renderHTML({ HTMLAttributes }) {
      const url = HTMLAttributes.href;
      return ['span', HTMLAttributes, `hello world, (${url})`];
    },
  });

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CustomLink
    ],
    editable: false,
    content: '<p>Content here</p><a href="https://www.google.com/">link text</a>',
  })

  return (
    <EditorContent editor={editor} />
  )
}

[nperez0111]

This seems wrong:

'<p>Content here</p><a href="https://www.google.com/">link text</a>',

It should be:

'<p>Content here <a href="https://www.google.com/">link text</a></p>',