Implements convert to markdown button

velopert · velopert · commit eeaeb9f0ab9f · 2019-04-13T00:06:24.000+09:00
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@types/redux-mock-store": "^1.0.0",
     "@types/snakecase-keys": "^2.1.0",
     "@types/styled-components": "^4.1.8",
+    "@types/turndown": "^5.0.0",
     "apollo-boost": "^0.1.28",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
diff --git a/samples/mdConvertSample.js b/samples/mdConvertSample.js
@@ -6,24 +6,24 @@ const TurndownService = require('turndown');
 // }
 // </pre><p><br></p><p>asdfasdf</p><p><br></p><blockquote>asdfasdf</blockquote><blockquote><br></blockquote><blockquote>asdf</blockquote><blockquote><br></blockquote><blockquote>asdf</blockquote><blockquote>asdfasfasdfasd</blockquote><blockquote>fasfasdfasd</blockquote><blockquote>fasdfasdf</blockquote><p><br></p><p>이정도면 <a href="https://google.com/" target="_blank">있는거</a> 다 사용한거죠? </p><p><br></p><p><br></p><p><br></p></div><div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>`;
 
-let html = `<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="당신의 이야기를 적어보세요..."><pre class="ql-syntax" spellcheck="false"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>() </span>{
-  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello world!'</span>);
-}
-</pre></div><div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>`;
+let html = `<del>Hi there</del>`;
 const replaceMultiBlockquote = text =>
   text.replace(/<\/blockquote><blockquote>/g, '<br/>'); // credits to Hyeseong kim
 
 html = replaceMultiBlockquote(html);
 const turndownService = new TurndownService();
 
-turndownService.keep('del');
+turndownService.addRule('linethrough', {
+  filter: ['del'],
+  replacement: content => `~${content}~`,
+});
 
 turndownService.addRule('codeblock', {
   filter: ['pre'],
   replacement: content => {
     return `\`\`\`
 ${content}
-\`\`\``;
+\`\`\`(${content})`;
   },
 });
 
@@ -49,7 +49,7 @@ Array.from({ length: 8 }).forEach((_, i) => {
   });
 });
 
