Merge branch 'master' into add-editor-rulers

2025-12-13 17:56:25 +00:00 · 2018-03-22 22:30:03 +09:00
parent 2627c09cda 10136df977
commit e796e00963
45 changed files with 381 additions and 119 deletions
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -282,6 +282,7 @@ class MarkdownEditor extends React.Component {
          indentSize={editorIndentSize}
          scrollPastEnd={config.preview.scrollPastEnd}
          smartQuotes={config.preview.smartQuotes}
+          sanitize={config.preview.sanitize}
          ref='preview'
          onContextMenu={(e) => this.handleContextMenu(e)}
          onDoubleClick={(e) => this.handleDoubleClick(e)}
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -135,8 +135,11 @@ export default class MarkdownPreview extends React.Component {
  }

  initMarkdown () {
-    const { smartQuotes } = this.props
-    this.markdown = new Markdown({ typographer: smartQuotes })
+    const { smartQuotes, sanitize } = this.props
+    this.markdown = new Markdown({
+      typographer: smartQuotes,
+      sanitize
+    })
  }

  handlePreviewAnchorClick (e) {
@@ -318,7 +321,7 @@ export default class MarkdownPreview extends React.Component {

  componentDidUpdate (prevProps) {
    if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.smartQuotes !== this.props.smartQuotes) {
+    if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize) {
      this.initMarkdown()
      this.rewriteIframe()
    }
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -130,6 +130,7 @@ class MarkdownSplitEditor extends React.Component {
          lineNumber={config.preview.lineNumber}
          scrollPastEnd={config.preview.scrollPastEnd}
          smartQuotes={config.preview.smartQuotes}
+          sanitize={config.preview.sanitize}
          ref='preview'
          tabInde='0'
          value={value}
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -58,7 +58,7 @@ body
  .katex
    font 400 1.2em 'KaTeX_Main'
    line-height 1.2em
-    white-space nowrap
+    white-space initial
    text-indent 0
  .katex .mfrac>.vlist>span:nth-child(2)
    top 0 !important
--- a/browser/lib/i18n.js
+++ b/browser/lib/i18n.js
@@ -1,7 +1,7 @@
 // load package for localization
 const i18n = new (require('i18n-2'))({
  // setup some locales - other locales default to the first locale
-  locales: ['en', 'sq', 'zh-CN', 'zh-TW', 'da', 'fr', 'de', 'ja', 'ko', 'no', 'pl', 'pt', 'es'],
+  locales: ['en', 'sq', 'zh-CN', 'zh-TW', 'da', 'fr', 'de', 'hu', 'ja', 'ko', 'no', 'pl', 'pt', 'es'],
  extension: '.json',
  devMode: process.env.NODE_ENV !== 'production'
 })
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -45,52 +45,62 @@ class Markdown {
          '<code class="' + langType + '">' +
          str +
          '</code></pre>'
-      }
+      },
+      sanitize: 'STRICT'
    }

    const updatedOptions = Object.assign(defaultOptions, options)
    this.md = markdownit(updatedOptions)

-    // Sanitize use rinput before other plugins
-    this.md.use(sanitize, {
-      allowedTags: ['iframe', 'input', 'b',
+    if (updatedOptions.sanitize !== 'NONE') {
+      const allowedTags = ['iframe', 'input', 'b',
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'br', 'b', 'i', 'strong', 'em', 'a', 'pre', 'code', 'img', 'tt',
        'div', 'ins', 'del', 'sup', 'sub', 'p', 'ol', 'ul', 'table', 'thead', 'tbody', 'tfoot', 'blockquote',
        'dl', 'dt', 'dd', 'kbd', 'q', 'samp', 'var', 'hr', 'ruby', 'rt', 'rp', 'li', 'tr', 'td', 'th', 's', 'strike', 'summary', 'details'
-      ],
-      allowedAttributes: {
-        '*': [
-          'style',
-          'abbr', 'accept', 'accept-charset',
-          'accesskey', 'action', 'align', 'alt', 'axis',
-          'border', 'cellpadding', 'cellspacing', 'char',
-          'charoff', 'charset', 'checked',
-          'clear', 'cols', 'colspan', 'color',
-          'compact', 'coords', 'datetime', 'dir',
-          'disabled', 'enctype', 'for', 'frame',
-          'headers', 'height', 'hreflang',
-          'hspace', 'ismap', 'label', 'lang',
-          'maxlength', 'media', 'method',
-          'multiple', 'name', 'nohref', 'noshade',
-          'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
-          'rows', 'rowspan', 'rules', 'scope',
-          'selected', 'shape', 'size', 'span',
-          'start', 'summary', 'tabindex', 'target',
-          'title', 'type', 'usemap', 'valign', 'value',
-          'vspace', 'width', 'itemprop'
-        ],
-        'a': ['href'],
-        'div': ['itemscope', 'itemtype'],
-        'blockquote': ['cite'],
-        'del': ['cite'],
-        'ins': ['cite'],
-        'q': ['cite'],
-        'img': ['src', 'width', 'height'],
-        'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
-        'input': ['type', 'id', 'checked']
-      },
-      allowedIframeHostnames: ['www.youtube.com']
-    })
+      ]
+      const allowedAttributes = [
+        'abbr', 'accept', 'accept-charset',
+        'accesskey', 'action', 'align', 'alt', 'axis',
+        'border', 'cellpadding', 'cellspacing', 'char',
+        'charoff', 'charset', 'checked',
+        'clear', 'cols', 'colspan', 'color',
+        'compact', 'coords', 'datetime', 'dir',
+        'disabled', 'enctype', 'for', 'frame',
+        'headers', 'height', 'hreflang',
+        'hspace', 'ismap', 'label', 'lang',
+        'maxlength', 'media', 'method',
+        'multiple', 'name', 'nohref', 'noshade',
+        'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
+        'rows', 'rowspan', 'rules', 'scope',
+        'selected', 'shape', 'size', 'span',
+        'start', 'summary', 'tabindex', 'target',
+        'title', 'type', 'usemap', 'valign', 'value',
+        'vspace', 'width', 'itemprop'
+      ]
+
+      if (updatedOptions.sanitize === 'ALLOW_STYLES') {
+        allowedTags.push('style')
+        allowedAttributes.push('style')
+      }
+
+      // Sanitize use rinput before other plugins
+      this.md.use(sanitize, {
+        allowedTags,
+        allowedAttributes: {
+          '*': allowedAttributes,
+          'a': ['href'],
+          'div': ['itemscope', 'itemtype'],
+          'blockquote': ['cite'],
+          'del': ['cite'],
+          'ins': ['cite'],
+          'q': ['cite'],
+          'img': ['src', 'width', 'height'],
+          'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+          'input': ['type', 'id', 'checked']
+        },
+        allowedIframeHostnames: ['www.youtube.com']
+      })
+    }

    this.md.use(emoji, {
      shortcuts: {}
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 class FolderSelect extends React.Component {
  constructor (props) {
@@ -249,7 +250,7 @@ class FolderSelect extends React.Component {
            <input styleName='search-input'
              ref='search'
              value={this.state.search}
-              placeholder='Folder...'
+              placeholder={i18n.__('Folder...')}
              onChange={(e) => this.handleSearchInputChange(e)}
              onBlur={(e) => this.handleSearchInputBlur(e)}
              onKeyDown={(e) => this.handleSearchInputKeyDown(e)}
--- a/browser/main/Detail/FullscreenButton.js
+++ b/browser/main/Detail/FullscreenButton.js
@@ -2,13 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FullscreenButton.styl'
+import i18n from 'browser/lib/i18n'

 const FullscreenButton = ({
 onClick
 }) => (
-  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+  <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
    <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-    <span styleName='tooltip'>Fullscreen</span>
+    <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
  </button>
 )

--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'
+import i18n from 'browser/lib/i18n'

 const InfoButton = ({
  onClick
@@ -10,7 +11,7 @@ const InfoButton = ({
    onClick={(e) => onClick(e)}
  >
    <img className='infoButton' src='../resources/icon/icon-info.svg' />
-    <span styleName='tooltip'>Info</span>
+    <span styleName='tooltip'>{i18n.__('Info')}</span>
  </button>
 )

--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -640,7 +640,7 @@ class SnippetNoteDetail extends React.Component {
      type: 'warning',
      message: i18n.__('Sorry!'),
      detail: i18n.__('md/text import is available only a markdown note.'),
-      buttons: ['OK']
+      buttons: [i18n.__('OK')]
    })
  }

@@ -766,10 +766,10 @@ class SnippetNoteDetail extends React.Component {
          isActive={note.isStarred}
        />

-        <button styleName='control-fullScreenButton' title='Fullscreen'
+        <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')}
          onMouseDown={(e) => this.handleFullScreenButton(e)}>
          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-          <span styleName='tooltip'>Fullscreen</span>
+          <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
        </button>

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -807,7 +807,7 @@ class SnippetNoteDetail extends React.Component {
                fontSize: parseInt(config.preview.fontSize, 10)
              }}
              ref='description'
-              placeholder='Description...'
+              placeholder={i18n.__('Description...')}
              value={this.state.note.description}
              onChange={(e) => this.handleChange(e)}
            />
@@ -846,7 +846,7 @@ class SnippetNoteDetail extends React.Component {
            onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
          >
            {this.state.note.snippets[this.state.snippetIndex].mode == null
-              ? 'Select Syntax...'
+              ? i18n.__('Select Syntax...')
              : this.state.note.snippets[this.state.snippetIndex].mode
            }&nbsp;
            <i className='fa fa-caret-down' />
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 class StarButton extends React.Component {
  constructor (props) {
@@ -53,7 +54,7 @@ class StarButton extends React.Component {
            : '../resources/icon/icon-star.svg'
          }
        />
-        <span styleName='tooltip'>Star</span>
+        <span styleName='tooltip'>{i18n.__('Star')}</span>
      </button>
    )
  }
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -4,6 +4,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'

 class TagSelect extends React.Component {
  constructor (props) {
@@ -137,7 +138,7 @@ class TagSelect extends React.Component {
        <input styleName='newTag'
          ref='newTag'
          value={this.state.newTag}
-          placeholder='Add tag...'
+          placeholder={i18n.__('Add tag...')}
          onChange={(e) => this.handleNewTagInputChange(e)}
          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
          onBlur={(e) => this.handleNewTagBlur(e)}
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -161,6 +161,8 @@ class Main extends React.Component {
      i18n.setLocale('fr')
    } else if (config.ui.language === 'de') {
      i18n.setLocale('de')
+    } else if (config.ui.language === 'hu') {
+      i18n.setLocale('hu')
    } else if (config.ui.language === 'ja') {
      i18n.setLocale('ja')
    } else if (config.ui.language === 'ko') {
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -57,9 +57,9 @@ class NewNoteButton extends React.Component {
      }
    }

-    if (storage == null) this.showMessageBox('No storage to create a note')
+    if (storage == null) this.showMessageBox(i18n.__('No storage to create a note'))
    const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
-    if (folder == null) this.showMessageBox('No folder to create a note')
+    if (folder == null) this.showMessageBox(i18n.__('No folder to create a note'))

    return {
      storage,
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -445,9 +445,9 @@ class NoteList extends React.Component {
    if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
      dialog.showMessageBox(remote.getCurrentWindow(), {
        type: 'warning',
-        message: 'Sorry!',
-        detail: 'md/text import is available only a markdown note.',
-        buttons: ['OK', 'Cancel']
+        message: i18n.__('Sorry!'),
+        detail: i18n.__('md/text import is available only a markdown note.'),
+        buttons: [i18n.__('OK'), i18n.__('Cancel')]
      })
    }
  }
@@ -471,14 +471,14 @@ class NoteList extends React.Component {
      this.handleNoteClick(e, uniqueKey)
    }

-    const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
-    const deleteLabel = 'Delete Note'
-    const cloneNote = 'Clone Note'
-    const restoreNote = 'Restore Note'
-    const copyNoteLink = 'Copy Note Link'
-    const publishLabel = 'Publish Blog'
-    const updateLabel = 'Update Blog'
-    const openBlogLabel = 'Open Blog'
+    const pinLabel = note.isPinned ? i18n.__('Remove pin') : i18n.__('Pin to Top')
+    const deleteLabel = i18n.__('Delete Note')
+    const cloneNote = i18n.__('Clone Note')
+    const restoreNote = i18n.__('Restore Note')
+    const copyNoteLink = i18n.__('Copy Note Link')
+    const publishLabel = i18n.__('Publish Blog')
+    const updateLabel = i18n.__('Update Blog')
+    const openBlogLabel = i18n.__('Open Blog')

    const menu = new Menu()
    if (!location.pathname.match(/\/starred|\/trash/)) {
@@ -585,9 +585,9 @@ class NoteList extends React.Component {
      const noteExp = selectedNotes.length > 1 ? 'notes' : 'note'
      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
        type: 'warning',
-        message: 'Confirm note deletion',
+        message: i18n.__('Confirm note deletion'),
        detail: `This will permanently remove ${selectedNotes.length} ${noteExp}.`,
-        buttons: ['Confirm', 'Cancel']
+        buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
      })
      if (dialogueButtonIndex === 1) return
      Promise.all(
@@ -757,9 +757,9 @@ class NoteList extends React.Component {
    const { dialog } = remote
    const alertError = {
      type: 'warning',
-      message: 'Publish Failed',
-      detail: 'Check and update your blog setting and try again.',
-      buttons: ['Confirm']
+      message: i18n.__('Publish Failed'),
+      detail: i18n.__('Check and update your blog setting and try again.'),
+      buttons: [i18n.__('Confirm')]
    }
    dialog.showMessageBox(remote.getCurrentWindow(), alertError)
  }
@@ -767,9 +767,9 @@ class NoteList extends React.Component {
  confirmPublish (note) {
    const buttonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Publish Succeeded',
+      message: i18n.__('Publish Succeeded'),
      detail: `${note.title} is published at ${note.blog.blogLink}`,
-      buttons: ['Confirm', 'Open Blog']
+      buttons: [i18n.__('Confirm'), i18n.__('Open Blog')]
    })

    if (buttonIndex === 1) {
@@ -874,7 +874,7 @@ class NoteList extends React.Component {
    dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
      message: message,
-      buttons: ['OK']
+      buttons: [i18n.__('OK')]
    })
  }

@@ -992,7 +992,7 @@ class NoteList extends React.Component {
          <div styleName='control-sortBy'>
            <i className='fa fa-angle-down' />
            <select styleName='control-sortBy-select'
-              title='Select filter mode'
+              title={i18n.__('Select filter mode')}
              value={config.sortBy}
              onChange={(e) => this.handleSortByChange(e)}
            >
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -27,14 +27,14 @@ class StorageItem extends React.Component {
  handleHeaderContextMenu (e) {
    const menu = Menu.buildFromTemplate([
      {
-        label: 'Add Folder',
+        label: i18n.__('Add Folder'),
        click: (e) => this.handleAddFolderButtonClick(e)
      },
      {
        type: 'separator'
      },
      {
-        label: 'Unlink Storage',
+        label: i18n.__('Unlink Storage'),
        click: (e) => this.handleUnlinkStorageClick(e)
      }
    ])
@@ -94,21 +94,21 @@ class StorageItem extends React.Component {
  handleFolderButtonContextMenu (e, folder) {
    const menu = Menu.buildFromTemplate([
      {
-        label: 'Rename Folder',
+        label: i18n.__('Rename Folder'),
        click: (e) => this.handleRenameFolderClick(e, folder)
      },
      {
        type: 'separator'
      },
      {
-        label: 'Export Folder',
+        label: i18n.__('Export Folder'),
        submenu: [
          {
-            label: 'Export as txt',
+            label: i18n.__('Export as txt'),
            click: (e) => this.handleExportFolderClick(e, folder, 'txt')
          },
          {
-            label: 'Export as md',
+            label: i18n.__('Export as md'),
            click: (e) => this.handleExportFolderClick(e, folder, 'md')
          }
        ]
@@ -117,7 +117,7 @@ class StorageItem extends React.Component {
        type: 'separator'
      },
      {
-        label: 'Delete Folder',
+        label: i18n.__('Delete Folder'),
        click: (e) => this.handleFolderDeleteClick(e, folder)
      }
    ])
@@ -136,8 +136,8 @@ class StorageItem extends React.Component {
  handleExportFolderClick (e, folder, fileType) {
    const options = {
      properties: ['openDirectory', 'createDirectory'],
-      buttonLabel: 'Select directory',
-      title: 'Select a folder to export the files to',
+      buttonLabel: i18n.__('Select directory'),
+      title: i18n.__('Select a folder to export the files to'),
      multiSelections: false
    }
    dialog.showOpenDialog(remote.getCurrentWindow(), options,
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -18,6 +18,7 @@ import PreferenceButton from './PreferenceButton'
 import ListButton from './ListButton'
 import TagButton from './TagButton'
 import {SortableContainer} from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'

 class SideNav extends React.Component {
  // TODO: should not use electron stuff v0.7
@@ -115,7 +116,7 @@ class SideNav extends React.Component {
      component = (
        <div styleName='tabBody'>
          <div styleName='tag-title'>
-            <p>Tags</p>
+            <p>{i18n.__('Tags')}</p>
          </div>
          <div styleName='tagList'>
            {this.tagListComponent(data)}
@@ -179,7 +180,7 @@ class SideNav extends React.Component {
    const { data } = this.props
    const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
    const menu = Menu.buildFromTemplate([
-      { label: 'Empty Trash', click: () => this.emptyTrash(trashedNotes) }
+      { label: i18n.__('Empty Trash'), click: () => this.emptyTrash(trashedNotes) }
    ])
    menu.popup()
  }
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -53,7 +53,8 @@ export const DEFAULT_CONFIG = {
    latexBlockOpen: '$$',
    latexBlockClose: '$$',
    scrollPastEnd: false,
-    smartQuotes: true
+    smartQuotes: true,
+    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
  },
  blog: {
    type: 'wordpress', // Available value: wordpress, add more types in the future plz
@@ -149,6 +150,8 @@ function set (updates) {
    i18n.setLocale('fr')
  } else if (newConfig.ui.language === 'de') {
    i18n.setLocale('de')
+  } else if (newConfig.ui.language === 'hu') {
+    i18n.setLocale('hu')
  } else if (newConfig.ui.language === 'ja') {
    i18n.setLocale('ja')
  } else if (newConfig.ui.language === 'ko') {
--- a/browser/main/lib/ipcClient.js
+++ b/browser/main/lib/ipcClient.js
@@ -1,5 +1,4 @@
 import ConfigManager from './ConfigManager'
-import store from 'browser/main/store'

 const nodeIpc = require('node-ipc')
 const { remote, ipcRenderer } = require('electron')
--- a/browser/main/modals/CreateFolderModal.js
+++ b/browser/main/modals/CreateFolderModal.js
@@ -7,6 +7,7 @@ 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'

 class CreateFolderModal extends React.Component {
  constructor (props) {
@@ -79,12 +80,12 @@ class CreateFolderModal extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='header'>
-          <div styleName='title'>Create new folder</div>
+          <div styleName='title'>{i18n.__('Create new folder')}</div>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
        <div styleName='control'>
          <div styleName='control-folder'>
-            <div styleName='control-folder-label'>Folder name</div>
+            <div styleName='control-folder-label'>{i18n.__('Folder name')}</div>
            <input styleName='control-folder-input'
              ref='name'
              value={this.state.name}
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -111,7 +111,7 @@ class NewNoteModal extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='header'>
-          <div styleName='title'>Make a note</div>
+          <div styleName='title'>{i18n.__('Make a note')}</div>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
        <div styleName='control'>
--- a/browser/main/modals/PreferencesModal/Blog.js
+++ b/browser/main/modals/PreferencesModal/Blog.js
@@ -43,7 +43,7 @@ class Blog extends React.Component {
    this.handleSettingError = (err) => {
      this.setState({BlogAlert: {
        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
+        message: err.message != null ? err.message : i18n.__('Error occurs!')
      }})
    }
    this.oldBlog = this.state.config.blog
@@ -70,7 +70,7 @@ class Blog extends React.Component {
      this.props.haveToSave({
        tab: 'Blog',
        type: 'warning',
-        message: 'You have to save!'
+        message: i18n.__('You have to save!')
      })
    }
  }
@@ -111,7 +111,7 @@ class Blog extends React.Component {
                ref='typeDropdown'
                onChange={(e) => this.handleBlogChange(e)}
              >
-                <option value='wordpress' key='wordpress'>wordpress</option>
+                <option value='wordpress' key='wordpress'>{i18n.__('wordpress')}</option>
              </select>
            </div>
          </div>
--- a/browser/main/modals/PreferencesModal/FolderList.js
+++ b/browser/main/modals/PreferencesModal/FolderList.js
@@ -6,6 +6,7 @@ import styles from './FolderList.styl'
 import store from 'browser/main/store'
 import FolderItem from './FolderItem'
 import { SortableContainer } from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'

 class FolderList extends React.Component {
  render () {
@@ -24,7 +25,7 @@ class FolderList extends React.Component {
      <div styleName='folderList'>
        {folderList.length > 0
          ? folderList
-          : <div styleName='folderList-empty'>No Folders</div>
+          : <div styleName='folderList-empty'>{i18n.__('No Folders')}</div>
        }
      </div>
    )
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -30,7 +30,7 @@ class HotkeyTab extends React.Component {
    this.handleSettingError = (err) => {
      this.setState({keymapAlert: {
        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
+        message: err.message != null ? err.message : i18n.__('Error occurs!')
      }})
    }
    this.oldHotkey = this.state.config.hotkey
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -15,7 +15,7 @@ function browseFolder () {
  const defaultPath = remote.app.getPath('home')
  return new Promise((resolve, reject) => {
    dialog.showOpenDialog({
-      title: 'Select Directory',
+      title: i18n.__('Select Directory'),
      defaultPath,
      properties: ['openDirectory', 'createDirectory']
    }, function (targetPaths) {
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -36,7 +36,7 @@ class UiTab extends React.Component {
    this.handleSettingError = (err) => {
      this.setState({UiAlert: {
        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
+        message: err.message != null ? err.message : i18n.__('Error occurs!')
      }})
    }
    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
@@ -93,7 +93,8 @@ class UiTab extends React.Component {
        latexBlockOpen: this.refs.previewLatexBlockOpen.value,
        latexBlockClose: this.refs.previewLatexBlockClose.value,
        scrollPastEnd: this.refs.previewScrollPastEnd.checked,
-        smartQuotes: this.refs.previewSmartQuotes.checked
+        smartQuotes: this.refs.previewSmartQuotes.checked,
+        sanitize: this.refs.previewSanitize.value
      }
    }

@@ -188,6 +189,7 @@ class UiTab extends React.Component {
                <option value='en'>{i18n.__('English')}</option>
                <option value='fr'>{i18n.__('French')}</option>
                <option value='de'>{i18n.__('German')}</option>
+                <option value='hu'>{i18n.__('Hungarian')}</option>
                <option value='ja'>{i18n.__('Japanese')}</option>
                <option value='ko'>{i18n.__('Korean')}</option>
                <option value='no'>{i18n.__('Norwegian')}</option>
@@ -472,6 +474,23 @@ class UiTab extends React.Component {
              Enable smart quotes
            </label>
          </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Sanitization')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.preview.sanitize}
+                ref='previewSanitize'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='STRICT'>✅ {i18n.__('Only allow secure html tags (recommended)')}
+                </option>
+                <option value='ALLOW_STYLES'>⚠️ {i18n.__('Allow styles')}</option>
+                <option value='NONE'>❌ {i18n.__('Allow dangerous html tags')}</option>
+              </select>
+            </div>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
              {i18n.__('LaTeX Inline Open Delimiter')}
--- a/browser/main/modals/RenameFolderModal.js
+++ b/browser/main/modals/RenameFolderModal.js
@@ -79,7 +79,7 @@ class RenameFolderModal extends React.Component {

        <div styleName='control'>
          <input styleName='control-input'
-            placeholder='Folder Name'
+            placeholder={i18n.__('Folder Name')}
            ref='name'
            value={this.state.name}
            onChange={(e) => this.handleChange(e)}