From 9b54272f8e748edfdb4f7a0af65c26b5f0850b5f Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Sun, 4 Feb 2018 13:57:00 +0200 Subject: [PATCH 1/8] feat(code-editor): fetch title when pasting url --- browser/components/CodeEditor.js | 66 +++++++++++++++++++++++--------- 1 file changed, 48 insertions(+), 18 deletions(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 5d799935..2b6cfafc 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -226,26 +226,56 @@ export default class CodeEditor extends React.Component { } handlePaste (editor, e) { - const dataTransferItem = e.clipboardData.items[0] - if (!dataTransferItem.type.match('image')) return + const clipboardData = e.clipboardData + const dataTransferItem = clipboardData.items[0] + const pasteTxt = clipboardData.getData('text') + const isURL = (str) => { + const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/ + return matcher.test(str) + } + if (dataTransferItem.type.match('image')) { + const blob = dataTransferItem.getAsFile() + const reader = new FileReader() + let base64data - const blob = dataTransferItem.getAsFile() - const reader = new FileReader() - let base64data + reader.readAsDataURL(blob) + reader.onloadend = () => { + base64data = reader.result.replace(/^data:image\/png;base64,/, '') + base64data += base64data.replace('+', ' ') + const binaryData = new Buffer(base64data, 'base64').toString('binary') + const imageName = Math.random().toString(36).slice(-16) + const storagePath = findStorage(this.props.storageKey).path + const imageDir = path.join(storagePath, 'images') + if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir) + const imagePath = path.join(imageDir, `${imageName}.png`) + fs.writeFile(imagePath, binaryData, 'binary') + const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})` + this.insertImageMd(imageMd) + } + } else if (this.props.fetchUrlTitle && isURL(pasteTxt)) { + e.preventDefault() + const taggedUrl = '[' + pasteTxt + ']' + editor.replaceSelection(taggedUrl) - reader.readAsDataURL(blob) - reader.onloadend = () => { - base64data = reader.result.replace(/^data:image\/png;base64,/, '') - base64data += base64data.replace('+', ' ') - const binaryData = new Buffer(base64data, 'base64').toString('binary') - const imageName = Math.random().toString(36).slice(-16) - const storagePath = findStorage(this.props.storageKey).path - const imageDir = path.join(storagePath, 'images') - if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir) - const imagePath = path.join(imageDir, `${imageName}.png`) - fs.writeFile(imagePath, binaryData, 'binary') - const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})` - this.insertImageMd(imageMd) + fetch(pasteTxt, { + method: 'get' + }).then((response) => { + return (response.text()) + }).then((response) => { + const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html') + const value = editor.getValue() + const cursor = editor.getCursor() + const LinkWithTitle = `[${parsedResponse.title}](${pasteTxt})` + const newValue = value.replace(taggedUrl, LinkWithTitle) + editor.setValue(newValue) + editor.setCursor(cursor) + }).catch((e) => { + const value = editor.getValue() + const newValue = value.replace(taggedUrl, pasteTxt) + const cursor = editor.getCursor() + editor.setValue(newValue) + editor.setCursor(cursor) + }) } } From 56d6eb7077d1effc927a6a50c38cb7083f293431 Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Sun, 4 Feb 2018 13:58:02 +0200 Subject: [PATCH 2/8] feat(config): add ablility to opt out of fetch url --- browser/components/MarkdownEditor.js | 1 + browser/components/MarkdownSplitEditor.js | 1 + browser/finder/NoteDetail.js | 1 + browser/main/Detail/SnippetNoteDetail.js | 1 + browser/main/lib/ConfigManager.js | 3 ++- browser/main/modals/PreferencesModal/UiTab.js | 14 +++++++++++++- 6 files changed, 19 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 1b44166c..62c4414a 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -244,6 +244,7 @@ class MarkdownEditor extends React.Component { indentSize={editorIndentSize} scrollPastEnd={config.editor.scrollPastEnd} storageKey={storageKey} + fetchUrlTitle={config.editor.fetchUrlTitle} onChange={(e) => this.handleChange(e)} onBlur={(e) => this.handleBlur(e)} /> diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index d0a3eb27..15498662 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -65,6 +65,7 @@ class MarkdownSplitEditor extends React.Component { indentType={config.editor.indentType} indentSize={editorIndentSize} scrollPastEnd={config.editor.scrollPastEnd} + fetchUrlTitle={config.editor.fetchUrlTitle} storageKey={storageKey} onChange={this.handleOnChange.bind(this)} /> diff --git a/browser/finder/NoteDetail.js b/browser/finder/NoteDetail.js index 3b9121d7..1325e87f 100644 --- a/browser/finder/NoteDetail.js +++ b/browser/finder/NoteDetail.js @@ -159,6 +159,7 @@ class NoteDetail extends React.Component { indentSize={editorIndentSize} keyMap={config.editor.keyMap} scrollPastEnd={config.editor.scrollPastEnd} + fetchUrlTitle={config.editor.fetchUrlTitle} readOnly ref={'code-' + index} /> diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index af8c178e..44c36492 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -566,6 +566,7 @@ class SnippetNoteDetail extends React.Component { indentSize={editorIndentSize} keyMap={config.editor.keyMap} scrollPastEnd={config.editor.scrollPastEnd} + fetchUrlTitle={config.editor.fetchUrlTitle} onChange={(e) => this.handleCodeChange(index)(e)} ref={'code-' + index} /> diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 834646b4..4c0d410f 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -36,7 +36,8 @@ export const DEFAULT_CONFIG = { indentSize: '2', switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR scrollPastEnd: false, - type: 'SPLIT' + type: 'SPLIT', + fetchUrlTitle: true }, preview: { fontSize: '14', diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index ed633c7d..d4afd2a6 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -75,7 +75,8 @@ class UiTab extends React.Component { indentSize: this.refs.editorIndentSize.value, switchPreview: this.refs.editorSwitchPreview.value, keyMap: this.refs.editorKeyMap.value, - scrollPastEnd: this.refs.scrollPastEnd.checked + scrollPastEnd: this.refs.scrollPastEnd.checked, + fetchUrlTitle: this.refs.editorFetchUrlTitle.checked, }, preview: { fontSize: this.refs.previewFontSize.value, @@ -315,6 +316,17 @@ class UiTab extends React.Component { +
+ +
+
Preview
From 10daf2599db79b3d5606126155336059075d7a9c Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Sun, 4 Feb 2018 17:39:32 +0200 Subject: [PATCH 3/8] chore: fix lint isues --- browser/main/modals/PreferencesModal/UiTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index d4afd2a6..86f8fa2a 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -76,7 +76,7 @@ class UiTab extends React.Component { switchPreview: this.refs.editorSwitchPreview.value, keyMap: this.refs.editorKeyMap.value, scrollPastEnd: this.refs.scrollPastEnd.checked, - fetchUrlTitle: this.refs.editorFetchUrlTitle.checked, + fetchUrlTitle: this.refs.editorFetchUrlTitle.checked }, preview: { fontSize: this.refs.previewFontSize.value, From 3e2b876c591575f0bae54b6d45a2f66ca71e2a19 Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Sun, 4 Feb 2018 17:49:23 +0200 Subject: [PATCH 4/8] fix(config): refrase --- browser/main/modals/PreferencesModal/UiTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 86f8fa2a..dc161514 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -323,7 +323,7 @@ class UiTab extends React.Component { ref='editorFetchUrlTitle' type='checkbox' />  - Allow editor to fetch url titles on when pasting url + Bring in web page title when pasting URL on editor
From d9d46cda1cabf1d81fbe0e5e04fa4f8c29bbca83 Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Mon, 5 Feb 2018 10:59:36 +0200 Subject: [PATCH 5/8] feat(editor): extract pasting url method --- browser/components/CodeEditor.js | 54 +++++++++++++++++--------------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 2b6cfafc..ccc70b8a 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -228,7 +228,7 @@ export default class CodeEditor extends React.Component { handlePaste (editor, e) { const clipboardData = e.clipboardData const dataTransferItem = clipboardData.items[0] - const pasteTxt = clipboardData.getData('text') + const pastedTxt = clipboardData.getData('text') const isURL = (str) => { const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/ return matcher.test(str) @@ -252,33 +252,37 @@ export default class CodeEditor extends React.Component { const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})` this.insertImageMd(imageMd) } - } else if (this.props.fetchUrlTitle && isURL(pasteTxt)) { - e.preventDefault() - const taggedUrl = '[' + pasteTxt + ']' - editor.replaceSelection(taggedUrl) - - fetch(pasteTxt, { - method: 'get' - }).then((response) => { - return (response.text()) - }).then((response) => { - const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html') - const value = editor.getValue() - const cursor = editor.getCursor() - const LinkWithTitle = `[${parsedResponse.title}](${pasteTxt})` - const newValue = value.replace(taggedUrl, LinkWithTitle) - editor.setValue(newValue) - editor.setCursor(cursor) - }).catch((e) => { - const value = editor.getValue() - const newValue = value.replace(taggedUrl, pasteTxt) - const cursor = editor.getCursor() - editor.setValue(newValue) - editor.setCursor(cursor) - }) + } else if (this.props.fetchUrlTitle && isURL(pastedTxt)) { + this.handlePasteUrl(e, editor, pastedTxt) } } + handlePasteUrl(e, editor, pastedTxt){ + e.preventDefault() + const taggedUrl = '[' + pastedTxt + ']' + editor.replaceSelection(taggedUrl) + + fetch(pastedTxt, { + method: 'get' + }).then((response) => { + return (response.text()) + }).then((response) => { + const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html') + const value = editor.getValue() + const cursor = editor.getCursor() + const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})` + const newValue = value.replace(taggedUrl, LinkWithTitle) + editor.setValue(newValue) + editor.setCursor(cursor) + }).catch((e) => { + const value = editor.getValue() + const newValue = value.replace(taggedUrl, pastedTxt) + const cursor = editor.getCursor() + editor.setValue(newValue) + editor.setCursor(cursor) + }) + } + render () { const { className, fontSize } = this.props let fontFamily = this.props.fontFamily From c42ac1df1b21e96ab977dd6a9526494ef6e44e2b Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Mon, 5 Feb 2018 11:00:56 +0200 Subject: [PATCH 6/8] chore(editor): resolve lint issues --- browser/components/CodeEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index ccc70b8a..d50f3d8e 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -257,7 +257,7 @@ export default class CodeEditor extends React.Component { } } - handlePasteUrl(e, editor, pastedTxt){ + handlePasteUrl (e, editor, pastedTxt) { e.preventDefault() const taggedUrl = '[' + pastedTxt + ']' editor.replaceSelection(taggedUrl) From a676ebf46cbd474477f6a1f3c237248fa43bac65 Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Tue, 6 Feb 2018 18:35:11 +0200 Subject: [PATCH 7/8] fix(editor): replace [] with <> --- browser/components/CodeEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 7e59ea65..adc51321 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -264,7 +264,7 @@ export default class CodeEditor extends React.Component { handlePasteUrl (e, editor, pastedTxt) { e.preventDefault() - const taggedUrl = '[' + pastedTxt + ']' + const taggedUrl = '<' + pastedTxt + '>' editor.replaceSelection(taggedUrl) fetch(pastedTxt, { From dc1b059a9da5a4998a46f82bb2a5dbb252620043 Mon Sep 17 00:00:00 2001 From: Georges Indrianjafy Date: Tue, 6 Feb 2018 19:12:25 +0200 Subject: [PATCH 8/8] clean up --- browser/components/CodeEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index adc51321..75baffb3 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -264,7 +264,7 @@ export default class CodeEditor extends React.Component { handlePasteUrl (e, editor, pastedTxt) { e.preventDefault() - const taggedUrl = '<' + pastedTxt + '>' + const taggedUrl = `<${pastedTxt}>` editor.replaceSelection(taggedUrl) fetch(pastedTxt, {