prosemirror-slash-menu-react 0.0.5 → 0.0.6

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 (11) hide show
  1. package/README.md +6 -1
  2. package/dist/assets/index-435f7c53.css +89 -0
  3. package/dist/assets/index.es-9d7470f2.css +89 -0
  4. package/dist/index.es.js +38 -10
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +36 -8
  7. package/dist/index.js.map +1 -1
  8. package/dist/slashMenuReact/ListItem.d.ts +7 -4
  9. package/dist/slashMenuReact/display.d.ts +4 -0
  10. package/dist/styles/menu-style.css +16 -0
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -127,8 +127,10 @@ override the following classnames.
127
127
 
128
128
  - `menu-display-root` root div for the menu
129
129
  - `menu-element-wrapper` root of menu elements
130
+ - `menu-element-wrapper-clickable` root of menu elements when the menu items are set to be clickable
130
131
  - `menu-element-selected` classname that is added alongside `menu-element-wrapper` when an element is selected
131
132
  - `menu-element-icon` if icon is provided for the element it's rendered in this div
133
+ - `menu-element-right-icon` if right icon is provided its rendered in this div
132
134
  - `menu-element-label` label of the menu element
133
135
  - `menu-placeholder` when there is no matching items for the filter, this is displayed with the text "No matching items"
134
136
  - `menu-filter-wrapper` root of the filter display, positioned above the menu by default
@@ -143,10 +145,13 @@ override the following classnames.
143
145
  - `editorView` prosemirror editor view
144
146
  - `icons` Optional, if you want to provide icons for your menu elements. Type of `{[key: string]: FC}` where the key is
145
147
  the id of the menu element and the value is a `FunctionComponent` that renders the icon
148
+ - `rightIcons` Same as icons but these appear on the right on the menu element, most commonly used for indicating a
149
+ submenu with an arrow
146
150
  - `subMenuIcon` Optional icon for submenu label. By default, when a submenu is open an arrow is displayed indicating
147
151
  that the user is in a subMenu, it can be replaced with a react node of your choice
148
152
  - `filterFieldIcon` Optional icon in the filter field.
149
153
  - `filterPlaceHolder` Optional placeholder text for the filter field.
150
154
  - `mainMenuLabel` Optional label for the main menu. By default, there is none.
151
155
  - `popperReference` Optional popper reference HTMLElement, for displaying the menu next to whatever element you want
