Example: list-custom-checkbox

div[data-custom-list-css-enabled] .ProseMirror .prosemirror-flat-list[data-list-kind="task"] {
  & > .list-marker label {
    box-sizing: border-box;
    display: flex;
    position: relative;
    left: calc(var(--spacing) * -0.5);
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease-in-out;

    &:hover {
      transform: scale(1.1);
    }

    &::after {
      position: absolute;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      content: "";
      color: var(--color-white);
      opacity: 0;
    }

    /* https://api.iconify.design/lucide.css?icons=check */
    &::after {
      display: inline-block;
      background-color: currentColor;
      -webkit-mask-image: var(--svg);
      mask-image: var(--svg);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    }

    & input {
      box-sizing: border-box;
      appearance: none;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      margin: 0;
      border-width: 1px;
      border-style: solid;
      border-radius: var(--radius-md);
      border-color: color-mix(in srgb, var(--color-gray-300) 50%, transparent);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: all 0.15s ease-in-out;

      &:hover {
        box-shadow: var(--shadow-md);
      }

      &:checked {
        border-color: var(--color-red-500);
        background-color: var(--color-red-500);
      }
    }
  }

  &[data-list-checked] > .list-marker label {
    &::after {
      opacity: 1;
    }
  }

  &[data-list-checked] {
    color: var(--color-gray-400);
    text-decoration: line-through;
    text-decoration-color: var(--color-gray-400);
  }
}

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
import './custom-list.css'

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

import { Toolbar } from '../../ui/toolbar'

import { defineExtension } from './extension'

const defaultContent: NodeJSON = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        { type: 'text', text: 'Custom list checkbox design and strikethrough for completed tasks. Please check ' },
        { type: 'text', text: 'custom-list.css', marks: [{ type: 'code' }] },
        { type: 'text', text: ' for the styles.' },
      ],
    },
    {
      type: 'list',
      attrs: { kind: 'task', checked: true },
      content: [
        { type: 'paragraph', content: [{ type: 'text', text: 'Completed Task' }] },
      ],
    },
    {
      type: 'list',
      attrs: { kind: 'task', checked: false },
      content: [
        { type: 'paragraph', content: [{ type: 'text', text: 'Incomplete Task' }] },
      ],
    },
  ],
}

export default function Editor() {
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, 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-white dark:bg-gray-950 text-black dark:text-white" data-custom-list-css-enabled>
        <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 { defineBasicExtension } from 'prosekit/basic'
import { union } from 'prosekit/core'

export function defineExtension() {
  return union(defineBasicExtension())
}

export type EditorExtension = ReturnType<typeof defineExtension>

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

import type {
  ComponentChild,
  MouseEventHandler,
} from 'preact'
import {
  TooltipContent,
  TooltipRoot,
  TooltipTrigger,
} from 'prosekit/preact/tooltip'

export default function Button(props: {
  pressed?: boolean
  disabled?: boolean
  onClick?: MouseEventHandler<HTMLButtonElement>
  tooltip?: string
  children: ComponentChild
}) {
  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
        ? (
          <TooltipContent className="z-50 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 [&:not([data-state])]:hidden will-change-transform motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-duration-150 motion-safe:data-[state=closed]:animate-duration-200 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=bottom]:slide-out-to-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=left]:slide-out-to-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=right]:slide-out-to-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[side=top]:slide-out-to-bottom-2">
            {props.tooltip}
          </TooltipContent>
        )
        : null}
    </TooltipRoot>
  )
}

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

import type { ComponentChild } from 'preact'
import type { JSX } from 'preact'
import { useState } from 'preact/hooks'
import type { Uploader } from 'prosekit/extensions/file'
import type { ImageExtension } from 'prosekit/extensions/image'
import { useEditor } from 'prosekit/preact'
import {
  PopoverContent,
  PopoverRoot,
  PopoverTrigger,
} from 'prosekit/preact/popover'

import { Button } from '../button'

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

  const editor = useEditor<ImageExtension>()

  const handleFileChange = (
    event: JSX.TargetedEvent<HTMLInputElement, Event>,
  ) => {
    const file = event.currentTarget.files?.[0]

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

  const handleUrlChange = (
    event: JSX.TargetedEvent<HTMLInputElement, Event>,
  ) => {
    const url = event.currentTarget.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 = (nextOpen: boolean) => {
    if (!nextOpen) {
      deferResetState()
    }
    setOpen(nextOpen)
  }

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

      <PopoverContent className="flex flex-col gap-y-4 p-6 text-sm w-sm z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden will-change-transform motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-duration-150 motion-safe:data-[state=closed]:animate-duration-200 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=bottom]:slide-out-to-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=left]:slide-out-to-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=right]:slide-out-to-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[side=top]:slide-out-to-bottom-2">
        {file ? null : (
          <>
            <label>Embed Link</label>
            <input
              className="flex h-9 rounded-md w-full bg-white dark:bg-gray-950 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>Upload</label>
            <input
              className="flex h-9 rounded-md w-full bg-white dark:bg-gray-950 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}
      </PopoverContent>
    </PopoverRoot>
  )
}

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

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

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

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

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"></div>
        </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>
  )
}