@prosekit/react 0.6.7 → 0.6.9

package/src/extensions/react-mark-view.ts

@@ -1,10 +1,13 @@
 import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'
-import type { MarkViewConstructor } from '@prosekit/pm/view'
 import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
-import { useMarkViewContext, useMarkViewFactory, type MarkViewContext, type ReactMarkViewUserOptions } from '@prosemirror-adapter/react'
-import { createElement, useMemo, type ComponentType, type FC } from 'react'
-
-import { useExtension } from '../hooks/use-extension'
+import {
+  AbstractReactMarkView,
+  buildReactMarkViewCreator,
+  type MarkViewContext,
+  type ReactRendererResult,
+} from '@prosemirror-adapter/react'
+import { createElement, type ComponentType, type ReactPortal } from 'react'
+import { createPortal } from 'react-dom'
 
 /**
  * @public
@@ -28,25 +31,30 @@ export interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkV
   name: string
 }
 
-function withMarkViewProps(component: ReactMarkViewComponent) {
-  return function MarkViewPropsWrapper() {
-    const props: ReactMarkViewProps = useMarkViewContext()
-    return createElement(component, props)
+class ProseKitReactMarkView extends AbstractReactMarkView<ReactMarkViewComponent> {
+  render = (): ReactPortal => {
+    const UserComponent = this.component
+    const props = { ...this.context }
+    return createPortal(
+      createElement(UserComponent, props),
+      this.dom,
+      this.key,
+    )
   }
 }
 
 /**
  * @internal
  */
