diff --git a/src/containers/editors/NewEditorBetweenBlocks/index.tsx b/src/containers/editors/NewEditorBetweenBlocks/index.tsx new file mode 100644 index 00000000..5888d171 --- /dev/null +++ b/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 = () => { + return ( +
+
+
+
+ ); +}; + +export { NewEditorBetweenBlocks }; diff --git a/src/containers/editors/NewEditorBetweenBlocks/styles.module.scss b/src/containers/editors/NewEditorBetweenBlocks/styles.module.scss new file mode 100644 index 00000000..d7d8bc83 --- /dev/null +++ b/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; + } +} diff --git a/src/containers/editors/NewEditorBlock/index.tsx b/src/containers/editors/NewEditorBlock/index.tsx new file mode 100644 index 00000000..8712ef52 --- /dev/null +++ b/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 = ({ 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 ( +
+ {prop(block.type, EDITOR_BLOCKS) + ? createElement(prop(block.type, EDITOR_BLOCKS), { block, handler }) + : null} + + +
+ ); +}; + +export { NewEditorBlock }; diff --git a/src/containers/editors/NewEditorBlock/styles.module.scss b/src/containers/editors/NewEditorBlock/styles.module.scss new file mode 100644 index 00000000..b5e0b7bd --- /dev/null +++ b/src/containers/editors/NewEditorBlock/styles.module.scss @@ -0,0 +1,8 @@ +@import "~/styles/variables.scss"; + +.block { +} + +.pad { + margin-bottom: $gap; +} diff --git a/src/containers/editors/NewEditorBlockText/index.tsx b/src/containers/editors/NewEditorBlockText/index.tsx index 17bd961a..14dd5b10 100644 --- a/src/containers/editors/NewEditorBlockText/index.tsx +++ b/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 = ({ block, handler }) => { const onChange = useCallback((text: string) => handler({ type: BlockType.text, text }), [ @@ -8,7 +9,7 @@ const NewEditorBlockText: FC = ({ block, handler }) => { ]); return ( -
+
); diff --git a/src/containers/editors/NewEditorBlockText/styles.module.scss b/src/containers/editors/NewEditorBlockText/styles.module.scss new file mode 100644 index 00000000..bcb80791 --- /dev/null +++ b/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); +} diff --git a/src/containers/editors/NewEditorContent/index.tsx b/src/containers/editors/NewEditorContent/index.tsx index 6b55aaeb..0d230e01 100644 --- a/src/containers/editors/NewEditorContent/index.tsx +++ b/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 = () => { - const { values, setFieldValue } = useNodeFormContext(); +const SortableItem = SortableElement(({ value, index }: { value: IBlock; index: number }) => ( + +)); - const onChange = useCallback( - (index: number) => (val: IBlock) => - setFieldValue( - 'blocks', - values.blocks.map((el, i) => (i === index ? val : el)) - ), - [setFieldValue, values.blocks] - ); +const SortableList = SortableContainer(({ items }: { items: IBlock[] }) => ( +
+ {items.map((block, i) => ( + + ))} +
+)); + +const NewEditorContent: FC = () => { + const { values } = useNodeFormContext(); return ( - {values.blocks.map((block, i) => - prop(block.type, NODE_EDITOR_BLOCKS) - ? createElement(prop(block.type, NODE_EDITOR_BLOCKS), { block, handler: onChange(i) }) - : null - )} + ); }; diff --git a/src/containers/editors/NewEditorContent/styles.module.scss b/src/containers/editors/NewEditorContent/styles.module.scss index b8335b3e..bbd6d68c 100644 --- a/src/containers/editors/NewEditorContent/styles.module.scss +++ b/src/containers/editors/NewEditorContent/styles.module.scss @@ -1,5 +1,4 @@ @import "~/styles/variables.scss"; .wrap { - padding: $gap; } diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index c43abaa0..dbe68255 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -134,11 +134,23 @@ export interface NodeEditorBlockConfig { initial?: boolean; } -export const NODE_EDITOR_BLOCKS: Record> = { +export const EDITOR_BLOCKS: Record> = { [BlockType.video]: NewEditorBlockVideo, [BlockType.text]: NewEditorBlockText, }; +export const NODE_BLOCKS: Record< + string, + Partial> +> = { + [NODE_TYPES.TEXT]: { + [BlockType.text]: { + limit: 1, + initial: true, + }, + }, +}; + export const NODE_PANEL_COMPONENTS: Record[]> = { [NODE_TYPES.TEXT]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch], [NODE_TYPES.VIDEO]: [EditorFiller, EditorUploadCoverButton, EditorPublicSwitch],