Heading

The heading node is used to represent blocks of heading in the document.

'use client'

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { createEditor, type NodeJSON } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

import { sampleContent } from '../../sample/sample-doc-heading.ts'
import { Toolbar } from '../../ui/toolbar/index.ts'

import { defineExtension } from './extension.ts'

interface EditorProps {
  initialContent?: NodeJSON
}

export default function Editor(props: EditorProps) {
  const defaultContent = props.initialContent ?? sampleContent
  const editor = useMemo(() => {
    return createEditor({ extension: defineExtension(), defaultContent })
  }, [defaultContent])

  return (
    <ProseKit editor={editor}>
      <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white">
        <Toolbar />
        <div className="relative w-full flex-1 box-border overflow-y-auto">
          <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div>
        </div>
      </div>
    </ProseKit>
  )
}

import { defineBaseKeymap, union } from 'prosekit/core'
import { defineDoc } from 'prosekit/extensions/doc'
import { defineHeading } from 'prosekit/extensions/heading'
import { defineParagraph } from 'prosekit/extensions/paragraph'
import { defineText } from 'prosekit/extensions/text'

export function defineExtension() {
  return union(
    defineBaseKeymap(),
    defineDoc(),
    defineText(),
    defineParagraph(),
    defineHeading(),
  )
}

export type EditorExtension = ReturnType<typeof defineExtension>

export { default as ExampleEditor } from './editor.tsx'

import type { NodeJSON } from 'prosekit/core'

export const sampleContent: NodeJSON = {
  type: 'doc',
  content: [
    { type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'H1' }] },
    { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'H2' }] },
    { type: 'heading', attrs: { level: 3 }, content: [{ type: 'text', text: 'H3' }] },
    { type: 'paragraph', content: [] },
  ],
}

'use client'

import { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/react/tooltip'
import type { MouseEventHandler, ReactNode } from 'react'

export default function Button(props: {
  pressed?: boolean
  disabled?: boolean
  onClick?: MouseEventHandler<HTMLButtonElement>
  tooltip?: string
  children: ReactNode
}) {
  return (
    <TooltipRoot>
      <TooltipTrigger className="block">
        <button
          data-state={props.pressed ? 'on' : 'off'}
          disabled={props.disabled}
          onClick={props.onClick}
          onMouseDown={(event) => {
            // Prevent the editor from being blurred when the button is clicked
            event.preventDefault()
          }}
          className="outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700"
        >
          {props.children}
          {props.tooltip ? <span className="sr-only">{props.tooltip}</span> : null}
        </button>
      </TooltipTrigger>
      {props.tooltip
        ? (
          <TooltipPositioner className="block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none">
            <TooltipPopup className="flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap">
              {props.tooltip}
            </TooltipPopup>
          </TooltipPositioner>
        )
        : null}
    </TooltipRoot>
  )
}

export { default as Button } from './button.tsx'

'use client'

import type { Uploader } from 'prosekit/extensions/file'
import type { ImageExtension } from 'prosekit/extensions/image'
import { useEditor } from 'prosekit/react'
import { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/react/popover'
import type { OpenChangeEvent } from 'prosekit/web/popover'
import { useId, useState, type ReactNode } from 'react'

import { Button } from '../button/index.ts'

export default function ImageUploadPopover(props: {
  uploader: Uploader<string>
  tooltip: string
  disabled: boolean
  children: ReactNode
}) {
  const [open, setOpen] = useState(false)
  const [url, setUrl] = useState('')
  const [file, setFile] = useState<File | null>(null)
  const ariaId = useId()

  const editor = useEditor<ImageExtension>()

  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (
    event,
  ) => {
    const file = event.target.files?.[0]

    if (file) {
      setFile(file)
      setUrl('')
    } else {
      setFile(null)
    }
  }

  const handleUrlChange: React.ChangeEventHandler<HTMLInputElement> = (
    event,
  ) => {
    const url = event.target.value

    if (url) {
      setUrl(url)
      setFile(null)
    } else {
      setUrl('')
    }
  }

  const deferResetState = () => {
    setTimeout(() => {
      setUrl('')
      setFile(null)
    }, 300)
  }

  const handleSubmit = () => {
    if (url) {
      editor.commands.insertImage({ src: url })
    } else if (file) {
      editor.commands.uploadImage({ file, uploader: props.uploader })
    }
    setOpen(false)
    deferResetState()
  }

  const handleOpenChange = (event: OpenChangeEvent) => {
    if (!event.detail) {
      deferResetState()
    }
    setOpen(event.detail)
  }

  return (
    <PopoverRoot open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger>
        <Button pressed={open} disabled={props.disabled} tooltip={props.tooltip}>
          {props.children}
        </Button>
      </PopoverTrigger>

      <PopoverPositioner placement="bottom" className="block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none">
        <PopoverPopup className="box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col gap-y-4 p-6 text-sm w-sm">
          {file ? null : (
            <>
              <label htmlFor={`id-link-${ariaId}`}>Embed Link</label>
              <input
                id={`id-link-${ariaId}`}
                className="flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
                placeholder="Paste the image link..."
                type="url"
                value={url}
                onChange={handleUrlChange}
              />
            </>
          )}

          {url ? null : (
            <>
              <label htmlFor={`id-upload-${ariaId}`}>Upload</label>
              <input
                id={`id-upload-${ariaId}`}
                className="flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
                accept="image/*"
                type="file"
                onChange={handleFileChange}
              />
            </>
          )}

          {url
            ? (
              <button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full" onClick={handleSubmit}>
                Insert Image
              </button>
            )
            : null}

          {file
            ? (
              <button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full" onClick={handleSubmit}>
                Upload Image
              </button>
            )
            : null}
        </PopoverPopup>
      </PopoverPositioner>
    </PopoverRoot>
  )
}

export { default as ImageUploadPopover } from './image-upload-popover.tsx'

export { default as Toolbar } from './toolbar.tsx'

'use client'

import type { BasicExtension } from 'prosekit/basic'
import type { Editor } from 'prosekit/core'
import type { Uploader } from 'prosekit/extensions/file'
import { useEditorDerivedValue } from 'prosekit/react'

import { Button } from '../button/index.ts'
import { ImageUploadPopover } from '../image-upload-popover/index.ts'

function getToolbarItems(editor: Editor<BasicExtension>) {
  return {
    undo: editor.commands.undo
      ? {
        isActive: false,
        canExec: editor.commands.undo.canExec(),
        command: () => editor.commands.undo(),
      }
      : undefined,
    redo: editor.commands.redo
      ? {
        isActive: false,
        canExec: editor.commands.redo.canExec(),
        command: () => editor.commands.redo(),
      }
      : undefined,
    bold: editor.commands.toggleBold
      ? {
        isActive: editor.marks.bold.isActive(),
        canExec: editor.commands.toggleBold.canExec(),
        command: () => editor.commands.toggleBold(),
      }
      : undefined,
    italic: editor.commands.toggleItalic
      ? {
        isActive: editor.marks.italic.isActive(),
        canExec: editor.commands.toggleItalic.canExec(),
        command: () => editor.commands.toggleItalic(),
      }
      : undefined,
    underline: editor.commands.toggleUnderline
      ? {
        isActive: editor.marks.underline.isActive(),
        canExec: editor.commands.toggleUnderline.canExec(),
        command: () => editor.commands.toggleUnderline(),
      }
      : undefined,
    strike: editor.commands.toggleStrike
      ? {
        isActive: editor.marks.strike.isActive(),
        canExec: editor.commands.toggleStrike.canExec(),
        command: () => editor.commands.toggleStrike(),
      }
      : undefined,
    code: editor.commands.toggleCode
      ? {
        isActive: editor.marks.code.isActive(),
        canExec: editor.commands.toggleCode.canExec(),
        command: () => editor.commands.toggleCode(),
      }
      : undefined,
    codeBlock: editor.commands.insertCodeBlock
      ? {
        isActive: editor.nodes.codeBlock.isActive(),
        canExec: editor.commands.insertCodeBlock.canExec({ language: 'javascript' }),
        command: () => editor.commands.insertCodeBlock({ language: 'javascript' }),
      }
      : undefined,
    heading1: editor.commands.toggleHeading
      ? {
        isActive: editor.nodes.heading.isActive({ level: 1 }),
        canExec: editor.commands.toggleHeading.canExec({ level: 1 }),
        command: () => editor.commands.toggleHeading({ level: 1 }),
      }
      : undefined,
    heading2: editor.commands.toggleHeading
      ? {
        isActive: editor.nodes.heading.isActive({ level: 2 }),
        canExec: editor.commands.toggleHeading.canExec({ level: 2 }),
        command: () => editor.commands.toggleHeading({ level: 2 }),
      }
      : undefined,
    heading3: editor.commands.toggleHeading
      ? {
        isActive: editor.nodes.heading.isActive({ level: 3 }),
        canExec: editor.commands.toggleHeading.canExec({ level: 3 }),
        command: () => editor.commands.toggleHeading({ level: 3 }),
      }
      : undefined,
    horizontalRule: editor.commands.insertHorizontalRule
      ? {
        isActive: editor.nodes.horizontalRule.isActive(),
        canExec: editor.commands.insertHorizontalRule.canExec(),
        command: () => editor.commands.insertHorizontalRule(),
      }
      : undefined,
    blockquote: editor.commands.toggleBlockquote
      ? {
        isActive: editor.nodes.blockquote.isActive(),
        canExec: editor.commands.toggleBlockquote.canExec(),
        command: () => editor.commands.toggleBlockquote(),
      }
      : undefined,
    bulletList: editor.commands.toggleList
      ? {
        isActive: editor.nodes.list.isActive({ kind: 'bullet' }),
        canExec: editor.commands.toggleList.canExec({ kind: 'bullet' }),
        command: () => editor.commands.toggleList({ kind: 'bullet' }),
      }
      : undefined,
    orderedList: editor.commands.toggleList
      ? {
        isActive: editor.nodes.list.isActive({ kind: 'ordered' }),
        canExec: editor.commands.toggleList.canExec({ kind: 'ordered' }),
        command: () => editor.commands.toggleList({ kind: 'ordered' }),
      }
      : undefined,
    taskList: editor.commands.toggleList
      ? {
        isActive: editor.nodes.list.isActive({ kind: 'task' }),
        canExec: editor.commands.toggleList.canExec({ kind: 'task' }),
        command: () => editor.commands.toggleList({ kind: 'task' }),
      }
      : undefined,
    toggleList: editor.commands.toggleList
      ? {
        isActive: editor.nodes.list.isActive({ kind: 'toggle' }),
        canExec: editor.commands.toggleList.canExec({ kind: 'toggle' }),
        command: () => editor.commands.toggleList({ kind: 'toggle' }),
      }
      : undefined,
    indentList: editor.commands.indentList
      ? {
        isActive: false,
        canExec: editor.commands.indentList.canExec(),
        command: () => editor.commands.indentList(),
      }
      : undefined,
    dedentList: editor.commands.dedentList
      ? {
        isActive: false,
        canExec: editor.commands.dedentList.canExec(),
        command: () => editor.commands.dedentList(),
      }
      : undefined,
    insertImage: editor.commands.insertImage
      ? {
        isActive: false,
        canExec: editor.commands.insertImage.canExec(),
      }
      : undefined,
  }
}

export default function Toolbar(props: { uploader?: Uploader<string> }) {
  const items = useEditorDerivedValue(getToolbarItems)

  return (
    <div className="z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center">
      {items.undo && (
        <Button
          pressed={items.undo.isActive}
          disabled={!items.undo.canExec}
          onClick={items.undo.command}
          tooltip="Undo"
        >
          <div className="i-lucide-undo-2 size-5 block" />
        </Button>
      )}
      {items.redo && (
        <Button
          pressed={items.redo.isActive}
          disabled={!items.redo.canExec}
          onClick={items.redo.command}
          tooltip="Redo"
        >
          <div className="i-lucide-redo-2 size-5 block" />
        </Button>
      )}

      {items.bold && (
        <Button
          pressed={items.bold.isActive}
          disabled={!items.bold.canExec}
          onClick={items.bold.command}
          tooltip="Bold"
        >
          <div className="i-lucide-bold size-5 block" />
        </Button>
      )}
      {items.italic && (
        <Button
          pressed={items.italic.isActive}
          disabled={!items.italic.canExec}
          onClick={items.italic.command}
          tooltip="Italic"
        >
          <div className="i-lucide-italic size-5 block" />
        </Button>
      )}
      {items.underline && (
        <Button
          pressed={items.underline.isActive}
          disabled={!items.underline.canExec}
          onClick={items.underline.command}
          tooltip="Underline"
        >
          <div className="i-lucide-underline size-5 block" />
        </Button>
      )}
      {items.strike && (
        <Button
          pressed={items.strike.isActive}
          disabled={!items.strike.canExec}
          onClick={items.strike.command}
          tooltip="Strike"
        >
          <div className="i-lucide-strikethrough size-5 block" />
        </Button>
      )}
      {items.code && (
        <Button
          pressed={items.code.isActive}
          disabled={!items.code.canExec}
          onClick={items.code.command}
          tooltip="Code"
        >
          <div className="i-lucide-code size-5 block" />
        </Button>
      )}
      {items.codeBlock && (
        <Button
          pressed={items.codeBlock.isActive}
          disabled={!items.codeBlock.canExec}
          onClick={items.codeBlock.command}
          tooltip="Code Block"
        >
          <div className="i-lucide-square-code size-5 block" />
        </Button>
      )}
      {items.heading1 && (
        <Button
          pressed={items.heading1.isActive}
          disabled={!items.heading1.canExec}
          onClick={items.heading1.command}
          tooltip="Heading 1"
        >
          <div className="i-lucide-heading-1 size-5 block" />
        </Button>
      )}
      {items.heading2 && (
        <Button
          pressed={items.heading2.isActive}
          disabled={!items.heading2.canExec}
          onClick={items.heading2.command}
          tooltip="Heading 2"
        >
          <div className="i-lucide-heading-2 size-5 block" />
        </Button>
      )}
      {items.heading3 && (
        <Button
          pressed={items.heading3.isActive}
          disabled={!items.heading3.canExec}
          onClick={items.heading3.command}
          tooltip="Heading 3"
        >
          <div className="i-lucide-heading-3 size-5 block" />
        </Button>
      )}
      {items.horizontalRule && (
        <Button
          pressed={items.horizontalRule.isActive}
          disabled={!items.horizontalRule.canExec}
          onClick={items.horizontalRule.command}
          tooltip="Divider"
        >
          <div className="i-lucide-minus size-5 block" />
        </Button>
      )}
      {items.blockquote && (
        <Button
          pressed={items.blockquote.isActive}
          disabled={!items.blockquote.canExec}
          onClick={items.blockquote.command}
          tooltip="Blockquote"
        >
          <div className="i-lucide-text-quote size-5 block" />
        </Button>
      )}
      {items.bulletList && (
        <Button
          pressed={items.bulletList.isActive}
          disabled={!items.bulletList.canExec}
          onClick={items.bulletList.command}
          tooltip="Bullet List"
        >
          <div className="i-lucide-list size-5 block" />
        </Button>
      )}
      {items.orderedList && (
        <Button
          pressed={items.orderedList.isActive}
          disabled={!items.orderedList.canExec}
          onClick={items.orderedList.command}
          tooltip="Ordered List"
        >
          <div className="i-lucide-list-ordered size-5 block" />
        </Button>
      )}
      {items.taskList && (
        <Button
          pressed={items.taskList.isActive}
          disabled={!items.taskList.canExec}
          onClick={items.taskList.command}
          tooltip="Task List"
        >
          <div className="i-lucide-list-checks size-5 block" />
        </Button>
      )}
      {items.toggleList && (
        <Button
          pressed={items.toggleList.isActive}
          disabled={!items.toggleList.canExec}
          onClick={items.toggleList.command}
          tooltip="Toggle List"
        >
          <div className="i-lucide-list-collapse size-5 block" />
        </Button>
      )}
      {items.indentList && (
        <Button
          pressed={items.indentList.isActive}
          disabled={!items.indentList.canExec}
          onClick={items.indentList.command}
          tooltip="Increase indentation"
        >
          <div className="i-lucide-indent-increase size-5 block" />
        </Button>
      )}
      {items.dedentList && (
        <Button
          pressed={items.dedentList.isActive}
          disabled={!items.dedentList.canExec}
          onClick={items.dedentList.command}
          tooltip="Decrease indentation"
        >
          <div className="i-lucide-indent-decrease size-5 block" />
        </Button>
      )}
      {props.uploader && items.insertImage && (
        <ImageUploadPopover
          uploader={props.uploader}
          disabled={!items.insertImage.canExec}
          tooltip="Insert Image"
        >
          <div className="i-lucide-image size-5 block" />
        </ImageUploadPopover>
      )}
    </div>
  )
}

Usage

import { defineHeadingfunction defineHeading(): HeadingExtension } from 'prosekit/extensions/heading'

const extensionconst extension: HeadingExtension = defineHeadingfunction defineHeading(): HeadingExtension()

Commands

`setHeading`

editorconst editor: Editor<HeadingExtension>.commandsEditor<HeadingExtension>.commands: ToCommandAction<{
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
}>All 
{@link 
CommandAction
}
s defined by the editor..setHeadingsetHeading: CommandAction
(attrs?: HeadingAttrs | undefined) => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.({ levelHeadingAttrs.level: number: 1 })

`toggleHeading`

editorconst editor: Editor<HeadingExtension>.commandsEditor<HeadingExtension>.commands: ToCommandAction<{
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
}>All 
{@link 
CommandAction
}
s defined by the editor..toggleHeadingtoggleHeading: CommandAction
(attrs?: HeadingAttrs | undefined) => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.({ levelHeadingAttrs.level: number: 1 })

`insertHeading`

editorconst editor: Editor<HeadingExtension>.commandsEditor<HeadingExtension>.commands: ToCommandAction<{
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
}>All 
{@link 
CommandAction
}
s defined by the editor..insertHeadinginsertHeading: CommandAction
(attrs?: HeadingAttrs | undefined) => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.({ levelHeadingAttrs.level: number: 1 })

Keyboard Shortcuts

| Non-Apple | Apple | Description | | ----------------------------- | ----------------------------------- | --------------------------------------------------------------------------- | | CtrlAlt1 | CommandOption1 | Set the current block to an H1 node | | CtrlAlt2 | CommandOption2 | Set the current block to an H2 node | | CtrlAlt3 | CommandOption3 | Set the current block to an H3 node | | CtrlAlt4 | CommandOption4 | Set the current block to an H4 node | | CtrlAlt5 | CommandOption5 | Set the current block to an H5 node | | CtrlAlt6 | CommandOption6 | Set the current block to an H6 node | | Backspace | Backspace | When the text cursor is at the start of a heading node, set it to paragraph |

Keyboard Interaction

Type # and a space to create a heading. One # makes an H1 heading, two ## make an H2 heading, and so on.

API Reference

prosekit/extensions/heading