public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-15 02:36:36 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into Insert_Date_ISO_8601_Style

Browse Source
This commit is contained in:
lockee14
2019-08-30 21:54:38 +09:00
committed by GitHub
parent 928e0edf4d 28b8141c6b
commit f64d0b35e1
89 changed files with 994 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
browser/components/CodeEditor.js
View File

@@ -20,7 +20,7 @@ import styles from '../components/CodeEditor.styl'
const { ipcRenderer, remote, clipboard } = require('electron')
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
const spellcheck = require('browser/lib/spellcheck')
const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
import TurndownService from 'turndown'
import {languageMaps} from '../lib/CMLanguageList'
import snippetManager from '../lib/SnippetManager'
@@ -28,6 +28,7 @@ import {generateInEditor, tocExistsInEditor} from 'browser/lib/markdown-toc-gene
import markdownlint from 'markdownlint'
import Jsonlint from 'jsonlint-mod'
import { DEFAULT_CONFIG } from '../main/lib/ConfigManager'
import prettier from 'prettier'
CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
@@ -53,6 +54,7 @@ export default class CodeEditor extends React.Component {
this.focusHandler = () => {
ipcRenderer.send('editor:focused', true)
}
const debouncedDeletionOfAttachments = _.debounce(attachmentManagement.deleteAttachmentsNotPresentInNote, 30000)
this.blurHandler = (editor, e) => {
ipcRenderer.send('editor:focused', false)
if (e == null) return null
@@ -64,16 +66,13 @@ export default class CodeEditor extends React.Component {
el = el.parentNode
}
this.props.onBlur != null && this.props.onBlur(e)
const {
storageKey,
noteKey
} = this.props
attachmentManagement.deleteAttachmentsNotPresentInNote(
this.editor.getValue(),
storageKey,
noteKey
)
if (this.props.deleteUnusedAttachments === true) {
debouncedDeletionOfAttachments(this.editor.getValue(), storageKey, noteKey)
}
}
this.pasteHandler = (editor, e) => {
e.preventDefault()
@@ -110,7 +109,7 @@ export default class CodeEditor extends React.Component {
const component = this
if (component.searchState) cm.removeOverlay(component.searchState)
if (msg.length < 3) return
if (msg.length < 1) return
cm.operation(function () {
component.searchState = makeOverlay(msg, 'searching')
@@ -205,8 +204,7 @@ export default class CodeEditor extends React.Component {
'Cmd-T': function (cm) {
// Do nothing
},
'Ctrl-/': function (cm) {
if (global.process.platform === 'darwin') { return }
[translateHotkey(hotkey.insertDate)]: function (cm) {
const dateNow = new Date()
if (self.props.dateFormatISO8601) {
cm.replaceSelection(dateNow.toISOString().split('T')[0])
@@ -230,6 +228,7 @@ export default class CodeEditor extends React.Component {
},
'Shift-Cmd-/': function (cm) {
if (global.process.platform !== 'darwin') { return }
[translateHotkey(hotkey.insertDateTime)]: function (cm) {
const dateNow = new Date()
cm.replaceSelection(dateNow.toLocaleString())
},
@@ -240,6 +239,28 @@ export default class CodeEditor extends React.Component {
}
return CodeMirror.Pass
},
[translateHotkey(hotkey.prettifyMarkdown)]: cm => {
// Default / User configured prettier options
const currentConfig = JSON.parse(self.props.prettierConfig)
// Parser type will always need to be markdown so we override the option before use
currentConfig.parser = 'markdown'
// Get current cursor position
const cursorPos = cm.getCursor()
currentConfig.cursorOffset = cm.doc.indexFromPos(cursorPos)
// Prettify contents of editor
const formattedTextDetails = prettier.formatWithCursor(cm.doc.getValue(), currentConfig)
const formattedText = formattedTextDetails.formatted
const formattedCursorPos = formattedTextDetails.cursorOffset
cm.doc.setValue(formattedText)
// Reset Cursor position to be at the same markdown as was before prettifying
const newCursorPos = cm.doc.posFromIndex(formattedCursorPos)
cm.doc.setCursor(newCursorPos)
},
[translateHotkey(hotkey.pasteSmartly)]: cm => {
this.handlePaste(cm, true)
}
@@ -275,7 +296,7 @@ export default class CodeEditor extends React.Component {
value: this.props.value,
linesHighlighted: this.props.linesHighlighted,
lineNumbers: this.props.displayLineNumbers,
lineWrapping: true,
lineWrapping: this.props.lineWrapping,
theme: this.props.theme,
indentUnit: this.props.indentSize,
tabSize: this.props.indentSize,
@@ -293,7 +314,8 @@ export default class CodeEditor extends React.Component {
explode: this.props.explodingPairs,
override: true
},
extraKeys: this.defaultKeyMap
extraKeys: this.defaultKeyMap,
prettierConfig: this.props.prettierConfig
})
document.querySelector('.CodeMirror-lint-markers').style.display = enableMarkdownLint ? 'inline-block' : 'none'
@@ -574,6 +596,10 @@ export default class CodeEditor extends React.Component {
this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
}
if (prevProps.lineWrapping !== this.props.lineWrapping) {
this.editor.setOption('lineWrapping', this.props.lineWrapping)
}
if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
}
@@ -628,6 +654,9 @@ export default class CodeEditor extends React.Component {
this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
}
}
if (prevProps.deleteUnusedAttachments !== this.props.deleteUnusedAttachments) {
this.editor.setOption('deleteUnusedAttachments', this.props.deleteUnusedAttachments)
}
if (needRefresh) {
this.editor.refresh()
@@ -856,6 +885,17 @@ export default class CodeEditor extends React.Component {
this.editor.setCursor(cursor)
}
/**
* Update content of one line
* @param {Number} lineNumber
* @param {String} content
*/
setLineContent (lineNumber, content) {
const prevContent = this.editor.getLine(lineNumber)
const prevContentLength = prevContent ? prevContent.length : 0
this.editor.replaceRange(content, { line: lineNumber, ch: 0 }, { line: lineNumber, ch: prevContentLength })
}
handleDropImage (dropEvent) {
dropEvent.preventDefault()
const {
@@ -1189,7 +1229,8 @@ CodeEditor.propTypes = {
autoDetect: PropTypes.bool,
spellCheck: PropTypes.bool,
enableMarkdownLint: PropTypes.bool,
customMarkdownLintConfig: PropTypes.string
customMarkdownLintConfig: PropTypes.string,
deleteUnusedAttachments: PropTypes.bool
}
CodeEditor.defaultProps = {
@@ -1203,5 +1244,7 @@ CodeEditor.defaultProps = {
autoDetect: false,
spellCheck: false,
enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig
customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,
prettierConfig: DEFAULT_CONFIG.editor.prettierConfig,
deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments
}

11
browser/components/MarkdownEditor.js
View File

@@ -169,14 +169,15 @@ class MarkdownEditor extends React.Component {
.split('\n')
const targetLine = lines[lineIndex]
let newLine = targetLine
if (targetLine.match(checkedMatch)) {
lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
newLine = targetLine.replace(checkReplace, '[ ]')
}
if (targetLine.match(uncheckedMatch)) {
lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
newLine = targetLine.replace(uncheckReplace, '[x]')
}
this.refs.code.setValue(lines.join('\n'))
this.refs.code.setLineContent(lineIndex, newLine)
}
}
@@ -304,6 +305,7 @@ class MarkdownEditor extends React.Component {
enableRulers={config.editor.enableRulers}
rulers={config.editor.rulers}
displayLineNumbers={config.editor.displayLineNumbers}
lineWrapping
matchingPairs={config.editor.matchingPairs}
matchingTriples={config.editor.matchingTriples}
explodingPairs={config.editor.explodingPairs}
@@ -322,6 +324,8 @@ class MarkdownEditor extends React.Component {
enableMarkdownLint={config.editor.enableMarkdownLint}
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
dateFormatISO8601={config.editor.dateFormatISO8601}
prettierConfig={config.editor.prettierConfig}
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
/>
<MarkdownPreview styleName={this.state.status === 'PREVIEW'
? 'preview'
@@ -341,6 +345,7 @@ class MarkdownEditor extends React.Component {
smartArrows={config.preview.smartArrows}
breaks={config.preview.breaks}
sanitize={config.preview.sanitize}
mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
ref='preview'
onContextMenu={(e) => this.handleContextMenu(e)}
onDoubleClick={(e) => this.handleDoubleClick(e)}

94
browser/components/MarkdownPreview.js
View File

@@ -18,15 +18,13 @@ import mdurl from 'mdurl'
import exportNote from 'browser/main/lib/dataApi/exportNote'
import { escapeHtmlCharacters } from 'browser/lib/utils'
import yaml from 'js-yaml'
import context from 'browser/lib/context'
import i18n from 'browser/lib/i18n'
import fs from 'fs'
import { render } from 'react-dom'
import Carousel from 'react-image-carousel'
import ConfigManager from '../main/lib/ConfigManager'
const { remote, shell } = require('electron')
const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu
const { app } = remote
const path = require('path')
@@ -34,8 +32,6 @@ const fileUrl = require('file-url')
const dialog = remote.dialog
const uri2path = require('file-uri-to-path')
const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
const appPath = fileUrl(
process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
@@ -249,30 +245,12 @@ export default class MarkdownPreview extends React.Component {
}
handleContextMenu (event) {
// If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
if (_.isFunction(this.props.onContextMenu)) {
const menu = buildMarkdownPreviewContextMenu(this, event)
const switchPreview = ConfigManager.get().editor.switchPreview
if (menu != null && switchPreview !== 'RIGHTCLICK') {
menu.popup(remote.getCurrentWindow())
} else if (_.isFunction(this.props.onContextMenu)) {
this.props.onContextMenu(event)
return
}
// No contextMenu was passed to us -> execute our own link-opener
if (event.target.tagName.toLowerCase() === 'a' && event.target.getAttribute('href')) {
const href = event.target.href
const isLocalFile = href.startsWith('file:')
if (isLocalFile) {
const absPath = uri2path(href)
try {
if (fs.lstatSync(absPath).isFile()) {
context.popup([
{
label: i18n.__('Show in explorer'),
click: (e) => shell.showItemInFolder(absPath)
}
])
}
} catch (e) {
console.log('Error while evaluating if the file is locally available', e)
}
}
}
}
@@ -345,7 +323,11 @@ export default class MarkdownPreview extends React.Component {
customCSS
)
let body = this.markdown.render(noteContent)
const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
body = attachmentManagement.fixLocalURLS(
body,
this.props.storagePath
)
const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
files.forEach(file => {
if (global.process.platform === 'win32') {
file = file.replace('file:///', '')
@@ -381,7 +363,7 @@ export default class MarkdownPreview extends React.Component {
handleSaveAsPdf () {
this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false}})
const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false, javascript: false}})
printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
return new Promise((resolve, reject) => {
printout.webContents.on('did-finish-load', () => {
@@ -576,16 +558,19 @@ export default class MarkdownPreview extends React.Component {
}
componentDidUpdate (prevProps) {
if (prevProps.value !== this.props.value) this.rewriteIframe()
// actual rewriteIframe function should be called only once
let needsRewriteIframe = false
if (prevProps.value !== this.props.value) needsRewriteIframe = true
if (
prevProps.smartQuotes !== this.props.smartQuotes ||
prevProps.sanitize !== this.props.sanitize ||
prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||
prevProps.smartArrows !== this.props.smartArrows ||
prevProps.breaks !== this.props.breaks ||
prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
) {
this.initMarkdown()
this.rewriteIframe()
needsRewriteIframe = true
}
if (
prevProps.fontFamily !== this.props.fontFamily ||
@@ -600,8 +585,17 @@ export default class MarkdownPreview extends React.Component {
prevProps.customCSS !== this.props.customCSS
) {
this.applyStyle()
needsRewriteIframe = true
}
if (needsRewriteIframe) {
this.rewriteIframe()
}
// Should scroll to top after selecting another note
if (prevProps.noteKey !== this.props.noteKey) {
this.getWindow().scrollTo(0, 0)
}
}
getStyleParams () {
@@ -657,7 +651,7 @@ export default class MarkdownPreview extends React.Component {
this.getWindow().document.getElementById(
'codeTheme'
).href = this.GetCodeThemeLink(codeBlockTheme)
).href = this.getCodeThemeLink(codeBlockTheme)
this.getWindow().document.getElementById('style').innerHTML = buildStyle(
fontFamily,
fontSize,
@@ -670,14 +664,12 @@ export default class MarkdownPreview extends React.Component {
)
}
GetCodeThemeLink (name) {
getCodeThemeLink (name) {
const theme = consts.THEMES.find(theme => theme.name === name)
if (theme) {
return `${appPath}/${theme.path}`
} else {
return `${appPath}/node_modules/codemirror/theme/elegant.css`
}
return theme != null
? theme.path
: `${appPath}/node_modules/codemirror/theme/elegant.css`
}
rewriteIframe () {
@@ -703,7 +695,8 @@ export default class MarkdownPreview extends React.Component {
showCopyNotification,
storagePath,
noteKey,
sanitize
sanitize,
mermaidHTMLLabel
} = this.props
let { value, codeBlockTheme } = this.props
@@ -835,6 +828,7 @@ export default class MarkdownPreview extends React.Component {
canvas.height = height.value + 'vh'
}
// eslint-disable-next-line no-unused-vars
const chart = new Chart(canvas, chartConfig)
} catch (e) {
el.className = 'chart-error'
@@ -845,7 +839,7 @@ export default class MarkdownPreview extends React.Component {
_.forEach(
this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
el => {
mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
}
)
@@ -895,6 +889,12 @@ export default class MarkdownPreview extends React.Component {
this.setImgOnClickEventHelper(img, rect)
imgObserver.observe(parentEl, config)
}
const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('a')
for (const a of aList) {
a.removeEventListener('click', this.linkClickHandler)
a.addEventListener('click', this.linkClickHandler)
}
}
setImgOnClickEventHelper (img, rect) {
@@ -967,8 +967,6 @@ export default class MarkdownPreview extends React.Component {
overlay.appendChild(zoomImg)
document.body.appendChild(overlay)
}
this.getWindow().scrollTo(0, 0)
}
focus () {
@@ -1023,11 +1021,11 @@ export default class MarkdownPreview extends React.Component {
if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
const regexNoteInternalLink = /.*[main.\w]*.html#/
if (regexNoteInternalLink.test(href)) {
const targetId = mdurl.encode(linkHash)
const targetElement = this.refs.root.contentWindow.document.querySelector(
const extractId = /(main.html)?#/
const regexNoteInternalLink = new RegExp(`${extractId.source}(.+)`)
if (regexNoteInternalLink.test(linkHash)) {
const targetId = mdurl.encode(linkHash.replace(extractId, ''))
const targetElement = this.refs.root.contentWindow.document.getElementById(
targetId
)

12
browser/components/MarkdownSplitEditor.js
View File

@@ -88,14 +88,15 @@ class MarkdownSplitEditor extends React.Component {
.split('\n')
const targetLine = lines[lineIndex]
let newLine = targetLine
if (targetLine.match(checkedMatch)) {
lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
newLine = targetLine.replace(checkReplace, '[ ]')
}
if (targetLine.match(uncheckedMatch)) {
lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
newLine = targetLine.replace(uncheckReplace, '[x]')
}
this.refs.code.setValue(lines.join('\n'))
this.refs.code.setLineContent(lineIndex, newLine)
}
}
@@ -150,7 +151,6 @@ class MarkdownSplitEditor extends React.Component {
onMouseMove={e => this.handleMouseMove(e)}
onMouseUp={e => this.handleMouseUp(e)}>
<CodeEditor
styleName='codeEditor'
ref='code'
width={this.state.codeEditorWidthInPercent + '%'}
mode='Boost Flavored Markdown'
@@ -160,6 +160,7 @@ class MarkdownSplitEditor extends React.Component {
fontFamily={config.editor.fontFamily}
fontSize={editorFontSize}
displayLineNumbers={config.editor.displayLineNumbers}
lineWrapping
matchingPairs={config.editor.matchingPairs}
matchingTriples={config.editor.matchingTriples}
explodingPairs={config.editor.explodingPairs}
@@ -182,13 +183,13 @@ class MarkdownSplitEditor extends React.Component {
enableMarkdownLint={config.editor.enableMarkdownLint}
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
dateFormatISO8601={config.editor.dateFormatISO8601}
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
/>
<div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
<div styleName='slider-hitbox' />
</div>
<MarkdownPreview
style={previewStyle}
styleName='preview'
theme={config.ui.theme}
keyMap={config.editor.keyMap}
fontSize={config.preview.fontSize}
@@ -201,6 +202,7 @@ class MarkdownSplitEditor extends React.Component {
smartArrows={config.preview.smartArrows}
breaks={config.preview.breaks}
sanitize={config.preview.sanitize}
mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
ref='preview'
tabInde='0'
value={value}

21
browser/components/MarkdownSplitEditor.styl
View File

@@ -8,9 +8,30 @@
top -2px
width 0
z-index 0
border-left 1px solid $ui-borderColor
.slider-hitbox
absolute top bottom left right
width 7px
left -3px
z-index 10
cursor col-resize
body[data-theme="dark"]
.root
.slider
border-left 1px solid $ui-dark-borderColor
body[data-theme="solarized-dark"]
.root
.slider
border-left 1px solid $ui-solarized-dark-borderColor
body[data-theme="monokai"]
.root
.slider
border-left 1px solid $ui-monokai-borderColor
body[data-theme="dracula"]
.root
.slider
border-left 1px solid $ui-dracula-borderColor

2
browser/components/ModalEscButton.js
View File

@@ -8,7 +8,7 @@ const ModalEscButton = ({
}) => (
<button styleName='escButton' onClick={handleEscButtonClick}>
<div styleName='esc-mark'>×</div>
<div styleName='esc-text'>esc</div>
<div>esc</div>
</button>
)

11
browser/components/NoteItem.js
View File

@@ -3,7 +3,7 @@
*/
import PropTypes from 'prop-types'
import React from 'react'
import { isArray } from 'lodash'
import { isArray, sortBy } from 'lodash'
import invertColor from 'invert-color'
import CSSModules from 'browser/lib/CSSModules'
import { getTodoStatus } from 'browser/lib/getTodoStatus'
@@ -43,7 +43,7 @@ const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
}
if (showTagsAlphabetically) {
return _.sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
return sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
} else {
return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
}
@@ -148,15 +148,14 @@ NoteItem.propTypes = {
tags: PropTypes.array,
isStarred: PropTypes.bool.isRequired,
isTrashed: PropTypes.bool.isRequired,
blog: {
blog: PropTypes.shape({
blogLink: PropTypes.string,
blogId: PropTypes.number
}
})
}),
handleNoteClick: PropTypes.func.isRequired,
handleNoteContextMenu: PropTypes.func.isRequired,
handleDragStart: PropTypes.func.isRequired,
handleDragEnd: PropTypes.func.isRequired
handleDragStart: PropTypes.func.isRequired
}
export default CSSModules(NoteItem, styles)

2
browser/components/SideNavFilter.js
View File

@@ -74,7 +74,7 @@ SideNavFilter.propTypes = {
isStarredActive: PropTypes.bool.isRequired,
isTrashedActive: PropTypes.bool.isRequired,
handleStarredButtonClick: PropTypes.func.isRequired,
handleTrashdButtonClick: PropTypes.func.isRequired
handleTrashedButtonClick: PropTypes.func.isRequired
}
export default CSSModules(SideNavFilter, styles)

2
browser/components/SnippetTab.js
View File

@@ -114,7 +114,7 @@ class SnippetTab extends React.Component {
>
{snippet.name.trim().length > 0
? snippet.name
: <span styleName='button-unnamed'>
: <span>
{i18n.__('Unnamed')}
</span>
}

4
browser/components/TodoProcess.js
View File

@@ -25,10 +25,10 @@ const TodoProcess = ({
)
TodoProcess.propTypes = {
todoStatus: {
todoStatus: PropTypes.exact({
total: PropTypes.number.isRequired,
completed: PropTypes.number.isRequired
}
})
}
export default CSSModules(TodoProcess, styles)

5
browser/components/render/MermaidRender.js
View File

@@ -19,7 +19,7 @@ function getId () {
return id
}
function render (element, content, theme) {
function render (element, content, theme, enableHTMLLabel) {
try {
const height = element.attributes.getNamedItem('data-height')
if (height && height.value !== 'undefined') {
@@ -29,7 +29,8 @@ function render (element, content, theme) {
mermaidAPI.initialize({
theme: isDarkTheme ? 'dark' : 'default',
themeCSS: isDarkTheme ? darkThemeStyling : '',
useMaxWidth: false
useMaxWidth: false,
flowchart: { htmlLabels: enableHTMLLabel }
})
mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph