Example: code-block-themes

'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-code-block.ts'

import { defineExtension } from './extension.ts'
import Toolbar from './toolbar.tsx'

interface EditorProps {
  initialContent?: NodeJSON
}

export default function Editor(props: EditorProps) {
  const defaultContent = props.initialContent ?? sampleContent
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, 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 { defineBasicExtension } from 'prosekit/basic'
import { union } from 'prosekit/core'

import { defineCodeBlockView } from '../../ui/code-block-view/index.ts'

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

export type EditorExtension = ReturnType<typeof defineExtension>

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

'use client'

import { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'
import { useExtension } from 'prosekit/react'
import { useMemo, useState } from 'react'

export function ThemeSelector() {
  const [theme, setTheme] = useState('github-dark')
  const extension = useMemo(() => {
    return defineCodeBlockShiki({ themes: [theme as ShikiBundledTheme] })
  }, [theme])
  useExtension(extension)

  return (
    <>
      <label htmlFor="code-block-theme-selector">Theme</label>
      <select
        id="code-block-theme-selector"
        value={theme}
        onChange={(event) => setTheme(event.target.value)}
        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"
      >
        {shikiBundledThemesInfo.map((info) => (
          <option key={info.id} value={info.id}>
            {info.id}
          </option>
        ))}
      </select>
    </>
  )
}

'use client'

import { ThemeSelector } from './theme-selector.tsx'

export default function Toolbar() {
  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">
      <ThemeSelector />
    </div>
  )
}

import type { NodeJSON } from 'prosekit/core'

const js = `
async function start() {
  while (true) {
    await sleep()
    await eat()
    await code('JavaScript!')
  }
}
`.trim()

const py = `
async def start():
    while True:
        await sleep()
        await eat()
        await code('Python!')
`.trim()

const go = `
func start() {
	for {
		sleep()
		eat()
		code('Go!')
	}
}
`.trim()

const flowchart = [
  'graph TD',
  '  A[Start] --> B{Is it working?}',
  '  B -->|Yes| C[Great!]',
  '  B -->|No| D[Debug]',
  '  D --> B',
  '  C --> E[End]',
].join('\n')

const sequence = [
  'sequenceDiagram',
  '  Alice->>Bob: Hello Bob!',
  '  Bob-->>Alice: Hi Alice!',
  '  Alice->>Bob: How are you?',
  '  Bob-->>Alice: Great, thanks!',
].join('\n')

export const sampleContent: NodeJSON = {
  type: 'doc',
  content: [
    {
      type: 'codeBlock',
      attrs: { language: 'javascript' },
      content: [{ type: 'text', text: js }],
    },
    {
      type: 'codeBlock',
      attrs: { language: 'python' },
      content: [{ type: 'text', text: py }],
    },
    {
      type: 'codeBlock',
      attrs: { language: 'go' },
      content: [{ type: 'text', text: go }],
    },
    {
      type: 'codeBlock',
      attrs: { language: 'mermaid' },
      content: [{ type: 'text', text: flowchart }],
    },
    {
      type: 'codeBlock',
      attrs: { language: 'mermaid' },
      content: [{ type: 'text', text: sequence }],
    },
  ],
}

'use client'

import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'
import { isCodeBlockPreviewHiddenDecoration, shikiBundledLanguagesInfo, type CodeBlockAttrs } from 'prosekit/extensions/code-block'
import { TextSelection } from 'prosekit/pm/state'
import type { ReactNodeViewProps } from 'prosekit/react'
import { useMemo, useRef } from 'react'

export default function CodeBlockView(props: ReactNodeViewProps) {
  const attrs = props.node.attrs as CodeBlockAttrs
  const language = attrs.language || ''
  const hidePreview = props.decorations.some(isCodeBlockPreviewHiddenDecoration)
  const preRef = useRef<HTMLElement | null>(null)

  const showMermaidPreview = !hidePreview && language === 'mermaid'

  const setLanguage = (language: string) => {
    const attrs: CodeBlockAttrs = { language }
    props.setAttrs(attrs)
  }

  const focusSource = (event: React.MouseEvent | React.KeyboardEvent) => {
    event.preventDefault()
    const pos = props.getPos()
    if (typeof pos !== 'number') return
    const { state, dispatch } = props.view
    const selection = TextSelection.near(state.doc.resolve(pos + 1), 1)
    dispatch(state.tr.setSelection(selection))
    props.view.focus()
    preRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
  }

  const code = props.node.textContent

  const mermaidPreview = useMemo(() => {
    if (language !== 'mermaid') return { svg: null, error: null }
    try {
      return { svg: renderMermaidSVG(code, THEMES['tokyo-night']), error: null }
    } catch (err) {
      return { svg: null, error: err instanceof Error ? err : new Error(String(err)) }
    }
  }, [code, language])

  return (
    <>
      <div
        className="relative mx-2 top-3 h-0 select-none overflow-visible text-xs data-preview:hidden"
        contentEditable={false}
        data-preview={showMermaidPreview ? '' : undefined}
      >
        <select
          aria-label="Code block language"
          className="outline-unset focus:outline-unset relative box-border w-auto cursor-pointer select-none appearance-none rounded-sm border-none bg-transparent px-2 py-1 text-xs transition text-(--prosemirror-highlight) opacity-0 hover:opacity-80 [div[data-node-view-root]:hover_&]:opacity-50 hover:[div[data-node-view-root]:hover_&]:opacity-80"
          onChange={(event) => setLanguage(event.target.value)}
          value={language}
        >
          <option value="">Plain Text</option>
          {shikiBundledLanguagesInfo.map((info) => (
            <option key={info.id} value={info.id}>
              {info.name}
            </option>
          ))}
        </select>
      </div>
      <pre
        ref={(element) => {
          props.contentRef(element)
          preRef.current = element
        }}
        className="data-preview:hidden"
        data-preview={showMermaidPreview ? '' : undefined}
        data-language={language}
      ></pre>
      {showMermaidPreview && (
        <div
          aria-label="Edit source"
          className="block py-2 overflow-auto"
          contentEditable={false}
          onMouseDown={focusSource}
        >
          {mermaidPreview.error ? <pre>{mermaidPreview.error.message}</pre> : null}
          {mermaidPreview.svg ? <div dangerouslySetInnerHTML={{ __html: mermaidPreview.svg }}></div> : null}
        </div>
      )}
    </>
  )
}

import type { Extension } from 'prosekit/core'
import { defineReactNodeView, type ReactNodeViewComponent } from 'prosekit/react'

import CodeBlockView from './code-block-view.tsx'

export function defineCodeBlockView(): Extension {
  return defineReactNodeView({
    name: 'codeBlock',
    contentAs: 'code',
    component: CodeBlockView satisfies ReactNodeViewComponent,
  })
}