Preact

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

import { useMemofunction useMemo<T>(factory: () => T, inputs: Inputs | undefined): T
Pass a factory function and an array of inputs.
useMemo will only recompute the memoized value when one of the inputs has changed.
This optimization helps to avoid expensive calculations on every render.
If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument. } from 'preact/hooks'
import { defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public } from 'prosekit/basic'
import { createEditorfunction createEditor<E extends Extension>(options: EditorOptions<E>): Editor<E>
@public } from 'prosekit/core'
import { ProseKitconst ProseKit: ComponentType<ProseKitProps>
The root component for a ProseKit editor.
@public } from 'prosekit/preact'

export default function Editorfunction Editor(): JSXInternal.Element() {
  const editorconst editor: Editor<BasicExtension> = useMemouseMemo<Editor<BasicExtension>>(factory: () => Editor<BasicExtension>, inputs: Inputs | undefined): Editor<BasicExtension>
Pass a factory function and an array of inputs.
useMemo will only recompute the memoized value when one of the inputs has changed.
This optimization helps to avoid expensive calculations on every render.
If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument.(() => {
    return createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>
@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtension
The extension to use when creating the editor.: defineBasicExtensionfunction defineBasicExtension(): BasicExtension
Define a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public() })
  }, [])

  return (
    <ProseKitconst ProseKit: ComponentType<ProseKitProps>
The root component for a ProseKit editor.
@public editorProseKitProps.editor: Editor<any>={editorconst editor: Editor<BasicExtension>}>
      <divJSXInternal.IntrinsicElements.div: JSXInternal.HTMLAttributes<HTMLDivElement> refClassAttributes<HTMLDivElement>.ref?: Ref<HTMLDivElement> | undefined={editorconst editor: Editor<BasicExtension>.mountEditor<BasicExtension>.mount: (place: HTMLElement | null | undefined) => void | VoidFunction
Mount the editor to the given HTML element. Pass `null` or `undefined` to
unmount the editor. When an element is passed, this method returns a
function to unmount the editor.} classJSXInternal.HTMLAttributes<HTMLDivElement>.class?: JSXInternal.Signalish<string | undefined>="editor" />
    </ProseKitconst ProseKit: ComponentType<ProseKitProps>
The root component for a ProseKit editor.
@public>
  )
}

import { definePreactNodeView, type PreactNodeViewProps } from 'prosekit/preact'

function ImageView(props: PreactNodeViewProps) {
  const src = String(props.node.attrs.src ?? '')
  return <img src={src} alt={String(props.node.attrs.alt ?? '')} />
}

const extension = definePreactNodeView({
  name: 'image',
  component: ImageView,
})