splitting comment text by blocks

src/components/comment/CommentTextBlock/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { ICommentBlock } from '~/constants/comment';
+import styles from './styles.scss';
+
+interface IProps {
+  block: ICommentBlock;
+}
+
+const CommentTextBlock: FC<IProps> = ({ block }) => {
+  return (
+    <div
+      className={styles.text}
+      dangerouslySetInnerHTML={{
+        __html: `<p>${block.content}</p>`,
+      }}
+    />
+  );
+};
+
+export { CommentTextBlock };

src/components/comment/CommentTextBlock/styles.scss

@@ -0,0 +1,14 @@
+.text {
+  padding: $gap;
+  font-weight: 300;
+  font: $font_16_medium;
+  line-height: 20px;
+  box-sizing: border-box;
+  position: relative;
+  color: #cccccc;
+  word-break: break-word;
+
+  b {
+    font-weight: 600;
+  }
+}

src/components/node/CommentContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, memo } from 'react';
+import React, { FC, useMemo, memo, createElement } from 'react';
 import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
@@ -11,6 +11,7 @@ import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import { PRESETS } from '~/constants/urls';
+import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
 
 interface IProps {
   comment: IComment;
@@ -31,12 +32,11 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
     <>
       {comment.text && (
         <div className={styles.block}>
-          <Group
-            className={styles.text}
-            dangerouslySetInnerHTML={{
-              __html: formatCommentText(path(['user', 'username'], comment), comment.text),
-            }}
-          />
+          {formatCommentText(path(['user', 'username'], comment), comment.text).map(
+            (block, key) =>
+              COMMENT_BLOCK_RENDERERS[block.type] &&
+              createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+          )}
 
           <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
         </div>

src/components/node/CommentContent/styles.scss

@@ -10,6 +10,7 @@
   position: relative;
   padding-bottom: 10px;
   box-sizing: border-box;
+  flex-direction: column;
 
   &:first-child {
     border-top-right-radius: $radius;
@@ -36,21 +37,6 @@
   }
 }
 
-.text {
-  padding: $gap;
-  font-weight: 300;
-  font: $font_16_medium;
-  line-height: 20px;
-  box-sizing: border-box;
-  position: relative;
-  color: #cccccc;
-  word-break: break-word;
-
-  b {
-    font-weight: 600;
-  }
-}
-
 .date {
   position: absolute;
   bottom: 0;

src/components/profile/ProfileSettings/index.tsx

@@ -1,56 +1,51 @@
-import React, { FC, useState, useEffect, useCallback } from "react";
-import styles from "./styles.scss";
-import { connect } from "react-redux";
-import classNames from "classnames";
-import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors";
-import { Textarea } from "~/components/input/Textarea";
-import { Button } from "~/components/input/Button";
-import { Group } from "~/components/containers/Group";
-import { Filler } from "~/components/containers/Filler";
-import { TextInput } from "~/components/input/TextInput";
-import { InputText } from "~/components/input/InputText";
-import reject from "ramda/es/reject";
-import * as AUTH_ACTIONS from "~/redux/auth/actions";
-import { ERROR_LITERAL } from "~/constants/errors";
+import React, { FC, useState, useEffect, useCallback } from 'react';
+import styles from './styles.scss';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors';
+import { Textarea } from '~/components/input/Textarea';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+import { Filler } from '~/components/containers/Filler';
+import { TextInput } from '~/components/input/TextInput';
+import { InputText } from '~/components/input/InputText';
+import reject from 'ramda/es/reject';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { ERROR_LITERAL } from '~/constants/errors';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
-  profile: selectAuthProfile(state)
+  profile: selectAuthProfile(state),
 });
 
 const mapDispatchToProps = {
   authPatchUser: AUTH_ACTIONS.authPatchUser,
-  authSetProfile: AUTH_ACTIONS.authSetProfile
+  authSetProfile: AUTH_ACTIONS.authSetProfile,
 };
 
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {};
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const ProfileSettingsUnconnected: FC<IProps> = ({
   user,
   profile: { patch_errors },
   authPatchUser,
-  authSetProfile
+  authSetProfile,
 }) => {
-  const [password, setPassword] = useState("");
-  const [new_password, setNewPassword] = useState("");
+  const [password, setPassword] = useState('');
+  const [new_password, setNewPassword] = useState('');
 
   const [data, setData] = useState(user);
 
-  const setDescription = useCallback(
-    description => setData({ ...data, description }),
-    [data, setData]
-  );
-
-  const setEmail = useCallback(email => setData({ ...data, email }), [
+  const setDescription = useCallback(description => setData({ ...data, description }), [
     data,
-    setData
+    setData,
   ]);
 
-  const setUsername = useCallback(username => setData({ ...data, username }), [
-    data,
-    setData
-  ]);
+  const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
+
+  const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
+
+  const setFullname = useCallback(fullname => setData({ ...data, fullname }), [data, setData]);
 
   const onSubmit = useCallback(
     event => {
@@ -58,10 +53,11 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
 
       const fields = reject(el => !el)({
         email: data.email !== user.email && data.email,
+        fullname: data.fullname !== user.fullname && data.fullname,
         username: data.username !== user.username && data.username,
         password: password.length > 0 && password,
         new_password: new_password.length > 0 && new_password,
-        description: data.description !== user.description && data.description
+        description: data.description !== user.description && data.description,
       });
 
       if (Object.values(fields).length === 0) return;
@@ -78,15 +74,18 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>
       <Group>
-        <Textarea
-          value={data.description}
-          handler={setDescription}
-          title="Описание"
+        <InputText
+          value={data.fullname}
+          handler={setFullname}
+          title="Полное имя"
+          error={patch_errors.fullname && ERROR_LITERAL[patch_errors.fullname]}
         />
 
+        <Textarea value={data.description} handler={setDescription} title="Описание" />
+
         <div className={styles.small}>
-          Описание будет видно на странице профиля. Здесь работают те же правила
-          оформления, что и в комментариях.
+          Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и в
+          комментариях.
         </div>
 
         <Group className={styles.pad}>
@@ -94,9 +93,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             value={data.username}
             handler={setUsername}
             title="Логин"
-            error={
-              patch_errors.username && ERROR_LITERAL[patch_errors.username]
-            }
+            error={patch_errors.username && ERROR_LITERAL[patch_errors.username]}
           />
 
           <InputText
@@ -111,10 +108,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             handler={setNewPassword}
             title="Новый пароль"
             type="password"
-            error={
-              patch_errors.new_password &&
-              ERROR_LITERAL[patch_errors.new_password]
-            }
+            error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
           />
 
           <div />
@@ -124,9 +118,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             handler={setPassword}
             title="Старый пароль"
             type="password"
-            error={
-              patch_errors.password && ERROR_LITERAL[patch_errors.password]
-            }
+            error={patch_errors.password && ERROR_LITERAL[patch_errors.password]}
           />
 
           <div className={styles.small}>

src/constants/comment.ts

@@ -0,0 +1,33 @@
+import { CommentTextBlock } from '~/components/comment/CommentTextBlock';
+
+export const COMMENT_BLOCK_TYPES = {
+  TEXT: 'TEXT',
+  MARK: 'MARK',
+  EMBED: 'EMBED',
+};
+
+export const COMMENT_BLOCK_DETECTORS = [
+  {
+    type: COMMENT_BLOCK_TYPES.EMBED,
+    test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
+  },
+  {
+    type: COMMENT_BLOCK_TYPES.MARK,
+    test: /^[\n\s]{0,}?<\.{3}>[\n\s]{0,}$/gi,
+  },
+  {
+    type: COMMENT_BLOCK_TYPES.TEXT,
+    test: /^.*$/gi,
+  },
+];
+
+export type ICommentBlock = {
+  type: typeof COMMENT_BLOCK_TYPES[keyof typeof COMMENT_BLOCK_TYPES];
+  content: string;
+};
+
+export const COMMENT_BLOCK_RENDERERS = {
+  [COMMENT_BLOCK_TYPES.TEXT]: CommentTextBlock,
+  [COMMENT_BLOCK_TYPES.MARK]: CommentTextBlock,
+  [COMMENT_BLOCK_TYPES.EMBED]: CommentTextBlock,
+};

src/index.tsx

@@ -21,51 +21,55 @@ render(
 /*
 
   [Stage 0]:
+  - <...> format
+  - youtube embeds
+
   - check if email is registered at social login
   - friendship
-  - signup?
   - cover change
-  - sticky header
-  - mobile header
   - profile cover upload
-  
+  - user access time update
+
   - illustrate restoreRequestDialog
   - illustrate 404
-  - illustrate login
+  - illustrate login  
 
   [stage 1]
-- import videos
-- import graffiti
-- text post can also has songs http://vault48.org/post5052
-- fulltext search: https://github.com/typeorm/typeorm/issues/3191
-- zoom: https://manuelstofer.github.io/pinchzoom/
+  - signup?
+  - import videos
+  - import graffiti
+  - text post can also has songs http://vault48.org/post5052
+  - fulltext search: https://github.com/typeorm/typeorm/issues/3191
+  - zoom: https://manuelstofer.github.io/pinchzoom/
 
-- notifications (node, comment)
+  - notifications (node, comment)
 
-- social integration (assimilate)
-- comment editing
+  - social integration (assimilate)
+  - comment editing
 
-Done:
-- password restore
-- avatar upload
-- flow updates
-- flow infinite scroll
-- better node brief update
-- fix: text nodes cell has no preview (actually, that's a problem of brief)
-- relocate files
-- backend: exclude node covers on import
-- profile editing
-- notifications (messages)
-- profile modal
-- messages
-- better dialogs: https://codepen.io/muemue/pen/abbEMMy
-- imagecaching at backend
-- social integration (login, signup)
-- boris with comments (import)
-- boris with comments (layout) 
-- fix: user receives his own notifications :-(
-- fix: node related and albums should exclude node itself
-- fix: select node and edit it. All images will be not loaded
-- fix: text nodes cell not clickable
-- fix: text nodes should not have 'no comments yet badge
+  Done:
+  - mobile header
+  - sticky header
+  - password restore
+  - avatar upload
+  - flow updates
+  - flow infinite scroll
+  - better node brief update
+  - fix: text nodes cell has no preview (actually, that's a problem of brief)
+  - relocate files
+  - backend: exclude node covers on import
+  - profile editing
+  - notifications (messages)
+  - profile modal
+  - messages
+  - better dialogs: https://codepen.io/muemue/pen/abbEMMy
+  - imagecaching at backend
+  - social integration (login, signup)
+  - boris with comments (import)
+  - boris with comments (layout) 
+  - fix: user receives his own notifications :-(
+  - fix: node related and albums should exclude node itself
+  - fix: select node and edit it. All images will be not loaded
+  - fix: text nodes cell not clickable
+  - fix: text nodes should not have 'no comments yet badge
 */

src/utils/dom.ts

@@ -1,23 +1,20 @@
-import { IFile } from "~/redux/types";
-import formatDistanceToNow from "date-fns/formatDistanceToNow";
-import { ru } from "date-fns/locale";
-import Axios from "axios";
-import { PRESETS } from "~/constants/urls";
+import { IFile, ValueOf } from '~/redux/types';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { ru } from 'date-fns/locale';
+import Axios from 'axios';
+import { PRESETS } from '~/constants/urls';
+import { ICommentBlock, COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES } from '~/constants/comment';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
-    return document.defaultView
-      .getComputedStyle(oElm, "")
-      .getPropertyValue(strCssRule);
+    return document.defaultView.getComputedStyle(oElm, '').getPropertyValue(strCssRule);
   }
 
   if (oElm.currentStyle) {
-    return oElm.currentStyle[
-      strCssRule.replace(/-(\w)/g, (strMatch, p1) => p1.toUpperCase())
-    ];
+    return oElm.currentStyle[strCssRule.replace(/-(\w)/g, (strMatch, p1) => p1.toUpperCase())];
   }
 
-  return "";
+  return '';
 };
 
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
@@ -25,7 +22,7 @@ function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
 
   return {
     x: centerX + radius * Math.cos(angleInRadians),
-    y: centerY + radius * Math.sin(angleInRadians)
+    y: centerY + radius * Math.sin(angleInRadians),
   };
 }
 
@@ -42,10 +39,10 @@ export const describeArc = (
   const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
 
   return [
-    "M",
+    'M',
     start.x,
     start.y,
-    "A",
+    'A',
     radius,
     radius,
     0,
@@ -53,62 +50,66 @@ export const describeArc = (
     0,
     end.x,
     end.y,
-    "L",
+    'L',
     x,
     y,
-    "L",
+    'L',
     start.x,
-    start.y
-  ].join(" ");
+    start.y,
+  ].join(' ');
 };
 
-export const getURL = (
-  file: Partial<IFile>,
-  size?: typeof PRESETS[keyof typeof PRESETS]
-) => {
+export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
   if (!file || !file.url) return null;
 
   if (size) {
     return file.url
-      .replace(
-        "REMOTE_CURRENT://",
-        `${process.env.REMOTE_CURRENT}cache/${size}/`
-      )
-      .replace("REMOTE_OLD://", process.env.REMOTE_OLD);
+      .replace('REMOTE_CURRENT://', `${process.env.REMOTE_CURRENT}cache/${size}/`)
+      .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
   }
 
   return file.url
-    .replace("REMOTE_CURRENT://", process.env.REMOTE_CURRENT)
-    .replace("REMOTE_OLD://", process.env.REMOTE_OLD);
+    .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT)
+    .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
 };
 
 export const formatText = (text: string): string =>
   !text
-    ? ""
+    ? ''
     : text
-        .replace(/\n{1,}/gim, "\n")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
+        .replace(
+          /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
+          '\n$1\n'
+        )
+        .replace(/\n{1,}/gim, '\n')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
         .replace(
           /~([\wа-яА-Я\-]+)/giu,
-          "<span class=\"username\" onClick=\"window.postMessage({ type: 'username', username: '$1'});\">~$1</span>"
+          '<span class="username" onClick="window.postMessage({ type: \'username\', username: \'$1\'});">~$1</span>'
         )
-        .replace(/:\/\//gim, ":|--|")
+        .replace(/:\/\//gim, ':|--|')
         .replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>')
         .replace(/(\/\*[\s\S]*?\*\/)/gim, '<span class="grey">$1</span>')
-        .replace(/:\|--\|/gim, "://")
-        .split("\n")
+        .replace(/:\|--\|/gim, '://')
+        .split('\n')
         .filter(el => el.trim().length)
-        .map(el => `<p>${el}</p>`)
-        .join("");
+        // .map(el => `<p>${el}</p>`)
+        .join('\n');
 
-export const formatCommentText = (author: string, text: string): string =>
-  text
-    ? formatText(text).replace(
-        /^<p>/,
-        author ? `<p><b class="comment-author">${author}: </b>` : "<p>"
-      )
-    : "";
+export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES> => {
+  const match = Object.values(COMMENT_BLOCK_DETECTORS).find(detector => line.match(detector.test));
+  return (match && match.type) || COMMENT_BLOCK_TYPES.TEXT;
+};
+
+export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
+  text.split('\n').map(line => ({
+    type: findBlockType(line),
+    content: line,
+  }));
+
+export const formatCommentText = (author: string, text: string): ICommentBlock[] =>
+  text ? splitCommentByBlocks(formatText(text)) : null;
 
 export const formatCellText = (text: string): string => formatText(text);
 
@@ -116,13 +117,11 @@ export const getPrettyDate = (date: string): string =>
   formatDistanceToNow(new Date(date), {
     locale: ru,
     includeSeconds: true,
-    addSuffix: true
+    addSuffix: true,
   });
 
 export const getYoutubeTitle = async (id: string) => {
-  Axios.get(`http://youtube.com/get_video_info?video_id=${id}`).then(
-    console.log
-  );
+  Axios.get(`http://youtube.com/get_video_info?video_id=${id}`).then(console.log);
 };
 
 (<any>window).getYoutubeTitle = getYoutubeTitle;