布局参与者

const registration = editor.storage.pages?.registerLayoutParticipant?.({
  element: nodeViewDom,
  layout: (context) => {
    // Measure the pages, then adjust your own element.
    return changedSomething
  },
})

// In your NodeView constructor:
const registration = editor.storage.pages?.registerLayoutParticipant?.({
  element: dom,
  layout: () => {
    const changed = adjustMyOwnDom(dom)
    return changed
  },
})

// When your own size changes:
editor.storage.pages?.requestPageLayout?.()

// In NodeView.destroy():
registration?.dispose()

import { mergeAttributes, Node } from '@tiptap/core'

// Browsers report fractional pixels, so never compare positions with ===.
const PIXEL_TOLERANCE = 0.5

// One measurement per pass, shared by every callout in the document.
const breakRectsPerPass = new WeakMap<object, DOMRect[]>()

function getPageBreakRects(editorDom: HTMLElement, passToken: object): DOMRect[] {
  const cached = breakRectsPerPass.get(passToken)
  if (cached) return cached

  // `.breaker` is the block Pages draws between two pages.
  const rects = Array.from(
    editorDom.querySelectorAll('[data-tiptap-pagination] .breaker'),
    (element) => element.getBoundingClientRect(),
  )
  breakRectsPerPass.set(passToken, rects)
  return rects
}

export const KeepTogetherCallout = Node.create({
  name: 'keepTogetherCallout',
  group: 'block',
  content: 'block+',

  parseHTML() {
    return [{ tag: 'aside[data-keep-together]' }]
  },

  renderHTML({ HTMLAttributes }) {
    return ['aside', mergeAttributes(HTMLAttributes, { 'data-keep-together': '' }), 0]
  },

  addNodeView() {
    return ({ editor }) => {
      const dom = document.createElement('aside')
      dom.setAttribute('data-keep-together', '')

      // How far we push the box down right now. We keep it so we can work out
      // where the box would sit without the push.
      let appliedPush = 0

      const registration = editor.storage.pages?.registerLayoutParticipant?.({
        element: dom,
        layout: (context) => {
          const box = dom.getBoundingClientRect()
          const naturalTop = box.top - appliedPush
          const naturalBottom = naturalTop + box.height

          // Does the box sit across a page break?
          const breaks = getPageBreakRects(editor.view.dom, context.passToken)
          const crossed = breaks.find(
            (rect) => naturalTop < rect.top - PIXEL_TOLERANCE && naturalBottom > rect.top,
          )

          const neededPush = crossed ? crossed.bottom - naturalTop : 0

          // Write only when the value really changed. Writing the same value on
          // every pass looks like a new change every time, and the cycle would
          // never end.
          if (Math.abs(neededPush - appliedPush) <= PIXEL_TOLERANCE) {
            return false
          }

          appliedPush = neededPush
          dom.style.marginTop = neededPush > 0 ? `${neededPush}px` : ''
          return true
        },
      })

      editor.storage.pages?.requestPageLayout?.()

      return {
        dom,
        contentDOM: dom,

        // We change our own style outside of ProseMirror. Without this,
        // ProseMirror treats the DOM as broken, redraws the node, and removes
        // the push again.
        ignoreMutation: (mutation) =>
          mutation.type === 'attributes' &&
          mutation.target === dom &&
          mutation.attributeName === 'style',

        destroy: () => {
          registration?.dispose()
        },
      }
    }
  },
})

const pages = editor.storage.pages
const position = editor.state.selection.from

const count = pages?.getPageCount?.()
const pageNumber = pages?.getPageForPosition?.(position)
const spaceLeftBelow = pages?.getDistanceToNextPagebreak?.(position)