fix sometimes cannot markup

apis/index.ts

@@ -3,22 +3,25 @@ import invokeApi from '../helpers/apiHelpers';
 import apiPath from '../constants/apiPath';
 import config from '../config';
 
-export const initialPdfFile = async (token: string): Promise<any> => invokeApi({
-  path: apiPath.initPdf,
-  method: 'GET',
-  data: {
-    f: token,
-  },
-});
+export const initialPdfFile = async (token: string): Promise<any> =>
+  invokeApi({
+    path: apiPath.initPdf,
+    method: 'GET',
+    data: {
+      f: token,
+    },
+  });
 
-export const saveFile = async (token: string, data: any): Promise<any> => invokeApi({
-  path: `${apiPath.saveFile}?f=${token}`,
-  method: 'POST',
-  data,
-});
+export const saveFile = async (token: string, data: any): Promise<any> =>
+  invokeApi({
+    path: `${apiPath.saveFile}?f=${token}`,
+    method: 'POST',
+    data,
+  });
 
-export const fetchXfdf = (token: string): Promise<any> => (
-  fetch(`${config.API_HOST}${apiPath.getXfdf}?f=${token}`).then(res => res.text())
-);
+export const fetchXfdf = (token: string): Promise<any> =>
+  fetch(`${config.API_HOST}${apiPath.getXfdf}?f=${token}`).then(res =>
+    res.text()
+  );
 
 export default {};

components/AnnotationSelector/styled.ts

@@ -10,7 +10,7 @@ export const Container = styled.div`
   display: flex;
   padding: 0 5px;
   align-items: center;
-  
+
   :before {
     content: '';
     border-left: 20px solid transparent;

components/AnnotationWrapper/index.tsx

@@ -13,10 +13,7 @@ type Props = {
 
 type Ref = HTMLDivElement;
 
-const index = forwardRef<Ref, Props>(({
-  children,
-  ...rest
-}: Props, ref) => (
+const index = forwardRef<Ref, Props>(({ children, ...rest }: Props, ref) => (
   <Wrapper
     ref={ref}
     tabIndex={0}

components/AnnotationWrapper/styled.ts

@@ -4,3 +4,5 @@ export const Wrapper = styled.div`
   touch-action: none;
   outline: none;
 `;
+
+export default Wrapper;

components/Divider/index.tsx

@@ -8,13 +8,9 @@ export type Props = {
   variant?: 'fullWidth' | 'inset' | 'middle';
   light?: boolean;
   style?: Record<string, any>;
-}
+};
 
-const Divider: React.FC<Props> = props => (
-  <Component
-    {...props}
-  />
-);
+const Divider: React.FC<Props> = props => <Component {...props} />;
 
 Divider.defaultProps = {
   absolute: false,

components/Divider/styled.ts

@@ -2,32 +2,51 @@ import styled, { css } from 'styled-components';
 
 import { color } from '../../constants/style';
 
-export const Component = styled('hr')<{light?: boolean; absolute?: boolean; orientation?: string; variant?: string}>`
+export const Component = styled('hr')<{
+  light?: boolean;
+  absolute?: boolean;
+  orientation?: string;
+  variant?: string;
+}>`
   height: 1px;
   margin: 6px 0;
   border: none;
   flex-shrink: 0;
   background-color: ${props => (props.light ? 'white' : color['light-gray'])};
 
-  ${props => (props.absolute ? css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-  ` : '')}
+  ${props =>
+    props.absolute
+      ? css`
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+        `
+      : ''}
 
-  ${props => (props.orientation === 'vertical' ? css`
-    height: 100%;
-    width: 1px;
-    margin: 0 6px;
-  ` : '')}
+  ${props =>
+    props.orientation === 'vertical'
+      ? css`
+          height: 100%;
+          width: 1px;
+          margin: 0 6px;
+        `
+      : ''}
 
-  ${props => (props.variant === 'inset' ? css`
-    margin-left: 52px;
-  ` : '')}
+  ${props =>
+    props.variant === 'inset'
+      ? css`
+          margin-left: 52px;
+        `
+      : ''}
 
