Added reference inline content and bibliography block

Author: matthewlipski

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -2,13 +2,19 @@ import { codeBlock } from '@blocknote/code-block';
 import {
   BlockNoteSchema,
   defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  filterSuggestionItems,
   withPageBreak,
 } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import * as locales from '@blocknote/core/locales';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
-import { useCreateBlockNote } from '@blocknote/react';
+import {
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+  useCreateBlockNote,
+} from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,15 +33,22 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { BibliographyBlock, CalloutBlock, DividerBlock } from './custom-blocks';
+import { ReferenceInlineContent } from './custom-inline-content';
+import { getBibliographyReactSlashMenuItems } from './slash-menu-items/getBibliographyReactSlashMenuItems';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {
       ...defaultBlockSpecs,
+      bibliography: BibliographyBlock,
       callout: CalloutBlock,
       divider: DividerBlock,
     },
+    inlineContentSpecs: {
+      ...defaultInlineContentSpecs,
+      reference: ReferenceInlineContent,
+    },
   }),
 );
 
@@ -205,7 +218,25 @@ export const BlockNoteEditorVersion = ({
 
   return (
     <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
-      <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
+      <BlockNoteView
+        editor={editor}
+        editable={!readOnly}
+        slashMenu={false}
+        theme="light"
+      >
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(
+              [
+                ...getDefaultReactSlashMenuItems(editor),
+                ...getBibliographyReactSlashMenuItems(editor),
+              ],
+              query,
+            )
+          }
+        />
+      </BlockNoteView>
     </Box>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/BibliographyBlock/BibliographyBlock.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { BlockConfig } from '@blocknote/core';
+import {
+  ReactCustomBlockRenderProps,
+  createReactBlockSpec,
+} from '@blocknote/react';
+import { useEffect, useState } from 'react';
+
+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 [sources, setSources] = useState<any[]>([]);
+
+  useEffect(() => {
+    async function fetchBibliography() {
+      const dois: string[] = JSON.parse(props.block.props.bibTexJSON);
+
+      const data = await Promise.all(
+        dois
+          .filter((source) => source)
+          .map((doi) =>
+            fetch(`https://api.datacite.org/dois/${doi}`).then((res) =>
+              res.json(),
+            ),
+          ),
+      );
+
+      setSources(data.filter((source) => source));
+    }
+
+    fetchBibliography();
+  }, [props.block.props.bibTexJSON]);
+
+  // console.log(sources);
+
+  return (
+    <div>
+      <h2>Bibliography</h2>
+      {sources.map((source: any) => (
+        <div key={source.data.attributes.doi}>{source.data.attributes.doi}</div>
+      ))}
+    </div>
+  );
+};
+
+export const BibliographyBlock = createReactBlockSpec(bibliographyBlockConfig, {
+  render: Bibliography,
+});

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/BibliographyBlock/hooks/useSingleBibliographyBlock.tsx

@@ -0,0 +1,31 @@
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from '@blocknote/core';
+import { useEditorChange } from '@blocknote/react';
+
+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);
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -1,2 +1,4 @@
+export * from './BibliographyBlock/BibliographyBlock';
+export * from './BibliographyBlock/hooks/useSingleBibliographyBlock';
 export * from './CalloutBlock';
 export * from './DividerBlock';