Example: unmount

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'

import ExtensionComponent from './extension-component'

export default function EditorComponent(props: {
  placeholder: string
}) {
  const editor = useMemo(() => {
    return createEditor({ extension: defineBasicExtension() })
  }, [])

  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">
        <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>
      <ExtensionComponent placeholder={props.placeholder} />
    </ProseKit>
  )
}

import {
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'preact/hooks'

import EditorComponent from './editor-component'

function EditorGroup() {
  const nextKeyRef = useRef(1)
  const [editorKeys, setEditorKeys] = useState<number[]>([])

  const addEditor = useCallback(() => {
    const key = nextKeyRef.current
    nextKeyRef.current += 1
    setEditorKeys((keys) => [...keys, key])
  }, [])

  const removeEditor = useCallback((key: number) => {
    setEditorKeys((keys) => keys.filter((k) => k !== key))
  }, [])

  useEffect(() => {
    if (nextKeyRef.current === 1) {
      addEditor()
    }
  }, [addEditor])

  return (
    <div className="flex flex-col gap-2">
      <div className="flex gap-2">
        <button onClick={addEditor} className="border p-2">
          Add editor
        </button>
        {editorKeys.map((key) => (
          <button
            key={key}
            onClick={() => removeEditor(key)}
            className="border p-2"
          >
            Unmount No.{key}
          </button>
        ))}
      </div>
      {editorKeys.map((key) => (
        <div key={key} className="h-32">
          <EditorComponent
            placeholder={`Editor No.${key} of ${editorKeys.length}`}
          />
        </div>
      ))}
    </div>
  )
}

export default EditorGroup

import { useMemo } from 'preact/hooks'
import { definePlaceholder } from 'prosekit/extensions/placeholder'
import { useExtension } from 'prosekit/preact'

export default function ExtensionComponent(props: {
  placeholder: string
}) {
  const extension = useMemo(
    () => definePlaceholder({ placeholder: props.placeholder }),
    [props.placeholder],
  )

  useExtension(extension)

  return null
}

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'

import ExtensionComponent from './extension-component.svelte'

const props = $props<{
  placeholder: string
}>()

const extension = defineBasicExtension()
const editor = createEditor({ extension })

const mount = (element: HTMLElement) => {
  editor.mount(element)
  return { destroy: () => editor.unmount() }
}
</script>

<ProseKit {editor}>
  <div class="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">
    <div class="relative w-full flex-1 box-border overflow-y-auto">
      <div use:mount class="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>
  <ExtensionComponent placeholder={props.placeholder} />
</ProseKit>

<script lang="ts">
import EditorComponent from './editor-component.svelte'

let nextKey = $state(1)
let editorKeys = $state<number[]>([])
let initialized = $state(false)

function addEditor() {
  const key = nextKey
  nextKey += 1
  editorKeys = [...editorKeys, key]
}

function removeEditor(key: number) {
  editorKeys = editorKeys.filter((k) => k !== key)
}

// Add the first editor on mount
$effect(() => {
  if (!initialized) {
    initialized = true
    addEditor()
  }
})
</script>

<div class="flex flex-col gap-2">
  <div class="flex gap-2">
    <button class="border p-2" onclick={addEditor}>
      Add editor
    </button>
    {#each editorKeys as key (key)}
      <button
        class="border p-2"
        onclick={() => removeEditor(key)}
      >
        Unmount No.{key}
      </button>
    {/each}
  </div>
  {#each editorKeys as key (key)}
    <div class="h-32">
      <EditorComponent placeholder={`Editor No.${key} of ${editorKeys.length}`} />
    </div>
  {/each}
</div>

<script lang="ts">
import { definePlaceholder } from 'prosekit/extensions/placeholder'
import { useExtension } from 'prosekit/svelte'
import {
  derived,
  writable,
} from 'svelte/store'

const props = $props<{
  placeholder: string
}>()

// Create a store from the reactive placeholder value
const placeholderStore = writable<string>(props.placeholder)

// Update store when placeholder changes
$effect(() => {
  placeholderStore.set(props.placeholder)
})

// Create extension derived from the placeholder store
const extension = derived(placeholderStore, ($placeholder) => {
  return definePlaceholder({ placeholder: $placeholder })
})

useExtension(extension)
</script>

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

<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'
import {
  ref,
  watchPostEffect,
} from 'vue'

import ExtensionComponent from './extension-component.vue'

const props = defineProps<{
  placeholder: string
}>()

const extension = defineBasicExtension()
const editor = createEditor({ extension })

const editorRef = ref<HTMLDivElement | null>(null)
watchPostEffect((onCleanup) => {
  editor.mount(editorRef.value)
  onCleanup(() => editor.unmount())
})
</script>

<template>
  <ProseKit :editor="editor">
    <div class="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">
      <div class="relative w-full flex-1 box-border overflow-y-auto">
        <div ref="editorRef" class="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>
    <ExtensionComponent :placeholder="props.placeholder" />
  </ProseKit>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import EditorComponent from './editor-component.vue'

const nextKey = ref(1)
const editorKeys = ref<number[]>([])

function addEditor() {
  const key = nextKey.value
  nextKey.value += 1
  editorKeys.value = [...editorKeys.value, key]
}

function removeEditor(key: number) {
  editorKeys.value = editorKeys.value.filter((k) => k !== key)
}

// Add the first editor on mount
if (nextKey.value === 1) {
  addEditor()
}
</script>

<template>
  <div class="flex flex-col gap-2">
    <div class="flex gap-2">
      <button class="border p-2" @click="addEditor">
        Add editor
      </button>
      <button
        v-for="key in editorKeys"
        :key="key"
        class="border p-2"
        @click="removeEditor(key)"
      >
        Unmount No.{{ key }}
      </button>
    </div>
    <div v-for="key in editorKeys" :key="key" class="h-32">
      <EditorComponent :placeholder="`Editor No.${key} of ${editorKeys.length}`" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { definePlaceholder } from 'prosekit/extensions/placeholder'
import { useExtension } from 'prosekit/vue'
import { computed } from 'vue'

const props = defineProps<{
  placeholder: string
}>()

const extension = computed(() => {
  return definePlaceholder({ placeholder: props.placeholder })
})

useExtension(extension)
</script>

<template>
  <slot />
</template>

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