页面页眉和页脚

Pages.configure({
  header: 'Awesome Tiptap header', // 字符串！
})

Pages.configure({
  header: () => '<bold>Awesome Tiptap header</bold>', // 返回 HTML 或字符串的函数！
})

editor.commands.setHeader('My awesome header') // 字符串！
// 或者
editor.commands.Header((page, total) => `${page} of ${total}`) // 返回 HTML 或字符串的函数！

Pages.configure({
  header: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [{ type: 'text', text: 'Document Title', marks: [{ type: 'bold' }] }],
      },
    ],
  },
})

Pages.configure({
  header: 'My Document Title',
  footer: 'Page {page} of {total}',
})

// 编辑器初始化后更新页眉
editor.commands.setHeader('Updated Header')

Pages.configure({
  headerHeight: 80, // 让页眉区域更高
})

editor.commands.setHeaderHeight(30) // 更小的页眉！

Pages.configure({
  footer: 'Awesome Tiptap footer', // 字符串！
})

// 覆盖页眉上边距
editor.commands.setHeaderTopMargin(40)

// 清除覆盖并回退到当前格式的默认值
//（该格式顶部边距的 50%）
editor.commands.resetHeaderTopMargin()

Pages.configure({
  footer: () => '<bold>Awesome Tiptap footer</bold>', // 返回 HTML 或字符串的函数！
})

editor.commands.setFooter('My awesome footer') // 字符串！
// 或者
editor.commands.setFooter((page, total) => `${page} of ${total}`) // 返回 HTML 或字符串的函数！

Pages.configure({
  footer: (page, total) => `${page} of ${total}` // 示例，显示："1 of 10"
})

// 覆盖页脚下边距
editor.commands.setFooterBottomMargin(40)

// 清除覆盖并回退到当前格式的默认值
//（该格式底部边距的 50%）
editor.commands.resetFooterBottomMargin()

editor.commands.setFooterHeight(30) // 更小的页脚！

Pages.configure({
  header: 'Default Header',
  footer: 'Page {page}',
  differentFirstPage: true,
  headerFirstPage: 'Title Page',
  footerFirstPage: '', // 首页无页脚
})

// 启用首页不同（同时影响页眉和页脚）
editor.commands.setDifferentFirstPage(true)

// 设置首页页眉和页脚内容
editor.commands.setHeaderFirstPage('Welcome to My Document')
editor.commands.setFooterFirstPage('')

Pages.configure({
  differentOddEven: true,
  headerOdd: '章节标题 – 奇数页',
  headerEven: '书名 – 偶数页',
  footerOdd: '第 {page} 页',
  footerEven: '第 {page} 页',
})

// 启用奇偶页不同（同时影响页眉和页脚）
editor.commands.setDifferentOddEven(true)

// 设置奇数页和偶数页页眉
editor.commands.setHeaderOdd('奇数页页眉')
editor.commands.setHeaderEven('偶数页页眉')

// 设置奇数页和偶数页页脚
editor.commands.setFooterOdd('第 {page} 页')
editor.commands.setFooterEven('第 {page} 页')

Pages.configure({
  header: 'Default Header', // 后备
  differentFirstPage: true,
  headerFirstPage: 'Title Page', // 第 1 页
  differentOddEven: true,
  headerOdd: 'Odd Page Header', // 第 3, 5, 7 页……
  headerEven: 'Even Page Header', // 第 2, 4, 6 页……
})

import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'

Pages.configure({
  header: 'My header',
  headerFooterExtensions: [ConvertKit.configure({ table: false }), TableKit],
})

import { useEffect, useState } from 'react'

function HeaderFooterStatus({ editor }) {
  const [activeEditorType, setActiveEditorType] = useState(null)
  const [activePageNumber, setActivePageNumber] = useState(null)

  useEffect(() => {
    if (!editor) return

    const syncActiveEditorState = () => {
      const { activeEditorType, activePageNumber } = editor.storage.pages
      setActiveEditorType(activeEditorType)
      setActivePageNumber(activePageNumber)
    }

    editor.storage.pages.headerEditorOn?.('focus', syncActiveEditorState)
    editor.storage.pages.footerEditorOn?.('focus', syncActiveEditorState)

    return () => {
      editor.storage.pages.headerEditorOff?.('focus', syncActiveEditorState)
      editor.storage.pages.footerEditorOff?.('focus', syncActiveEditorState)
    }
  }, [editor])

  if (!activeEditorType || !activePageNumber) {
    return <span>正在编辑文档</span>
  }

  return (
    <span>
      正在编辑第 {activePageNumber} 页的 {activeEditorType}
    </span>
  )
}

import { useEditor, useEditorState, EditorContent } from '@tiptap/react'
import { useEffect, useState } from 'react'

function DocumentEditor() {
  const [headerFooterEditor, setHeaderFooterEditor] = useState(null)
  const [activeEditorType, setActiveEditorType] = useState(null)
  const [activePageNumber, setActivePageNumber] = useState(null)

  const editor = useEditor({
    extensions: [
      ConvertKit.configure({ table: false }),
      TableKit,
      Pages.configure({
        header: '文档页眉',
        footer: '第 {page} 页',
      }),
    ],
  })

  // 监听页眉/页脚编辑器的激活变化
  useEffect(() => {
    if (!editor) return

    const syncActiveHeaderFooterEditor = () => {
      const { activeEditor, activeEditorType, activePageNumber } = editor.storage.pages
      setHeaderFooterEditor(activeEditor)
      setActiveEditorType(activeEditorType)
      setActivePageNumber(activePageNumber)
    }

    editor.on('update', syncActiveHeaderFooterEditor)
    editor.storage.pages.headerEditorOn?.('focus', syncActiveHeaderFooterEditor)
    editor.storage.pages.footerEditorOn?.('focus', syncActiveHeaderFooterEditor)

    return () => {
      editor.off('update', syncActiveHeaderFooterEditor)
      editor.storage.pages.headerEditorOff?.('focus', syncActiveHeaderFooterEditor)
      editor.storage.pages.footerEditorOff?.('focus', syncActiveHeaderFooterEditor)
    }
  }, [editor])

  // 使用激活的编辑器（页眉/页脚或主编辑器）
  const activeEditor = activeEditorType ? headerFooterEditor : editor

  const { isBoldActive } = useEditorState({
    editor: activeEditor,
    selector: ({ editor: e }) => ({
      isBoldActive: e?.isActive('bold') ?? false,
    }),
  })

  return (
    <div>
      <div className="toolbar">
        <span>
          Editing:{' '}
          {activeEditorType && activePageNumber
            ? `${activeEditorType} on page ${activePageNumber}`
            : 'Document'}
        </span>
        <button
          className={isBoldActive ? 'is-active' : ''}
          onClick={() => activeEditor?.chain().focus().toggleBold().run()}
        >
          加粗
        </button>
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

// 默认页眉/页脚
const headerHTML = editor.storage.pages.headerHTML
const footerHTML = editor.storage.pages.footerHTML

// 首页
const headerFirstPageHTML = editor.storage.pages.headerFirstPageHTML
const footerFirstPageHTML = editor.storage.pages.footerFirstPageHTML

// 奇偶页
const headerOddHTML = editor.storage.pages.headerOddHTML
const headerEvenHTML = editor.storage.pages.headerEvenHTML
const footerOddHTML = editor.storage.pages.footerOddHTML
const footerEvenHTML = editor.storage.pages.footerEvenHTML

// 默认页眉/页脚
const headerJSON = editor.storage.pages.headerJSON
const footerJSON = editor.storage.pages.footerJSON

// 首页
const headerFirstPageJSON = editor.storage.pages.headerFirstPageJSON
const footerFirstPageJSON = editor.storage.pages.footerFirstPageJSON

// 奇偶页
const headerOddJSON = editor.storage.pages.headerOddJSON
const headerEvenJSON = editor.storage.pages.headerEvenJSON
const footerOddJSON = editor.storage.pages.footerOddJSON
const footerEvenJSON = editor.storage.pages.footerEvenJSON

function getHeaderFooterContent(editor) {
  const { pages } = editor.storage

  return {
    // 默认页眉/页脚
    headerHTML: pages.headerHTML,
    headerJSON: pages.headerJSON,
    footerHTML: pages.footerHTML,
    footerJSON: pages.footerJSON,

    // 首页
    headerFirstPageHTML: pages.headerFirstPageHTML,
    headerFirstPageJSON: pages.headerFirstPageJSON,
    footerFirstPageHTML: pages.footerFirstPageHTML,
    footerFirstPageJSON: pages.footerFirstPageJSON,

    // 奇偶页
    headerOddHTML: pages.headerOddHTML,
    headerOddJSON: pages.headerOddJSON,
    headerEvenHTML: pages.headerEvenHTML,
    headerEvenJSON: pages.headerEvenJSON,
    footerOddHTML: pages.footerOddHTML,
    footerOddJSON: pages.footerOddJSON,
    footerEvenHTML: pages.footerEvenHTML,
    footerEvenJSON: pages.footerEvenJSON,
  }
}

// 保存到后端
const headerFooterData = getHeaderFooterContent(editor)
await saveDocument({ content: editor.getJSON(), headerFooter: headerFooterData })

// 打开第 1 页的页眉编辑器
editor.commands.openHeaderEditor({ pageNumber: 1 })

// 打开第 3 页的页脚编辑器
editor.commands.openFooterEditor({ pageNumber: 3 })

function PageNavigation({ editor }) {
  const pageCount = editor.storage.pages.getPageCount?.() ?? 1

  return (
    <div>
      {Array.from({ length: pageCount }, (_, i) => (
        <div key={i + 1}>
          <span>第 {i + 1} 页</span>
          <button onClick={() => editor.commands.openHeaderEditor({ pageNumber: i + 1 })}>
            编辑页眉
          </button>
          <button onClick={() => editor.commands.openFooterEditor({ pageNumber: i + 1 })}>
            编辑页脚
          </button>
        </div>
      ))}
    </div>
  )
}

// 关闭当前打开的任何编辑器
editor.commands.closeHeaderFooterEditors()

// 关闭特定编辑器
editor.commands.closeHeaderEditor()
editor.commands.closeFooterEditor()

Pages.configure({
  header: '我的页眉',
  footer: '第 {page} 页',
  onDblClickHeaderFooterPreventClose: (event) => {
    // 如果点击在工具栏内，保持编辑器打开
    const toolbar = document.querySelector('.my-toolbar')
    return toolbar?.contains(event.target)
  },
})

Pages.configure({
  header: '我的页眉',
  footer: '第 {page} 页',
  // 双击页眉外部永不关闭
  onDblClickHeaderPreventClose: () => true,
  // 仍允许双击页脚外部关闭
  onDblClickFooterPreventClose: () => false,
})

Pages.configure({
  header: '我的页眉',
  footer: '第 {page} 页',
  // 同时设置页眉和页脚的颜色
  accentColor: '#3b82f6',
})

Pages.configure({
  header: '我的页眉',
  footer: '第 {page} 页',
  headerAccentColor: '#3b82f6', // 页眉的蓝色
  footerAccentColor: '#10b981', // 页脚的绿色
})

// 同时更新页眉和页脚颜色
editor.commands.setAccentColor('#8b5cf6')

// 仅更新页眉颜色
editor.commands.setHeaderAccentColor('#3b82f6')

// 仅更新页脚颜色
editor.commands.setFooterAccentColor('#ef4444')