Example implementation of having Google-Docs like comments

Last update: Dec 24, 2022

Overview

lexical-comments

Example implementation of having Google-Docs like comments in https://lexical.dev . Main ingredient that makes this possible is CommentNode which is Highly inspired by the LinkNode from Lexical.

If you 👍 / ❤️ what I'm doing, consider 🌟 ing the repo, I and the Open Source Community appreciate it ❤️ .

Demo

Try it out at https://sereneinserenade.github.io/lexical-comments/.

Bildschirmaufnahme.2022-04-17.um.15.36.29.mp4

How to use

The real implementation of CommentNode for Lexical is in comment.ts, you can copy-paste that file in your project. Rest is just a custom implementation of using CommentNode and storing comments in Recoil state on update and updating comments via commands provided in comment.ts.

If you have any questions/suggestions about the implementation, open an issue or create a Pull Request.

Contributing

Show your ❤️ by ⭐️ ing this repository. Your support means a lot.

Clone the repo, do something, make a PR(or don't). You know what's the drill. Looking forward to your PRs, you amazing devs.

LICENCE

MIT License

MIT License

Copyright (c) 2022 Jeet Mandaliya (github: sereneinserenade)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Stargazers

Made possible by these badass packages!

    "@lexical/react": "^0.2.1",
    "@nextui-org/react": "^1.0.8-beta.5",
    "lexical": "^0.2.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-icons": "^4.3.1",
    "recoil": "^0.7.2",
    "sass": "^1.50.0",
    "uuid": "^8.3.2"

    "typescript": "^4.6.3",
    "vite": "^2.9.2"

The proposal of this repository is having a scaffold with some scenarios where you can challenge your front-end knowledge.

Frontend Kata / Interview 👋 Hello developer! The proposal of this repository is having a scaffold with some scenarios where you can challenge your fr

Nov 11, 2022

Youtube Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube videos. It lets you learn key points quickly and easily without having to watch entire lengthy videos. It is enough for users to paste the YouTube video URL into the tool and summarize the video.

YOUTUBE SUBTİTLE SUMMARIZER youtubesummarizer.tech Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube vid

Aug 12, 2023

A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Sep 17, 2022

Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

BrowserStack reporting and Selenium test result example This repository contains an example of running Selenium tests and reporting BrowserStack test

Jan 1, 2022

Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Jan 21, 2022

Exemplo de como deve ser implementação de nirvana do teste de contrato com Pact seguindo todas as práticas descritas em https://docs.pact.io/pact_nirvana

Exemplo de 'Nirvana' do teste de contrato Esse repositório exemplifica as melhores implementações de teste de contrato, atingindo o nirvana e tendo co

Nov 28, 2022

Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Chappe Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Do

Jan 1, 2023

🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine. Chappe is a Developer Docs buil

MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

MDN-Dark-Mode Information Chrome and Firefox extension that adds a dark mode wit

Mar 18, 2022

Example implementation of having Google-Docs like comments

Related tags

Overview

lexical-comments

Demo

How to use

Contributing

LICENCE

Stargazers

Made possible by these badass packages!

You might also like...

The proposal of this repository is having a scaffold with some scenarios where you can challenge your front-end knowledge.

Youtube Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube videos. It lets you learn key points quickly and easily without having to watch entire lengthy videos. It is enough for users to paste the YouTube video URL into the tool and summarize the video.

A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

Example auto-generated OpenAPI client library and an accompanying example Angular app.

Exemplo de como deve ser implementação de nirvana do teste de contrato com Pact seguindo todas as práticas descritas em https://docs.pact.io/pact_nirvana

Chappe - 🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

🧑‍💻 Developer Docs builder. Write guides in Markdown and references in API Blueprint. Comes with a built-in search engine.

MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

Owner

Jeet Mandaliya

PHEX, but it shows up as Google Docs in the extensions. Useful if you're using it in class.

Simple google docs thing in Remix using socket.io.

Google-Drive-Directory-Index | Combining the power of Cloudflare Workers and Google Drive API will allow you to index your Google Drive files on the browser.

Rent-A Movie is a website based on movie renting. The user can leave likes, comments or make reservations for movies they would like to rent. Made using tvMaze API, Involvement API, HTML, SASS and JavaScript

In this project we build a TVSeries website using Javascript, HTML, CSS and the TVMAze API. Each movie list on the page has a like and comments feature

Cross-browser plugin to remove addictive features on YouTube like thumbnails, comments, previews and more...

Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Node WebStation is a powerful tool designed for developers allowing them to create advanced web sockets for any use all without having the requirement to code.

Get started with GatsbyJS straight away without having to spend a whole day configuring your usual addons.