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

Merge branch 'master' of https://github.com/BoostIO/Boostnote into fix-2903

Browse Source
This commit is contained in:
Callum Booth
2020-04-18 13:54:27 +01:00
parent 59e361cb37 b56e0b98e3
commit 2f16784a20
287 changed files with 13790 additions and 8984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
browser/components/MarkdownSplitEditor.js
View File

@@ -8,7 +8,7 @@ import styles from './MarkdownSplitEditor.styl'
import CSSModules from 'browser/lib/CSSModules'
class MarkdownSplitEditor extends React.Component {
constructor (props) {
constructor(props) {
super(props)
this.value = props.value
this.focus = () => this.refs.code.focus()
@@ -21,19 +21,22 @@ class MarkdownSplitEditor extends React.Component {
}
}
setValue (value) {
setValue(value) {
this.refs.code.setValue(value)
}
handleOnChange (e) {
handleOnChange(e) {
this.value = this.refs.code.value
this.props.onChange(e)
}
handleScroll (e) {
handleScroll(e) {
if (!this.props.config.preview.scrollSync) return
const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
const previewDoc = _.get(
this,
'refs.preview.refs.root.contentWindow.document'
)
const codeDoc = _.get(this, 'refs.code.editor.doc')
let srcTop, srcHeight, targetTop, targetHeight
@@ -50,7 +53,7 @@ class MarkdownSplitEditor extends React.Component {
targetHeight = _.get(codeDoc, 'height')
}
const distance = (targetHeight * srcTop / srcHeight) - targetTop
const distance = (targetHeight * srcTop) / srcHeight - targetTop
const framerate = 1000 / 60
const frames = 20
const refractory = frames * framerate
@@ -61,21 +64,29 @@ class MarkdownSplitEditor extends React.Component {
let scrollPos, time
const timer = setInterval(() => {
time = frame / frames
scrollPos = time < 0.5
? 2 * time * time // ease in
: -1 + (4 - 2 * time) * time // ease out
if (e.doc) _.set(previewDoc, 'body.scrollTop', targetTop + scrollPos * distance)
else _.get(this, 'refs.code.editor').scrollTo(0, targetTop + scrollPos * distance)
scrollPos =
time < 0.5
? 2 * time * time // ease in
: -1 + (4 - 2 * time) * time // ease out
if (e.doc)
_.set(previewDoc, 'body.scrollTop', targetTop + scrollPos * distance)
else
_.get(this, 'refs.code.editor').scrollTo(
0,
targetTop + scrollPos * distance
)
if (frame >= frames) {
clearInterval(timer)
setTimeout(() => { this.userScroll = true }, refractory)
setTimeout(() => {
this.userScroll = true
}, refractory)
}
frame++
}, framerate)
}
}
handleCheckboxClick (e) {
handleCheckboxClick(e) {
e.preventDefault()
e.stopPropagation()
const idMatch = /checkbox-([0-9]+)/
@@ -84,9 +95,9 @@ class MarkdownSplitEditor extends React.Component {
const checkReplace = /\[x]/i
const uncheckReplace = /\[ ]/
if (idMatch.test(e.target.getAttribute('id'))) {
const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
const lines = this.refs.code.value
.split('\n')
const lineIndex =
parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
const lines = this.refs.code.value.split('\n')
const targetLine = lines[lineIndex]
let newLine = targetLine
@@ -101,13 +112,14 @@ class MarkdownSplitEditor extends React.Component {
}
}
handleMouseMove (e) {
handleMouseMove(e) {
if (this.state.isSliderFocused) {
const rootRect = this.refs.root.getBoundingClientRect()
if (this.props.isStacking) {
const rootHeight = rootRect.height
const offset = rootRect.top
let newCodeEditorHeightInPercent = (e.pageY - offset) / rootHeight * 100
let newCodeEditorHeightInPercent =
((e.pageY - offset) / rootHeight) * 100
// limit minSize to 10%, maxSize to 90%
if (newCodeEditorHeightInPercent <= 10) {
@@ -124,7 +136,7 @@ class MarkdownSplitEditor extends React.Component {
} else {
const rootWidth = rootRect.width
const offset = rootRect.left
let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
let newCodeEditorWidthInPercent = ((e.pageX - offset) / rootWidth) * 100
// limit minSize to 10%, maxSize to 90%
if (newCodeEditorWidthInPercent <= 10) {
@@ -142,23 +154,36 @@ class MarkdownSplitEditor extends React.Component {
}
}
handleMouseUp (e) {
handleMouseUp(e) {
e.preventDefault()
this.setState({
isSliderFocused: false
})
}
handleMouseDown (e) {
handleMouseDown(e) {
e.preventDefault()
this.setState({
isSliderFocused: true
})
}
render () {
const {config, value, storageKey, noteKey, linesHighlighted, isStacking} = this.props
const storage = findStorage(storageKey)
render() {
const {
config,
value,
storageKey,
noteKey,
linesHighlighted,
isStacking,
RTL
} = this.props
let storage
try {
storage = findStorage(storageKey)
} catch (e) {
return <div />
}
let editorStyle = {}
let previewStyle = {}
@@ -169,39 +194,59 @@ class MarkdownSplitEditor extends React.Component {
editorStyle.fontSize = editorFontSize
let editorIndentSize = parseInt(config.editor.indentSize, 10)
if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132))
editorIndentSize = 4
editorStyle.indentSize = editorIndentSize
editorStyle = Object.assign(editorStyle, isStacking ? {
width: '100%',
height: `${this.state.codeEditorHeightInPercent}%`
} : {
width: `${this.state.codeEditorWidthInPercent}%`,
height: '100%'
})
editorStyle = Object.assign(
editorStyle,
isStacking
? {
width: '100%',
height: `${this.state.codeEditorHeightInPercent}%`
}
: {
width: `${this.state.codeEditorWidthInPercent}%`,
height: '100%'
}
)
previewStyle = Object.assign(previewStyle, isStacking ? {
width: '100%',
height: `${100 - this.state.codeEditorHeightInPercent}%`
} : {
width: `${100 - this.state.codeEditorWidthInPercent}%`,
height: '100%'
})
previewStyle = Object.assign(
previewStyle,
isStacking
? {
width: '100%',
height: `${100 - this.state.codeEditorHeightInPercent}%`
}
: {
width: `${100 - this.state.codeEditorWidthInPercent}%`,
height: '100%'
}
)
sliderStyle = Object.assign(sliderStyle, isStacking ? {
left: 0,
top: `${this.state.codeEditorHeightInPercent}%`
} : {
left: `${this.state.codeEditorWidthInPercent}%`,
top: 0
})
sliderStyle = Object.assign(
sliderStyle,
isStacking
? {
left: 0,
top: `${this.state.codeEditorHeightInPercent}%`
}
: {
left: `${this.state.codeEditorWidthInPercent}%`,
top: 0
}
)
if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused)
previewStyle.pointerEvents = 'none'
return (
<div styleName='root' ref='root'
<div
styleName='root'
ref='root'
onMouseMove={e => this.handleMouseMove(e)}
onMouseUp={e => this.handleMouseUp(e)}>
onMouseUp={e => this.handleMouseUp(e)}
>
<CodeEditor
ref='code'
width={editorStyle.width}
@@ -227,7 +272,7 @@ class MarkdownSplitEditor extends React.Component {
storageKey={storageKey}
noteKey={noteKey}
linesHighlighted={linesHighlighted}
onChange={(e) => this.handleOnChange(e)}
onChange={e => this.handleOnChange(e)}
onScroll={this.handleScroll.bind(this)}
spellCheck={config.editor.spellcheck}
enableSmartPaste={config.editor.enableSmartPaste}
@@ -236,11 +281,17 @@ class MarkdownSplitEditor extends React.Component {
enableMarkdownLint={config.editor.enableMarkdownLint}
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
/>
<div styleName={isStacking ? 'slider-hoz' : 'slider'} style={{left: sliderStyle.left, top: sliderStyle.top}} onMouseDown={e => this.handleMouseDown(e)} >
RTL={RTL}
/>
<div
styleName={isStacking ? 'slider-hoz' : 'slider'}
style={{ left: sliderStyle.left, top: sliderStyle.top }}
onMouseDown={e => this.handleMouseDown(e)}
>
<div styleName='slider-hitbox' />
</div>
<MarkdownPreview
ref='preview'
style={previewStyle}
theme={config.ui.theme}
keyMap={config.editor.keyMap}
@@ -255,10 +306,9 @@ class MarkdownSplitEditor extends React.Component {
breaks={config.preview.breaks}
sanitize={config.preview.sanitize}
mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
ref='preview'
tabInde='0'
value={value}
onCheckboxClick={(e) => this.handleCheckboxClick(e)}
onCheckboxClick={e => this.handleCheckboxClick(e)}
onScroll={this.handleScroll.bind(this)}
showCopyNotification={config.ui.showCopyNotification}
storagePath={storage.path}
@@ -266,7 +316,8 @@ class MarkdownSplitEditor extends React.Component {
customCSS={config.preview.customCSS}
allowCustomCSS={config.preview.allowCustomCSS}
lineThroughCheckbox={config.preview.lineThroughCheckbox}
/>
RTL={RTL}
/>
</div>
)
}