Updates

components/lib/mdx/markdown/MarkdownEditor.tsx

@@ -14,6 +14,7 @@ type Props = {
     changeHandler?: (content: string) => void;
     editorProps?: ComponentProps<typeof AceEditor>;
     maxHeight?: string;
+    noToggleButtons?: boolean;
 };
 
 export default function MarkdownEditor({
@@ -23,6 +24,7 @@ export default function MarkdownEditor({
     changeHandler,
     editorProps,
     maxHeight: existingMaxHeight,
+    noToggleButtons,
 }: Props) {
     const [value, setValue] = React.useState<any>(existingValue || ``);
 
@@ -40,9 +42,11 @@ export default function MarkdownEditor({
 
     return (
         <Stack className="w-full items-stretch">
-            <MarkdownEditorSelectorButtons
-                {...{ preview, setPreview, setSideBySide, sideBySide }}
-            />
+            {!noToggleButtons && (
+                <MarkdownEditorSelectorButtons
+                    {...{ preview, setPreview, setSideBySide, sideBySide }}
+                />
+            )}
 
             {sideBySide ? (
                 <Row
@@ -58,7 +62,6 @@ export default function MarkdownEditor({
                         {...editorProps}
                     />
                     <MarkdownEditorPreviewComponent
-                        setValue={setValue}
                         value={value}
                         maxHeight={maxHeight}
                     />
@@ -69,7 +72,6 @@ export default function MarkdownEditor({
                 >
                     {preview ? (
                         <MarkdownEditorPreviewComponent
-                            setValue={setValue}
                             value={value}
                             maxHeight={maxHeight}
                         />

components/lib/mdx/markdown/MarkdownEditorPreviewComponent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ComponentProps, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 import { serialize } from "next-mdx-remote/serialize";
 import remarkGfm from "remark-gfm";
@@ -10,14 +10,14 @@ import EmptyContent from "../../elements/EmptyContent";
 
 type Props = {
     value: string;
-    setValue: React.Dispatch<any>;
     maxHeight: string;
+    wrapperProps?: ComponentProps<typeof Border>;
 };
 
 export default function MarkdownEditorPreviewComponent({
     value,
-    setValue,
     maxHeight,
+    wrapperProps,
 }: Props) {
     try {
         const [mdxSource, setMdxSource] =
@@ -56,9 +56,11 @@ export default function MarkdownEditorPreviewComponent({
 
         return (
             <Border
+                {...wrapperProps}
                 className={twMerge(
                     `w-full max-h-[${maxHeight}] h-[${maxHeight}] block px-6 pb-10`,
-                    "overflow-auto"
+                    "overflow-auto",
+                    wrapperProps?.className
                 )}
             >
                 {mdxSource ? (