tiptap-footnotes
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

tiptap-footnotes

A footnotes extension for Tiptap

Demo

See it in action here.

Getting Started

Installation

$ npm install tiptap-footnotes

This extension requires the @tiptap/extension-list-item, @tiptap/extension-ordered-list, and the @tiptap/pm extensions, so you need to install them as well:

npm install @tiptap/extension-list-item @tiptap/extension-ordered-list @tiptap/pm

Usage

This package is separated into 3 main extensions:

  • Footnotes: The footnotes ordered list extension
  • Footnote: The footnote list item extension
  • FootnoteReference: the footnote reference extension

Typically, the footnotes should be placed at the bottom of the document, so you should adjust the topNode node (i.e. Document) to have the footnotes placed at the end (as shown below):

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { Footnotes, FootnoteReference, Footnote } from "tiptap-footnotes";
import Document from "@tiptap/extension-document";

const Editor = () => {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        document: false,
      }),
      Document.extend({
        content: "block+ footnotes?",
      }),
      Footnotes,
      Footnote,
      FootnoteReference,
    ],
    content: "Hello world",
  });


  return <EditorContent editor={editor} />
};

export default Editor;

Package Sidebar

Install

npm i tiptap-footnotes

Weekly Downloads

471

Version

2.0.0

License

MIT

Unpacked Size

94.9 kB

Total Files

8

Last publish

Collaborators

  • buttondown-engineering