Merge branch 'master' into text-deflist

2025-12-13 17:56:25 +00:00 · 2018-11-08 05:24:57 +01:00
parent 60fcf2734a 37933782d2
commit 47f6a217e8
70 changed files with 1162 additions and 279 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -14,6 +14,8 @@ import consts from 'browser/lib/consts'
 import fs from 'fs'
 const { ipcRenderer } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+import TurndownService from 'turndown'
+import { gfm } from 'turndown-plugin-gfm'

 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'

@@ -57,6 +59,7 @@ export default class CodeEditor extends React.Component {
    }
    this.searchHandler = (e, msg) => this.handleSearch(msg)
    this.searchState = null
+    this.scrollToLineHandeler = this.scrollToLine.bind(this)

    this.formatTable = () => this.handleFormatTable()
    this.editorActivityHandler = () => this.handleEditorActivity()
@@ -125,6 +128,7 @@ export default class CodeEditor extends React.Component {
  componentDidMount () {
    const { rulers, enableRulers } = this.props
    const expandSnippet = this.expandSnippet.bind(this)
+    eventEmitter.on('line:jump', this.scrollToLineHandeler)

    const defaultSnippet = [
      {
@@ -475,7 +479,13 @@ export default class CodeEditor extends React.Component {

  moveCursorTo (row, col) {}

-  scrollToLine (num) {}
+  scrollToLine (event, num) {
+    const cursor = {
+      line: num,
+      ch: 1
+    }
+    this.editor.setCursor(cursor)
+  }

  focus () {
    this.editor.focus()
@@ -538,7 +548,11 @@ export default class CodeEditor extends React.Component {
      )
      return prevChar === '](' && nextChar === ')'
    }
-    if (dataTransferItem.type.match('image')) {
+
+    const pastedHtml = clipboardData.getData('text/html')
+    if (pastedHtml !== '') {
+      this.handlePasteHtml(e, editor, pastedHtml)
+    } else if (dataTransferItem.type.match('image')) {
      attachmentManagement.handlePastImageEvent(
        this,
        storageKey,
@@ -608,6 +622,12 @@ export default class CodeEditor extends React.Component {
      })
  }

+  handlePasteHtml (e, editor, pastedHtml) {
+    e.preventDefault()
+    const markdown = this.turndownService.turndown(pastedHtml)
+    editor.replaceSelection(markdown)
+  }
+
  mapNormalResponse (response, pastedTxt) {
    return this.decodeResponse(response).then(body => {
      return new Promise((resolve, reject) => {
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -6,6 +6,7 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { findStorage } from 'browser/lib/findStorage'
+import ConfigManager from 'browser/main/lib/ConfigManager'

 class MarkdownEditor extends React.Component {
  constructor (props) {
@@ -18,7 +19,7 @@ class MarkdownEditor extends React.Component {
    this.supportMdSelectionBold = [16, 17, 186]

    this.state = {
-      status: 'PREVIEW',
+      status: props.config.editor.switchPreview === 'RIGHTCLICK' ? props.config.editor.delfaultStatus : 'PREVIEW',
      renderValue: props.value,
      keyPressed: new Set(),
      isLocked: false
@@ -64,6 +65,10 @@ class MarkdownEditor extends React.Component {
    })
  }

+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
  handleChange (e) {
    this.value = this.refs.code.value
    this.props.onChange(e)
@@ -72,9 +77,7 @@ class MarkdownEditor extends React.Component {
  handleContextMenu (e) {
    const { config } = this.props
    if (config.editor.switchPreview === 'RIGHTCLICK') {
-      const newStatus = this.state.status === 'PREVIEW'
-        ? 'CODE'
-        : 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
      this.setState({
        status: newStatus
      }, () => {
@@ -84,6 +87,10 @@ class MarkdownEditor extends React.Component {
          this.refs.preview.focus()
        }
        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+
+        const newConfig = Object.assign({}, config)
+        newConfig.editor.delfaultStatus = newStatus
+        ConfigManager.set(newConfig)
      })
    }
  }
@@ -300,6 +307,7 @@ class MarkdownEditor extends React.Component {
          noteKey={noteKey}
          customCSS={config.preview.customCSS}
          allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
        />
      </div>
    )
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -16,7 +16,6 @@ import convertModeName from 'browser/lib/convertModeName'
 import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
-import { escapeHtmlCharacters } from 'browser/lib/utils'
 import context from 'browser/lib/context'
 import i18n from 'browser/lib/i18n'
 import fs from 'fs'
@@ -80,7 +79,6 @@ function buildStyle (
       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
 }
-${allowCustomCSS ? customCSS : ''}
 ${markdownStyle}

 body {
@@ -88,6 +86,11 @@ body {
  font-size: ${fontSize}px;
  ${scrollPastEnd && 'padding-bottom: 90vh;'}
 }
+@media print {
+  body {
+    padding-bottom: initial;
+  }
+}
 code {
  font-family: '${codeBlockFontFamily.join("','")}';
  background-color: rgba(0,0,0,0.04);
@@ -144,6 +147,8 @@ body p {
    display: none
  }
 }
+
+${allowCustomCSS ? customCSS : ''}
 `
 }

@@ -325,9 +330,7 @@ export default class MarkdownPreview extends React.Component {
        allowCustomCSS,
        customCSS
      )
-      let body = this.markdown.render(
-        escapeHtmlCharacters(noteContent, { detectCodeBlock: true })
-      )
+      let body = this.markdown.render(noteContent)
      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
        noteContent,
@@ -484,10 +487,6 @@ export default class MarkdownPreview extends React.Component {
    eventEmitter.on('export:save-md', this.saveAsMdHandler)
    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
    eventEmitter.on('print', this.printHandler)
-    eventEmitter.on('config-renew', () => {
-      this.markdown.updateConfig()
-      this.rewriteIframe()
-    })
  }

  componentWillUnmount () {
@@ -531,7 +530,8 @@ export default class MarkdownPreview extends React.Component {
      prevProps.smartQuotes !== this.props.smartQuotes ||
      prevProps.sanitize !== this.props.sanitize ||
      prevProps.smartArrows !== this.props.smartArrows ||
-      prevProps.breaks !== this.props.breaks
+      prevProps.breaks !== this.props.breaks ||
+      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
    ) {
      this.initMarkdown()
      this.rewriteIframe()
@@ -737,7 +737,6 @@ export default class MarkdownPreview extends React.Component {
            el.addEventListener('click', this.linkClickHandler)
          })
        } catch (e) {
-          console.error(e)
          el.className = 'flowchart-error'
          el.innerHTML = 'Flowchart parse error: ' + e.message
        }
@@ -758,7 +757,6 @@ export default class MarkdownPreview extends React.Component {
            el.addEventListener('click', this.linkClickHandler)
          })
        } catch (e) {
-          console.error(e)
          el.className = 'sequence-error'
          el.innerHTML = 'Sequence diagram parse error: ' + e.message
        }
@@ -771,12 +769,18 @@ export default class MarkdownPreview extends React.Component {
        try {
          const chartConfig = JSON.parse(el.innerHTML)
          el.innerHTML = ''
-          var canvas = document.createElement('canvas')
+
+          const canvas = document.createElement('canvas')
          el.appendChild(canvas)
-          /* eslint-disable no-new */
-          new Chart(canvas, chartConfig)
+
+          const height = el.attributes.getNamedItem('data-height')
+          if (height && height.value !== 'undefined') {
+            el.style.height = height.value + 'vh'
+            canvas.height = height.value + 'vh'
+          }
+
+          const chart = new Chart(canvas, chartConfig)
        } catch (e) {
-          console.error(e)
          el.className = 'chart-error'
          el.innerHTML = 'chartjs diagram parse error: ' + e.message
        }
@@ -860,6 +864,15 @@ export default class MarkdownPreview extends React.Component {
      return
    }

+    const regexIsLine = /^:line:[0-9]/
+    if (regexIsLine.test(linkHash)) {
+      const numberPattern = /\d+/g
+
+      const lineNumber = parseInt(linkHash.match(numberPattern)[0])
+      eventEmitter.emit('line:jump', lineNumber)
+      return
+    }
+
    // this will match the old link format storage.key-note.key
    // e.g.
    // 877f99c3268608328037-1c211eb7dcb463de6490
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -20,12 +20,18 @@ class MarkdownSplitEditor extends React.Component {
    }
  }

+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
  handleOnChange () {
    this.value = this.refs.code.value
    this.props.onChange()
  }

  handleScroll (e) {
+    if (!this.props.config.preview.scrollSync) return
+
    const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
    const codeDoc = _.get(this, 'refs.code.editor.doc')
    let srcTop, srcHeight, targetTop, targetHeight
@@ -192,6 +198,7 @@ class MarkdownSplitEditor extends React.Component {
          noteKey={noteKey}
          customCSS={config.preview.customCSS}
          allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
       />
      </div>
    )
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -24,16 +24,19 @@ const TagElement = ({ tagName }) => (
 /**
 * @description Tag element list component.
 * @param {Array|null} tags
+ * @param {boolean} showTagsAlphabetically
 * @return {React.Component}
 */
-const TagElementList = tags => {
+const TagElementList = (tags, showTagsAlphabetically) => {
  if (!isArray(tags)) {
    return []
  }

-  const tagElements = tags.map(tag => TagElement({ tagName: tag }))
-
-  return tagElements
+  if (showTagsAlphabetically) {
+    return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
+  } else {
+    return tags.map(tag => TagElement({ tagName: tag }))
+  }
 }

 /**
@@ -55,7 +58,8 @@ const NoteItem = ({
  pathname,
  storageName,
  folderName,
-  viewType
+  viewType,
+  showTagsAlphabetically
 }) => (
  <div
    styleName={isActive ? 'item--active' : 'item'}
@@ -93,7 +97,7 @@ const NoteItem = ({
      <div styleName='item-bottom'>
        <div styleName='item-bottom-tagList'>
          {note.tags.length > 0
-            ? TagElementList(note.tags)
+            ? TagElementList(note.tags, showTagsAlphabetically)
            : <span
              style={{ fontStyle: 'italic', opacity: 0.5 }}
              styleName='item-bottom-tagList-empty'
--- a/browser/components/StorageList.js
+++ b/browser/components/StorageList.js
@@ -7,18 +7,18 @@ import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'

 /**
-* @param {Array} storgaeList
+* @param {Array} storageList
 */

 const StorageList = ({storageList, isFolded}) => (
  <div styleName={isFolded ? 'storageList-folded' : 'storageList'}>
    {storageList.length > 0 ? storageList : (
-      <div styleName='storgaeList-empty'>No storage mount.</div>
+      <div styleName='storageList-empty'>No storage mount.</div>
    )}
  </div>
 )

 StorageList.propTypes = {
-  storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
+  storageList: PropTypes.arrayOf(PropTypes.element).isRequired
 }
 export default CSSModules(StorageList, styles)
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -14,8 +14,8 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {bool} isRelated
 */

-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
-  <div styleName='tagList-itemContainer'>
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+  <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
    {isRelated
      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
        <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
@@ -25,7 +25,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isAc
    <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
      <span styleName='tagList-item-name'>
        {`# ${name}`}
-        <span styleName='tagList-item-count'>{count}</span>
+        <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
      </span>
    </button>
  </div>
--- a/browser/components/TodoListPercentage.js
+++ b/browser/components/TodoListPercentage.js
@@ -12,7 +12,7 @@ import styles from './TodoListPercentage.styl'
 */

 const TodoListPercentage = ({
-  percentageOfTodo
+  percentageOfTodo, onClearCheckboxClick
 }) => (
  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
@@ -20,11 +20,15 @@ const TodoListPercentage = ({
        <p styleName='percentageText'>{percentageOfTodo}%</p>
      </div>
    </div>
+    <div styleName='todoClear'>
+      <p styleName='todoClearText' onClick={(e) => onClearCheckboxClick(e)}>clear</p>
+    </div>
  </div>
 )

 TodoListPercentage.propTypes = {
-  percentageOfTodo: PropTypes.number.isRequired
+  percentageOfTodo: PropTypes.number.isRequired,
+  onClearCheckboxClick: PropTypes.func.isRequired
 }

 export default CSSModules(TodoListPercentage, styles)
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -1,4 +1,5 @@
 .percentageBar
+  display: flex
  position absolute
  top 72px
  right 0px
@@ -30,6 +31,20 @@
  color #f4f4f4
  font-weight 600

+.todoClear
+  display flex
+  justify-content: flex-end
+  position absolute
+  z-index 120
+  width 100%
+  height 100%
+  padding 2px 10px
+
+.todoClearText
+  color #f4f4f4
+  cursor pointer
+  font-weight 500
+
 body[data-theme="dark"]
  .percentageBar
    background-color #444444
@@ -39,6 +54,9 @@ body[data-theme="dark"]

  .percentageText
    color $ui-dark-text-color
+  
+  .todoClearText
+    color $ui-dark-text-color

 body[data-theme="solarized-dark"]
  .percentageBar
@@ -50,6 +68,9 @@ body[data-theme="solarized-dark"]
  .percentageText
    color #fdf6e3

+  .todoClearText
+    color #fdf6e3
+
 body[data-theme="monokai"]
  .percentageBar
    background-color: $ui-monokai-borderColor
@@ -69,3 +90,6 @@ body[data-theme="dracula"]

  .percentageText
    color $ui-dracula-text-color
+
+  .percentageText
+    color $ui-dracula-text-color
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -209,41 +209,39 @@ code
  text-decoration none
  margin-right 2px
 pre
-  padding 0.5em !important
+  padding 0.5rem !important
  border solid 1px #D1D1D1
  border-radius 5px
  overflow-x auto
-  margin 0 0 1em
+  margin 0 0 1rem
  display flex
  line-height 1.4em
-  &.flowchart, &.sequence, &.chart
-    display flex
-    justify-content center
-    background-color white
-  &.CodeMirror
-    height initial
-    flex-wrap wrap
-    &>code
-      flex 1
-      overflow-x auto
  code
    background-color inherit
    margin 0
    padding 0
    border none
    border-radius 0
+  &.CodeMirror
+    height initial
+    flex-wrap wrap
+    &>code
+      flex 1
+      overflow-x auto
+  &.mermaid svg
+    max-width 100% !important
  &>span.filename
-    width 100%
-    border-radius: 5px 0px 0px 0px
-    margin -8px 100% 8px -8px
-    padding 0px 6px
+    margin -0.5rem 100% 0.5rem -0.5rem
+    padding 0.125rem 0.375rem
    background-color #777;
    color white
+    &:empty
+      display none
  &>span.lineNumber
    display none
    font-size 1em
-    padding 0.5em 0
-    margin -0.5em 0.5em -0.5em -0.5em
+    padding 0.5rem 0
+    margin -0.5rem 0.5rem -0.5rem -0.5rem
    border-right 1px solid
    text-align right
    border-top-left-radius 4px
@@ -376,7 +374,7 @@ for name, val in admonition_types
        content: val[icon]

 dl
-  margin 2em 0
+  margin 2rem 0
  padding 0
  display flex
  width 100%
@@ -391,20 +389,33 @@ dt
  text-align right
  overflow hidden
  flex-basis 20%
-  padding 6px 13px
+  padding 0.43rem 0.93rem
  box-sizing border-box

 dd
  border-top 1px solid borderColor
  flex-basis 80%
-  padding 6px 13px
-  min-height 2.5em
+  padding 0.43rem 0.93rem
+  min-height 2.5rem
  background-color $ui-noteDetail-backgroundColor
  box-sizing border-box

 dd + dd
  margin-left 20%

+pre.fence
+  flex-wrap wrap
+
+  .chart, .flowchart, .mermaid, .sequence
+    display flex
+    justify-content center
+    background-color white
+    max-width 100%
+    flex-grow 1
+
+    canvas, svg
+      max-width 100% !important
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -11,9 +11,9 @@ function getRandomInt (min, max) {
 }

 function getId () {
-  var pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
-  var id = 'm-'
-  for (var i = 0; i < 7; i++) {
+  const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  let id = 'm-'
+  for (let i = 0; i < 7; i++) {
    id += pool[getRandomInt(0, 16)]
  }
  return id
@@ -21,16 +21,20 @@ function getId () {

 function render (element, content, theme) {
  try {
+    const height = element.attributes.getNamedItem('data-height')
+    if (height && height.value !== 'undefined') {
+      element.style.height = height.value + 'vh'
+    }
    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
-      themeCSS: isDarkTheme ? darkThemeStyling : ''
+      themeCSS: isDarkTheme ? darkThemeStyling : '',
+      useMaxWidth: false
    })
    mermaidAPI.render(getId(), content, (svgGraph) => {
      element.innerHTML = svgGraph
    })
  } catch (e) {
-    console.error(e)
    element.className = 'mermaid-error'
    element.innerHTML = 'mermaid diagram parse error: ' + e.message
  }