-  ${props => (props.variant === 'middle' ? css`
-    margin-left: 10px;
-    margin-right: 10px;
-  ` : '')}
+  ${props =>
+    props.variant === 'middle'
+      ? css`
+          margin-left: 10px;
+          margin-right: 10px;
+        `
+      : ''}
 `;
+
+export default Component;

components/ExpansionPanel/styled.ts

@@ -2,21 +2,24 @@ import styled, { css } from 'styled-components';
 
 import { color } from '../../constants/style';
 
-export const Container = styled('div')<{showBottomBorder: boolean}>`
+export const Container = styled('div')<{ showBottomBorder: boolean }>`
   display: inline-flex;
   flex-direction: column;
   width: 100%;
-  
-  ${props => (props.showBottomBorder ? css`
-    border-bottom: 1px solid ${color.black12};
-  ` : '')}  
+
+  ${props =>
+    props.showBottomBorder
+      ? css`
+          border-bottom: 1px solid ${color.black12};
+        `
+      : ''}
 `;
 
 export const Label = styled.span`
   padding: 8px;
 `;
 
-export const ContentWrapper = styled('div')<{isCollapse: boolean}>`
+export const ContentWrapper = styled('div')<{ isCollapse: boolean }>`
   display: inline-block;
   transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   max-height: ${props => (props.isCollapse ? '0px' : '800px')};

components/Icon/styled.ts

@@ -1,6 +1,9 @@
 import styled, { css } from 'styled-components';
 
-export const IconWrapper = styled('div')<{isHover: boolean; isDisabled: boolean }>`
+export const IconWrapper = styled('div')<{
+  isHover: boolean;
+  isDisabled: boolean;
+}>`
   position: relative;
   display: inline-flex;
   outline: none;
