add auto link

package-lock.json

@@ -6305,6 +6305,14 @@
         "type-check": "0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.0.3.tgz",
+      "integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
+      "requires": {
+        "uc.micro": "1.0.5"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -8788,6 +8796,16 @@
       "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-2.3.0.tgz",
       "integrity": "sha512-0z3qmL+qtSERdfKFpn0yKXm+1Gg1ZLZBXnCzHhSGiu1L8iDARuCkbOypxEx9+ETxZvMnXj98xvWCs5jyXTuM2w=="
     },
+    "react-linkify": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/react-linkify/-/react-linkify-0.2.2.tgz",
+      "integrity": "sha512-0S8cvUNtEgfJpIGDPKklyrnrTffJ63WuJAc4KaYLBihl5TjgH5cHUmYD+AXLpsV+CVmfoo/56SUNfrZcY4zYMQ==",
+      "requires": {
+        "linkify-it": "2.0.3",
+        "prop-types": "15.6.2",
+        "tlds": "1.203.1"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -10091,6 +10109,11 @@
         "setimmediate": "1.0.5"
       }
     },
+    "tlds": {
+      "version": "1.203.1",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
+      "integrity": "sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10234,6 +10257,11 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
       "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
     },
+    "uc.micro": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+      "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
+    },
     "uglify-js": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.7.tgz",

package.json

@@ -6,8 +6,9 @@
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-lazyload": "^2.3.0",
+    "react-linkify": "^0.2.2",
     "react-scripts": "1.1.4",
-    "react-timeago": "^4.1.9"
+    "react-timeago": "^4.1.9",
   },
   "scripts": {
     "start": "react-scripts start",

src/Common.js

@@ -1,10 +1,21 @@
 import React, {Component} from 'react';
+
 import TimeAgo from 'react-timeago';
+import Linkify, {linkify} from 'react-linkify';
 import chineseStrings from 'react-timeago/lib/language-strings/zh-CN';
 import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';
+
 import './Common.css';
 
 const chinese_format=buildFormatter(chineseStrings);
+const PID_RE_TEXT=/(?:^|[^\d])(\d{5,6})(?!\d)/g;
+
+linkify.add('#', {
+    validate: /^(\d{5,6})/,
+    normalize: (match) => {
+        match.url='#'+match.url;
+    },
+});
 
 function pad2(x) {
     return x<10 ? '0'+x : ''+x;
@@ -29,3 +40,11 @@ export function TitleLine(props) {
         </p>
     )
 }
+
+export function AutoLink(props) {
+    return (
+        <Linkify properties={{target: '_blank'}}>
+            <pre>{props.text.replace(new RegExp(PID_RE_TEXT,'g'),' #$1 ')}</pre>
+        </Linkify>
+    )
+}

src/Flows.css

@@ -35,7 +35,7 @@
 }
 
 .left-container .flow-item-row {
-    cursor: pointer;
+    cursor: default;
     transition: margin-left 200ms ease-out;
 }
 .left-container .flow-item-row:hover {

src/Flows.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Time, TitleLine} from './Common.js';
+import {Time, TitleLine, AutoLink} from './Common.js';
 import './Flows.css';
 import LazyLoad from 'react-lazyload';
 
@@ -14,7 +14,7 @@ function Reply(props) {
                 <span className="box-id">#{props.info.cid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <pre>{props.info.text}</pre>
+            <AutoLink text={props.info.text} />
         </div>
     );
 }
@@ -36,7 +36,7 @@ function FlowItem(props) {
                 <span className="box-id">#{props.info.pid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <pre>{props.info.text}</pre>
+            <AutoLink text={props.info.text} />
             {props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
             {props.info.type==='audio' ? <audio src={AUDIO_BASE+props.info.url} /> : null}
         </div>
@@ -79,13 +79,16 @@ class FlowItemRow extends Component {
     render() {
         // props.do_show_details
         return (
-            <div className="flow-item-row" onClick={()=>{this.props.callback(
-                '帖子详情',
-                <div className="flow-item-row sidebar-flow-item">
-                    <FlowItem info={this.info} />
-                    {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
-                </div>
-            )}}>
+            <div className="flow-item-row" onClick={(event)=>{
+                if(event.target.tagName.toLowerCase()!=='a')
+                    this.props.callback(
+                        '帖子详情',
+                        <div className="flow-item-row sidebar-flow-item">
+                            <FlowItem info={this.info} />
+                            {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
+                        </div>
+                    );
+            }}>
                 <FlowItem info={this.info} />
                 {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
                 {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
@@ -121,7 +124,6 @@ export class Flow extends Component {
             chunks: [],
             loading: false,
         };
-        setTimeout(this.load_page.bind(this,1), 0);
     }
 
     load_page(page) {
@@ -212,6 +214,7 @@ export class Flow extends Component {
     }
 
     componentDidMount() {
+        this.load_page(1);
         window.addEventListener('scroll',this.on_scroll.bind(this));
         window.addEventListener('resize',this.on_scroll.bind(this));
     }

src/Title.css

@@ -10,6 +10,10 @@
     margin-bottom: 1em;
 }
 
+.title-bar a {
+    padding: 0 .5em;
+}
+
 .title {
     font-size: 2em;
     line-height: 3em;

src/Title.js

@@ -42,6 +42,16 @@ class ControlBar extends Component {
         this.set_search_text=props.set_search_text;
     }
 
+    componentDidMount() {
+        if(window.location.hash) {
+            const text=window.location.hash.substr(1);
+            this.setState({
+                search_text: text,
+            });
+            this.set_search_text(text);
+        }
+    }
+
     on_change(event) {
         this.setState({
             search_text: event.target.value,

src/index.css

@@ -22,7 +22,6 @@ a {
     text-decoration: none;
     color: #00c;
     cursor: pointer;
-    padding: 0 .5em;
 }
 
 input {