Separate "Inline-code" and "code-block" in two commands

jot-it · Jan 13, 2024 · 0d8f96b · 0d8f96b
1 parent 31749d7
commit 0d8f96b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/apps/front-end/src/components/Icons.tsx b/apps/front-end/src/components/Icons.tsx
@@ -27,6 +27,8 @@ import {
 } from "react-icons/io5";
 import { BsTextParagraph as ParagraphIcon } from "react-icons/bs";
 import { MdOutlineClose as CloseIcon } from "react-icons/md";
+import { TbCodeDots as InlineCodeIcon } from "react-icons/tb";
+import { PiCodeBlock as CodeBlockIcon } from "react-icons/pi";
 
 export {
   BoldIcon,
@@ -50,4 +52,6 @@ export {
   ImageOutlineIcon,
   CheckIcon,
   TextIcon,
+  InlineCodeIcon,
+  CodeBlockIcon,
 };
diff --git a/apps/front-end/src/plugins/CommandPickerPlugin/index.tsx b/apps/front-end/src/plugins/CommandPickerPlugin/index.tsx
@@ -8,6 +8,7 @@ import {
   StrikethroughIcon,
   UnderlineIcon,
   TextIcon,
+  InlineCodeIcon,
 } from "@/components/Icons";
 import {
   INSERT_ORDERED_LIST_COMMAND,
@@ -36,6 +37,7 @@ import {
   CLEAR_FORMAT_TEXT_COMMAND,
   FORMAT_PARAGRAPH_COMMAND,
   INSERT_BLOCKQUOTE_COMMAND,
+  INSERT_CODE_NODE_COMMAND,
   INSERT_HEADING_COMMAND,
   REMOVE_CARET_COMMAND,
   useBlockQuoteCommand,
@@ -197,10 +199,18 @@ export default function ComponentPickerMenuPlugin({
 
       <CommandPickerItem
         onSelect={() => dispatch(FORMAT_TEXT_COMMAND, "code")}
-        keywords="code codeblock javascript python js"
+        keywords="code inline inlinecode "
+        icon={<InlineCodeIcon />}
+        label="Inline Code"
+      />
+
+      <CommandPickerItem
+        onSelect={() => dispatch(INSERT_CODE_NODE_COMMAND, undefined)}
+        keywords="code block codeblock javascript python js"
         icon={<CodeIcon />}
-        label="Code"
+        label="Code Block"
       />
+
       <CommandPickerItem
         onSelect={() => dispatch(INSERT_BLOCKQUOTE_COMMAND, undefined)}
         keywords="quote block blockquote"