Support image

Author: ngs

src/components/Image/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Entity } from 'draft-js';
+
+const Image = ({ entityKey, children }) => {
+  const { src, alt, title } = Entity.get(entityKey).getData();
+  return (
+    <span>
+      {children}
+      <img src={src} alt={alt} title={title} />
+    </span>
+  );
+};
+
+export default Image;

src/decorators/link/components/Link/index.js renamed to src/components/Link/index.js

@@ -0,0 +1,16 @@
+import { Entity } from 'draft-js';
+
+const createImageStrategy = () => {
+  const findImageEntities = (contentBlock, callback) => {
+    contentBlock.findEntityRanges((character) => {
+      const entityKey = character.getEntity();
+      return (
+        entityKey !== null &&
+        Entity.get(entityKey).getType() === 'IMG'
+      );
+    }, callback);
+  };
+  return findImageEntities;
+};
+
+export default createImageStrategy;

src/decorators/image/imageStrategy.js

@@ -0,0 +1,9 @@
+import createImageStrategy from './imageStrategy';
+import Image from '../../components/Image';
+
+const createImageDecorator = (config, store) => ({
+  strategy: createImageStrategy(config, store),
+  component: Image,
+});
+
+export default createImageDecorator;

src/decorators/image/index.js

@@ -1,5 +1,5 @@
 import createLinkStrategy from './linkStrategy';
-import Link from './components/Link';
+import Link from '../../components/Link';
 
 const createLinkDecorator = (config, store) => ({
   strategy: createLinkStrategy(config, store),

src/decorators/link/index.js

@@ -8,13 +8,18 @@ import handleInlineStyle from './modifiers/handleInlineStyle';
 import handleNewCodeBlock from './modifiers/handleNewCodeBlock';
 import insertEmptyBlock from './modifiers/insertEmptyBlock';
 import handleLink from './modifiers/handleLink';
+import handleImage from './modifiers/handleImage';
 import createLinkDecorator from './decorators/link';
+import createImageDecorator from './decorators/image';
 
 const createMarkdownShortcutsPlugin = (config = {}) => {
   const store = {};
   return {
     blockRenderMap,
-    decorators: [createLinkDecorator(config, store)],
+    decorators: [
+      createLinkDecorator(config, store),
+      createImageDecorator(config, store)
+    ],
     initialize({ setEditorState, getEditorState }) {
       store.setEditorState = setEditorState;
       store.getEditorState = getEditorState;
@@ -67,11 +72,14 @@ const createMarkdownShortcutsPlugin = (config = {}) => {
       const editorState = getEditorState();
       let newEditorState = handleBlockType(editorState, character);
       if (editorState === newEditorState) {
-        newEditorState = handleInlineStyle(editorState, character);
+        newEditorState = handleImage(editorState, character);
       }
       if (editorState === newEditorState) {
         newEditorState = handleLink(editorState, character);
       }
+      if (editorState === newEditorState) {
+        newEditorState = handleInlineStyle(editorState, character);
+      }
       if (editorState !== newEditorState) {
         setEditorState(newEditorState);
         return 'handled';

src/index.js

@@ -0,0 +1,19 @@
+import insertImage from './insertImage';
+
+const handleImage = (editorState, character) => {
+  const re = /!\[([^\]]*)]\(([^)"]+)(?: "([^"]+)")?\)/g;
+  const key = editorState.getSelection().getStartKey();
+  const text = editorState.getCurrentContent().getBlockForKey(key).getText();
+  const line = `${text}${character}`;
+  let newEditorState = editorState;
+  let matchArr;
+  do {
+    matchArr = re.exec(line);
+    if (matchArr) {
+      newEditorState = insertImage(newEditorState, matchArr);
+    }
+  } while (matchArr);
+  return newEditorState;
+};
+
+export default handleImage;

src/modifiers/handleImage.js

@@ -0,0 +1,45 @@
+import { EditorState, RichUtils, SelectionState, Entity, Modifier } from 'draft-js';
+
+
+const insertLink = (editorState, matchArr) => {
+  const currentContent = editorState.getCurrentContent();
+  const selection = editorState.getSelection();
+  const key = selection.getStartKey();
+  const [
+    matchText,
+    alt,
+    src,
+    title
+  ] = matchArr;
+  const { index } = matchArr;
+  const focusOffset = index + matchText.length;
+  const wordSelection = SelectionState.createEmpty(key).merge({
+    anchorOffset: index,
+    focusOffset
+  });
+  const entityKey = Entity.create(
+    'IMG',
+    'IMMUTABLE',
+    { alt, src, title }
+  );
+  let newContentState = Modifier.replaceText(
+    currentContent,
+    wordSelection,
+    '\u200B',
+    null,
+    entityKey
+  );
+  newContentState = Modifier.insertText(
+    newContentState,
+    newContentState.getSelectionAfter(),
+    ' '
+  );
+  const newWordSelection = wordSelection.merge({
+    focusOffset: index + 1
+  });
+  let newEditorState = EditorState.push(editorState, newContentState, 'insert-image');
+  newEditorState = RichUtils.toggleLink(newEditorState, newWordSelection, entityKey);
+  return EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
+};
+
+export default insertLink;