insert Image via url

example/src/App.tsx

@@ -110,5 +110,21 @@ const blockInitalValue2 = [
       },
     },
   },
+  {
+    block: {
+      _id: '5',
+      type: 'image',
+      properties: {
+        document: [
+          {
+            text: '',
+            properties: [
+              'https://repository-images.githubusercontent.com/125159715/61f2ee00-865a-11e9-8ce5-f7028c561633',
+            ],
+          },
+        ],
+      },
+    },
+  },
 ];
 export default App;

src/Editor.tsx

@@ -12,6 +12,8 @@ import { withLinks } from './Helpers/LinkHelper';
 import Element from './plugins/Element';
 import Leaf from './plugins/Leaf';
 import withBlockID from './plugins/withBlockID';
+import withImages from './plugins/withImages';
+import withBreak from './plugins/withBreak';
 import serialize from './serialize/index';
 import deserialize from './deserialize/index';
 import { ADD, UPDATE, DELETE } from './constant/operations';
@@ -40,7 +42,7 @@ const Editor: (props: Props) => any = ({
   isHoveringToolBar = false,
 }) => {
   const [editorData, setData] = useState(EMPTY_NODE);
-  const withPlugins = [withReact, withHistory, withLinks, withBlockID] as const;
+  const withPlugins = [withReact, withHistory, withLinks, withBlockID, withImages, withBreak] as const;
   const editor: any = useMemo(() => pipe(createEditor(), ...withPlugins), []);
   const renderElement = useCallback((props) => <Element {...props} />, []);
   const renderLeaf = useCallback((props) => <Leaf {...props} placeholderStyles={placeholderStyles} />, []);

src/Helpers/ImageHelper.tsx

@@ -0,0 +1,33 @@
+import React, { FC, SVGProps } from 'react';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlate } from 'slate-react';
+
+import { Button, Icon } from './Helper';
+
+export const insertImage = (editor: ReactEditor, url: string) => {
+  const text = { text: '' };
+  const image = { type: 'image', url, children: [text] };
+  Transforms.insertNodes(editor, image);
+};
+
+interface InsertImageButtonProps {
+  icon: FC<SVGProps<SVGSVGElement>>;
+  iconColor?: string;
+}
+export const InsertImageButton: (props: InsertImageButtonProps) => JSX.Element = ({ icon, iconColor = '#ffffff' }) => {
+  const editor = useSlate();
+  return (
+    <Button
+      onMouseDown={(event) => {
+        event.preventDefault();
+        const url = window.prompt('Enter the URL of the image:');
+        if (!url) return;
+        insertImage(editor, url);
+      }}
+    >
+      <Icon reversed active={false} svg={icon} color={iconColor}>
+        image
+      </Icon>
+    </Button>
+  );
+};

src/ToolBar/ToolBar.tsx

@@ -7,6 +7,7 @@ import { BlockButton } from '../Helpers/BlockHelper';
 import { MarkButton } from '../Helpers/MarkHelper';
 import { LinkButton, insertLink } from '../Helpers/LinkHelper';
 import { Menu, Portal, LinkInput } from '../Helpers/Helper';
+import { InsertImageButton } from '../Helpers/ImageHelper';
 
 // icons
 import { ReactComponent as Bold } from '../assets/bold.svg';
@@ -18,6 +19,7 @@ import { ReactComponent as Underline } from '../assets/underline.svg';
 import { ReactComponent as H1 } from '../assets/h1.svg';
 import { ReactComponent as H2 } from '../assets/h2.svg';
 import { ReactComponent as CLEAR_FORMAT } from '../assets/clear_format.svg';
+import { ReactComponent as Image } from '../assets/image.svg';
 
 const ICON_COLOR = '#b5b9c6';
 export const FixedMenu: any = React.forwardRef(({ ...props }, ref: React.Ref<HTMLDivElement>) => (
@@ -113,6 +115,7 @@ export const ToolBar: React.FC<ToolBarProps> = () => {
         <MarkButton format="italic" icon={Italic} iconColor={ICON_COLOR} />
         <MarkButton format="underlined" icon={Underline} iconColor={ICON_COLOR} />
         <LinkButton showInput={LinkButtonClick} icon={Link} iconColor={ICON_COLOR} />
+        <InsertImageButton icon={Image} iconColor={ICON_COLOR} />
         <BlockButton format="heading-one" icon={H1} iconColor={ICON_COLOR} />
         <BlockButton format="heading-two" icon={H2} iconColor={ICON_COLOR} />
         <BlockButton format="block-quote" icon={Quote} iconColor={ICON_COLOR} />

src/deserialize/index.ts

@@ -56,6 +56,10 @@ const deserialization = (blockContentList: any) => {
     const { block } = blockContent;
     const children = getChildNodes(block);
     const type = getNodeType(block.type);
+    if (type === 'image' && block.properties) {
+      return { id: block._id, type, children, url: block.properties.document[0].properties };
+    }
+
     return { id: block._id, type, children };
   });
   return deserializedContent;

src/plugins/Element.tsx

@@ -10,6 +10,7 @@ import {
   Rectangle,
   Heading1,
   Heading2,
+  Image,
 } from './ElementStyle';
 import getShortLink from '../utils/getShortLink';
 
@@ -41,6 +42,15 @@ const Element: React.FC<RenderElementProps> = ({ attributes, children, element }
           </LinkContainer>
         </Link>
       );
+    case `image`:
+      return (
+        <div {...attributes}>
+          <div contentEditable={false}>
+            <Image src={element.url} />
+          </div>
+          {children}
+        </div>
+      );
     default:
       return <p {...attributes}>{children}</p>;
   }

src/plugins/ElementStyle.ts

@@ -79,3 +79,9 @@ export const Heading1 = styled.h1`
 export const Heading2 = styled.h2`
   color: ${({ theme }) => (theme.colors !== undefined ? theme.colors.text : '#050b21')};
 `;
+export const Image = styled.img`
+  display: block;
+  max-width: 100%;
+  max-height: 20em;
+  padding: 4px 0px 0px 20px;
+`;

src/plugins/withBreak.tsx

@@ -0,0 +1,18 @@
+import { Transforms } from 'slate';
+
+const withBreak = (editor: any) => {
+  const localEditor = editor;
+  localEditor.insertBreak = () => {
+    const newLine = {
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+      ],
+    };
+    Transforms.insertNodes(editor, newLine);
+  };
+  return localEditor;
+};
+export default withBreak;

src/plugins/withImages.tsx

@@ -0,0 +1,11 @@
+import { ReactEditor } from 'slate-react';
+
+const withImages = (editor: ReactEditor) => {
+  const { isVoid } = editor;
+  const localEditor = editor;
+  localEditor.isVoid = (element) => {
+    return element.type === 'image' ? true : isVoid(element);
+  };
+  return localEditor;
+};
+export default withImages;

src/serialize/index.tsx

@@ -38,7 +38,12 @@ const checkIdAndReturnBlock = (type: string, document: any, node: any) => {
 const serializeParagraph = (paragraphNode: any, textType: string) => {
   const document = paragraphNode.children.map((childNodes: any) => {
     const text = getParagraphText(childNodes);
-    const properties = getParagraphProperties(childNodes);
+    let properties = [];
+    if (textType === 'image') {
+      properties.push(paragraphNode.url);
+    } else {
+      properties = getParagraphProperties(childNodes);
+    }
     return { text, properties };
   });
   const paragraphBlock = checkIdAndReturnBlock(textType, document, paragraphNode);
@@ -64,6 +69,8 @@ const serialize = (slateNodesList: any) => {
       case 'heading-one':
       case 'heading-two':
         return serializeHeading(node, node.type);
+      case 'image':
+        return serializeParagraph(node, 'image');
       default:
         return serializeParagraph(node, 'text');
     }