README.md

Quill JS

Integration

• react-quill
• quill-mention
• Custom image blot

Demo

https://quilljs-chi.vercel.app/

Quill mention v1.3.7 before upgrade

link

Set default value and store quill data in DB

link

Blotname

link

Hide Mention icon

quill-mention/quill-mention#9

Blot

https://github.com/slab/parchment

How can we update DOM and update delta value?

link

Data Example

[
  {
    "id": "1",
    "value": "{\"ops\":[{\"insert\":{\"styled-image\":{\"alt\":\"logo\",\"url\":\"https://res.cloudinary.com/dluupfg6f/image/upload/v1721041911/tnaxt5jpoqe3mszytsmh.png\",\"width\":\"100\",\"height\":\"100\",\"align\":\"center\"}}},{\"insert\":\"\\n\"},{\"attributes\":{\"bold\":true},\"insert\":\"WELCOME TO WONDERFOODS\"},{\"attributes\":{\"align\":\"center\",\"header\":1},\"insert\":\"\\n\"},{\"attributes\":{\"align\":\"center\"},\"insert\":\"\\n\"},{\"insert\":\"Dear \\n\\n\\nWe are delighted to welcome you and your family to our community!!\\n\\nMy name is \\n , and I will be your primary point of contact. I am\\nhere to assist you with any questions or concerns you may have as you get\\nacquainted with our programs and services.\\n\\nI would like to extend a special welcome to \\n . We are excited\\nto have them join us and look forward to seeing them thrive in our environment.\\n\\nIf there is anything you need or if you have any questions, please do not hesitate\\nto reach out to me directly.\\n\\nThank you for choosing us. We are thrilled to have you as part of our community!\\n\\n\"},{\"insert\":{\"styled-image\":{\"alt\":\"logo\",\"url\":\"https://res.cloudinary.com/dluupfg6f/image/upload/v1721042008/jjsvxvuerzagmhcev2qb.png\",\"width\":\"50\",\"height\":\"50\",\"align\":\"left\"}}},{\"insert\":\"\\n\\n\\n\\n\\nBest regards,\\n\"}]}"
  }
]