Add some info about loading images from clipboard

src/TextBlock/TextBlockEdit.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 
@@ -40,7 +40,6 @@ const TextBlockEdit = (props) => {
 
   const { slate } = settings;
   const { textblockExtensions } = slate;
-  console.log('render', block);
   const { value } = data;
 
   const [addNewBlockOpened, setAddNewBlockOpened] = React.useState();
@@ -59,20 +58,20 @@ const TextBlockEdit = (props) => {
   //   };
   // });
 
+  const dispatch = useDispatch(); // just in case is needed in extensions
   const withBlockProperties = React.useCallback(
     (editor) => {
       editor.getBlockProps = () => {
-        return props;
+        return {
+          ...props,
+          dispatch,
+        };
       };
       return editor;
     },
-    [props],
+    [props, dispatch],
   );
 
-  // let extensions = React.useMemo(() => {
-  //   return [withBlockProperties, ...textblockExtensions]; //
-  // }, [textblockExtensions]);
-
   const onDrop = React.useCallback(
     (files) => {
       // TODO: need to fix setUploading, treat uploading indicator

src/TextBlock/extensions/insertData.js

@@ -3,13 +3,10 @@ import { deconstructToVoltoBlocks } from 'volto-slate/utils';
 export const withInsertData = (editor) => {
   const { insertData } = editor;
 
-  if (!editor._textblockInsertData) {
-    editor.insertData = (data) => {
-      insertData(data);
-      deconstructToVoltoBlocks(editor);
-    };
-    editor._textblockInsertData = true;
-  }
+  editor.insertData = (data) => {
+    insertData(data);
+    deconstructToVoltoBlocks(editor);
+  };
 
   return editor;
 };

src/editor/plugins/Image/extensions.js

@@ -7,6 +7,7 @@ import imageExtensions from 'image-extensions';
 import { Transforms } from 'slate';
 import { IMAGE } from './constants';
 import { jsx } from 'slate-hyperscript';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 export const isImageUrl = (url) => {
   if (!isUrl(url)) return false;
@@ -17,8 +18,33 @@ export const isImageUrl = (url) => {
 };
 
 export const onImageLoad = (editor, reader) => () => {
-  const url = reader.result;
-  if (url) insertImage(editor, url);
+  const data = reader.result;
+  // console.log('onImageload', reader);
+
+  // TODO: we need an orchestrator at redux level that would get the
+  // "create image block with this content" action and implement it.
+
+  // if (url) insertImage(editor, url);
+  // const fields = data.match(/^data:(.*);(.*),(.*)$/);
+  // const blockProps = editor.getBlockProps();
+  // const { uploadContent, pathname, block } = blockProps;
+  // TODO: we need a way to get the uploaded image URL
+  // This would be easier if we would have block transformers-based image
+  // blocks
+  // uploadContent(
+  //   getBaseUrl(pathname),
+  //   {
+  //     '@type': 'Image',
+  //     title: 'clipboard',
+  //     image: {
+  //       data: fields[3],
+  //       encoding: fields[2],
+  //       'content-type': fields[1],
+  //       filename: 'clipboard',
+  //     },
+  //   },
+  //   block,
+  // );
 };
 
 export const insertImage = (editor, url, { typeImg = IMAGE } = {}) => {
@@ -59,7 +85,6 @@ export const withImage = (editor) => {
   };
 
   editor.insertData = (data) => {
-    console.log('image insertData');
     const text = data.getData('text/plain');
     const { files } = data;
     if (files && files.length > 0) {
@@ -74,7 +99,6 @@ export const withImage = (editor) => {
     } else if (isImageUrl(text)) {
       insertImage(editor, text);
     } else {
-      // console.log('regular data insert');
       insertData(data);
     }
   };

src/editor/plugins/Image/render.jsx

@@ -14,9 +14,9 @@ export const ImageElement = (props) => {
   };
 
   return (
-    <div {...attributes}>
+    <span {...attributes} style={{ display: 'inline-block' }}>
       {children}
       <img alt="" src={element.src} style={style} />
-    </div>
+    </span>
   );
 };