@prosekit/react 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/_tsup-dts-rollup.d.ts +59 -19
  2. package/dist/prosekit-react-autocomplete-empty.js +17 -0
  3. package/dist/prosekit-react-autocomplete-item.js +17 -0
  4. package/dist/prosekit-react-autocomplete-list.js +17 -0
  5. package/dist/prosekit-react-autocomplete-popover.js +17 -0
  6. package/dist/prosekit-react-code-block-popover.js +17 -0
  7. package/dist/prosekit-react-combo-box-input.js +17 -0
  8. package/dist/prosekit-react-combo-box-item.js +17 -0
  9. package/dist/prosekit-react-combo-box-list.js +17 -0
  10. package/dist/prosekit-react-combo-box.js +17 -0
  11. package/dist/prosekit-react.d.ts +4 -0
  12. package/dist/prosekit-react.js +84 -16
  13. package/package.json +61 -60
  14. package/src/index.ts +6 -0
  15. package/dist/prosekit-react-components-autocomplete-empty.js +0 -20
  16. package/dist/prosekit-react-components-autocomplete-item.js +0 -20
  17. package/dist/prosekit-react-components-autocomplete-list.js +0 -20
  18. package/dist/prosekit-react-components-autocomplete-popover.js +0 -20
  19. package/dist/prosekit-react-components-code-block-popover.js +0 -20
  20. package/dist/prosekit-react-components-combo-box-input.js +0 -20
  21. package/dist/prosekit-react-components-combo-box-item.js +0 -20
  22. package/dist/prosekit-react-components-combo-box-list.js +0 -20
  23. package/dist/prosekit-react-components-combo-box.js +0 -20
  24. /package/dist/{prosekit-react-components-autocomplete-empty.d.ts → prosekit-react-autocomplete-empty.d.ts} +0 -0
  25. /package/dist/{prosekit-react-components-autocomplete-item.d.ts → prosekit-react-autocomplete-item.d.ts} +0 -0
  26. /package/dist/{prosekit-react-components-autocomplete-list.d.ts → prosekit-react-autocomplete-list.d.ts} +0 -0
  27. /package/dist/{prosekit-react-components-autocomplete-popover.d.ts → prosekit-react-autocomplete-popover.d.ts} +0 -0
  28. /package/dist/{prosekit-react-components-code-block-popover.d.ts → prosekit-react-code-block-popover.d.ts} +0 -0
  29. /package/dist/{prosekit-react-components-combo-box-input.d.ts → prosekit-react-combo-box-input.d.ts} +0 -0
  30. /package/dist/{prosekit-react-components-combo-box-item.d.ts → prosekit-react-combo-box-item.d.ts} +0 -0
  31. /package/dist/{prosekit-react-components-combo-box-list.d.ts → prosekit-react-combo-box-list.d.ts} +0 -0
  32. /package/dist/{prosekit-react-components-combo-box.d.ts → prosekit-react-combo-box.d.ts} +0 -0
@@ -1,26 +1,43 @@
1
1
  /// <reference types="react" />
2
2
 
