fix: add div wrapper to allow image alignment

src/components/Element.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { RenderElementProps } from "slate-react"
+import { RenderElementProps, useSelected, useFocused } from "slate-react"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography, { TypographyProps } from "@material-ui/core/Typography"
 import Divider from "@material-ui/core/Divider"
@@ -8,14 +8,22 @@ import { types } from "../constants/types"
 type StyleProps = {
   lineSpacing: string | unknown
   align: string | unknown
+  selected: boolean
+  focused: boolean
 }
 
 const useStyles = makeStyles(() => ({
   lineSpacing: (props: StyleProps) => ({
     lineHeight: props.lineSpacing,
   }),
   image: (props: StyleProps) => ({
+    maxWidth: "100%",
+    maxHeight: "100%",
+    boxShadow: props.selected && props.focused ? "0 0 0 3px #B4D5FF" : "none",
+  }),
+  imageContainer: (props: StyleProps) => ({
     textAlign: props.align,
+    display: "block",
   }),
 }))
 
@@ -52,9 +60,13 @@ const Element = ({ attributes, children, element }: Props) => {
     width,
     height,
   } = element
+  const selected = useSelected()
+  const focused = useFocused()
   const styleProps = {
     lineSpacing: lineSpacing ? lineSpacing : "normal",
     align,
+    selected,
+    focused,
   }
   const classes = useStyles(styleProps)
 
@@ -96,14 +108,18 @@ const Element = ({ attributes, children, element }: Props) => {
       )
     case types.image:
       return (
-        <img
-          src={url}
-          alt={description}
-          height={height}
-          width={width}
-          className={classes.image}
-          {...attributes}
-        />
+        <div className={classes.imageContainer} {...attributes}>
+          <div contentEditable={false}>
+            <img
+              src={url}
+              alt={description}
+              height={height || "100%"}
+              width={width || "100%"}
+              className={classes.image}
+            />
+          </div>
+          {children}
+        </div>
       )
     default:
       return (