152
- - `popperOptions` You can pass in `placement` and `offset` to position your menu around the reference Element
156
+ - `popperOptions` You can pass in `placement` and `offset` to position your menu around the reference Element
157
+ - `clickable` Optional boolean, if true the menu items are clickable, by default they are used only with keyboard
package/dist/assets/index-435f7c53.css ADDED
@@ -0,0 +1,89 @@
1
+ .menu-display-root {
2
+ position: absolute;
3
+ display: flex;
4
+ flex-direction: column;
5
+ flex: 1;
6
+ max-height: 150px;
7
+ width: 200px;
8
+ z-index: 100;
9
+ overflow: scroll;
10
+ border-radius: 0.3rem;
11
+ background-color: #fafafa;
12
+ border: 2px solid #dddddd;
13
+ }
14
+
15
+ .menu-element-wrapper {
16
+ display: flex;
17
+ border-radius: 0.3rem;
18
+ padding: 0.2rem 0.5rem;
19
+ }
20
+
21
+ .menu-element-wrapper-clickable {
22
+ display: flex;
23
+ border-radius: 0.3rem;
24
+ padding: 0.2rem 0.5rem;
25
+ cursor: pointer;
26
+ }
27
+
28
+ .menu-element-selected {
29
+ background-color: #f1f1f1;
30
+ }
31
+
32
+ .menu-element-icon {
33
+ width: 23px;
34
+ height: auto;
35
+ display: flex;
36
+ align-items: center;
37
+ }
38
+
39
+ .menu-element-right-icon {
40
+ margin-left: auto;
41
+ width: 23px;
42
+ height: auto;
43
+ display: flex;
44
+ align-items: center;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .menu-element-label {
49
+ color: black;
50
+ display: flex;
51
+ align-items: center;
52
+ margin-left: 0.5rem;
53
+ }
54
+
55
+ .menu-placeholder {
56
+ color: #aaaaaa;
57
+ text-align: center;
58
+ padding: 0 0.5rem;
59
+ }
60
+
61
+ .menu-filter-wrapper {
62
+ display: flex;
63
+ background-color: transparent;
64
+ padding: 0.2rem 0.5rem;
65
+ position: absolute;
66
+ top: -1.5rem;
67
+ width: 200px;
68
+ }
69
+
70
+ .menu-filter-icon {
71
+ width: 23px;
72
+ height: auto;
73
+ display: flex;
74
+ align-items: center;
75
+ }
76
+
77
+ .menu-filter {
78
+ color: #aaaaaa;
79
+ font-style: italic
80
+ }
81
+
82
+ .menu-filter-placeholder {
83
+ color: #aaaaaa;
84
+ font-style: italic
85
+ }
86
+
87
+ .submenu-label {
88
+ margin-left: 0.5rem;
89
+ }
package/dist/assets/index.es-9d7470f2.css ADDED
@@ -0,0 +1,89 @@
1
+ .menu-display-root {
2
+ position: absolute;
3
+ display: flex;
4
+ flex-direction: column;
5
+ flex: 1;
6
+ max-height: 150px;
7
+ width: 200px;
8
+ z-index: 100;
9
+ overflow: scroll;
10
+ border-radius: 0.3rem;
11
+ background-color: #fafafa;
12
+ border: 2px solid #dddddd;
13
+ }
14
+
15
+ .menu-element-wrapper {
16
+ display: flex;
17
+ border-radius: 0.3rem;
18
+ padding: 0.2rem 0.5rem;
19
+ }
20
+
21
+ .menu-element-wrapper-clickable {
22
+ display: flex;
23
+ border-radius: 0.3rem;
24
+ padding: 0.2rem 0.5rem;
25
+ cursor: pointer;
26
+ }
27
+
28
+ .menu-element-selected {
29
+ background-color: #f1f1f1;
30
+ }
31
+
32
+ .menu-element-icon {
33
+ width: 23px;
34
+ height: auto;
35
+ display: flex;
36
+ align-items: center;
37
+ }
38
+
39
+ .menu-element-right-icon {
40
+ margin-left: auto;
41
+ width: 23px;
42
+ height: auto;
43
+ display: flex;
44
+ align-items: center;
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .menu-element-label {
49
+ color: black;
50
+ display: flex;
51
+ align-items: center;
52
+ margin-left: 0.5rem;
53
+ }
54
+
55
+ .menu-placeholder {
56
+ color: #aaaaaa;
57
+ text-align: center;
58
+ padding: 0 0.5rem;
59
+ }
60
+
61
+ .menu-filter-wrapper {
62
+ display: flex;
63
+ background-color: transparent;
64
+ padding: 0.2rem 0.5rem;
65
+ position: absolute;
66
+ top: -1.5rem;
67
+ width: 200px;
68
+ }
69
+
70
+ .menu-filter-icon {
71
+ width: 23px;
72
+ height: auto;
73
+ display: flex;
74
+ align-items: center;
75
+ }
76
+
77
+ .menu-filter {
78
+ color: #aaaaaa;
79
+ font-style: italic
80
+ }
81
+
82
+ .menu-filter-placeholder {
83
+ color: #aaaaaa;
84
+ font-style: italic
85
+ }
86
+
87
+ .submenu-label {
88
+ margin-left: 0.5rem;
89
+ }
package/dist/index.es.js CHANGED
@@ -1,14 +1,14 @@
1
- import React, { useEffect, useMemo, useRef } from 'react';
2
- import { SlashMenuKey, getElementById, dispatchWithMeta, SlashMetaTypes } from 'prosemirror-slash-menu';
1
+ import React, { useEffect, useCallback, useMemo, useRef } from 'react';
2
+ import { dispatchWithMeta, SlashMenuKey, SlashMetaTypes, getElementById } from 'prosemirror-slash-menu';
3
3
  import { usePopper } from 'react-popper';
4
4
  import { setBlockType, toggleMark } from 'prosemirror-commands';
5
5
 
6
- const ListItem = ({ menuState, id, Icon, idx, label }) => {
6
+ const ListItem = ({ menuState, el, view, Icon, idx, clickable, RightIcon }) => {
7
7
  useEffect(() => {
8
- const element = document.getElementById(id);
8
+ const element = document.getElementById(el.id);
9
9
  if (!element)
10
10
  return;
11
- if (id === menuState.selected) {
11
+ if (el.id === menuState.selected) {
12
12
  element.classList.add("menu-element-selected");
13
13
  return;
14
14
  }
@@ -16,10 +16,26 @@ const ListItem = ({ menuState, id, Icon, idx, label }) => {
16
16
  element.classList.remove("menu-element-selected");
17
17
  }
18
18
  }, [menuState.selected]);
19
- return (React.createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
19
+ const handleOnClick = useCallback(() => {
20
+ if (el.type === "command") {
21
+ dispatchWithMeta(view, SlashMenuKey, {
22
+ type: SlashMetaTypes.execute,
23
+ });
24
+ el.command(view);
25
+ }
26
+ if (el.type === "submenu") {
27
+ dispatchWithMeta(view, SlashMenuKey, {
28
+ type: SlashMetaTypes.openSubMenu,
29
+ element: el,
30
+ });
31
+ }
32
+ }, [el]);
33
+ return (React.createElement("div", { className: clickable ? "menu-element-wrapper-clickable" : "menu-element-wrapper", id: el.id, key: `${el.id}-${idx}`, onClick: handleOnClick },
20
34
  Icon ? (React.createElement("div", { className: "menu-element-icon" },
21
35
  React.createElement(Icon, null))) : null,
22
- React.createElement("div", { className: "menu-element-label" }, label)));
36
+ React.createElement("div", { className: "menu-element-label" }, el.label),
37
+ RightIcon ? (React.createElement("div", { className: "menu-element-right-icon" },
38
+ React.createElement(RightIcon, null))) : null));
23
39
  };
24
40
 
25
41
  var Icons;
@@ -169,7 +185,7 @@ var Placement;
169
185
  Placement["leftStart"] = "left-start";
170
186
  Placement["leftEnd"] = "left-end";
171
187
  })(Placement || (Placement = {}));
172
- const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, }) => {
188
+ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
173
189
  const menuState = useMemo(() => {
174
190
  if (!editorState)
175
191
  return;
@@ -300,9 +316,21 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFie
300
316
  return (_a = getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
301
317
  }
302
318
  }, [menuState]);
319
+ const closeSubMenu = useCallback(() => {
320
+ if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
321
+ dispatchWithMeta(editorView, SlashMenuKey, {
322
+ type: SlashMetaTypes.closeSubMenu,
323
+ element: getElementById(menuState.subMenuId, menuState),
324
+ });
325
+ }
326
+ }, [menuState]);
303
327
  useEffect(() => {
304
328
  editorView.focus();
305
329
  }, [menuState === null || menuState === void 0 ? void 0 : menuState.open]);
