prosemirror-slash-menu-react 0.0.2

package/README.md

@@ -0,0 +1,137 @@
+# prosemirror-slash-menu-react
+
+![made by Emergence Engineering](https://emergence-engineering.com/ee-logo.svg)
+
+[**Made by Emergence-Engineering**](https://emergence-engineering.com/)
+
+A UI package used together with [prosemirror-slash-menu](https://github.com/emergence-engineering/prosemirror-slash-menu) to display the menu with react.
+
+By Horváth Áron & [Viktor Váczi](https://emergence-engineering.com/cv/viktor) at [Emergence Engineering](https://emergence-engineering.com/)
+
+Try it out at <https://emergence-engineering.com/blog/prosemirror-slash-menu>
+![alt text](https://github.com/emergence-engineering/prosemirror-slash-menu-react/blob/main/public/prosemirror-slash-menu.gif?raw=true)
+
+# Features
+
+- Displaying `prosemirror-slash-menu` with react
+- Menu positioning at the cursor position
+- Displaying the menu upwards in case of overflow
+- Default styling
+- Custom styling with css classnames
+- Outside click handling
+
+# Behavior
+
+You can open the menu with the `/` key in an empty paragraph or after a space and you can filter the elements just by typing, or you can navigate with the keyboard.
+For exact behaviour description checkout [prosemirror-slash-menu](https://github.com/emergence-engineering/prosemirror-slash-menu).
+
+
+# Installation and Usage
+Install from npm with:
+
+`npm install prosemirror-slash-menu-react` 
+
+Usage in the app:
+
+```tsx
+import React, { useEffect, useRef, useState } from "react";
+import { exampleSetup } from "prosemirror-example-setup";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import schema from "./schema";
+import { SlashMenuPlugin } from "prosemirror-slash-menu";
+import {
+  defaultElements,
+  defaultIcons,
+  Icons,
+  SlashMenuReact,
+} from "prosemirror-slash-menu-react";
+
+const ProseMirrorSlashMenuDemo = () => {
+  const [pmState, setPmState] = useState<EditorState>();
+  const [editorView, setEditorView] = useState<EditorView>();
+  const editorRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const state = EditorState.create({
+      doc: schema.nodeFromJSON({
+        content: [
+          {
+            content: [
+              {
+                text: "Type '/' after a space to open the menu. ",
+                type: "text",
+              },
+            ],
+            type: "paragraph",
+          },
+        ],
+        type: "doc",
+      }),
+      plugins: [
+        SlashMenuPlugin(defaultElements),
+        ...exampleSetup({
+          schema,
+        }),
+      ],
+    });
+    const view: EditorView = new EditorView(editorRef.current, {
+      state,
+      dispatchTransaction: (tr) => {
+        try {
+          const newState = view.state.apply(tr);
+          view.updateState(newState);
+          setPmState(newState);
+        } catch (e) {}
+      },
+    });
+    setEditorView(view);
+    return () => {
+      view && view.destroy();
+    };
+  }, [editorRef]);
+  return (
+    <>
+      <div ref={editorRef} id="editor" />
+      {pmState && editorView && (
+        <SlashMenuReact
+          icons={{
+            [Icons.HeaderMenu]: defaultIcons.H1Icon,
+            [Icons.Level1]: defaultIcons.H1Icon,
+            [Icons.Level2]: defaultIcons.H2Icon,
+            [Icons.Level3]: defaultIcons.H3Icon,
+            [Icons.Bold]: defaultIcons.BoldIcon,
+            [Icons.Italic]: defaultIcons.ItalicIcon,
+            [Icons.Code]: defaultIcons.CodeIcon,
+            [Icons.Link]: defaultIcons.LinkIcon,
+          }}
+          editorState={pmState}
+          editorView={editorView}
+        />
+      )}
+    </>
+  );
+};
+```
+
+
+# Styling 
+
+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.
+
+- `menu-display-root` root div for the menu
+- `menu-element-wrapper` root of menu elements
+- `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-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
+- `menu-filter` the filter text 
+- `submenu-label` The label of the submenu is shown above the menu elements when its opened
+
+# Props 
+
+- `editorState` prosemirrors editor state
+- `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 
+- `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

package/dist/index.css

@@ -0,0 +1,60 @@
+.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;
+}
+
+.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;
+}
+
+.menu-filter {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+
+.submenu-label{
+  margin-left: 0.5rem;
+}

package/dist/index.d.ts

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

package/dist/index.es.css

@@ -0,0 +1,60 @@
+.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;
+}
+
+.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;
+}
+
+.menu-filter {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+
+.submenu-label{
+  margin-left: 0.5rem;
+}

package/dist/index.es.js

@@ -0,0 +1,297 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { getElementById, SlashMenuKey, dispatchWithMeta, SlashMetaTypes } 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 }) => {
+    useEffect(() => {
+        const element = document.getElementById(id);
+        if (!element)
+            return;
+        if (id === menuState.selected) {
+            element.classList.add("menu-element-selected");
+            return;
+        }
+        if (element.classList.contains("menu-element-selected")) {
+            element.classList.remove("menu-element-selected");
+        }
+    }, [menuState.selected]);
+    return (React.createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
+        Icon ? (React.createElement("div", { className: "menu-element-icon" },
+            React.createElement(Icon, null))) : null,
+        React.createElement("div", { className: "menu-element-label" }, label)));
+};
+
+var Icons;
+(function (Icons) {
+    Icons["HeaderMenu"] = "HeaderMenu";
+    Icons["Level1"] = "Level1";
+    Icons["Level2"] = "Level2";
+    Icons["Level3"] = "Level3";
+    Icons["Bold"] = "Bold";
+    Icons["Italic"] = "Italic";
+    Icons["Link"] = "Link";
+    Icons["Code"] = "Code";
+})(Icons || (Icons = {}));
+const H1Command = {
+    id: Icons.Level1,
+    label: "H1",
+    type: "command",
+    command: (view) => {
+        setBlockType(view.state.schema.nodes.heading, { level: 1 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const H2Command = {
+    id: Icons.Level2,
+    label: "H2",
+    type: "command",
+    command: (view) => {
+        setBlockType(view.state.schema.nodes.heading, { level: 2 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const H3Command = {
+    id: Icons.Level3,
+    label: "H3",
+    type: "command",
+    command: (view) => {
+        setBlockType(view.state.schema.nodes.heading, { level: 3 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const BoldCommand = {
+    id: Icons.Bold,
+    label: "Bold",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.strong;
+        toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const ItalicCommand = {
+    id: Icons.Italic,
+    label: "Italic",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.em;
+        toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const CodeCommand = {
+    id: Icons.Code,
+    label: "Code",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.code;
+        toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const LinkCommand = {
+    id: Icons.Link,
+    label: "Link",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.link;
+        toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const HeadingsMenu = {
+    id: Icons.HeaderMenu,
+    label: "Headings",
+    type: "submenu",
+    available: (view) => true,
+    elements: [H1Command, H2Command, H3Command],
+};
+const defaultElements = [
+    HeadingsMenu,
+    BoldCommand,
+    ItalicCommand,
+    CodeCommand,
+    LinkCommand,
+];
+const H1Icon = () => (React.createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M17 17H11V12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12V24C9 24.5523 9.44772 25 10 25C10.5523 25 11 24.5523 11 24V19H17V24C17 24.5523 17.4477 25 18 25C18.5523 25 19 24.5523 19 24V12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12V17Z", fill: "#050038" }),
+    React.createElement("path", { d: "M26 25C26.5523 25 27 24.5523 27 24V12C27 11.4477 26.5523 11 26 11H23C22.4477 11 22 11.4477 22 12C22 12.5523 22.4477 13 23 13H25V24C25 24.5523 25.4477 25 26 25Z", fill: "#050038" })));
+const H2Icon = () => (React.createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M16 17H11V13C11 12.4477 10.5523 12 10 12C9.44772 12 9 12.4477 9 13V23C9 23.5523 9.44772 24 10 24C10.5523 24 11 23.5523 11 23V19H16V23C16 23.5523 16.4477 24 17 24C17.5523 24 18 23.5523 18 23V13C18 12.4477 17.5523 12 17 12C16.4477 12 16 12.4477 16 13V17Z", fill: "#050038" }),
+    React.createElement("path", { d: "M26 22H22V19H26C26.5523 19 27 18.5523 27 18V13C27 12.4477 26.5523 12 26 12H21C20.4477 12 20 12.4477 20 13C20 13.5523 20.4477 14 21 14H25V17H21C20.4477 17 20 17.4477 20 18V23C20 23.5523 20.4477 24 21 24H26C26.5523 24 27 23.5523 27 23C27 22.4477 26.5523 22 26 22Z", fill: "#050038" })));
+const H3Icon = () => (React.createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M12 17H16V14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14V22C18 22.5523 17.5523 23 17 23C16.4477 23 16 22.5523 16 22V19H12V22C12 22.5523 11.5523 23 11 23C10.4477 23 10 22.5523 10 22V14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14V17Z", fill: "#050038" }),
+    React.createElement("path", { d: "M20 14C20 13.4477 20.4477 13 21 13H25C25.5523 13 26 13.4477 26 14V22C26 22.5523 25.5523 23 25 23H21C20.4477 23 20 22.5523 20 22C20 21.4477 20.4477 21 21 21H24V19H21C20.4477 19 20 18.5523 20 18C20 17.4477 20.4477 17 21 17H24V15H21C20.4477 15 20 14.5523 20 14Z", fill: "#050038" })));
+const ItalicIcon = () => (React.createElement("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M8.38197 18L14.382 6H11.5C10.9477 6 10.5 5.55228 10.5 5C10.5 4.44772 10.9477 4 11.5 4H19.5C20.0523 4 20.5 4.44772 20.5 5C20.5 5.55228 20.0523 6 19.5 6H16.618L10.618 18H13.5C14.0523 18 14.5 18.4477 14.5 19C14.5 19.5523 14.0523 20 13.5 20H5.5C4.94772 20 4.5 19.5523 4.5 19C4.5 18.4477 4.94772 18 5.5 18H8.38197Z", fill: "#050038" })));
+const BoldIcon = () => (React.createElement("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 15C19.5 17.7614 17.2614 20 14.5 20H8.5C7.94772 20 7.5 19.5523 7.5 19V5C7.5 4.44772 7.94772 4 8.5 4H14C16.4853 4 18.5 6.01472 18.5 8.5C18.5 9.4786 18.1876 10.3842 17.6572 11.1226C18.7818 12.0395 19.5 13.4359 19.5 15ZM10.5 10H14C14.8284 10 15.5 9.32843 15.5 8.5C15.5 7.67157 14.8284 7 14 7H10.5V10ZM10.5 17V13H14.5C15.6046 13 16.5 13.8954 16.5 15C16.5 16.1046 15.6046 17 14.5 17H10.5Z", fill: "#050038" })));
+const ArrowLeft = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-arrow-left" },
+    React.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+    React.createElement("polyline", { points: "12 19 5 12 12 5" })));
+const ArrowRight = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-arrow-right" },
+    React.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+    React.createElement("polyline", { points: "12 5 19 12 12 19" })));
+const CodeIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-code" },
+    React.createElement("polyline", { points: "16 18 22 12 16 6" }),
+    React.createElement("polyline", { points: "8 6 2 12 8 18" })));
+const LinkIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-link-2" },
+    React.createElement("path", { d: "M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" }),
+    React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })));
+const defaultIcons = {
+    H1Icon,
+    H2Icon,
+    H3Icon,
+    LinkIcon,
+    BoldIcon,
+    CodeIcon,
+    ItalicIcon,
+    ArrowLeft,
+    ArrowRight,
+};
+
+const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
+    const menuState = useMemo(() => {
+        if (!editorState)
+            return;
+        return SlashMenuKey.getState(editorState);
+    }, [editorState]);
+    const elements = useMemo(() => {
+        if (!menuState)
+            return;
+        return getElements(menuState);
+    }, [menuState]);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!rootRef)
+            return;
+        const outsideClickHandler = (event) => {
+            if (rootRef.current &&
+                (!event.target ||
+                    !(event.target instanceof Node) ||
+                    !rootRef.current.contains(event === null || event === void 0 ? void 0 : event.target))) {
+                dispatchWithMeta(editorView, SlashMenuKey, {
+                    type: SlashMetaTypes.close,
+                });
+            }
+        };
+        document.addEventListener("mousedown", outsideClickHandler);
+        return () => {
+            document.removeEventListener("mousedown", outsideClickHandler);
+        };
+    }, [rootRef]);
+    const [popperElement, setPopperElement] = React.useState(null);
+    const virtualReference = useMemo(() => {
+        var _a;
+        const domNode = (_a = editorView.domAtPos(editorState.selection.to)) === null || _a === void 0 ? void 0 : _a.node;
+        const cursorLeft = editorView.coordsAtPos(editorState.selection.to).left;
+        if (!(domNode instanceof HTMLElement))
+            return;
+        const { top, height } = domNode.getBoundingClientRect();
+        return {
+            getBoundingClientRect() {
+                return {
+                    top: top,
+                    right: cursorLeft,
+                    bottom: top,
+                    left: cursorLeft,
+                    width: 0,
+                    height: height,
+                    x: cursorLeft,
+                    y: top,
+                    toJSON: () => JSON.stringify({
+                        top: top,
+                        right: cursorLeft,
+                        bottom: top,
+                        left: cursorLeft,
+                        width: 0,
+                        height: height,
+                        x: cursorLeft,
+                        y: top,
+                    }),
+                };
+            },
+        };
+    }, [editorState, window.scrollY]);
+    const { styles, attributes } = usePopper(virtualReference, popperElement, {
+        modifiers: [
+            { name: "flip", enabled: true },
+            {
+                name: "preventOverflow",
+                options: {
+                    mainAxis: false,
+                },
+            },
+        ],
+    });
+    useEffect(() => {
+        if (!menuState)
+            return;
+        const element = document.getElementById(menuState.selected);
+        if (!element || !rootRef.current)
+            return;
+        const isTopElement = menuState.selected === menuState.filteredElements[0].id;
+        if (isTopElement) {
+            rootRef.current.scrollTop = 0;
+            return;
+        }
+        const height = element.clientHeight +
+            parseInt(window.getComputedStyle(element).getPropertyValue("margin-top")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("margin-bottom")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("padding-top")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("padding-bottom"));
+        const { bottom, top } = element.getBoundingClientRect();
+        const containerRect = rootRef.current.getBoundingClientRect();
+        const scrollUp = top - height < containerRect.top;
+        const visible = scrollUp
+            ? top - containerRect.top > height
+            : !(bottom > containerRect.bottom);
+        if (!visible) {
+            if (scrollUp) {
+                rootRef.current.scrollTop = element.offsetTop - height / 2;
+            }
+            else {
+                rootRef.current.scrollTop =
+                    element.offsetTop - containerRect.height + height + height / 4;
+            }
+        }
+    }, [menuState]);
+    useEffect(() => {
+        if (rootRef.current === null) {
+            return;
+        }
+        rootRef.current.scrollTop = 0;
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.filteredElements]);
+    const subMenuLabel = useMemo(() => {
+        var _a;
+        if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
+            return (_a = getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
+        }
+    }, [menuState]);
+    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,
+        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 }))),
+            (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 };
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

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

package/dist/index.js

@@ -0,0 +1,307 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var prosemirrorSlashMenu = require('prosemirror-slash-menu');
+var reactPopper = require('react-popper');
+var prosemirrorCommands = require('prosemirror-commands');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 }) => {
+    React.useEffect(() => {
+        const element = document.getElementById(id);
+        if (!element)
+            return;
+        if (id === menuState.selected) {
+            element.classList.add("menu-element-selected");
+            return;
+        }
+        if (element.classList.contains("menu-element-selected")) {
+            element.classList.remove("menu-element-selected");
+        }
+    }, [menuState.selected]);
+    return (React__default["default"].createElement("div", { className: "menu-element-wrapper", id: id, key: `${id}-${idx}` },
+        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)));
+};
+
+exports.Icons = void 0;
+(function (Icons) {
+    Icons["HeaderMenu"] = "HeaderMenu";
+    Icons["Level1"] = "Level1";
+    Icons["Level2"] = "Level2";
+    Icons["Level3"] = "Level3";
+    Icons["Bold"] = "Bold";
+    Icons["Italic"] = "Italic";
+    Icons["Link"] = "Link";
+    Icons["Code"] = "Code";
+})(exports.Icons || (exports.Icons = {}));
+const H1Command = {
+    id: exports.Icons.Level1,
+    label: "H1",
+    type: "command",
+    command: (view) => {
+        prosemirrorCommands.setBlockType(view.state.schema.nodes.heading, { level: 1 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const H2Command = {
+    id: exports.Icons.Level2,
+    label: "H2",
+    type: "command",
+    command: (view) => {
+        prosemirrorCommands.setBlockType(view.state.schema.nodes.heading, { level: 2 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const H3Command = {
+    id: exports.Icons.Level3,
+    label: "H3",
+    type: "command",
+    command: (view) => {
+        prosemirrorCommands.setBlockType(view.state.schema.nodes.heading, { level: 3 })(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const BoldCommand = {
+    id: exports.Icons.Bold,
+    label: "Bold",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.strong;
+        prosemirrorCommands.toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const ItalicCommand = {
+    id: exports.Icons.Italic,
+    label: "Italic",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.em;
+        prosemirrorCommands.toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const CodeCommand = {
+    id: exports.Icons.Code,
+    label: "Code",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.code;
+        prosemirrorCommands.toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const LinkCommand = {
+    id: exports.Icons.Link,
+    label: "Link",
+    type: "command",
+    command: (view) => {
+        const markType = view.state.schema.marks.link;
+        prosemirrorCommands.toggleMark(markType)(view.state, view.dispatch, view);
+    },
+    available: (view) => true,
+};
+const HeadingsMenu = {
+    id: exports.Icons.HeaderMenu,
+    label: "Headings",
+    type: "submenu",
+    available: (view) => true,
+    elements: [H1Command, H2Command, H3Command],
+};
+const defaultElements = [
+    HeadingsMenu,
+    BoldCommand,
+    ItalicCommand,
+    CodeCommand,
+    LinkCommand,
+];
+const H1Icon = () => (React__default["default"].createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M17 17H11V12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12V24C9 24.5523 9.44772 25 10 25C10.5523 25 11 24.5523 11 24V19H17V24C17 24.5523 17.4477 25 18 25C18.5523 25 19 24.5523 19 24V12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12V17Z", fill: "#050038" }),
+    React__default["default"].createElement("path", { d: "M26 25C26.5523 25 27 24.5523 27 24V12C27 11.4477 26.5523 11 26 11H23C22.4477 11 22 11.4477 22 12C22 12.5523 22.4477 13 23 13H25V24C25 24.5523 25.4477 25 26 25Z", fill: "#050038" })));
+const H2Icon = () => (React__default["default"].createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M16 17H11V13C11 12.4477 10.5523 12 10 12C9.44772 12 9 12.4477 9 13V23C9 23.5523 9.44772 24 10 24C10.5523 24 11 23.5523 11 23V19H16V23C16 23.5523 16.4477 24 17 24C17.5523 24 18 23.5523 18 23V13C18 12.4477 17.5523 12 17 12C16.4477 12 16 12.4477 16 13V17Z", fill: "#050038" }),
+    React__default["default"].createElement("path", { d: "M26 22H22V19H26C26.5523 19 27 18.5523 27 18V13C27 12.4477 26.5523 12 26 12H21C20.4477 12 20 12.4477 20 13C20 13.5523 20.4477 14 21 14H25V17H21C20.4477 17 20 17.4477 20 18V23C20 23.5523 20.4477 24 21 24H26C26.5523 24 27 23.5523 27 23C27 22.4477 26.5523 22 26 22Z", fill: "#050038" })));
+const H3Icon = () => (React__default["default"].createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M12 17H16V14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14V22C18 22.5523 17.5523 23 17 23C16.4477 23 16 22.5523 16 22V19H12V22C12 22.5523 11.5523 23 11 23C10.4477 23 10 22.5523 10 22V14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14V17Z", fill: "#050038" }),
+    React__default["default"].createElement("path", { d: "M20 14C20 13.4477 20.4477 13 21 13H25C25.5523 13 26 13.4477 26 14V22C26 22.5523 25.5523 23 25 23H21C20.4477 23 20 22.5523 20 22C20 21.4477 20.4477 21 21 21H24V19H21C20.4477 19 20 18.5523 20 18C20 17.4477 20.4477 17 21 17H24V15H21C20.4477 15 20 14.5523 20 14Z", fill: "#050038" })));
+const ItalicIcon = () => (React__default["default"].createElement("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M8.38197 18L14.382 6H11.5C10.9477 6 10.5 5.55228 10.5 5C10.5 4.44772 10.9477 4 11.5 4H19.5C20.0523 4 20.5 4.44772 20.5 5C20.5 5.55228 20.0523 6 19.5 6H16.618L10.618 18H13.5C14.0523 18 14.5 18.4477 14.5 19C14.5 19.5523 14.0523 20 13.5 20H5.5C4.94772 20 4.5 19.5523 4.5 19C4.5 18.4477 4.94772 18 5.5 18H8.38197Z", fill: "#050038" })));
+const BoldIcon = () => (React__default["default"].createElement("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 15C19.5 17.7614 17.2614 20 14.5 20H8.5C7.94772 20 7.5 19.5523 7.5 19V5C7.5 4.44772 7.94772 4 8.5 4H14C16.4853 4 18.5 6.01472 18.5 8.5C18.5 9.4786 18.1876 10.3842 17.6572 11.1226C18.7818 12.0395 19.5 13.4359 19.5 15ZM10.5 10H14C14.8284 10 15.5 9.32843 15.5 8.5C15.5 7.67157 14.8284 7 14 7H10.5V10ZM10.5 17V13H14.5C15.6046 13 16.5 13.8954 16.5 15C16.5 16.1046 15.6046 17 14.5 17H10.5Z", fill: "#050038" })));
+const ArrowLeft = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-arrow-left" },
+    React__default["default"].createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+    React__default["default"].createElement("polyline", { points: "12 19 5 12 12 5" })));
+const ArrowRight = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-arrow-right" },
+    React__default["default"].createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+    React__default["default"].createElement("polyline", { points: "12 5 19 12 12 19" })));
+const CodeIcon = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-code" },
+    React__default["default"].createElement("polyline", { points: "16 18 22 12 16 6" }),
+    React__default["default"].createElement("polyline", { points: "8 6 2 12 8 18" })));
+const LinkIcon = () => (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: "feather feather-link-2" },
+    React__default["default"].createElement("path", { d: "M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" }),
+    React__default["default"].createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })));
+const defaultIcons = {
+    H1Icon,
+    H2Icon,
+    H3Icon,
+    LinkIcon,
+    BoldIcon,
+    CodeIcon,
+    ItalicIcon,
+    ArrowLeft,
+    ArrowRight,
+};
+
+const SlashMenuReact = ({ editorState, editorView, icons, subMenuIcon, }) => {
+    const menuState = React.useMemo(() => {
+        if (!editorState)
+            return;
+        return prosemirrorSlashMenu.SlashMenuKey.getState(editorState);
+    }, [editorState]);
+    const elements = React.useMemo(() => {
+        if (!menuState)
+            return;
+        return getElements(menuState);
+    }, [menuState]);
+    const rootRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!rootRef)
+            return;
+        const outsideClickHandler = (event) => {
+            if (rootRef.current &&
+                (!event.target ||
+                    !(event.target instanceof Node) ||
+                    !rootRef.current.contains(event === null || event === void 0 ? void 0 : event.target))) {
+                prosemirrorSlashMenu.dispatchWithMeta(editorView, prosemirrorSlashMenu.SlashMenuKey, {
+                    type: prosemirrorSlashMenu.SlashMetaTypes.close,
+                });
+            }
+        };
+        document.addEventListener("mousedown", outsideClickHandler);
+        return () => {
+            document.removeEventListener("mousedown", outsideClickHandler);
+        };
+    }, [rootRef]);
+    const [popperElement, setPopperElement] = React__default["default"].useState(null);
+    const virtualReference = React.useMemo(() => {
+        var _a;
+        const domNode = (_a = editorView.domAtPos(editorState.selection.to)) === null || _a === void 0 ? void 0 : _a.node;
+        const cursorLeft = editorView.coordsAtPos(editorState.selection.to).left;
+        if (!(domNode instanceof HTMLElement))
+            return;
+        const { top, height } = domNode.getBoundingClientRect();
+        return {
+            getBoundingClientRect() {
+                return {
+                    top: top,
+                    right: cursorLeft,
+                    bottom: top,
+                    left: cursorLeft,
+                    width: 0,
+                    height: height,
+                    x: cursorLeft,
+                    y: top,
+                    toJSON: () => JSON.stringify({
+                        top: top,
+                        right: cursorLeft,
+                        bottom: top,
+                        left: cursorLeft,
+                        width: 0,
+                        height: height,
+                        x: cursorLeft,
+                        y: top,
+                    }),
+                };
+            },
+        };
+    }, [editorState, window.scrollY]);
+    const { styles, attributes } = reactPopper.usePopper(virtualReference, popperElement, {
+        modifiers: [
+            { name: "flip", enabled: true },
+            {
+                name: "preventOverflow",
+                options: {
+                    mainAxis: false,
+                },
+            },
+        ],
+    });
+    React.useEffect(() => {
+        if (!menuState)
+            return;
+        const element = document.getElementById(menuState.selected);
+        if (!element || !rootRef.current)
+            return;
+        const isTopElement = menuState.selected === menuState.filteredElements[0].id;
+        if (isTopElement) {
+            rootRef.current.scrollTop = 0;
+            return;
+        }
+        const height = element.clientHeight +
+            parseInt(window.getComputedStyle(element).getPropertyValue("margin-top")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("margin-bottom")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("padding-top")) +
+            parseInt(window.getComputedStyle(element).getPropertyValue("padding-bottom"));
+        const { bottom, top } = element.getBoundingClientRect();
+        const containerRect = rootRef.current.getBoundingClientRect();
+        const scrollUp = top - height < containerRect.top;
+        const visible = scrollUp
+            ? top - containerRect.top > height
+            : !(bottom > containerRect.bottom);
+        if (!visible) {
+            if (scrollUp) {
+                rootRef.current.scrollTop = element.offsetTop - height / 2;
+            }
+            else {
+                rootRef.current.scrollTop =
+                    element.offsetTop - containerRect.height + height + height / 4;
+            }
+        }
+    }, [menuState]);
+    React.useEffect(() => {
+        if (rootRef.current === null) {
+            return;
+        }
+        rootRef.current.scrollTop = 0;
+    }, [menuState === null || menuState === void 0 ? void 0 : menuState.filteredElements]);
+    const subMenuLabel = React.useMemo(() => {
+        var _a;
+        if (menuState === null || menuState === void 0 ? void 0 : menuState.subMenuId) {
+            return (_a = prosemirrorSlashMenu.getElementById(menuState.subMenuId, menuState)) === null || _a === void 0 ? void 0 : _a.label;
+        }
+    }, [menuState]);
+    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,
+        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 }))),
+            (elements === null || elements === void 0 ? void 0 : elements.length) === 0 ? (React__default["default"].createElement("div", { className: "menu-placeholder" }, "No matching items")) : null))) : null));
+};
+
+exports.SlashMenuReact = SlashMenuReact;
+exports.defaultElements = defaultElements;
+exports.defaultIcons = defaultIcons;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/slashMenuDisplay/ListItem.d.ts

@@ -0,0 +1,9 @@
+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;
+}>;

package/dist/slashMenuDisplay/defaults.d.ts

@@ -0,0 +1,11 @@
+import { SlashMenuState } from "prosemirror-slash-menu";
+export declare enum Icons {
+    "Level1" = "Level1",
+    "Level2" = "Level2",
+    "Level3" = "Level3",
+    "Bold" = "Bold",
+    "Italic" = "Italic",
+    "Link" = "Link",
+    "Code" = "Code"
+}
+export declare const defaultConfig: Partial<SlashMenuState>;

package/dist/slashMenuDisplay/display.d.ts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+export interface SlashMenuDisplayConfig {
+    height: number;
+    minHeight: number;
+    overflowPadding: number;
+}
+export interface SlashMenuProps {
+    editorState: EditorState;
+    editorView: EditorView;
+    config: SlashMenuDisplayConfig;
+    icons?: {
+        [key: string]: FC;
+    };
+}
+export declare const SlashMenuDisplay: FC<SlashMenuProps>;

package/dist/slashMenuDisplay/icons/defaultIcons.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const HeadingIcon: () => React.JSX.Element;
+export declare const H1Icon: () => React.JSX.Element;
+export declare const H2Icon: () => React.JSX.Element;
+export declare const H3Icon: () => React.JSX.Element;
+export declare const ItalicIcon: () => React.JSX.Element;
+export declare const BoldIcon: () => React.JSX.Element;
+export declare const ArrowLeft: () => React.JSX.Element;
+export declare const ArrowRight: () => React.JSX.Element;
+export declare const CodeIcon: () => React.JSX.Element;
+export declare const Link: () => React.JSX.Element;

package/dist/slashMenuDisplay/utils.d.ts

@@ -0,0 +1,2 @@
+import { SlashMenuState } from "prosemirror-slash-menu";
+export declare const getElements: (state: SlashMenuState) => import("prosemirror-slash-menu").MenuElement[] | undefined;

package/dist/slashMenuReact/ListItem.d.ts

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

package/dist/slashMenuReact/defaults.d.ts

@@ -0,0 +1,24 @@
+import { CommandItem, SubMenu } from "prosemirror-slash-menu";
+export declare enum Icons {
+    "HeaderMenu" = "HeaderMenu",
+    "Level1" = "Level1",
+    "Level2" = "Level2",
+    "Level3" = "Level3",
+    "Bold" = "Bold",
+    "Italic" = "Italic",
+    "Link" = "Link",
+    "Code" = "Code"
+}
+export declare const defaultElements: (CommandItem | SubMenu)[];
+import React from "react";
+export declare const defaultIcons: {
+    H1Icon: () => React.JSX.Element;
+    H2Icon: () => React.JSX.Element;
+    H3Icon: () => React.JSX.Element;
+    LinkIcon: () => React.JSX.Element;
+    BoldIcon: () => React.JSX.Element;
+    CodeIcon: () => React.JSX.Element;
+    ItalicIcon: () => React.JSX.Element;
+    ArrowLeft: () => React.JSX.Element;
+    ArrowRight: () => React.JSX.Element;
+};

package/dist/slashMenuReact/display.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+import { EditorState } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import "./styles/menu-style.css";
+export interface SlashMenuProps {
+    editorState: EditorState;
+    editorView: EditorView;
+    icons?: {
+        [key: string]: FC;
+    };
+    subMenuIcon?: ReactNode;
+}
+export declare const SlashMenuReact: FC<SlashMenuProps>;

package/dist/slashMenuReact/utils.d.ts

@@ -0,0 +1,2 @@
+import { SlashMenuState } from "prosemirror-slash-menu";
+export declare const getElements: (state: SlashMenuState) => import("prosemirror-slash-menu").MenuElement[] | undefined;

package/dist/styles/menu-style.css

@@ -0,0 +1,60 @@
+.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;
+}
+
+.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;
+}
+
+.menu-filter {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+
+.submenu-label{
+  margin-left: 0.5rem;
+}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "prosemirror-slash-menu-react",
+  "version": "0.0.2",
+  "description": "Implementation of prosemirror-slash-menu in react",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-sucrase": "^5.0.1",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.34",
+    "@types/react": "^18.2.9",
+    "@types/react-dom": "^18.2.4",
+    "prettier": "^2.8.8",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-slash-menu": "^0.1.0",
+    "prosemirror-view": "^1.31.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "react-scripts": "5.0.1",
+    "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "yalc:watch": "nodemon --watch dist --exec 'yalc push'",
+    "dev:watch": "npm-run-all --parallel dev yalc:watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emergence-engineering/prosemirror-slash-menu-react.git"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "author": "Emergence Engineering",
+  "keywords": [
+    "ProseMirror",
+    "React",
+    "slash",
+    "menu"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/emergence-engineering/prosemirror-slash-menu-react/issues"
+  },
+  "homepage": "https://github.com/emergence-engineering/prosemirror-slash-menu-react#readme",
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "nodemon": "^2.0.22",
+    "rollup": "^2.79.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-typescript2": "^0.34.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}