Kyrian marchand
Kyrian marchand

Reputation: 11

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">
          {desc}
        </a>
    </NodeViewWrapper>
  );
};

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

Try to use Commands, Create.Mark I expect the same result as a Node, but it's not a bloc and i can write text before and after le Mark.

Upvotes: 1

Views: 281

Answers (0)

Related Questions