displaying text

src/components/node/NodeImageSlideBlock/index.tsx

@@ -1,15 +1,4 @@
-import React, {
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  RefObject,
-  LegacyRef,
-  useRef,
-  useCallback,
-  MouseEventHandler,
-  TouchEventHandler,
-} from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';

src/components/node/NodeTextBlock/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import path from 'ramda/es/path';
+import { formatCommentText } from '~/utils/dom';
+import * as styles from './styles.scss';
+
+interface IProps {
+  node: INode;
+}
+
+const NodeTextBlock: FC<IProps> = ({ node }) => (
+  <div
+    className={styles.text}
+    dangerouslySetInnerHTML={{
+      __html: formatCommentText(null, path(['blocks', 0, 'text'], node)),
+    }}
+  />
+);
+
+export { NodeTextBlock };

src/components/node/NodeTextBlock/styles.scss

@@ -0,0 +1,11 @@
+.text {
+  @include outer_shadow();
+
+  background: $content_bg;
+  padding: $gap;
+  border-radius: $radius;
+
+  p {
+    margin: $gap / 2 0;
+  }
+}

src/constants/errors.ts

@@ -4,6 +4,7 @@ export const ERRORS = {
   EMPTY_RESPONSE: 'Empty_Response',
   NO_COMMENTS: 'No_Comments',
   FILES_REQUIRED: 'Files_Required',
+  TEXT_REQUIRED: 'Text_Required',
 };
 
 export const ERROR_LITERAL = {
@@ -12,4 +13,5 @@ export const ERROR_LITERAL = {
   [ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
   [ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
   [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
+  [ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
 };

src/containers/dialogs/EditorDialog/index.tsx

@@ -19,8 +19,6 @@ const mapStateToProps = state => {
   const { editor, errors } = selectNode(state);
   const { statuses, files } = selectUploads(state);
 
-  console.log('mss', { editor });
-
   return { editor, statuses, files, errors };
 };
 
@@ -57,12 +55,10 @@ const EditorDialogUnconnected: FC<IProps> = ({
 
   const onSubmit = useCallback(
     (event: FormEvent) => {
-      console.log({ data, editor });
       event.preventDefault();
-      return;
       nodeSave(data);
     },
-    [data, nodeSave, editor]
+    [data, nodeSave]
   );
 
   useEffect(() => {

src/containers/node/NodeLayout/index.tsx

@@ -13,7 +13,7 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import * as styles from './styles.scss';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { NODE_COMPONENTS } from '~/redux/node/constants';
+import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { CommentForm } from '~/components/node/CommentForm';
 import { selectUser } from '~/redux/auth/selectors';
@@ -57,7 +57,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
     [node, nodeUpdateTags]
   );
 
-  const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
+  const block = node && node.type && NODE_COMPONENTS[node.type];
+  const inline_block = node && node.type && NODE_INLINES[node.type];
 
   return (
     <Card className={styles.node} seamless>
@@ -69,6 +70,12 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
+              {inline_block && (
+                <div className={styles.inline_block}>
+                  {createElement(inline_block, { node, is_loading, updateLayout, layout })}
+                </div>
+              )}
+
               {is_loading_comments || !comments.length ? (
                 <NodeNoComments is_loading={is_loading_comments} />
               ) : (

src/redux/modal/reducer.ts

@@ -9,7 +9,7 @@ export interface IModalState {
 }
 
 const INITIAL_STATE: IModalState = {
-  is_shown: false,
+  is_shown: true,
   dialog: DIALOGS.EDITOR_TEXT,
 };
 

src/redux/node/constants.ts

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { IBlock, INode, ValueOf, IComment } from '../types';
+import { INode, ValueOf, IComment } from '../types';
 import { NodeImageSlideBlock } from '~/components/node/NodeImageSlideBlock';
+import { NodeTextBlock } from '~/components/node/NodeTextBlock';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { TextEditor } from '~/components/editors/TextEditor';
-import { DIALOGS } from '../modal/constants';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -66,6 +66,10 @@ export const NODE_COMPONENTS: INodeComponents = {
   [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
 };
 
+export const NODE_INLINES: INodeComponents = {
+  [NODE_TYPES.TEXT]: NodeTextBlock,
+};
+
 export const EMPTY_COMMENT: IComment = {
   id: null,
   text: '',