connect to editorias asset manager

wax-prosemirror-components/index.js

@@ -2,7 +2,7 @@ export { default as Overlay } from './src/components/Overlay';
 export { default as Button } from './src/components/Button';
 export { default as icons } from './src/icons/icons';
 export { default as TableDropDown } from './src/components/TableDropDown';
-export { default as ImageUpload } from './src/components/ImageUpload';
+export { default as ImageUpload } from './src/components/images/ImageUpload';
 export { default as TitleButton } from './src/components/TitleButton';
 export { default as LeftMenuTitle } from './src/components/LeftMenuTitle';
 export { default as ToolGroupComponent } from './src/components/ToolGroupComponent';

wax-prosemirror-components/src/components/fileUpload.js

+const findPlaceholder = (state, id, placeholderPlugin) => {
+  const decos = placeholderPlugin.getState(state);
+  const found = decos.find(null, null, spec => spec.id === id);
+  return found.length ? found[0].from : null;
+};
+
+export default (view, fileUpload, placeholderPlugin) => file => {
+  console.log('flffl', fileUpload);
+  const { state } = view;
+
+  // A fresh object to act as the ID for this upload
+  const id = {};
+
+  // Replace the selection with a placeholder
+  const { tr } = state;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  tr.setMeta(placeholderPlugin, {
+    add: { id, pos: tr.selection.from },
+  });
+
+  view.dispatch(tr);
+
+  const pos = findPlaceholder(view.state, id, placeholderPlugin);
+  // If the content around the placeholder has been deleted, drop
+  // the image
+  if (pos == null) {
+    return;
+  }
+  // Otherwise, insert it at the placeholder's position, and remove
+  // the placeholder
+  view.dispatch(
+    state.tr
+      .replaceWith(
+        pos,
+        pos,
+        view.state.schema.nodes.image.create({
+          src: url,
+        }),
+      )
+      .setMeta(placeholderPlugin, { remove: { id } }),
+  );
+
+  // fileUpload(file).then(
+  //   url => {
+
+  //   },
+  //   () => {
+  //     // On failure, just clean up the placeholder
+  //     view.dispatch(tr.setMeta(placeholderPlugin, { remove: { id } }));
+  //   }
+  // );
+};

wax-prosemirror-components/src/components/ImageUpload.js → wax-prosemirror-components/src/components/images/ImageUpload.js

@@ -3,7 +3,8 @@ import React, { useContext, useRef, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 
-import MenuButton from '../ui/buttons/MenuButton';
+import MenuButton from '../../ui/buttons/MenuButton';
+import insertImage from './Upload';
 
 const Wrapper = styled.div`
   input {
@@ -13,12 +14,28 @@ const Wrapper = styled.div`
 
 const ImageUpload = ({ item, fileUpload, view }) => {
   const {
+    app,
     activeViewId,
     view: { main },
   } = useContext(WaxContext);
 
   const inputRef = useRef(null);
-  const handleMouseDown = () => inputRef.current.click();
+  const placeholderPlugin = app.PmPlugins.get('imagePlaceHolder');
+  const imageServiceConfig = app.config.get('config.ImageServie');
+
+  const handleMouseDown = () => {
+    if (imageServiceConfig && imageServiceConfig.handleAssetManager) {
+      insertThroughFileMAnager();
+    } else {
+      inputRef.current.click();
+    }
+  };
+
+  async function insertThroughFileMAnager() {
+    const handler = imageServiceConfig.handleAssetManager;
+    const urls = await handler();
+    insertImage(urls, view, placeholderPlugin);
+  }
 
   let isDisabled = !item.select(view.state, activeViewId);
 

wax-prosemirror-components/src/components/images/Upload.js

+const findPlaceholder = (state, id, placeholderPlugin) => {
+  const decos = placeholderPlugin.getState(state);
+  const found = decos.find(null, null, spec => spec.id === id);
+  return found.length ? found[0].from : null;
+};
+
+const insertImage = (urls, view, placeholderPlugin) => {
+  for (let i = 0; i < urls.length; i += 1) {
+    const { state } = view;
+
+    const id = {};
+
+    const { tr } = state;
+    if (!tr.selection.empty) tr.deleteSelection();
+
+    tr.setMeta(placeholderPlugin, {
+      add: { id, pos: tr.selection.from },
+    });
+
+    view.dispatch(tr);
+    const pos = findPlaceholder(view.state, id, placeholderPlugin);
+
+    if (pos == null) {
+      return;
+    }
+
+    view.dispatch(
+      state.tr
+        .replaceWith(
+          pos,
+          pos,
+          view.state.schema.nodes.image.create({
+            src: urls[i],
+          }),
+        )
+        .setMeta(placeholderPlugin, { remove: { id } }),
+    );
+  }
+};
+
+export default insertImage;

wax-prosemirror-services/src/ImageService/fileUpload.js

@@ -15,7 +15,7 @@ export default (view, fileUpload, placeholderPlugin) => file => {
   if (!tr.selection.empty) tr.deleteSelection();
 
   tr.setMeta(placeholderPlugin, {
-    add: { id, pos: tr.selection.from }
+    add: { id, pos: tr.selection.from },
   });
 
   view.dispatch(tr);
@@ -35,15 +35,15 @@ export default (view, fileUpload, placeholderPlugin) => file => {
             pos,
             pos,
             view.state.schema.nodes.image.create({
-              src: url
-            })
+              src: url,
+            }),
           )
-          .setMeta(placeholderPlugin, { remove: { id } })
+          .setMeta(placeholderPlugin, { remove: { id } }),
       );
     },
     () => {
       // On failure, just clean up the placeholder
       view.dispatch(tr.setMeta(placeholderPlugin, { remove: { id } }));
-    }
+    },
   );
 };