#57 added block-based content editor

src/containers/editors/NewEditorBetweenBlocks/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Button } from '~/components/input/Button';
+
+interface IProps {}
+
+const NewEditorBetweenBlocks: FC<IProps> = () => {
+  return (
+    <div className={styles.buttons}>
+      <div className={styles.buttons_content}>
+        <Button iconLeft="plus" round />
+      </div>
+    </div>
+  );
+};
+
+export { NewEditorBetweenBlocks };

src/containers/editors/NewEditorBetweenBlocks/styles.module.scss

@@ -0,0 +1,12 @@
+
+.buttons {
+  height: 0;
+  position: relative;
+
+  &_content {
+    position: absolute;
+    bottom: -10px;
+    right: 0;
+    z-index: 2;
+  }
+}

src/containers/editors/NewEditorBlock/index.tsx

@@ -0,0 +1,42 @@
+import React, { createElement, FC, Fragment, useCallback } from 'react';
+import { IBlock } from '~/redux/types';
+import { prop } from 'ramda';
+import { EDITOR_BLOCKS } from '~/redux/node/constants';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { NewEditorBetweenBlocks } from '~/containers/editors/NewEditorBetweenBlocks';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+
+interface IProps {
+  block: IBlock;
+  index: number;
+}
+
+const NewEditorBlock: FC<IProps> = ({ block, index }) => {
+  const { values, setFieldValue } = useNodeFormContext();
+
+  const handler = useCallback(
+    (val: IBlock) =>
+      setFieldValue(
+        'blocks',
+        values.blocks.map((el, i) => (i === index ? val : el))
+      ),
+    [setFieldValue, values.blocks]
+  );
+
+  if (!prop(block.type, EDITOR_BLOCKS)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.block}>
+      {prop(block.type, EDITOR_BLOCKS)
+        ? createElement(prop(block.type, EDITOR_BLOCKS), { block, handler })
+        : null}
+
+      <NewEditorBetweenBlocks />
+    </div>
+  );
+};
+
+export { NewEditorBlock };

src/containers/editors/NewEditorBlock/styles.module.scss

@@ -0,0 +1,8 @@
+@import "~/styles/variables.scss";
+
+.block {
+}
+
+.pad {
+  margin-bottom: $gap;
+}

src/containers/editors/NewEditorBlockText/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from 'react';
 import { BlockType, IBlockComponentProps } from '~/redux/types';
 import { InputText } from '~/components/input/InputText';
+import styles from './styles.module.scss';
 
 const NewEditorBlockText: FC<IBlockComponentProps> = ({ block, handler }) => {
   const onChange = useCallback((text: string) => handler({ type: BlockType.text, text }), [
@@ -8,7 +9,7 @@ const NewEditorBlockText: FC<IBlockComponentProps> = ({ block, handler }) => {
   ]);
 
   return (
-    <div>
+    <div className={styles.wrap}>
       <InputText handler={onChange} value={block.text} />
     </div>
   );

src/containers/editors/NewEditorBlockText/styles.module.scss

@@ -0,0 +1,6 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  padding: $gap;
+  background-color: transparentize($content_bg, 0.9);
+}

src/containers/editors/NewEditorContent/index.tsx

@@ -1,32 +1,31 @@
-import React, { createElement, FC, useCallback, useMemo } from 'react';
+import React, { FC } from 'react';
 import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
-import { NODE_EDITOR_BLOCKS } from '~/redux/node/constants';
-import { has, prop } from 'ramda';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
+import { NewEditorBlock } from '~/containers/editors/NewEditorBlock';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { IBlock } from '~/redux/types';
 
 interface IProps {}
 
-const NewEditorContent: FC<IProps> = () => {
+const SortableItem = SortableElement(({ value, index }: { value: IBlock; index: number }) => (
-  const { values, setFieldValue } = useNodeFormContext();
+  <NewEditorBlock index={index} block={value} />
+));
 
-  const onChange = useCallback(
+const SortableList = SortableContainer(({ items }: { items: IBlock[] }) => (
-    (index: number) => (val: IBlock) =>
+  <div>
-      setFieldValue(
+    {items.map((block, i) => (
-        'blocks',
+      <SortableItem key={i} index={i} value={block} />
-        values.blocks.map((el, i) => (i === index ? val : el))
+    ))}
-      ),
+  </div>
-    [setFieldValue, values.blocks]
+));
-  );
+
+const NewEditorContent: FC<IProps> = () => {
+  const { values } = useNodeFormContext();
 
   return (
     <Group className={styles.wrap}>
-      {values.blocks.map((block, i) =>
+      <SortableList items={values.blocks} />
-        prop(block.type, NODE_EDITOR_BLOCKS)
-          ? createElement(prop(block.type, NODE_EDITOR_BLOCKS), { block, handler: onChange(i) })
-          : null
-      )}
     </Group>
   );
 };

src/containers/editors/NewEditorContent/styles.module.scss

@@ -1,5 +1,4 @@
 @import "~/styles/variables.scss";
 
 .wrap {
-  padding: $gap;
 }

src/redux/node/constants.ts

@@ -134,11 +134,23 @@ export interface NodeEditorBlockConfig {
   initial?: boolean;
 }
 
-export const NODE_EDITOR_BLOCKS: Record<BlockType, FC<IBlockComponentProps>> = {
+export const EDITOR_BLOCKS: Record<BlockType, FC<IBlockComponentProps>> = {
   [BlockType.video]: NewEditorBlockVideo,
   [BlockType.text]: NewEditorBlockText,
 };
 
+export const NODE_BLOCKS: Record<
+  string,
+  Partial<Record<BlockType, { limit?: number; initial?: boolean }>>
+> = {
+  [NODE_TYPES.TEXT]: {
+    [BlockType.text]: {
+      limit: 1,
+      initial: true,
+    },
+  },
+};
+
 export const NODE_PANEL_COMPONENTS: Record<string, FC<IEditorComponentProps>[]> = {
   [NODE_TYPES.TEXT]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch],
   [NODE_TYPES.VIDEO]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch],