Adding Footnotes (or margin notes etc.) to The Quilljs Editor

431 views Asked by At

I'm looking for a way to add footnote / endnote functionality to the QuillJS.com editor. My requirements are that the note 'text' itself can still be edited as if it were document text -- hiding it away in an attribute is probably not going to work very well.

I wonder if this can be achieved?

To take a trivial example of a document:

Here is a document text as usual1


1This is the footnote text

My guess is that the best way to achieve this would be to:

  1. Hold the actual note text as a series of blocks (note-text blocks) at the end of the document. Each block would need a unique name.
  2. Insert the anchors (the numbers in the main text) as either some kind of embedded object or an inline blot of some kind.
  3. When a new note is added, add the anchor inline, and add a new "note-text" block for that anchor at the end of the document, and move the cursor there.
  4. Have some kind of mechanism to keep the order of the notes at the end of the document in sync with the order of the note-anchors in the main text.
  5. Make sure that the block for the note text could only be deleted if its anchor was deleted. Conversely, if an anchor is deleted, remove the note-text block.
  6. Clicking on the note-anchor would take the cursor to the note-text block, and clicking on the number at the start of the note-block (as rendered) would take the cursor back to the anchor.
  7. Numbering would be determined by the order of the anchors in the document.

My question (for people who have experience of extending QuillJS) is: is such a system even possible? The only module that seems to come close to this level of functionality is the better-tables module.

I would really appreciate any insights about whether such a system could be achieved or some hints about how to do it.

0

There are 0 answers