https://github.com/uchihamalolan/draftjs-mentions

A POC for Implementing mentions with DraftJS & DraftJS Plugins. (Including storing and fetching from server with the same state)
https://github.com/uchihamalolan/draftjs-mentions

draft draft-js-plugins mentions react

Last synced: 8 days ago
JSON representation

A POC for Implementing mentions with DraftJS & DraftJS Plugins. (Including storing and fetching from server with the same state)

• Host: GitHub
• URL: https://github.com/uchihamalolan/draftjs-mentions
• Owner: uchihamalolan
• Created: 2021-05-21T13:14:09.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-27T05:11:45.000Z (almost 2 years ago)
• Last Synced: 2024-11-13T01:49:37.222Z (2 months ago)
• Topics: draft, draft-js-plugins, mentions, react
• Language: TypeScript
• Homepage: https://drafter-mentions.netlify.app/
• Size: 349 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# draftjs-mentions

A POC for Implementing mentions with DraftJS & DraftJS Plugins. (Including storing and fetching from server with the same state)

## Uses the Following

- [DraftJs](https://draftjs.org/) for Rich Text Handling

- [DraftJS Plugin Mentions](https://www.draft-js-plugins.com/plugin/mention) for mentions decorators

- [Ant design](https://ant.design/components/popover) for implementing Pop-overs

- [StyledComponents](https://styled-components.com/) for general styling

## Approach

**Write**

- Convert `ContentState` to `RawData`

- Strip unnecessary properties from `RawData` (function inside serializer folder)

- Save the JSON as string in backend

**Read**

- Use `Editor` with `readOnly={true}` for displaying notes/comments/posts with "mentions"

- Fetch JSON String from Server (DB)

- Parse and build back the `RawData` (to feed to ContentState via `convertFromRaw`)

- Create ContentState and initialize EditorState with it

## This Project is built using [Vite](https://vitejs.dev/)