-export const ReactMarkViewConsumer: FC = () => {
-  const markViewFactory = useMarkViewFactory()
-  const extension = useMemo(
-    () => defineReactMarkViewFactory(markViewFactory),
-    [markViewFactory],
-  )
-  useExtension(extension)
-
-  return null
+export function defineReactMarkViewFactory(
+  renderReactRenderer: ReactRendererResult['renderReactRenderer'],
+  removeReactRenderer: ReactRendererResult['removeReactRenderer'],
+): Extension {
+  const factory = buildReactMarkViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactMarkView)
+  return defineMarkViewFactory<ReactMarkViewOptions>({
+    group: 'react',
+    factory,
+  })
 }
 
 /**
@@ -55,25 +63,9 @@ export const ReactMarkViewConsumer: FC = () => {
  * @public
  */
 export function defineReactMarkView(options: ReactMarkViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: ReactMarkViewUserOptions = {
-    ...userOptions,
-    component: withMarkViewProps(component),
-  }
-
-  return defineMarkViewComponent<ReactMarkViewUserOptions>({
-    group: 'react',
-    name,
-    args,
-  })
-}
-
-function defineReactMarkViewFactory(
-  factory: (options: ReactMarkViewUserOptions) => MarkViewConstructor,
-) {
-  return defineMarkViewFactory<ReactMarkViewUserOptions>({
+  return defineMarkViewComponent<ReactMarkViewOptions>({
     group: 'react',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/src/extensions/react-node-view.ts

@@ -1,10 +1,13 @@
 import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'
-import type { NodeViewConstructor } from '@prosekit/pm/view'
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
-import { useNodeViewContext, useNodeViewFactory, type NodeViewContext, type ReactNodeViewUserOptions } from '@prosemirror-adapter/react'
-import { createElement, useMemo, type ComponentType, type FC } from 'react'
-
-import { useExtension } from '../hooks/use-extension'
+import {
+  AbstractReactNodeView,
+  buildReactNodeViewCreator,
+  type NodeViewContext,
+  type ReactRendererResult,
+} from '@prosemirror-adapter/react'
+import { createElement, type ComponentType, type ReactPortal } from 'react'
+import { createPortal } from 'react-dom'
 
 /**
  * @public
@@ -28,25 +31,30 @@ export interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeV
   name: string
 }
 
-function withNodeViewProps(component: ReactNodeViewComponent) {
-  return function NodeViewPropsWrapper() {
-    const props: ReactNodeViewProps = useNodeViewContext()
-    return createElement(component, props)
+class ProseKitReactNodeView extends AbstractReactNodeView<ReactNodeViewComponent> {
+  render = (): ReactPortal => {
+    const UserComponent = this.component
+    const props = { ...this.context }
+    return createPortal(
+      createElement(UserComponent, props),
+      this.dom,
+      this.key,
+    )
   }
 }
 
 /**
  * @internal
  */
-export const ReactNodeViewConsumer: FC = () => {
-  const nodeViewFactory = useNodeViewFactory()
-  const extension = useMemo(
-    () => defineReactNodeViewFactory(nodeViewFactory),
-    [nodeViewFactory],
-  )
-  useExtension(extension)
-
-  return null
+export function defineReactNodeViewFactory(
+  renderReactRenderer: ReactRendererResult['renderReactRenderer'],
+  removeReactRenderer: ReactRendererResult['removeReactRenderer'],
+): Extension {
+  const factory = buildReactNodeViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactNodeView)
+  return defineNodeViewFactory<ReactNodeViewOptions>({
+    group: 'react',
+    factory,
+  })
 }
 
 /**
@@ -55,25 +63,9 @@ export const ReactNodeViewConsumer: FC = () => {
  * @public
  */
 export function defineReactNodeView(options: ReactNodeViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: ReactNodeViewUserOptions = {
-    ...userOptions,
-    component: withNodeViewProps(component),
-  }
-
-  return defineNodeViewComponent<ReactNodeViewUserOptions>({
-    group: 'react',
-    name,
-    args,
-  })
-}
-
-function defineReactNodeViewFactory(
-  factory: (options: ReactNodeViewUserOptions) => NodeViewConstructor,
-) {
-  return defineNodeViewFactory<ReactNodeViewUserOptions>({
+  return defineNodeViewComponent<ReactNodeViewOptions>({
     group: 'react',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/src/hooks/use-doc-change.ts

@@ -2,8 +2,8 @@ import { defineDocChangeHandler } from '@prosekit/core'
 import type { ProseMirrorNode } from '@prosekit/pm/model'
 import { useMemo } from 'react'
 
-import { useEventCallback } from './use-event-callback'
-import { useExtension, type UseExtensionOptions } from './use-extension'
+import { useEventCallback } from './use-event-callback.ts'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor document changes.

package/src/hooks/use-editor-derived-value.ts

@@ -1,7 +1,7 @@
 import { defineMountHandler, defineUpdateHandler, EditorNotFoundError, union, type Editor, type Extension } from '@prosekit/core'
 import { useMemo, useSyncExternalStore } from 'react'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
 export interface UseEditorDerivedOptions<E extends Extension = any> {
   /**

package/src/hooks/use-editor.ts

@@ -1,7 +1,7 @@
 import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'
 import { useEffect, useReducer } from 'react'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
 /**
  * Retrieves the editor instance from the nearest ProseKit component.

package/src/hooks/use-extension.ts

@@ -1,9 +1,9 @@
 import type { Editor, Extension, Priority } from '@prosekit/core'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
-import { useEditorExtension } from './use-editor-extension'
-import { usePriorityExtension } from './use-priority-extension'
+import { useEditorExtension } from './use-editor-extension.ts'
+import { usePriorityExtension } from './use-priority-extension.ts'
 
 export interface UseExtensionOptions {
   /**

package/src/hooks/use-keymap.ts

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

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

@@ -2,8 +2,8 @@ import { defineUpdateHandler } from '@prosekit/core'
 import type { EditorState } from '@prosekit/pm/state'
 import { useMemo } from 'react'
 
-import { useEventCallback } from './use-event-callback'
-import { useExtension, type UseExtensionOptions } from './use-extension'
+import { useEventCallback } from './use-event-callback.ts'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor state changes.

package/src/index.ts

@@ -1,20 +1,20 @@
-export { ProseKit, type ProseKitProps } from './components/prosekit'
+export { ProseKit, type ProseKitProps } from './components/prosekit.ts'
 export {
   defineReactMarkView,
   type ReactMarkViewComponent,
   type ReactMarkViewOptions,
   type ReactMarkViewProps,
-} from './extensions/react-mark-view'
+} from './extensions/react-mark-view.ts'
 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'
+} from './extensions/react-node-view.ts'
+export { useDocChange } from './hooks/use-doc-change.ts'
+export { useEditorDerivedValue, type UseEditorDerivedOptions } from './hooks/use-editor-derived-value.ts'
+export { useEditor } from './hooks/use-editor.ts'
+export { useExtension, type UseExtensionOptions } from './hooks/use-extension.ts'
+export { useKeymap } from './hooks/use-keymap.ts'
+export { useStateUpdate } from './hooks/use-state-update.ts'
+export { type PropsWithClassName } from './types.ts'

package/dist/create-component-D8vvwyIA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component-D8vvwyIA.js","names":[],"sources":["../src/components/merge-refs.ts","../src/components/create-component.ts"],"sourcesContent":["import type { Ref } from 'react'\n\n/**\n * Assigns a value to a ref.\n * @returns The ref cleanup callback, if any.\n */\nfunction assignRef<T>(\n  ref: Ref<T> | undefined,\n  value: T | null,\n): VoidFunction | void {\n  if (typeof ref === 'function') {\n    return ref(value)\n  } else if (ref) {\n    ref.current = value\n  }\n}\n\n/**\n * Merges multiple refs into a single one.\n */\nexport function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (value: T | null) => {\n    const cleanups: VoidFunction[] = []\n\n    for (const ref of refs) {\n      const cleanup = assignRef(ref, value)\n      const isCleanup = typeof cleanup === 'function'\n      cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null))\n    }\n\n    return () => {\n      for (const cleanup of cleanups) cleanup()\n    }\n  }\n}\n","import type { AnyFunction } from '@prosekit/core'\nimport {\n  createElement,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type RefAttributes,\n} from 'react'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\nimport { mergeRefs } from './merge-refs'\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport function createComponent<\n  Props extends object,\n  CustomElement extends HTMLElement,\n>(\n  tagName: string,\n  displayName: string,\n  propNames: string[],\n  eventNames: string[],\n): ForwardRefExoticComponent<\n  Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>\n> {\n  const hasEditor = propNames.includes('editor')\n  const lowerCaseEventNameMap = new Map(\n    eventNames.map((name) => [name.toLowerCase(), name]),\n  )\n\n  const Component = forwardRef<any, any>((props: Props, ref) => {\n    const [el, setEl] = useState<HTMLElement | null>(null)\n\n    const properties: Record<string, unknown> = {}\n    const attributes: Record<string, unknown> = {}\n    const eventHandlersRef = useRef<Record<string, AnyFunction>>({})\n    const eventHandlers: Record<string, AnyFunction> = {}\n\n    for (const [name, value] of Object.entries(props)) {\n      if (value === undefined) {\n        continue\n      }\n\n      if (propNames.includes(name)) {\n        properties[name] = value\n        continue\n      }\n\n      if (name.startsWith('on')) {\n        const lowerCaseEventName = name.slice(2).toLowerCase()\n        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)\n        if (eventName) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers[eventName] = (event: Event) => {\n            const handler = value as AnyFunction | null\n            if (typeof handler === 'function') {\n              handler(extractDetail ? (event as CustomEvent).detail : event)\n            }\n          }\n          continue\n        }\n      }\n\n      if (name === 'className') {\n        attributes['class'] = value\n      } else {\n        attributes[name] = value\n      }\n    }\n\n    const editor = useEditorContext()\n\n    if (hasEditor && editor && !properties['editor']) {\n      properties['editor'] = editor\n    }\n\n    // Set all properties.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) return\n      for (const [name, value] of Object.entries(properties)) {\n        if (value !== undefined) {\n          // @ts-expect-error: we know that name is a valid property name\n          // eslint-disable-next-line react-hooks/immutability\n          el[name] = value\n        }\n      }\n    }, [el, ...propNames.map((name) => properties[name])])\n\n    // Put all event listeners extracted from `props` into `eventHandlersRef`.\n    useIsomorphicLayoutEffect(() => {\n      eventHandlersRef.current = eventHandlers\n    })\n\n    // Register the event listeners to the element.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) {\n        return\n      }\n\n      const fixedEventHandlers: Record<string, AnyFunction> = {}\n\n      for (const eventName of eventNames) {\n        fixedEventHandlers[eventName] = (event: Event) => {\n          eventHandlersRef.current[eventName]?.(event)\n        }\n      }\n\n      for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n        el.addEventListener(name, handler)\n      }\n\n      return () => {\n        for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n          el.removeEventListener(name, handler)\n        }\n      }\n    }, [el])\n\n    const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref])\n\n    return createElement(tagName, {\n      ...attributes,\n      // Suppress hydration warnings for web components as the attributes are set after the component is mounted.\n      suppressHydrationWarning: true,\n      ref: mergedRef,\n    })\n  })\n\n  Component.displayName = displayName\n\n  return Component\n}\n"],"mappings":";;;;;;;;AAMA,SAAS,UACP,KACA,OACqB;AACrB,KAAI,OAAO,QAAQ,WACjB,QAAO,IAAI,MAAM;UACR,IACT,KAAI,UAAU;;;;;AAOlB,SAAgB,UAAa,MAAsC;AACjE,SAAQ,UAAoB;EAC1B,MAAM,WAA2B,EAAE;AAEnC,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,UAAU,UAAU,KAAK,MAAM;GACrC,MAAM,YAAY,OAAO,YAAY;AACrC,YAAS,KAAK,YAAY,gBAAgB,UAAU,KAAK,KAAK,CAAC;;AAGjE,eAAa;AACX,QAAK,MAAM,WAAW,SAAU,UAAS;;;;;;;ACb/C,MAAM,4BAA4B,OAAO,WAAW,cAAc,kBAAkB;AAEpF,SAAgB,gBAId,SACA,aACA,WACA,YAGA;CACA,MAAM,YAAY,UAAU,SAAS,SAAS;CAC9C,MAAM,wBAAwB,IAAI,IAChC,WAAW,KAAK,SAAS,CAAC,KAAK,aAAa,EAAE,KAAK,CAAC,CACrD;CAED,MAAM,YAAY,YAAsB,OAAc,QAAQ;EAC5D,MAAM,CAAC,IAAI,SAAS,SAA6B,KAAK;EAEtD,MAAM,aAAsC,EAAE;EAC9C,MAAM,aAAsC,EAAE;EAC9C,MAAM,mBAAmB,OAAoC,EAAE,CAAC;EAChE,MAAM,gBAA6C,EAAE;AAErD,OAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,EAAE;AACjD,OAAI,UAAU,OACZ;AAGF,OAAI,UAAU,SAAS,KAAK,EAAE;AAC5B,eAAW,QAAQ;AACnB;;AAGF,OAAI,KAAK,WAAW,KAAK,EAAE;IACzB,MAAM,qBAAqB,KAAK,MAAM,EAAE,CAAC,aAAa;IACtD,MAAM,YAAY,sBAAsB,IAAI,mBAAmB;AAC/D,QAAI,WAAW;KACb,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,mBAAc,cAAc,UAAiB;MAC3C,MAAM,UAAU;AAChB,UAAI,OAAO,YAAY,WACrB,SAAQ,gBAAiB,MAAsB,SAAS,MAAM;;AAGlE;;;AAIJ,OAAI,SAAS,YACX,YAAW,WAAW;OAEtB,YAAW,QAAQ;;EAIvB,MAAM,SAAS,kBAAkB;AAEjC,MAAI,aAAa,UAAU,CAAC,WAAW,UACrC,YAAW,YAAY;AAIzB,kCAAgC;AAC9B,OAAI,CAAC,GAAI;AACT,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,WAAW,CACpD,KAAI,UAAU,OAGZ,IAAG,QAAQ;KAGd,CAAC,IAAI,GAAG,UAAU,KAAK,SAAS,WAAW,MAAM,CAAC,CAAC;AAGtD,kCAAgC;AAC9B,oBAAiB,UAAU;IAC3B;AAGF,kCAAgC;AAC9B,OAAI,CAAC,GACH;GAGF,MAAM,qBAAkD,EAAE;AAE1D,QAAK,MAAM,aAAa,WACtB,oBAAmB,cAAc,UAAiB;AAChD,qBAAiB,QAAQ,aAAa,MAAM;;AAIhD,QAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,iBAAiB,MAAM,QAAQ;AAGpC,gBAAa;AACX,SAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,oBAAoB,MAAM,QAAQ;;KAGxC,CAAC,GAAG,CAAC;EAER,MAAM,YAAY,cAAc,UAAU,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;AAE/D,SAAO,cAAc,SAAS;GAC5B,GAAG;GAEH,0BAA0B;GAC1B,KAAK;GACN,CAAC;GACF;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/create-props-PUVFMh9y.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-props-PUVFMh9y.d.ts","names":[],"sources":["../src/components/create-props.ts"],"mappings":";KAAY,WAAA,oCACyB,KAAA,mDACE,MAAA,GAAS,WAAA,MAC5C,KAAA,GAAQ,gBAAA,CAAiB,MAAA;AAAA,KAExB,gBAAA,sCACkC,MAAA,GAAS,WAAA,4BAE1B,MAAA,SAAe,UAAA,UAAoB,SAAA,OACrD,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/dist/editor-context-DHjS00Fa.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-context-DHjS00Fa.js","names":[],"sources":["../src/contexts/editor-context.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\nimport { createContext, useContext, type Provider } from 'react'\n\nconst EditorContext = createContext<Editor | null>(null)\n\n/**\n * @internal\n */\nexport function useEditorContext<E extends Extension>(): Editor<E> | null {\n  return useContext(EditorContext)\n}\n\n/**\n * @internal\n */\nexport const EditorContextProvider: Provider<Editor | null> = EditorContext.Provider\n"],"mappings":";;;AAGA,MAAM,gBAAgB,cAA6B,KAAK;;;;AAKxD,SAAgB,mBAA0D;AACxE,QAAO,WAAW,cAAc;;;;;AAMlC,MAAa,wBAAiD,cAAc"}