fixed editor structure

src/components/editors/ImageEditor/index.tsx

@@ -17,16 +17,14 @@ type IProps = ReturnType<typeof mapStateToProps> &
     pending_files: IUploadStatus[];
 
     setData: (val: INode) => void;
-    onFileMove: (o: number, n: number) => void;
+    onFileMove: (from: number, to: number) => void;
     onInputChange: ChangeEventHandler<HTMLInputElement>;
-    onDrop: DragEventHandler<HTMLFormElement>;
   };
 
 const ImageEditorUnconnected: FC<IProps> = ({
   data,
   onFileMove,
   onInputChange,
-  onDrop,
   pending_files,
 }) => (
   <ImageGrid
@@ -34,7 +32,6 @@ const ImageEditorUnconnected: FC<IProps> = ({
     items={data.files}
     locked={pending_files}
     onUpload={onInputChange}
-    onDrop={onDrop}
   />
 );
 

src/components/editors/ImageGrid/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useCallback, ChangeEventHandler, DragEventHandler
+ FC, useCallback, ChangeEventHandler, DragEventHandler,
 } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
@@ -12,10 +12,9 @@ interface IProps {
   locked: IUploadStatus[];
   onFileMove: (o: number, n: number) => void;
   onUpload?: ChangeEventHandler<HTMLInputElement>;
-  onDrop: DragEventHandler<HTMLFormElement>;
 }
 
-const SortableItem = SortableElement(({ children, }) => (
+const SortableItem = SortableElement(({ children }) => (
   <div className={styles.item}>{children}</div>
 ));
 
@@ -23,14 +22,12 @@ const SortableList = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
   }: {
-  items: IFile[];
+    items: IFile[];
-  locked: IUploadStatus[];
+    locked: IUploadStatus[];
-  onUpload: ChangeEventHandler<HTMLInputElement>;
+    onUpload: ChangeEventHandler<HTMLInputElement>;
-  onDrop: DragEventHandler<HTMLFormElement>;
   }) => (
-    <form className={styles.grid} onDrop={onDrop}>
+    <div className={styles.grid}>
       {items.map((file, index) => (
         <SortableItem key={file.id} index={index} collection={0}>
           <ImageUpload id={file.id} thumb={file.url} />
@@ -41,15 +38,15 @@ const SortableList = SortableContainer(
           <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
         </SortableItem>
       ))}
-    </form>
+    </div>
   )
 );
 
 const ImageGrid: FC<IProps> = ({
-  items, locked, onFileMove, onUpload, onDrop,
+ items, locked, onFileMove, onUpload,
 }) => {
-  const onMove = useCallback(({ oldIndex, newIndex, }) => onFileMove(oldIndex, newIndex), [
+  const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [
-    onFileMove
+    onFileMove,
   ]);
 
   return (
@@ -59,7 +56,6 @@ const ImageGrid: FC<IProps> = ({
       items={items}
       locked={locked}
       onUpload={onUpload}
-      onDrop={onDrop}
       pressDelay={window.innerWidth < 768 ? 200 : 0}
       helperClass={styles.helper}
     />

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,5 +1,5 @@
 import React, {
- FC, useState, useCallback, useEffect,
+ FC, useState, useCallback, useEffect, FormEvent,
 } from 'react';
 import { connect } from 'react-redux';
 import assocPath from 'ramda/es/assocPath';
@@ -61,7 +61,7 @@ const EditorDialogUnconnected: FC<IProps> = ({
   );
 
   const onDrop = useCallback(
-    (event: React.DragEvent<HTMLFormElement>) => {
+    (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault();
 
       if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
@@ -118,8 +118,8 @@ const EditorDialogUnconnected: FC<IProps> = ({
     };
   }, [eventPreventer]);
 
-  useEffect(() => console.log({ temp }), [temp]);
+  // useEffect(() => console.log({ temp }), [temp]);
-  useEffect(() => console.log({ data }), [data]);
+  // useEffect(() => console.log({ data }), [data]);
 
   useEffect(() => {
     Object.entries(statuses).forEach(([id, status]) => {
@@ -137,12 +137,17 @@ const EditorDialogUnconnected: FC<IProps> = ({
     [setData, data]
   );
 
+  const onSubmit = useCallback((event: FormEvent) => {
+    event.preventDefault();
+    console.log({ data });
+  }, [data]);
+
   const buttons = (
     <Padder style={{ position: 'relative' }}>
       <EditorPanel data={data} setData={setData} onUpload={onInputChange} />
 
       <Group horizontal>
-        <InputText title="Название" value={data.title} handler={setTitle} />
+        <InputText title="Название" value={data.title} handler={setTitle} autoFocus />
 
         <Button title="Сохранить" iconRight="check" />
       </Group>
@@ -152,19 +157,20 @@ const EditorDialogUnconnected: FC<IProps> = ({
   useCloseOnEscape(onRequestClose);
 
   return (
-    <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
+    <form onSubmit={onSubmit} className={styles.form}>
-      <div className={styles.editor}>
+      <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
-        <ImageEditor
+        <div className={styles.editor} onDrop={onDrop}>
-          data={data}
+          <ImageEditor
-          setData={setData}
+            data={data}
-          pending_files={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
+            pending_files={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
-          onUpload={onInputChange}
+            setData={setData}
-          onFileMove={onFileMove}
+            onUpload={onInputChange}
-          onInputChange={onInputChange}
+            onFileMove={onFileMove}
-          onDrop={onDrop}
+            onInputChange={onInputChange}
-        />
+          />
-      </div>
+        </div>
-    </ScrollDialog>
+      </ScrollDialog>
+    </form>
   );
 };
 

src/containers/dialogs/EditorDialog/styles.scss

@@ -6,3 +6,8 @@
   justify-content: center;
   position: relative;
 }
+
+.form {
+  height: 100vh;
+  width: 100%;
+}

src/redux/node/reducer.ts

@@ -16,7 +16,7 @@ const INITIAL_STATE: INodeState = {
   editor: {
     ...EMPTY_NODE,
     type: 'image',
-    blocks: [{ ...EMPTY_BLOCK, type: 'image' }],
+    blocks: [],
     files: [],
   },
   is_loading: false,