Programmatic editing

Not every edit comes from a person clicking the page: an AI assistant rewriting a paragraph, a pipeline stamping generated text, a chat-driven "fix the wording on page 3". useProgrammaticEditor edits the document without any visible UI, and the edits flow through the same document as user edits.

Reading the text

getParagraphsByPage loads a page and returns its paragraphs in content order as plain text entries: id, content, the 1-based pageNumber, and the paragraph bounds in user space. For example, collecting a page's text for an AI prompt:

import { useProgrammaticEditor } from '@sdk-pdf/react'

function useReadPageText() {
  const { getParagraphsByPage } = useProgrammaticEditor()

  return async (pageId: string) => {
    const paragraphs = await getParagraphsByPage(pageId)
    return paragraphs.map((paragraph) => paragraph.content).join('\n\n')
  }
}

To read the whole document, getAllParagraphIds returns every paragraph id in page and content order, and getPlainTextParagraphs resolves ids to the same plain text entries. It loads every page sequentially, which can take a long time for a large document, so prefer getParagraphsByPage when the page is known.

Editing paragraphs

getParagraphEditor returns an editor mirror for one paragraph: an object with the operations of a text editor (focus, selectAll, insertText, deleteAll) minus the screen. Replacing a paragraph's text is select all, delete, then insert:

const { getParagraphEditor } = useProgrammaticEditor()

function replaceParagraphText(paragraphId: string, newText: string) {
  const editor = getParagraphEditor(paragraphId)

  // The paragraph may be gone: deleted by an undo since it was read.
  if (!editor) return false

  editor.selectAll()
  editor.deleteAll()
  editor.insertText(newText)
  return true
}

Presence for collaborators

Real-time collaboration is coming soon. Once it ships, giving the programmatic editor a presence shows its cursor to collaborators like any other participant's:

const { setEditorAwarenessProperties, removeEditorAwarenessCursor } =
  useProgrammaticEditor()

setEditorAwarenessProperties({ name: 'AI assistant', color: '#7c3aed' })

// ... edit the paragraphs ...

// Hide the cursor once the work is done.
removeEditorAwarenessCursor()