prosemirror-slash-menu-react 0.0.4 → 0.0.6

package/dist/assets/index.es-fa7f86de.css

@@ -0,0 +1,73 @@
+.menu-display-root {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    max-height: 150px;
+    width: 200px;
+    z-index: 100;
+    overflow: scroll;
+    border-radius: 0.3rem;
+    background-color: #fafafa;
+    border: 2px solid #dddddd;
+}
+
+.menu-element-wrapper {
+    display: flex;
+    border-radius: 0.3rem;
+    padding: 0.2rem 0.5rem;
+}
+
+.menu-element-selected {
+    background-color: #f1f1f1;
+}
+
+.menu-element-icon {
+    width: 23px;
+    height: auto;
+    display: flex;
+    align-items: center;
+}
+
+.menu-element-label {
+    color: black;
+    display: flex;
+    align-items: center;
+    margin-left: 0.5rem;
+}
+
+.menu-placeholder {
+    color: #aaaaaa;
+    text-align: center;
+    padding-top: 1rem;
+}
+
+.menu-filter-wrapper {
+    display: flex;
+    background-color: transparent;
+    padding: 0.2rem 0.5rem;
+    position: absolute;
+    top: -1.5rem;
+    width: 200px;
+}
+
+.menu-filter-icon {
+    width: 23px;
+    height: auto;
+    display: flex;
+    align-items: center;
+}
+
+.menu-filter {
+    color: #aaaaaa;
+    font-style: italic
+}
+
+.menu-filter-placeholder {
+    color: #aaaaaa;
+    font-style: italic
+}
+
+.submenu-label {
+    margin-left: 0.5rem;
+}

package/dist/index.es.js

@@ -1,25 +1,14 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { getElementById, SlashMenuKey, dispatchWithMeta, SlashMetaTypes } from 'prosemirror-slash-menu';
+import React, { useEffect, useCallback, useMemo, useRef } from 'react';
+import { dispatchWithMeta, SlashMenuKey, SlashMetaTypes, getElementById } from 'prosemirror-slash-menu';
 import { usePopper } from 'react-popper';
 import { setBlockType, toggleMark } from 'prosemirror-commands';
 
