Merge pull request #39 from FAIMS/support-for-images-in-RichText

Image support in MDXEditor
FAIMS · Dec 19, 2023 · f5c1fdc · f5c1fdc
2 parents e622ade + 5807a74
commit f5c1fdc
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lexical/react": "^0.12.4",
-    "@mdxeditor/editor": "^1.13.0",
+    "@mdxeditor/editor": "^1.13.5",
     "@mui/icons-material": "^5.14.3",
     "@mui/lab": "^5.0.0-alpha.137",
     "@mui/material": "^5.14.2",

diff --git a/src/App.css b/src/App.css
@@ -10,4 +10,43 @@
 
 .mdxEditor {
   font-family: 'Open Sans', sans-serif;
+}
+
+.image-dialog>div:first-child[aria-hidden="true"] {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.image-dialog>div:nth-child(2) {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+
+.image-dialog>div:nth-child(2)>form {
+  font-family: 'Open Sans', sans-serif !important;
+}
+
+.image-dialog>div:nth-child(2)>form>div:first-child>label {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: #263238;
+}
+
+.image-dialog>div:nth-child(2)>form>div:nth-child(5)>button {
+  cursor: pointer;
+  user-select: none;
+  color: #669911;
+  font-family: 'Open Sans',sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 4px;
+}
+
+.image-dialog>div:nth-child(2)>form>div:nth-child(5)>button:hover {
+  background-color: rgba(102, 153, 17, 0.04);
 }
diff --git a/src/components/mdx-editor.tsx b/src/components/mdx-editor.tsx
@@ -29,6 +29,7 @@ import { markdownShortcutPlugin } from '@mdxeditor/editor/plugins/markdown-short
 import { tablePlugin } from '@mdxeditor/editor/plugins/table';
 import { diffSourcePlugin } from '@mdxeditor/editor/plugins/diff-source';
 import { linkPlugin } from '@mdxeditor/editor/plugins/link';
+import { imagePlugin } from '@mdxeditor/editor/plugins/image';
 
 // importing the desired toolbar toggle components
 import { UndoRedo } from '@mdxeditor/editor/plugins/toolbar/components/UndoRedo';
@@ -37,6 +38,7 @@ import { BlockTypeSelect } from '@mdxeditor/editor/plugins/toolbar/components/Bl
 import { ListsToggle } from '@mdxeditor/editor/plugins/toolbar/components/ListsToggle';
 import { InsertTable } from '@mdxeditor/editor/plugins/toolbar/components/InsertTable';
 import { DiffSourceToggleWrapper } from '@mdxeditor/editor/plugins/toolbar/components/DiffSourceToggleWrapper';
+import { InsertImage } from '@mdxeditor/editor/plugins/toolbar/components/InsertImage';
 
 
 type Props = {
@@ -72,6 +74,17 @@ export const MdxEditor = ({ initialMarkdown, editorRef, handleChange }: Props) =
         }
     });
 
+    const imageUploadHandler = (image: File): Promise<string> => {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(reader.result as string)
+            }
+            reader.readAsDataURL(image);
+        })
+    }
+
+
     return (
         <Suspense fallback={<div>Loading...</div>}>
             {errorMessage &&
@@ -81,6 +94,7 @@ export const MdxEditor = ({ initialMarkdown, editorRef, handleChange }: Props) =
             }
             <Card variant="outlined">
                 <MDXEditor
+                    className="image-dialog"
                     placeholder="Start typing..."
                     markdown={initialMarkdown}
                     plugins={[
@@ -92,6 +106,7 @@ export const MdxEditor = ({ initialMarkdown, editorRef, handleChange }: Props) =
                         tablePlugin(),
                         diffSourcePlugin({ diffMarkdown: initialMarkdown }),
                         linkPlugin(),
+                        imagePlugin({ imageUploadHandler }),
                         toolbarPlugin({
                             toolbarContents: () => (
                                 <DiffSourceToggleWrapper>
@@ -104,6 +119,8 @@ export const MdxEditor = ({ initialMarkdown, editorRef, handleChange }: Props) =
                                     <ListsToggle />
                                     <Separator />
                                     <InsertTable />
+                                    <Separator />
+                                    <InsertImage />
                                 </DiffSourceToggleWrapper>
                             )
                         }),