prosemirror-slash-menu-react 0.0.12 → 0.2.0

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 (6) hide show
  1. package/README.md +2 -0
  2. package/dist/index.es.js +25 -2
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +25 -2
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -137,6 +137,8 @@ override the following classnames.
137
137
  - `menu-filter-placeholder` placeholder text for the filter field
138
138
  - `menu-filter-icon` if icon is provided for the filter field it's rendered in this div
139
139
  - `submenu-label` The label of the submenu is shown above the menu elements when its opened
140
+ - `group-wrapper` wrapper around the menu elements, if there are multiple groups of elements
141
+ - `group-label` label/title of the group
140
142
 
141
143
  # Props
142
144
 
package/dist/index.es.js CHANGED
@@ -186,6 +186,7 @@ var Placement;
186
186
  Placement["leftEnd"] = "left-end";
187
187
  })(Placement || (Placement = {}));
188
188
  const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
189
+ var _a;
189
190
  const menuState = useMemo(() => {
190
191
  if (!editorState)
191
192
  return;
@@ -330,6 +331,22 @@ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIco
330
331
  useEffect(() => {
331
332
  editorView.focus();
332
333
  }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
334
+ const groups = useMemo(() => {
335
+ if (!elements) {
336
+ return;
337
+ }
338
+ return elements.reduce((acc, el) => {
339
+ if (el.group) {
340
+ acc[el.group] = acc[el.group] || [];
341
+ acc[el.group].push(el);
342
+ }
343
+ else {
344
+ acc[""] = acc[""] || [];
345
+ acc[""].push(el);
346
+ }
347
+ return acc;
348
+ }, {});
349
+ }, [elements]);
333
350
  return (React.createElement(React.Fragment, null, (menuState === null || menuState === void 0 ? void 0 : menuState.open) ? (React.createElement("div", Object.assign({
334
351
  // @ts-ignore
335
352
  ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
@@ -343,8 +360,14 @@ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIco
343
360
  React.createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
344
361
  React.createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
345
362
  !menuState.subMenuId && mainMenuLabel ? (React.createElement("div", { className: "menu-element-wrapper" },
346
- React.createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
347
- 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 }))),
363
+ React.createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null,
364
+ groups && ((_a = Object.keys(groups)) === null || _a === void 0 ? void 0 : _a.length) > 1
365
+ ? Object.keys(groups).map((group, x) => {
366
+ return (React.createElement("div", { key: x, className: "group-wrapper" },
367
+ React.createElement("div", { className: "group-label" }, group), groups === null || groups === void 0 ? void 0 :
368
+ groups[group].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 })))));
369
+ })
370
+ : elements === null || elements === void 0 ? void 0 : 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 }))),
348
371
  (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React.createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
349
372
  };
350
373
 
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
@@ -194,6 +194,7 @@ exports.Placement = void 0;
194
194
  Placement["leftEnd"] = "left-end";
195
195
  })(exports.Placement || (exports.Placement = {}));
196
196
  const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
197
+ var _a;
197
198
  const menuState = React.useMemo(() => {
198
199
  if (!editorState)
199
200
  return;
@@ -338,6 +339,22 @@ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIco
338
339
  React.useEffect(() => {
339
340
  editorView.focus();
340
341
  }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
342
+ const groups = React.useMemo(() => {
343
+ if (!elements) {
344
+ return;
345
+ }
346
+ return elements.reduce((acc, el) => {
347
+ if (el.group) {
348
+ acc[el.group] = acc[el.group] || [];
349
+ acc[el.group].push(el);
350
+ }
351
+ else {
352
+ acc[""] = acc[""] || [];
353
+ acc[""].push(el);
354
+ }
355
+ return acc;
356
+ }, {});
357
+ }, [elements]);
341
358
  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({
342
359
  // @ts-ignore
343
360
  ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
@@ -351,8 +368,14 @@ const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIco
351
368
  React__default["default"].createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
352
369
  React__default["default"].createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
353
370
  !menuState.subMenuId && mainMenuLabel ? (React__default["default"].createElement("div", { className: "menu-element-wrapper" },
354
- React__default["default"].createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
355
- 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 }))),
371
+ React__default["default"].createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null,
372
+ groups && ((_a = Object.keys(groups)) === null || _a === void 0 ? void 0 : _a.length) > 1
373
+ ? Object.keys(groups).map((group, x) => {
374
+ return (React__default["default"].createElement("div", { key: x, className: "group-wrapper" },
375
+ React__default["default"].createElement("div", { className: "group-label" }, group), groups === null || groups === void 0 ? void 0 :
376
+ groups[group].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 })))));
377
+ })
378
+ : elements === null || elements === void 0 ? void 0 : 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 }))),
356
379
  (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React__default["default"].createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
357
380
  };
358
381
 
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prosemirror-slash-menu-react",
3
- "version": "0.0.12",
3
+ "version": "0.2.0",
4
4
  "description": "Implementation of prosemirror-slash-menu in react",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -29,7 +29,7 @@
29
29
  "rollup-plugin-postcss": "^4.0.2",
30
30
  "typescript": "^5.1.6",
31
31
  "web-vitals": "^2.1.4",
32
- "prosemirror-slash-menu": "0.1.9"
32
+ "prosemirror-slash-menu": "0.3.1"
33
33
  },
34
34
  "repository": {
35
35
  "type": "git",