prosemirror-slash-menu-react 0.0.3 → 0.0.4
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.
- package/LICENSE +21 -0
- package/README.md +96 -84
- package/package.json +27 -17
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Emergence Engineering
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -4,9 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
[**Made by Emergence-Engineering**](https://emergence-engineering.com/)
|
|
6
6
|
|
|
7
|
-
A UI package used together
|
|
7
|
+
A UI package used together
|
|
8
|
+
with [prosemirror-slash-menu](https://github.com/emergence-engineering/prosemirror-slash-menu) to display the menu with
|
|
9
|
+
react.
|
|
8
10
|
|
|
9
|
-
By Horváth Áron & [Viktor Váczi](https://emergence-engineering.com/cv/viktor)
|
|
11
|
+
By Horváth Áron & [Viktor Váczi](https://emergence-engineering.com/cv/viktor)
|
|
12
|
+
at [Emergence Engineering](https://emergence-engineering.com/)
|
|
10
13
|
|
|
11
14
|
Try it out at <https://emergence-engineering.com/blog/prosemirror-slash-menu>
|
|
12
15
|
|
|
@@ -22,102 +25,104 @@ Try it out at <https://emergence-engineering.com/blog/prosemirror-slash-menu>
|
|
|
22
25
|
|
|
23
26
|
# Behavior
|
|
24
27
|
|
|
25
|
-
You can open the menu with the `/` key in an empty paragraph or after a space and you can filter the elements just by
|
|
26
|
-
For exact behaviour description
|
|
27
|
-
|
|
28
|
+
You can open the menu with the `/` key in an empty paragraph or after a space and you can filter the elements just by
|
|
29
|
+
typing, or you can navigate with the keyboard. For exact behaviour description
|
|
30
|
+
checkout [prosemirror-slash-menu](https://github.com/emergence-engineering/prosemirror-slash-menu).
|
|
28
31
|
|
|
29
32
|
# Installation and Usage
|
|
33
|
+
|
|
30
34
|
Install from npm with:
|
|
31
35
|
|
|
32
|
-
`npm install prosemirror-slash-menu-react`
|
|
36
|
+
`npm install prosemirror-slash-menu-react`
|
|
33
37
|
|
|
34
38
|
Usage in the app:
|
|
35
39
|
|
|
36
40
|
```tsx
|
|
37
|
-
import React, {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
+
import React, {useEffect, useRef, useState} from "react";
|
|
42
|
+
import {exampleSetup} from "prosemirror-example-setup";
|
|
43
|
+
import {EditorState} from "prosemirror-state";
|
|
44
|
+
import {EditorView} from "prosemirror-view";
|
|
41
45
|
import schema from "./schema";
|
|
42
|
-
import {
|
|
46
|
+
import {SlashMenuPlugin} from "prosemirror-slash-menu";
|
|
43
47
|
import {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
defaultElements,
|
|
49
|
+
defaultIcons,
|
|
50
|
+
Icons,
|
|
51
|
+
SlashMenuReact,
|
|
48
52
|
} from "prosemirror-slash-menu-react";
|
|
49
53
|
|
|
50
54
|
const ProseMirrorSlashMenuDemo = () => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
const [pmState, setPmState] = useState<EditorState>();
|
|
56
|
+
const [editorView, setEditorView] = useState<EditorView>();
|
|
57
|
+
const editorRef = useRef<HTMLDivElement>(null);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
if (!editorRef.current) return;
|
|
60
|
+
const state = EditorState.create({
|
|
61
|
+
doc: schema.nodeFromJSON({
|
|
62
|
+
content: [
|
|
63
|
+
{
|
|
64
|
+
content: [
|
|
65
|
+
{
|
|
66
|
+
text: "Type '/' after a space to open the menu. ",
|
|
67
|
+
type: "text",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
type: "paragraph",
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
type: "doc",
|
|
74
|
+
}),
|
|
75
|
+
plugins: [
|
|
76
|
+
SlashMenuPlugin(defaultElements),
|
|
77
|
+
...exampleSetup({
|
|
78
|
+
schema,
|
|
79
|
+
}),
|
|
65
80
|
],
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
[Icons.Italic]: defaultIcons.ItalicIcon,
|
|
105
|
-
[Icons.Code]: defaultIcons.CodeIcon,
|
|
106
|
-
[Icons.Link]: defaultIcons.LinkIcon,
|
|
107
|
-
}}
|
|
108
|
-
editorState={pmState}
|
|
109
|
-
editorView={editorView}
|
|
110
|
-
/>
|
|
111
|
-
)}
|
|
112
|
-
</>
|
|
113
|
-
);
|
|
81
|
+
});
|
|
82
|
+
const view: EditorView = new EditorView(editorRef.current, {
|
|
83
|
+
state,
|
|
84
|
+
dispatchTransaction: (tr) => {
|
|
85
|
+
try {
|
|
86
|
+
const newState = view.state.apply(tr);
|
|
87
|
+
view.updateState(newState);
|
|
88
|
+
setPmState(newState);
|
|
89
|
+
} catch (e) {
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
});
|
|
93
|
+
setEditorView(view);
|
|
94
|
+
return () => {
|
|
95
|
+
view && view.destroy();
|
|
96
|
+
};
|
|
97
|
+
}, [editorRef]);
|
|
98
|
+
return (
|
|
99
|
+
<>
|
|
100
|
+
<div ref={editorRef} id="editor"/>
|
|
101
|
+
{pmState && editorView && (
|
|
102
|
+
<SlashMenuReact
|
|
103
|
+
icons={{
|
|
104
|
+
[Icons.HeaderMenu]: defaultIcons.H1Icon,
|
|
105
|
+
[Icons.Level1]: defaultIcons.H1Icon,
|
|
106
|
+
[Icons.Level2]: defaultIcons.H2Icon,
|
|
107
|
+
[Icons.Level3]: defaultIcons.H3Icon,
|
|
108
|
+
[Icons.Bold]: defaultIcons.BoldIcon,
|
|
109
|
+
[Icons.Italic]: defaultIcons.ItalicIcon,
|
|
110
|
+
[Icons.Code]: defaultIcons.CodeIcon,
|
|
111
|
+
[Icons.Link]: defaultIcons.LinkIcon,
|
|
112
|
+
}}
|
|
113
|
+
editorState={pmState}
|
|
114
|
+
editorView={editorView}
|
|
115
|
+
/>
|
|
116
|
+
)}
|
|
117
|
+
</>
|
|
118
|
+
);
|
|
114
119
|
};
|
|
115
120
|
```
|
|
116
121
|
|
|
122
|
+
# Styling
|
|
117
123
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
To use the basic styling you can import `menu-style.css` into your project. If you want to use your own styling you can override the following classnames.
|
|
124
|
+
To use the basic styling you can import `menu-style.css` into your project. If you want to use your own styling you can
|
|
125
|
+
override the following classnames.
|
|
121
126
|
|
|
122
127
|
- `menu-display-root` root div for the menu
|
|
123
128
|
- `menu-element-wrapper` root of menu elements
|
|
@@ -126,12 +131,19 @@ To use the basic styling you can import `menu-style.css` into your project. If y
|
|
|
126
131
|
- `menu-element-label` label of the menu element
|
|
127
132
|
- `menu-placeholder` when there is no matching items for the filter, this is displayed with the text "No matching items"
|
|
128
133
|
- `menu-filter-wrapper` root of the filter display, positioned above the menu by default
|
|
129
|
-
- `menu-filter` the filter text
|
|
134
|
+
- `menu-filter` the filter text
|
|
135
|
+
- `menu-filter-placeholder` placeholder text for the filter field
|
|
136
|
+
- `menu-filter-icon` if icon is provided for the filter field it's rendered in this div
|
|
130
137
|
- `submenu-label` The label of the submenu is shown above the menu elements when its opened
|
|
131
138
|
|
|
132
|
-
# Props
|
|
139
|
+
# Props
|
|
133
140
|
|
|
134
141
|
- `editorState` prosemirrors editor state
|
|
135
142
|
- `editorView` prosemirror editor view
|
|
136
|
-
- `icons` Optional, if you want to provide icons for your menu elements. Type of `{[key: string]: FC}` where the key is
|
|
137
|
-
|
|
143
|
+
- `icons` Optional, if you want to provide icons for your menu elements. Type of `{[key: string]: FC}` where the key is
|
|
144
|
+
the id of the menu element and the value is a `FunctionComponent` that renders the icon
|
|
145
|
+
- `subMenuIcon` Optional icon for submenu label. By default, when a submenu is open an arrow is displayed indicating
|
|
146
|
+
that the user is in a subMenu, it can be replaced with a react node of your choice
|
|
147
|
+
- `filterFieldIcon` Optional icon in the filter field.
|
|
148
|
+
- `filterPlaceHolder` Optional placeholder text for the filter field.
|
|
149
|
+
- `mainMenuLabel` Optional label for the main menu. By default, there is none.
|
package/package.json
CHANGED
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "prosemirror-slash-menu-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Implementation of prosemirror-slash-menu in react",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"dependencies": {
|
|
9
|
+
"@popperjs/core": "^2.11.8",
|
|
10
|
+
"@rollup/plugin-commonjs": "^25.0.0",
|
|
11
|
+
"@rollup/plugin-sucrase": "^5.0.1",
|
|
12
|
+
"@rollup/plugin-typescript": "^11.1.1",
|
|
13
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
14
|
+
"@testing-library/react": "^13.4.0",
|
|
15
|
+
"@testing-library/user-event": "^13.5.0",
|
|
16
|
+
"@types/jest": "^27.5.2",
|
|
17
|
+
"@types/node": "^16.18.34",
|
|
18
|
+
"@types/react": "^18.2.9",
|
|
19
|
+
"@types/react-dom": "^18.2.4",
|
|
20
|
+
"prettier": "^2.8.8",
|
|
9
21
|
"prosemirror-commands": "^1.5.2",
|
|
10
22
|
"prosemirror-schema-basic": "^1.2.2",
|
|
11
|
-
"prosemirror-slash-menu": "^0.1.
|
|
12
|
-
"prosemirror-view": "^1.31.
|
|
23
|
+
"prosemirror-slash-menu": "^0.1.2",
|
|
24
|
+
"prosemirror-view": "^1.31.4",
|
|
13
25
|
"react": "^18.2.0",
|
|
14
26
|
"react-dom": "^18.2.0",
|
|
15
27
|
"react-popper": "^2.3.0",
|
|
16
|
-
"rollup-plugin-import-css": "^3.2.1"
|
|
28
|
+
"rollup-plugin-import-css": "^3.2.1",
|
|
29
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
30
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
31
|
+
"typescript": "^4.9.5",
|
|
32
|
+
"web-vitals": "^2.1.4"
|
|
17
33
|
},
|
|
18
34
|
"scripts": {
|
|
35
|
+
"test": "echo \"no test specified\" && exit 0",
|
|
19
36
|
"build": "rollup -c --bundleConfigAsCjs",
|
|
20
|
-
"test": "echo TODO",
|
|
21
37
|
"yalc:watch": "nodemon --watch dist --exec 'yalc push'",
|
|
22
38
|
"dev:watch": "npm-run-all --parallel dev yalc:watch"
|
|
23
39
|
},
|
|
@@ -41,29 +57,23 @@
|
|
|
41
57
|
},
|
|
42
58
|
"homepage": "https://github.com/emergence-engineering/prosemirror-slash-menu-react#readme",
|
|
43
59
|
"devDependencies": {
|
|
44
|
-
"@babel/core": "^7.22.
|
|
45
|
-
"@babel/preset-env": "^7.22.
|
|
46
|
-
"@babel/preset-react": "^7.22.
|
|
47
|
-
"@popperjs/core": "^2.11.8",
|
|
60
|
+
"@babel/core": "^7.22.1",
|
|
61
|
+
"@babel/preset-env": "^7.22.4",
|
|
62
|
+
"@babel/preset-react": "^7.22.3",
|
|
48
63
|
"@rollup/plugin-babel": "^6.0.3",
|
|
49
|
-
"@rollup/plugin-commonjs": "^25.0.2",
|
|
50
64
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
51
|
-
"@rollup/plugin-sucrase": "^5.0.1",
|
|
52
|
-
"@rollup/plugin-typescript": "^11.1.1",
|
|
53
|
-
"@types/react": "^18.2.13",
|
|
54
65
|
"nodemon": "^2.0.22",
|
|
55
|
-
"
|
|
66
|
+
"np": "^8.0.4",
|
|
56
67
|
"rollup": "^2.79.1",
|
|
57
68
|
"rollup-plugin-babel": "^4.4.0",
|
|
58
69
|
"rollup-plugin-copy": "^3.4.0",
|
|
59
|
-
"rollup-plugin-typescript2": "^0.34.1"
|
|
60
|
-
"typescript": "^5.1.3"
|
|
70
|
+
"rollup-plugin-typescript2": "^0.34.1"
|
|
61
71
|
},
|
|
62
72
|
"peerDependencies": {
|
|
63
73
|
"react": "^18.2.0"
|
|
64
74
|
},
|
|
65
75
|
"engines": {
|
|
66
76
|
"node": ">=12",
|
|
67
|
-
"npm": ">=
|
|
77
|
+
"npm": ">=7"
|
|
68
78
|
}
|
|
69
79
|
}
|