Example: minimal

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

import {
  html,
  LitElement,
  type PropertyDeclaration,
  type PropertyValues,
} from 'lit'
import {
  createRef,
  ref,
  type Ref,
} from 'lit/directives/ref.js'
import { defineBasicExtension } from 'prosekit/basic'
import type { Editor } from 'prosekit/core'
import { createEditor } from 'prosekit/core'

export class LitEditor extends LitElement {
  static override properties = {
    editor: { state: true, attribute: false } satisfies PropertyDeclaration<Editor>,
  }

  private editor: Editor
  private ref: Ref<HTMLDivElement>

  constructor() {
    super()

    const extension = defineBasicExtension()
    this.editor = createEditor({ extension })
    this.ref = createRef<HTMLDivElement>()
  }

  override createRenderRoot() {
    return this
  }

  override updated(changedProperties: PropertyValues) {
    super.updated(changedProperties)
    this.editor.mount(this.ref.value)
  }

  override render() {
    return html`<div class="outline-solid p-4" ${ref(this.ref)}></div>`
  }
}

export function registerLitEditor() {
  if (customElements.get('lit-editor-example-minimal')) return
  customElements.define('lit-editor-example-minimal', LitEditor)
}

declare global {
  interface HTMLElementTagNameMap {
    'lit-editor-example-minimal': LitEditor
  }
}

export {
  LitEditor as ExampleEditor,
  registerLitEditor,
} from './editor'

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

import { useMemo } from 'preact/hooks'
import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/preact'

export default function Editor() {
  const editor = useMemo(() => {
    const extension = defineBasicExtension()
    return createEditor({ extension })
  }, [])

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} className="outline-solid p-4"></div>
    </ProseKit>
  )
}

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

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

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/solid'
import type { JSX } from 'solid-js'

export default function Editor(): JSX.Element {
  const extension = defineBasicExtension()
  const editor = createEditor({ extension })

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} class="outline-solid p-4"></div>
    </ProseKit>
  )
}

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

<script lang="ts">
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/svelte'

const extension = defineBasicExtension()
const editor = createEditor({ extension })
</script>

<ProseKit {editor}>
  <div {@attach editor.mount} class="outline-solid p-4"></div>
</ProseKit>

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

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

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'

export function setupVanillaEditor() {
  const extension = defineBasicExtension()
  const editor = createEditor({ extension })

  return {
    render: () => {
      const element = document.createElement('div')
      element.className = 'outline-solid p-4'
      editor.mount(element)
      return element
    },
    destroy: () => {
      editor.unmount()
    },
  }
}

export { setupVanillaEditor } from './editor'

<script setup lang="ts">
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/vue'

const extension = defineBasicExtension()
const editor = createEditor({ extension })
</script>

<template>
  <ProseKit :editor="editor">
    <div :ref="(el) => editor.mount(el as HTMLElement | null)" class="outline-solid p-4" />
  </ProseKit>
</template>

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