UPDATE: add feature to mdx editor

Author: anisharaz

apps/web/components/MdxEditor.tsx

@@ -9,7 +9,7 @@ const Mdxeditor = dynamic(
 function MdxeditorComponent() {
   return (
     <div className="">
-      <Mdxeditor markdown="" className="prose max-w-none bg-slate-200" />
+      <Mdxeditor markdown="" className="prose max-w-none" />
     </div>
   );
 }

packages/ui/src/components/MdxEditor/InitializedMDXEditor.tsx

@@ -1,13 +1,21 @@
 import type { ForwardedRef } from "react";
 import {
   headingsPlugin,
+  ListsToggle,
   listsPlugin,
   quotePlugin,
   thematicBreakPlugin,
   markdownShortcutPlugin,
   MDXEditor,
+  toolbarPlugin,
   type MDXEditorMethods,
   type MDXEditorProps,
+  UndoRedo,
+  BoldItalicUnderlineToggles,
+  BlockTypeSelect,
+  directivesPlugin,
+  AdmonitionDirectiveDescriptor,
+  InsertAdmonition,
 } from "@mdxeditor/editor";
 
 // Only import this to the next file
@@ -18,11 +26,28 @@ export default function InitializedMDXEditor({
   return (
     <MDXEditor
       plugins={[
+        directivesPlugin({
+          directiveDescriptors: [AdmonitionDirectiveDescriptor],
+        }),
         headingsPlugin(),
         listsPlugin(),
         quotePlugin(),
         thematicBreakPlugin(),
         markdownShortcutPlugin(),
+        toolbarPlugin({
+          toolbarContents() {
+            return (
+              <>
+                {" "}
+                <UndoRedo />
+                <BoldItalicUnderlineToggles />
+                <BlockTypeSelect />
+                <InsertAdmonition />
+                <ListsToggle />
+              </>
+            );
+          },
+        }),
       ]}
       {...props}
       ref={editorRef}