feat: use tailwindcss-typography as markdown styling

web/src/components/editor/slash-command.tsx

@@ -1,32 +1,18 @@
 import {
-  Brain,
   CheckSquare,
   Code,
   Heading1,
   Heading2,
   Heading3,
-  ImageIcon,
   List,
   ListOrdered,
-  MessageSquarePlus,
   Text,
   TextQuote,
-  Twitter,
-  Youtube,
 } from "lucide-react";
 import { Command, createSuggestionItems, renderItems } from "novel";
-import { uploadFn } from "./image-upload";
+// import { uploadFn } from "./image-upload";
 
 export const suggestionItems = createSuggestionItems([
-  {
-    title: "Send Feedback",
-    description: "Let us know how we can improve.",
-    icon: <MessageSquarePlus size={18} />,
-    command: ({ editor, range }) => {
-      editor.chain().focus().deleteRange(range).run();
-      window.open("/feedback", "_blank");
-    },
-  },
   {
     title: "Text",
     description: "Just start typing with plain text.",
@@ -132,83 +118,83 @@ export const suggestionItems = createSuggestionItems([
     command: ({ editor, range }) =>
       editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
   },
-  {
-    title: "Image",
-    description: "Upload an image from your computer.",
-    searchTerms: ["photo", "picture", "media"],
-    icon: <ImageIcon size={18} />,
-    command: ({ editor, range }) => {
-      editor.chain().focus().deleteRange(range).run();
-      // upload image
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = "image/*";
-      input.onchange = async () => {
-        if (input.files?.length) {
-          const file = input.files[0];
-          if (!file) return;
-          const pos = editor.view.state.selection.from;
-          uploadFn(file, editor.view, pos);
-        }
-      };
-      input.click();
-    },
-  },
-  {
-    title: "Youtube",
-    description: "Embed a Youtube video.",
-    searchTerms: ["video", "youtube", "embed"],
-    icon: <Youtube size={18} />,
-    command: ({ editor, range }) => {
-      const videoLink = prompt("Please enter Youtube Video Link");
-      //From https://regexr.com/3dj5t
-      const ytRegex = new RegExp(
-        /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/,
-      );
+  // {
+  //   title: "Image",
+  //   description: "Upload an image from your computer.",
+  //   searchTerms: ["photo", "picture", "media"],
+  //   icon: <ImageIcon size={18} />,
+  //   command: ({ editor, range }) => {
+  //     editor.chain().focus().deleteRange(range).run();
+  //     // upload image
+  //     const input = document.createElement("input");
+  //     input.type = "file";
+  //     input.accept = "image/*";
+  //     input.onchange = async () => {
+  //       if (input.files?.length) {
+  //         const file = input.files[0];
+  //         if (!file) return;
+  //         const pos = editor.view.state.selection.from;
+  //         uploadFn(file, editor.view, pos);
+  //       }
+  //     };
+  //     input.click();
+  //   },
+  // },
+  // {
+  //   title: "Youtube",
+  //   description: "Embed a Youtube video.",
+  //   searchTerms: ["video", "youtube", "embed"],
+  //   icon: <Youtube size={18} />,
+  //   command: ({ editor, range }) => {
+  //     const videoLink = prompt("Please enter Youtube Video Link");
+  //     //From https://regexr.com/3dj5t
+  //     const ytRegex = new RegExp(
+  //       /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/,
+  //     );
 
-      if (videoLink && ytRegex.test(videoLink)) {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .setYoutubeVideo({
-            src: videoLink,
-          })
-          .run();
-      } else {
-        if (videoLink !== null) {
-          alert("Please enter a correct Youtube Video Link");
-        }
-      }
-    },
-  },
-  {
-    title: "Twitter",
-    description: "Embed a Tweet.",
-    searchTerms: ["twitter", "embed"],
-    icon: <Twitter size={18} />,
-    command: ({ editor, range }) => {
-      const tweetLink = prompt("Please enter Twitter Link");
-      const tweetRegex = new RegExp(
-        /^https?:\/\/(www\.)?x\.com\/([a-zA-Z0-9_]{1,15})(\/status\/(\d+))?(\/\S*)?$/,
-      );
+  //     if (videoLink && ytRegex.test(videoLink)) {
+  //       editor
+  //         .chain()
+  //         .focus()
+  //         .deleteRange(range)
+  //         .setYoutubeVideo({
+  //           src: videoLink,
+  //         })
+  //         .run();
+  //     } else {
+  //       if (videoLink !== null) {
+  //         alert("Please enter a correct Youtube Video Link");
+  //       }
+  //     }
+  //   },
+  // },
+  // {
+  //   title: "Twitter",
+  //   description: "Embed a Tweet.",
+  //   searchTerms: ["twitter", "embed"],
+  //   icon: <Twitter size={18} />,
+  //   command: ({ editor, range }) => {
+  //     const tweetLink = prompt("Please enter Twitter Link");
+  //     const tweetRegex = new RegExp(
+  //       /^https?:\/\/(www\.)?x\.com\/([a-zA-Z0-9_]{1,15})(\/status\/(\d+))?(\/\S*)?$/,
+  //     );
 
-      if (tweetLink && tweetRegex.test(tweetLink)) {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .setTweet({
-            src: tweetLink,
-          })
-          .run();
-      } else {
-        if (tweetLink !== null) {
-          alert("Please enter a correct Twitter Link");
-        }
-      }
-    },
-  },
+  //     if (tweetLink && tweetRegex.test(tweetLink)) {
+  //       editor
+  //         .chain()
+  //         .focus()
+  //         .deleteRange(range)
+  //         .setTweet({
+  //           src: tweetLink,
+  //         })
+  //         .run();
+  //     } else {
+  //       if (tweetLink !== null) {
+  //         alert("Please enter a correct Twitter Link");
+  //       }
+  //     }
+  //   },
+  // },
 ]);
 
 export const slashCommand = Command.configure({