Import note from url with markdown

2025-12-13 09:46:22 +00:00 · 2018-05-26 17:00:12 +09:30
parent 0d296c3b25
commit d97e62f864
11 changed files with 17976 additions and 7 deletions
--- a/browser/main/modals/CreateMarkdownFromURLModal.js
+++ b/browser/main/modals/CreateMarkdownFromURLModal.js
@@ -0,0 +1,184 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './CreateMarkdownFromURLModal.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import store from 'browser/main/store'
+import consts from 'browser/lib/consts'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'
+const http = require('http')
+const https = require('https')
+const TurndownService = require('turndown')
+import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
+
+class CreateMarkdownFromURLModal extends React.Component {
+  constructor (props) {
+    super(props)
+    let td = new TurndownService();
+
+    this.state = {
+      name: '',
+      showerror: false,
+      errormessage: '',
+      turndownService: td
+    }
+
+  }
+
+  componentDidMount () {
+    this.refs.name.focus()
+    this.refs.name.select()
+  }
+
+  handleCloseButtonClick (e) {
+    this.props.close()
+  }
+
+  handleChange (e) {
+    this.setState({
+      name: this.refs.name.value
+    })
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
+  handleInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        this.confirm()
+    }
+  }
+
+  handleConfirmButtonClick (e) {
+    this.confirm()
+  }
+
+  showError(message) {
+    this.setState({
+      showerror: true,
+      errormessage: message
+    });
+  }
+
+  hideError() {
+    this.setState({
+      showerror: false,
+      errormessage: ''
+    })
+  }
+
+  validateUrl(str) {
+    if(/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(str)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  confirm () {
+    if(this.validateUrl(this.state.name)) {
+      this.hideError()
+      let url = this.state.name;
+      let request = http;
+      if(url.includes('https'))
+        request = https;
+      let req = request.request(url, (res) => {
+        let data = '';
+        res.on('data', (chunk) => {
+          data += chunk
+        })
+        res.on('end', () => {
+          console.log("receiving data", data);
+
+          let html = document.createElement('html');
+          html.innerHTML = data;
+
+          let scripts = html.getElementsByTagName('script');
+          for(let i = scripts.length - 1; i >= 0; i--) {
+            scripts[i].parentNode.removeChild(scripts[i]);
+          }
+
+          let body = html.getElementsByTagName('body')[0].innerHTML;
+          let markdownHTML = this.state.turndownService.turndown(body);
+          console.log('markdown', markdownHTML);
+          html.innerHTML = '';
+          const { storage, folder, dispatch, location } = this.props
+
+          dataApi
+            .createNote(storage, {
+              type: 'MARKDOWN_NOTE',
+              folder: folder,
+              title: '',
+              content: markdownHTML
+            })
+            .then((note) => {
+              const noteHash = note.key
+              dispatch({
+                type: 'UPDATE_NOTE',
+                note: note
+              })
+              hashHistory.push({
+                pathname: location.pathname,
+                query: {key: noteHash}
+              })
+              ee.emit('list:jump', noteHash)
+              ee.emit('detail:focus')
+              this.props.close()
+            })
+        })
+      });
+      req.on('error', (e) => {
+        console.log("Error in request", e.message);
+      });
+      req.end();
+    } else {
+      this.showError("Please check your URL is in correct format. (Example, 'https://google.com')")
+    }
+  }
+
+  render () {
+    return (
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        <div styleName='header'>
+          <div styleName='title'>{i18n.__('Import Markdown From URL')}</div>
+        </div>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
+        <div styleName='control'>
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>{i18n.__('Insert URL Here')}</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
+          <button styleName='control-confirmButton'
+            onClick={(e) => this.handleConfirmButtonClick(e)}
+          >
+            {i18n.__('Import')}
+          </button>
+          <div className="error" styleName="error">{this.state.errormessage}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateMarkdownFromURLModal.propTypes = {
+  storage: PropTypes.shape({
+    key: PropTypes.string
+  })
+}
+
+export default CSSModules(CreateMarkdownFromURLModal, styles)