mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
Add ability to scroll pasted last line of editor
This commit is contained in:
@@ -59,6 +59,7 @@ export default class CodeEditor extends React.Component {
|
||||
tabSize: this.props.indentSize,
|
||||
indentWithTabs: this.props.indentType !== 'space',
|
||||
keyMap: this.props.keyMap,
|
||||
scrollPastEnd: this.props.scrollPastEnd,
|
||||
inputStyle: 'textarea',
|
||||
dragDrop: false,
|
||||
extraKeys: {
|
||||
@@ -153,6 +154,10 @@ export default class CodeEditor extends React.Component {
|
||||
this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
|
||||
}
|
||||
|
||||
if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
|
||||
this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd);
|
||||
}
|
||||
|
||||
if (needRefresh) {
|
||||
this.editor.refresh()
|
||||
}
|
||||
|
||||
@@ -242,6 +242,7 @@ class MarkdownEditor extends React.Component {
|
||||
fontSize={editorFontSize}
|
||||
indentType={config.editor.indentType}
|
||||
indentSize={editorIndentSize}
|
||||
scrollPastEnd={config.editor.scrollPastEnd}
|
||||
storageKey={storageKey}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
onBlur={(e) => this.handleBlur(e)}
|
||||
@@ -259,6 +260,7 @@ class MarkdownEditor extends React.Component {
|
||||
codeBlockFontFamily={config.editor.fontFamily}
|
||||
lineNumber={config.preview.lineNumber}
|
||||
indentSize={editorIndentSize}
|
||||
scrollPastEnd={config.editor.scrollPastEnd}
|
||||
ref='preview'
|
||||
onContextMenu={(e) => this.handleContextMenu(e)}
|
||||
tabIndex='0'
|
||||
|
||||
@@ -157,6 +157,7 @@ class NoteDetail extends React.Component {
|
||||
indentType={config.editor.indentType}
|
||||
indentSize={editorIndentSize}
|
||||
keyMap={config.editor.keyMap}
|
||||
scrollPastEnd={config.editor.scrollPastEnd}
|
||||
readOnly
|
||||
ref={'code-' + index}
|
||||
/>
|
||||
|
||||
@@ -236,27 +236,6 @@ class SnippetNoteDetail extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleTabDragStart (e, index) {
|
||||
e.dataTransfer.setData('text/plain', index)
|
||||
}
|
||||
|
||||
handleTabDrop (e, index) {
|
||||
const oldIndex = parseInt(e.dataTransfer.getData('text'))
|
||||
|
||||
const snippets = this.state.note.snippets.slice()
|
||||
const draggedSnippet = snippets[oldIndex]
|
||||
snippets[oldIndex] = snippets[index]
|
||||
snippets[index] = draggedSnippet
|
||||
const snippetIndex = index
|
||||
|
||||
const note = Object.assign({}, this.state.note, {snippets})
|
||||
this.setState({ note, snippetIndex }, () => {
|
||||
this.save()
|
||||
this.refs['code-' + index].reload()
|
||||
this.refs['code-' + oldIndex].reload()
|
||||
})
|
||||
}
|
||||
|
||||
handleTabDeleteButtonClick (e, index) {
|
||||
if (this.state.note.snippets.length > 1) {
|
||||
if (this.state.note.snippets[index].content.trim().length > 0) {
|
||||
@@ -532,8 +511,6 @@ class SnippetNoteDetail extends React.Component {
|
||||
onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
|
||||
onRename={(name) => this.renameSnippetByIndex(index, name)}
|
||||
isDeletable={note.snippets.length > 1}
|
||||
onDragStart={(e) => this.handleTabDragStart(e, index)}
|
||||
onDrop={(e) => this.handleTabDrop(e, index)}
|
||||
/>
|
||||
})
|
||||
|
||||
@@ -565,6 +542,7 @@ class SnippetNoteDetail extends React.Component {
|
||||
indentType={config.editor.indentType}
|
||||
indentSize={editorIndentSize}
|
||||
keyMap={config.editor.keyMap}
|
||||
scrollPastEnd={config.editor.scrollPastEnd}
|
||||
onChange={(e) => this.handleCodeChange(index)(e)}
|
||||
ref={'code-' + index}
|
||||
/>
|
||||
|
||||
@@ -34,7 +34,8 @@ export const DEFAULT_CONFIG = {
|
||||
fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
|
||||
indentType: 'space',
|
||||
indentSize: '2',
|
||||
switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
|
||||
switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
|
||||
scrollPastEnd: false
|
||||
},
|
||||
preview: {
|
||||
fontSize: '14',
|
||||
|
||||
@@ -73,7 +73,8 @@ class UiTab extends React.Component {
|
||||
indentType: this.refs.editorIndentType.value,
|
||||
indentSize: this.refs.editorIndentSize.value,
|
||||
switchPreview: this.refs.editorSwitchPreview.value,
|
||||
keyMap: this.refs.editorKeyMap.value
|
||||
keyMap: this.refs.editorKeyMap.value,
|
||||
scrollPastEnd: this.refs.scrollPastEnd.checked
|
||||
},
|
||||
preview: {
|
||||
fontSize: this.refs.previewFontSize.value,
|
||||
@@ -278,6 +279,17 @@ class UiTab extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div styleName='group-checkBoxSection'>
|
||||
<label>
|
||||
<input onChange={(e) => this.handleUIChange(e)}
|
||||
checked={this.state.config.editor.scrollPastEnd}
|
||||
ref='scrollPastEnd'
|
||||
type='checkbox'
|
||||
/>
|
||||
Allow editor to scroll past the last line
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div styleName='group-header2'>Preview</div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
<script src="../node_modules/codemirror/addon/search/search.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/scroll/scrollpastend.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/search/matchesonscrollbar.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/search/jump-to-line.js"></script>
|
||||
<script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user