feat: Bibliography

.gitignore

@@ -25,6 +25,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.pem
+
 .idea/
 .vercel
 test-results/

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

@@ -1,12 +1,105 @@
+import {
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  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 {
+  getBibliographyReactSlashMenuItems,
+  getDefaultReactSlashMenuItems,
+  ReactBibliographyBlockContent,
+  ReactReferenceInlineContent,
+  SuggestionMenuController,
+  useCreateBlockNote,
+  useSingleBibliographyBlock,
+} from "@blocknote/react";
+
+import "./styles.css";
 
 export default function App() {
-  // Creates a new editor instance.
-  const editor = useCreateBlockNote();
+  const schema = BlockNoteSchema.create({
+    blockSpecs: {
+      ...defaultBlockSpecs,
+      bibliography: ReactBibliographyBlockContent,
+    },
+    inlineContentSpecs: {
+      ...defaultInlineContentSpecs,
+      reference: ReactReferenceInlineContent,
+    },
+  });
+
+  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: {
+              doi: "10.1093/ajae/aaq063",
+              // doi: "",
+            },
+          },
+          {
+            type: "text",
+            text: " <- This is an example reference",
+            styles: {},
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content:
+          "Press the '@' key to open the references menu and add another",
+      },
+      {
+        type: "bibliography",
+        props: {
+          bibTexJSON: JSON.stringify([
+            "10.1093/ajae/aaq063", // Example DOI
+            "https://doi.org/10.48550/arXiv.2505.23896", // Another example DOI
+            "https://doi.org/10.48550/arXiv.2505.23900",
+            "https://doi.org/10.48550/arXiv.2505.23904",
+            "https://doi.org/10.48550/arXiv.2505.24234",
+          ]),
+        },
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  useSingleBibliographyBlock(editor);
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter="/"
+        getItems={async (query) =>
+          filterSuggestionItems(
+            [
+              ...getDefaultReactSlashMenuItems(editor),
+              ...getBibliographyReactSlashMenuItems(editor),
+            ],
+            query,
+          )
+        }
+      />
+    </BlockNoteView>
+  );
 }

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

@@ -7,5 +7,5 @@ const root = createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

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

@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@blocknote/core": "latest",
-    "@blocknote/react": "latest",
     "@blocknote/ariakit": "latest",
+    "@blocknote/core": "latest",
     "@blocknote/mantine": "latest",
+    "@blocknote/react": "latest",
     "@blocknote/shadcn": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -24,4 +24,4 @@
     "@vitejs/plugin-react": "^4.3.1",
     "vite": "^5.3.4"
   }
-}
+}

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

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

packages/core/src/blocks/defaultBlockTypeGuards.ts

@@ -1,9 +1,11 @@
 import { CellSelection } from "prosemirror-tables";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 import {
+  BlockConfig,
   BlockFromConfig,
   BlockSchema,
   FileBlockConfig,
+  InlineContentConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../schema/index.js";
@@ -31,6 +33,20 @@ export function checkDefaultBlockTypeInSchema<
   );
 }
 
+export function checkBlockTypeInSchema<
+  BlockType extends string,
+  Config extends BlockConfig,
+>(
+  blockType: BlockType,
+  blockConfig: Config,
+  editor: BlockNoteEditor<any, any, any>,
+): editor is BlockNoteEditor<{ [T in BlockType]: Config }, any, any> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    editor.schema.blockSchema[blockType] === blockConfig
+  );
+}
+
 export function checkDefaultInlineContentTypeInSchema<
   InlineContentType extends keyof DefaultInlineContentSchema,
   B extends BlockSchema,
@@ -50,6 +66,20 @@ export function checkDefaultInlineContentTypeInSchema<
   );
 }
 
+export function checkInlineContentTypeInSchema<
+  InlineContentType extends string,
+  Config extends InlineContentConfig,
+>(
+  inlineContentType: InlineContentType,
+  inlineContentConfig: Config,
+  editor: BlockNoteEditor<any, any, any>,
+): editor is BlockNoteEditor<any, { [T in InlineContentType]: Config }, any> {
+  return (
+    inlineContentType in editor.schema.inlineContentSchema &&
+    editor.schema.inlineContentSchema[inlineContentType] === inlineContentConfig
+  );
+}
+
 export function checkBlockIsDefaultType<
   BlockType extends keyof DefaultBlockSchema,
   I extends InlineContentSchema,

