Work with footnotes and endnotes

A footnote or endnote appears in the text as an inline marker. Its content appears at the bottom of the page or the end of the document, and Document Authoring stores that content in a block-level container on the marker.

Inside a transaction, find markers through a paragraph’s inlines() method. Then read or update the marker content.

Footnotes and endnotes work like images and shapes and headers and footers: They’re existing document containers. The programmatic API reads and edits their content, but it doesn’t create new footnotes or endnotes.

Before you start, make sure the Document Authoring library is installed and running in your app. If you haven’t set it up yet, refer to the getting started guide.

The examples omit error handling. Add it before you use this code in production.

Read a footnote

Match inline elements whose type is footnote. Then read the note content from its BlockLevelContainer. The content stores text in paragraphs:

const currentDoc = editor.currentDocument();

await currentDoc.transaction(async ({ draft }) => {
  for (const blockLevel of draft.body().content().blocklevels()) {
    if (blockLevel.type !== 'paragraph') continue;

    for (const { inline } of blockLevel.asTextView().inlines()) {
      if (inline.type !== 'footnote') continue;

      const text = inline
        .content()
        .blocklevels()
        .map((block) => (block.type === 'paragraph' ? block.asTextView().getPlainText() : ''))
        .join('\n');

      console.log(`Footnote: ${text}`);
    }
  }

  return false;
});

Edit a footnote

The note content is a block-level container, so you can change its text the same way you change a paragraph. Set the text on the existing first paragraph:

await currentDoc.transaction(async ({ draft }) => {
  for (const blockLevel of draft.body().content().blocklevels()) {
    if (blockLevel.type !== 'paragraph') continue;

    for (const { inline } of blockLevel.asTextView().inlines()) {
      if (inline.type !== 'footnote') continue;

      const [firstBlock] = inline.content().blocklevels();
      if (firstBlock && firstBlock.type === 'paragraph') {
        firstBlock.asTextView().setText('See the appendix for details.');
      }
    }
  }

  return true;
});

Work with endnotes

Endnotes work the same way as footnotes. Match inline.type === 'endnote', and use the same content() container to read or edit the note.

A note’s content can also include reference markers. These inline elements use the footnote/ref and endnote/ref types, and they link back to where the note is cited. Skip them unless your integration needs to handle those back-references.

Learn more

Text and formatting
Format text inside a note.

Programmatic editing
Learn how transactions work and how to use the document model.