Merge pull request velopert#77 from velopert/fix/link-post-crash

Fix/link post crash

Author: velopert

src/components/auth/AuthModal.tsx

@@ -61,7 +61,6 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
         color: ${palette.gray7};
         text-align: center;
         font-weight: 600;
-        font-size: 2rem;
       }
     }
     .white-block {

src/components/common/MarkdownRender.tsx

@@ -77,9 +77,9 @@ const MarkdownRenderBlock = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
-    blockquote {
-      border-left: none;
-    }
+    border-left: none;
+    background: none;
+    padding: none;
   }
 `;
 
@@ -118,6 +118,7 @@ function filter(html: string) {
       'pre',
       'iframe',
       'span',
+      'img',
     ],
     allowedAttributes: {
       a: ['href', 'name', 'target'],
@@ -153,23 +154,23 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   onConvertFinish,
   editing,
 }) => {
-  const initialHtml = ssrEnabled
-    ? remark()
-        .use(breaks)
-        .use(prismPlugin)
-        .use(htmlPlugin, {
-          sanitize: true,
-        })
-        .use(embedPlugin)
-        .use(slug)
-        .processSync(markdown)
-        .toString()
-    : '';
-
-  const [element, setElement] = useState<RenderedElement>(
-    ssrEnabled ? parse(filter(initialHtml)) : null,
+  const [html, setHtml] = useState(
+    ssrEnabled
+      ? remark()
+          .use(breaks)
+          .use(prismPlugin)
+          .use(htmlPlugin, {
+            sanitize: true,
+          })
+          .use(embedPlugin)
+          .use(slug)
+          .processSync(markdown)
+          .toString()
+      : '',
   );
 
+  const [element, setElement] = useState<RenderedElement>(null);
+
   const applyElement = React.useMemo(() => {
     return throttle(250, (el: any) => {
       setElement(el);
@@ -194,6 +195,12 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
           // if (window && (window as any).twttr) return;
           loadScript('https://platform.twitter.com/widgets.js');
         }
+
+        if (!editing) {
+          setHtml(html);
+          return;
+        }
+
         const el = parse(editing ? html : filter(html));
 
         applyElement(el);
@@ -202,7 +209,13 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   return (
     <Typography>
-      <MarkdownRenderBlock className={codeTheme}>{element}</MarkdownRenderBlock>
+      {editing ? (
+        <MarkdownRenderBlock className={codeTheme}>
+          {element}
+        </MarkdownRenderBlock>
+      ) : (
+        <MarkdownRenderBlock dangerouslySetInnerHTML={{ __html: html }} />
+      )}
     </Typography>
   );
 };

src/components/common/Typography.tsx

@@ -5,7 +5,7 @@ import media from '../../lib/styles/media';
 
 const TypographyBlock = styled.div`
   font-size: 1.125rem;
-  color: ${palette.gray7};
+  color: ${palette.gray8};
   line-height: 1.85;
   letter-spacing: -0.02em;
   word-break: keep-all;
@@ -121,6 +121,29 @@ const TypographyBlock = styled.div`
       margin-top: 2rem;
     }
   }
+
+  blockquote {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border-left: 4px solid ${palette.teal5};
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: ${palette.gray0};
+    margin-left: 0;
+    margin-right: 0;
+    padding: 1rem;
+    padding-left: 2rem;
+    color: ${palette.gray9};
+    ul, ol {
+      padding-left: 1rem;
+    }
+    *:first-child {
+      margin-top: 0;
+    }
+    *:last-child {
+      margin-bottom: 0;
+    }
+  }
 `;
 
 export interface TypographyProps {}

src/components/post/PostCommentItem.tsx