@@ -10,68 +13,73 @@ export const IconWrapper = styled('div')<{isHover: boolean; isDisabled: boolean
   justify-content: center;
   opacity: ${props => (props.isDisabled ? 0.7 : 1)};
 
-  ${props => (props.isDisabled ? css`
-    [data-status='normal'] {
-      opacity: 0.6;
-      cursor: default;
-    }
-    [data-status='hover'] {
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-    [data-status='active'] {
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  ` : css`
-    cursor: pointer;
+  ${props =>
+    props.isDisabled
+      ? css`
+          [data-status='normal'] {
+            opacity: 0.6;
+            cursor: default;
+          }
+          [data-status='hover'] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+          }
+          [data-status='active'] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+          }
+        `
+      : css`
+          cursor: pointer;
 
-    [data-status='normal'] {
-      opacity: 1;
-      transition-delay: 100ms;
-    }
-    [data-status='hover'] {
-      transition-delay: 100ms;
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-    [data-status='active'] {
-      transition-delay: 100ms;
-      opacity: 1;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
+          [data-status='normal'] {
+            opacity: 1;
+            transition-delay: 100ms;
+          }
+          [data-status='hover'] {
+            transition-delay: 100ms;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+          }
+          [data-status='active'] {
+            transition-delay: 100ms;
+            opacity: 1;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+          }
 
-    ${props.isHover ? css`
-      :hover {
-        [data-status='hover'] {
-          opacity: 1;
-        }
-        [data-status='normal'] {
-          opacity: 0;
-        }
-      }
-    ` : null}
-  `)}
+          ${props.isHover
+            ? css`
+                :hover {
+                  [data-status='hover'] {
+                    opacity: 1;
+                  }
+                  [data-status='normal'] {
+                    opacity: 0;
+                  }
+                }
+              `
+            : null}
+        `}
 `;
 
 export const ClickZone = styled.div`

components/Navbar/styled.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const Container = styled('div')<{isHidden: boolean}>`
+export const Container = styled('div')<{ isHidden: boolean }>`
   position: fixed;
   top: 0;
   height: 60px;
@@ -15,9 +15,14 @@ export const Container = styled('div')<{isHidden: boolean}>`
 
   transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
-  ${props => (props.isHidden ? css`
-    transform: translate(0, -60px);
-  ` : css`
-    transform: translate(0, 0);
-  `)}
+  ${props =>
+    props.isHidden
+      ? css`
+          transform: translate(0, -60px);
+        `
+      : css`
+          transform: translate(0, 0);
+        `}
 `;
+
+export default Container;

components/OuterRect/styled.ts

@@ -14,7 +14,7 @@ export const Rect = styled.rect`
   stroke-width: 3;
 `;
 
-const arrowDirection: {[index: string]: any} = {
+const arrowDirection: { [index: string]: any } = {
   'top-right': 'ne-resize',
   top: 'n-resize',
   'top-left': 'nw-resize',
@@ -25,6 +25,6 @@ const arrowDirection: {[index: string]: any} = {
   right: 'e-resize',
 };
 
-export const Circle = styled('circle')<{direction: string}>`
-  cursor: ${props => (arrowDirection[props.direction])};
+export const Circle = styled('circle')<{ direction: string }>`
+  cursor: ${props => arrowDirection[props.direction]};
 `;

components/Pagination/index.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Container, Text, Input, ArrowButton,
-} from './styled';
+import { Container, Text, Input, ArrowButton } from './styled';
 
 type Props = {
   currentPage: number;
@@ -66,11 +64,7 @@ const Pagination: React.FC<Props> = ({
         value={inputValue}
       />
       <ArrowButton onClick={handleRightClick} variant="right" />
-      <Text>
-        {t('of')}
-        {' '}
-        {totalPage}
-      </Text>
+      <Text>{`${t('of')} ${totalPage}`}</Text>
     </Container>
   );
 };

components/Pagination/styled.ts

@@ -23,7 +23,7 @@ export const Input = styled.input`
   padding: 5px;
 `;
 
-export const ArrowButton = styled('button')<{variant: string}>`
+export const ArrowButton = styled('button')<{ variant: string }>`
   height: 30px;
   width: 26px;
   outline: none;
@@ -35,44 +35,47 @@ export const ArrowButton = styled('button')<{variant: string}>`
   align-items: center;
   justify-content: center;
 
-  ${props => (props.variant === 'left' ? css`
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    margin-right: 1px;
-    :after {
-      content: '';
-      top: 0;
-      bottom: 0;
-      margin: auto;
-      width: 0;
-      height: 0; 
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right: 5px solid #000000;
-      position: absolute;
-      transform-origin: 50%;
-    }
-    :hover:after {
-      border-right: 5px solid ${color.black38};
-    }
-  ` : css`
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    margin-left: 1px;
-    :after {
-      content: '';
-      top: 0;
-      bottom: 0;
-      margin: auto;
-      width: 0; 
-      height: 0; 
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 5px solid #000000;
-      position: absolute;
-    }
-    :hover:after {
-      border-left: 5px solid ${color.black38};
-    }
-  `)}
+  ${props =>
+    props.variant === 'left'
+      ? css`
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+          margin-right: 1px;
+          :after {
+            content: '';
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-right: 5px solid #000000;
+            position: absolute;
+            transform-origin: 50%;
+          }
+          :hover:after {
+            border-right: 5px solid ${color.black38};
+          }
+        `
+      : css`
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+          margin-left: 1px;
+          :after {
+            content: '';
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-left: 5px solid #000000;
+            position: absolute;
+          }
+          :hover:after {
+            border-left: 5px solid ${color.black38};
+          }
+        `}
 `;

components/Portal/index.tsx

@@ -14,11 +14,10 @@ type Props = {
   children: React.ReactNode;
 };
 
-const Portal: React.FC<Props> = ({
-  zIndex = 0,
-  children = '',
-}) => {
-  const [container, setContainer] = useState(canUseDOM() ? createContainer(zIndex) : undefined);
+const Portal: React.FC<Props> = ({ zIndex = 0, children = '' }) => {
+  const [container, setContainer] = useState(
+    canUseDOM() ? createContainer(zIndex) : undefined
+  );
 
   useEffect(() => {
     if (container) {
@@ -35,9 +34,7 @@ const Portal: React.FC<Props> = ({
     };
   }, []);
 
-  return container ? (
-    ReactDOM.createPortal(children, container)
-  ) : null;
+  return container ? ReactDOM.createPortal(children, container) : null;
 };
 
 export default Portal;

components/Search/index.tsx

@@ -5,7 +5,11 @@ import Button from '../Button';
 import Portal from '../Portal';
 
 import {
-  Wrapper, InputWrapper, Input, ResultInfo, ArrowButton,
+  Wrapper,
+  InputWrapper,
+  Input,
+  ResultInfo,
+  ArrowButton,
 } from './styled';
 
 type Props = {
@@ -46,14 +50,22 @@ const Search: React.FC<Props> = ({
     <Portal>
       <Wrapper open={isActive}>
         <InputWrapper>
-          <Input ref={inputRef} placeholder={t('searchDocument')} onKeyDown={handleKeyDown} />
+          <Input
+            ref={inputRef}
+            placeholder={t('searchDocument')}
+            onKeyDown={handleKeyDown}
+          />
           <ResultInfo>
             {matchesTotal ? `${current} / ${matchesTotal}` : ''}
           </ResultInfo>
         </InputWrapper>
         <ArrowButton variant="top" onClick={onPrev} />
         <ArrowButton variant="bottom" onClick={onNext} />
-        <Button appearance="primary" style={{ marginLeft: '16px' }} onClick={close}>
+        <Button
+          appearance="primary"
+          style={{ marginLeft: '16px' }}
+          onClick={close}
+        >
           {t('close')}
         </Button>
       </Wrapper>

components/Search/styled.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 import { color } from '../../constants/style';
 
-export const Wrapper = styled('div')<{open: boolean}>`
+export const Wrapper = styled('div')<{ open: boolean }>`
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: white;
@@ -47,7 +47,7 @@ export const ResultInfo = styled.span`
   text-align: right;
 `;
 
-export const ArrowButton = styled('button')<{variant: string}>`
+export const ArrowButton = styled('button')<{ variant: string }>`
   height: 32px;
   width: 30px;
   outline: none;
@@ -59,35 +59,38 @@ export const ArrowButton = styled('button')<{variant: string}>`
   align-items: center;
   justify-content: center;
 
-  ${props => (props.variant === 'top' ? css`
-    margin-left: 1px;
-    :after {
-      content: '';
-      width: 0; 
-      height: 0; 
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom: 5px solid black;
-      position: absolute;
-    }
-    :hover:after {
-      border-bottom: 5px solid ${color.black38};
-    }
-  ` : css`
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    margin-left: 1px;
-    :after {
-      content: '';
-      width: 0; 
-      height: 0; 
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid black;
-      position: absolute;
-    }
-    :hover:after {
-      border-top: 5px solid ${color.black38};
-    }
-  `)}
+  ${props =>
+    props.variant === 'top'
+      ? css`
+          margin-left: 1px;
+          :after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid black;
+            position: absolute;
+          }
+          :hover:after {
+            border-bottom: 5px solid ${color.black38};
+          }
+        `
+      : css`
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+          margin-left: 1px;
+          :after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid black;
+            position: absolute;
+          }
+          :hover:after {
+            border-top: 5px solid ${color.black38};
+          }
+        `}
 `;

components/SelectBox/styled.ts

@@ -18,7 +18,7 @@ export const Selected = styled.div`
   height: 32px;
   border-radius: 4px;
   padding: 0 6px 0 10px;
-  transition: background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   outline: none;
   width: 100%;
 `;

components/Skeleton/styled.ts

@@ -14,7 +14,7 @@ const animate = keyframes`
   }
 `;
 
-const shape: {[index: string]: any} = {
+const shape: { [index: string]: any } = {
   rect: '',
   text: css`
     margin-top: 8px;
@@ -23,9 +23,9 @@ const shape: {[index: string]: any} = {
     transform: translateZ(0) scale(1, 0.65);
     border-radius: 4px;
     text-indent: -999px;
-    
+
     &:empty:before {
-      content: " ";
+      content: ' ';
     }
   `,
   circle: css`
@@ -33,7 +33,7 @@ const shape: {[index: string]: any} = {
   `,
 };
 
-export const Element = styled('div')<{variant: string}>`
+export const Element = styled('div')<{ variant: string }>`
   display: block;
   background-color: ${color.gray};
   animation: ${animate} 1.5s ease-in-out infinite;
@@ -41,3 +41,5 @@ export const Element = styled('div')<{variant: string}>`
 
   ${props => shape[props.variant]}
 `;
+
+export default Element;

components/SliderWithTitle/index.tsx

@@ -25,11 +25,7 @@ const index = ({
   maximum,
 }: Props): React.ReactElement => (
   <>
-    <Typography
-      variant="subtitle"
-      style={{ marginTop: '4px' }}
-      align="left"
-    >
+    <Typography variant="subtitle" style={{ marginTop: '4px' }} align="left">
       {title}
     </Typography>
     <Group>

components/StickyNote/styled.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const TextAreaContainer = styled('div')<{top: string; left: string}>`
+export const TextAreaContainer = styled('div')<{ top: string; left: string }>`
   position: absolute;
   top: ${props => props.top};
   left: ${props => props.left};

components/SvgShapeElement/index.tsx

@@ -21,9 +21,7 @@ const SvgShapeElement: React.FC<Props> = ({
   fcolor,
   ftransparency,
 }: Props) => (
-  <svg
-    viewBox={`0 0 ${width} ${height}`}
-  >
+  <svg viewBox={`0 0 ${width} ${height}`}>
     {shape === 'Circle' ? (
       <ellipse
         cx="50%"

components/Tabs/styled.ts

@@ -15,7 +15,7 @@ export const BtnGroup = styled.div`
   border: 1.5px solid ${color.primary};
 `;
 
-export const Btn = styled('button')<{isActive?: boolean}>`
+export const Btn = styled('button')<{ isActive?: boolean }>`
   height: 30px;
   width: 100%;
   outline: none;
@@ -27,8 +27,11 @@ export const Btn = styled('button')<{isActive?: boolean}>`
   font-weight: bold;
   box-sizing: border-box;
 
-  ${props => (props.isActive ? css`
-    background-color: ${color.primary};
-    color: white;
-  ` : null)}
+  ${props =>
+    props.isActive
+      ? css`
+          background-color: ${color.primary};
+          color: white;
+        `
+      : null}
 `;

components/Thumbnail/index.tsx

@@ -2,9 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { scrollIntoView } from '../../helpers/utility';
 
-import {
-  Wrapper, PageNum, Img, Loading,
-} from './styled';
+import { Wrapper, PageNum, Img, Loading } from './styled';
 
 type Props = {
   pageNum: number;
@@ -41,13 +39,11 @@ const index: React.FC<Props> = ({
   return (
     <Wrapper id={`thumbnail_${pageNum}`}>
       <PageNum>{pageNum}</PageNum>
-      {
-        renderingState === 'RENDERING' && dataUrl ? (
-          <Img src={dataUrl} onClick={onClick} />
-        ) : (
-          <Loading />
-        )
-      }
+      {renderingState === 'RENDERING' && dataUrl ? (
+        <Img src={dataUrl} onClick={onClick} />
+      ) : (
+        <Loading />
+      )}
     </Wrapper>
   );
 };

components/ThumbnailViewer/styled.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const ThumbnailsWrapper = styled.div`
   display: inline-flex;

components/Toolbar/styled.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const Container = styled('div')<{isHidden: boolean}>`
+export const Container = styled('div')<{ isHidden: boolean }>`
   position: fixed;
   top: 86px;
   left: 267px;
@@ -20,13 +20,16 @@ export const Container = styled('div')<{isHidden: boolean}>`
 
   transition: all 225ms ease-in-out;
 
-  ${props => (props.isHidden ? css`
-    opacity: 0;
-    visibility: hidden;
-  ` : css`
-    opacity: 1;
-    visibility: visible;
-  `)}
+  ${props =>
+    props.isHidden
+      ? css`
+          opacity: 0;
+          visibility: hidden;
+        `
+      : css`
+          opacity: 1;
+          visibility: visible;
+        `}
 `;
 
 export const ToggleButton = styled.div`
@@ -34,7 +37,7 @@ export const ToggleButton = styled.div`
   right: 20px;
   bottom: 15px;
   z-index: 2;
-  box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.32);
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.32);
   border-radius: 40px;
   width: 80px;
   height: 80px;

components/Tooltip/index.tsx

@@ -18,19 +18,19 @@ const Tooltip: React.FC<Props> = ({
   <Manager>
     <Reference>
       {({ ref }): React.ReactElement => (
-        <TargetWrapper ref={ref}>
-          {children}
-        </TargetWrapper>
+        <TargetWrapper ref={ref}>{children}</TargetWrapper>
       )}
     </Reference>
     <Portal>
       <Popper placement={anchor}>
-        {({
-          ref, style, placement, arrowProps,
-        }): React.ReactElement => (
+        {({ ref, style, placement, arrowProps }): React.ReactElement => (
           <TooltipContainer ref={ref} style={style} data-placement={placement}>
             {content}
-            <Arrow data-placement={placement} ref={arrowProps.ref} style={arrowProps.style} />
+            <Arrow
+              data-placement={placement}
+              ref={arrowProps.ref}
+              style={arrowProps.style}
+            />
           </TooltipContainer>
         )}
       </Popper>

components/Tooltip/styled.ts

@@ -17,19 +17,19 @@ export const TooltipContainer = styled.div`
   box-sizing: border-box;
 
   &[data-placement*='bottom'] {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.30);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
     margin-top: 10px;
   }
   &[data-placement*='top'] {
-    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.30);
+    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.3);
     margin-bottom: 10px;
   }
   &[data-placement*='left'] {
-    box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.30);
+    box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.3);
     margin-right: 14px;
   }
   &[data-placement*='right'] {
-    box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.30);
+    box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.3);
     margin-left: 14px;
   }
 `;

components/WatermarkImageSelector/index.tsx

@@ -16,10 +16,9 @@ const ImageSelector: React.FC<Props> = ({
   onChange,
 }: Props): React.ReactElement => {
   const handleClick = (): void => {
-    uploadFile('.png,.jpg,.jpeg,.svg')
-      .then((urlData) => {
-        onChange(urlData);
-      });
+    uploadFile('.png,.jpg,.jpeg,.svg').then(urlData => {
+      onChange(urlData);
+    });
   };
 
   return (

components/WatermarkImageSelector/styled.ts

@@ -4,3 +4,5 @@ export const ContentWrapper = styled.div`
   margin-top: 20px;
   display: flex;
 `;
+
+export default ContentWrapper;

components/WatermarkOption/styled.ts

@@ -3,3 +3,5 @@ import styled from 'styled-components';
 export const BtnWrapper = styled.div`
   padding: 8px;
 `;
+
+export default BtnWrapper;

components/WatermarkPageSelector/index.tsx

@@ -9,13 +9,9 @@ type Props = {
   t: (key: string) => string;
 };
 
-const PageSelector: React.FC<Props> = ({
-  t,
-}: Props) => (
+const PageSelector: React.FC<Props> = ({ t }: Props) => (
   <Group>
-    <Typography variant="subtitle">
-      {t('pageRange')}
-    </Typography>
+    <Typography variant="subtitle">{t('pageRange')}</Typography>
     <Button appearance="primary-hollow" style={{ width: '50%' }}>
       {t('All Pages')}
     </Button>

components/WatermarkTextBox/styled.ts

@@ -4,3 +4,5 @@ export const ContentWrapper = styled.div`
   margin-top: 20px;
   display: flex;
 `;
+
+export default ContentWrapper;

containers/HighlightTools.tsx

@@ -41,7 +41,7 @@ const HighlightTools: React.FC<Props> = ({
     (e: MouseEvent | TouchEvent): void => {
       if (e.target && isActive) {
         const textLayer = (e.target as HTMLElement).parentNode as HTMLElement;
-        if (textLayer && textLayer.getAttribute('data-id') === 'text-layer') {
+        if (textLayer) {
           const newMarkup = getMarkupWithSelection({
             ...data,
             scale,

helpers/brush.ts

@@ -4,17 +4,27 @@ type Coordinates = {
 };
 
 type CreatePolylineType = (
-  (
-    penCoordinates: Coordinates, color: string, opacity: number, strokeWidth: number,
-  ) => SVGPolylineElement
-);
+  penCoordinates: Coordinates,
+  color: string,
+  opacity: number,
+  strokeWidth: number
+) => SVGPolylineElement;
 
 type CompletePathType = (
-  (pathElement: SVGPolylineElement | null, penCoordinates: Coordinates) => void
-);
+  pathElement: SVGPolylineElement | null,
+  penCoordinates: Coordinates
+) => void;
 
-export const createPolyline: CreatePolylineType = (penCoordinates, color, opacity, strokeWidth) => {
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+export const createPolyline: CreatePolylineType = (
+  penCoordinates,
+  color,
+  opacity,
+  strokeWidth
+) => {
+  const path = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'polyline'
+  );
   path.setAttribute('fill', 'none');
   path.setAttribute('stroke', color);
   path.setAttribute('stroke-width', strokeWidth.toString());

helpers/dom.ts

@@ -1,6 +1,5 @@
-export const canUseDOM = (): boolean => (
-  !!(typeof window !== 'undefined' && window.document)
-);
+export const canUseDOM = (): boolean =>
+  !!(typeof window !== 'undefined' && window.document);
 
 export const xmlParser = (xmlString: string): Document => {
   const parser = new window.DOMParser();
@@ -8,10 +7,13 @@ export const xmlParser = (xmlString: string): Document => {
   return xmlDoc;
 };
 
-export const getElementsByTagName = (elements: ChildNode, tagname: string): NodeList => {
+export const getElementsByTagName = (
+  elements: ChildNode,
+  tagname: string
+): NodeList => {
   const arr = Array.prototype.slice.call(elements.childNodes);
   let element: any = null;
-  arr.forEach((ele) => {
+  arr.forEach(ele => {
     if (ele.tagName === tagname) {
       element = ele.childNodes;
     }

helpers/svgBezierCurve.ts

@@ -1,43 +1,52 @@
 type PointType = { x: number; y: number };
 
 type LineFunc = (
-  (pointA: PointType, pointB: PointType) => { length: number; angle: number}
-);
+  pointA: PointType,
+  pointB: PointType
+) => { length: number; angle: number };
 
 type ControlPointClosure = (
-  (current: PointType, previous: PointType, next: PointType, reverse?: boolean) => number[]
-);
+  current: PointType,
+  previous: PointType,
+  next: PointType,
+  reverse?: boolean
+) => number[];
 
 type ControlPointFunc = (
-  (lineCale: LineFunc, smooth: number) => ControlPointClosure
-);
+  lineCale: LineFunc,
+  smooth: number
+) => ControlPointClosure;
 
 type BezierCommandClosure = (
-  (point: PointType, i: number, a: PointType[]) => string
-);
+  point: PointType,
+  i: number,
+  a: PointType[]
+) => string;
 
 type BezierCommandFunc = (
-  (controlPoint: ControlPointClosure) => BezierCommandClosure
-);
+  controlPoint: ControlPointClosure
+) => BezierCommandClosure;
 
 type SvgPathFunc = (
-  (points: PointType[], command: BezierCommandClosure) => string
-);
+  points: PointType[],
+  command: BezierCommandClosure
+) => string;
 
 export const line: LineFunc = (pointA, pointB) => {
   const lengthX = pointB.x - pointA.x;
   const lengthY = pointB.y - pointA.y;
 
   return {
-    length: Math.sqrt((lengthX ** 2) + (lengthY ** 2)),
+    length: Math.sqrt(lengthX ** 2 + lengthY ** 2),
     angle: Math.atan2(lengthY, lengthX),
   };
 };
 
-export const controlPoint: ControlPointFunc = (
-  lineCale, smooth,
-) => (
-  current, previous, next, reverse,
+export const controlPoint: ControlPointFunc = (lineCale, smooth) => (
+  current,
+  previous,
+  next,
+  reverse
 ): number[] => {
   // When 'current' is the first or last point of the array
   // 'previous' or 'next' don't exist.
@@ -56,7 +65,11 @@ export const controlPoint: ControlPointFunc = (
   return [x, y];
 };
 
-export const bezierCommand: BezierCommandFunc = controlPointCalc => (point, i, a): string => {
+export const bezierCommand: BezierCommandFunc = controlPointCalc => (
+  point,
+  i,
+  a
+): string => {
   // start control point
   const [cpsX, cpsY] = controlPointCalc(a[i - 1], a[i - 2], point);
   // end control point
@@ -67,12 +80,9 @@ export const bezierCommand: BezierCommandFunc = controlPointCalc => (point, i, a
 
 export const svgPath: SvgPathFunc = (points, command) => {
   const d = points.reduce(
-    (acc, point, i, a) => (i === 0 ? (
-      `M ${point.x},${point.y}`
-    ) : (
-      `${acc} ${command(point, i, a)}`
-    )),
-    '',
+    (acc, point, i, a) =>
+      i === 0 ? `M ${point.x},${point.y}` : `${acc} ${command(point, i, a)}`,
+    ''
   );
   return d;
 };

pages/_error.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { NextPage } from 'next';
 
-const error: NextPage = () => (
-  <div>
-    404 ERROR
-  </div>
-);
+const error: NextPage = () => <div>404 ERROR</div>;
 
 export default error;