This is my first time building with a editor like this.

I am using next js wit next-ui and tailwinds. I am able to render the editor and save my content but when I render the content with editable false (or true ) the links I add are not styled as links to let the uses know its clickable.

My hunch is I would need to use render links as Next js links using next-link or the <Link/> component from next-ui. But I am not show how to do that.

Any idea how I can get this done ?

" use client";

import { PartialBlock } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useTheme } from "next-themes";

interface EditorProps {
  onChanges?: (value: any) => void; // Update the type of the onChange prop
  editable?: boolean;
  initialContent?: string;
}
export default function Editor({
  onChanges,
  editable,
  initialContent,
}: EditorProps) {
  const resolveTheme = useTheme();
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: initialContent
      ? (JSON.parse(initialContent) as PartialBlock[])
      : undefined,
    defaultStyles: false,
  });

  // Fixes the comparison between resolveTheme and "dark".
  const theme = resolveTheme.theme === "dark" ? "dark" : "light";

  // Renders the editor instance using a React component.
  return (
    <BlockNoteView
      editor={editor}
      onChange={() => {
        if (onChanges) {
          onChanges(editor.document);
        }
      }}
      theme={theme}
      editable={editable}
    />
  );
}