Converting a Node to a Mark in Tiptap and adding text before and after


I’m currently working on a project where I’m using Tiptap, and I’m trying to convert a Node into a Mark. The goal is to have the ability to write text before and after this node. I’ve attached the current code below.

Could someone please guide me on how to achieve this? Is there an easy way to do this, or would it require significant changes to the code? Any help or suggestions would be greatly appreciated.

Thanks in advance!

import { NodeViewWrapper } from "@tiptap/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { faBook } from "@fortawesome/free-solid-svg-icons";

interface MyComponentProps {
  node: {
    attrs: {
      desc: string;
      url: string;
  updateAttributes: (attrs: Record<string, any>) => void;

const StudyLink: React.FC<MyComponentProps> = (props) => {
  const { desc, url } = props.node.attrs;

  return (
    <NodeViewWrapper className="studylink-component">
        <FontAwesomeIcon icon={faBook} />
        <a href={url} target="_blank" rel="noopener noreferrer">

export const studyLink = Node.create({
    name: "studylink",
    group: "block",
    atom: true,
    addAttributes() {
        return {
          desc: {
            default: "Click here for more details",
          url: {
            default: "",
    parseHTML() {
      return [
          tag: "studylink-component",
    renderHTML({ HTMLAttributes }) {
      return ["studylink-component", mergeAttributes(HTMLAttributes)];
    addNodeView() {
      return ReactNodeViewRenderer(StudyLink);

The NodeView you have doesn’t do much, I think you can convert this to a Mark confidently. Be aware that it will break existing documents, unless you run some kind of migration.