packages/core/src/editor/BlockNoteEditor.ts

@@ -540,6 +540,8 @@ export class BlockNoteEditor<
   protected constructor(
     protected readonly options: Partial<BlockNoteEditorOptions<any, any, any>>,
   ) {
+    // eslint-disable-next-line no-console
+    console.log("test");
     super();
     const anyOpts = options as any;
     if (anyOpts.onEditorContentChange) {

packages/core/src/schema/inlineContent/types.ts

@@ -22,6 +22,13 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
         node: Node;
       };
 
+export type InlineContentSchemaWithInlineContent<
+  IType extends string,
+  C extends InlineContentConfig,
+> = {
+  [k in IType]: C;
+};
+
 // Container for both the config and implementation of InlineContent,
 // and the type of `implementation` is based on that of the config
 export type InlineContentSpec<T extends InlineContentConfig> = {

packages/react/package.json

@@ -59,6 +59,9 @@
   },
   "dependencies": {
     "@blocknote/core": "0.31.1",
+    "@citation-js/core": "^0.7.18",
+    "@citation-js/plugin-csl": "^0.7.18",
+    "@citation-js/plugin-doi": "^0.7.18",
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/react": "^0.26.4",
     "@tiptap/core": "^2.12.0",

packages/react/src/blocks/BibliographyBlockContent/BibliographyBlockContent.tsx

@@ -0,0 +1,53 @@
+import { BlockConfig } from "@blocknote/core";
+// @ts-ignore
+import { Cite } from "@citation-js/core";
+import "@citation-js/plugin-csl";
+import "@citation-js/plugin-doi";
+import { useState, useEffect } from "react";
+
+import {
+  createReactBlockSpec,
+  ReactCustomBlockRenderProps,
+} from "../../schema/ReactBlockSpec.js";
+
+export const bibliographyBlockConfig = {
+  type: "bibliography",
+  propSchema: {
+    bibTexJSON: {
+      default: "[]",
+    },
+  },
+  content: "none",
+  isSelectable: false,
+} as const satisfies BlockConfig;
+
+export const Bibliography = (
+  props: ReactCustomBlockRenderProps<typeof bibliographyBlockConfig, any, any>,
+) => {
+  const [bibliography, setBibliography] = useState<any>([]);
+
+  useEffect(() => {
+    async function fetchBibliography() {
+      const dois: string[] = JSON.parse(props.block.props.bibTexJSON);
+      const cites = await Promise.all(dois.map((doi) => Cite.async(doi)));
+
+      setBibliography(cites);
+    }
+
+    fetchBibliography();
+  }, [props.block.props.bibTexJSON]);
+
+  return (
+    <div>
+      <h2>Bibliography</h2>
+      {bibliography.map((cite: any) => (
+        <div key={cite.id}>{cite.format("bibliography")}</div>
+      ))}
+    </div>
+  );
+};
+
+export const ReactBibliographyBlockContent = createReactBlockSpec(
+  bibliographyBlockConfig,
+  { render: Bibliography },
+);

packages/react/src/blocks/BibliographyBlockContent/hooks/useSingleBibliographyBlock.tsx

@@ -0,0 +1,31 @@
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+  BlockNoteEditor,
+} from "@blocknote/core";
+import { useEditorChange } from "../../../hooks/useEditorChange.js";
+
+export const useSingleBibliographyBlock = <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+>(
+  editor?: BlockNoteEditor<B, I, S>,
+) => {
+  useEditorChange((editor) => {
+    const bibliographyBlockIds: string[] = [];
+
+    editor.forEachBlock((block) => {
+      if (block.type === "bibliography") {
+        bibliographyBlockIds.push(block.id);
+      }
+
+      return true;
+    }, true);
+
+    if (bibliographyBlockIds.length > 1) {
+      editor.removeBlocks(bibliographyBlockIds.slice(1));
+    }
+  }, editor);
+};