Display basic reference

examples/01-basic/01-minimal/App.tsx

@@ -1,12 +1,125 @@
+import {
+  BlockNoteSchema,
+  defaultInlineContentSpecs,
+  filterSuggestionItems,
+} from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { useCreateBlockNote } from "@blocknote/react";
+import {
+  DefaultReactSuggestionItem,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { Reference } from "./Reference";
 
 export default function App() {
-  // Creates a new editor instance.
-  const editor = useCreateBlockNote();
+  const schema = BlockNoteSchema.create({
+    inlineContentSpecs: {
+      ...defaultInlineContentSpecs,
+      reference: Reference,
+    },
+  });
+
+  const getReferenceMenuItems = (
+    editor: typeof schema.BlockNoteEditor,
+  ): DefaultReactSuggestionItem[] => {
+    const citations = [
+      {
+        key: 1,
+        doi: "10.1093/ajae/aaq063",
+        author: "Steve Smith",
+        title: "Understanding BlockNote",
+        journal: "BlockNote Journal",
+        year: 2023,
+      },
+      {
+        key: 2,
+        doi: "10.1234/example.doi",
+        author: "Jane Doe",
+        title: "Exploring BlockNote Features",
+        journal: "BlockNote Features Journal",
+        year: 2022,
+      },
+      {
+        key: 3,
+        doi: "10.5678/another.example",
+        author: "John Doe",
+        title: "Advanced BlockNote Techniques",
+        journal: "BlockNote Techniques Journal",
+        year: 2021,
+      },
+    ];
+
+    return citations.map((citation) => ({
+      title: citation.title,
+      onItemClick: () => {
+        editor.insertInlineContent([
+          {
+            type: "reference",
+            props: {
+              ...citation,
+            },
+          },
+          " ",
+        ]);
+      },
+    }));
+  };
+
+
+  const editor = useCreateBlockNote({
+    schema,
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Woah, you can add a reference like this: ",
+            styles: {},
+          },
+          {
+            type: "reference",
+            props: {
+              key: 1,
+              doi: "10.1093/ajae/aaq063",
+              author: "Steve Smith",
+              title: "Understanding BlockNote",
+              journal: "BlockNote Journal",
+              year: 2023,
+            },
+          },
+          {
+            type: "text",
+            text: " <- This is an example reference",
+            styles: {},
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: "Press the '@' key to open the references menu and add another",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView editor={editor}>
+      <SuggestionMenuController
+        triggerCharacter={"@"}
+        getItems={async (query) =>
+          filterSuggestionItems(getReferenceMenuItems(editor), query)
+        }
+      />
+    </BlockNoteView>
+  );
 }

examples/01-basic/01-minimal/Reference.tsx

@@ -0,0 +1,71 @@
+import { createReactInlineContentSpec } from "@blocknote/react";
+import { useFloating, useHover, useInteractions } from "@floating-ui/react";
+import { useState } from "react";
+import "./styles.css";
+
+export const Reference = createReactInlineContentSpec(
+  {
+    type: "reference",
+    propSchema: {
+      key: {
+        type: "number",
+        default: 1,
+        description: "The key for the reference.",
+      },
+      doi: {
+        default: "Unknown",
+      },
+      author: {
+        type: "string",
+        default: "Unknown Author",
+      },
+      title: {
+        type: "string",
+        default: "Unknown Title",
+      },
+      journal: {
+        type: "string",
+        default: "Unknown Journal",
+      },
+      year: {
+        type: "number",
+        default: 2023,
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (props) => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+      });
+
+      const hover = useHover(context);
+
+      const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+
+      const citation = props.inlineContent.props;
+
+      return (
+        <span>
+          <span ref={refs.setReference} {...getReferenceProps()}>
+            [{citation.key}]
+          </span>
+          {isOpen && (
+            <div
+              className="floating"
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              {citation.author}, {citation.title}, {citation.year}
+            </div>
+          )}
+        </span>
+      );
+    },
+  },
+);

examples/01-basic/01-minimal/package.json

@@ -15,6 +15,7 @@
     "@blocknote/ariakit": "latest",
     "@blocknote/mantine": "latest",
     "@blocknote/shadcn": "latest",
+    "@floating-ui/react": "0.27.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -24,4 +25,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

examples/01-basic/01-minimal/styles.css

@@ -0,0 +1,5 @@
+.floating {
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 5px;
+}