From 35cda72a3dcde3e845a87a4b4e82b1515d80d081 Mon Sep 17 00:00:00 2001
From: lizheming <i@imnerd.org>
Date: Wed, 1 Jan 2020 15:05:35 +0800
Subject: [PATCH] add pinyin convert

---
 package.json                                  |  1 +
 www/static/src/components/article/article.tsx | 36 ++++++++++++++++---
 www/static/src/components/editor/index.tsx    |  2 +-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0248d9c80..4e5331250 100644
--- a/package.json
+++ b/package.json
@@ -142,6 +142,7 @@
     "style-loader": "^0.13.0",
     "superagent": "^5.0.2",
     "think-watcher": "^3.0.0",
+    "tiny-pinyin": "^1.3.0",
     "ts-import-plugin": "^1.5.4",
     "ts-loader": "^4.4.2",
     "tslint": "^5.11.0",
diff --git a/www/static/src/components/article/article.tsx b/www/static/src/components/article/article.tsx
index aa526f257..87b72b9a5 100644
--- a/www/static/src/components/article/article.tsx
+++ b/www/static/src/components/article/article.tsx
@@ -3,6 +3,7 @@ import { Row, Col, DatePicker, message } from 'antd';
 import { inject, observer } from 'mobx-react';
 import moment from 'moment';
 import { zip } from 'rxjs';
+import pinyin from 'tiny-pinyin';
 
 import ArticleHeader from './article-header/article-header';
 import ArticleEditor from './article-editor/article-editor';
@@ -34,6 +35,7 @@ class Article extends React.Component<ArticleProps, {}> {
             pathname: false,
             title: false,
         },
+        autocompletePathname: !this.props.match.params.id
     };
 
     constructor(props: any) {
@@ -218,13 +220,39 @@ class Article extends React.Component<ArticleProps, {}> {
     }
 
     handleTitle(e: React.ChangeEvent<HTMLInputElement>) {
-        this.setState({
-            hasError: Object.assign({}, this.state.hasError, { title: false }),
-        });
-        this.props.articleStore.setArticleInfo({ title: e.target.value });
+        const {autocompletePathname, hasError} = this.state;
+        const nextHasError = Object.assign({}, hasError);
+        const {articleInfo, setArticleInfo} = this.props.articleStore;
+        const nextInfo = {
+            title: e.target.value,
+            pathname: articleInfo.pathname
+        };
+        hasError.title = false;
+
+        if(autocompletePathname && pinyin.isSupported()) {
+            let text = '';
+            let lastToken;
+            const format = str => str ? str.toLowerCase() : '';
+            const tokens = pinyin.parse(nextInfo.title);
+            tokens.forEach(v => {
+                if(v.type === 2) {
+                    text += text && !/\n|\s/.test(lastToken.target) ? '-' + format(v.target) : format(v.target)
+                } else {
+                    text += (lastToken && lastToken.type === 2 ? '-' : '') + v.target; 
+                }
+                lastToken = v;
+            });
+
+            nextInfo.pathname = text;
+            hasError.pathname = false;
+        }
+
+        this.setState({hasError: nextHasError});
+        setArticleInfo(nextInfo);
     }
     handlePath(e: React.ChangeEvent<HTMLInputElement>) {
         this.setState({
+            autocompletePathname: false,
             hasError: Object.assign({}, this.state.hasError, { pathname: false }),
         });
         this.props.articleStore.setArticleInfo({ pathname: e.target.value });
diff --git a/www/static/src/components/editor/index.tsx b/www/static/src/components/editor/index.tsx
index c230ceb65..3a897cc02 100644
--- a/www/static/src/components/editor/index.tsx
+++ b/www/static/src/components/editor/index.tsx
@@ -311,7 +311,7 @@ class MarkDownEditor extends React.Component<MdEditorProps, any> {
           <div className={previewClass} ref={div => this.preview = div} dangerouslySetInnerHTML={{ __html: this.state.result }}/>
           <div className={classnames({hide: this.state.mode !== 'split'}, 'md-spliter')} />
         </div>
-        <a ref={a => this.resizebar = a} href="javascript:void(0);" className="editor__resize">调整高度</a>
+        <a ref={a => this.resizebar = a} href="###" className="editor__resize">调整高度</a>
         <EditorLinkModal
           visible={this.state.visible.link} 
           onCancel={() => {this.setState({visible: Object.assign({}, this.state.visible, {link: false})}); (this.linkRef.props.form as WrappedFormUtils).resetFields(); }}