Done with Ask a question form but there is a problem with responsivne…

…ss on smaller devices

components/editor/dark-editor.css

@@ -0,0 +1,54 @@
+@import url("@radix-ui/colors/tomato-dark.css");
+@import url("@radix-ui/colors/mauve-dark.css");
+
+.dark .dark-editor {
+  --accentBase: var(--tomato-1);
+  --accentBgSubtle: var(--tomato-2);
+  --accentBg: var(--tomato-3);
+  --accentBgHover: var(--tomato-4);
+  --accentBgActive: var(--tomato-5);
+  --accentLine: var(--tomato-6);
+  --accentBorder: var(--tomato-7);
+  --accentBorderHover: var(--tomato-8);
+  --accentSolid: var(--tomato-9);
+  --accentSolidHover: var(--tomato-10);
+  --accentText: var(--tomato-11);
+  --accentTextContrast: var(--tomato-12);
+
+  --baseBase: var(--mauve-1);
+  --baseBgSubtle: var(--mauve-2);
+  --baseBg: var(--mauve-3);
+  --baseBgHover: var(--mauve-4);
+  --baseBgActive: var(--mauve-5);
+  --baseLine: var(--mauve-6);
+  --baseBorder: var(--mauve-7);
+  --baseBorderHover: var(--mauve-8);
+  --baseSolid: var(--mauve-9);
+  --baseSolidHover: var(--mauve-10);
+  --baseText: var(--mauve-11);
+  --baseTextContrast: var(--mauve-12);
+
+  --admonitionTipBg: var(--cyan4);
+  --admonitionTipBorder: var(--cyan8);
+
+  --admonitionInfoBg: var(--grass4);
+  --admonitionInfoBorder: var(--grass8);
+
+  --admonitionCautionBg: var(--amber4);
+  --admonitionCautionBorder: var(--amber8);
+
+  --admonitionDangerBg: var(--red4);
+  --admonitionDangerBorder: var(--red8);
+
+  --admonitionNoteBg: var(--mauve-4);
+  --admonitionNoteBorder: var(--mauve-8);
+
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  color: var(--baseText);
+  --basePageBg: black;
+  background: var(--basePageBg);
+}

components/editor/index.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  markdownShortcutPlugin,
+  MDXEditor,
+  type MDXEditorMethods,
+  ConditionalContents,
+  ChangeCodeMirrorLanguage,
+  toolbarPlugin,
+  UndoRedo,
+  Separator,
+  BoldItalicUnderlineToggles,
+  ListsToggle,
+  CreateLink,
+  InsertImage,
+  InsertTable,
+  InsertThematicBreak,
+  InsertCodeBlock,
+  linkPlugin,
+  linkDialogPlugin,
+  tablePlugin,
+  imagePlugin,
+  codeBlockPlugin,
+  codeMirrorPlugin,
+  diffSourcePlugin,
+} from "@mdxeditor/editor";
+import { basicDark } from "cm6-theme-basic-dark";
+import { useTheme } from "next-themes";
+import type { ForwardedRef } from "react";
+
+import "@mdxeditor/editor/style.css";
+import "./dark-editor.css";
+
+interface Props {
+  value: string;
+  fieldChange: (value: string) => void;
+  editorRef: ForwardedRef<MDXEditorMethods> | null;
+}
+const Editor = ({ value, fieldChange, editorRef, ...props }: Props) => {
+  const { resolvedTheme } = useTheme();
+  const theme = resolvedTheme === "dark" ? [basicDark] : [];
+
+  return (
+    <MDXEditor
+      key={resolvedTheme}
+      className="background-light800_dark200 light-border-2  mardown-editor dark-editor w-full border"
+      markdown={value}
+      ref={editorRef}
+      onChange={fieldChange}
+      plugins={[
+        headingsPlugin(),
+        listsPlugin(),
+        linkPlugin(),
+        linkDialogPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        markdownShortcutPlugin(),
+        tablePlugin(),
+        imagePlugin(),
+        codeBlockPlugin({ defaultCodeBlockLanguage: "" }),
+        codeMirrorPlugin({
+          codeBlockLanguages: {
+            css: "css",
+            txt: "txt",
+            sql: "sql",
+            html: "html",
+            saas: "saas",
+            scss: "scss",
+            bash: "bash",
+            json: "json",
+            js: "javascript",
+            ts: "typescript",
+            "": "unspecified",
+            tsx: "TypeScript (React)",
+            jsx: "JavaScript (React)",
+          },
+          autoLoadLanguageSupport: true,
+          codeMirrorExtensions: theme,
+        }),
+        diffSourcePlugin({ viewMode: "rich-text", diffMarkdown: "" }),
+        toolbarPlugin({
+          toolbarContents: () => (
+            <ConditionalContents
+              options={[
+                {
+                  when: (editor) => editor?.editorType === "codeblock",
+                  contents: () => <ChangeCodeMirrorLanguage />,
+                },
+                {
+                  fallback: () => (
+                    <>
+                      <UndoRedo />
+                      <Separator />
+
+                      <BoldItalicUnderlineToggles />
+                      <Separator />
+
+                      <ListsToggle />
+                      <Separator />
+
+                      <CreateLink />
+                      <InsertImage />
+                      <Separator />
+
+                      <InsertTable />
+                      <InsertThematicBreak />
+
+                      <InsertCodeBlock />
+                    </>
+                  ),
+                },
+              ]}
+            />
+          ),
+        }),
+      ]}
+      {...props}
+    />
+  );
+};
+
+export default Editor;