-const getElements = (state) => {
-    const { subMenuId, filteredElements } = state;
-    if (!subMenuId) {
-        return filteredElements;
-    }
-    const subMenu = getElementById(subMenuId, state);
-    if (subMenu && subMenu.type === "submenu") {
-        return subMenu.elements;
-    }
-};
-
-const ListItem = ({ menuState, id, Icon, idx, label }) => {
+const ListItem = ({ menuState, el, view, Icon, idx, clickable, RightIcon }) => {
     useEffect(() => {
-        const element = document.getElementById(id);
+        const element = document.getElementById(el.id);
         if (!element)
             return;
-        if (id === menuState.selected) {
+        if (el.id === menuState.selected) {
             element.classList.add("menu-element-selected");
             return;
         }
@@ -27,10 +16,26 @@ const ListItem = ({ menuState, id, Icon, idx, label }) => {
             element.classList.remove("menu-element-selected");
         }
     }, [menuState.selected]);
-    return (React.createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
+    const handleOnClick = useCallback(() => {
+        if (el.type === "command") {
+            dispatchWithMeta(view, SlashMenuKey, {
+                type: SlashMetaTypes.execute,
+            });
+            el.command(view);
+        }
+        if (el.type === "submenu") {
+            dispatchWithMeta(view, SlashMenuKey, {
+                type: SlashMetaTypes.openSubMenu,
+                element: el,
+            });
+        }
+    }, [el]);
+    return (React.createElement("div", { className: clickable ? "menu-element-wrapper-clickable" : "menu-element-wrapper", id: el.id, key: `${el.id}-${idx}`, onClick: handleOnClick },
         Icon ? (React.createElement("div", { className: "menu-element-icon" },
             React.createElement(Icon, null))) : null,
-        React.createElement("div", { className: "menu-element-label" }, label)));
+        React.createElement("div", { className: "menu-element-label" }, el.label),
+        RightIcon ? (React.createElement("div", { className: "menu-element-right-icon" },
+            React.createElement(RightIcon, null))) : null));
 };
 
 var Icons;
@@ -162,7 +167,25 @@ const defaultIcons = {
     ArrowRight,
 };
 
-const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
+var Placement;
+(function (Placement) {
+    Placement["auto"] = "auto";
+    Placement["autoStart"] = "auto-start";
+    Placement["autoEnd"] = "auto-end";
+    Placement["top"] = "top";
+    Placement["topStart"] = "top-start";
+    Placement["topEnd"] = "top-end";
+    Placement["bottom"] = "bottom";
+    Placement["bottomStart"] = "bottom-start";
+    Placement["bottomEnd"] = "bottom-end";
+    Placement["right"] = "right";
+    Placement["rightStart"] = "right-start";
+    Placement["rightEnd"] = "right-end";
+    Placement["left"] = "left";
+    Placement["leftStart"] = "left-start";
+    Placement["leftEnd"] = "left-end";
+})(Placement || (Placement = {}));
+const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
     const menuState = useMemo(() => {
         if (!editorState)
             return;
@@ -171,7 +194,7 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
     const elements = useMemo(() => {
         if (!menuState)
             return;
-        return getElements(menuState);
+        return menuState.filteredElements;
     }, [menuState]);
     const rootRef = useRef(null);
     useEffect(() => {
@@ -225,15 +248,28 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
             },
         };
     }, [editorState, window.scrollY]);
-    const { styles, attributes } = usePopper(virtualReference, popperElement, {
+    const offsetModifier = useMemo(() => {
+        const filterElement = document.getElementById("menu-filter-wrapper");
+        filterElement === null || filterElement === void 0 ? void 0 : filterElement.getBoundingClientRect().top;
+        return {
+            name: "offset",
+            options: {
+                offset: [0, 36],
+            },
+        };
+    }, [popperReference]);
+    const { styles, attributes } = usePopper(popperReference || virtualReference, popperElement, {
+        placement: (popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.placement)
+            ? popperOptions.placement
+            : Placement.bottomStart,
         modifiers: [
             { name: "flip", enabled: true },
             {
                 name: "preventOverflow",
-                options: {
-                    mainAxis: false,
-                },
             },
+            (popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.offsetModifier)
+                ? popperOptions.offsetModifier
+                : offsetModifier,
         ],
     });
     useEffect(() => {
@@ -280,18 +316,38 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
             return (_a = getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
         }
     }, [menuState]);
+    const closeSubMenu = useCallback(() => {
+        if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
+            dispatchWithMeta(editorView, SlashMenuKey, {
+                type: SlashMetaTypes.closeSubMenu,
+                element: getElementById(menuState.subMenuId, menuState),
+            });
+        }
+    }, [menuState]);
+    useEffect(() => {
+        editorView.focus();
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.open]);
+    useEffect(() => {
+        console.log("focusSubId");
+        editorView.focus();
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
     return (React.createElement(React.Fragment, null, (menuState === null || menuState === void 0 ? void 0 : menuState.open) ? (React.createElement("div", Object.assign({ 
         // @ts-ignore
         ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
         menuState.filter ? (React.createElement("div", { className: "menu-filter-wrapper" },
-            React.createElement("div", { id: "menu-filter", className: "menu-filter" }, menuState.filter))) : null,
+            filterFieldIcon ? (React.createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
+            React.createElement("div", { id: "menu-filter", className: "menu-filter" }, menuState.filter))) : (React.createElement("div", { className: "menu-filter-wrapper" },
+            filterFieldIcon ? (React.createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
+            React.createElement("div", { className: "menu-filter-placeholder" }, filterPlaceHolder))),
         React.createElement("div", { id: "slashDisplay", ref: rootRef, className: "menu-display-root" },
-            menuState.subMenuId ? (React.createElement("div", { className: "menu-element-wrapper" },
-                React.createElement("div", { className: "menu-element-icon" }, subMenuIcon || defaultIcons.ArrowLeft()),
-                React.createElement("div", { className: "submenu-label" }, subMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
-            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 }))),
+            menuState.subMenuId ? (React.createElement("div", { className: "menu-element-wrapper", onClick: clickable ? closeSubMenu : undefined, style: { cursor: clickable ? "pointer" : undefined } },
+                React.createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
+                React.createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
+            !menuState.subMenuId && mainMenuLabel ? (React.createElement("div", { className: "menu-element-wrapper" },
+                React.createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, 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 }))),
             (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React.createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
 };
 
-export { Icons, SlashMenuReact, defaultElements, defaultIcons };
+export { Icons, Placement, SlashMenuReact, defaultElements, defaultIcons };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -11,23 +11,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getElements = (state) => {
-    const { subMenuId, filteredElements } = state;
-    if (!subMenuId) {
-        return filteredElements;
-    }
-    const subMenu = prosemirrorSlashMenu.getElementById(subMenuId, state);
-    if (subMenu && subMenu.type === "submenu") {
-        return subMenu.elements;
-    }
-};
-
-const ListItem = ({ menuState, id, Icon, idx, label }) => {
+const ListItem = ({ menuState, el, view, Icon, idx, clickable, RightIcon }) => {
     React.useEffect(() => {
-        const element = document.getElementById(id);
+        const element = document.getElementById(el.id);
         if (!element)
             return;
-        if (id === menuState.selected) {
+        if (el.id === menuState.selected) {
             element.classList.add("menu-element-selected");
             return;
         }
@@ -35,10 +24,26 @@ const ListItem = ({ menuState, id, Icon, idx, label }) => {
             element.classList.remove("menu-element-selected");
         }
     }, [menuState.selected]);
-    return (React__default["default"].createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
+    const handleOnClick = React.useCallback(() => {
+        if (el.type === "command") {
+            prosemirrorSlashMenu.dispatchWithMeta(view, prosemirrorSlashMenu.SlashMenuKey, {
+                type: prosemirrorSlashMenu.SlashMetaTypes.execute,
+            });
+            el.command(view);
+        }
+        if (el.type === "submenu") {
+            prosemirrorSlashMenu.dispatchWithMeta(view, prosemirrorSlashMenu.SlashMenuKey, {
+                type: prosemirrorSlashMenu.SlashMetaTypes.openSubMenu,
+                element: el,
+            });
+        }
+    }, [el]);
+    return (React__default["default"].createElement("div", { className: clickable ? "menu-element-wrapper-clickable" : "menu-element-wrapper", id: el.id, key: `${el.id}-${idx}`, onClick: handleOnClick },
         Icon ? (React__default["default"].createElement("div", { className: "menu-element-icon" },
             React__default["default"].createElement(Icon, null))) : null,
-        React__default["default"].createElement("div", { className: "menu-element-label" }, label)));
+        React__default["default"].createElement("div", { className: "menu-element-label" }, el.label),
+        RightIcon ? (React__default["default"].createElement("div", { className: "menu-element-right-icon" },
+            React__default["default"].createElement(RightIcon, null))) : null));
 };
 
 exports.Icons = void 0;
@@ -170,7 +175,25 @@ const defaultIcons = {
     ArrowRight,
 };
 
-const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
+exports.Placement = void 0;
+(function (Placement) {
+    Placement["auto"] = "auto";
+    Placement["autoStart"] = "auto-start";
+    Placement["autoEnd"] = "auto-end";
+    Placement["top"] = "top";
+    Placement["topStart"] = "top-start";
+    Placement["topEnd"] = "top-end";
+    Placement["bottom"] = "bottom";
+    Placement["bottomStart"] = "bottom-start";
+    Placement["bottomEnd"] = "bottom-end";
+    Placement["right"] = "right";
+    Placement["rightStart"] = "right-start";
+    Placement["rightEnd"] = "right-end";
+    Placement["left"] = "left";
+    Placement["leftStart"] = "left-start";
+    Placement["leftEnd"] = "left-end";
+})(exports.Placement || (exports.Placement = {}));
+const SlashMenuReact = ({ editorState, editorView, icons, rightIcons, subMenuIcon, filterFieldIcon, filterPlaceHolder, mainMenuLabel, popperReference, popperOptions, clickable, }) => {
     const menuState = React.useMemo(() => {
         if (!editorState)
             return;
@@ -179,7 +202,7 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
     const elements = React.useMemo(() => {
         if (!menuState)
             return;
-        return getElements(menuState);
+        return menuState.filteredElements;
     }, [menuState]);
     const rootRef = React.useRef(null);
     React.useEffect(() => {
@@ -233,15 +256,28 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
             },
         };
     }, [editorState, window.scrollY]);
-    const { styles, attributes } = reactPopper.usePopper(virtualReference, popperElement, {
+    const offsetModifier = React.useMemo(() => {
+        const filterElement = document.getElementById("menu-filter-wrapper");
+        filterElement === null || filterElement === void 0 ? void 0 : filterElement.getBoundingClientRect().top;
+        return {
+            name: "offset",
+            options: {
+                offset: [0, 36],
+            },
+        };
+    }, [popperReference]);
+    const { styles, attributes } = reactPopper.usePopper(popperReference || virtualReference, popperElement, {
+        placement: (popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.placement)
+            ? popperOptions.placement
+            : exports.Placement.bottomStart,
         modifiers: [
             { name: "flip", enabled: true },
             {
                 name: "preventOverflow",
-                options: {
-                    mainAxis: false,
-                },
             },
+            (popperOptions === null || popperOptions === void 0 ? void 0 : popperOptions.offsetModifier)
+                ? popperOptions.offsetModifier
+                : offsetModifier,
         ],
     });
     React.useEffect(() => {
@@ -288,16 +324,36 @@ const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
             return (_a = prosemirrorSlashMenu.getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
         }
     }, [menuState]);
+    const closeSubMenu = React.useCallback(() => {
+        if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
+            prosemirrorSlashMenu.dispatchWithMeta(editorView, prosemirrorSlashMenu.SlashMenuKey, {
+                type: prosemirrorSlashMenu.SlashMetaTypes.closeSubMenu,
+                element: prosemirrorSlashMenu.getElementById(menuState.subMenuId, menuState),
+            });
+        }
+    }, [menuState]);
+    React.useEffect(() => {
+        editorView.focus();
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.open]);
+    React.useEffect(() => {
+        console.log("focusSubId");
+        editorView.focus();
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId]);
     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({ 
         // @ts-ignore
         ref: setPopperElement, style: Object.assign({}, styles.popper) }, attributes.popper),
         menuState.filter ? (React__default["default"].createElement("div", { className: "menu-filter-wrapper" },
-            React__default["default"].createElement("div", { id: "menu-filter", className: "menu-filter" }, menuState.filter))) : null,
+            filterFieldIcon ? (React__default["default"].createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
+            React__default["default"].createElement("div", { id: "menu-filter", className: "menu-filter" }, menuState.filter))) : (React__default["default"].createElement("div", { className: "menu-filter-wrapper" },
+            filterFieldIcon ? (React__default["default"].createElement("div", { className: "menu-filter-icon" }, filterFieldIcon)) : null,
+            React__default["default"].createElement("div", { className: "menu-filter-placeholder" }, filterPlaceHolder))),
         React__default["default"].createElement("div", { id: "slashDisplay", ref: rootRef, className: "menu-display-root" },
-            menuState.subMenuId ? (React__default["default"].createElement("div", { className: "menu-element-wrapper" },
-                React__default["default"].createElement("div", { className: "menu-element-icon" }, subMenuIcon || defaultIcons.ArrowLeft()),
-                React__default["default"].createElement("div", { className: "submenu-label" }, subMenuLabel))) : null, elements === null || elements === void 0 ? void 0 :
-            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 }))),
+            menuState.subMenuId ? (React__default["default"].createElement("div", { className: "menu-element-wrapper", onClick: clickable ? closeSubMenu : undefined, style: { cursor: clickable ? "pointer" : undefined } },
+                React__default["default"].createElement("div", { className: "menu-element-icon-left" }, subMenuIcon || defaultIcons.ArrowLeft()),
+                React__default["default"].createElement("div", { className: "submenu-label" }, subMenuLabel))) : null,
+            !menuState.subMenuId && mainMenuLabel ? (React__default["default"].createElement("div", { className: "menu-element-wrapper" },
+                React__default["default"].createElement("div", { className: "submenu-label" }, mainMenuLabel))) : null, 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 }))),
             (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React__default["default"].createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/slashMenuReact/ListItem.d.ts

@@ -1,10 +1,13 @@
 import { FC } from "react";
-import { SlashMenuState } from "prosemirror-slash-menu";
+import { MenuElement, SlashMenuState } from "prosemirror-slash-menu";
 import "./styles/menu-style.css";
+import { EditorView } from "prosemirror-view";
 export declare const ListItem: FC<{
     menuState: SlashMenuState;
-    id: string;
-    Icon?: FC;
+    el: MenuElement;
+    view: EditorView;
     idx: number;
-    label: string;
+    Icon?: FC;
+    RightIcon?: FC;
+    clickable?: boolean;
 }>;

package/dist/slashMenuReact/defaults.d.ts

@@ -1,4 +1,5 @@
 import { CommandItem, SubMenu } from "prosemirror-slash-menu";
+import React from "react";
 export declare enum Icons {
     "HeaderMenu" = "HeaderMenu",
     "Level1" = "Level1",
@@ -10,7 +11,6 @@ export declare enum Icons {
     "Code" = "Code"
 }
 export declare const defaultElements: (CommandItem | SubMenu)[];
-import React from "react";
 export declare const defaultIcons: {
     H1Icon: () => React.JSX.Element;
     H2Icon: () => React.JSX.Element;

package/dist/slashMenuReact/display.d.ts

@@ -2,12 +2,47 @@ import { FC, ReactNode } from "react";
 import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import "./styles/menu-style.css";
+export declare enum Placement {
+    auto = "auto",
+    autoStart = "auto-start",
+    autoEnd = "auto-end",
+    top = "top",
+    topStart = "top-start",
+    topEnd = "top-end",
+    bottom = "bottom",
+    bottomStart = "bottom-start",
+    bottomEnd = "bottom-end",
+    right = "right",
+    rightStart = "right-start",
+    rightEnd = "right-end",
+    left = "left",
+    leftStart = "left-start",
+    leftEnd = "left-end"
+}
+export interface PopperOptions {
+    placement: Placement;
+    offsetModifier: {
+        name: string;
+        options: {
+            offset: number[];
+        };
+    };
+}
 export interface SlashMenuProps {
     editorState: EditorState;
     editorView: EditorView;
     icons?: {
         [key: string]: FC;
     };
+    rightIcons?: {
+        [key: string]: FC;
+    };
     subMenuIcon?: ReactNode;
+    filterFieldIcon?: ReactNode;
+    filterPlaceHolder?: string;
+    mainMenuLabel?: string;
+    popperReference?: HTMLElement;
+    popperOptions?: PopperOptions;
+    clickable?: boolean;
 }
 export declare const SlashMenuReact: FC<SlashMenuProps>;

package/dist/styles/menu-style.css

@@ -1,60 +1,89 @@
 .menu-display-root {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  height: 150px;
-  width: 200px;
-  z-index: 100;
-  overflow: scroll;
-  border-radius: 0.3rem;
-  background-color: #fafafa;
-  border: 2px solid #dddddd;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    max-height: 150px;
+    width: 200px;
+    z-index: 100;
+    overflow: scroll;
+    border-radius: 0.3rem;
+    background-color: #fafafa;
+    border: 2px solid #dddddd;
 }
 
 .menu-element-wrapper {
-  display: flex;
-  border-radius: 0.3rem;
-  padding: 0.2rem 0.5rem;
+    display: flex;
+    border-radius: 0.3rem;
+    padding: 0.2rem 0.5rem;
+}
+
+.menu-element-wrapper-clickable {
+    display: flex;
+    border-radius: 0.3rem;
+    padding: 0.2rem 0.5rem;
+    cursor: pointer;
 }
 
 .menu-element-selected {
-  background-color: #f1f1f1;
+    background-color: #f1f1f1;
 }
 
 .menu-element-icon {
-  width: 23px;
-  height: auto;
-  display: flex;
-  align-items: center;
+    width: 23px;
+    height: auto;
+    display: flex;
+    align-items: center;
+}
+
+.menu-element-right-icon {
+    margin-left: auto;
+    width: 23px;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-right: 0.5rem;
 }
 
 .menu-element-label {
-  color: black;
-  display: flex;
-  align-items: center;
-  margin-left: 0.5rem;
+    color: black;
+    display: flex;
+    align-items: center;
+    margin-left: 0.5rem;
 }
 
 .menu-placeholder {
-  color: #aaaaaa;
-  text-align: center;
-  padding-top: 1rem;
+    color: #aaaaaa;
+    text-align: center;
+    padding: 0 0.5rem;
 }
 
 .menu-filter-wrapper {
-  display: flex;
-  background-color: transparent;
-  padding: 0.2rem 0.5rem;
-  position: absolute;
-  top: -1.5rem;
+    display: flex;
+    background-color: transparent;
+    padding: 0.2rem 0.5rem;
+    position: absolute;
+    top: -1.5rem;
+    width: 200px;
+}
+
+.menu-filter-icon {
+    width: 23px;
+    height: auto;
+    display: flex;
+    align-items: center;
 }
 
 .menu-filter {
-  color: #aaaaaa;
-  font-style: italic;
+    color: #aaaaaa;
+    font-style: italic
 }
 
+.menu-filter-placeholder {
+    color: #aaaaaa;
+    font-style: italic
+}
 
-.submenu-label{
-  margin-left: 0.5rem;
+.submenu-label {
+    margin-left: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-slash-menu-react",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Implementation of prosemirror-slash-menu in react",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -20,7 +20,7 @@
     "prettier": "^2.8.8",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-schema-basic": "^1.2.2",
-    "prosemirror-slash-menu": "^0.1.2",
+    "prosemirror-slash-menu": "^0.1.4",
     "prosemirror-view": "^1.31.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/dist/slashMenuDisplay/ListItem.d.ts

@@ -1,9 +0,0 @@
-import { FC } from "react";
-import { SlashMenuState } from "prosemirror-slash-menu";
-export declare const ListItem: FC<{
-    menuState: SlashMenuState;
-    id: string;
-    Icon?: FC;
-    idx: number;
-    label: string;
-}>;