-turndownService.addRule('listItem', {
+turndownService.addRule('ordered listItem', {
   filter: el => {
     return el.tagName === 'LI' && el.parentElement.tagName === 'OL';
   },
diff --git a/src/components/write/MarkdownEditor.tsx b/src/components/write/MarkdownEditor.tsx
@@ -534,7 +534,6 @@ ${selected}
             />
           </PaddingWrapper>
           <Toolbar
-            visible
             shadow={shadow}
             mode="MARKDOWN"
             onClick={this.handleToolbarClick}
diff --git a/src/components/write/QuillEditor.tsx b/src/components/write/QuillEditor.tsx
@@ -12,11 +12,12 @@ import AddLink from './AddLink';
 import postStyles from '../../lib/styles/postStyles';
 import TitleTextarea from './TitleTextarea';
 import { getScrollTop } from '../../lib/utils';
+import convertToMarkdown from '../../lib/convertToMarkdown';
 
 Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
 
-export interface FullPageEditorProps {}
-export interface FullPageEditorState {
+export interface QuillEditorProps {}
+export interface QuillEditorState {
   titleFocus: boolean;
   editorFocus: boolean;
   addLink: boolean;
@@ -28,8 +29,12 @@ export interface FullPageEditorState {
   shadow: boolean;
 }
 
-const FullPageEditorWrapper = styled.div`
-  padding-top: 1.5rem;
+const StyledTitleTextarea = styled(TitleTextarea)`
+  margin-bottom: 2rem;
+`;
+
+const QuillEditorWrapper = styled.div`
+  padding-top: 5rem;
   position: relative;
   /* display: flex;
   flex-direction: column;
@@ -46,7 +51,7 @@ const FullPageEditorWrapper = styled.div`
 `;
 
 const Editor = styled.div`
-  margin-top: 2rem;
+  margin-top: 1rem;
   position: relative;
   .ql-container {
     font-family: inherit;
@@ -112,9 +117,9 @@ const Editor = styled.div`
   }
 `;
 
-export default class FullPageEditor extends React.Component<
-  FullPageEditorProps,
-  FullPageEditorState
+export default class QuillEditor extends React.Component<
+  QuillEditorProps,
+  QuillEditorState
 > {
   editor = React.createRef<HTMLDivElement>();
   titleTextarea: HTMLTextAreaElement | null = null;
@@ -185,6 +190,22 @@ export default class FullPageEditor extends React.Component<
           quill.format('code-block', false);
         },
       },
+      removeQuote: {
+        key: 'enter',
+        empty: true,
+        format: ['blockquote'],
+        handler: (range: RangeStatic, context: any) => {
+          quill.format('blockquote', false);
+        },
+      },
+      removeQuoteWithBackspace: {
+        key: 'backspace',
+        empty: true,
+        format: ['blockquote'],
+        handler: (range: RangeStatic, context: any) => {
+          quill.format('blockquote', false);
+        },
+      },
     };
 
     const quill = new Quill(this.editor.current as Element, {
@@ -328,7 +349,7 @@ export default class FullPageEditor extends React.Component<
 
   // blocks [Enter] key
   handleTitleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.keyCode === 13) {
+    if ([9, 13].includes(e.keyCode)) {
       e.preventDefault();
       if (this.quill) {
         this.quill.focus();
@@ -354,6 +375,12 @@ export default class FullPageEditor extends React.Component<
     this.setState({ addLink: false });
   };
 
+  handleConvertToMarkdown = () => {
+    if (!this.quill) return;
+    const html = this.quill.root.innerHTML;
+    console.log(convertToMarkdown(html));
+  };
+
   public render() {
     const {
       addLink,
@@ -363,19 +390,24 @@ export default class FullPageEditor extends React.Component<
       shadow,
     } = this.state;
     return (
-      <FullPageEditorWrapper>
-        <Toolbar visible={!titleFocus} shadow={shadow} mode="WYSIWYG" />
-        <TitleTextarea
+      <QuillEditorWrapper>
+        <StyledTitleTextarea
           placeholder="제목을 입력하세요"
           onKeyDown={this.handleTitleKeyDown}
           inputRef={ref => {
             this.titleTextarea = ref;
           }}
           onFocus={this.handleTitleFocus}
           onBlur={this.handleTitleBlur}
+          tabIndex={1}
+        />
+        <Toolbar
+          shadow={shadow}
+          mode="WYSIWYG"
+          onConvertToMarkdown={this.handleConvertToMarkdown}
         />
         <Editor>
-          <div ref={this.editor} />
+          <div ref={this.editor} tabIndex={2} />
           {addLink && (
             <AddLink
               {...addLinkPosition}
@@ -386,7 +418,7 @@ export default class FullPageEditor extends React.Component<
             />
           )}
         </Editor>
-      </FullPageEditorWrapper>
+      </QuillEditorWrapper>
     );
   }
 }
diff --git a/src/components/write/Toolbar.tsx b/src/components/write/Toolbar.tsx
@@ -12,10 +12,10 @@ import {
 } from 'react-icons/md';
 import palette from '../../lib/styles/palette';
 import zIndexes from '../../lib/styles/zIndexes';
+import { FaMarkdown } from 'react-icons/fa';
 
 // box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.09);
 const ToolbarBlock = styled.div<{
-  visible: boolean;
   shadow: boolean;
   forMarkdown: boolean;
 }>`
@@ -25,7 +25,7 @@ const ToolbarBlock = styled.div<{
   height: 3rem;
   display: flex;
   align-items: center;
-  margin-bottom: 3rem;
+  margin-bottom: 1rem;
   position: sticky;
   width: 100%;
   background: white;
@@ -36,11 +36,6 @@ const ToolbarBlock = styled.div<{
     css`
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.09);
     `}
-  ${props =>
-    !props.visible &&
-    css`
-      visibility: hidden;
-    `};
   ${props =>
     props.forMarkdown &&
     css`
@@ -52,7 +47,7 @@ const ToolbarBlock = styled.div<{
     `}
 `;
 
-const TooblarGroup = styled.div`
+const ToolbarGroup = styled.div`
   display: flex;
   height: 100%;
 `;
@@ -96,28 +91,23 @@ const Separator = styled.div`
   background: ${palette.gray4};
 `;
 export interface ToolbarProps {
-  visible: boolean;
   shadow: boolean;
   mode: 'MARKDOWN' | 'WYSIWYG';
   onClick?: Function;
+  onConvertToMarkdown?: () => void;
 }
 
 const { useEffect, useState, useCallback } = React;
 const Toolbar: React.SFC<ToolbarProps> = ({
-  visible,
   shadow,
   mode,
   onClick = () => {},
+  onConvertToMarkdown,
 }) => {
   const forMarkdown = mode === 'MARKDOWN';
   return (
-    <ToolbarBlock
-      visible={visible}
-      id="toolbar"
-      shadow={shadow}
-      forMarkdown={forMarkdown}
-    >
-      <TooblarGroup>
+    <ToolbarBlock id="toolbar" shadow={shadow} forMarkdown={forMarkdown}>
+      <ToolbarGroup>
         <ToolbarItem
           className="ql-header"
           value={1}
@@ -154,9 +144,9 @@ const Toolbar: React.SFC<ToolbarProps> = ({
             H<span>4</span>
           </Heading>
         </ToolbarItem>
-      </TooblarGroup>
+      </ToolbarGroup>
       <Separator />
-      <TooblarGroup>
+      <ToolbarGroup>
         <ToolbarItem className="ql-bold" onClick={() => onClick('bold')}>
           <MdFormatBold />
         </ToolbarItem>
@@ -171,9 +161,9 @@ const Toolbar: React.SFC<ToolbarProps> = ({
         <ToolbarItem className="ql-strike" onClick={() => onClick('strike')}>
           <MdFormatStrikethrough />
         </ToolbarItem>
-      </TooblarGroup>
+      </ToolbarGroup>
       <Separator />
-      <TooblarGroup>
+      <ToolbarGroup>
         <ToolbarItem
           className="ql-blockquote"
           onClick={() => onClick('blockquote')}
@@ -192,7 +182,15 @@ const Toolbar: React.SFC<ToolbarProps> = ({
         >
           <MdCode />
         </ToolbarItem>
-      </TooblarGroup>
+      </ToolbarGroup>
+      <Separator />
+      <ToolbarGroup>
+        {forMarkdown ? null : (
+          <ToolbarItem onClick={onConvertToMarkdown}>
+            <FaMarkdown />
+          </ToolbarItem>
+        )}
+      </ToolbarGroup>
     </ToolbarBlock>
   );
 };
diff --git a/src/lib/convertToMarkdown.ts b/src/lib/convertToMarkdown.ts
@@ -0,0 +1,51 @@
+import TurndownService from 'turndown';
+
+let turndownService: TurndownService | null = null;
+
+export default function convertToMarkdown(html: string): string {
+  // initialize turndownService
+  if (!turndownService) {
+    turndownService = new TurndownService({
+      headingStyle: 'atx',
+    });
+  }
+  if (!turndownService) return '';
+
+  turndownService.addRule('linethrough', {
+    filter: ['del'],
+    replacement: content => `~${content}~`,
+  });
+  turndownService.addRule('codeblock', {
+    filter: ['pre'],
+    replacement: content => {
+      return `\`\`\`
+${content}
+\`\`\``;
+    },
+  });
+  turndownService.addRule('underline', {
+    filter: ['u'],
+    replacement: content => `<u>${content}</u>`,
+  });
+  turndownService.addRule('ordered listItem', {
+    filter: el => {
+      return !!(
+        el.tagName === 'LI' &&
+        el.parentElement &&
+        el.parentElement.tagName === 'OL'
+      );
+    },
+    replacement: (content, node, options) => {
+      const indent = ~~(node as any).className.replace('ql-indent-', '');
+      const spaces = ' '.repeat(indent * 2);
+      const parent = node.parentNode;
+      const siblings = [...(parent!.children as any)].filter(
+        el => el.className === (node as any).className,
+      );
+      const index = siblings.indexOf(node);
+      return `\n${spaces} ${index + 1}. ${content}`;
+    },
+  });
+
+  return turndownService.turndown(html);
+}
diff --git a/src/pages/WritePage.tsx b/src/pages/WritePage.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-// import FullPageEditor from '../components/write/FullPageEditor';
+import QuillEditor from '../components/write/QuillEditor';
 import EditorPanes from '../components/write/EditorPanes';
 
 import MarkdownEditorContainer from '../containers/write/MarkdownEditorContainer';
@@ -16,11 +16,11 @@ interface WritePageProps {}
 const WritePage: React.SFC<WritePageProps> = props => {
   return (
     <WritePageBlock>
-      {/* <FullPageEditor /> */}
-      <EditorPanes
+      <QuillEditor />
+      {/* <EditorPanes
         left={<MarkdownEditorContainer />}
         right={<MarkdownPreviewContainer />}
-      />
+      /> */}
     </WritePageBlock>
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1297,6 +1297,11 @@
   dependencies:
     "@types/estree" "*"
 
+"@types/turndown@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.0.tgz#2b763b36f783e4e237cea62cdc8f8592b72b9285"
+  integrity sha512-Y7KZn6SfSv1vzjByJGijrM9w99HoUbLiAgYwe+sGH6RYi5diIGLYOcr4Z1YqR2biFs9K5PnxKv/Fbkmh57pvzg==
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.2.tgz#5dc0a7f76809b7518c0df58689cd16a19bd751c6"
