Feat slash commands

packages/editor/src/components/popup-presenter/index.tsx

@@ -309,7 +309,7 @@ export function usePopupHandler(options: UsePopupHandlerOptions) {
 }
 
 type ShowPopupOptions = {
-  popup: (closePopup: () => void) => React.ReactNode;
+  popup?: (closePopup: () => void) => React.ReactNode;
 } & Partial<ResponsivePresenterProps>;
 export function showPopup(options: ShowPopupOptions) {
   const { popup, ...props } = options;
@@ -337,7 +337,7 @@ export function showPopup(options: ShowPopupOptions) {
           props.onClose?.();
         }}
       >
-        {popup(hide)}
+        {popup&&popup(hide)}
       </ResponsivePresenter>
     </ThemeProvider>,
     getPopupContainer()

packages/editor/src/extensions/key-map/key-map.ts

@@ -17,11 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Editor, Extension } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
 import { isInTable } from "@tiptap/pm/tables";
 import { LIST_ITEM_NODE_TYPES, LIST_NODE_TYPES } from "../../utils/node-types";
 import { isListActive } from "../../utils/prosemirror";
 import { CodeBlock } from "../code-block";
+import { ShowBlockNodesComponent } from "../../toolbar/popups/blocknodes-popup";
+import { Editor } from "../../types";
+import { getAllTools } from "../../toolbar";
+import { ToolId } from "../../toolbar/tools";
+import { MenuItem } from "../../components/menu/types";
 
 export const KeyMap = Extension.create({
   name: "key-map",
@@ -43,10 +48,77 @@ export const KeyMap = Extension.create({
         return true;
       },
       Backspace: ({ editor }) => {
-        return joinUpWithLastListItem(editor);
+        return joinUpWithLastListItem(editor as Editor);
       },
+      "/": ({ editor }) => {
+        const { state } = editor as Editor;
+        const { $from } = state.selection;
+        const before = $from.nodeBefore?.textContent;
+
+        if (before) return false;
+
+        const selectedElement = editor.view.domAtPos($from.pos)
+          .node as HTMLElement;
+
+        const menuItems: MenuItem[] = [];
+        const defaultTools = Object.keys(getAllTools()).splice(1, 6);
+        for (const key of defaultTools) {
+          const blocknode = getAllTools()[key as ToolId];
+          menuItems.push({
+            key: blocknode.icon,
+            type: "button",
+            title: blocknode.title,
+            icon: blocknode.icon,
+            onClick() {
+              console.log("clicked");
+              /* 
+              How to apply on click methods
+              editor.current?.chain().focus()....
+              //.toggleOutlineList().run();//
+              */
+            }
+          });
+        }
+        ShowBlockNodesComponent({
+          editor: editor as Editor,
+          selectedElement: selectedElement,
+          items: menuItems
+        });
+
+        (editor as Editor).current?.commands.focus();
+
+        (editor as Editor).current?.on("update", ({ editor }) => {
+          const menuItems: MenuItem[] = [];
+          const { state } = editor as Editor;
+          const { $from } = state.selection;
+          const before = $from.nodeBefore?.textContent;
+
+          let keys = Object.keys(getAllTools()).filter(
+            (string) => string.indexOf(before as string) > -1
+          );
+          console.log("keys", keys);
+          if (!before && keys.length === 0) keys = defaultTools;
+          for (const key of keys.slice(0, 6)) {
+            const blocknode = getAllTools()[key as ToolId];
+            console.log(blocknode);
+            menuItems.push({
+              key: blocknode.icon,
+              icon: blocknode.icon,
+              type: "button",
+              title: blocknode.title
+            });
+          }
+          ShowBlockNodesComponent({
+            editor: editor as Editor,
+            selectedElement: selectedElement,
+            items: menuItems
+          });
+          (editor as Editor).current?.commands.focus();
+        });
+        return true;
+      }
     };
-  },
+  }
 });
 
 /**

packages/editor/src/toolbar/popups/blocknodes-popup.tsx

@@ -0,0 +1,62 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { useToolbarStore } from "../stores/toolbar-store";
+import { showPopup } from "../../components/popup-presenter";
+import { Editor } from "../../types";
+import { MenuItem } from "../../components/menu/types";
+import { getToolbarElement } from "../utils/dom";
+
+export const ShowBlockNodesComponent = (props: {
+  editor: Editor;
+  selectedElement: HTMLElement;
+  items: MenuItem[];
+}) => {
+  const { editor, selectedElement, items } = props;
+  //const items = toMenuItems(editor);
+  const toolbarLocation = useToolbarStore.getState().toolbarLocation;
+  const isMobile = useToolbarStore.getState().isMobile;
+  const isBottom = toolbarLocation === "bottom";
+  const xOffset = isBottom ? 0 : -selectedElement.offsetWidth / 2 + 75;
+
+  showPopup({
+    items: items,
+    position: {
+      target: isBottom ? getToolbarElement() : selectedElement,
+      isTargetAbsolute: true,
+      location: isBottom ? "top" : "below",
+      align: "center",
+      yOffset: 0,
+      xOffset: xOffset
+    },
+    blocking: !isMobile,
+    focusOnRender: !isMobile,
+    sx: {
+      minWidth: 150,
+      maxWidth: isBottom ? "95vw" : "auto",
+      flexDirection: isBottom ? "row" : "column",
+      overflowX: isBottom ? "auto" : "hidden",
+      marginRight: isBottom ? "10px" : 0,
+      display: "flex",
+      alignItems: isBottom ? "center" : "unset"
+    },
+    onClose: () => {
+      editor.current?.off("update");
+    }
+  });
+};