diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 6ec2aceb..80a9849a 100644 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -108,6 +108,8 @@ export default class MarkdownPreview extends React.Component { this.checkboxClickHandler = (e) => this.handleCheckboxClick(e) this.saveAsTextHandler = () => this.handleSaveAsText() this.saveAsMdHandler = () => this.handleSaveAsMd() + + this.linkClickHandler = this.handlelinkClick.bind(this) } handlePreviewAnchorClick (e) { @@ -249,6 +251,11 @@ export default class MarkdownPreview extends React.Component { el.removeEventListener('click', this.checkboxClickHandler) }) + _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => { + el.removeEventListener('click', this.linkClickHandler) + }) + + let { value, theme, indentSize, codeBlockTheme } = this.props this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme) @@ -273,6 +280,10 @@ export default class MarkdownPreview extends React.Component { el.addEventListener('click', this.checkboxClickHandler) }) + _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => { + el.addEventListener('click', this.linkClickHandler) + }) + codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme) ? codeBlockTheme : 'default' @@ -373,6 +384,14 @@ export default class MarkdownPreview extends React.Component { return new window.Notification(title, options) } + handlelinkClick (e) { + const noteHash = e.target.hash + const regexIsNoteLink = /^#(.{20})-(.{20})$/ + if (regexIsNoteLink.test(noteHash)) { + eventEmitter.emit('list:jump', noteHash.replace(/^#/, '')) + } + } + render () { let { className, style, tabIndex } = this.props return ( diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 59da9c9b..a3c258c1 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -47,6 +47,7 @@ class NoteList extends React.Component { this.alertIfSnippet() } this.importFromFileHandler = this.importFromFile.bind(this) + this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this) this.jumpToTopHandler = () => { this.jumpToTop() @@ -65,6 +66,7 @@ class NoteList extends React.Component { ee.on('list:top', this.jumpToTopHandler) ee.on('list:jumpToTop', this.jumpToTopHandler) ee.on('import:file', this.importFromFileHandler) + ee.on('list:jump', this.jumpNoteByHash) } componentWillReceiveProps (nextProps) { @@ -87,6 +89,7 @@ class NoteList extends React.Component { ee.off('list:top', this.jumpToTopHandler) ee.off('list:jumpToTop', this.jumpToTopHandler) ee.off('import:file', this.importFromFileHandler) + ee.off('list:jump', this.jumpNoteByHash) } componentDidUpdate (prevProps) { @@ -179,6 +182,32 @@ class NoteList extends React.Component { ee.emit('list:moved') } + jumpNoteByHashHandler (event, noteHash) { + // first argument event isn't used. + if (this.notes == null || this.notes.length === 0) { + return + } + + const { router } = this.context + const { location } = this.props + + let targetIndex = _.findIndex(this.notes, (note) => { + console.log(note.storage+'-'+note.key) + return note.storage + '-' + note.key === noteHash + }) + + if (targetIndex < 0) targetIndex = 0 + + router.push({ + pathname: location.pathname, + query: { + key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key + } + }) + + ee.emit('list:moved') + } + handleNoteListKeyDown (e) { if (e.metaKey || e.ctrlKey) return true diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 8dd8dc99..27fcbeac 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -35,6 +35,13 @@ .update-icon color $brand-color +.note-hash + display inline + line-height 24px + padding-left 5px + font-size 11px + color $ui-button-color + body[data-theme="dark"] .root background-color $ui-dark-noteDetail-backgroundColor diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js index fdd59d32..d1dcec2e 100644 --- a/browser/main/StatusBar/index.js +++ b/browser/main/StatusBar/index.js @@ -48,6 +48,7 @@ class StatusBar extends React.Component { render () { let { config, status } = this.context + const { location } = this.props return (