Reports

You can create a custom link element that allows more control over the rel attribute. By default, you can remove the rel="nofollow" for internal links while keeping it for external links.

Below is an example of how to achieve this:

import { defaultProps } from "@blocknote/core";
import { createReactInlineContentSpec } from "@blocknote/react";

// The Name-Link block with user input
export const NameLink = createReactInlineContentSpec(
  {
    type: "myLink",
    propSchema: {
      textAlignment: defaultProps.textAlignment,
      textColor: defaultProps.textColor,
      name: {
        default: "Enter name",
        type: "string",
        editable: true,
        description: "Enter the name",
      },
      link: {
        default: "https://example.com",
        type: "string",
        editable: true,
        description: "Enter the link URL",
      },
    },
    content: "none",
  },
  {
    render: (props) => {
      // Check if the link is internal or external
      const isInternalLink = props.inlineContent.props.link.startsWith(window.location.origin);
      return (
        <a
          href={props.inlineContent.props.link}
          target="_blank"
          rel={isInternalLink ? "" : "noopener noreferrer"}
          style={{
            textDecoration: "none",
            padding: "2px 4px",
            borderRadius: "4px",
            textDecorationLine: "underline",
          }}
        >
          {props.inlineContent.props.name}
        </a>
      );
    },
  }
);

const insertNameLink = (editor) => ({
  title: "Name & Link",
  onItemClick: () => {
    const name = window.prompt("Enter the name:");
    if (!name) return;

    const link = window.prompt("Enter the link URL:");
    if (!link) return;

    editor.insertInlineContent([
      {
        type: "myLink",
        props: {
          name,
          link,
        },
      },
      " ", // add a space after the mention
    ]);
  },
  aliases: ["name", "link", "hyperlink", "reference"],
  group: "Other",
  icon: <MdLink />,
});

const schema = BlockNoteSchema.create({
  inlineContentSpecs: {
    ...defaultInlineContentSpecs,
    myLink: NameLink,
  },
});

Explanation:

Internal vs External Links: The render method checks if the link is internal by comparing it to the current origin (window.location.origin). If it's internal, it does not add rel="nofollow". For external links, rel="noopener noreferrer" is applied to ensure proper behavior and security.
Editor Integration: The custom link is then integrated into the BlockNote editor by defining an insertNameLink function. This allows users to insert links with a custom prompt for the name and URL.
Schema Integration: Finally, the schema is updated to include the new NameLink spec to make it available in the editor.

Benefits:

SEO Optimization: Internal links will no longer have rel="nofollow", allowing search engines to follow and index those pages.
Customizability: Developers can extend or modify the behavior further based on their needs.

By using this approach, you can ensure that internal links are properly handled for SEO without affecting external links. Let me know if you have any questions or need further adjustments!

79532759

Explanation:

Benefits: