Merge pull request #22 from webkom/image-test

Increase compatibility for images

Author: LudvigHz

example/src/App.js

@@ -12,7 +12,7 @@ const App = () => (
     <Editor
       placeholder="Testing lego editor"
       imageUpload={file =>
-        new Promise(resolve => resolve(URL.createObjectURL(file)))
+        new Promise(resolve => resolve())
       }
     />
   </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webkom/lego-editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A React editor written in TS with slate.js for lego-webapp",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Toolbar.tsx

@@ -219,11 +219,11 @@ export default class Toolbar extends React.Component<
     this.setState({ insertingImage: true });
   }
 
-  insertImage(image: Blob): void {
+  insertImage(image: Blob, data?: Record<string, any>): void {
     const { editor } = this.props;
 
     this.setState({ insertingImage: false });
-    editor.command('insertImage', image);
+    editor.command('insertImage', image, data);
   }
 
   onClose(): void {

src/index.tsx

@@ -33,7 +33,7 @@ interface Props {
   onFocus?: () => void;
   autoFocus?: boolean;
   placeholder?: string;
-  imageUpload: (file: Blob) => Promise<string>;
+  imageUpload: (file: Blob) => Promise<Record<string, any>>;
   plugins: Plugin[];
 }
 

src/plugins/images.tsx

@@ -4,7 +4,7 @@ import { Editor } from 'slate';
 import { RenderBlockProps, Plugin } from 'slate-react';
 
 interface Options {
-  uploadFunction: (file: Blob) => Promise<string>;
+  uploadFunction: (file: Blob) => Promise<Record<string, any>>;
 }
 
 export default function images(options: Options): Plugin {
@@ -24,10 +24,13 @@ export default function images(options: Options): Plugin {
           );
         }
         case 'image': {
+          const src = node.data.has('src')
+            ? node.data.get('src')
+            : node.data.get('objectUrl');
           return (
             <ImageBlock
               editor={editor}
-              src={node.data.get('src')}
+              src={src}
               isFocused={isFocused}
               attributes={attributes}
               node={node}
@@ -46,12 +49,17 @@ export default function images(options: Options): Plugin {
       }
     },
     commands: {
-      insertImage(editor: Editor, file: Blob) {
+      insertImage(editor: Editor, file: Blob, data?: Record<string, any>) {
         /*
-         *  Inserts the ImageBlock, and runs the provided callback.
+         *  Inserts the ImageBlock, and runs the provided callback. We create a objectUrl to use if
+         *  the uploadFunction does not immediatly return a src.
          */
-        uploadFunction(file).then((src: string) =>
-          editor.insertBlock({ data: { src }, type: 'image' })
+        const objectUrl = URL.createObjectURL(file);
+        uploadFunction(file).then((returnData: Record<string, any>) =>
+          editor.insertBlock({
+            data: { ...returnData, ...data, objectUrl },
+            type: 'image'
+          })
         );
         return editor;
       }

src/serializer.tsx

@@ -48,12 +48,20 @@ const rules: Rule[] = [
             };
           }
           case 'image': {
+            const fileKey = el.getAttribute('data-file-key');
+            const dataFromHtml = el.getAttributeNames().reduce(
+              (data: Record<string, any>, attrName: string) => ({
+                ...data,
+                attrName: el.getAttribute(attrName)
+              }),
+              {}
+            );
             return {
               object: 'block',
               type: type,
               data: {
-                src: el.getAttribute('src'),
-                fileKey: el.getAttribute('data-file-key')
+                ...dataFromHtml,
+                fileKey
               }
             };
           }
@@ -105,14 +113,19 @@ const rules: Rule[] = [
             );
           case 'figure':
             return <figure>{children}</figure>;
-          case 'image':
+          case 'image': {
+            // For compatibility with https://github.com/webkom/lego
+            const data = obj.data.toJS();
+            const { fileKey } = data;
             return (
               <img
                 src={obj.data.get('src')}
-                data-file-key={obj.data.get('fileKey')}
+                data-file-key={fileKey}
+                {...data}
                 alt="Placeholder"
               />
             );
+          }
           case 'image_caption':
             return <figcaption>{children}</figcaption>;
         }