3
- import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/components/autocomplete-empty';
4
- import { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/components/autocomplete-item';
5
- import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/components/autocomplete-list';
6
- import { AutocompletePopoverProps as AutocompletePopoverProps_2 } from '@prosekit/lit/components/autocomplete-popover';
7
- import { CodeBlockPopoverProps as CodeBlockPopoverProps_2 } from '@prosekit/lit/components/code-block-popover';
8
- import { ComboBoxInputProps as ComboBoxInputProps_2 } from '@prosekit/lit/components/combo-box-input';
9
- import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/components/combo-box-item';
10
- import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/components/combo-box-list';
11
- import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/components/combo-box';
3
+ import { AutocompleteEmpty as AutocompleteEmpty_2 } from '@prosekit/lit/autocomplete-empty';
4
+ import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/autocomplete-empty';
5
+ import { AutocompleteItem as AutocompleteItem_2 } from '@prosekit/lit/autocomplete-item';
6
+ import { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/autocomplete-item';
7
+ import { AutocompleteList as AutocompleteList_2 } from '@prosekit/lit/autocomplete-list';
8
+ import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/autocomplete-list';
9
+ import { AutocompletePopover as AutocompletePopover_2 } from '@prosekit/lit/autocomplete-popover';
10
+ import { AutocompletePopoverProps as AutocompletePopoverProps_2 } from '@prosekit/lit/autocomplete-popover';
11
+ import { CodeBlockPopover as CodeBlockPopover_2 } from '@prosekit/lit/code-block-popover';
12
+ import { CodeBlockPopoverProps as CodeBlockPopoverProps_2 } from '@prosekit/lit/code-block-popover';
13
+ import { ComboBox as ComboBox_2 } from '@prosekit/lit/combo-box';
14
+ import { ComboBoxInput as ComboBoxInput_2 } from '@prosekit/lit/combo-box-input';
15
+ import { ComboBoxInputProps as ComboBoxInputProps_2 } from '@prosekit/lit/combo-box-input';
16
+ import { ComboBoxItem as ComboBoxItem_2 } from '@prosekit/lit/combo-box-item';
17
+ import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/combo-box-item';
18
+ import { ComboBoxList as ComboBoxList_2 } from '@prosekit/lit/combo-box-list';
19
+ import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-box-list';
20
+ import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
21
+ import { CommandArgs } from '@prosekit/core';
12
22
  import { ComponentType } from 'react';
13
23
  import { Context } from 'react';
14
24
  import { Editor } from '@prosekit/core';
15
25
  import { Extension } from '@prosekit/core';
26
+ import { ExtensionTyping } from '@prosekit/core';
27
+ import type { ForwardRefExoticComponent } from 'react';
16
28
  import { Keymap } from '@prosekit/core';
29
+ import type { NodeViewContext } from '@prosemirror-adapter/react';
17
30
  import { Options } from 'tsup';
18
- import { PopoverOptions } from '@prosekit/lit/components/autocomplete-popover';
31
+ import { PopoverOptions } from '@prosekit/lit/autocomplete-popover';
32
+ import type { PropsWithoutRef } from 'react';
19
33
  import { default as React_2 } from 'react';
34
+ import type { RefAttributes } from 'react';
20
35
  import type { SimplifyUnion } from '@prosekit/core';
36
+ import { useNodeViewContext } from '@prosemirror-adapter/react';
37
+ import { useNodeViewFactory } from '@prosemirror-adapter/react';
21
38
  import { UserProjectConfigExport } from 'vitest/dist/config.js';
22
39
 
23
- declare const AutocompleteEmpty: ComponentType<AutocompleteEmptyProps>;
40
+ declare const AutocompleteEmpty: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteEmptyProps> & RefAttributes<AutocompleteEmpty_2>>;
24
41
  export { AutocompleteEmpty }
25
42
  export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
26
43
 
@@ -31,7 +48,7 @@ declare type AutocompleteEmptyProps = SimplifyUnion<{
31
48
  export { AutocompleteEmptyProps }
32
49
  export { AutocompleteEmptyProps as AutocompleteEmptyProps_alias_1 }
33
50
 
34
- declare const AutocompleteItem: ComponentType<AutocompleteItemProps>;
51
+ declare const AutocompleteItem: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteItemProps> & RefAttributes<AutocompleteItem_2>>;
35
52
  export { AutocompleteItem }
36
53
  export { AutocompleteItem as AutocompleteItem_alias_1 }
37
54
 
@@ -42,7 +59,7 @@ declare type AutocompleteItemProps = SimplifyUnion<{
42
59
  export { AutocompleteItemProps }
43
60
  export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
44
61
 
45
- declare const AutocompleteList: ComponentType<AutocompleteListProps>;
62
+ declare const AutocompleteList: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteListProps> & RefAttributes<AutocompleteList_2>>;
46
63
  export { AutocompleteList }
47
64
  export { AutocompleteList as AutocompleteList_alias_1 }
48
65
 
@@ -53,7 +70,7 @@ declare type AutocompleteListProps = SimplifyUnion<{
53
70
  export { AutocompleteListProps }
54
71
  export { AutocompleteListProps as AutocompleteListProps_alias_1 }
55
72
 
56
- declare const AutocompletePopover: ComponentType<AutocompletePopoverProps>;
73
+ declare const AutocompletePopover: ForwardRefExoticComponent<PropsWithoutRef<AutocompletePopoverProps> & RefAttributes<AutocompletePopover_2>>;
57
74
  export { AutocompletePopover }
58
75
  export { AutocompletePopover as AutocompletePopover_alias_1 }
59
76
 
@@ -64,30 +81,30 @@ declare type AutocompletePopoverProps = SimplifyUnion<{
64
81
  export { AutocompletePopoverProps }
65
82
  export { AutocompletePopoverProps as AutocompletePopoverProps_alias_1 }
66
83
 
67
- export declare const CodeBlockPopover: ComponentType<CodeBlockPopoverProps>;
84
+ export declare const CodeBlockPopover: ForwardRefExoticComponent<PropsWithoutRef<CodeBlockPopoverProps> & RefAttributes<CodeBlockPopover_2>>;
68
85
 
69
86
  export declare type CodeBlockPopoverProps = SimplifyUnion<{
70
87
  className?: string;
71
88
  children?: React_2.ReactNode;
72
89
  } & CodeBlockPopoverProps_2>;
73
90
 
74
- export declare const ComboBox: ComponentType<ComboBoxProps>;
91
+ export declare const ComboBox: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxProps> & RefAttributes<ComboBox_2>>;
75
92
 
76
- export declare const ComboBoxInput: ComponentType<ComboBoxInputProps>;
93
+ export declare const ComboBoxInput: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxInputProps> & RefAttributes<ComboBoxInput_2>>;
77
94
 
78
95
  export declare type ComboBoxInputProps = SimplifyUnion<{
79
96
  className?: string;
80
97
  children?: React_2.ReactNode;
81
98
  } & ComboBoxInputProps_2>;
82
99
 
83
- export declare const ComboBoxItem: ComponentType<ComboBoxItemProps>;
100
+ export declare const ComboBoxItem: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxItemProps> & RefAttributes<ComboBoxItem_2>>;
84
101
 
85
102
  export declare type ComboBoxItemProps = SimplifyUnion<{
86
103
  className?: string;
87
104
  children?: React_2.ReactNode;
88
105
  } & ComboBoxItemProps_2>;
89
106
 
90
- export declare const ComboBoxList: ComponentType<ComboBoxListProps>;
107
+ export declare const ComboBoxList: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxListProps> & RefAttributes<ComboBoxList_2>>;
91
108
 
92
109
  export declare type ComboBoxListProps = SimplifyUnion<{
93
110
  className?: string;
@@ -103,6 +120,14 @@ export declare const default_alias: Options | Options[] | ((overrideOptions: Opt
103
120
 
104
121
  export declare const default_alias_1: UserProjectConfigExport;
105
122
 
123
+ declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
124
+ export { defineReactNodeView }
125
+ export { defineReactNodeView as defineReactNodeView_alias_1 }
126
+
127
+ export declare function defineReactNodeViewRenderer({ nodeViewFactory, }: {
128
+ nodeViewFactory: ReturnType<typeof useNodeViewFactory>;
129
+ }): Extension<ExtensionTyping<string, string, CommandArgs>>;
130
+
106
131
  export declare interface EditorContext {
107
132
  editor: Editor;
108
133
  }
@@ -122,6 +147,19 @@ declare interface ProseKitProps {
122
147
  export { ProseKitProps }
123
148
  export { ProseKitProps as ProseKitProps_alias_1 }
124
149
 
150
+ declare type ReactNodeViewComponentProps = NodeViewContext;
151
+ export { ReactNodeViewComponentProps }
152
+ export { ReactNodeViewComponentProps as ReactNodeViewComponentProps_alias_1 }
153
+
154
+ declare interface ReactNodeViewOptions {
155
+ name: string;
156
+ component: React.ComponentType<ReactNodeViewComponentProps>;
157
+ dom?: string | (() => HTMLElement);
158
+ contentDOM?: string | (() => HTMLElement);
159
+ }
160
+ export { ReactNodeViewOptions }
161
+ export { ReactNodeViewOptions as ReactNodeViewOptions_alias_1 }
162
+
125
163
  declare function useEditor<E extends Extension = any>(options?: UseEditorOptions): Editor<E>;
126
164
  export { useEditor }
127
165
  export { useEditor as useEditor_alias_1 }
@@ -146,4 +184,6 @@ declare function useKeymap({ keymap }: {
146
184
  export { useKeymap }
147
185
  export { useKeymap as useKeymap_alias_1 }
148
186
 
187
+ export { useNodeViewContext }
188
+
149
189
  export { }
@@ -0,0 +1,17 @@
1
+ // src/components/autocomplete-empty.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { AutocompleteEmpty as AutocompleteEmptyElement } from "@prosekit/lit/autocomplete-empty";
4
+ import React from "react";
5
+ var AutocompleteEmptyInner = createComponent({
6
+ tagName: "prosekit-autocomplete-empty",
7
+ elementClass: AutocompleteEmptyElement,
8
+ react: React,
9
+ displayName: "AutocompleteEmptyInner"
10
+ });
11
+ var AutocompleteEmpty = React.forwardRef((props, ref) => {
12
+ return React.createElement(AutocompleteEmptyInner, { ...props, ref });
13
+ });
14
+ AutocompleteEmpty.displayName = "AutocompleteEmpty";
15
+ export {
16
+ AutocompleteEmpty
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/autocomplete-item.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { AutocompleteItem as AutocompleteItemElement } from "@prosekit/lit/autocomplete-item";
4
+ import React from "react";
5
+ var AutocompleteItemInner = createComponent({
6
+ tagName: "prosekit-autocomplete-item",
7
+ elementClass: AutocompleteItemElement,
8
+ react: React,
9
+ displayName: "AutocompleteItemInner"
10
+ });
11
+ var AutocompleteItem = React.forwardRef((props, ref) => {
12
+ return React.createElement(AutocompleteItemInner, { ...props, ref });
13
+ });
14
+ AutocompleteItem.displayName = "AutocompleteItem";
15
+ export {
16
+ AutocompleteItem
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/autocomplete-list.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { AutocompleteList as AutocompleteListElement } from "@prosekit/lit/autocomplete-list";
4
+ import React from "react";
5
+ var AutocompleteListInner = createComponent({
6
+ tagName: "prosekit-autocomplete-list",
7
+ elementClass: AutocompleteListElement,
8
+ react: React,
9
+ displayName: "AutocompleteListInner"
10
+ });
11
+ var AutocompleteList = React.forwardRef((props, ref) => {
12
+ return React.createElement(AutocompleteListInner, { ...props, ref });
13
+ });
14
+ AutocompleteList.displayName = "AutocompleteList";
15
+ export {
16
+ AutocompleteList
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/autocomplete-popover.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { AutocompletePopover as AutocompletePopoverElement } from "@prosekit/lit/autocomplete-popover";
4
+ import React from "react";
5
+ var AutocompletePopoverInner = createComponent({
6
+ tagName: "prosekit-autocomplete-popover",
7
+ elementClass: AutocompletePopoverElement,
8
+ react: React,
9
+ displayName: "AutocompletePopoverInner"
10
+ });
11
+ var AutocompletePopover = React.forwardRef((props, ref) => {
12
+ return React.createElement(AutocompletePopoverInner, { ...props, ref });
13
+ });
14
+ AutocompletePopover.displayName = "AutocompletePopover";
15
+ export {
16
+ AutocompletePopover
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/code-block-popover.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { CodeBlockPopover as CodeBlockPopoverElement } from "@prosekit/lit/code-block-popover";
4
+ import React from "react";
5
+ var CodeBlockPopoverInner = createComponent({
6
+ tagName: "prosekit-code-block-popover",
7
+ elementClass: CodeBlockPopoverElement,
8
+ react: React,
9
+ displayName: "CodeBlockPopoverInner"
10
+ });
11
+ var CodeBlockPopover = React.forwardRef((props, ref) => {
12
+ return React.createElement(CodeBlockPopoverInner, { ...props, ref });
13
+ });
14
+ CodeBlockPopover.displayName = "CodeBlockPopover";
15
+ export {
16
+ CodeBlockPopover
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/combo-box-input.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { ComboBoxInput as ComboBoxInputElement } from "@prosekit/lit/combo-box-input";
4
+ import React from "react";
5
+ var ComboBoxInputInner = createComponent({
6
+ tagName: "prosekit-combo-box-input",
7
+ elementClass: ComboBoxInputElement,
8
+ react: React,
9
+ displayName: "ComboBoxInputInner"
10
+ });
11
+ var ComboBoxInput = React.forwardRef((props, ref) => {
12
+ return React.createElement(ComboBoxInputInner, { ...props, ref });
13
+ });
14
+ ComboBoxInput.displayName = "ComboBoxInput";
15
+ export {
16
+ ComboBoxInput
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/combo-box-item.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { ComboBoxItem as ComboBoxItemElement } from "@prosekit/lit/combo-box-item";
4
+ import React from "react";
5
+ var ComboBoxItemInner = createComponent({
6
+ tagName: "prosekit-combo-box-item",
7
+ elementClass: ComboBoxItemElement,
8
+ react: React,
9
+ displayName: "ComboBoxItemInner"
10
+ });
11
+ var ComboBoxItem = React.forwardRef((props, ref) => {
12
+ return React.createElement(ComboBoxItemInner, { ...props, ref });
13
+ });
14
+ ComboBoxItem.displayName = "ComboBoxItem";
15
+ export {
16
+ ComboBoxItem
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/combo-box-list.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { ComboBoxList as ComboBoxListElement } from "@prosekit/lit/combo-box-list";
4
+ import React from "react";
5
+ var ComboBoxListInner = createComponent({
6
+ tagName: "prosekit-combo-box-list",
7
+ elementClass: ComboBoxListElement,
8
+ react: React,
9
+ displayName: "ComboBoxListInner"
10
+ });
11
+ var ComboBoxList = React.forwardRef((props, ref) => {
12
+ return React.createElement(ComboBoxListInner, { ...props, ref });
13
+ });
14
+ ComboBoxList.displayName = "ComboBoxList";
15
+ export {
16
+ ComboBoxList
17
+ };
@@ -0,0 +1,17 @@
1
+ // src/components/combo-box.gen.ts
2
+ import { createComponent } from "@lit/react";
3
+ import { ComboBox as ComboBoxElement } from "@prosekit/lit/combo-box";
4
+ import React from "react";
5
+ var ComboBoxInner = createComponent({
6
+ tagName: "prosekit-combo-box",
7
+ elementClass: ComboBoxElement,
8
+ react: React,
9
+ displayName: "ComboBoxInner"
10
+ });
11
+ var ComboBox = React.forwardRef((props, ref) => {
12
+ return React.createElement(ComboBoxInner, { ...props, ref });
13
+ });
14
+ ComboBox.displayName = "ComboBox";
15
+ export {
16
+ ComboBox
17
+ };
@@ -1,5 +1,9 @@
1
+ export { useNodeViewContext } from './_tsup-dts-rollup';
1
2
  export { ProseKit } from './_tsup-dts-rollup';
2
3
  export { ProseKitProps } from './_tsup-dts-rollup';
4
+ export { defineReactNodeView } from './_tsup-dts-rollup';
5
+ export { ReactNodeViewComponentProps } from './_tsup-dts-rollup';
6
+ export { ReactNodeViewOptions } from './_tsup-dts-rollup';
3
7
  export { useEditor } from './_tsup-dts-rollup';
4
8
  export { UseEditorOptions } from './_tsup-dts-rollup';
5
9
  export { useExtension } from './_tsup-dts-rollup';
@@ -1,22 +1,63 @@
1
+ // src/index.ts
2
+ import { useNodeViewContext as useNodeViewContext2 } from "@prosemirror-adapter/react";
3
+
1
4
  // src/components/prosekit.ts
2
5
  import "@prosekit/core";
3
- import { createElement } from "react";
6
+ import {
7
+ ProsemirrorAdapterProvider,
8
+ useNodeViewFactory
9
+ } from "@prosemirror-adapter/react";
10
+ import { createElement as createElement2, useMemo } from "react";
4
11
 
5
12
  // src/contexts/editor-context.ts
6
13
  import { createContext } from "react";
7
14
  var editorContext = createContext(null);
8
15
 
9
- // src/components/prosekit.ts
10
- var ProseKit = (props) => {
11
- const { editor, children } = props;
12
- return createElement(EditorContextProvider, { value: { editor } }, children);
13
- };
14
- var EditorContextProvider = editorContext.Provider;
16
+ // src/extensions/react-node-view.ts
17
+ import { defineNodeViewEffect } from "@prosekit/core";
18
+ import {
19
+ useNodeViewContext
20
+ } from "@prosemirror-adapter/react";
21
+ import { createElement } from "react";
22
+ function defineReactNodeView(options) {
23
+ return defineNodeViewEffect({
24
+ group: "react",
25
+ name: options.name,
26
+ args: options
27
+ });
28
+ }
29
+ function defineReactNodeViewRenderer({
30
+ nodeViewFactory
31
+ }) {
32
+ return defineNodeViewEffect({
33
+ group: "react",
34
+ factory: (args) => {
35
+ const nodeViewOptions = args;
36
+ return nodeViewFactory({
37
+ component: function ReactNodeViewWrapper() {
38
+ const context = useNodeViewContext();
39
+ return createElement(nodeViewOptions.component, context);
40
+ },
41
+ // Optional: add some options
42
+ as: () => {
43
+ const dom = document.createElement("div");
44
+ dom.style.display = "contents";
45
+ return dom;
46
+ },
47
+ contentAs: "code"
48
+ });
49
+ }
50
+ });
51
+ }
52
+
53
+ // src/hooks/use-extension.ts
54
+ import "@prosekit/core";
55
+ import { useEffect as useEffect2 } from "react";
15
56
 
16
57
  // src/hooks/use-editor.ts
17
58
  import {
18
59
  ProseKitError,
19
- addEventHandler
60
+ defineEventHandler
20
61
  } from "@prosekit/core";
21
62
  import { useContext, useEffect, useReducer } from "react";
22
63
  function useEditor(options) {
@@ -32,7 +73,7 @@ function useEditor(options) {
32
73
  const forceUpdate = useForceUpdate();
33
74
  useEffect(() => {
34
75
  if (update) {
35
- return editor.use(addEventHandler({ update: forceUpdate }));
76
+ return editor.use(defineEventHandler({ update: forceUpdate }));
36
77
  }
37
78
  }, [editor, update, forceUpdate]);
38
79
  return editor;
@@ -43,23 +84,50 @@ function useForceUpdate() {
43
84
  }
44
85
 
45
86
  // src/hooks/use-extension.ts
46
- import "@prosekit/core";
47
- import { useEffect as useEffect2 } from "react";
48
87
  function useExtension({ extension }) {
49
88
  const editor = useEditor();
50
- useEffect2(() => editor.use(extension), [editor, extension]);
89
+ useEffect2(() => {
90
+ return editor.use(extension);
91
+ }, [editor, extension]);
51
92
  }
52
93
 
94
+ // src/components/prosekit.ts
95
+ var ProseKit = (props) => {
96
+ const { editor, children } = props;
97
+ return createElement2(
98
+ ProsemirrorAdapterProvider,
99
+ null,
100
+ createElement2(
101
+ EditorContextProvider,
102
+ { value: { editor } },
103
+ children,
104
+ createElement2(RendererRegister)
105
+ )
106
+ );
107
+ };
108
+ function RendererRegister() {
109
+ const nodeViewFactory = useNodeViewFactory();
110
+ const extension = useMemo(
111
+ () => defineReactNodeViewRenderer({ nodeViewFactory }),
112
+ [nodeViewFactory]
113
+ );
114
+ useExtension({ extension });
115
+ return null;
116
+ }
117
+ var EditorContextProvider = editorContext.Provider;
118
+
53
119
  // src/hooks/use-keymap.ts
54
- import { addKeymap } from "@prosekit/core";
55
- import { useMemo } from "react";
120
+ import { defineKeymap } from "@prosekit/core";
121
+ import { useMemo as useMemo2 } from "react";
56
122
  function useKeymap({ keymap }) {
57
- const extension = useMemo(() => addKeymap(keymap), [keymap]);
123
+ const extension = useMemo2(() => defineKeymap(keymap), [keymap]);
58
124
  useExtension({ extension });
59
125
  }
60
126
  export {
61
127
  ProseKit,
128
+ defineReactNodeView,
62
129
  useEditor,
63
130
  useExtension,
64
- useKeymap
131
+ useKeymap,
132
+ useNodeViewContext2 as useNodeViewContext
65
133
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/react",
3
3
  "type": "module",
4
- "version": "0.0.15",
4
+ "version": "0.0.17",
5
5
  "private": false,
6
6
  "author": {
7
7
  "name": "ocavue",
@@ -30,59 +30,60 @@
30
30
  "import": "./dist/prosekit-react.js",
31
31
  "default": "./dist/prosekit-react.js"
32
32
  },
33
- "./components/autocomplete-empty": {
34
- "types": "./dist/prosekit-react-components-autocomplete-empty.d.ts",
35
- "import": "./dist/prosekit-react-components-autocomplete-empty.js",
36
- "default": "./dist/prosekit-react-components-autocomplete-empty.js"
33
+ "./autocomplete-empty": {
34
+ "types": "./dist/prosekit-react-autocomplete-empty.d.ts",
35
+ "import": "./dist/prosekit-react-autocomplete-empty.js",
36
+ "default": "./dist/prosekit-react-autocomplete-empty.js"
37
37
  },
38
- "./components/autocomplete-item": {
39
- "types": "./dist/prosekit-react-components-autocomplete-item.d.ts",
40
- "import": "./dist/prosekit-react-components-autocomplete-item.js",
41
- "default": "./dist/prosekit-react-components-autocomplete-item.js"
38
+ "./autocomplete-item": {
39
+ "types": "./dist/prosekit-react-autocomplete-item.d.ts",
40
+ "import": "./dist/prosekit-react-autocomplete-item.js",
41
+ "default": "./dist/prosekit-react-autocomplete-item.js"
42
42
  },
43
- "./components/autocomplete-list": {
44
- "types": "./dist/prosekit-react-components-autocomplete-list.d.ts",
45
- "import": "./dist/prosekit-react-components-autocomplete-list.js",
46
- "default": "./dist/prosekit-react-components-autocomplete-list.js"
43
+ "./autocomplete-list": {
44
+ "types": "./dist/prosekit-react-autocomplete-list.d.ts",
45
+ "import": "./dist/prosekit-react-autocomplete-list.js",
46
+ "default": "./dist/prosekit-react-autocomplete-list.js"
47
47
  },
48
- "./components/autocomplete-popover": {
49
- "types": "./dist/prosekit-react-components-autocomplete-popover.d.ts",
50
- "import": "./dist/prosekit-react-components-autocomplete-popover.js",
51
- "default": "./dist/prosekit-react-components-autocomplete-popover.js"
48
+ "./autocomplete-popover": {
49
+ "types": "./dist/prosekit-react-autocomplete-popover.d.ts",
50
+ "import": "./dist/prosekit-react-autocomplete-popover.js",
51
+ "default": "./dist/prosekit-react-autocomplete-popover.js"
52
52
  },
53
- "./components/code-block-popover": {
54
- "types": "./dist/prosekit-react-components-code-block-popover.d.ts",
55
- "import": "./dist/prosekit-react-components-code-block-popover.js",
56
- "default": "./dist/prosekit-react-components-code-block-popover.js"
53
+ "./code-block-popover": {
54
+ "types": "./dist/prosekit-react-code-block-popover.d.ts",
55
+ "import": "./dist/prosekit-react-code-block-popover.js",
56
+ "default": "./dist/prosekit-react-code-block-popover.js"
57
57
  },
58
- "./components/combo-box": {
59
- "types": "./dist/prosekit-react-components-combo-box.d.ts",
60
- "import": "./dist/prosekit-react-components-combo-box.js",
61
- "default": "./dist/prosekit-react-components-combo-box.js"
58
+ "./combo-box": {
59
+ "types": "./dist/prosekit-react-combo-box.d.ts",
60
+ "import": "./dist/prosekit-react-combo-box.js",
61
+ "default": "./dist/prosekit-react-combo-box.js"
62
62
  },
63
- "./components/combo-box-input": {
64
- "types": "./dist/prosekit-react-components-combo-box-input.d.ts",
65
- "import": "./dist/prosekit-react-components-combo-box-input.js",
66
- "default": "./dist/prosekit-react-components-combo-box-input.js"
63
+ "./combo-box-input": {
64
+ "types": "./dist/prosekit-react-combo-box-input.d.ts",
65
+ "import": "./dist/prosekit-react-combo-box-input.js",
66
+ "default": "./dist/prosekit-react-combo-box-input.js"
67
67
  },
68
- "./components/combo-box-item": {
69
- "types": "./dist/prosekit-react-components-combo-box-item.d.ts",
70
- "import": "./dist/prosekit-react-components-combo-box-item.js",
71
- "default": "./dist/prosekit-react-components-combo-box-item.js"
68
+ "./combo-box-item": {
69
+ "types": "./dist/prosekit-react-combo-box-item.d.ts",
70
+ "import": "./dist/prosekit-react-combo-box-item.js",
71
+ "default": "./dist/prosekit-react-combo-box-item.js"
72
72
  },
73
- "./components/combo-box-list": {
74
- "types": "./dist/prosekit-react-components-combo-box-list.d.ts",
75
- "import": "./dist/prosekit-react-components-combo-box-list.js",
76
- "default": "./dist/prosekit-react-components-combo-box-list.js"
73
+ "./combo-box-list": {
74
+ "types": "./dist/prosekit-react-combo-box-list.d.ts",
75
+ "import": "./dist/prosekit-react-combo-box-list.js",
76
+ "default": "./dist/prosekit-react-combo-box-list.js"
77
77
  }
78
78
  },
79
79
  "files": [
80
80
  "dist"
81
81
  ],
82
82
  "dependencies": {
83
- "@lit-labs/react": "^2.1.0",
84
- "@prosekit/core": "^0.0.11",
85
- "@prosekit/lit": "^0.0.15"
83
+ "@lit/react": "^1.0.0",
84
+ "@prosekit/core": "^0.0.13",
85
+ "@prosekit/lit": "^0.0.17",
86
+ "@prosemirror-adapter/react": "^0.2.6"
86
87
  },
87
88
  "peerDependencies": {
88
89
  "react": ">= 17.0.0",
@@ -98,8 +99,8 @@
98
99
  },
99
100
  "devDependencies": {
100
101
  "@prosekit/dev": "*",
101
- "@types/react": "^18.2.25",
102
- "@types/react-dom": "^18.2.11",
102
+ "@types/react": "^18.2.31",
103
+ "@types/react-dom": "^18.2.14",
103
104
  "react": "^18.2.0",
104
105
  "react-dom": "^18.2.0",
105
106
  "tsup": "^7.2.0",
@@ -116,32 +117,32 @@
116
117
  ".": [
117
118
  "./dist/prosekit-react.d.ts"
118
119
  ],
119
- "components/autocomplete-empty": [
120
- "./dist/prosekit-react-components-autocomplete-empty.d.ts"
120
+ "autocomplete-empty": [
121
+ "./dist/prosekit-react-autocomplete-empty.d.ts"
121
122
  ],
122
- "components/autocomplete-item": [
123
- "./dist/prosekit-react-components-autocomplete-item.d.ts"
123
+ "autocomplete-item": [
124
+ "./dist/prosekit-react-autocomplete-item.d.ts"
124
125
  ],
125
- "components/autocomplete-list": [
126
- "./dist/prosekit-react-components-autocomplete-list.d.ts"
126
+ "autocomplete-list": [
127
+ "./dist/prosekit-react-autocomplete-list.d.ts"
127
128
  ],
128
- "components/autocomplete-popover": [
129
- "./dist/prosekit-react-components-autocomplete-popover.d.ts"
129
+ "autocomplete-popover": [
130
+ "./dist/prosekit-react-autocomplete-popover.d.ts"
130
131
  ],
131
- "components/code-block-popover": [
132
- "./dist/prosekit-react-components-code-block-popover.d.ts"
132
+ "code-block-popover": [
133
+ "./dist/prosekit-react-code-block-popover.d.ts"
133
134
  ],
134
- "components/combo-box": [
135
- "./dist/prosekit-react-components-combo-box.d.ts"
135
+ "combo-box": [
136
+ "./dist/prosekit-react-combo-box.d.ts"
136
137
  ],
137
- "components/combo-box-input": [
138
- "./dist/prosekit-react-components-combo-box-input.d.ts"
138
+ "combo-box-input": [
139
+ "./dist/prosekit-react-combo-box-input.d.ts"
139
140
  ],
140
- "components/combo-box-item": [
141
- "./dist/prosekit-react-components-combo-box-item.d.ts"
141
+ "combo-box-item": [
142
+ "./dist/prosekit-react-combo-box-item.d.ts"
142
143
  ],
143
- "components/combo-box-list": [
144
- "./dist/prosekit-react-components-combo-box-list.d.ts"
144
+ "combo-box-list": [
145
+ "./dist/prosekit-react-combo-box-list.d.ts"
145
146
  ]
146
147
  }
147
148
  }
package/src/index.ts CHANGED
@@ -1,4 +1,10 @@
1
+ export { useNodeViewContext } from '@prosemirror-adapter/react'
1
2
  export { ProseKit, type ProseKitProps } from './components/prosekit'
3
+ export {
4
+ defineReactNodeView,
5
+ type ReactNodeViewComponentProps,
6
+ type ReactNodeViewOptions,
7
+ } from './extensions/react-node-view'
2
8
  export { useEditor, type UseEditorOptions } from './hooks/use-editor'
3
9
  export { useExtension } from './hooks/use-extension'
4
10
  export { useKeymap } from './hooks/use-keymap'
@@ -1,20 +0,0 @@
1
- // src/components/autocomplete-empty.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { AutocompleteEmpty as AutocompleteEmptyElement } from "@prosekit/lit/components/autocomplete-empty";
4
- import React from "react";
5
- var AutocompleteEmptyComponent = createComponent({
6
- tagName: "prosekit-autocomplete-empty",
7
- elementClass: AutocompleteEmptyElement,
8
- react: React,
9
- displayName: "AutocompleteEmptyComponent"
10
- });
11
- var AutocompleteEmpty = (props) => {
12
- return React.createElement(
13
- AutocompleteEmptyComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- AutocompleteEmpty
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/autocomplete-item.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { AutocompleteItem as AutocompleteItemElement } from "@prosekit/lit/components/autocomplete-item";
4
- import React from "react";
5
- var AutocompleteItemComponent = createComponent({
6
- tagName: "prosekit-autocomplete-item",
7
- elementClass: AutocompleteItemElement,
8
- react: React,
9
- displayName: "AutocompleteItemComponent"
10
- });
11
- var AutocompleteItem = (props) => {
12
- return React.createElement(
13
- AutocompleteItemComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- AutocompleteItem
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/autocomplete-list.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { AutocompleteList as AutocompleteListElement } from "@prosekit/lit/components/autocomplete-list";
4
- import React from "react";
5
- var AutocompleteListComponent = createComponent({
6
- tagName: "prosekit-autocomplete-list",
7
- elementClass: AutocompleteListElement,
8
- react: React,
9
- displayName: "AutocompleteListComponent"
10
- });
11
- var AutocompleteList = (props) => {
12
- return React.createElement(
13
- AutocompleteListComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- AutocompleteList
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/autocomplete-popover.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { AutocompletePopover as AutocompletePopoverElement } from "@prosekit/lit/components/autocomplete-popover";
4
- import React from "react";
5
- var AutocompletePopoverComponent = createComponent({
6
- tagName: "prosekit-autocomplete-popover",
7
- elementClass: AutocompletePopoverElement,
8
- react: React,
9
- displayName: "AutocompletePopoverComponent"
10
- });
11
- var AutocompletePopover = (props) => {
12
- return React.createElement(
13
- AutocompletePopoverComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- AutocompletePopover
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/code-block-popover.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { CodeBlockPopover as CodeBlockPopoverElement } from "@prosekit/lit/components/code-block-popover";
4
- import React from "react";
5
- var CodeBlockPopoverComponent = createComponent({
6
- tagName: "prosekit-code-block-popover",
7
- elementClass: CodeBlockPopoverElement,
8
- react: React,
9
- displayName: "CodeBlockPopoverComponent"
10
- });
11
- var CodeBlockPopover = (props) => {
12
- return React.createElement(
13
- CodeBlockPopoverComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- CodeBlockPopover
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/combo-box-input.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { ComboBoxInput as ComboBoxInputElement } from "@prosekit/lit/components/combo-box-input";
4
- import React from "react";
5
- var ComboBoxInputComponent = createComponent({
6
- tagName: "prosekit-combo-box-input",
7
- elementClass: ComboBoxInputElement,
8
- react: React,
9
- displayName: "ComboBoxInputComponent"
10
- });
11
- var ComboBoxInput = (props) => {
12
- return React.createElement(
13
- ComboBoxInputComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- ComboBoxInput
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/combo-box-item.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { ComboBoxItem as ComboBoxItemElement } from "@prosekit/lit/components/combo-box-item";
4
- import React from "react";
5
- var ComboBoxItemComponent = createComponent({
6
- tagName: "prosekit-combo-box-item",
7
- elementClass: ComboBoxItemElement,
8
- react: React,
9
- displayName: "ComboBoxItemComponent"
10
- });
11
- var ComboBoxItem = (props) => {
12
- return React.createElement(
13
- ComboBoxItemComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- ComboBoxItem
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/combo-box-list.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { ComboBoxList as ComboBoxListElement } from "@prosekit/lit/components/combo-box-list";
4
- import React from "react";
5
- var ComboBoxListComponent = createComponent({
6
- tagName: "prosekit-combo-box-list",
7
- elementClass: ComboBoxListElement,
8
- react: React,
9
- displayName: "ComboBoxListComponent"
10
- });
11
- var ComboBoxList = (props) => {
12
- return React.createElement(
13
- ComboBoxListComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- ComboBoxList
20
- };
@@ -1,20 +0,0 @@
1
- // src/components/combo-box.gen.ts
2
- import { createComponent } from "@lit-labs/react";
3
- import { ComboBox as ComboBoxElement } from "@prosekit/lit/components/combo-box";
4
- import React from "react";
5
- var ComboBoxComponent = createComponent({
6
- tagName: "prosekit-combo-box",
7
- elementClass: ComboBoxElement,
8
- react: React,
9
- displayName: "ComboBoxComponent"
10
- });
11
- var ComboBox = (props) => {
12
- return React.createElement(
13
- ComboBoxComponent,
14
- // The type in @lit-labs/react is not compatible to React.ReactNode
15
- props
16
- );
17
- };
18
- export {
19
- ComboBox
20
- };