@prosekit/react 0.6.0 → 0.6.1

package/src/hooks/use-extension.ts

@@ -0,0 +1,41 @@
+import type {
+  Editor,
+  Extension,
+  Priority,
+} from '@prosekit/core'
+
+import { useEditorContext } from '../contexts/editor-context'
+
+import { useEditorExtension } from './use-editor-extension'
+import { usePriorityExtension } from './use-priority-extension'
+
+export interface UseExtensionOptions {
+  /**
+   * The editor to add the extension to. If not provided, it will use the
+   * editor from the nearest `ProseKit` component.
+   */
+  editor?: Editor
+
+  /**
+   * Optional priority to add the extension with.
+   */
+  priority?: Priority
+}
+
+/**
+ * Add an extension to the editor.
+ */
+export function useExtension(
+  /**
+   * The extension to add to the editor. If it changes, the previous
+   * extension will be removed and the new one (if not null) will be added.
+   */
+  extension: Extension | null,
+  options?: UseExtensionOptions,
+): void {
+  const editorContext = useEditorContext()
+  useEditorExtension(
+    options?.editor || editorContext,
+    usePriorityExtension(extension, options?.priority),
+  )
+}

package/src/hooks/use-keymap.ts

@@ -0,0 +1,15 @@
+import {
+  defineKeymap,
+  type Keymap,
+} from '@prosekit/core'
+import { useMemo } from 'react'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+export function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void {
+  const extension = useMemo(() => defineKeymap(keymap), [keymap])
+  useExtension(extension, options)
+}

package/src/hooks/use-priority-extension.ts

@@ -0,0 +1,18 @@
+import {
+  withPriority,
+  type Extension,
+  type Priority,
+} from '@prosekit/core'
+import { useMemo } from 'react'
+
+/**
+ * @internal
+ */
+export function usePriorityExtension<T extends Extension = Extension>(
+  extension: T | null,
+  priority?: Priority | null,
+): T | null {
+  return useMemo(() => {
+    return extension && priority ? withPriority(extension, priority) : extension
+  }, [extension, priority])
+}

package/src/hooks/use-state-update.ts

@@ -0,0 +1,24 @@
+import { defineUpdateHandler } from '@prosekit/core'
+import type { EditorState } from '@prosekit/pm/state'
+import { useMemo } from 'react'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+export function useStateUpdate(
+  handler: (state: EditorState) => void,
+  options?: UseExtensionOptions,
+): void {
+  const extension = useMemo(
+    () => defineUpdateHandler((view) => handler(view.state)),
+    [handler],
+  )
+  useExtension(extension, options)
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export {
+  ProseKit,
+  type ProseKitProps,
+} from './components/prosekit'
+export {
+  defineReactMarkView,
+  type ReactMarkViewComponent,
+  type ReactMarkViewOptions,
+  type ReactMarkViewProps,
+} from './extensions/react-mark-view'
+export {
+  defineReactNodeView,
+  type ReactNodeViewComponent,
+  type ReactNodeViewOptions,
+  type ReactNodeViewProps,
+} from './extensions/react-node-view'
+export { useDocChange } from './hooks/use-doc-change'
+export { useEditor } from './hooks/use-editor'
+export {
+  useEditorDerivedValue,
+  type UseEditorDerivedOptions,
+} from './hooks/use-editor-derived-value'
+export {
+  useExtension,
+  type UseExtensionOptions,
+} from './hooks/use-extension'
+export { useKeymap } from './hooks/use-keymap'
+export { useStateUpdate } from './hooks/use-state-update'
+export { type PropsWithClassName } from './types'

package/src/types.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export type PropsWithClassName<P = unknown> = P & {
+  className?: string | undefined
+}