Skip to content

feat: populate and suggest references after PDF ingestion#81

Merged
sergioramos merged 14 commits into
mainfrom
populate-references-after-ingestion
Jun 5, 2023
Merged

feat: populate and suggest references after PDF ingestion#81
sergioramos merged 14 commits into
mainfrom
populate-references-after-ingestion

Conversation

@sehyod

@sehyod sehyod commented Jun 2, 2023

Copy link
Copy Markdown
Collaborator

This PR closes #49.
It adds the following features:

  • Showing a spinner in the references view while uploaded files are being uploaded
  • Updating the references view with new references once ingestion is done
  • Changing the way references are represented in the editor to use the markdown syntax
  • Connecting the suggestion widget to the actual list of references so that typing [ in the editor enables you to insert a reference
Screenshot 2023-06-02 at 17 49 03 Screenshot 2023-06-02 at 17 50 28

Implementation choices:

  • One jotai atoms has been created to store references
  • When ingestion is running, file uploading is disabled
  • This PR uses the Mention extension of TipTap to open the suggestion list when typing [
    • This works for now but the extension is not really customisable and can only be rendered as text, we may have to create our own custom extension if we want to support having a tooltip with information about the reference when hovering it in the editor
  • This PR uses react-popper to render the suggestion list
    • The suggestion extension requires a library to position the list
    • Mention comes with tippy but we need a react implementation because jotai atoms are only available in the React world (if we want to avoid having to handle stores)
    • tippyjs/react would be an alternative we can use

Comment thread package.json
"react-drag-drop-files": "^2.3.10",
"react-icons": "^4.8.0",
"react-pdf": "^6.2.2",
"react-popper": "^2.3.0",

@sergioramos sergioramos Jun 2, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sehyod sehyod Jun 5, 2023

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ProseMirror doesn't come with autocomplete without plugins.

The first ProseMirror plugin you mentioned doesn't not come with a UI library, you have to position the suggestion "by hand" (https://github.com/curvenote/editor/blob/main/packages/prosemirror-autocomplete/demo/reducer.ts#L21) and I'm not sure we can use ProseMirror plugins with TipTap anyway.

The second TipTap extension you mentioned is actually the one we use: this PR implements suggestions with the Mention extension (to trigger suggestions opening with a given character), which uses the suggestion extension under the hood. As per the source code, you also have to place the suggestion component yourself, and they suggest using tippy or popper.
The mention extension comes with tippy as a dependency, however, this leads to some typing issues and a react implementation is needed to easily access to the jotai atom, so we need to install an extra library, either react-popper or tippyjs/react, I chose the former for no particular reason and I don't have any strong opinion on them so I'm happy to switch to the latter if needed.

@sehyod sehyod mentioned this pull request Jun 5, 2023
Comment thread src/TipTapEditor/ReferenceNode/ReferencesList.tsx Outdated
Comment thread src/atoms/referencesState.ts Outdated
Comment thread src/atoms/referencesState.ts Outdated
Comment thread src/atoms/referencesState.ts
Comment thread src/atoms/referencesState.ts
Comment thread src/filesystem.tsx
Comment thread src/types/PdfIngestion.ts
@sergioramos sergioramos changed the title feat: populate references after pdf ingestion feat: populate and suggest references after PDF ingestion Jun 5, 2023
@sergioramos sergioramos merged commit c3090c1 into main Jun 5, 2023
@sergioramos sergioramos deleted the populate-references-after-ingestion branch June 5, 2023 14:23
@cguedes cguedes linked an issue Jun 7, 2023 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Populate new references in ReferencesView after PDF ingestion References component MVP

3 participants