prosemirror-slash-menu-react 0.0.5 → 0.0.7

package/README.md

@@ -127,8 +127,10 @@ override the following classnames.
 
 - `menu-display-root` root div for the menu
 - `menu-element-wrapper` root of menu elements
+- `menu-element-wrapper-clickable` root of menu elements when the menu items are set to be clickable
 - `menu-element-selected` classname that is added alongside `menu-element-wrapper` when an element is selected
 - `menu-element-icon` if icon is provided for the element it's rendered in this div
+- `menu-element-right-icon` if right icon is provided its rendered in this div
 - `menu-element-label` label of the menu element
 - `menu-placeholder` when there is no matching items for the filter, this is displayed with the text "No matching items"
 - `menu-filter-wrapper` root of the filter display, positioned above the menu by default
@@ -143,10 +145,13 @@ override the following classnames.
 - `editorView` prosemirror editor view
 - `icons` Optional, if you want to provide icons for your menu elements. Type of `{[key: string]: FC}` where the key is
   the id of the menu element and the value is a `FunctionComponent` that renders the icon
+- `rightIcons` Same as icons but these appear on the right on the menu element, most commonly used for indicating a
+  submenu with an arrow
 - `subMenuIcon` Optional icon for submenu label. By default, when a submenu is open an arrow is displayed indicating
   that the user is in a subMenu, it can be replaced with a react node of your choice
 - `filterFieldIcon` Optional icon in the filter field.
 - `filterPlaceHolder` Optional placeholder text for the filter field.
 - `mainMenuLabel` Optional label for the main menu. By default, there is none.
 - `popperReference` Optional popper reference HTMLElement, for displaying the menu next to whatever element you want
-- `popperOptions` You can pass in `placement` and `offset` to position your menu around the reference Element
+- `popperOptions` You can pass in `placement` and `offset` to position your menu around the reference Element
+- `clickable` Optional boolean, if true the menu items are clickable, by default they are used only with keyboard

package/dist/assets/{index.es-d21c7ba0.css → index-435f7c53.css}

@@ -18,6 +18,13 @@
     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;
 }
@@ -29,6 +36,15 @@
     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;

package/dist/assets/{index-cfd97ea4.css → index.es-9d7470f2.css}

@@ -18,6 +18,13 @@
     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;
 }
@@ -29,6 +36,15 @@
     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;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./slashMenuReact/display";
-export * from "./slashMenuReact/defaults";
+export * from "./slashMenuReact/display";
+export * from "./slashMenuReact/defaults";