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

Merge pull request #3093 from nathan-castlehow/feat-run-prettier-on-markdown

Browse Source 
Feat run prettier on markdown
This commit is contained in:
Junyoung Choi
2019-08-24 13:41:41 +09:00
committed by GitHub
parent 25ef456af2 2d3c69d178
commit b9dd651fc1
8 changed files with 88 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
browser/components/CodeEditor.js
View File

@@ -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'
@@ -216,6 +217,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)
}
@@ -269,7 +292,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'
@@ -1194,5 +1218,6 @@ 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
}

1
browser/components/MarkdownEditor.js
View File

@@ -323,6 +323,7 @@ class MarkdownEditor extends React.Component {
switchPreview={config.editor.switchPreview}
enableMarkdownLint={config.editor.enableMarkdownLint}
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
prettierConfig={config.editor.prettierConfig}
/>
<MarkdownPreview styleName={this.state.status === 'PREVIEW'
? 'preview'

10
browser/main/lib/ConfigManager.js
View File

@@ -31,6 +31,7 @@ export const DEFAULT_CONFIG = {
toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
prettifyMarkdown: 'Shift + F',
insertDate: OSX ? 'Command + /' : 'Ctrl + /',
insertDateTime: OSX ? 'Command + Alt + /' : 'Ctrl + Shift + /',
toggleMenuBar: 'Alt'
@@ -68,7 +69,14 @@ export const DEFAULT_CONFIG = {
spellcheck: false,
enableSmartPaste: false,
enableMarkdownLint: false,
customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG
customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG,
prettierConfig: ` {
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}`
},
preview: {
fontSize: '14',

11
browser/main/modals/PreferencesModal/HotkeyTab.js
View File

@@ -81,6 +81,7 @@ class HotkeyTab extends React.Component {
toggleMode: this.refs.toggleMode.value,
deleteNote: this.refs.deleteNote.value,
pasteSmartly: this.refs.pasteSmartly.value,
prettifyMarkdown: this.refs.prettifyMarkdown.value,
toggleMenuBar: this.refs.toggleMenuBar.value
}
this.setState({
@@ -173,6 +174,16 @@ class HotkeyTab extends React.Component {
/>
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>{i18n.__('Prettify Markdown')}</div>
<div styleName='group-section-control'>
<input styleName='group-section-control-input'
onChange={(e) => this.handleHotkeyChange(e)}
ref='prettifyMarkdown'
value={config.hotkey.prettifyMarkdown}
type='text' />
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>{i18n.__('Insert Current Date')}</div>
<div styleName='group-section-control'>

30
browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -31,8 +31,12 @@ class UiTab extends React.Component {
CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript')
CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css')
CodeMirror.autoLoadMode(this.customMarkdownLintConfigCM.getCodeMirror(), 'javascript')
CodeMirror.autoLoadMode(this.prettierConfigCM.getCodeMirror(), 'javascript')
// Set CM editor Sizes
this.customCSSCM.getCodeMirror().setSize('400px', '400px')
this.prettierConfigCM.getCodeMirror().setSize('400px', '400px')
this.customMarkdownLintConfigCM.getCodeMirror().setSize('400px', '200px')
this.handleSettingDone = () => {
this.setState({UiAlert: {
type: 'success',
@@ -106,7 +110,9 @@ class UiTab extends React.Component {
spellcheck: this.refs.spellcheck.checked,
enableSmartPaste: this.refs.enableSmartPaste.checked,
enableMarkdownLint: this.refs.enableMarkdownLint.checked,
customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue()
customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue(),
prettierConfig: this.prettierConfigCM.getCodeMirror().getValue()
},
preview: {
fontSize: this.refs.previewFontSize.value,
@@ -914,7 +920,27 @@ class UiTab extends React.Component {
</div>
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>
{i18n.__('Prettier Config')}
</div>
<div styleName='group-section-control'>
<div style={{fontFamily}}>
<ReactCodeMirror
width='400px'
height='400px'
onChange={e => this.handleUIChange(e)}
ref={e => (this.prettierConfigCM = e)}
value={config.editor.prettierConfig}
options={{
lineNumbers: true,
mode: 'application/json',
lint: true,
theme: codemirrorTheme
}} />
</div>
</div>
</div>
<div styleName='group-control'>
<button styleName='group-control-rightButton'
onClick={(e) => this.handleSaveUIClick(e)}>{i18n.__('Save')}

1
package.json
View File

@@ -98,6 +98,7 @@
"mousetrap": "^1.6.2",
"mousetrap-global-bind": "^1.1.0",
"node-ipc": "^8.1.0",
"prettier": "^1.18.2",
"prop-types": "^15.7.2",
"query-string": "^6.5.0",
"raphael": "^2.2.7",

6
prettier.config Normal file
View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

5
yarn.lock
View File

@@ -7482,6 +7482,11 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
prettier@^1.18.2:
version "1.18.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
pretty-bytes@^1.0.2:
version "1.0.4"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"