330
+ useEffect(() => {
331
+ console.log("focusSubId");
332
+ editorView.focus();
333
+ }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
306
334
  return (React.createElement(React.Fragment, null, (menuState === null || menuState === void 0 ? void 0 : menuState.open) ? (React.createElement("div", Object.assign({
307
335
  // @ts-ignore
308
336
  ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
@@ -312,12 +340,12 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFie
312
340
  filterFieldIcon ? (React.createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
313
341
  React.createElement("div", { className: "menu-filter-placeholder" }, filterPlaceHolder))),
314
342
  React.createElement("div", { id: "slashDisplay", ref: rootRef, className: "menu-display-root" },
315
- menuState.subMenuId ? (React.createElement("div", { className: "menu-element-wrapper" },
343
+ menuState.subMenuId ? (React.createElement("div", { className: "menu-element-wrapper", onClick: clickable ? closeSubMenu : undefined, style: { cursor: clickable ? "pointer" : undefined } },
316
344
  React.createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
317
345
  React.createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
318
346
  !menuState.subMenuId && mainMenuLabel ? (React.createElement("div", { className: "menu-element-wrapper" },
319
347
  React.createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
320
- elements.map((el, idx) => (React.createElement(ListItem, { key: el.id, menuState: menuState, id: el.id, Icon: icons === null || icons === void 0 ? void 0 : icons[el.id], idx: idx, label: el.label }))),
348
+ elements.map((el, idx) => (React.createElement(ListItem, { key: el.id, menuState: menuState, Icon: icons === null || icons === void 0 ? void 0 : icons[el.id], RightIcon: rightIcons === null || rightIcons === void 0 ? void 0 : rightIcons[el.id], idx: idx, clickable: clickable, el: el, view: editorView }))),
321
349
  (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React.createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
322
350
  };
323
351
 
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -11,12 +11,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
 
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
- const ListItem = ({ menuState, id, Icon, idx, label }) => {
14
+ const ListItem = ({ menuState, el, view, Icon, idx, clickable, RightIcon }) => {
15
15
  React.useEffect(() => {
16
- const element = document.getElementById(id);
16
+ const element = document.getElementById(el.id);
17
17
  if (!element)
18
18
  return;
19
- if (id === menuState.selected) {
19
+ if (el.id === menuState.selected) {
20
20
  element.classList.add("menu-element-selected");
21
21
  return;
22
22
  }
@@ -24,10 +24,26 @@ const ListItem = ({ menuState, id, Icon, idx, label }) => {
24
24
  element.classList.remove("menu-element-selected");
25
25
  }
26
26
  }, [menuState.selected]);
27
- return (React__default["default"].createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
27
+ const handleOnClick = React.useCallback(() => {
28
+ if (el.type === "command") {
29
+ prosemirrorSlashMenu.dispatchWithMeta(view, prosemirrorSlashMenu.SlashMenuKey, {
30
+ type: prosemirrorSlashMenu.SlashMetaTypes.execute,
31
+ });
32
+ el.command(view);
33
+ }
34
+ if (el.type === "submenu") {
35
+ prosemirrorSlashMenu.dispatchWithMeta(view, prosemirrorSlashMenu.SlashMenuKey, {
36
+ type: prosemirrorSlashMenu.SlashMetaTypes.openSubMenu,
37
+ element: el,
38
+ });
39
+ }
40
+ }, [el]);
41
+ return (React__default["default"].createElement("div", { className: clickable ? "menu-element-wrapper-clickable" : "menu-element-wrapper", id: el.id, key: `${el.id}-${idx}`, onClick: handleOnClick },
28
42
  Icon ? (React__default["default"].createElement("div", { className: "menu-element-icon" },
29
43
  React__default["default"].createElement(Icon, null))) : null,
30
- React__default["default"].createElement("div", { className: "menu-element-label" }, label)));
44
+ React__default["default"].createElement("div", { className: "menu-element-label" }, el.label),
45
+ RightIcon ? (React__default["default"].createElement("div", { className: "menu-element-right-icon" },
46
+ React__default["default"].createElement(RightIcon, null))) : null));
31
47
  };
32
48
 
33
49
  exports.Icons = void 0;
@@ -177,7 +193,7 @@ exports.Placement = void 0;
177
193
  Placement["leftStart"] = "left-start";
178
194
  Placement["leftEnd"] = "left-end";
179
195
  })(exports.Placement || (exports.Placement = {}));
180
- const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, }) => {
196
+ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
181
197
  const menuState = React.useMemo(() => {
182
198
  if (!editorState)
183
199
  return;
@@ -308,9 +324,21 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFie
308
324
  return (_a = prosemirrorSlashMenu.getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
309
325
  }
310
326
  }, [menuState]);
327
+ const closeSubMenu = React.useCallback(() => {
328
+ if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
329
+ prosemirrorSlashMenu.dispatchWithMeta(editorView, prosemirrorSlashMenu.SlashMenuKey, {
330
+ type: prosemirrorSlashMenu.SlashMetaTypes.closeSubMenu,
331
+ element: prosemirrorSlashMenu.getElementById(menuState.subMenuId, menuState),
332
+ });
333
+ }
334
+ }, [menuState]);
311
335
  React.useEffect(() => {
312
336
  editorView.focus();
313
337
  }, [menuState === null || menuState === void 0 ? void 0 : menuState.open]);
338
+ React.useEffect(() => {
339
+ console.log("focusSubId");
340
+ editorView.focus();
341
+ }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
314
342
  return (React__default["default"].createElement(React__default["default"].Fragment, null, (menuState === null || menuState === void 0 ? void 0 : menuState.open) ? (React__default["default"].createElement("div", Object.assign({
315
343
  // @ts-ignore
316
344
  ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
@@ -320,12 +348,12 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, filterFie
320
348
  filterFieldIcon ? (React__default["default"].createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
321
349
  React__default["default"].createElement("div", { className: "menu-filter-placeholder" }, filterPlaceHolder))),
322
350
  React__default["default"].createElement("div", { id: "slashDisplay", ref: rootRef, className: "menu-display-root" },
323
- menuState.subMenuId ? (React__default["default"].createElement("div", { className: "menu-element-wrapper" },
351
+ menuState.subMenuId ? (React__default["default"].createElement("div", { className: "menu-element-wrapper", onClick: clickable ? closeSubMenu : undefined, style: { cursor: clickable ? "pointer" : undefined } },
324
352
  React__default["default"].createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
325
353
  React__default["default"].createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
326
354
  !menuState.subMenuId && mainMenuLabel ? (React__default["default"].createElement("div", { className: "menu-element-wrapper" },
327
355
  React__default["default"].createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
328
- elements.map((el, idx) => (React__default["default"].createElement(ListItem, { key: el.id, menuState: menuState, id: el.id, Icon: icons === null || icons === void 0 ? void 0 : icons[el.id], idx: idx, label: el.label }))),
356
+ elements.map((el, idx) => (React__default["default"].createElement(ListItem, { key: el.id, menuState: menuState, Icon: icons === null || icons === void 0 ? void 0 : icons[el.id], RightIcon: rightIcons === null || rightIcons === void 0 ? void 0 : rightIcons[el.id], idx: idx, clickable: clickable, el: el, view: editorView }))),
329
357
  (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React__default["default"].createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
330
358
  };
331
359
 
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/slashMenuReact/ListItem.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import { FC } from "react";
2
- import { SlashMenuState } from "prosemirror-slash-menu";
2
+ import { MenuElement, SlashMenuState } from "prosemirror-slash-menu";
3
3
  import "./styles/menu-style.css";
4
+ import { EditorView } from "prosemirror-view";
4
5
  export declare const ListItem: FC<{
5
6
  menuState: SlashMenuState;
6
- id: string;
7
- Icon?: FC;
7
+ el: MenuElement;
8
+ view: EditorView;
8
9
  idx: number;
9
- label: string;
10
+ Icon?: FC;
11
+ RightIcon?: FC;
12
+ clickable?: boolean;
10
13
  }>;
package/dist/slashMenuReact/display.d.ts CHANGED
@@ -34,11 +34,15 @@ export interface SlashMenuProps {
34
34
  icons?: {
35
35
  [key: string]: FC;
36
36
  };
37
+ rightIcons?: {
38
+ [key: string]: FC;
39
+ };
37
40
  subMenuIcon?: ReactNode;
38
41
  filterFieldIcon?: ReactNode;
39
42
  filterPlaceHolder?: string;
40
43
  mainMenuLabel?: string;
41
44
  popperReference?: HTMLElement;
42
45
  popperOptions?: PopperOptions;
46
+ clickable?: boolean;
43
47
  }
44
48
  export declare const SlashMenuReact: FC<SlashMenuProps>;
package/dist/styles/menu-style.css CHANGED
@@ -18,6 +18,13 @@
18
18
  padding: 0.2rem 0.5rem;
19
19
  }
20
20
 
21
+ .menu-element-wrapper-clickable {
22
+ display: flex;
23
+ border-radius: 0.3rem;
24
+ padding: 0.2rem 0.5rem;
25
+ cursor: pointer;
26
+ }
27
+
21
28
  .menu-element-selected {
22
29
  background-color: #f1f1f1;
23
30
  }
@@ -29,6 +36,15 @@
29
36
  align-items: center;
30
37
  }
31
38
 
39
+ .menu-element-right-icon {
40
+ margin-left: auto;
41
+ width: 23px;
42
+ height: auto;
43
+ display: flex;
44
+ align-items: center;
45
+ margin-right: 0.5rem;
46
+ }
47
+
32
48
  .menu-element-label {
33
49
  color: black;
34
50
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prosemirror-slash-menu-react",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "Implementation of prosemirror-slash-menu in react",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",