components/forms/QuestionForm.tsx

@@ -1,7 +1,8 @@
 "use client";
+import "@mdxeditor/editor/style.css";
 import { AskQuestionSchema } from "@/lib/validations";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useRef } from "react";
 import { useForm } from "react-hook-form";
 import {
   Form,
@@ -14,8 +15,15 @@ import {
 } from "../ui/form";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
+import { MDXEditorMethods } from "@mdxeditor/editor";
+import dynamic from "next/dynamic";
+
+const Editor = dynamic(() => import("@/components/editor/index"), {
+  ssr: false,
+});
 
 const QuestionForm = () => {
+  const editorRef = useRef<MDXEditorMethods>(null);
   const form = useForm({
     resolver: zodResolver(AskQuestionSchema),
     defaultValues: {
@@ -42,12 +50,12 @@ const QuestionForm = () => {
               </FormLabel>
               <FormControl>
                 <Input
+                  className="paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px] border"
                   {...field}
-                  className="paragraph-regular background-700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px]  border"
                 />
               </FormControl>
-              <FormDescription className="body-regular text-light-500 mt-2.5">
-                Be specific and imaginf your asking a question to another
+              <FormDescription className="body-regular mt-2.5 text-light-500">
+                Be specific and imagine you&apos;re asking a question to another
                 person.
               </FormDescription>
               <FormMessage />
@@ -60,12 +68,18 @@ const QuestionForm = () => {
           render={({ field }) => (
             <FormItem className="flex w-full flex-col">
               <FormLabel className="paragraph-semibold text-dark400_light800">
-                Detailed Explaination of your problem{" "}
+                Detailed explanation of your problem{" "}
                 <span className="text-primary-500">*</span>
               </FormLabel>
-              <FormControl>Editor</FormControl>
-              <FormDescription className="body-regular text-light-500 mt-2.5">
-                Introduce the problem and expand on what you have put in the
+              <FormControl>
+                <Editor
+                  value={field.value}
+                  editorRef={editorRef}
+                  fieldChange={field.onChange}
+                />
+              </FormControl>
+              <FormDescription className="body-regular mt-2.5 text-light-500">
+                Introduce the problem and expand on what you&apos;ve put in the
                 title.
               </FormDescription>
               <FormMessage />
@@ -83,16 +97,16 @@ const QuestionForm = () => {
               <FormControl>
                 <div>
                   <Input
-                    className="paragraph-regular background-700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px] border"
-                    placeholder="Add tags.."
+                    className="paragraph-regular background-light700_dark300 light-border-2 text-dark300_light700 no-focus min-h-[56px] border"
+                    placeholder="Add tags..."
                     {...field}
                   />
                   Tags
                 </div>
               </FormControl>
-              <FormDescription className="body-regular text-light-500 mt-2.5">
-                Add upto three tags describe what your question is about. Press
-                Enter to add a TAG
+              <FormDescription className="body-regular mt-2.5 text-light-500">
+                Add up to 3 tags to describe what your question is about. You
+                need to press enter to add a tag.
               </FormDescription>
               <FormMessage />
             </FormItem>
@@ -101,9 +115,9 @@ const QuestionForm = () => {
         <div className="mt-16 flex justify-end">
           <Button
             type="submit"
-            className="primary-gradient !text-light-900 w-fit"
+            className="primary-gradient w-fit !text-light-900"
           >
-            Ask a Question
+            Ask A Question
           </Button>
         </div>
       </form>