@@ -34,6 +34,7 @@ const CommentHead = styled.div`
       height: 3.375rem;
       display: block;
       border-radius: 50%;
+      object-fit: cover;
       ${media.small} {
         width: 2.5rem;
         height: 2.5rem;
@@ -91,7 +92,7 @@ const CommentHead = styled.div`
   }
 `;
 
-const CommentText = styled.p<{ deleted: boolean }>`
+const CommentText = styled.div<{ deleted: boolean }>`
   h1,
   h2 {
     font-size: 1.75rem;

src/components/setting/SettingUserProfile.tsx

@@ -97,6 +97,7 @@ const Section = styled.section`
     display: flex;
     flex-direction: column;
     img {
+      object-fit: cover;
       width: 8rem;
       height: 8rem;
       border-radius: 50%;
@@ -113,7 +114,7 @@ const Section = styled.section`
         margin-bottom: 1rem;
       }
       button {
-        width: 8rem;
+        width: 10rem;
       }
       align-items: center;
       padding-bottom: 1.5rem;

src/components/velog/VelogResponsive.tsx

@@ -4,7 +4,8 @@ import media from '../../lib/styles/media';
 
 const VelogResponsiveBlock = styled.div`
   width: 768px;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
   ${media.small} {
     width: 100%;
   }

src/components/write/AddLink.tsx

@@ -55,7 +55,8 @@ const AddLinkBlock = styled.div`
 
 interface AddLinkProps {
   left: number;
-  top: number;
+  top: number | null;
+  bottom: number | null;
   stickToRight?: boolean;
   onConfirm: (link: string) => void;
   onClose: () => void;
@@ -68,6 +69,7 @@ const { useCallback, useRef, useEffect } = React;
 const AddLink: React.FC<AddLinkProps> = ({
   left,
   top,
+  bottom,
   stickToRight,
   onConfirm,
   onClose,
@@ -92,7 +94,8 @@ const AddLink: React.FC<AddLinkProps> = ({
       <AddLinkBlock
         style={{
           left: stickToRight ? 'initial' : left,
-          top,
+          top: top || 'initial',
+          bottom: bottom || 'initial',
           right: stickToRight ? '3rem' : 'initial',
         }}
       >

src/components/write/WriteMarkdownEditor.tsx

@@ -34,7 +34,8 @@ export interface MarkdownEditorProps {
 type MarkdownEditorState = {
   shadow: boolean;
   addLink: {
-    top: number;
+    top: number | null;
+    bottom: number | null;
     left: number;
     visible: boolean;
     stickToRight: boolean;
@@ -235,6 +236,7 @@ export default class WriteMarkdownEditor extends React.Component<
     shadow: false,
     addLink: {
       top: 0,
+      bottom: 0,
       left: 0,
       visible: false,
       stickToRight: false,
@@ -367,6 +369,7 @@ export default class WriteMarkdownEditor extends React.Component<
     const { lastUploadedImage, initialBody } = this.props;
     if (initialBody !== prevProps.initialBody) {
       if (!this.codemirror) return;
+      if (this.codemirror.getValue() === this.props.initialBody) return;
       this.codemirror.setValue(this.props.initialBody);
     }
     if (
@@ -403,15 +406,20 @@ export default class WriteMarkdownEditor extends React.Component<
     const cursorPos = this.codemirror.cursorCoords(cursor);
     if (!this.block.current) return;
     const stickToRight = cursorPos.left > this.block.current.clientWidth - 341;
-
+    const calculatedTop =
+      this.block.current.scrollTop +
+      cursorPos.top +
+      this.codemirror.defaultTextHeight() / 2 +
+      1;
+
+    const isAtBottom = calculatedTop + 173 > this.block.current?.clientHeight;
+    const pos = isAtBottom
+      ? { top: null, bottom: 64 }
+      : { top: calculatedTop, bottom: null };
     this.setState({
       addLink: {
         visible: true,
-        top:
-          this.block.current.scrollTop +
-          cursorPos.top +
-          this.codemirror.defaultTextHeight() / 2 +
-          1,
+        ...pos,
         left: cursorPos.left,
         stickToRight,
       },
@@ -837,6 +845,7 @@ ${selected}
                 defaultValue=""
                 left={addLink.left}
                 top={addLink.top}
+                bottom={addLink.bottom}
                 stickToRight={addLink.stickToRight}
                 onConfirm={this.handleConfirmAddLink}
                 onClose={this.handleCancelAddLink}

src/containers/write/ActiveEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { RootState } from '../../modules';
 import {
@@ -31,6 +31,7 @@ const ActiveEditor: React.FC<ActiveEditorProps> = () => {
   const mode = useSelector((state: RootState) => state.write.mode);
   const postId = useSelector((state: RootState) => state.write.postId);
   const [askLoadTemp, setAskLoadTemp] = useState(false);
+  const initialized = useRef(false);
 
   const dispatch = useDispatch();
   const location = useLocation();
@@ -75,6 +76,7 @@ const ActiveEditor: React.FC<ActiveEditorProps> = () => {
   const post = safe(() => readPostForEdit.data!.post);
   useEffect(() => {
     if (!post) return;
+    if (initialized.current) return;
     dispatch(
       prepareEdit({
         id: post.id,
@@ -91,6 +93,7 @@ const ActiveEditor: React.FC<ActiveEditorProps> = () => {
       }),
     );
     dispatch(setInitialBody(post.body));
+    initialized.current = true;
   }, [dispatch, post]);
 
   const lastPostHistory = safe(() => getLastPostHistory.data!.lastPostHistory);
@@ -105,6 +108,7 @@ const ActiveEditor: React.FC<ActiveEditorProps> = () => {
   useEffect(() => {
     if (!lastPostHistory) return;
     if (!post) return;
+
     const equals = shallowEqual(
       {
         title: lastPostHistory.title,

src/containers/write/MarkdownEditorContainer.tsx

@@ -249,7 +249,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     }
   }, [title, postId, onTempSave, lastSavedData, markdown]);
 
-  useSaveHotKey(onTempSave);
+  useSaveHotKey(() => onTempSave(true));
 
   return (
     <>