insert image with link

[droxiscoder]

Hi, I have a custom component to insert a image and I used with the editor, now I have to add a link to that image but I cant figure out how to do that

I want to have something like this <a href=""><img src="" alt=""></a>

I tried to call the link command after insert the image but it doent work

[bastihilger]

I have the same problem, and I tried this.editor.chain().focus().wrapIn('link').run(); and this.editor.chain().focus().wrapIn('a').run(); which also did not do anything. Any pointers in the right direction? Thanks!

[bastihilger]

I should maybe add that I tried to wrap it in a blockquote (just to see if any wrapping works like that) and it worked: this.editor.chain().focus().wrapIn('blockquote').run();

[yeonjulee1005]

@manogi did you find solution ? could you help me? 🥹

[bastihilger]

@yeonjulee1005 sorry, I have kind of moved on and am not active in this area anymore.

[GraemeFulton]

Hey @manogi I came across a solution - I use parseHTML to ignore images for inline links using getAttrs:

  parseHTML() {
    return [
      {
        tag: "a[href]",
        getAttrs: (node) => {
          if (
            node.firstElementChild &&
            node.firstElementChild.nodeName === "IMG"
          ) {
            return false;
          } else {
            return true;
          }
        }
      }
    ];
  },

So if the firstElementChild of an <a> is an image, the Link Mark will ignore that img node.

Then, I create a separate Node type (not a Mark) specifically for the image links. The important part is to set the content type to your Image node type (my image nodes are called imageNode, but I think default is just image), so this will only be applied to images:

const ImageLinkNode = Node.create<ImageLinkNodeOptions>({
  name: "imageLink",
  group: "block",
  selectable: false,
  defaultOptions: {
    HTMLAttributes: {}
  },
  priority: 1000,
  content: "imageNode",
  parseHTML() {
    return [
      {
        tag: "a"

It was weird that I had to add the filter to getAttrs to ignore images in the first part - without doing that, my imageLinkNode wouldn't add the link to the images! That's why I had to do both parts.

This works for me to add links around images when the HTML already has linked images. I've not tried adding links to images with commands, but hopefully there is a way! Let me know if it works or if you have come across a better way.

[Bayramito]

Hey @manogi I came across a solution - I use parseHTML to ignore images for inline links using getAttrs:

  parseHTML() {
    return [
      {
        tag: "a[href]",
        getAttrs: (node) => {
          if (
            node.firstElementChild &&
            node.firstElementChild.nodeName === "IMG"
          ) {
            return false;
          } else {
            return true;
          }
        }
      }
    ];
  },

So if the firstElementChild of an <a> is an image, the Link Mark will ignore that img node.

Then, I create a separate Node type (not a Mark) specifically for the image links. The important part is to set the content type to your Image node type (my image nodes are called imageNode, but I think default is just image), so this will only be applied to images:

const ImageLinkNode = Node.create<ImageLinkNodeOptions>({
  name: "imageLink",
  group: "block",
  selectable: false,
  defaultOptions: {
    HTMLAttributes: {}
  },
  priority: 1000,
  content: "imageNode",
  parseHTML() {
    return [
      {
        tag: "a"

It was weird that I had to add the filter to getAttrs to ignore images in the first part - without doing that, my imageLinkNode wouldn't add the link to the images! That's why I had to do both parts.

This works for me to add links around images when the HTML already has linked images. I've not tried adding links to images with commands, but hopefully there is a way! Let me know if it works or if you have come across a better way.

hi @GraemeFulton could you please share a gist for that if possible ?

[thefinnomenon]

For anyone else who ends up here, I followed what @GraemeFulton did and then basically copied the command structure of the block quote extension (https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/src/blockquote.ts) except wrapping, toggling, and lifting the imageLink type.

[yeonjulee1005]

it's old discussion , but i wonder how can i solve this problem?
i don't know how can fix getAttrs 😭

[zensoo]

Tiptap 2.0.4

https://tiptap.dev/api/nodes/image#inline

Image.configure({
  inline: true,
})

[JenuelDev]

shoot this is the right answer.

[mathieutu]

Did you succeed to wrap the image with a link when inserting it? Even with an inline: true, I can't manage to do it.

[JenuelDev]

Yup its working fine on my side,

[mathieutu]

Could you share how you did it? Even in the best case it's not great.

[mathieutu]

Guys, I got it working! 🎉

ed.chain().focus()
  .setImage({ src: imageUrl })
  .selectParentNode()
  .setLink({ href: imageUrl })
  .run()

with

Image.configure({
  inline: true,
})

[rronaliu]

try adding inclusive: false to your Link.extend({..})

[Bayramito]

Guys, I've got it working! 🎉

ed.chain().focus()
  .setImage({ src: imageUrl })
  .selectParentNode()
  .setLink({ href: imageUrl })
  .run()

with

Image.configure({
  inline: true,
})

Hi @mathieutu, will this work if we edit the current behavior in the ImageBridge in the TenTapStarterKit ?

basically like that

[mathieutu]

I'm sorry, but I have no idea of what you're talking about 😅 (and it's been a year so not a lot of memories of the thread)

[Bayramito]

I'm sorry, but I have no idea of what you're talking about 😅 (and it's been a year so not a lot of memories of the thread)

heh sorry mb.. :) Im a newb on tiptap sorry if i ask something stupid. Im just trying bind hyperlinks to the images, to be able to make them clickable.

[Bayramito]

Still looking for a solution btw :)