How to use command.lift?

[eduludi]

We have an inline Node for links. A link as mark was not enough, since we need to have a way to edit some custom aspects of the link.

After some try and error, we were able to add a link using the insertContent command, which looks hacky.

The problem we face now is how to remove the link. We tried with both lift and toggleWrap commands, but they don't respond: the link wrapper is still there and we don't get any error or hint on what can be wrong.

Here is an extract of what we currently have:

export default Node.create({
  name: 'link',
  group: 'inline',
  inline: true,
  content: 'text*',

  addAttributes() {
    return {
      href: {
        default: '#',
      },
      // ... other attrs
    }
  },

  addCommands() {
    return {
      setLink: () => ({ commands, state }) => {
        const isActive = isNodeActive(state, 'link')
        if (isActive) {
          return commands.lift('link') // <== HERE
        } else {
          return commands.insertContent({
            type: 'link',
            attrs: {
              href: 'https://',
            },
            content: state.selection.content().toJSON().content[0].content,
          })
        }
      },
      removeLink: () => ({ commands }) => {
        return commands.lift('link') // <== AND HERE
      },
    }
  },
  // ...
}

PS: Really cool library, we are really excited as a team as it looks really promising and it will allow us to move from our existing solution (based on Slate.js) that has a lot of bugs.

[hanspagel]

I’d recommend to go with the mark-based approach. What "aspects" do you need to change? I bet you could do that with attributes.

https://www.tiptap.dev/guide/custom-extensions#attributes
https://www.tiptap.dev/api/commands/update-attributes
https://www.tiptap.dev/api/commands/extend-mark-range

[eduludi]

Thanks for your answer and recommendation. We will evaluate if links as mark will work for us.

Some benefits we see with the inline node approach is that we can render custom elements as we need. We will have more flexibility to achieve all kind of inline elements, as we do with Slate. And this is not only for links.

For example, this is what we have so far with a link as inline node in tiptap:

Note the external link icon on the left and the custom popover

With markers we feel we are restricted to do only some styling that we may modify through attributes, but that's it. There are other alternatives we are not aware of?

But for now the issue is still that we cannot use .lift() or .toggleWrap() commands. Any ideas on why this may not be working?

Again, thanks for your answers and time :)

[hanspagel]

Got it! Did you try adding this popup with the bubble menu? https://www.tiptap.dev/guide/menus#bubble-menu

BTW your interface design is :chefkiss:

[eduludi]

Yes. We are already using the bubble menu for inline format:

We want to keep this bubble menu as simple as possible, and that's why we think adding a second popup for editing the link is a better option. We want to evaluate your suggestion, but we want first to rule out the inline node option. As you can see, we are really close to make it work, and that's why we opened this discussion to see if what we want to achieve is feasible.

Again, thanks for your time and for this awesome editor called tiptap

[philippkuehn]

Hey, I think lift() only works for block nodes – not inline nodes. For example for unwrapping a paragraph from a blockquote. There is no built-in command for what you are searching for yet, I think. You have to write a custom command for it: loop over nodes within your selection, find your link node, get its text content and replace the link node with a text node.

[eduludi]

Thanks @philippkuehn. That makes sense now.